Share
Responsiv webbdesign har varit en stor trend under en lång tid - även innan Mashable förklarade 2013 årets lyhörda webbdesign. Koppla det med ökad användning av mobila enheter med olika skärmstorlekar och det är lätt att förstå varför Internet inte kommer sluta prata om det.
Men vad betyder responsiv webbdesign för småföretagare? Ännu viktigare, varför skulle du vara omhändertagna med en responsiv webbdesign?
När det gäller att marknadsföra och marknadsföra ditt företag kan en väldesignad webbplats vara din mest värdefulla tillgång. Men om du vill att den ska bli verkligt effektiv, räcker det inte med en attraktiv design. Din webbplats måste också vara responsiv.
Den främsta anledningen till att du vill ha en lyhörd webbplats är det faktum att användningen av mobila enheter att surfa på Internet kontinuerligt har stigit i några år nu och visar inga tecken på att sakta ner.
Ur företagets synvinkel betyder det att om din webbplats inte svarar bra på mindre skärmar och det är svårt att läsa och navigera, kommer dina besökare att vara mer benägna att gå vidare till en konkurrents webbplats istället.
Enkelt sagt, lyhörd webbdesign är inte en lyx, det är en nödvändighet och nu är den perfekta tiden för att säkerställa att din webbplats är lyhörd.
Om du har undrat hur lyhörd webbdesign verkligen är och varför det är viktigt, har du kommit till rätt ställe. I den här artikeln kommer vi att förklara hur lyhörd webbdesign fungerar, varför du bör överväga en mottaglig webbplats och visa dig några responsiva webbdesignexempel i verkligheten. Låt oss dyka in!
Termen responsiv webbdesign designades av Ethan Marcotte 2010 och hänvisar till processen med att designa webbplatser som kommer att svara på den enhet de tittar på för att ge användarna en sömlös, optimal användarupplevelse.
I sin kärna följer responsiva webbdesign de tre huvudprinciperna: fluidnät, responsiva media och mediefrågor. I vissa fall utnyttjar den lyhörda webbdesignen även meta-taggen med medievisning, när en enhet inte kan bestämma den ursprungliga bredden eller skalan på en webbplats, vilket medför att mediafrågor inte utlöses. Här är de grundläggande responsiva webbdesign principerna förklaras:
Fluidnätverk fungerar som alla andra designnätverk - de låter dig ordna element på en sida på ett visuellt attraktivt sätt. I motsats till ett traditionellt rutnät ändras dock ett fluidnät baserat på skärmstorleken och kan anpassas till vilken bredd som helst eftersom den använder relativa måttenheter, såsom procentandelar eller em-enheter, i stället för fasta enheter som pixlar.
Mediefrågor gör att du kan bli ännu mer specifik med din lyhörda design och justera den i enlighet med en viss skärmstorlek. På lekman sänder webbplatser mediefrågor för att samla in data som hjälper dem att bestämma storleken på en skärm och sedan ladda lämpliga CSS-format.
Den tredje kärnprincipen för lyhörd webbdesign är lyhörd eller flexibelt media. Med tanke på att moderna webbplatser använder många bilder, videoklipp och andra mediefiler är det absolut nödvändigt att dessa typer av innehåll svarar mot olika skärmstorlekar.
Normalt skulle designers inkludera bilddimensionerna i sitt CSS-stilark. Men detta fungerar inte för lyhörd design på grund av fasta måttenheter som nämnts ovan. Istället måste du använda egenskapen för max bredd för bildfiler, videofilmer och andra mediatyper. För att säkerställa att mediefiler inte går förbi behållaren och skala snyggt baserat på skärmstorleken, ska egenskapen med max bredd vara inställd på 100%.
Som tidigare nämnts kommer metataggen för viewporten att spelas in när mediafrågor inte kommer att utlösas eftersom en enhet inte kan bestämma den ursprungliga bredden på en webbplats. För att bekämpa detta kom Apple ut med metataggen viewport.
Viewport-metakoden har vanligtvis en initial skala av höjd- eller breddvärde som är inställt på 1, vilket löser problemet med att inte identifiera webbplatsens skalan genom att använda förhållandet mellan enhetens höjd eller bredd och visningsstorleken.
Nu när vi har täckt kärnprinciperna för lyhörd webbdesign, låt oss ta en titt på några verkliga reagerande webbdesign exempel:
Som webbutvecklare är det inte konstigt att Susan Jean Robertsons hemsida följer bästa praxis när det gäller webbdesign, vilket inkluderar att se till att hennes webbplats ser bra ut oavsett vilken enhet besökare använder.
Trots att hennes webbplats är ganska enkel och minimal, har den några bilder som inte bara skalar snyggt utifrån skärmstorleken utan också flyttas från en layout med två kolumner till en enkelspalt staplad layout på mindre skärmar. Menyn, som ofta skiftar till en hamburgare meny på mindre skärmar, förblir densamma eftersom det inte har många länkar så det är inte nödvändigt att gömma det.
BMWs hemsida använder massor av bilder och bakgrundsvideoer, vilket kan vara den mest utmanande delen av lyhörd webbdesign.
Men som du kan se från skärmdumpen nedan gör BMW ett utmärkt jobb för att se till att alla bilder och videor svarar på olika skärmstorlekar. Du märker också användningen av en hamburgare-meny på mobila enheter.
Fältnoteringar fungerar som ett bra exempel på en e-handelswebbplats som ser bra ut på både mobila och stationära enheter.
De använder standardhamburgermenyn på mindre skärmar och produktraderna ändras från fyra kolumner i två kolumner. Samtalet till handling fortsätter att vara synligt och lättklickbart även när skärmstorleken går ner och produktbilderna också snyggar.
En attraktiv illustrerad bakgrund är det första du märker på KlientBoosts hemsida och den bakgrunden ser bra ut oavsett hur du ändrar webbläsarfönstret.
Bortsett från att använda en hamburgare meny, använder KlientBoost också en annan logotypversion på mindre skärmar och resten av layouten beter sig på vanligt sätt: flera kolumner staplar in i en singulär kolumn.
Det sista exemplet på vår lista kommer från WillowTree Apps, en digital byrå vars webbplats använder en ren layout med gott om bilder för att visa upp innehållet och portföljen.
Du kommer att märka att bilderna är fullt lyhörda och följa det vanliga mönstret för att få staplade innan utdragen i en kolumn, som liknar resten av innehållet. Här finns en hamburger-meny samt CTA-knappar som fortfarande är synliga även på mindre skärmar.
Webbplatserna ovan är bara toppen av isberget när det gäller responsiv webbdesign inspiration. Du kan hitta många fler exempel i vår sammanfattning av 25 bästa responsiva webbdesign exempel.
Responsiv webbdesign handlar inte bara om att följa de senaste webbdesigntrenderna. Att anta en responsiv layout för din webbplats har många fördelar för ditt företag som kan påverka din trafik, SEO och intäkter. Här är de främsta fem anledningarna till att du bör överväga responsiv webbdesign för din webbplats.
Den viktigaste anledningen till att anta en lyhörd webbdesign är att du ska ge dina besökare en bättre användarupplevelse och förbättra användbarheten på din webbplats. Om besökare inte är tvungna att genast bläddra i alla riktningar, klämma och zooma för att läsa ditt innehåll, kommer de att vara mer benägna att stanna på din webbplats under en längre tid. De kan enkelt navigera från en sida till en annan, och har inga problem att fylla i ett formulär eller klicka på knappen Knapp-till-handling.
Som vi nämnde tidigare visar statistiken att mer än hälften av all världswebtrafik kommer från mobila enheter, vilket innebär att när din webbplats är mottaglig har du mycket bättre chanser att locka besökarna. Om de landar på din webbplats och möts med en webbplats som ser ut och fungerar bra även på mindre skärmar, har de ingen anledning att navigera iväg så ditt företag är skyldigt att se en ökning av ledningar och kunder från mobila enheter.
Bortsett från lyhörd webbdesign, är en annan Internet-trend som blivit ett måste en snabblastande webbplats. Och tack vare vätskenät och reagerande media har responsiva webbplatser bättre laddningstider än svar på icke-svarande webbplatser. Detta leder till att besökare spenderar mer tid på din webbplats, vilket leder oss till nästa poäng - omvandlingsfrekvenser.
När besökare spenderar mer tid på din webbplats har du bättre chanser att konvertera dem från besökare till leads och sedan till abonnenter och köpare. Enligt undersökningen ökar de genomsnittliga konverteringsfrekvenserna för smartphone-enheter med 64% jämfört med omräkningskurser för skrivbord. Detta är ett direkt resultat av förbättrad användarupplevelse som kommer från att ha en webbplats som är lätt att använda över olika skärmstorlekar och snabbare laddningstider.
Slutligen är en bättre SEO-rankning definitivt en av de främsta fem fördelarna med lyhörd webbdesign. När allt kommer omkring, om du inte kan hittas i sökmotorer, blir det nästan omöjligt att få organisk trafik till din webbplats. Enligt Google, sedan april 2015, är din webbplats lyhörda en av de rankningssignaler som bestämmer hur din webbplats visas i sökmotorerna. Google är dock inte den enda sökmotorn som rekommenderar det. Bing har tydligt på sin blogg sagt att byggande webbplatser optimerade för alla plattformar är nyckeln till en framgångsrik SEO-strategi.
Nu när vi har täckt de viktigaste fördelarna med responsiv webbdesign, låt oss diskutera hur du kan komma igång.
Det första du bör göra är att testa din webbplatsens lyhördhet. Du kan använda ett verktyg som Googles mobila test. Allt du behöver göra är att ange webbplatsens webbadress och verktyget ska analysera din webbplats och berätta om det är lyhört eller inte. Du får också förslag på vad du ska göra för att säkerställa att din webbplats är mobilvänlig.
När du väl vet om din webbplats är responsiv eller inte, är det dags att bli inspirerad av exempel på mottagliga webbplatser. Du kommer att kunna se exakt hur dessa webbplatser använder de grundläggande principerna som diskuterats ovan, liksom hur de genomförde andra nödvändiga funktioner.
Nästa steg är att välja en lyhörd mall eller ett tema för din webbplats. Om du hittills har använt HTML-mallar och vill fortsätta använda dem, finns det massor av lyhörd HTML-mallar att välja mellan. Börja med vår samling av de bästa responsiva HTML-mallarna som finns på vår marknadsplats.
Om WordPress är din utvalda plattform, kommer du gärna att veta att det inte finns någon brist på responsiva WordPress-teman, oavsett vilken bransch ditt företag tillhör.
När du har kontrollerat att din webbplats använder en responsiv mall eller ett tema är det dags att ta det till nästa nivå med extra tips och tricks. Använd vår guide som utgångspunkt för att hjälpa dig att se till att din webbplats ger bästa möjliga användarupplevelse och är fullt mottaglig.
Responsiv webbdesign går inte bort när som helst snart. Faktum är att det är framtidsvägen och det har ett antal fördelar som påverkar någon företagsägares bottenlinje.
Om du är redo att ta din webbplats till nästa nivå, börja med att ge det en smink med en av våra responsiva HTML-mallar eller WordPress-teman och använd tips och knep från den här artikeln för att peka dig i rätt riktning.
Accentsconagua