Tre tips for mobil webdesign 4

The Future of Webdesign (FOWD) i London holdt Meagan Fisher presentasjonen Designing mobile interfaces.

Ved å bruke enkel og tilgjengelig HTML, lage en-kolonnes layout og holde på merkevaren din ved å bruke logo, farger og typografi fra den grafiske profilen til firmaet ditt er du allerede på god vei til å lage en bra mobil nettside.

Hvordan kan du gjøre dette i praksis?

Første skritt er å jobbe med CSS og HTML. Gjør du dette arbeidet systematisk, vil du få en side som laster raskt, noe som er enda viktigere på mobil enn for en vanlig webside. Unngå å bruke bilder som navigasjonselementer og husk å bruke ALT-tagger.
Når denne jobben er gjort, fokuser på layouten. Hvordan skal nettsiden din se ut når du bare kan bruke en kolonne? Prioriter innholdet og legg det viktigste øverst. Unngå å bruke store bilder.
Tilslutt, tenk merkevarbygging. Den mobile nettsiden din bør ha samme logo, farger og typografi som du har på den vanlige nettsiden. Finn ut hva det er som gjør at brukeren kjenner igjen selskapet ditt og bruk disse elementene også på den mobile nettsiden. Det er greit å bruke bilder, men pass på at de ikke er for store.
På FOWD fikk vi også vite at mobilnettsider ofte har bedre tilgjengelighet enn vanlige nettsider på grunn av layout (en kolonne), mindre bilder og bedre prioritert innhold. Meagan Fisher tipset også om nettsiden mobify.me der en kan lage en mobilversjon av sitt eget nettsted.
Har noen av dere gode eller dårlige erfaring med å designe websider for mobil?

Live er interaksjonsdesigner og mener at det å setter seg grundig inn i kunden og brukernes behov er nøkkelen til å lage en løsning med best mulig brukeropplevelse.

Flere artikler av Live CV

4 kommentarer

  1. Bra tips!

    Vår erfaring er mye av det samme. Men en ting vil jeg gjerne legge til; Tenk kontekst! Hva vi brukerne dine når de er på farta? Det har ofte veldig konkrete behov, som f.eks. å finne adresser eller telefonnummer, eller kanskje sjekke saldo?

    Twitter er et godt eksempel på dårlig funksjonalitet, Jeg bruker ofte twitter på mobil via linken i mail-programmet, for å sjekke hvem en ny “follower” er. Men mobilsiden lar meg desverre ikke enkelt logge på for å “følge” denne personen tilbake.

  2. Enig med Jonas. Og twitter for mobil der både kontekst og layout er på plass er for min del http://dabr.co.uk

    Den fella jeg synes alt for mange går i, er at man på mobil leverer en “strippet” versjon av en full webside, slik f.eks. twitter har gjort med http://m.twitter.com

    Jeg vil ha all funksjonalitet OG et design som er tilpasset mobil. Det lar seg gjøre!

  3. Mange bra tips; jeg er helt enig i at man må fokusere på HTML og CSS. Jeg synes man med dette som utgangspunkt stort sett alltid kan komme til en løsning som fungerer like godt på store, som små skjermer og enheter.

    Jeg istemmer Henning og Jonas i at m.twitter.com er en dårlig løsning som kun gir et subsett av innhold og funksjonalitet, fremfor å bare gi twitter.com et mer mobilvennlig design eller alternativt stilsett ved hjelp av media-queries eller -attributter.

    PS: “alt” er ingen tagg, men et attributt. For å unngå problemet mellom skille mellom attributter og tagger er det mye enklere å bare bruke “alt-tekster” på norsk. Imho, naturligivs. :)

  4. Pingback: → 9 minstekrav for mobiltilpasset design | IAllenkelhet

Skriv en kommentar

  • *
  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Mest lest

Tid for ømhet

Det hjelper lite med kurs og kompetanse hvis vi ikke har tid. Juristen skriver dårlig, vi sender ham på skrivekurs. Saksbehandlerne eier ikke språkøre, vi arrangerer et kurs i nettskriving. [...]

  1. Prototyping i Xcode
  2. Slik jobber du strategisk med innhold
  3. Ett år og fortsatt grønnskollinger
  4. Denne våren skal du kle deg i responsiv design

Sist kommentert

Bruk nettstedsøket til å forbedre innholdet ditt

Lou Rosenfelds syv tips til hvordan du kan forbedre innholdet ved hjelp av nettstedsøket.

  1. Slik jobber du strategisk med innhold 2
  2. Effektiv bruk av brukarprofilar 6
  3. Prototyping i Xcode 1
  4. Slik jobber vi i Netlife 2