Mobilsite-skolen del 2: Gå amok i HTML5-kode

Når den mobile udgave at et website skal kodes, er det tid til at lege med alle de nye teknologier. Her skal du nemlig ikke trækkes med Internet Explorer 6.

Internettet er flyttet ud i hånden på folk, og derfor er det for mange websites en god idé at sørge for et særskilt mobilsite, der er tilpasset de små skærme.

I Mobilsite-skolen ser Version2 på, hvordan man udvikler en god webløsning til mobile enheder med hjælp fra to eksperter. Denne gang er fokus på det tekniske - nemlig selve kodningen af en mobil webside.

**LÆS OGSÅ **Sådan gør du din webside klar til smartphone-invasion

Den gode nyhed er, at mulighederne er store, selvom skærmene er små. For i de browsere, der dominerer på smartphones, kan man uden legacy-begrænsninger kaste sig ud i de nyeste tricks fra hylden.

»Det er langt sjovere at udvikle til smartphones, fordi man så kan bruge CSS3 og HTML5. Der er ikke nogen Internet Explorer 6 eller 7 at tage hensyn til,« fortæller Rasmus Rudolf Christiansen, associeret partner og projektchef hos webbureauet 1508.

Kun hardwaren sætter lidt begrænsninger, lyder det fra Simon Kibsgård, konceptudvikler hos konsulenthuset Creuna.

»Man skal ikke fokusere på begrænsninger. Browserne på mobile devices er dem, der er mest oppe på beatet. Men processorerne er selvfølgelig ikke så hurtige,« siger han.

Første regel er ikke at udvikle direkte til en iPhone, men mere generelt til alle slags smartphones, lyder det samstemmende, og så skal man koncentrere sig om telefoner med touch-skærm. Ejerne af ikke-touch-telefoner gider nemlig ikke at surfe på nettet fra telefonen.

Smartphone-ejere er også mestendels de mere nysgerrige og internet-erfarne typer, så det kan man lige så godt have i baghovedet, når brugergrænsefladen skal sættes sammen.

»Brugerne af en smartphone er mere eksplorative og legende. Det er ikke bedstemor, der browser fra telefonen. Så glem den laveste fællesnævner. Her kan man tillade sig at lave lange sider og lækre Javascript-effekter med for eksempel elementer, der folder sig ud eller glider til side,« siger Simon Kibsgård.

Jquery er også understøttet, så der er adgang til også avancerede Javascript-libraries, fortæller han.

Spar på båndbredden

Når mobilsitet tager form, skal man også gøre sig umage for ikke at misbruge værdifulde kilobytes. På trods af 3G-netværk i alle store byer er download-hastigheden nemlig stadig tit en flaskehals. Her er de nye muligheder med HTML5 og CSS3 en stor fordel.

»Det giver nye muligheder for at hastighedsoptimere, fordi man i stedet for en billedfil til en flydende overgang i baggrundsfarven bare kan skrive i stylesheet'et, at der skal være sådan en overgang fra den farve til den farve,« forklarer Rasmus Rudolf Christiansen.

Også for eksempel kasser med afrundede hjørner kan nu klares med få linjers CSS-kode. Og når man så bruger rigtige billeder, er det vigtigt at huske at skalere dem ned serverside, så mobil-brugeren kun skal hente billedet ned i lige den størrelse, der er relevant.

Gør det selv - glem portalløsningen

Mange mobile websites i dag er ikke drevet af firmaet selv, men af en ekstern mobilportal, der så trækker for eksempel nyheder via RSS og præsenterer det i et fikst format.

Men sådan at outsource opgaven er en stor fejl, mener Simon Kibsgård og langer ud efter danske nyhedsmedier for at være dovne på den front.

»Det er rarest at beholde trafikken på sit eget site, og tit forsvinder der også information undervejs. For eksempel havde Ekstra Bladet engang en artikel med karakterer til fodboldspillere, hvor der ikke stod navne, men kun var et billede. Og billederne blev altså ikke vist på den mobile portal-løsning,« siger han.

Også bedre URL'er og muligheden for selv at analysere trafikken spiller ind, ligesom man kan beholde elementer som kommentarfelter eller muligheden for at anbefale en nyhed, en opskrift eller lignende.

I stedet for blot at sende RSS-feeds ud og få dem formateret til den lille skærm ude i byen, skulle især de danske mediehuse altså tage sig sammen og få lavet noget fantastisk, mener Simon Kibsgård.

»Brugere på mobiltelefonen fortjener et gennemtænkt design. Mange af dem bruger måske aldrig avisens normale webside, og så er det dumt bare at give dem et affaldsprodukt på mobilen,« siger han.

Lad det hele flyde

Når designet fastlægges, er det vigtigste at få indholdet til at blive justeret efter størrelsen, i stedet for at stirre sig blind på skærmopløsningen på en iPhone.

»Det er en klassisk fejl at tilpasse til en bestemt skærmstørrelse. Vi har en formodning om, at vi de kommende år får rigtig mange forskellige modeller, så et fast design vil hurtigt holde op med at være bagud-kompatibelt,« siger Rasmus Rudolf Christiansen.

