Pres dit website ind i mobilen

Det kan lyde lettere utopisk, men det er sikkert, at om få år vil man se lige så skævt til virksomheder, der ikke har mobile versioner af deres website, som man i dag gør til virksomheder uden website.

For at komme i sådan en paradisisk tilstand er der to grundlæggende forhindringer, der skal overvindes: Hvis man ikke holder sig til "mobiloptimerede sites", er internetsurfing fra mobil ofte besværligt og relativt dyrt.

Besværligt…

Selv når man ser bort fra opsætningen af telefonen, er webbrowsing på telefonen langt fra en dans på roser.

Da man gerne vil kunne have sin mobil i lommen, er mobiltelefonens skærm lille (Typisk noget i retning af 130 x 200 pixel. Nogle skærme er endda mindre. Se illustration.). Der skal med andre ord økonomiseres med pladsen.

Et udsnit på 130 x 200px, og her er scrollbars mv. udeladt! Det skal retfærdigvis siges, at EMU-siden er nydeligt kodet og læseligt for mobiler. Men pointen er at vise, hvor lidt plads der er på en mobil skærm.

Interaktionsmulighederne er heller ikke noget at skrive hjem om. I bedste fald er det bare akavet, da der hverken er mus eller ordentligt tastatur, men ofte kun et fjollet joystick og telefonens 12 taster.

Det er således noget, der kan sammenlignes med at læse morgenavisen gennem en toiletpapirsrulle: Meget fokus på et lille område, intet overblik og en masse "scroll".

Som designer af et mobilt website skal man være sig disse begrænsninger bevidst, og altid teste sine sider på en håndfuld forskellige mobiler (mobilernes browsere er nemlig endnu mere forskellige end MS Internet Explorer og Flock, eller hvad de nu hedder).

Dyrt…

De fleste sites indhold er gratis tilgængeligt for brugere. Men det er ikke gratis, at surfe over mobilen.

Som bruger betaler man, så at sige, for designerens synder. Med mobilen betaler man nemlig pr. kilobyte datatransport, og derfor betaler man for at se på websider med megen grafik. 1kb koster i omegnen af 10 øre, så en webside, der overholder Jakob Nielsens regel om ikke at overstige 40 kb inkl. grafik, billeder og det hele (og det er der gode grunde til), koster omkring en halv krone.

Kunne det lade sig gøre, ville startsiden på Politikens netavis med sine ca. 632 kb tekst, billeder og reklamer koste næsten 6,5 kr. Og de efterfølgende sider koster kr. 2,5 pr stk. Det værste er, at det oven i købet vil tage en evighed. Heldigvis siger den typiske mobile browser fra med et brag overfor filer med mere en 40 kb.

Løsningen

I en tidligere artikel på Designværkstedet; Design af browser-uafhængige websider - sådan gør du [3], hævdede jeg, at bare man kodede sine websider efter w3's standarder for xhtml og css, så var det muligt at læse siden fra mobiler og PDA m.m., og sådan er det faktisk også. Der er så lige de små, brugervenlige detaljer, som gør oplevelsen den lille smule bedre - så man kan tale om en "god oplevelse".

Som tingene er i skrivende stund, er mobilen ret sløv som medieplatform.

Mobilen har en meget lav datatransmissionshastighed (9,6 kb/s), skærmen er lille (men ofte i farver), og som bruger må man nøjes med et dårligt tastatur og et halvgodt joystick.

Mange telefoner har tilmed en meget lille hukommelse til rådighed for browseren og dennes indhold. Så når indholdet overstiger den tilladte mængde (som ligger på 40 k for de fleste telefoners vedkommende), nægter browseren at indlæse indholdet.

Designmæssigt er det mobile web nogenlunde på niveau med webdesign anno 1998. Det er muligt at bestemme noget, men det forkromede layout i flere spalter er forbeholdt de "store" browsere.
Det er muligt at lave funky ting i flash til mobilt brug. Afspilleren, Flash Lite, kan desværre ikke bare hentes på nettet, men sælges til de mest avancerede mobiler og koster US$10. Adobe har en liste med de "flash-duelige" mobiler.

