Med st\u00e4ndigt \u00f6kande mobila bes\u00f6kare \u00e4r responsiv webb ett givet val f\u00f6r ny design p\u00e5 f\u00f6retagets sida. Med m\u00e5ls\u00e4ttning att maximera \u00a0konverteringen och allt fler k\u00f6p sker via mobil samt surfplatta kan det bli oerh\u00f6rt kostsamt att inte ha en genomt\u00e4nkt mobilanpassning. Men m\u00e5nga g\u00f6r misstaget att best\u00e4lla en responsiv version utav sin nuvarande design. Problemet \u00e4r just att du d\u00e5 f\u00e5r n\u00e5got anpassat f\u00f6r tekniken, inte f\u00f6r den som bes\u00f6ker sidan.<\/p>\n
En enkel j\u00e4mf\u00f6relse \u00e4r text p\u00e5 ett A4 papper som nu ist\u00e4llet skall skrivas ut p\u00e5 en kvitto remsa. Med r\u00e4tt principer l\u00f6ser man inte bara problemet utan skapar en bra anv\u00e4ndarupplevelse.<\/p>\n
Styrkan med de mobila plattformarna \u00e4r peksk\u00e4rmen och hur man p\u00e5 s\u00e5 s\u00e4tt interagerar med sidan. S\u00e5 struktur skapas utifr\u00e5n det. Texten delas i relevanta stycken. Varje stycke f\u00e5r en rubrik, texten visas enbart vid klick p\u00e5 rubriken. \u00d6verst p\u00e5 sidan skapas en dropdown meny med rubrikerna f\u00f6r snabbnavigering.<\/p>\n
Med r\u00e4tt verktyg kan man utan programmeringskunskap g\u00f6ra anpassningar f\u00f6r samtliga typer av sk\u00e4rmar s\u00e5 upplevelsen alltid \u00e4r optimerad.<\/p>\n
Termen responsiv design kom redan 2010 n\u00e4r en k\u00e4nd webbdesigner och f\u00f6rel\u00e4sare skrev ett blogginl\u00e4gg om webbtekniker f\u00f6r olika enheter \u2013 flytande layout, flexibla bilder och \u201dmediefr\u00e5gor\u201d. Ett bra s\u00e4tt att anpassa inneh\u00e5ll och layout efter vilken sk\u00e4rmstorlek som bes\u00f6ken kommer ifr\u00e5n. Men det fanns redan fr\u00e5n start en omognad i s\u00e4ttet att se p\u00e5 responsiv design eller responsiv webb \u2013 det \u00e4r f\u00f6rst och fr\u00e4mst en teknik \u2013 inte ett m\u00e5l i sig. Under ett antal \u00e5r var det dessutom en kamp mellan separata mobilanpassade sidor och att bygga allt helt responsivt. Det var s\u00e5 sent som h\u00f6sten 2015 som det slutliga beskedet kom att responsiv webb var vinnaren.<\/p>\n
Kravet fr\u00e5n best\u00e4llaren ser ofta ut s\u00e5 h\u00e4r: \u201dE-handeln ska byggas med responsiv design och fungera p\u00e5 mobil, surfplatta och desktop\u201d. Det \u00e4r allt! Jag f\u00f6rst\u00e5r vad best\u00e4llaren \u00e4r ute efter, men det blir s\u00e5 fel n\u00e4r kraven st\u00e4lls p\u00e5 det s\u00e4ttet. Oftast l\u00e4gger man inte tiden som beh\u00f6vs f\u00f6r att se \u00f6ver inneh\u00e5ll utifr\u00e5n den mobila bes\u00f6karens perspektiv. Vilka problem har vi d\u00e5 egentligen l\u00f6st f\u00f6r den bes\u00f6kare som surfar mobilt? F\u00f6r handen p\u00e5 hj\u00e4rtat \u2013 det \u00e4r v\u00e4l f\u00f6r anv\u00e4ndarna vi g\u00f6r det \u2013 inte f\u00f6r tekniken?<\/p>\n
\n
S\u00e5 vad b\u00f6r man t\u00e4nka p\u00e5 n\u00e4r man skall st\u00e4lla sina krav?<\/strong><\/p>\n \n –Vertikalt utrymme, hur ser inneh\u00e5llet p\u00e5 sidan ut n\u00e4r det \u201ckl\u00e4ms ihop\u201d? Man b\u00f6r \u00e4ven \u00f6verv\u00e4ga brytpunkter. Ett exempel \u00e4r om man har fyra sm\u00e5 bilder bredvid varandra p\u00e5 sidan men s\u00e4tter brytpunkten till tv\u00e5 bilder f\u00f6r visning p\u00e5 surfplatta och en bild f\u00f6r mobil. D\u00e5 f\u00e5r man ist\u00e4llet tv\u00e5 sm\u00e5 bilder bredvid varandra p\u00e5 tv\u00e5 olika rader eller en bild p\u00e5 fyra rader beroende p\u00e5 vad man bes\u00f6ker sidan med.<\/p>\n \n–Hur g\u00f6rs inneh\u00e5llet l\u00e4ttnavigerat f\u00f6r surfplatta och mobil? \n–Vad beh\u00f6vs f\u00f6r mobila bes\u00f6kare? \n–Maxbredd p\u00e5 sidan. Mobilanpassa din responsiva E-handel fr\u00e5n bes\u00f6karens och m\u00e5lgruppens perspektiv. Optimera inneh\u00e5llet, funktioner och formgivning utifr\u00e5n att E-handeln konsumeras fr\u00e5n olika sk\u00e4rmstorlekar, olika webbl\u00e4sare och enheter. Den skall fungera i olika situationer, med olika prestanda och uppkoppling. N\u00e4r du v\u00e4ljer verktyg till din responsiva E-handel \u00e4r det viktigt att du sj\u00e4lv (utan kunskap i kod) kan anpassa inneh\u00e5llet. Dvs. v\u00e4lja hur\/ vad som ska visas f\u00f6r mobil, surfplatta och st\u00f6rre format. Om du inte kan g\u00f6ra det s\u00e5 kan din investering bli kostsam och under processen tappar du kunder.\u00a0Kontakta SiteSmart<\/a><\/strong>\u00a0f\u00f6r konsultation eller demo av ett verktyg som klarar kraven.<\/p>\n","protected":false},"excerpt":{"rendered":" Anpassa f\u00f6r anv\u00e4ndaren, inte tekniken. Med st\u00e4ndigt \u00f6kande mobila bes\u00f6kare \u00e4r responsiv webb ett givet val f\u00f6r ny design p\u00e5 f\u00f6retagets sida. Med m\u00e5ls\u00e4ttning att maximera \u00a0konverteringen och allt fler k\u00f6p sker via mobil samt surfplatta kan det bli oerh\u00f6rt kostsamt att inte ha en genomt\u00e4nkt mobilanpassning. Men m\u00e5nga g\u00f6r misstaget att best\u00e4lla en responsiv version utav sin nuvarande design. Problemet \u00e4r just att du d\u00e5 f\u00e5r n\u00e5got anpassat f\u00f6r tekniken, inte f\u00f6r den som bes\u00f6ker sidan. En enkel j\u00e4mf\u00f6relse […]<\/p>\n","protected":false},"author":30,"featured_media":2163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false},"categories":[219,242,239,238],"tags":[351,350,352],"_links":{"self":[{"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/posts\/2162"}],"collection":[{"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/comments?post=2162"}],"version-history":[{"count":11,"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/posts\/2162\/revisions"}],"predecessor-version":[{"id":2184,"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/posts\/2162\/revisions\/2184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/media\/2163"}],"wp:attachment":[{"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/media?parent=2162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/categories?post=2162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ehandelstips.se\/index.php\/wp-json\/wp\/v2\/tags?post=2162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<\/strong>H\u00e4r h\u00e4nvisar till exemplet med att skriva ut ett A4 med text p\u00e5 en kvitto remsa. Det finns mycket man kan g\u00f6ra f\u00f6r att f\u00e5 inneh\u00e5llet att bli mer komprimerat och l\u00e4ttillg\u00e4ngligt.<\/p>\n
\n<\/strong>Se \u00f6ver Inneh\u00e5ll i menyer. Fler val eller extra meny f\u00f6r att snabbare hitta r\u00e4tt? Funktioner som produktfiltrering kan beh\u00f6va f\u00e5 ny position d\u00e5 den utg\u00f6r st\u00f6rre prioritet vid mobil navigering.<\/p>\n
\n<\/strong>Minimera\/ d\u00f6lj \u00f6verfl\u00f6digt inneh\u00e5ll f\u00f6r ett mindre format.<\/p>\n
\n<\/strong>Att ha hela sidan i automatisk fullbredd \u00e4r inte alltid optimalt i responsivt format. T\u00e4nk p\u00e5 att m\u00e5nga \u00e4ven surfar p\u00e5 exempelvis en TV d\u00e4r fullbredd blir \u00f6verdimensionerat. \u00c4ven om bredden s\u00e4tts till max 1000 pixlar blir formatet lika bra f\u00f6r sm\u00e5 sk\u00e4rmar om tidigare principer f\u00f6ljts.
\n
\n-Testa E-handeln fullt ut.
\n<\/strong>Genom att anv\u00e4nda ett program som ex BrowserStack<\/a> kan man testa olika enheter, sk\u00e4rmstorlekar, laddningstider, situationer etc. G\u00f6r det \u00e4ven n\u00e4r du arbetar med nytt inneh\u00e5ll p\u00e5 sidan och inte bara vid best\u00e4llning av ny design.<\/p>\nSlutsats<\/h2>\n