Responsive webdesign er blevet en catch-all term for at gøre dit websted fungerer godt ved lave opløsninger.
Smartphones revolutionerede mobilwebben, og tabletter kaster en ny skruenøgle ind i gearene med deres voksende popularitet. Med alle de overvejelser, der kunne opleves en hjemmeside i dag på en smartphone med lav opløsning, en medium opløsningstabel eller en højopløsningsskrivebord eller bærbar computer. Når du kaster nethinden i blandingen, er antallet af mulige skærmstørrelser svimmel. Ideelt set vil dit websted se og fungere yndefuldt på alt ovenfor, ved enhver beslutning.
Responsive webdesign i sig selv er processen med at lave et websted på meget små skærme, meget store skærme og ved enhver løsning imellem.
I løbet af de sidste par år har branchen samlet set udviklet en liste over fælles bedste praksis. Mange af disse metoder fokuserer på eftermontering af hjemmesider beregnet til høj opløsning ned til lavere størrelser. Andre starter på mobilen og arbejder op til de større viewports, optimerer efter behov. Alle disse fremgangsmåder kan generelt kategoriseres som enten responsive eller adaptive layouts.
Responsive layouts udfører generelt bedre end adaptive layouts, men i nogle tilfælde (komplekse webapps for eksempel) kan en adaptiv tilgang kunne betjene brugerne bedre. Under alle omstændigheder er målet at få dit websted til altid at se sit bedste ud på den ønskede løsning.
De fleste mennesker vælger at bruge medieforespørgsler til at gøre dette, som de er rolige faste medmindre du har brug for support til IE8 eller derunder. For de af os, der stadig har et publikum i IE6-8, har Scott Jehl oprettet en JavaScript-polyfill hedder Respond.js det vil få tingene til at fungere.
Først havde mange webdesignere minimal kommunikation med udviklere indtil handoff. Nu skal designere og udviklere imidlertid arbejde sammen gennem både design og udviklingsprocessen, så alting går glat. Fra brugeranalyse til, hvad der kan eller ikke kan omarrangeres, når du ændrer visningsporte, er designere og udviklere tættere end nogensinde, hvis ikke den samme person. Hvis du leder efter inspiration til, hvilke responsive eller adaptive layouter der ligner, MediaQueri.es er et populært webdesign galleri, der viser fire visninger af et websted.
Når ideen om lydhurt webdesign først begyndte at komme til jorden, dominerede adaptive teknikker et stykke tid. Det er nemmere at overgå til at designe og udvikle til disse layouts, selvom de kræver mere arbejde end deres lydhøre konterparts. Dette er også den rute, mange mennesker tager, når eftermontering af en eksisterende hjemmeside skal være mobilvenlig. På grund af arten af adaptive layouter giver de langt mere kontrol over designen af hjemmesiden. Du skal kun designe for bestemte visningsporte, og browsere viser kun den højeste, der passer ind i bredden. Disse layouts er dem, der "snap", når du justerer, når du ændrer dit browservindue. Faktisk hvis du ændrer størrelsen på dit vindue til mindre end 1024 pixel, kan du se denne pludselige ændring, jeg taler om, da layoutet på dette websted justerer for at fokusere på en mellemliggende opløsning.
Når man designer for en adaptiv udviklingsmetode, er arbejdet ret nemt. Før responsiv webdesign blev en ting, har du simpelthen designet et layout og derefter udviklet det. Nu skal du designe for flere visningsporte og udvikle dem. Generelt er det lettere at starte med lavopløsningsvisninger og arbejde dig op. Hvis du starter med high-resolution-visninger og går ned, kan tingene ende op lidt ... kompakt. Og på det tidspunkt når du mobil, rotet.
Antallet af viewports du designer til er helt op til dig og udvikleren, udarbejde en kampplan baseret på dine brugere. Hvis nuværende analyser viser, at brugerne hovedsagelig bruger visninger med lav og mellem opløsning, skal du planlægge dem. Du vil have mindst tre: en til visninger med lav opløsning (smartphones), mellemliggende opløsninger (tabletter) og en til højopløsningsvisninger (desktops og laptops). Ideelt set er planlægningen for seks standarden, der har et højt og lavopløsningslayout for hver af de tre visninger, der er anført ovenfor. Men at have for mange mere end det vil gøre udviklingen og vedligeholdelsen for meget at håndtere, så vær forsigtig.
Udvikling af et adaptivt layout er faktisk ret simpelt også. Forudsat at du har arbejdet med designeren (eller er designer) fra farten, er det ligesom at udvikle en traditionel hjemmeside. Du begynder med at udvikle webstedet på et mobilt lavopløsningsvisningsport. Når du får det gjort, bruger vi medieforespørgsler til at udvide layoutet til højere opløsningsvisninger. Nedenfor er lav, medium og høj opløsning viewport medie forespørgsler:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Her kommer "snap" fra den adaptive tilgang. Da vi målretter mod flere almindelige viewport-beslutninger, går det fra den ene til den anden, når størrelsen ændres, for at layoutet kan springe. Som jeg nævnte tidligere, er adaptivt design og udvikling kun meget nyttigt til eftermontering eller til komplekse webapps. Design og udvikling for disse mange layouter for uafhængige viewports er meget mere besvær, hvis det ikke er nødvendigt.
I dag er responsiv design og udvikling den de facto tilgang til brug. Mens det giver mindre kontrol over layoutet i forhold til en adaptiv tilgang, er det meget mindre arbejde at implementere og vedligeholde, da du teknisk set kun har et layout. Det er også mere tilpasset til hjemmesiden også, og dette er nøglesalget. Du kan lave dine egne breakpoints baseret på, hvornår dit design går i stykker eller ikke ser ud som ønsket.
Responsive layouts indeholder også væske layout. Inden responsiv webdesign fanget på, var væskesystemer populære - layouter ved hjælp af procentdele for bredder. Mens de sikkert fungerede godt i de fleste tilfælde, det var før vi havde smartphones og tabletter. Nu er de fleste flydende layouter forstærket af medieforespørgsler ved meget lave og meget høje opløsninger. Ellers kan du ende med meget kompakte eller uhyre store layouter.
Mens du har en meget enkel vejledning til at følge med adaptivt design, er responsivt design ikke så klart skåret. Der er opvarmet debat, at design i browseren er den bedste måde at gå om det - designe og udvikle på samme tid. Da du i det væsentlige vil tage hensyn til alle viewports ved design, er der mere arbejde involveret i designsiden. Ideelt set ønsker vi at holde synspunkterne i tankerne, men ikke design for nogen bestemt. Hvis det er muligt, prøv at mødes midt på jorden; Fokuser på mid-resolution-visninger, mens du tager i betragtning, at layoutet skal justere for lavere og højere opløsninger senere.
Det er meget vigtigt at bruge eksisterende brugeranalyse, hvis du har dem. Hvis dit websted allerede har analyser, der viser, at dit publikum primært læser fra visioner med lav opløsning, skal du designe med fokus på dem. Mål dit publikum , selvom det betyder at ignorere nogle af de bedste metoder derude. I sidste ende vil dit websted være at betjene dem, ikke de mennesker, der aggregerer disse "bedste" praksis.
Når designfasen er færdig, er udvikling hvor den rigtige sjov begynder. Som nævnt før, hvis du har analytiske data fra dit typiske publikum, start der. Når du har fået dit layout udviklet, bruger du medieforespørgsler for at gøre det lydhurt. I stedet for at definere indstillede visningsporte vil du i stedet manuelt ændre størrelsen på din browser, indtil layoutet bryder. Når det sker, er det din breakpointbredde - tilføj et medieforespørgsel for at rette pause i design og fortsæt med at ændre størrelsen. Ideelt set gør du det fra en højopløsningsenhed, så du kan se alle viewports. Når du har sikret dig, at du har support til lave og høje opløsninger, skal du fortsætte til test.
Sjældent kan du støde på et websted, der bruger en brugerdefineret løsning, f.eks {$lang_domain} . Generelt falder hovedparten af nettet i enten de responsive eller adaptive grupper som beskrevet ovenfor, men nogle gange bliver folk kreative og skaber deres egen løsning. {$lang_domain} gør det ved at starte med standard lave, mellemstore og høje brydpunkter, og derefter supplere efter behov mellem hinanden, når layoutet bryder. Ud over det er layoutet også flydende i naturen op til et sæt maks opløsning. Med dette i tankerne bliver du kreativ og skaber noget der bryder normen!
Der er desværre ikke nogen god løsning på browseren, der tester disse layouts endnu. Den bedste måde at teste på, er at gøre det manuelt: ilægning af siden på din telefon, tablet, laptop og alt andet rundt. Du kan også bruge en viewportspoofer i din browser, hvis den understøtter en sådan udvidelse. Ripple Emulator er en forlængelse, jeg bruger i krom for at teste nogle visninger med lav opløsning. Selv om det er helt sikkert ubelejligt at teste manuelt på enheder, giver det et mere præcist indtryk af den funktionalitet, dit websted har. UI, der ser godt ud på en emulator, kan faktisk udføre ganske dårligt på en faktisk enhed.
Så omfattende som denne artikel er, er dette simpelthen en primer om emnet for layouttyper. Der er mange oplysninger om lydhurtige webdesign metoder, der ikke er medtaget i denne artikel; Optimering af brugergrænseelementer og typografi, responsive billeder og medier, enhedsbilledforhold og meget mere er ikke forklaret her. Der er dog mange kilder til sådan viden, i meget mere information tætte former. Siden ideen om lydhurt webdesign kom rundt, har vi bidraget til et overordentlig stor væld af viden om emnet. Jeg håber ved at forklare forskellen mellem layouttyper her, du vil bedre kunne håndtere ideen om en lydhør web ... uden at gå tabt ned i kaninhullet.
Fællesskabet skaber konstant nye teknikker og skaber kreative løsninger på problemer, vi lige er begyndt at støde på. Så selv om der er et stort væld af oplysninger til rådighed om lydhurt webdesign derude, er det et koncept, der stadig er i barndommen. Mens bedste praksis og almindelige brugssager er lette at overholde, være kreative og belægge, bliver din egen løsning altid opmuntret. Hvis du har nogle tip eller forslag til dem, der bare kommer ind i eller udvider vores viden om lydhurt webdesign og udvikling, gnister du en diskussion nedenfor!
Fremhævet billede / miniaturebillede, anvendelser lydhør billede via Shutterstock.