Som designer skal man ofte foretage svære valg. Det første man skal beslutte, når man ønsker at lave indhold til mobiler, er platformen: I sin korte form består valget mellem WAP og WML eller ej.

Selvom WML (se [12]) har sine åbenlyse fordele og spændende muligheder for mobilt internet, skal man konstruere siderne specielt til WAP (se [12]). Det betyder jo ekstra arbejde, hvad jo ikke rimer på intentionen om et webdesign til alle platforme/medier. Det kan XHTML til gengæld. XHTML lover alsidigheden og stringensen fra XML, og simpliciteten og designmulighederne fra HTML, samt en anvendelse på tværs af alle eksisterende internetmedier.

For at komme i gang med at designe mobile websider, skal man bruge en nyere mobil og noget at kode med.

• En nyere mobil med indbygget XHTML-browser. Alternativt kan man bruge en  mobiltelefon, der kan "snakke" GPRS og kan afspille JAVA-programmer, hvortil man så kan downloade den gratis Opera Mini (se [13] ). Det er på ingen måde et ringere udgangspunkt.
• Noget at kode med: Man kan nøjes med styresystemets NoteBook eller TextEdit, men man kan med stor fordel benytte sig af et webdesignprogram (også kaldet "editor"), såsom opensourceprogrammet Nvu. eller de velkendte, kommercielle fra Adobe, Dreamweaver og GoLive. De hjælper med at holde koden korrekt. Det gør livet ulig meget nemmere at bruge et designprogram, men sætter også nogle begrænsninger i udfoldelsesmulighederne.

Så mangler opgaven blot.;-).

Den korte udgave af, hvad der gør et website tilgængeligt for mobile browsere er, at det er et website, der er konstrueret efter retningslinjerne for XHTML.

I sin essens går det ud på, at:

1. alt af betydning skal kunne læses som tekst. Altså, formelt ingen tekst i billedfiler, og billedtekst ("alt" og "title") på ALLE billeder
2. alle "ophobninger af data" (såsom menuer og punktopstillinger) skal opstilles som lister
3. designet skal skabe god kontrast - særligt omkring teksten, være fleksibelt i forhold til skærmbredde og styres med css
4. siden skal være kodet i XHTML og være kodet korrekt.

Det sidste kræver, at man holder tungen lige i munden, men benytter man et webdesignprogram, hjælper det med at overholde standarderne, men vil man være sikker (og det vil man!), kører man siden gennem w3-konsortiets valideringsmaskine.

Benytter man et webdesignprogram, vælger man blot, at den side, man opretter, følger det rette DTD (Document Type Definition): til dette formål er XHTML 1.0 Transitionalfint.

Koder man i hånden, kender man formentlig proceduren.

Det vigtigste ved XHTML er, at alle "tags" skal afsluttes: Et link <a href=" …"> afsluttes med </a> og så fremdeles for alle "tags". Enkelte "tags" har ingen afslutter (img, meta, br og et par mere) og må derfor være "selvsluttende". Det klares ved at sætte et "/" før ">" i "tag'et".

Overholder man ånden bag XHTML, som hedder "adskillelse af design og indhold" falder man heller ikke for "fristelsen" til at benytte frames. Det er bare så 1999-u-XHTML-agtigt og duer tilmed slet ikke på mobilen.

Ja, naturligvis. Argumenterne er talrige, og nævnt i min tidligere artikel Design af browser-uafhængige websider - sådan gør du [3]. Desværre er understøttelsen af CSS mangelfuld, og ret inkonsekvent, så man skal være indstillet på at eksperimentere.

Når man laver CSS til mobile enheder, skal man huske at benytte værdien  "handheld" i media-attributten i "style"-definitionen til det mobilorienterede stylesheet.

<link href="mobil.css" rel="stylesheet" type="text/css" media="handheld" />

Da det er meningen, at den samme webside skal bruges i både computerens browser og i mobilens, skal man henvise til begge style sheets. En henvisning til hver med angivelse af, hvilket medie det er beregnet til:

<link href="mobil.css" rel="stylesheet" type="text/css" media="handheld" />

