Dette indlæg skal dog handle om hvordan du som virksomhed eller organisation, kan/skal behandle dine potentielle kunder eller brugere, der besøger dit website via en smartphone.

Hvad er et mobil website?

Hvis du surfer på nettet via din smartphone, så er du sikkert stødt på en masse almindelige websites som vises på telefonen nøjagtigt som via en almindelig browser. Du har dog med stor sandsynlighed også mødt et website, hvor mobil versionen så anderledes ud en browser versionen.

Et mobil website er typisk tilpasset telefonernes mindre skærme, sådan så der kan vises indhold uden side scroll og zoom. Du kan selvfølgelig sagtens besøge et almindeligt website med din smartphone, men så er det netop du skal scrolle en del sidelæns og måske også zoome ind og ud på tekster og billeder hele tiden.

Da der bliver flere og flere mobil brugere, så kommer du ikke uden om at tænke over om du vil stille en mobil version af dit website til rådighed for dine brugere.

Valg af metode

Der er 2 måder at lave dit mobil setup på. Dem vil jeg nu liste op, sammen med en række fordele og ulemper ved dem begge:

1. Metode 1: At lave en mobil version af dit website, som viser det samme indhold som den almindelige version - og som er tilpasset til smartphones skærmstørrelser.
2. Metode 2: At lave en separat version, som kan betragtes som en helt unikt website som er tilpasses smartphones skærmstørrelser.

Den åbenlyse fordel ved begge metoder er at du får et mobilt website der tilpasser sig skærmstørrelserne på smartphones. Det gør at brugeren ikke behøver at scrolle sidelæns eller at zoome ind og ud hele tiden.

En anden fordel ved begge metoder er at en mobilversion af en hjemmeside typisk er hurtigere at loade end den almindelige hjemmeside, da der er skåret ind til benet med tung grafik og effekter.

Hvilken metode er så bedst? Lad os først kigge lidt på fordele og ulemper ved begge metoder

Fordele ved metode 1 (samme indhold som website):

• Du behøver kun at opdatere din hjemmeside et sted fra, da mobilversionen viser samme indhold som den almindelige hjemmeside.

Ulemper ved metode 1 (samme indhold som website):

• Dårlige muligheder for fleksibilitet, da det er samme indhold der vises som på det almindelige website. Det er måske ikke altid hensigtsmæssigt i forhold til call to action, brugervenlighed, søgemuligheder og meget andet.
• Risiko for duplicate content. Husk nu at din mobil side ikke må blive indexeret hvis den viser samme indhold som dit almindelige website, på et separat domæne.

Fordele ved metode 2 (separat mobilversion):

• Mulighed for at tilpasse indhold og funktionalitet 100% til mobil brugere.

Ulemper ved metode 2 (separat mobilversion):

• Kræver at du opdaterer 2 hjemmesider. Både den almindelige hjemmeside og mobilversionen.

Hvad er så bedst?

Det kommer helt an på situationen. Som altid skal du have et mål med det du gør. Hvis dit mål blot er at vise dit indhold på en god måde over dine besøgende der bruger mobiltelefoner, så er metode 1 rigtig god. Hvis du har mere konkrete mål i forhold til brugere med mobiltelefoner, så er metode 2 bedre. Metode 2 egner sig nok også bedst til lokationsbestemte handlinger. Eksempler kunne være:

• Hvis du ønsker at reklamere for kommende events i lokalområdet.
• Hvis du ønsker at dine mobile brugere tilmelder sig - eller købe billet - til et arrangement.
• Hvis du ønsker at de skal kunne bestille bord til en restaurant.
• Hvis du ønsker at de skal kunne bestille en billet til næste forestilling i den lokale biograf.
• Hvis du ønsker at de skal kunne bestille en tid ved frisøren.
• Find selv på flere.

Listen af muligheder er lang. Har du flere punkter hører jeg gerne fra dig i kommentarerne.

Best practices i forhold til mobile hjemmesider

Nøjagtigt som almindelige hjemmesider skal virke i flere browsere, skal mobil telefoner selvfølgelig også testes på flere mobiltelefoner, og ikke mindst i flere operativsystemer. De store spillere er Android og iOS (Apple), men der er også en række andre så som BlackBarry, Windows Mobile og mange flere. Din mobil hjemmeside, skal gerne se ens ud (og virke) alle steder.

