Big Vs. Små: Utmaningar i Responsive Web Design
Eftersom antalet och olika enheter från vilka vi har tillgång till internet ökar, presenterar nya webbdesignutmaningar sig.
Det är inte längre helt enkelt att ha en mobilversion och en webbläsareversion. Nu måste vi överväga om den person som besöker vår webbplats besöker en surfplatta, en smartphone (och om den här smarttelefonen har en högupplöst skärm eller inte), en netbook, en stationär dator eller en bärbar dator (och om den är en med en högupplöst eller en låg-skärm) eller helt annan enhet.
Att optimera upplevelsen för alla dessa olika möjligheter blir mer förväntad bland kunniga internetanvändare.
För några år sedan skulle en designer ha tittat på listan över enheter som de var tvungna att designa för och sedan bestämt sig för att skapa individuella webbdesigner för varje enhet. Men eftersom antalet och olika enheter ökar blir det en opraktisk, tidskrävande proposition.
I stället bör designers skapa design som anpassar sig till varje webbläsares behov, oberoende av enheten.
Många skärmar blir allt större
Skärmupplösningarna på stationära och bärbara datorer blir allt större. För bara några år sedan verkade en upplösning på 1280 x 800 pixlar stor. Nu är det ganska mycket i slutet av vanliga skärmupplösningar på bärbara datorer, och det är inte ovanligt att nya bildskärmar har full HD-skärmupplösningar (1920 x 1080 pixlar).
Vi når de övre gränserna för vad som är praktiskt för en bildskärm (med aktuell gränssnittsteknik, även om framtida utveckling kan ändra det), men även att designa för 1920 pixlar bredder är mycket annorlunda än att designa för en skärm som bara är 1024 pixlar bred. Eller åtminstone bör det vara.
Att lägga till potentiella problem med stora skärmar är att många spelsystem och nya TV-apparater nu är internetklar. Några av dessa har faktiskt väldigt bra inbyggda webbläsare, så det är helt möjligt att en del av webbplatsens besökare tittar på din webbplats på sin 55-tums HD-TV.
Men då finns det mobila enheter
I motsatta änden av spektret är det enorma antalet internetanvändare som nu använder webben främst från sin smartphone, surfplattform eller netbook. Skärmen på dessa enheter kan sträcka sig från cirka 240 x 320 pixlar (i vissa nedre och äldre smartphones) till 1024 x 600 eller 768 (på vissa netbooks och surfplattor).
Självklart kommer en webbplats avsedd för en bildskärm som är 1280 + pixlar bred inte att se direkt på en skärm som bara är 320 pixlar bred. Eller till och med en som är 600 eller 800 pixlar bred. Horisontell scroll, speciellt på pekskärmsenheter, är störande i bästa fall.
Att designa en mobil webbplats brukade vara den gynnade lösningen för olika skärmupplösningar. Men sedan nu finns det ett stort antal storlekar, snarare än bara "normal" och "liten", det är inte den bästa ideen längre. Mobila webbplatser som är utformade för en 240 x 320 pixel skärm kommer inte att se bra ut på en iPad (eller till och med en ny iPhone med näthinnans skärm). Och om du designar för näthinnans bildskärm eller liknande skärmar med högre resningsenhet, kommer du att alienera många besökare med andra smartphones som inte har sådana högupplösta skärmar.
En flexibel grund
Att börja med en flexibel grund är viktig. Ett fluidnät är inte tillräckligt. Du behöver också ett rutnät eller en layout som kan ändras baserat på skärmupplösningar och enhetstyper. För enkla layouter är det inte så hög order. Men om du vill ha något som är lite mer komplext, med varierande antal kolumner beroende på skärmens bredd, finns det några saker du måste ta hänsyn till.
Flexibla layouter
Skapa ett fluidnät är ett fantastiskt sätt att skapa en mer responsiv design . De bästa fluidnätverket kommer att kombinera omformning och omplacering av innehåll efter behov, eftersom skärmens bredd ändras. (Ett annat bra verktyg för att skapa fluidnät är Tiny Fluid Grid , som gör att du kan skapa galler med maximal bredd på upp till 1200px och baseras på 1kb Grid.)
Så länge som din skärmupplösning stannar över 800 px bred, skulle en 3-kolonnlayout vara 3 kolumner, enkelt att justera bredden på varje kolumn för att bäst tjäna innehållet. Men när skärmens bredd sjunker under 800px kan din tredje kolumn falla under din andra kolumn, så att varje kolumn kan vara en lättlästbar bredd.
Om skärmen blir ännu smalare, låt oss säga 480px (typiskt på många smartphones), hela designen sjunker till en enda kolumn, med den andra och tredje kolumnen som visas under huvudinnehållet. Om navigeringen fanns i en av dessa kolumner kan den migrera till toppen av sidan, så att den fortfarande är lättillgänglig.
Med hjälp av CSS3-mediafrågor kan vi inte bara rikta oss mot en viss klass av enheter (t.ex. mobila enheter), men även specifika specifikationer inom dessa enheter. Så vi kunde ha separata stylesheets för ett antal olika storlekar av enheter.
Skönheten i mediefrågor i CSS3 är dock att de också kan användas direkt inom CSS. Så om allt vi behöver ändra är antalet kolumner, eller något liknande, kan vi bara definiera a @media regel i stilarket. WebDesignerWall har en bra översikt över hur man använder CSS3 Media Queries.
Vätskebilder
Att skapa bilder som anpassar sig till storleken på kolumnen eller div som de är med är en annan viktig aspekt för att skapa en mer responsiv design inom en vätskelayout. När kolumner ändras, kan bilderna de innehåller, ändras så att de fortfarande passar in i kolumnens begränsningar.
Det finns ett par sätt att göra om det här: Du kan få din bildförändring helt på farten, eller du kan dynamiskt beskära bilden för att bara visa de viktigaste delarna. I vissa fall, med hjälp av en kombination av dessa två tekniker (så att bilden överstiger en viss storlek, men när den blir mindre än den storleken börjar den grödas) kan ge de mest önskvärda resultaten.
Ostoppbar Robot Ninja har ett enkelt skript som automatiskt ändrar dina bilder. Om du vill selektivt dölja delar av din bild dynamiskt (effektivt beskära dem), Zomigi.com har en bra metod för att göra det. De har också en metod för att skapa glidande kompositbilder som kan vara användbart för vätskedesigner.
Bredare skärmöverväganden
Enligt StatOwl , över 73% av icke-mobila internetanvändare under de senaste tre månaderna använde datorer med en upplösning högre än 1024 x 768. Och om du tittar på statistiken för 1024 x 768 specifikt ser du att den förlorar marknadsandelar. Det är uppenbart att det redan finns ett stort skifte till högre skärmupplösningar, en som designers skulle vara felaktigt att ignorera.
Naturligtvis bara för att det finns några användare där ute som har flyttat till större skärmupplösningar betyder det inte att varje designer där ute ska hoppa på bredvågsvagnen och börja skjuta omkonstruktioner till sina kunder. Mobil adoption är viktigare just nu än bredare bredder. Men eftersom vi förhoppningsvis har övertygat dig om att den lyhörda designen är vägen att närma sig nya webbdesigner och omkonstruktioner, är det viktigt att överväga hur man gör webbplatser på bredare bredder.
Vem använder bredare upplösningsskärmar?
Den som arbetar inom design eller kreativa fält har sannolikt en skärmupplösning på minst 1280 pixlar bred (om inte mycket bredare). Detta inkluderar webb- och grafisk formgivare, filmskapare, fotografer och andra. Tekniska kunniga användare är också mer benägna att använda skärmar med högre upplösning, eftersom de är mer benägna att regelbundet uppgradera sin datautrustning.
Rika konsumenter är en annan grupp som sannolikt kommer att använda högre upplösningsövervakare. Precis som med tekniskt kunniga användare beror det på att personer med mer disponibel inkomst sannolikt kommer att köpa nya datorer regelbundet. Naturligtvis multipliceras denna effekt med konsumenter som är både rika och tekniskt kunniga.
Mac-fans skulle vara en annan grupp som är mer benägna att använda en högre skärmupplösning på grund av det faktum att nyare MacBooks, iMacs och andra Apple-datorer alla har skärmupplösningar på minst 1280 x 800. Det utesluter naturligtvis de produkter de har körs på iOS (iPhone, iPod Touch och iPad).
Vem använder inte bredare resskärmar?
Medan det finns många användare där ute med högupplösta skärmar, finns det fortfarande många internetanvändare som inte är det. Dessa faller i några olika grupper.
Studenter är förmodligen en av de största grupperna av lågresursanvändare. Skolor måste ofta göra med datorer i fem eller tio år, och i många fall är datorerna de inte ens state-of-the-art när de köper dem. Om din webbplats riktar sig till pedagogiska användare (inklusive skolfakulteter och administratörer, förutom studenter) ser du förmodligen många användare vars skärmar bara är 1024 pixlar breda och kanske även vissa som fortfarande har bildskärmar inställda på 800 pixlar breda.
Netbook-användare är en annan stor grupp som i allmänhet har lägre skärmar. De flesta netbooks, särskilt de nedre ände, har skärmupplösningar på 1024 600 eller 728 pixlar eller så. Detsamma gäller iPad (1024 × 768) och många andra tabletter på marknaden, varav några har ännu lägre skärmupplösningar.
Människor i mindre utvecklade länder brukar använda äldre eller nedre datorer. Om du riktar in användare som inte är i Nordamerika eller Västeuropa eller i områden där internetkaféer vanligtvis används för internetåtkomst (som är fallet i många utvecklingsländer), ser du sannolikt på en majoritet av Användare som tittar på din webbplats på 1024 med 768 eller liknande skärmupplösningar.
Företagare har ofta också lägre skärmupplösningar. Många icke-tekniska företag kommer att hänga på datorutrustning tills det är helt föråldrat innan de uppgraderas. Och det är vettigt, särskilt med tanke på kostnaden för att uppgradera dussintals eller hundratals datorer samtidigt. Om du riktar in på företagsanvändare kanske du vill hålla fast vid en design baserad på 1024-bredden.
Den sista gruppen som sannolikt har skärmar med lägre upplösning är personer som inte värdesätter teknik. Medan dessa människor vanligtvis inte störde med datorer alls, ser många nu värdet på att ha en dator hemma. Men de är också osannolikt att gå ut och spendera mer än några hundra dollar på en dator, eller de kan få en begagnad dator från en familjemedlem eller de klassificerade annonserna. Om din webbplats är inriktad på icke-tekniska konsumenter, särskilt de på landsbygden, vill du noggrant överväga vad de troliga skärmupplösningarna är och utforma i enlighet därmed.
Spåra dina besökare
Allt som nämns ovan ger oss ett av de viktigaste stegen att ta om du överväger att designa för en större skärmupplösning: spåra besökarna som kommer till din webbplats och titta på vilken skärmupplösning de använder. Något bra analytikprogram ger dig den här informationen, och det är oerhört värdefullt att fatta beslut som detta.
Om du upptäcker att de allra flesta av dina användare kommer från datorer med högre skärmupplösningar, kan du förmodligen designa din webbplats för de användarna utan att se för mycket effekt. Men om du upptäcker att ett stort antal besökare fortfarande använder skärmupplösningar på 1024 eller smalare, kanske du vill ompröva.
Bredare bredder är viktiga för innovation
Jag är säker på att det finns många designers där ute som verkligen inte ser punkten i bredare bredder. De är glada att designa vid 960 pixlar. De har system för att designa vid dessa bredder. De har förinställda CSS-filer alla inställda för 960 pixlar. Varför skulle de vilja gå bredare? Speciellt när en stor bit internetanvändare fortfarande arbetar med skärmar som är 1024 pixlar breda.
Det enkla svaret är att så länge vi fortsätter att designa för 1024, finns det inget incitament för de flesta konsumenter att uppgradera. Och det betyder att det inte finns något incitament för tillverkare att skapa produkter med högre upplösningar.
Om exempelvis 1280 var standard och om de flesta webbplatser där ute var 1140 pixlar breda eller bredare, är det troligt att iPad skulle ha utvecklats med en upplösning på minst 1280. Men eftersom 1024 är standarden, gör iPad inte Det behöver inte vara högre än det. Samma princip gäller för netbooks. Eftersom webben är utformad runt skärmbredder på 1024 pixlar behöver inte enheter som är avsedda för webbanvändning vara högre än det.
Genom att skjuta webbdesign till bredare bredder uppmuntrar vi uppgraderingar och innovation. Dessutom kan de extra 180 pixlarna (skillnaden mellan 960 och 1140) öppna nya möjligheter i världen av användargränssnitt och användarupplevelse. Precis som de 160 pixlarna som erhölls när vi bytte från 800 till 960 gjorde det möjligt att göra fler saker.
Nackdelarna till breda bredder
Även om det finns konkreta fördelar för att skapa bredare mönster, finns det också bestämda nackdelar med övningen. Några av dessa är lätt att övervinna, men det är viktigt att vara medveten om vad de är om du förväntar dig att förhindra dem.
Breda linjelängder minskar läsbarheten
Det är frestande när man skapar en bredare design för att utnyttja all den extra skärmfastigheten för att göra ditt huvudinnehåll bredare. Det är dock inte alltid en bra idé. Längre linjelängder är svårare att läsa, eftersom ögat måste resa längre i slutet av en linje för att komma till början av nästa rad, vilket innebär att läsaren lättare kan gå vilse och hamna på fel linje. Detta förvärras av mindre typstorlekar. Det är viktigt att hitta ett glatt medium mellan linjelängd, teckenstorlek och linjens höjd.
Det finns ett par olika metoder för beräkning av rätt linjelängd. Den första är alfabet-och-halv-regeln, vilket resulterar i en linjelängd på 39 tecken (26 bokstäver i alfabetet x 1,5). Anpassa din teckenstorlek så att ungefär 39 tecken passar på din valda linje längd (eller vice versa).
Den andra metoden för att beräkna optimal linje längd är att tillämpa "punkter gånger två" regeln. Det här är en övertagning från utskriftsvärlden, men kan lätt anpassas till webben. Med denna regel tar du punktstorleken på din typsnitt, multiplicerar den med två och gör sedan dina linjer den längden i picas (vilken i tryck är 12 poäng). Så, för att beräkna dina linjelängder i pixlar, tar du din teckenstorlek och multiplicerar den med 24 (ett 12-punkts teckensnitt skulle ha en linjelängd på 288 pixlar).
Det kan vara till hjälp att beräkna dina linjelängder med båda dessa metoder och jämför sedan. Gör dina sista linjelängder någonstans mellan de två.
Information överbelastning
Bredare innehållsområden kan enkelt bidra till att dina sidor ser ringa ut och att det finns för mycket på gång. Det gör det också lättare att lägga till extra kolumner, widgets eller annat innehåll som inte alls kan lägga till något värde på sidan. Det är viktigt att hålla principerna för bra innehållsdesign i åtanke när du skapar din webbplats. Rikligt vitt utrymme är också till hjälp för att se till att din sajt inte ser ringa ut.
Bredare bredder ger dig fler alternativ när det gäller design, men det multiplicerar också chansen att du fattar dåliga designbeslut. Gå för minimalistisk och det kan se tråkigt och tomt. För mycket pågår och det ser bara upptagen och rörigt.
Var uppmärksam på skala, vitt utrymme, proportioner och hierarki i dina mönster för att säkerställa en utmärkt slutprodukt. Och var försiktig med att dina bredare mönster inte blir "för mycket" i allmänhet.
Så varför är inte alla det lyhörda designen?
Medan lyhörd design tar upp många av de centrala frågorna som presenteras av många olika enheter som används för att komma åt internet kan det också skapa några nya problem.
Ta t.ex. mobila enheter. Om en person har tillgång till en biografwebbplats på sin smartphone är det troligt att deras främsta problem är showtider, vägbeskrivning till teatern, eller kanske telefonnumret till teatern. De vill ha omedelbar tillgång till den typen av information. Ladda upp hela webbplatsen, som också innehåller saker som filmrecensioner och annan information, bara för att dölja en bra bit av den mobila användaren är ett slöseri med resurser.
Så det är viktigt att titta på responsiv design från fall till fall, för att ta reda på om det är den bästa lösningen för en viss webbplats. I många fall är det, men det finns fortfarande några fall där en mer traditionell mobil webbplats kan vara att föredra.
Som designers är det dock viktigt att förstå lyhörd design och att kunna veta när det är lämplig lösning för dina projekt. Eftersom mycket av den lyhörda designen bygger på att skapa välformade, flexibla webbplatser, kan den fungera som en slags bästa handledning för designers när vi går vidare med webbdesign och webbstandarder.
Fler resurser för att skapa responsiva mönster
- Flurid : Flurid är en vätskegriddesign som anpassar sig över olika fönsterbredd. Medan det inte är särskilt lyhörd på egen hand (förutom att justera kolumnbredder) kan den fungera som ryggraden för att skapa en responsiv webbplats.
- Fluid Grids : Denna artikel från A List Apart diskuterar fördelar och uppgifter om att arbeta med vätskenät.
- Fluid Grid System : Ett annat fluidgridramverk.
- Hardboiled CSS3 Media Queries : En annan bra guide till Media Queries.
Exempel på responsiva webbdesigner
Inte alla modeller nedan anpassar sig direkt till mobila storlekar, men vissa gör det, och de kan alla ge dig idéer om hur du kan anpassa dina webbdesigner för att vara mer mottagliga över enheter.
Kolumnerna här staplar baserat på skärmens bredd, men är alltid minst 4 tvärs över.
Detta rutnät omarrangerar sig och ändrar kolumnerna dynamiskt så att de passar ditt webbläsarfönster.
Detta omarrangerar också bilderna för att bäst fylla i ditt webbläsarfönster.
CSS-Tricks anpassar sig till bredare skärmupplösningar, samtidigt som du flyttar sidofältet under huvudinnehållet för smalare skärmar.
Abduzeedo skifter innehållet runt på hemsidan baserat på din webbläsarbredd.
Psdtuts + -webbplatsen (tillsammans med alla andra Tuts + -sidor) ändrar storlek och återställer sidobararna utifrån bredden på ditt webbläsarfönster. De ändrar också bredden på huvudinnehållskolumnen för att rymma olika storlekar.
Rutnätet växlar här från fyra kolumner till två till ett baserat på skärmens bredd.
Layouten justerar här bildstorlekarna baserat på bredd, samt skiftande kolumner runt för smalare skärmar.
Ett bra exempel på en layout där kolumnerna ändrar position för mindre skärmupplösningar.
Presidans design skiftar från en vätskebreddsdesign med fasta kolonnbredder för mycket breda skärmar till en fast breddsdesign för de flesta skärmstorlekarna till en annan vätska för smalare bredder.
Skriven uteslutande för WDD av Cameron Chapman .
Har du egna ta på sig designen för bredare skärmar och lyhörd design? Dela i kommentarerna!