<link href="normalt.css" rel="stylesheet" type="text/css" media="screen" />

<link href="print.css" rel="stylesheet" type="text/css" media="print" />

Browserne vil så selv vælge det passende style sheet. Til skabere af "mobile" cascading style sheets kan man kun sige, at det skal være så kortfattet og simpelt som muligt. Man risikerer at spilde sine kræfter.

Alternativt kan man benytte @media-reglen, som gør det muligt at tilføje mediespecifikke CSS-regler, i et og samme CSS.

@media handheld {
    body {
         background:#fff;
    }
    etc …
}

For ikke at skabe brugervenlighedskatastrofer bør man - før man kaster sig ud i at designe mobile websider - gøre sig klart, at mobilen adskiller sig fra computeren, både i form, muligheder, anvendelse og håndtering.

Hvis man ønsker, at brugere skal benytte mobilen til at læse websiderne, må man sørge for, at brugervenligheden er i top. Nedenfor findes en række tommelfingerregler, der kan hjælpe dig over nogle af de mest almindelige faldgruber.

Usability No-Gos!

Hvis dit website skal kunne tilgås fra mobiltelefoner, kan du bruge følgende negativliste:

• Undgå frames af enhver art
• Undgå komplekse tabeller (fx til design af dit website)
• Lad ikke grafik være overskrifter - da nærige brugere kan fravælge download af billeder
• Brug ikke JavaScript
• Undgå (store) billeder (det får flere til at fravælge at downloade dem)
• Undgå billeder med mange detaljer - det bliver for gnidret
• Lad ikke websiden være for stor. Man mister overblikket
• Undlad at definere en bestemt bredde på dit mobile indhold (mobilernes skærme og browsere er alle forskellige)
• Undgå lange ord (de bestemmer hvor bred websiden er)
• Undgå "rå links" - oversæt dem til "godt linksprog".

Store billeder bidrager til at øge websidens omfang, og mange mobile browsere nægter at vise sites over en vis størrelse (de berømte 40 kilobyte).

Menu eller indhold

Der kan være utroligt meget tekst på 40 kb, og hvis man laver meget lange tekster, er det derfor en god idé at lave en lille indholdsfortegnelse, så man kan se, hvad teksten handler om.
Skulle der blive for meget menu, kan man ligeledes lave et internt link til teksten, så man kan springe menuerne over og gå direkte til teksten.

Begge disse ting kan man slå til og fra i de respektive Cascading Style Sheets (herom nedenfor).

Bliver menuen meget stor, kan man også overveje, om man vil lave en forside, som kun er indholdsfortegnelse og lade de resterende sider indeholde teksterne og et link tilbage til menuen.

Menuer som lister

Alt for ofte bliver de vandrette menuer skrevet som links efter hinanden, og det er rædsomt at navigere i, da de falder fra hinanden på en uheldig måde, hvis man lige står med en forkert skærm …

Alle menuer bør opstilles som uordnede lister (punktopstillinger). Det sker af flere grunde:

- det skaber overblik
- det skaber orden
- det er tilgængeligt i alle browsere
- det er intet problem at omforme en liste til en vandret eller en lodret menu.

I koden kan en liste af links med fordel se således ud:
<ul id="menu">
<li><a href="link1" id="link1" title="link 1">For det f&oslash;rste</a></li>
<li><a href="link2" id="link2" title="link 2">For det andet</a></li>
<li><a href="link3" id="link3" title="link 3">For det tredje</a></li>
<li><a href="link4" id="link3" title="link 4">For at slutte</a></li>
</ul>
som uden justering med css typisk ser ud som en kedelig liste:

• For det første
• For det andet
• For det tredje
• For at slutte
  (Illustration af liste af links: Det ser ikke så indbydende ud …)

Attributten title="link y"< /SPAN>  har ingen betydning i mobilens standardbrowser. Vil man slippe for den irriterende klat (eller ændre den) sker det med følgende tilføjelse i cascading style sheet:

ul#menu{
list-style:none; /* "none" kan også være "square" eller "circle" */
}