I resten af dette afsnit bliver det måske en smule teknisk. Hvis ikke det er noget for dig så hop bare ned til næste overskrift.

Det som drillede mig en del ved udviklingen af vores mobile website, var doctype deklarationen. Her fandt jeg ud af, at det der virkede bedst, var helt at udelukke den. Alternativt er det nok smartest at benytte HTML5 doctype deklarationen.

Den sidste ting der drillede var iPhone3 og 4, som åbenbart har en standard zoom funktionalitet indbygget, som andre telefoner ikke har. Jeg fandt langt om længe ud af at dette blot skulle slås fra, før det også så pænt ud på iPhones. Et enkelt meta tag i headeren på mobil versionen løste dette problem:

<meta name="viewport" content="width = device-width; initial-scale = 1.0; maximum-scale=1.0;" />

Hvis ikke dette meta tag indsættes, så vil iPhones zomme ind til 2.3 standard, og så ryger den ønskede effekt lidt med at indholdet skal være tilpasset mobiltelefonens skærm. Ligeledes sørger dette meta tag også for at der ikke skaleres, når brugeren drejer sin iPhone. Indholdet tilpasser sig blot den tilgængelige bredde.

En anden ting der skal tænkes over er hvordan du ønsker at sende folk videre til din mobil version. Det mest optimale er, efter min mening, at tjekke hvilken enhed de besøger din hjemmeside med. Hvis ikke det er via en browser, men fra en mobil telefon, så send dem videre til din mobile version af hjemmeside. Evt. med mulighed for at de kan komme tilbage til den almindelige version, hvis de skulle ønske det.

Ud over ovenstående går opgaven ud på at definere HTML og CSS i samspil med dit favorit CMS system - nøjagtig som ved udarbejdelsen af en almindelig hjemmeside. Vil du se hvordan vores mobil website kom til at se ud, så besøg www.confero.dk med din telefon.

Hvornår kan det betale sig at få et website tilpasset til mobiltelefoner?

Det er et godt spørgsmål. Det kommer an på rigtig mange ting. Men hvis du arbejder inden for et område hvor dine potentielle kunder kunne finde på at bruge deres mobiltelefoner til at besøge din hjemmeside, så kan det sikkert betale sig. Eller hvis du kan påvirke dine brugere til at møde op til events eller bestille billetter til et event imens de sidder på en nærliggende café eller lignende, ja så kan det nok også betale sig.

Det er altid en vurdering af om brugen af de resurser (tid og penge) der skal til er tjent hjem inden en bestemt periode. Du kan dog med få midler lave en lille undersøgelse af om det kunne være en god idé med et mobil website.

• Tjek på din Google Analytics profil for dit website, hvor mange besøgende du har fra mobiltelefoner. Hvis antallet er tilpas stort, kan det være det var på tide med en mobil version.
• Tjek også med det samme om du kan aflure deres adfærd på dit website. På den måde kan du måske blive klogere på hvordan de finder dig, hvad de søger efter og om de fandt det de søgte efter. Det kan give dig en indikation om hvad dit mobile website skal indeholde.
• Hvad gør dine konkurrenter - og har de succes med det? Kan du gøre det samme? Eller endnu bedre: Kan du gøre det bedre end dem?
• Bliv inspireret af andre mobile websites. Besøg en masse hjemmesider eller shops med en smartphone og se hvad de gør godt og lad dig inspirere af det.
• Brug din fantasi. Hvad kunne du have ud af at vise brugere der besøger din hjemmeside eller shop med en mobiltelefon?

Har du flere tips?

Har du flere gode ideer eller tips om mobil websites, så hører jeg gerne fra din i kommentarerne herunder. Jeg vil også meget gerne høre hvilke mobil websites du synes er gode - og hvorfor.

Hvad er meta tags?

Meta tags er en række informationer der kan indsættes i headeren af et HTML dokument. Metatags er kode der ligger skjult på din hjemmeside og det har sjældent nogen direkte synlig effekt på hjemmesiden. De metatags søgemaskinerne bruger er især vigtige, men der findes også nogle ikke så kendte metatags, som faktisk kan være ganske nyttige.

