Responsiv och adaptiv webbdesign är båda metoderna för att skapa fleranvändarvänliga webbplatser som fungerar bra på olika skärmstorlekar. Medan responsiv webbdesign rekommenderas av Google och är den mer populära av de två tillvägagångssätten, har båda dessa metoder för multi-device webbdesign sina starka och svaga sidor.
Låt oss titta på skillnaderna mellan lyhörd och adaptiv webbdesign, med inriktning på dessa nyckelområden:
- Lätt utveckling
- Nivån av kontroll du har över designen
- Bredd av enhet / skärmstöd
- Hur framtida vänliga lösningen är
- Övergripande nedladdningshastighet och prestanda på webbplatsen
Några definitioner
Innan vi går in i våra sida vid sida jämförelser av responsiv och adaptiv webbdesign, låt oss ta en stund att titta på en högnivådefinition av dessa två tillvägagångssätt.
Responsiva webbplatser har en fluid layout som ändras och anpassas oberoende av vilken skärmstorlek som används. Mediefrågor gör det möjligt för ändrade webbplatser att ändras, om fliken, om webbläsaren ändras.
Adaptiv design använder fasta storlekar baserat på förutbestämda brytpunkter för att ge den mest lämpliga layoutversionen för skärmstorleken som upptäckas när sidan först laddas.
Med dessa breda definitioner på plats, låt oss vända oss till våra viktiga fokusområden.
Utvecklingsförmåga
Den viktigaste skillnaden mellan lyhörd och adaptiv webbdesign är att dessa lösningar tillämpas på en webbplats. Eftersom lyhörd design skapar en helt flytande layout används den bäst på projekt där du redesignar webbplatsen från grunden. Försöker eftermontera en befintlig webbplats. Koden för att bli mottaglig är ofta en gruslig affär eftersom du helt enkelt inte har den kontrollnivå du skulle ha om du utvecklar den koden från början och tar hänsyn till lyhörd design för de tidigaste stadierna av den processen. Det innebär att när du ombyggar en webbplats för att vara responsiv, måste du göra kompromisser för att stanna inom den befintliga kodbasen.
Om du arbetar med en befintlig webbplats med fast bredd betyder det att du kan lämna storleken på webbplatsen för intakt och lägga till ytterligare adaptiva brytpunkter efter behov. I vissa fall, om ett projekts budget är litet och om det bara kommer att rymma en liten mängd utvecklingsarbete, kan du välja att bara lägga till nya adaptiva brytpunkter för mindre skärm / mobilcentrerade storlekar. Det betyder att du skulle tillåta större skärmar till alla att använda samma layout - kanske en 960 brytpunktsversion, vilket var vad den webbplatsen troligen ursprungligen var avsedd för.
Upp till ett adaptivt tillvägagångssätt är att du bättre kan utnyttja en befintlig webbplatsens kod, men en av nackdelarna är att du skapar olika layoutmallar för varje brytpunkt du väljer att stödja. Detta som kommer att påverka den arbetsbelastning som krävs för att utveckla och bibehålla denna lösning på lång sikt.
Design Control
En av styrkorna hos mottagliga webbplatser är att deras fluiditet gör det möjligt för dem att anpassa och stödja alla skärmstorlekar i motsats till endast de förinställda brytpunkterna bestämda i ett adaptivt tillvägagångssätt. Verkligheten är dock att mottagliga platser kan se bra ut på vissa viktiga skärmstorlekar (vanligtvis storlekar som motsvarar populära enheter tillgängliga på marknaden), men den visuella designen bryter ofta ner mellan de populära resolutionerna.
Till exempel kan en webbplats se bra ut vid bredbildsutformningen på 1400 pixlar, mellanskärmstorleken på 960 pixlar och den lilla skärmen ser 480 pixlar, men hur är det med de mellanliggande tillstånden i dessa storlekar? Som designer har du liten eller ingen kontroll över dessa mellanstorlekar och sidans visuella utseende i dessa storlekar är ofta mindre än idealisk.
Med en adaptiv webbplats har du mycket mer designkontroll över de olika layouterna som används eftersom de är fasta storlekar baserat på dina etablerade brytpunkter. Dessa obekväma mellanstater är inte längre ett problem eftersom du noggrant har utformat var och en, Äúlook,Äù (som betyder varje brytpunkts display) som kommer att levereras till besökare.
Så attraktiv som denna nivå av designkontroll låter, måste du vara medveten om att den kommer till ett pris. Ja, du har full kontroll över utseendet på varje brytpunkt, men det betyder att du måste investera den designtid som krävs för att designa för var och en av de unika layouterna. Ju fler brytpunkter du väljer att designa för, desto mer tid kommer du att behöva spendera på den processen.
Bredd av support
Både responsiv och adaptiv webbdesign trivs ganska robust stöd, speciellt i moderna webbläsare.
Adaptiva webbplatser kräver antingen serverkomponenter eller Javascript för skärmstorleksdetektering. Självklart, om en adaptiv webbplats kräver Javascript, betyder det att en webbläsare behöver ha den aktiverad för att den webbplatsen ska fungera korrekt. Det kan inte vara ett stort problem för dig eftersom de flesta kommer att ha Javascript i sina webbläsare, men när som helst en webbplats har ett kritiskt beroende av någonting, bör det noteras.
Responsiva webbplatser och mediafrågor som driver dem fungerar bra i alla moderna webbläsare. De enda problemen du kommer att få är de äldsta versionerna av Internet Explorer eftersom versioner 8 och nedan inte stöder mediefrågor. För att arbeta runt om det här används en Javascript-polyfil ofta, vilket betyder att det också är ett beroende av Javascript här, åtminstone för de föråldrade versionerna av IE.Återigen kan detta inte vara mycket oroande för dig, speciellt om din webbplatsanalys visar att du inte får många besökare med de äldre webbläsarversionerna.
Framtida vänlighet
Den flytande naturen hos mottagliga webbplatser ger dem en fördel jämfört med adaptiva webbplatser när det gäller framtida vänlighet. Detta beror på att de mottagliga platserna inte är byggda för att rymma endast en tidigare fastställd uppsättning av brytpunkter. De anpassar sig för att passa alla skärmar , inklusive de som kanske inte finns på marknaden idag. Det betyder att de mottagliga platserna inte behöver "fixas" om en ny skärmupplösning plötsligt blir populär.
Titta på den otroliga variationen i enhetens landskap (från och med augusti 2015 fanns det över 24 000 olika Android-enheter på marknaden). Att ha en webbplats som gör sitt bästa för att rymma det här brett spektrum av skärmar är avgörande för framtida vänlighet. Det beror på att det här inte är sannolikt att landskapet kommer att bli mindre diversifierat i framtiden, vilket innebär att designa för specifika skärmar eller storlekar kommer att bli omöjligt om vi inte redan har nått den verkligheten.
På den andra sidan av detta jämförelsesscenario, om en webbplats är adaptiv och det inte rymmer nya resolutioner som kan bli viktiga på marknaden, då kan du bli tvungen att lägga till denna punkt på de webbplatser du har skapat. Detta lägger till design och utvecklingstid på projekt och det innebär att de adaptiva platserna måste övervakas noggrant för att säkerställa att inga nya brytpunkter har införts på marknaden som måste läggas till på webbplatsen. Återigen, med enhetens mångfald som det är, måste du ständigt kontrollera efter nya storlekar och eventuellt ta emot dem med nya brytpunkter är en pågående utmaning som kommer att påverka det arbete du måste stödja en webbplats och kostnaden för det underhållet för det företag eller den organisation för vilken webbplatsen är för.
Prestanda
Responsiv webbdesign har länge anklagats (orättvist så i många fall) att vara en dålig lösning från nedladdningshastighet / prestationssynpunkt. Detta beror till stor del på det faktum att många webbdesigners i de tidiga dagarna av detta tillvägagångssätt enkelt tacklade små skärmmediasfrågor på en webbplatss existerande CSS. Detta tvingade de bilder och resurser som är avsedda för större skärmar att levereras till alla enheter, även om de mindre skärmarna inte använde dem i sina slutliga layouter. Responsiv design har kommit långt sedan de dagarna och verkligheten är att kvalitetshanterade webbplatser idag inte drabbas av prestandaproblem.
Långsamma nedladdningshastigheter och uppblåsta webbplatser är inte ett mottagligt webbproblem - det är ett problem som kan hittas på alla webbplatser. Bilder som är för tunga, förekommer från sociala medier, överdrivna skript och mer och väger en webbplats nere, men både lyhörda och adaptiva webbplatser kan byggas för att snabbt laddas. Självklart , De kan också byggas på ett sätt som inte ger prestanda en prioritet, men det här är inte ett drag av lösningen själv, utan snarare en återspegling av laget som var involverat i utvecklingen av webbplatsen själv.
Utöver Layout
En av de mest övertygande aspekterna av adaptiv webbdesign är att du inte bara har kontroll över webbplatsens utformning för inställda brytpunkter, utan också de resurser som levereras för dessa sidversioner. Till exempel innebär det att näthinnans bilder endast kan skickas till näthinnanheter, medan näthinnesskärmar får mer lämpliga bilder som är mindre i filstorlek. Andra webbplatsresurser (Javascript-filer, CSS-format, etc.) kan enkelt levereras när de behövs och kommer att användas.
Den här användningen av adaptiv webbdesign går långt utöver den enkla ekvationen som "om du eftermonterar en webbplats, kan adaptiv vara en enklare metod att använda." Alla webbplatser, inklusive kompletta redesign, kan dra nytta av en smartare inställning till en mer skräddarsydd upplevelse.
Detta scenario visar den nyanserade karaktären av denna "responsiva versus adaptive" debatt. Även om det är sant att ett anpassat tillvägagångssätt kan vara bättre lämpat än att lyssna på eftermonteringar på plats, kan det också vara en bra lösning för fullständiga redesign. På liknande sätt kan i vissa fall ett responsivt tillvägagångssätt läggas till på en befintlig webbplats kodbas, vilket ger den webbplatsen alla fördelar med ett fullt mottagligt tillvägagångssätt.
Vilken strategi är bättre?
När det gäller mottagande kontra adaptiv webbdesign finns det ingen klar "vinnare", även om lyhörd är säkert det mer populära tillvägagångssättet. I själva verket beror det "bättre" tillvägagångssättet på behoven hos ett specifikt projekt. Dessutom behöver det inte vara en "endera" eller "situation". Det finns många webbprofessorer som bygger webbplatser som kombinerar det bästa med responsiv webbdesign (vätskebredder, framtida stöd) med styrkan av adaptiv design (bättre designkontroll, smart laddning av resurser).
Kännetecknande för detta är att det verkligen inte finns någon "en storlek som passar alla lösningar." Både responsiv webbdesign och adaptiv har sina styrkor och deras utmaningar, så du måste bestämma vilken kommer att fungera bäst för ditt specifika projekt, eller om en hybridlösning faktiskt kan passa dig bäst.