Med media queries i CSS3 er det nemt at lade indholdet ændre sig, alt efter de besøgendes skærmstørrelse, og om de for eksempel vipper telefonen for at få bredformat. (Se eksempel på at kode websider med media queries).

Generelt er HTML jo også fra starten udviklet til tekstombrydning og forskellige skærmstørrelser, fremhæver Simon Kibsgård, så det burde ikke være svært for en dreven webudvikler at lade elementerne flyde og finde sig til rette under alle forhold.

Eneste joker i spillet er den nye dreng i klassen, Windows Phone 7, der ligesom Microsofts forhistorie med Internet Explorer har potentiale til at kaste grus i web-maskineriet og udbredelsen af de nye, tekniske muligheder på nettet.

Hvor godt den spritnye browser i Windows Phone 7 kan lege med på HTML5 og CSS3 i forhold til konkurrenterne, er lige nu ikke helt afklaret. Men hvis platformen får en vis udbredelse i Danmark, er det noget, man skal holde øje med.

»Jeg ved ikke med Windows Phone 7 endnu, så det bliver spændende. Men forhåbentligt er den nye browser bedre end den på de gamle Windows Mobile-telefoner. Den var nemlig rigtig elendig,« siger Rasmus Rudolf Christiansen.

Læs også blogindlæg fra Wireds Webmonkey om mobil-udvikling.

*Version2 afholder 11. november den brugerdrevne konference Mobile Computing. Version2 Live-arrangementet byder ud over indlagte workshops og networking-seancer blandt andet på oplæg fra Kiloo, Silverbullet, Danske Bank, Miracle og Huge Lawn Software. Læs mere og tilmeld dig på *version2.dk/live.

Tips og korrekturforslag til denne historie sendes til tip@version2.dk
Kommentarer (6)
sortSortér kommentarer
  • Ældste først
  • Nyeste først
  • Bedste først
#1 Deleted User

Mobile webside behøver i udgangspunktet sjældent at være adskilt fra desktop websider. Sender I fx en nyhedsbrevs-mail ud med links til et nyt produkt, så vil mailen blive læst på både mobile devices og alm. computere. Derfor skal produktsiden også kunne vise produktet i både en mobil-tilpasset og en "klassisk" visning. Det gør man ved at skifte templaten ud. I dette eksempel er der derfor ikke brug for særskilt mobilsite (eller portal eller app), andre URLer, andet indhold eller business logic. I nogle tilfælde kan det altså give langt mere værdi og være meget lettere at holde sig til det i kender bedst, jeres CMS, og optimere det til mobil. Det er faktisk ret let.

  • 0
  • 0
#3 Deleted User

Det er svært at skifte sin iPhone ud, når først man har brugt den lidt. Det skyldes dels at mobilen er god, men lige så meget at alle købte apps og især musik købt via iTunes ikke er noget værd på en Android eller andre platforme, hvis man skulle få lyst til at prøve dem af. Med Windows Phone får Microsoft (med tiden) musiktjenesten Zune, XBox-tjenester osv. at binde kunden op på. Hvis disse services er tilpas fede, så vil flere vælge Windows Phone (hvis de da ikke allerede er for låste til deres iPhone), men mange har endnu ikke købt en rigtig smart smartphone (Android/iPhone/Windows Phone) og markedet er slet ikke afgjort. Endelig savner jeg den helt fede exchange-integration på både Androids og iPhone. Hvis nogen skal levere den er det Windows Phone. Jeg vil slet ikke dømme den ude.

  • 0
  • 0
#4 Kim Schulz

Det skyldes dels at mobilen er god, men lige så meget at alle købte apps og især musik købt via iTunes ikke er noget værd på en Android eller andre platforme, hvis man skulle få lyst til at prøve dem af.

HTC's seneste synkroniseringsværktøj til android henter fint musik ud af ens iTunes og ellers findes der programmer som iSyncr og doubletwist der kan gøre det for en.

Endelig savner jeg den helt fede exchange-integration på både Androids og iPhone. Hvis nogen skal levere den er det Windows Phone.

Hvad er det du mangler? der er kalender, mail, contacts osv i android - synkroniseret med exchange og med push support osv.

  • 0
  • 0
#5 Deleted User

Hej Kim

Vil det sige at musik købt i iTunes Store via min iPhone kan afspilles på min HTC Android efterfølgende - eller er der tale om et ekspertbruger hack?

Mht. Exchange så savner jeg i kalenderen ordentlige invite features, tasks-understøttelse og bedre integration af "firma-adresse-kartoteket" for lige at nævne, hvad der pt. er top of mind. Jeg har prøvet nogle forskellige apps (reqall, Touchdown, Roadsync), men jeg synes ikke de leverer heller. Måske vil Windows Phone heller ikke..

  • 0
  • 0
#6 Kim Schulz

Yeps, den sync'er al den musik i itunes som du har på playlister (eller de playlister du vælger den skal sync'e).

Jeg synes egenligt at firmaadressebog i android er ganske fornuftig. den slår fint op i den og viser de detaljer der er nødvendige. Tasks kan jeg godt se mangler, men det bruger jeg aldrig selv og derfor har jeg nok ikke bemærket det.

  • 0
  • 0
Log ind eller Opret konto for at kommentere