Responsiv webbdesign är standarden för dagens webbplatser. I denna artikel får du en omfattande översikt över de tekniska och designmässiga krav och utmaningar som är förknippade med en flexibel webbplats.
Det är svårt att föreställa sig nuförtiden: pixelperfekta mönster.
Design, skapad i grafikprogram med pixelprecision i långa koordinationsprocesser med kunden, implementerades sedan (ofta mödosamt) lika pixelperfekta i alla webbläsare.
Och kunden tittade sedan in den nya sidan i varje system och webbläsare och det var en pixel som inte satt rätt – det trevliga plattformsoberoende intrycket borta … De dagarna är över.
Den till synes oändliga och förvirrande massan av enheter tillåter inte längre pixelexakt justering – och det behöver inte ens vara det. Webbplatser behöver inte vara pixelperfekta, de måste ”bara” se bra ut och vara lätt att använda på alla enheter.
Vilket ibland är ännu svårare än den pixelprecisa justeringen som nämns ovan.
Grundtanken bakom responsiv webbdesign är i grunden, först och främst, att webbplatsen är flexibel.
Du kan ta reda på allt du behöver veta om en sådan responsiv webbplats i den här artikeln:
Webben förändras
Tidigare, det vill säga för några år sedan på webben, var webbplatser fortfarande utformade för fasta skärmstorlekar. En metod som i huvudsak anammades från den tryckta sektorn. Alltså att ha ett dokument med fasta mått. En fast design skapades i ett grafikprogram (oftast Photoshop), som sedan implementerades så stor som möjligt med HTML och CSS.
Innehållet har packats i ett styvt rutnät med hjälp av CSS. Eftersom webbplatser i sig är flexibla. HTML, dvs innehållet och den semantiska strukturen, anpassar sig faktiskt flexibelt till webbläsaren och webbläsarens dimensioner.
Dessa stela sidor var ”bra” så länge det fanns ganska lika skärmar. De senaste årens utveckling har gått bort från den stationära PC:n till den mobila webben.
Den första förändringen var introduktionen av iPhone 2007. Webbplatser som var optimerade för visning på stora stationära skärmar nådde sina gränser här. Början av smartphoneboomen krävde nya tillvägagångssätt.
För det första skapades ofta två webbplatser : en ”normal” och en mobil variant, vilket givetvis innebar ett stort merarbete
Användningsscenarierna har blivit olika
Nuförtiden finns det i princip ingen nämnare längre, bara en massa ”användningsscenarier” . Det är inte längre klart när, var och hur användarna använder webbplatsen.
Det börjar med de enheter som används, från stationära datorer till bärbara datorer, iPads, smartphones, surfplattor, klockor, Google Glass till tv-apparater, nästan allt med en skärm får internetåtkomst också. Och utvecklingen har bara börjat. Användningen av mobilt internet har varit högre än stationär användning i flera år
Med olika enheter olika skärmstorlekar och olika inmatningsenheter (utöver tangentbord och mus även pekskärm och pekplatta).
Och skillnaderna blir större:
Mobila enheter, av vilka några har allt mindre skärmstorlekar, som Apple Watch med en skärmdiagonal på 38 millimeter.
Och å andra sidan allt större och högre upplösningsskärmar, som precis som vissa SmartTV-apparater har en skärmdiagonal på nästan två meter.
Idag måste du teoretiskt använda alla bredder mellan 300 och 6 000 pixlar.
En översikt över enheter med Android, variationen är nästan överväldigande
Vad är responsiv webbdesign?
Responsiv webbdesign betyder en responsiv webbplats. Alltså en webbplats som anpassar sig efter de (tekniska) förutsättningarna. Detta påverkar i första hand visningsstorleken (viewport), men innebär också ytterligare optimeringar som bilder, typografi eller innehållet.
Responsiva webbplatser är inte längre valfritt
Användningsscenarierna är väldigt olika. Och det är vad responsiv webbdesign handlar om. Att optimera en webbplats är inte längre bara för ett eller ett fåtal användningsscenarier, utan för så många/alla som möjligt.
Responsiv kan översättas som ”anpassningsbar”. En responsiv webbdesign ska säkerställa att webbplatsen kan användas optimalt oavsett utdataenhet, skärmstorlek och presenteras på ett visuellt tilltalande sätt.
Så webbplatsen anpassar sig. Denna anpassning är först och främst en teknisk. Dessa inkluderar flexibla rutnät, flexibla media och de så kallade brytpunkterna, där displayen ändras. Men det också kräver ett annat sätt att tänka.
Responsiv webbdesign bör dock förstås mycket mer än ”bara” anpassningen av innehållsvisningen till visningsporten (möjligt visningsområde för innehållet på en skärm).
Uppfattande, själva innehållet och designen är också en del av processen och bör också vara ”anpassningsbar”.
Ovanstående förklaringar gör det tydligt att det gamla arbetsflödet är olämpligt och ineffektivt. Kraven har ändrats och processen för att skapa webbplatser bör anpassas därefter.
Kan responsiv webbdesign eftermonteras senare?
Ja det är möjligt. Denna anpassning är då i första hand en teknisk sådan, som sedan säkerställer att den befintliga – icke-flexibla – hemsidan visas bra på så många enheter och skärmar som möjligt. Men det är mer en ”optimering”, eftersom hela webbplatsen fortfarande är designad för stationära datorer och endast displayen är justerad.
En ”riktig” responsiv webbdesign, som även tar hänsyn till innehållet, menyerna, prestandan etc. blir då mindre. Därför bör responsiv webbdesign övervägas från början!
Beroende på skärmstorlek, upplösning och orientering (stående, liggande), kan olika visningsegenskaper anges via CSS.
Resultatet är absolut flexibla webbplatser som kan anpassa sig till alla möjliga presentationer.
Denna förändring, som var den första i tankesättet, var förstås irriterande i början. Det var inte bara tekniken som måste designas om eller åtminstone tänkas annorlunda. Designen och till och med innehållet måste vara flexibelt.
Tekniken går att lära sig, designen är givetvis flexibel idag, men informationsarkitekturen kräver ibland helt andra scenarier.
Användningen av en webbplats kan skilja sig avsevärt från stationär dator till smartphone och därför bör innehållet och innehållet och navigeringsstrukturen anpassas.
Under några år har användare surfat mer via mobila enheter än via den klassiska PC:n . Konsekvensen skulle bli att inte längre tänka på webbsidor från skrivbordet och sedan anpassa dem för andra (oftast mindre) skärmar. Följaktligen skulle webbplatser vara först att tänka så för att skapa för smartphone först och se sedan hur dessa ska justeras för större utgångsenheter.
Hur som helst, det har blivit standard idag och behöver inte längre nämnas uttryckligen, till exempel i webbförfrågningar och erbjudanden.
Innehåll, design och teknik är inte längre separata discipliner, utan måste tänkas ut och implementeras tillsammans. Detta säkerställer en bättre webbplats i den meningen att den anpassar sig flexibelt till olika användarkrav, användningssituationer och slutenheter och tillåter bästa möjliga visning.
Samtidigt gör detta samspel av discipliner skapandet mer utmanande. Konceptutvecklare, designers och utvecklare ska utveckla hemsidan tillsammans med kunden. Helst är helheten större än summan av dess delar. I värsta fall är friktionsförlusterna större och det finns många kompromisser och outnyttjade möjligheter.
Konception, design och teknik fungerar hand i hand och utvecklar prototyper som testas regelbundet.
Och alla som skapar webbsidor självständigt eller i ett litet team måste nu täcka in och kombinera flera discipliner eller tänka med och ge kunden råd därefter. Och det är precis där det finns ett stort behov av nuvarande och framtida webbdesigners:
En tekniskt felfri responsiv webbplats erbjuder idag alla enkla mallar. Men att anpassa innehåll, informationsarkitektur och innehållsdesign för att resultera i en effektiv webbplats är svårt(er).
Följande projektprocess har därför bevisat sig själv när man skapar responsiva webbplatser:
Förtydliga projekt ramvillkor
Förfrågan, genomgång, erbjudande – här finns de viktigaste nyckeldata som omfattning, process, tid och kostnadsram förtydligas. Likaså kanske redan de första designspecifikationerna eller önskade funktioner
Konception – utveckla en innehållsstrategi
Enligt mottot ”Innehåll först” samlas först innehållet (om tillgängligt) in, utvärderas och struktureras. Så en sorts innehållsinventering görs. Här blir det tydligt vilket innehåll som kan finnas kvar, vilket som behöver justeras eller vilket som behöver skapas.
En navigeringsstruktur kan sedan utvecklas utifrån denna: huvud- och undersidor kan struktureras. Och innehållet för varje sida kan också ställas in.
Wireframes
När innehållet på de enskilda sidorna är känt kan så kallade wireframes skapas. Det är här innehållsstrukturen på enskilda sidor skapas, helt utan design, allt handlar om arrangemanget av innehållet. Motsvarande wireframes kan skapas för exemplariska skärmar eller slutenhetsstorlekar.
Arrangemanget av innehållet kan testas och specificeras med wireframes.
Teknisk implementering – skapa en prototyp
Ett motto för det responsiva arbetsflödet är att börja så tidigt som möjligt i webbläsaren. Det är inte längre nödvändigt att vänta på en (pixelprecis) design när den (grova) innehållsstrukturen och önskade funktioner har bestämts.
Ju tidigare den tekniska implementeringen startas, desto snabbare upptäcks behovet av korrigering och desto snabbare kan webbplatsen testas och optimeras på olika system.
Med de första webbplatsprototyperna kan du testa funktioner och användbarhet på olika enheter på en tidigt skede.
Design – Träna utseende och känsla
Designen kan starta parallellt med den tekniska utvecklingen. Moodboards kan här vara en användbar metod för att närma sig designen och inte hamna i pinsamheten att behöva skapa stora, omfattande skärmdesigner i något grafikprogram först.
Med moodboards kan den visuella riktningen utarbetas ganska snabbt och är därför specifikationen för implementeringen eller kan gradvis adopteras i prototypen och utökas och förfinas därefter.
Designriktningen kan koordineras i ett tidigt skede med en moodboard eller stilbild.
Testa och diskutera
Prototypen kommer att utarbetas lite i taget och bli en komplett webbplats. Teknik, innehåll och design kan därmed kompletteras, testas och optimeras ”på det levande objektet”.
Detta är en stor fördel för kunden: Man behöver inte längre köpa ”en färdig sida” som man inte får se förens den är klar, utan kan alltid se, testa och utvärdera mellanresultat.
Denna så kallade iterativa process förhindrar att utvecklingen går åt fel håll under (för) lång tid. Man är alltså mer effektiv, men koordinationen och kommunikationen mellan varandra blir ännu mer en avgörande framgångsfaktor för projektet.
En adaptiv och en responsiv layout
Proceduren för att skapa en responsiv webbplats är inte nödvändigtvis enhetlig även med arbetsflödet som visas ovan. Det finns väldigt olika tillvägagångssätt och också väldigt olika uppfattningar om vad exakt responsiv är. Alla menar inte alltid samma sak. Och framför allt kan målet med att implementera en responsiv webbplats ge väldigt olika resultat.
Adaptiv layout vs. responsiv layout
En webbplats kan i allmänhet skiljas mellan responsiv och adaptiv ( anpassningsbar).
Responsiva webbplatser förlitar sig på ett flexibelt rutnät. I samband med medieförfrågningar utnyttjas det tillgängliga utrymmet optimalt eftersom layouten sträcker sig över hela bredden. Det enda undantaget är en fast gräns för mycket stora upplösningar (maximal bredd) , så att layouten inte blir för bred.
En brytning i layouten, d.v.s. en brytpunkt med mediafrågor, sätts när designen och innehållet kräver det. Till exempel är huvudnavigeringen ”dold” bakom en hamburgerikon när det inte finns tillräckligt med utrymme.
En responsiv webbdesign är därför mer ”in the flow”, flexibel.
En adaptiv layout å andra sidan är optimerad för vissa skärmstorlekar. I grund och botten finns det stela designrutnät som de som brukade vara med 960-pixlars rutnät, men nu finns det flera för olika upplösningar. Till exempel en variant för stationära, surfplattor och smartphoneskärmar. Detta resulterar i ett ganska styvt designrutnät som med tidigare webbplatser.
Utdataenheter är i fokus och inte innehållet eller innehållspresentationen. För det mesta är det vanliga och populära enheter som iPhone och iPad vars upplösningar används för brytpunkter. Displayen är då optimerad för dessa enheter, men inte för enheter som har en något större eller mindre upplösning.
I fallet med en responsiv webbsajt, däremot, anpassar sidan sig kontinuerligt till utgångsenheten och är därför mycket mer flexibel. Detta innebär dock att presentationen av innehållet är något ”otydlig”, eftersom detta inte är exakt definierat
Så medan responsiva layouter sömlöst kan reagera på alla webbläsares storleksändringar, är adaptiva layouter inte lika flexibla och reagerar bara vid vissa punkter (de så kallade brytpunkterna).
Användningen av adaptiva layouter är särskilt värdefull om du vill ha väsentligt olika innehåll, funktioner och displayer på olika slutenheter. Den så kallade användarupplevelsen kan ökas avsevärt, eftersom enheten och därmed även ett specifikt användningsscenario står i förgrunden.
Procedur för att implementera en responsiv webbdesign
Det finns i princip två sätt att skapa en responsiv webbplats:
- från stor till liten eller vice versa.
- Desktop First
Det finns i grunden två saker för att skapa en responsiv webbplats sätt:
från stor till liten eller vice versa.
Den typiska webbdesignern utvecklas på en modern arbetsplats med g stor skärm och modern webbläsare. Med utgångspunkt från dessa villkor skapas den nya sidan, optimeras och sedan lite i taget för mindre upplösningar och även äldre webbläsare anpassade. Denna procedur kallas Graceful Degradation.
Den senaste tekniken och effekterna används, och designen ser bra ut mycket utrymme (dvs. på stora skärmar) ser underbart ut.
Ju mindre upplösning och ju äldre webbläsare, desto mer sannolikt är det att det kommer att uppstå kompatibilitetsproblem.
Moderna tekniker stöds inte längre eller inte fullt ut (till exempel vissa CSS3-direktiv), och layouten fungerar inte längre på mindre upplösningar.
Antingen döljs sedan innehållet, görs funktionellt via JavaScript, eller så fungerar det helt enkelt inte längre alls. Innehåll och funktionalitet ”bantas ner” gradvis.
Denna procedur är till för att göra en webbplats tänkbart dålig. Äldre webbläsare, mindre skärmar och långsamma enheter/anslutningar kommer att bestraffas med denna procedur.
Detta sker även när en befintlig, icke-responsiv webbplats i efterhand ska göras mobilanpassad. Det kallas denna process nn också ”Responsiv eftermontering” , eftersom desktop first-konceptet tidigare är oundvikligt bestämt.
Fördelar med Graceful Degradation:
- Motsvarar mer det vanliga arbetsflödet och miljön hos webbdesignern.
- Moderna system, tekniker och funktioner kan användas och utnyttjas fullt ut.
- Användarupplevelsen är överst.
Nackdelar med Graceful Degradation:
- ”Svaga” system behandlas endast sekundärt.
- Prestandaproblem kan uppstå snabbare.
- Tillgänglighet är snarare försummat.
- Svårt / mer komplext att i efterhand implementera innehålls- och funktionsjusteringar.
En webbplats ska vara användbar och tillgänglig med vilken webbläsare och vilken enhet som helst.
Man brukar anta att upplösningen är så liten som möjligt och att systemet är ”svagt” och sidan är optimerad för detta.
Principen ”Mobile First ” går sedan ett steg längre och därför ligger fokus här på mobila enheter med lite utrymme, långsammare dataöverföring och potentiellt mer distraherade användare.
Steg för steg kommer webbplatsen sedan utökat för större upplösningar och ”starkare” system. Mer komplexa tekniker och layoutegenskaper kan också användas här.
Utseende och beteende – Detta är den ordning du ska arbeta i.
Eftersom det finns lite utrymme på mindre skärmar leder detta tillvägagångssätt oundvikligen till mer relevant innehåll, bra prestanda och funktionell design.
Innehåll, utseende och beteende bör beaktas i den ordningen.
Eftersom det finns lite utrymme på mindre skärmar leder detta tillvägagångssätt oundvikligen till mer relevant innehåll, bra prestanda och funktionell design.
Börja med den lilla skärmen först, expandera sedan tills det ser ut som skit. Dags för en brytpunkt!
Fördelar med progressiv förbättring / mobil först-principen:
- Fokus ligger på innehållet.
- Hög tillgänglighet för alla besökare.
- Mobil drift och användningssammanhang görs möjligt.
- Mycket bra prestanda på alla system.
- Enklare utökbarhet av webbplatsen vad gäller innehåll, design och funktioner.
Nackdelar med progressiv förbättring:
- Kräver stort omtänkande (av alla projektdeltagare) och därmed större risk för felbedömningar.
- Utarbetad (om) befruktning.
- Möjligen förenklad optik.
- Tekniska byggstenar för en responsiv webbdesign
- En responsiv webbplats bör anpassas flexibelt till slutanvändarens omständigheter
För att innehåll och design ska kunna anpassas krävs tre byggstenar:
- Flexibel Layout
- Mediefrågor och brytpunkter
- Flexibel media/bilder
Man skulle kunna lägga till flexibel typografi, för i slutändan handlar det mest om texter och deras läsbarhet.
Låt oss titta närmare på byggstenarna:
En flexibel layout är grunden och kravet för en responsiv webbplats. Layouten är vanligtvis baserad på ett rutnät med flera kolumner.
Att arbeta med rutnät har varit Vanligt inom tryckdesign sedan urminnes tider för att anpassa element med varandra eller för att förenkla placeringen av innehåll.
Under många år var 960-rutnätssystemet med dess pixelvärden standarden.
I responsiv webbdesign tillåts dock kolumnerna inte längre statiska, utan måste vara flexibla.
Ett välkänt och populärt rutsystem är bootstrap. Detta frontend-ramverk innehåller många (förbyggda) element, framför allt ett responsivt rutsystem med kolumner.
Innehållet är uppdelat i upp till 12 enskilda kolumner. Siffran 12 låter som mycket, men tillåter en mängd olika variationer. Kolumner kan kombineras för att skapa, till exempel, tre sektioner som var och en sträcker sig över fyra individuella kolumner:
Detta är för nästan alla tänkbara tillämpningar kolumnarrangemang möjligt. Många andra rutsystem använder också de 12 kolumnerna som utgångspunkt
Översikt responsiva rutnätsystem
Många rutnätssystem ingår i ett större CSS-ramverk. Det finns till och med rena rutsystem vars kod då är mycket slankare. Här är en lista över de mest intressanta responsiva nätsystemen:
- Bootstrap
- Foundation
- Responsivt nätsystemSkelett
- Flexbox Toolkit & Grid
- FlexboxGrid
Layouten är dock inte bara flexibel genom olika kolumnvarianter. Layouten blir bara flytande om kolumnbredderna anges i procent. Beroende på bredden på innehållsområdet eller alternativt webbläsarfönstret anpassas kolumnerna dynamiskt.
Och beroende på utdatastorleken kan kolumnerna ha olika bredd och därmed bryta upp. Till exempel, med mycket små upplösningar kan en skärm med tre kolumner inte längre vara bredvid varandra, utan den ena under den andra.
Länge var den vanliga implementeringen via CSS-float-Instruktion . Ett HTML-element, t.ex. B. en div-behållare som behållare för kolumninnehållet, sträcker sig inte längre automatiskt över hela bredden, utan tas ur sitt naturliga elementflöde och liksom förskjuts åt vänster. Även andra div-containrar flyttas och ordnar sig gradvis till höger om dem. På detta sätt kan element arrangeras på en mängd olika sätt och flexibelt.
CSS Float Property
Många år var float property det föredragna valet när du implementerar en webbplatslayout. Sedan några år tillbaka har de två nyare CSS-layoutvarianterna, Flexbox och CSS Grid, föredragits på grund av deras större variation.
Den ”flexibla boxlayoutmodulen” uppfanns speciellt för att skapa flexibla och responsiva layouter.
Flexbox fungerar i ett ”förälder-barn”-förhållande, dvs display: flex tillämpas på de överordnade elementen (flex-behållare) tillämpas, med hjälp av lämpliga deklarationer för att definiera beteendet hos de underordnade elementen (flex-artiklar) för att kontrollera:
Med egenskaper som justify-content och align-items innehållselementen kan fördelas längs flexaxlarna . Riktningen för huvudaxeln kan ställas in med flex-riktning justeras för att flyta innehållet förbi specifika brytpunkter efter behov. Och så vidare… Flexboxen är mer flexibel än float layouter.
CSS-rutnätslayouterna går ett steg längre och är särskilt lämpliga för (fler) komplexa layouter.
CSS Flexbox – och flyter i alla fall – är mer för linjära (representativa) strukturer. CSS rutnät, å andra sidan, möjliggör ”riktiga” designrutnät som inte bara är endimensionella.
CSS Grid justerar element i kolumner och rader, d.v.s. elementen placeras i celler som definieras av rutnätet.
CSS Mediafrågor – Skärmutgång beroende på upplösning
För en responsiv layout är flexibla kolumner inte tillräckligt. För en optimal visning på olika enheter som surfplattor eller smartphones bör kolumnarrangemanget ändras.
Brytpunkter definieras med hjälp av CSS Media Queries, där webbplatsens layout går sönder.
Det fungerar som en ”om” funktion: den kontrollerar om webbläsarens visningsbredd är tillräckligt bred eller för bred innan du kör rätt kod.
Koden exekveras endast om visningsbredden är minst 780 pixlar.
Koden exekveras endast om visningsbredden är maximalt 780 pixlar.
På detta sätt kan separata koder matas ut för olika webbläsarbredder och för Exempelvis kan olika kolumnarrangemang genereras. Detta gör rutnätet och innehållet flexibelt.
Viewport – visningsområdet
När det gäller mobila enheter finns det en annan speciell funktion att tänka på som går tillbaka till de dagar då många webbplatser inte var optimerade för mindre enheter. Hela sidan skalas sedan automatiskt mindre här för att vara helt synlig på skärmen (åtminstone i bredd). Användaren var sedan tvungen att zooma in för att läsa den närmare. En ganska tråkig strävan.
Användare är vana vid att skapa webbplatser på både stationära och mobila enheter för att rulla vertikalt – men inte horisontellt. Så om användaren tvingas rulla eller zooma horisontellt för att se hela webbsidan kommer det att resultera i dålig användarupplevelse.
Dessutom är pixelupplösningarna på smartphones och surfplattor extremt stora nuförtiden: webbsidor kan visas i full bredd och hög upplösning, men innehållet och texten framstår då som ganska liten och svårläst. Därför motsvarar enhetens pixlar inte nödvändigtvis CSS-pixlarna.
I HTML- huvud område är därför definitivt följande påstående:
Detta definierar displayens bredd så att den anpassar sig till bredden på skärmen på respektive enhet ( bredd =enhetsbredd), till den så kallade viewporten. Informationen initial-skala står för den initiala zoomfaktorn och signalerar att sida i förhållandet 1:1 på den mobila enhetens skärm.
Responsiva bilder – flexibla media och bilder
Bilder – och andra medier – ska naturligtvis vara så olika som möjligt på en responsiv webbplats kan anpassas flexibelt. Det största problemet här är dock förhållandet som blir resultatet av definitionen av själva elementets bredd och höjd.
När visningsporten blir större blir bilden bredare, betyder det att den också måste bli högre.
Du kan nu ställa in elementets bredd till 100 %, men inte göra samma sak för elementhöjden, annars skulle bilden bli lika hög som det överordnade elementet och inte beroende av bredden.
En första enkel lösning skulle vara att ställa in höjden på ”automatisk”.
Bilderna anpassar sig flexibelt till bredden (på det överordnade elementet). Men ett stort problem kvarstår:
Stora bilder förblir stora även på små enheter/upplösningar, åtminstone vad gäller datamängden.
Till exempel, en stor bakgrundsbild som ska täcka hela bredden av webbläsaren på skrivbordsskärmen är då helt överdimensionerad på en smartphone.
Speciellt eftersom bilder – tack vare retina displayer – ofta sparas med dubbelt så stor storlek (pixelmått) för att se knivskarpa ut. Men högupplöst grafik laddas även på enheter med låg upplösning.
I det ideala fallet är bildelementet också åtföljt av en storlekar attribut har lagts till. Detta tar inte bara hänsyn till bredden på visningsporten, utan den faktiska visningsstorleken på bilden i layouten.
Bilder via CSS
Bilder/grafik som inte är fullt så relevanta innehållsmässigt kan användas som bakgrundsbilder via CSS, t.ex. infoga i en div-behållare:
Med hjälp av mediafrågor kan detta uttalande användas för ett element omdefiniera eller skriv alltid över med nya bildbanor. Och med egenskaper som bakgrundsstorlek bakgrunden bilden kan skalas och transformeras
Responsiv navigering
En av de mest utmanande punkten i responsiv webbdesign är navigeringen.
Navigeringen är förmodligen det viktigaste elementet på en webbplats. Det ger användaren en snabb överblick över huvudpunkterna på webbplatsen. De kan använda dem för att komma åt allt innehåll snabbt och intuitivt. Det är så att säga det centrala kontrollelementet.
Detta viktiga element på en webbplats , med vilken man kan komma åt de enskilda undersidorna, försvinner bakom en symbol med tre horisontella linjer, den så kallade hamburgerikonen, på små skärmar.
Med små skärmar har användaren liten överblick ändå – han ser ”bara” logotypen, den första teasern, en eller två rubriker, en eller två bilder och en eller två textblock – max. Det är väldigt lite för att få användaren att må bra av att vara på rätt sida och ge den en överblick över vad dem kan förvänta sig på sidan. I denna situation misslyckas navigeringen som ett ”översiktselement” för närvarande.
Ikonen för en responsiv navigering: Hamburgerikonen – Användaren har nu lärt sig innebörden och funktionen av Hamburgar-ikonen. Ändå måste han först vara nyfiken nog att ens klicka på ikonen för att se vilka menyalternativ som döljer sig bakom den. Den snabba, intuitiva översikten av en skrivbordsnavigering krävs inte här.
Med andra ord: Användaren vet inte om klicket är ”värt det” för honom överhuvudtaget. Och ofta måste han till och med klicka flera gånger. För först öppnas bara huvudpunkterna, om du vill se underpunkter måste du klicka igen osv Så det kräver en så kallad kognitiv prestation av användaren och utmaningen för webbplatsens skapare och operatör är att göra det så enkelt som möjligt för användaren.
För en mobilnavigering gäller därför de punkter som redan gäller för ”normal” navigering:
- Rensa sidstrukturen.
- Tydlig, begriplig namngivning av navigeringspunkterna.
- Om möjligt, inte för djupt kapslade navigeringsstrukturer.
- Tänk alltid från användarens synvinkel.
- Lämpliga sidlänkar från innehållet.
- Fler navigeringsalternativ erbjuder, t.ex. i sidofältet eller i sidfoten.
Användaren behöver veta, eller åtminstone ha en god uppfattning om innehållet bakom varje navigeringspunkt. Ännu bättre bör navigeringspunkterna visa dem vägen till innehållet de letar efter.
Men detta var bara den enda viktiga aspekten, nämligen den innehållskonceptuella, den responsiva navigeringen. Den andra är den tekniska och funktionella – eftersom mobilnavigering inte alltid är mobilnavigering. Det finns otaliga tekniker för responsiv navigering och pekskärmshantering.
Valet av rätt teknisk implementering beror på om innehållet och omfattningen av navigeringen. Grovt sett finns det mobila navigationssystem där menyalternativet e öppnas nedåt och ytterligare underposter visas under varandra. Och så finns det navigationssystem som praktiskt taget ”flög in” från vänster. Andra undernivåer infogas längre till vänster och höger som presentationsbilder. Dessa navigeringar har sedan namn som växla navigering eller navigering utanför arbetsytan.
Innehållskoreografi
Inte bara navigeringen ändras på mobila enheter, själva innehållet justeras i form av presentation och arrangemang.
Så här ordnas innehåll som står i kolumner bredvid varandra under varandra på små skärmar. Webbplatsen blir det typiska mobila ”röret” som kan rullas därefter.
Ibland bör innehållet sedan bytas i ordning eller till och med visas och döljs. Eftersom mobilanvändning kan leda till andra användarbehov och krav.
Till exempel, kontaktalternativen för en mobilanvändare kan vara betydligt mer intressant än för en stationär användare. Så istället för att presentera kontaktuppgifterna ”bara” i sidfoten, sidofältet eller på kontaktsidan, kan det vara bra att visa dem högst upp på sidan
Ibland kan det vara tillrådligt att dölja innehåll på små enheter och bara visa det igen vid behov (och t.ex. ett användarklick). Massan av innehåll reduceras också till det väsentliga.
För att planera innehållskoreografin, wireframes är hjälpsamma. Detta gör att du snabbt kan rita och testa layouter av innehåll i olika utdatastorlekar. Trådramarna fungerar sedan som en mall för implementeringen
Responsiv typografi
Mycket funderande bör ges till lyhördhet, arrangemang och media. Men teckensnittsstorlekar, radlängder och radavstånd är grundläggande för läsbarheten och detta är ännu viktigare för små enheter.
I likhet med layouten kan typografin anpassas: adaptiv eller responsiv. Adaptiv innebär att till exempel teckenstorleken – bestämd steg för steg – anpassar sig till olika upplösningar. Responsive innebär att teckenstorleken anpassar sig flexibelt till bredden, kontinuerligt och inte bara vid vissa brytpunkter. Båda varianterna har sina fördelar och nackdelar. Den totala flexibiliteten är förvisso mer utmanande och resultatet bara mer oförutsägbar.
Innehållsbredden på texterna, det vill säga radlängden beror normalt på bredden på de överordnade elementen där texten finns.
Detta kan ibland vara över hela webbläsarens bredd (vilket dock sällan är en bra idé för större upplösningar). Ibland begränsas den medvetet av till exempel en max-bredd information i CSS-kod. För det mesta är texten dock i kolumner. Kolumnbredderna ändras i olika bredder och därmed linjelängden
Specifika teckenstorlekar
För att skapa en bra läsupplevelse på mindre skärmar bör textstorleken justeras proportionellt och både raden höjden och avståndet runt texten.
Brödtext behöver inte vara lika stor på mobila enheter som på en stationär skärm. Vanligtvis håller vi en mobil enhet mycket närmare ögonen och avståndet liknar det för en bok.
Brödtexten behöver vanligtvis inte för många ändringar. Om teckensnittsstorleken är 20px med en radhöjd på 1,6 (32px) för en skrivbordsskärm större än 900px och den har 75 tecken per rad, kan den för mobila enheter minskas till 16 – 17px med en radhöjd på 1, 5 ( 24px) med 30–45 tecken per rad.
Skillnaden mellan 40px och 30px är för stort, så för en surfplatta kanske du vill välja något däremellan.
I allmänhet bör storleksskillnaderna mellan rubriker vara mycket mindre på en liten skärm än på stora skärmar.
Inom responsiv webbdesign har användningen av webbteckensnitt bevisat sig själv – flexibla typsnitt som är speciellt optimerade för användning i skärmmedia . Här är en översikt över de mest populära Google Fonts-teckensnitten. Och hur man integrerar dem: Google Fonts: Integrera i 3 enkla steg.
Framtiden för responsiv webbdesign
Responsiv webbdesign är inte bara framtiden, det är redan nuet. Men den (tekniska) utvecklingen står aldrig stilla. De kommande tekniska innovationerna är redan tillgängliga och kommer att råda under de kommande åren i större skala
Det finns till exempel redan de så kallade containerfrågorna som ett komplement till mediafrågorna som förklaras ovan. De kan användas för att ställa in en separat brytpunkt för varje element. Detta reagerar när behållaren överskrider eller faller under en viss bredd.
Med CSS-egenskaperna kan elementstorlekar definieras mer dynamiskt, så att övergångar mellan olika visningsportar går smidigare.
CSS-Multi Column tillåter implementering av flerkolumnslayouter utan de typiska flexbox, rutnät eller float-satser.
Det är viktigt att testa webbplatsen så regelbundet som möjligt under utvecklingen på alla möjliga enheter och till pågående drift för att analysera vad som går bra och vad som inte är så bra.
Om du vill bli framgångsrik som webbdesigner i framtiden måste du inte bara förstå grunderna för responsiv implementering, du måste också känna till de olika tillvägagångssätten och hitta rätt sätt för det enskilda webbplatsprojektet.
Den innehållskonceptuella aspekten kommer att spela en allt viktigare roll i responsiv webbdesign i framtiden. För tekniken finns det till exempel fler och fler mallar, koder och tutorials som blir bättre och bättre.
Men att presentera rätt innehåll på rätt ställen på ett sätt som är lätt att använda – det kommer inte att finnas någon exempelkod för detta, det kommer att förbli webbdesignerns hårda arbete.
