Onsdag, d. 13. oktober, 2010 - 25 kommentarer

Mobile websites: Sådan kommer du godt fra start

Mobiltelefonen er et vigtigt element i dagligdagen for os alle – om det er på jobbet eller i privaten.

Bemærk blot, hvor mange mennesker omkring dig, der har en mobiltelefon mellem hænderne. Mobilen er blevet til en forlængelse af venstre/højre arm.

De mobile enheder bliver bedre og bedre for hver dag/uge/år, der går. Vi kan ikke længere ignorere det mobile internet – de mange muligheder og problemstillinger.

Indholdsfortegnelse

  1. Hvilke enheder vil du ramme?
  2. Keep it simple, stupid
  3. Alternativ brugervenlighed
  4. Eksempler på mobile websites
  5. Gode ressourcer
  6. Relevant læsestof
  7. Konklusion
  8. Afgiv en kommentar

1. Hvilke enheder vil du ramme?

Har du planer om et mobilt website, så bliver det pludseligt mere kompliceret end sædvanligt. Normalt har vi eksempelvis en minimumsopløsning at gå efter, når vi opbygger websites – nemlig 1024 x 768px. Nu svinger opløsninger som blæsten fra øst til vest. Samtidig giver de mobile enheder dig ofte muligheden for at tilte skærmen, der blot gør det hele endnu mere utilregneligt.

Der findes flere enheder end dine finger og tæer til sammen. Flere af disse kan have samme platform tilfælles, men ikke benytte samme version.

Selvom iOs til iPhone og Android klart regerer fra hver sin trone, så ynder Microsoft, Samsung og Nokia alligevel at have sine egne styresystemer.

Kort sagt, det er unfair odds, du er oppe imod.

1.1 Du skal med et mobilt website overveje:

2. Keep it simple, stupid

Selvom KISS-modellen efterhånden er nævnt til hudløshed – både online som offline – så er den også værd at bringe frem i denne sammenhæng.

2.1 KISS principle

KISS is an acronym for the design principle “Keep it simple, Stupid!”. Other variations include “keep it short and simple” or “keep it simple and straightforward”. The KISS principle states that simplicity should be a key goal in design, and that unnecessary complexity should be avoided.

Kilde fra Wiki

Ønsker du de færreste problemer overhovedet muligt, så hav KISS-modellen i baghovedet, da du med denne bestræber dig enkeltheden.

Alt efter enhederne, du vil satse på, så har du ganske enkelt et helt andet og mindre råderum til indhold og funktionalitet – end hvad du ellers er vant til.

2.2 Du skal med et mobilt website overveje:

3. Alternativ brugervenlighed

Med mobile enheder, så er du simpelthen nødt til at tænke i andre baner. Det er immervæk anderledes at nagivere med fingerne på en touchskærm end med en mus eller touchpad på din computer/bærbar.

3.1 Du skal med et mobilt website overveje:

4. Eksempler på mobile websites

Jeg har fundet en række gode eksempler, der kan være til god inspiration i dit fremtidige arbejde med netop denne type websites.

For god ordens skyld, så bør i også kigge på nedenstående link, der viser en række firmaer, der ikke har formået at følge med udviklingen – endnu!

Det sjove med netop disse virksomheder er, at de beskæftigere sig med websites og internettet, og derfor burde være på forkant?

5. Gode ressourcer

Jeg har samlet et række gode ressourcer, der strækker sig fra gode grafiske elementer til mulighederne for at lave et mobilt website direkte på internettet.

6. Relevant læstestof

Hvis du vil mere i dybden i dit arbejde med mobile websites, så tag et nærmere kig på disse artikler og blogindlæg.

7. Konklusion

Det var i forvejen ikke nogen helt smal sag at lave et helt almindeligt website, der tog højde for skærmopløsningerne, browserne og meget andet.

Nu skal vi pludselig også overveje, hvordan vores hjemmesider skal være tilgængelig fra et utal af mobile enheder, der i den grad kan være nådesløse.

Dog med mine råd ovenfor, så er du hjulpet rigtigt godt på vej med et kommende mobilt website. Ellers kan du indtil da altid benytte dig af de muligheder, internettet tilbyder, hvor du kan oprette mobile websites igennem en række webapplikationer, der håndterer mange af problemstillingerne for dig.

