Jag surfar på internet varje dag, på flera enheter. Jag använder min Macbook Pro, iMac, PC, iPad, iPhone och ja även min TV. Så det stör mig verkligen när jag ser webbplatser som inte är optimerade för större skärmupplösningar, eller det tar två minuter att ladda på min mobila enhet.
Vi har alla omfamnat begreppet responsiv design. Mycket få människor argumenterar mot det. Faktum är att den enda övertygande repost jag nyligen hört är att en kund inte vill betala för den extra tiden som är inblandad. Men som med någon ny övning har myter utvecklats för att motverka det.
Låt oss se om vi kan byta några av de missuppfattningarna ...
Ja mobilbanan exploderar och ja det är drivkraften bakom lyhörd design, men när vi tänker på responsiv design måste vi överväga mer än bara mobil. Med introduktionen av näthinnesskärmar och videospelbläsare ser internetanvändare nu på webbplatser på större skärmupplösningar och i många olika sammanhang.
Försök att ta hänsyn till olika användarvänliga kontekster när du utformar och utvecklar lyhörda webbplatser. Du måste tänka på vilken enhet en användare använder: Är användaren på en mobilenhet eller hemma framför tv: n? Du måste tänka på var användaren befinner sig: Är användaren i linje vid mataffären eller camping i vildmarken? Att ha bra innehåll betyder ingenting om din webbplats tar tio minuter att ladda medan dina användare sitter på stranden med en margarita.
Innehåll är allt, men kontext är överallt och det är något som du absolut inte har kontroll över. Därför ska ditt innehåll, realistiskt, skala till en stor eller liten upplösning. Vi har en uppsättning verktyg till vårt förfogande som gör det möjligt för oss att manipulera layouter, optimera textstorlekar och öka prestanda för något sammanhang så kom ihåg att använda dem.
Kom ihåg att kontexten skiftar hela tiden, varför det är så viktigt att balansera den visuella layouten, användarens behov och prestanda när man närmar sig en lyhörd design. Det handlar inte bara om mobil.
Jag brukade argumentera för att lyhörd webbdesign inte fungerar för varje projekt och att det beror på användningsfallet. Nåväl, jag har nyligen ändrat min åsikt och jag tror verkligen att om vi ska vara användarinriktade designers och utvecklare måste vi närma oss varje projekt med responsiv design i åtanke.
Webbplatser med fast bredd kan vara begränsande för större och mindre skärmupplösningar. Slutsatsen är att våra webbplatser ska vara tillgängliga för alla oavsett vilken enhet eller skärmupplösning de använder, utan begränsningar.
Jag har märkt en trend som framträder inom branschen där designers och utvecklare bygger upp svåra webbplatser som endast är anpassade till vissa enhetsupplösningar, och jag är också skyldig i detta. De tre vanligaste enheterna är naturligtvis bärbara datorer / stationära datorer, iPads och iPhones (eller andra mobila enheter). Som designers behöver vi inse att responsiv design handlar om designbrytningspunkter och gör innehålls läsbar och tillgänglig för alla, inte bara användarna av vissa enheter.
Med det sagt, om du utformar webbplatser i ett program, är det viktigt att ha någon form av ramar med brytpunkter för att fungera. Jag föreslår att du skapar din egen. Optimera din layout enligt innehållet. Det bästa sättet att ta reda på vilka brytpunkter som fungerar bäst är att skissa några trådramar först för att få en idé, då kan du börja lägga ner pixlar i din programvara som du väljer. Se till att du arbetar av samma rutnät när du använder wireframing och design.
Om du är som jag kodar du dina trådramar och skapar en levande prototyp. Detta har hjälpt mig mycket med mitt lyhörda arbetsflöde eftersom jag kan skapa en vätskemockup och lägga till brytpunkter i designen när designen bryter istället för att försöka knäppa pixlar i Photoshop.
Ett av de största problemen jag har märkt på många mottagliga webbplatser är att typografi kastas till vargarna när designers och utvecklare väljer att använda enhetsbrytningspunkter över designbrytningspunkter. Enligt min åsikt väljer en enhet över design en fullständig bortseelse för innehållet som publiceras och användaren använder det innehållet. Innehållet bör behålla dess läsbarhet tills det måste anpassas för att upprätthålla denna läsbarhet. Innehållet kommer alltid att vara kung och tillgängligheten och läsbarheten av ditt innehåll borde alltid vara högsta prioritet.
Ett av de sätt som jag tycker om att hantera innehållets läsbarhet i en lyhörd design är att använda relativa enheter som ems för fontstorlek, vaddering, marginaler och layout. Responsiv design handlar om proportionerliga layouter och enligt min mening är ems en perfekt passform.
Ems är relativa enheter som kan skalas till teckensnittstorleken för moderelement, de kan spara mycket tid och krångel, och de bidrar till att upprätthålla strukturen i hela layouten. Vad betyder det här att du frågar? Tja, det betyder att när basstorleken ökar eller minskar anpassas layouten jämnt utan att fudga något uppåt.
Här är ett exempel, säger vi att vi har hittat två design brytpunkter, en för en väldigt stor skrivbordsskärm med en superupplösning och en för en liten tablett. Låt oss också säga att vår basstorlekstorlek är 16px vilket motsvarar 1.0em och vi stöter upp basstorleken upp till 22px när webbplatsen ses med en upplösning på 3840 x 2160 (superupplösning) och vi sänker den här basstorleken till 14px med en upplösning på 800 x 600 (liten bärbar dator / tablett). Vi har just dramatiskt ändrat storleken på typen och layouten på vår hemsida vid två angivna brytpunkter, en stor och en liten. En rubrik på 1.4em med en 22px basstorlekstorlek för större upplösningar innebär att 1,4em är 30,8px och vid den mindre basstorleken på 14px, skulle 1.4em vara 19.6px. Även om vår fontstorlek blev dramatiskt större vid 3840 x 2160 behöver vi inte oroa oss för att layouten bryts, eftersom den också har anpassat sig. Låt oss säga att vårt innehållselement hade en bredd på 50em. Vid en upplösning på 800 x 600 skulle det vara 700px men vid upplösningen 3840 x 2160 skulle det vara 1100px. Våra vadderingar och marginaler skulle också anpassas. Vid den större upplösningen som har teckensnittstorlekar och layout i ems har vi gjort det möjligt för vår design att skala proportionellt vilket gör vårt innehåll mer tillgängligt och mer läsbart.
Syftet med responsiv design är att göra ditt innehåll tillgängligt för alla, även deaktiverade, över alla skärmupplösningar och enheter. Att dölja innehåll är aldrig en bra idé och chansen är att om du måste dölja det behövde du inte att börja med det. Att dölja innehåll gör det oläsligt för skärmsläsare och du gör nu ditt innehåll otillgängligt för personer med visuell eller kognitiv funktionsnedsättning. Tänk på att innehållet ska vara universellt på alla enheter, inte straffa dina användare genom att begränsa vad de kan visa på en separat enhet.
Som sagt, hittar jag fortfarande några användarfall där displayen: ingen; kommer till hands. För det mesta gäller alla användningsfall med någon form av navigering, och jag använder displayen: ingen; på navigationselement som ändrar formulär på olika enheter. Det är aldrig en bra idé att begränsa eller dölja innehåll på olika enheter eftersom du troligen grundat det beslutet på ett antagande och någon användare, någonstans, kommer att ha en mycket dålig upplevelse.
Det har varit ett antal webbplatser som jag nyligen sett på som har visat brist på empati gentemot användare med låg bandbredd. De flesta av dessa webbplatser har samma saker gemensamt, stora bilder och stora JavaScript-bibliotek, och många av dessa webbplatser skulle kunna ha optimerats om de utformades med ett mobilt första tillvägagångssätt.
Eftersom det fortfarande finns mycket diskussion om responsiva bilder, är det svårt för någon att begå sig till någon lösning. Jag förstår dilemma, men väntar på en perfekt lösning som är standard för alla webbläsare, och enheter gör inte din nuvarande webbplats enklare att använda på enheter med begränsad bandbredd. Hitta en lösning som bäst löser ditt problem och kör med det. Att inte hitta en lösning innebär prestationsproblem för alla, och det klarar helt avsikten med responsiv design.
Större JavaScript-bibliotek kan också orsaka problem på mindre enheter. Försök hitta ett sätt att ringa dem villkorligt baserat på skärmupplösning eller typ av enhet. Prestanda bör inte vara en eftertanke när det gäller responsiv design.
Webben har exploderat, och med tillkomsten av mobil- och smarttelefonteknik kan vi komma åt innehåll var som helst och i vilket sammanhang som helst. Det är viktigt att vi kan nå alla våra användare och ge dem vad de vill, när de vill ha det. Responsiv design är en helt ny teknik och enligt min mening är det den perfekta tekniken för att förena vårt innehåll över hela webben.
Vilka andra myter om responsiv design skulle du vilja debunk? Finns det några nackdelar med responsiv design? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, mottaglig webbbild via Shutterstock.