Ved hjælp af CSS kan man siden omforme sin liste til en fin menu [14] efter eget ønske.

De mindste er de bedste

Mobile websiders størrelse skal være mindst mulig og gerne under 40 k.

Ud over at minimere brugen af billedfiler som grafiske elementer kan man fjerne alle billeder fra siden, når man betragter den fra en mobiltelefon. Da teksten typisk vil være det væsentligste element på siden, kan man således hjælpe brugeren og browseren til en bedre browseoplevelse.

I sit cascading style sheet for mobiler mv. kan man tilføje:

img {
display:none;
}

Det forhindrer nok at billederne bliver vist, men de bliver alligevel downloaded.
Det giver dog ingen mening at skjule noget som er downloaded (og betalt). Derfor er man nødt til at benytte sig af noget kantet CSS-trylleri, som vi passende kan kalde CIP - Contextual Image Presentation for at sikre, at brugeren ikke downloader de store billeder til mobilen:

Man knytter et id med en unik tekst til img-tagget, linker i stedet til et lille transparent png-billede i img-tagget, men angiver det rigtige billedes højde y og bredde x, og indsætter siden billedet via CSS:

I HTML:

<img src="klar.png" id="bord" alt="mit bord" title= "mitbord" />< /SPAN>

Det er godt nok ikke god tone ikke at angive billeders størrelse, og gør indlæsningen lidt langsommere, men det tilføjes i CSS.
I CSS til store browsere skrives:

Img#bord {
 background: url(bord.jpg) no-repeat top left;
 width:Xpx; /* Matcher billedets bredde i px */
 height:Ypx; /* Matcher billedets højde i px */
}

og mobilbrugerne kan ligeledes få deres mindre version af billedet, der skal man blot skrive det mindre billedes url i det mobile CSS.

Tavshed er guld

At selve sidens indhold heller ikke må være for langt, kan man ikke umiddelbart kode sig ud af. Der er ikke andet for end at lære at begrænse sig, eller opdele sit indhold i mindre, passende enheder (a 40kb).

Det er så også vigtigt at minde om, at selve style sheet'et også fylder … så der skal man også spare på anslagene og kun definere det, der er absolut nødvendigt at definere (fx nøjes med farver) og skrive det hele i "short hand" (hvor definitionen af webfarver kan reduceres til 3 tegn frem for 6).

Websidernes titler skal også være korte. Gerne på færre end 16 anslag, hvis det skal give mening for brugeren.

Med alle de formaninger i baghovedet skulle man næsten ikke tro det overhovedet kan lade sig gøre? Men jo, og eksemplet følger her!

For ikke bare at lade det blive ved snakken, men lade tale følge af handling, er der en mobilversion af hele denne artikel. Så kan man jo prøve det …

Browserne i mobiltelefonerne er ret særegne og accepterer en del css og en del html, bare ikke det hele. Nedenfor er et mindre udvalg  af koder, som man ikke behøver at definere, da de ingen effekt har. Listen er ikke fyldestgørende, men nogle væsentlige nedslag.

Særheds- og mangelliste, CSS

• Font-type kan ikke ændres
• Display:inline ignoreres
• Margin ignoreres
• Padding ignoreres
• Background: Man kan indlægge baggrundsbilleder. De placeres dog midt i skærmarealet

Mangelliste, HTML

• title på links har ingen effekt
• alt på links har ingen effekt
  

Links

1. Jakob Nielsen giver gode råd om størrelsen på websider
   http://www.useit.com/alertbox/9703a.html,
   og Nielsen forklarer også, hvorfor det er væsentligt at holde sidestørrelsen nede:
    http://www.useit.com/papers/responsetime.html
2. Politikens netavis, der i sin nuværende form ville være temmelig tung til mobilbrug: http://www.pol.dk/
3. "Design af browser-uafhængige websider - sådan gør du", artikel af Michael Hammel, Designværkstedet, marts 2006:
   http://design.emu.dk/artikler/0611-design.html