Ganske enkelt, så kan vi ikke længere ignorere de mobile enheder. Som dagene skrider frem sælges der flere og flere moderne enheder, der kan tilgå internettet langt bedre end deres forgængere. Onlne markedsføring bør derfor – idag – også omhandle mulighederne i de mobile enheder. Ikke blot iPhone ;)

Hvad siger i? Har i haft muligheden for at bevæge jer ud i denne nye og fagre verden af enheder? Har i endnu flere gode råd, jeg kan tilføje listen? Måske du stadigvæk sidder med en Nokia 3210? Del alligevel dine erfaringer og meninger med os.

Skriv en kommentar

Relaterede blogindlæg

  1. Sådan bliver du en bedre webdesigner – del 1
  2. Sådan bliver du en bedre webdesigner – del 2
  3. Sådan arbejder du struktureret med CSS og HTML – Del 1
  4. Sådan arbejder du struktureret med CSS og HTML – del 2
  5. Sådan præsenterer du (ikke) et webdesign overfor kunden
  1. Martin Nielsen - På Twitter
    Onsdag, d. 13. oktober, 2010 - kl. 12:21

    Gode pointer, og dejligt enkelt opsummeret, en enkelt ting jeg vil tilføje:
    - Husk altid at gøre det muligt at tilgå den alm. version af websitet (hvis der altså er tale om en mobil version af eksisterende site)

    Der er ikke noget værre end mobile temaer der ikke kan slås fra.

    Hvis man vil se en side der ikke fungerer optimalt så blot tjek den nye biozonen side, så får man ellers en flot baggrund der dækker hele ens skærm og indhold… flot i 2010!
    .-= Seneste blogindlæg: Anmeldelse af Wall Street 2 Money Never Sleeps =-.

  2. Nicolaj Kirkgaard Nielsen - På Twitter
    Onsdag, d. 13. oktober, 2010 - kl. 12:57

    God artikel, du kommer ind på de fleste faldgruber i moderne mobil webdesign…

    Jeg kunne godt have tænkt mig at se dine personlige favorit mobil-sites og hvorfor du synes de virker, i stedet links med x antal gode mobilsites. Det andet virker lidt som et cop-out ;)

  3. Michael Østergaard - På Twitter
    Onsdag, d. 13. oktober, 2010 - kl. 21:11

    Martin, mange tak og godt med påmindelsen om, at den normale version kontra mobilversionen skal kunne tilgåes. Det bliver selvf. tilføjet listen.

    Du har ret med biozonen, det er godt nok ikke for tjekket. Den kan snildt bruges som et dårligt eksempel. Dog ikke en mobil hjemmeside, men stadigvæk super dårligt, den ikke kan benyttes via mobilen.

    Nicolaj, mange tak for kommentaren og ikke mindst dit indspark. Du har ret, jeg burde egentlig have fremvist gode kontra dårlige eksempler.

    Siden dit forslag har jeg først tænkt på at opdatere denne, men tror egentlig hellere, jeg vil skrive et helt særskildt blogindlæg. Jeg synes det fortjener mere plads, hvis jeg skal fremhæve godt kontra skidt – derved kan jeg også bedre henvise til dette blogindlæg.

  4. Morten Kaltoft - På Twitter
    Fredag, d. 15. oktober, 2010 - kl. 13:55

    Hej Michael, fed artikel!

    Jeg er faktisk i gang med at udvikle et Open-Source CSS Framework til at lave iPhone/iPad web apps, så folk kan få lavet et herre cool mobilsite.

    Kan godt afsløre at det er ekstremt nemt at bruge for alle (også uden at vide noget om html) :-D

  5. Michael Østergaard - På Twitter
    Fredag, d. 15. oktober, 2010 - kl. 15:47

    Hej Morten, det lyder ikke desto mindre super spændende.

    Sig endelig til, når der er noget vi kan kigge med på ;)

    Ps: Mange tak for kommentaren og velkommen til!

  6. Brian Kristiansen - På Twitter
    Søndag, d. 17. oktober, 2010 - kl. 11:46

    Hej Michael

    Dejligt at du endeligt tager dette emne op. – Der er alt for mange virksomheder, der har behov for at få øjnene op for denne nye verden.

    På SMX hørte jeg også en del om mobile hjemmesider. Bl.a. er det største mobile site Facebook, hvor der er 150 mio. unikke brugere på månedsbasis.

    Denne modning af mobilen som en platform for online indhold går ekstrem hurtigt. På de hjemmesider, hvor vi også tilbyder en mobilversion, kan jeg se at besøgstallene har meget kraftige vækstrater. nternettet tog måske 10 år om at blive modnet med brugen fra en hjemmecomputer – Men modning af mobilen som medie til online indhold vil måske kun tage 5 år. (Jeg tæller fra den første iPhone).

    Et bud på, hvor vi er på vej hen med mobilen er, at den vil blive den dominerede enhed på mange sites. I dag er der f.eks. flere sites jeg kun besøger via mobilen; bt.dk, og JP.dk og kino.dk blot for at nævne nogle.

    Når jeg taler mobile hjemmesider med kunder, så tager vi oftest udgangspunkt hvordan kan mobilen gøre det nemmere for kunden at betjene sig selv, eller indgå i en dialog med virksomheden. Mobilen skal nemlig virke i en hel anden kontekst end hjemmesiden. Brugeren er ofte på farten og vil have kortfattet, aktuelt og relevant information. På mobil.primotours.dk er det måske ikke overraskende, at det er siden med last-minute tilbud, der er mest besøgt. Det der overrasker er, hvor mange der tjekker last-minute rejser med mobilen.

    Internettet revolutionerede måden vi kommunikerer, handler og bliver underholdt på. At tro mobilen kun er endnu en skærm der skal designes til, er en kæmpe fejl. Mobile tjenester vil bringe ligeså mange forandringer med sig som Internettet gjorde, og der vil opstå nye giganter som Google, Yahoo og Facebook i kølvandet på dette. Vi har end ikke set de bedste ide´er endnu.

    Potentialet ligger i en mobiltelefon med internetadgang i hånden på 90 % af jordens befolkning, og de smukke visioner om ”one world” ligger således inden for rækkevidde. Med tjenester som Google translate, er alt indhold tilgængelig på alverdens sprog, og med talesyntese på mobilen, vil man i fremtiden kunne tilbyde live oversættelse til og fra alle sprog. (Yes, Google arbejder på det…)

    Og så lige et sidste ord om http://www.kino.dk. Jeg har bare ikke tålmodighed til en mobil version af hjemmeside, der tager samme udgangs som hjemmesiden: filmene. Mobilen skal tage udgangspunkt i de dimensioner, som er vigtige på en mobil enhed: Tid og geografi. Det dur ikke at man skal klikke på hver enkelte film for at se spilletider, for så at klikke tilbage til oversigten – og så klikke på næste film, for at se dennes spilletider.

    Så jeg lavede min egen personlige mobilversion af http://www.kino.dk. I dag virkede min version af kino.dk så pludselig ikke. – Jeg gik ind på kino.dk og fik en desktop version af sitet frem på skærmen. Jeg tænkte, at de havde nok opgivet at lave en mobil hjemmeside, ellers ville den jo komme frem på min mobil. Det var først mens jeg skriv på dette indlæg, at det faldt mig ind at tjekke mobil.kino.dk – bare som et eksempel på, hvor vigtigt det er at have et tjek på hvilken enhed, der tilgår hjemmesiden.

    Hvis du også mangler en mobilversion af kino.dk, hvor du kan se en oversigt med alle aktuelle film og spilletider for Herning, så er du velkommen til også at benytte min side. For alle jer der ikke går i biffen i Herning, så må I jo vente på at kino får tilføjet denne funktion, – eller gøre som mig – lave en version selv.

    Du finder den her. http://kino7.mobify.me/

  7. Michael Østergaard - På Twitter
    Mandag, d. 18. oktober, 2010 - kl. 08:41

    Hej Brian, mange tak for kommentaren, der vidst sætter ny rekord i at være den længste :)

    Kan se, du har fået lavet mere ved din mobile version af http://www.kino.dk – Den virker rigtig godt nu.

  8. Michael Østergaard - På Twitter
    Tirsdag, d. 7. december, 2010 - kl. 17:17

    Et link omkring Apps vs. Mobile Web:
    http://www.cakemail.com/blog/mobile-application-vs-mobile-web

  9. Michael Østergaard - På Twitter
    Søndag, d. 12. december, 2010 - kl. 09:17

    Jeg har tilføjet endnu et link med henblik på udviklingsdelen:
    http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

  10. Michael Østergaard - På Twitter
    Fredag, d. 17. december, 2010 - kl. 17:01

    God video omkring explosionen af at være mobil:
    http://designerscouch.org/view-log/Infographic-of-the-Day-Mobile-Year-in-Review-1781

  11. Michael Østergaard - På Twitter
    Lørdag, d. 18. december, 2010 - kl. 09:41

    Jeg har opdateret blogindlægget med:
    http://www.alistapart.com/articles/smartphone-browser-landscape/

  12. Michael Østergaard - På Twitter
    Søndag, d. 16. januar, 2011 - kl. 11:28

    Kom igang med at teste, når du udvikle mobile websites:

    http://djdesignerlab.com/2011/01/13/10-excellent-applications-for-mobile-website-testing/
    .-= Seneste blogindlæg: Det er det hele værd =-.

  13. Michael Østergaard - På Twitter
    Torsdag, d. 20. januar, 2011 - kl. 19:54

    http://www.zurb.com/playground/iphone-stencils
    .-= Seneste blogindlæg: Det er det hele værd =-.

  14. Michael Østergaard - På Twitter
    Tirsdag, d. 25. januar, 2011 - kl. 18:43

    Et lille slideshow på 340+ slides:
    http://www.slideshare.net/fling/designing-mobile-experiences
    .-= Seneste blogindlæg: Køb jakker og armbånd fra Jack and Jones- Mishumo eller Police =-.

  15. Michael Østergaard - På Twitter
    Fredag, d. 28. januar, 2011 - kl. 15:46

    Er stødt på et blogindlæg, der viser om/hvordan vi påvirkes af de mobile enheder i vores læsning:

    http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

  16. Tonny
    Tirsdag, d. 1. februar, 2011 - kl. 16:22

    Nydelig artikkel og medfølgende links. Tak for en oppsummering som flere istand til å lage gode sider for mobiler. Det finnes så mange neglisjerte sider der ude :)

  17. Michael Østergaard - På Twitter
    Onsdag, d. 2. februar, 2011 - kl. 17:36

    Lidt tal på det mobile internet (desværre ikke DK)

    http://www.i-creative.dk/general/do-people-use-the-mobile-web

  18. Michael Østergaard - På Twitter
    Fredag, d. 4. februar, 2011 - kl. 08:02

    Video fra App Konference med In2Media

    http://in2media.dk/#/Events/App+konference/

  19. Michael Østergaard - På Twitter
    Tirsdag, d. 8. februar, 2011 - kl. 19:28

    Den her skal i heller ikke snydes for – 140 slide:

    http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

  20. Michael Østergaard - På Twitter
    Onsdag, d. 16. marts, 2011 - kl. 18:51

    Håndtering af formulerer på mobile enheder:
    http://www.uxbooth.com/blog/mobile-form-design-strategies/

  21. Michael Østergaard - På Twitter
    Mandag, d. 28. marts, 2011 - kl. 21:01

    Glem ej Jakob Nielsen. Mindre skærm = Færre features!

    http://www.useit.com/alertbox/mobile-redesign.html

  22. Michael Østergaard - På Twitter
    Onsdag, d. 30. marts, 2011 - kl. 19:15

    A Day Apart: Live Notes on Mobile Web Design with Luke Wroblewski

    http://www.zeldman.com/2011/03/30/a-day-apart-mobile-web-design-with-luke-wroblewski/

  23. Michael Østergaard - På Twitter
    Onsdag, d. 13. april, 2011 - kl. 21:22

    6 yderst vigtige punkter, når det kommer til at lave et mobilt website:

    http://www.webdesignerdepot.com/2011/04/lessons-from-mobile-web-design/