Mobilanpassning

 Hem / Tjänster / Mobilanpassning
Mobilanpassning

Mobilanpassning

Responsive webdesign som står för mobilanpassad webbdesign på svenska, innebär att man designar webbsidor så att de automatiskt anpassar sig efter upplösningen på den skärm som den för tillfället visas på, till skilnad från traditionell webbdesign som i princip bara är anpassad efter en skärmupplösning.

Det första steget som togs i fråga om mobilanpassning var att man skapade en till hemsida anpassad i första hand för mobiltelefoner och vidarebefordrade automatiskt de som surfade med mobiltelefonen dit, vi kan kalla detta "första generationens mobilanpassning". Detta innebar i de flesta fall att de båda versionerna skiljde sig radikalt från varandra som ni kan se i exemplen här nedan. I Exempel 1 och 2 ser vi hur den ursprungliga datoranpassade hemsidan ter sig på en mobiltelefon, den blir väldigt ihoptryckt och svårläst med sin minimala textstorlek(Exempel 1). För att kunna läsa texten så kan man ju då förtås zooma in(Exempel 2) men detta medför istället att det blir ett väldigt scrollande både i sidled och höjdled för att inte tala om zoomning fram och tillbaka för att navigera sig runt på sidan.

Exempel 3 och 4 visar i sin tur den mobila, betydligt förenklade, versionen av samma hemsida som i det här fallet använder sig av en vertikal meny(där det står "Start" i ex. 3 och "Kärlek" i ex. 4) för navigeringen, men som då också saknar en stor del av den känsla och det innehåll, kanske i första hand bilder, som finns i orginalet.


Traditionell vs mobilanpassad webbdesign

Exempel 1.
Traditionell webbdesign
.

Exempel 2.
Traditionell webbdesign inzoomad

Exempel 3.
Mobilanpassad webbdesign

Exempel 4.
Mobilanpassad webbdesign meny


Skillnaden mellan första generationens mobilanpassning och andra generationens dvs det som verkligen är responsiv webbdesign kan vi se på nästa exemplen här nedan. Kortfattat kan det beskrivas som att de olika delarna av hemsidan(bilder, videon, textstycken osv.) möbleras om ifrån att delvis ha varit placerade radvis och istället läggs efter vandra så att man kan scrolla igenom dem vertikalt i ett enda långt svep vanligtvis, om vi tittar på sidan i en mobiltelefon vill säga. På surfplattor och andra enheterav mellan storlek kan det vara så att de hamnar i två rader eller i någon annan passande ordning, som webbdesignern ifråga valt att lägga dem i.

Om ni jämför Exempel 5 - 8 nedan med hur våran startsida( sweetech.se/index.php ) ser ut på en skärm av laptopstorlek eller större så ser ni just att alla komponenter lagts i "scrollordning" och även attmenyn har ändrats från horisontell till vertikal.


Responsiv webbdesign

Exempel 5.
Responsiv webbdesign

Exempel 6.
Scroll

Exempel 7.
Scroll forts.

Exempel 8.
Med vertikal meny


Ett annat och mera visuellt sätt att studera hur en responsiv hemsida ändrar utseende för olika skärmstorlekar på är att stegvis förminska(eller förstora) webbläsarfönstret, som kan ses i följande Exempel.



Responsiv webbdesign

Exempel 9. Surfplatta större

Exempel 10. Surfplatta mediumstor

Exempel 11. Surfplatta medium

Exempel 12. Surfplatta mindre


Då allt fler använder mobiltelefoner, surfplator och andra mobila enheter, så ökar ju relevansen av att ha en mobilanpassad hemsida hela tiden och är ju redan nu ett måste om man inte vill missa/tappa en stor andel av de potentiella besökarna, och som följd där av gå miste om kunder.


<

Sänd oss en offertförfrågan!

Kontakta oss för en konsultation, eller en offertförfrågan!

  •   NorraSkjutbanegatan 23A,
         72339Västerås, Sverige
  •   +46 (0)767438571
  • kontakt@sweetech.se

Om Sweetech Consulting

Sweetech Consulting startades i början av 2012 som ettstudentföretag av tre kreativa studenter vid Mälardalens Högskolaoch dess företagsinkubator Idélab, i och med detta har vi jobbatbåde med uppstartsprojekt och mer etablerade företag...


Läs mer

Vimmel/mäss bilder