4. Programmet Opera Mini, der kan findes på: http://www.opera.com/mini
5. Til redigering af websider er opensourceprogrammet, Nvu, ganske fortrinligt til at skrue websider sammen med - og det er gratis: http://www.nvu.com/
6. Ellers er der de velkendte, kommercielle redigeringsprogrammer fra Adobe, Dreamweaver og GoLive, som man kan prøve gratis i 30 dage mod en tilmelding til Adobes Community. 
   Dreamweaver: https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en%5Fgb&product=dreamweaver
   Golive (Win): http://www.adobe.com/go/trygolive_win_eu
   Golive (mac): http://www.adobe.com/go/trygolive_mac_eu
7. Valideringsværktøj: http://www.w3.org/ Konsortiet stiller valideringsmaskiner til rådighed. Både til xhtml: http://validator.w3.org
   og til mobilt web: http://www.w3.org/2006/05/mwbp-check/ (den forekommer dog ikke funktionsdygtig).
   W3.orgs Mobile WebInitiativ er værd at følge med i: http://www.w3.org/Mobile/
8. Til kodning i hånden kan man finde råd og tricks på: http://www.w3.org/
9. På http://css.maxdesign.com.au/listamatic/ kan man se mere om lister og menuer og få lidt inspiration til en smart menu.
10. Adobes oversigt over hvilke mobiler, der kan køre Flash og i hvilket omfang: http://www.adobe.com/mobile/supported_devices/handsets.html

Mobile websteder

Inspiration til - og erfaring med - hvad der virker, og hvad der ikke virker, kan man få ved at prøve eksisterende mobile sites.
Åbn browseren i din mobil og tast dit favoritwebsite, og se hvad der virker, og hvad der går galt i forhold til den vante oplevelse.

11. På http://projekter.michammel.net/mobil/tester.html  kan man prøve sin mobile browser af, og se nogle af mulighederne.
    De kommercielle medier har næsten alle en mobilversion af deres website (Politiken undtaget). Dem kan man jo også kigge på:
    mobil.dr.dk
    wap.jp.dk
    mobil.tv2.dk

Noter

12. WAP (Wireless Application Protocol) er industriens standard for indhold til mobiltelefoner. Det benytter WML (Wireless Markup Language), et kodesprog, der minder meget om websidernes HTML (Hypertext Markup Language). WAP er målrettet anvendelse i mobiltelefoner, og på at minimere datatrafikken mest mulig.
    Det væsentligste kendetegn ved WML er, at det indeholder nogle aktivitetskoder, hvormed man kan gøre sit dokument "dynamisk", da man kan have flere forskellige "Cards" (skærmbilleder) i sit "Deck" som et WAP-dokument kaldes. Et WAP-dokument ligner således mere en simpel database end en webside. På den måde kan man i et enkelt WAP-dokument, teoretisk set, placere et langt, mere komplekst og nærmest dynamisk sæt af sider end i en almindelig html-baseret webside.
    Til gengæld er de grafiske muligheder i WML hurtigt udtømte: Fed og kursiv, understreget, stort og småt, samt tabeller - det hele i nydelig sort-hvid.
13. Miniopera - Opera for små skærme
    Den norske browserproducent Opera har udviklet en udgave af sin fremragende browser specielt til brug i små, håndholdte enheder, som telefoner og PDA'er.
    Det fantastiske ved Opera Mini er, at den indeholder en funktion, kaldet "Small Screen Rendering™", der tilpasser alle websider og deres indhold til de små skærmes vilkår.
    Det betyder, at browseren formindsker billeder og ignorerer eller oversætter designelementer som tables,  frames og lignende.
    Selv hvis man skulle være så heldig, at ens telefon indeholder en duelig browser, er Opera Mini klart anbefalelsesværdig. Den er de fleste af browsere, der følger med mobilen, overlegen.
14. Listige menuer
    I "det rigtige website" kan man transformere sin uordnede liste til præcis den ønskede menuform:
    Det er muligt at lave listen til en vandret eller lodret menu, og som man kan se i eksemplet, kan man sågar skifte mellem dem.
    Eksemplet benytter et JavaScript til at skifte mellem menuformerne, og er ikke mobil-egnet.
    Menuerne kan beses live her