Responsive og adaptive webdesign er begge metoder til at skabe multi-enhed venlige hjemmesider, der fungerer godt på en række skærmstørrelser. Mens lydhurt webdesign anbefales af Google og er mere populært af de to metoder, har begge disse metoder til multi-enhed webdesign deres styrker og svagheder.
Lad os se på forskellene mellem lydhør og adaptivt webdesign, der specifikt fokuserer på disse centrale områder:
- Let udvikling
- Det niveau af kontrol du har over designet
- Bredde af enhed / skærmstøtte
- Hvordan fremtidig venlig løsningen er
- Samlet downloadhastighed og webstedets ydeevne
Nogle definitioner
Før vi går ind i vores side-by-side sammenligninger af lydhør og adaptivt webdesign, lad os tage et øjeblik at se på en definition på høj niveau af disse to tilgange.
Responsive websites har et fluid layout, der ændrer og tilpasser uanset hvilken skærmstørrelse der bruges. Medieforespørgsler gør det muligt for ensartede websteder at ændre sig selv, hvis flyet er, hvis browseren er ændret.
Adaptive design bruger faste størrelser baseret på forudbestemte breakpoints for at levere den mest hensigtsmæssige layoutversion til den skærmstørrelse, der registreres, når siden først indlæses.
Med disse brede definitioner på plads, lad os vende os til vores centrale fokusområder.
Let udvikling
Den væsentligste forskel mellem lydhør og adaptivt webdesign er i den måde, at disse løsninger anvendes på en hjemmeside. Fordi lydhør design skaber et fuldstændigt fluid layout, bruges det bedst til projekter, hvor du redesigner siden fra bunden. Forsøger at ombygge et eksisterende websted, er kode for at blive lydhør, er ofte en grusom affære, fordi du simpelthen ikke har det niveau af kontrol, du ville have, hvis du udviklede den kode fra bunden og tager højde for responsivt design i de tidligste faser af den proces. Det betyder, at når du eftermonterer et websted for at være lydhør, er du nødt til at indgå kompromiser for at forblive inden for den eksisterende kodebase.
Hvis du arbejder med et eksisterende websted med fast bredde, betyder en adaptiv tilgang, at du kan forlade størrelsen, som webstedet blev designet til intakt og tilføje yderligere adaptive breakpoints efter behov. I nogle tilfælde, hvis et projekts budget er lille, og hvis det kun vil rumme en lille mængde udviklingsarbejde, kan du vælge at kun tilføje nye adaptive breakpoints til mindre skærm / mobilcentriske størrelser. Dette betyder, at du vil tillade større skærme til alle at bruge det samme layout - måske en 960 pausepunkt version, hvilket var, hvad det websted sandsynligvis oprindeligt var designet til.
Opadrettelsen til en adaptiv tilgang er, at du bedre kan udnytte et eksisterende websteds kode, men en af de ulemper er, at du opretter forskellige layoutskabeloner til hvert brudpunkt, du vælger at understøtte. Dette vil have indflydelse på den arbejdsbyrde der kræves for at udvikle og opretholde denne løsning på lang sigt.
Design Control
En af styrken på lydhørwebsites er, at deres fluiditet gør det muligt for dem at tilpasse og understøtte alle skærmstørrelser i modsætning til kun de forudindstillede breakpoints bestemt i en adaptiv tilgang. Virkeligheden er imidlertid, at lydhøre websteder kan se godt ud på bestemte nøglescreenstørrelser (typisk størrelser, der svarer til populære enheder, der er tilgængelige på markedet), men det visuelle design bryder ofte imellem de populære beslutninger.
For eksempel kan et websted se godt ud på bredformatlayoutet på 1400 pixel, midterskærmstørrelsen på 960 pixel, og den lille skærm ser på 480 pixel, men hvad med de mellemliggende stater i disse størrelser? Som designer har du lidt eller ingen kontrol over disse mellemliggende størrelser, og det visuelle udseende af siden ved disse størrelser er ofte mindre end ideel.
Med et adaptivt websted har du meget mere designkontrol over de forskellige layouter, der bruges, fordi de er faste størrelser baseret på dine etablerede breakpoints. Disse akavet mellemliggende stater er ikke længere et problem, fordi du har omhyggeligt designet hver, "Look" (hvilket betyder hvert brudpunkts display), som vil blive leveret til besøgende.
Så attraktivt som dette niveau af design kontrol lyder, skal du være opmærksom på, at det kommer til en pris. Ja, du har fuld kontrol over udseendet af hvert brudpunkt, men det betyder, at du skal investere designtidspunktet, der kræves for at designe for hver enkelt af disse unikke layout. Jo flere breakpoints du vælger at designe for, jo mere tid skal du bruge på den proces.
Bredde af support
Både lydhør og adaptivt webdesign har en ret solid støtte, især i moderne browsere.
Adaptive hjemmesider kræver enten server side komponenter eller Javascript til skærmstørrelse afsløring. Selvfølgelig, hvis et adaptivt websted kræver Javascript, betyder det, at en browser skal have den aktiveret for at webstedet skal fungere korrekt. Det kan ikke være en stor bekymring for dig, da de fleste vil have Javascript i deres browsere, men når et websted har en kritisk afhængighed af noget, skal det bemærkes.
Responsive websites og medierne forespørgsler, der driver dem, vil fungere godt i alle moderne browsere. De eneste problemer, du får, er de ældste versioner af Internet Explorer, da versioner 8 og nedenfor ikke understøtter medieforespørgsler. For at omgå dette, bruges en Javascript-polyfill ofte, hvilket betyder, at der også er en afhængighed af Javascript her, i hvert fald for de antikke versioner af IE.Igen kan dette ikke være meget bekymrende for dig, især hvis dit websted analyser viser, at du ikke modtager mange besøgende ved hjælp af de ældre browserversioner.
Fremtidig venlighed
Den flydende karakter af lydhøre websites giver dem en fordel i forhold til adaptive sites, når det kommer til fremtidig venlighed. Dette skyldes, at de reagerende websteder ikke er bygget til kun at rumme et tidligere etableret sæt af breakpoints. De tilpasser sig til at passe alle skærme , herunder dem, der måske ikke er på markedet i dag. Det betyder, at modtagelige websteder ikke behøver at være "faste", hvis en ny skærmopløsning pludselig bliver populær.
Når man ser på den utrolige variation i enhedslandskabet (fra august 2015 var der over 24.000 forskellige Android-enheder på markedet), at have et websted, der gør sit bedste for at imødekomme denne brede vifte af skærme, er kritisk vigtig for fremtidens venlighed. Dette skyldes, at landskabet næppe vil få noget mindre forskelligt i fremtiden, hvilket betyder at designe for bestemte skærme eller størrelser bliver umuligt, hvis vi ikke allerede har nået den virkelighed.
På den anden side af dette sammenligningsscenario, hvis et websted er adaptivt og det ikke rummer nye beslutninger, der kan blive vigtige på markedet, så kan du blive tvunget til at tilføje det punkt på de websteder, du har oprettet. Dette tilføjer design og udviklingstid på projekter, og det betyder, at disse adaptive sites skal overvåges konsekvent for at sikre, at der ikke er introduceret nye breakpoints på markedet, der skal tilføjes på stedet. Igen er det en løbende udfordring, der har en indflydelse på det arbejde, du skal bruge for at understøtte et websted og omkostningerne ved vedligeholdelsen for at sikre, at enhedens mangfoldighed er det, det er nødvendigt at konstant kontrollere for nye størrelser og muligvis rumme dem med nye breakpoints. firma eller organisation for hvem stedet er til.
Ydeevne
Responsive webdesign har længe været anklaget (uretfærdigt så i mange tilfælde) at være en dårlig løsning fra et downloadhastighed / ydeevnesynspunkt. Dette skyldes i vid udstrækning, at mange webdesignere i de tidlige dage af denne tilgang blot tacklede små skærmmedieforespørgsler på et websteds eksisterende CSS. Dette tvang de billeder og ressourcer, der var beregnet til større skærme, der skulle leveres til alle enheder, selvom de mindre skærme ikke brugte dem i deres endelige layout. Responsivt design er kommet langt siden disse dage, og virkeligheden er, at kvalitetsfølsomme websteder i dag ikke lider af ydeevneproblemer.
Langsom downloadhastighed og oppustede websites er ikke et lydhurt webstedsproblem - det er et problem, der kan findes på alle hjemmesider. Billeder, der er for tunge, føder fra sociale medier, overdrevne scripts og mere og vejer et websted nede, men både lydhør og adaptive hjemmesider kan bygges for at være hurtigbelastning. Selvfølgelig , de kan også konstrueres på en måde, der ikke gør præstationen en prioritet, men det er ikke en egenskab af løsningen selv, men snarere en afspejling af holdet, der var involveret i udviklingen af selve webstedet.
Ud over layout
Et af de mest overbevisende aspekter ved adaptivt webdesign er, at du ikke kun har kontrol over webstedets design for sætte breakpoints, men også de ressourcer, der leveres til disse websiteversioner. For eksempel betyder det, at nethinden billeder kun kan sendes til nethindenheder, mens ikke-nethinden skærme får mere passende billeder, der er mindre i filstørrelsen. Andre webstedets ressourcer (Javascript-filer, CSS-stilarter osv.) Kan kun leveres smart, når de er nødvendige og vil blive brugt.
Denne brug af adaptive webdesign går langt ud over den enkle ligning af "Hvis du eftermonterer et websted, kan adaptiv være en nemmere tilgang til brug." Alle sider, herunder komplette redesigner, kan drage fordel af en smartere tilgang til en mere skræddersyet oplevelse.
Dette scenario viser den nuancerede karakter af denne "responsive versus adaptive" debat. Selv om det er rigtigt, at en adaptiv tilgang kan være bedre egnet end lydhør for eftermonteringsanlæg, kan det også være en god løsning til fuld redesign. Tilsvarende kan i nogle tilfælde en responsiv tilgang tilføjes på et eksisterende websteds kodebase, hvilket giver dette websted alle fordelene ved en fuldt responsiv tilgang.
Hvilken fremgangsmåde er bedre?
Når det kommer til lydhør mod adaptivt webdesign, er der ingen klar "vinder", selvom lydhør er bestemt den mere populære tilgang. I virkeligheden afhænger den "bedre" tilgang på behovet for et bestemt projekt. Desuden behøver det ikke at være en "enten" eller "situation". Der er mange web-fagfolk, der bygger websteder, der kombinerer det bedste af lydhør webdesign (væskebredder, fremtidig support) med styrken af adaptivt design (bedre designstyring, smart indlæsning af ressourcetjenester).
Denne fremgangsmåde, der almindeligvis er kendt som RESS (Responsive Web Design med Server Side Components), viser, at der virkelig ikke er nogen "one size fits all solution." Både responsivt webdesign og adaptiv har deres styrker og deres udfordringer, så du skal bestemme hvilken vil fungere bedst til dit specifikke projekt, eller hvis en hybridopløsning faktisk passer dig bedst.