Nyttige meta tags

Open Directory Project (ODP)
ODP er et stort elektronisk katalog som søgemaskinerne ofte tager udgangspunkt i, når de skal indexere de mange hjemmesider der findes på internettet. Hvis din hjemmeside er blevet tilmeldt ODP, kan det godt være at søgemaskinerne henter oplysninger om din side derfra, i stedet for at tage dem direkte fra din side. Det er sjældent hensigtsmæssigt, da det altid er bedre at være herre over den slags selv.

Der er en nem måde at undgå at dine sideinformationer hentes fra ODP. Hvis du sætter nedenstående metatag ind på alle dine sider, så er du ude over det problem.

<meta name="robots" content="noodp" />

Læs evt. en mere uddybende forklaring om ODP og dette metatag hos demib.

Skype highlight af telefonnumre
Hvis du bruger Skype, som så mange andre, så har du måske også oplevet at telefonnumre på de hjemmesider du besøger bliver ændret til et "skype ring op" link. Altså et link der gør dig i stand til at trykke på en knap ovenpå telefonnummeret som straks ringer nummeret op.

Har du nogensinde brugt den funktion? Jeg har ikke. Har linket fra Skype ofte gjort at du ikke kunne læse telefonnummeret? Det har jeg tit oplevet og det irriterer mig hver gang det sker. Nu ved jeg ikke hvordan statistikken for og imod denne Skype funktionalitet ser ud, men står det til mig, skal det bare væk. Hvis du er af samme mening, kan du fjerne denne funktionalitet med følgende metatag:

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Simuler en bestemt version af Internet Explorer
Af og til kommer der en ny browserversion på markedet. Det er jo fremragende når teknologien udvikler sig og det fører ofte en masse muligheder med sig. Det er dog heller ikke altid helt problemfrit.

Som webudvikler har jeg i årenes løb især oplevet problemer med de nye Internet Explorer versioner. Det der sker er at folk begynder at opgradere deres browsere til nyeste version. Det er også fornuftigt, da det giver flere muligheder og større sikkerhed på nettet, men det der også ofte sker er, at mange af de hjemmesider du plejer at besøge lige pludselig ser mærkelige ud. I værste fald virker de måske slet ikke.

Det skyldes ofte at en hjemmesides kode er tilpasset en bestemt version af Internet Explorer. Måske er der slet ikke tænkt på at optimere hjemmesiden til flere browsere. Men af gode grunde er det jo svært at optimere til noget som ikke er udgivet endnu. Så hvad gør man så?

Den bedste løsning er at få din hjemmeside optimeret til nyeste version af browseren, men det er ikke altid noget der kan ske på ultrakort tid. Derfor kan det være smart at benytte sig af et par metatags der kan simulere en ældre version af Internet Explorer.

Ser din hjemmeside f.eks. forfærdelig ud i IE8, så kan du prøve følgende metatag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Ønsker du at være klar til når version 9 kommer eller vil du bare simulere version 8 kan du prøve:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Jeg har ikke slev prøvet disse simuleringsmetatags, men de skulle virke efter hensigten.

Kender du andre nyttige metatags?

Har du nogensinde manglet nogle små smarte ikoner til dine webdesigns eller dine hjemmesider? Hvis du kan svare ja til det, så er der en glimrende service på nettet som du skal kigge på. Der findes nemlig en danskudviklet søgemaskine, hvor man udelukkende søger efter ikoner. Søgemaskinen hedder Iconfinder og er bygget op lidt ligesom forsiden på Google.

På Iconfinder kan du f.eks. søge efter flag ikoner, dokument ikoner, grønne ikoner og endda hele ikon sæt om f.eks. dette om sociale medier.

Husk at tjekke hvilken licens der er på ikonerne, så du ikke kommer til at begå ulovligheder.

Du kan også følge Iconfinder på Twitter. Her kan du få gode tips og links til spændende resurser.

Jeg blev gjort opmærksom på denne fremragende service af Morten Vadskær på hans blog, hvor han først skrev om Iconfinder og opfordrede til at sprede budskabet til denne søgemaskine. Det er hermed gjort