Så bygger du en mobil hemsida
Under de senaste åren har den mobila webbanvändningen ökat så kraftigt till den grad att webbutvecklare och formgivare inte längre har råd att ignorera det. I rika länder har tronskiftet underblåsts av snabbare mobila anslutningar och billigare datatjänster. I utvecklingsländer har en växande skara hoppat över att köpa datorer helt och istället gått direkt till en smartphone, som i princip har samma funktionalitet.
Tyvärr introducerar den mobila arenan ett lager av komplexitet som kan vara svårt för utvecklare att ta till sig. Mobil utveckling är mer än att skapa en brygga mellan webbläsare, det bör vara plattformsoberoende. Det stora antalet mobila enheter gör noggranna tester en praktisk omöjlighet, vilket får utvecklare att fälla en tår av nostalgi då man blickar tillbaks på fornstora dar då microsofts webbmonopol tillät dig att skita högaktningsfullt i något annat än den dominerande webbläsaren.
Förutom att stödja olika plattformar kan varje enhet använda ett obegränsat antal mobila webbläsare. Till exempel kan en Android-användare komma åt din webbplats med hjälp av den inbyggda Android-webbläsaren, men kan också ha installerat en tredjepartsbrowser som Opera Mini eller Firefox Mobile. Det går bra så länge smartphone använder en progressiv webbläsare (och man kan med gott samvete säga att de flesta webbläsare är progressiva nuförtiden), men det finns inte några garantier.
Den mobila webben återinför flera frågor som i stort sett ignorerats de senaste åren. För det första, även hos smartphones med anslutning till 4G-nät blir bandbredden en allvarlig fråga för mobila konsumenter. Dessutom har mobila enheter en betydligt mindre skärmstorlek, som presenterar skärmytefrågor som vi inte sett sedan projektorernas glada dagar. Kombinera dessa problem med plattformsberoende kompatibilitetsproblem så är det inte svårt att se hur mobil utveckling just nu är som att ta ett ordentligt steg bakåt i tiden. Så låt oss ta itu med dessa frågor en i taget och skapa en färdplan för mobil webbutveckling:
- Hur du implementerar mobila stylesheets / CSS
- Vad du vill ändra i dina mobila stylesheets
- Bortom stylesheets
Hur du upptäcker en mobil enhet och implementerar dina mobila stilmallar
Det första steget för att adderas mobilt stöd för din webbplats är bland annat en speciell stilmall för att justera sidans utseende för mobila enheter:
Server-side metoder & UA String
Ett sätt att integrera mobila stilmallar är att upptäcka “user agent”-strängen (UA-sträng) med ett server-side språk som PHP. Med denna teknik upptäcker webbplatsen när en mobil enhet försöker ladda sidan och erbjuder antingen en lämplig formatmall eller omdirigerar användaren till en mobil subdomän som till exempel m.aftonbladet.se. Server-side-metoden har flera fördelar: den garanterar den högsta nivån av kompatibilitet och tillåter också webbplatsen för att erbjuda spececifika mark-ups och innehåll till mobila användare.
Även om denna teknik är perfekt för webbplatser på företagsnivå finns det praktiska problem som gör det svårt att genomföra på många andra sidor. Nya UA-strängar kommer ut nästan dagligen, så att hålla UA listan aktuell är näst intill omöjligt. Dessutom är framgångsfaktorn i denna teknik starkt beroende av enhetens “ärlighet” för att kunna förmedla dess sanna user agent. Ett flertal stora webbläsare har trots allt förfalskat sina UA-strängar för att komma runt denna typ av identifiering i det förflutna. Till exempel börjar de flesta UA strängar med “Mozilla” för att kunna passera de Netscape-kontroller som användes flitigt under 90-talet och under flera år låtsades Opera vara IE. Som Peter-Paul Koch skriver:
“It’s an arms race. If device detection really catches on, browsers will start to spoof their user agent strings to end up on the right side of the detects.”
Client-side metoder och media queries
Ett alternativ är att upptäcka den mobila enheten på klientsidan. En av de tidigaste teknikerna för att använda mobila stilmallar innebär att dra nytta av stilmallens mediatyp, till exempel:
<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />
I exemplet har vi inkluderat två stilmallar, den första som heter “site.css ” riktar sig mot stationära och bärbara datorer “screen” som mediatyp, medan den andra mallen mobile.css riktar sig mot mobila enheter med hjälp media-typen “handheld”. Även om detta kan vara en superb metod för att tillgodose båda enhetstyperna, är frågan ifall enheten stödjer tekniken en helt annan. Äldre mobila enheter tenderar att stödja den handhållna mediatypen, men de varierar i genomförande: vissa inaktiverar formatmallar definerade som “screen” för att istället bara läsa “handheld”, medan andra läser in båda.
Dessutom har de flesta nyare enheter eliminerat skillnaden mellan handhållna och stationära plattformar helt och hållet, för att kunna ge sina användare fullutrustade webbplatser istället för simpla mobila layouter. För att stödja nyare enheter måste vi använda oss av media queries, vilket tillåter oss att rikta våra stilmallar baserat på enhetens skärmbredd (du kan se en annan praktisk anpassning av mediernas frågor i Ethan Marcotte s artikel Responsive Web Design). Eftersom mobila enheter vanligtvis har mindre skärmar kan vi rikta vår anpassade stilmall till handhållna enheter genom att upptäcka skärmar som är 480px och mindre:
<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)" />
Detta kommer fungera i nästan alla nyare smartphones, men äldre enheter saknar ofta stöd för media queries, så för att vara på den säkra sidan bör vi satsa på en hybridlösning för att ha största möjliga genomslagskraft.
Vi börjar med att definera två stilmallar; “screen.css” för webbläsare på vanliga datorer och “antiscreen.css” för att skriva över de stilar som du inte vill använda i mobila enheter. Knyt samman dessa två i den separata stilmallen “core.css”:
@import url("screen.css");
@import url("antiscreen.css") handheld;
@import url("antiscreen.css") only screen and
(max-device-width:480px);
Slutligen definerar vi en sista stilmall döpt till “handheld.css” med specifika stilar för mobila webbläsare, för att sedan länka in dom från huvudsidan:
<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld,
only screen and (max-device-width:480px)"/>
Den här approachen kan tyckas vara något krånglig, men ovanstående metod är långt ifrån perfekt. Många mobila enheter har displayytor som är bra mycket bredare än 480px vilket tar luften ur vårt försök att erbjuda en mobilanpassad upplevelse för till exempel iPad-användare. Lyckligtvis behöver surfplattor och större mobila enheter inte en komprimerad mobil layout, men det är viktigt att komma ihåg att du bör tänka igenom ordentligt vilka enheter din hemsida kommer användas ifrån. Sannolikt kommer det dyka upp fler enheter som inte går att serva med en standardlösning. Det är olyckligt att vi just nu inte kan framtidssäkra våra webbplatser redan nu, men eftersom vi befinner oss en tid då nya standarder håller på att formas får vi gilla läget och försöka hänga med i utvecklingen istället.
Ett sista problem med media queries är att vi inte har någon kontroll över själva innehållet på hemsidan. Visst, vi kan väldigt enkelt dölja innehåll som text och bilder för mobilanvändare via en speciell css-mall – men vi kan inte hindra enheten ifrån att ladda ner den bakomliggande koden vilket innebär att du levererar en hemsida som äter upp onödig tid och bandbredd för användaren.
Användarinitierad metod
Med UA-detektionens brister och media queries fallgropar i beaktning så har många företag (exempelvis IKEA och Expressen) valt att låta användaren själv bestämma ifall den mobila versionen av hemsidan skall visas istället för den ordinarie. Den uppenbara komplikationen som denna metod bär med sig är extra användarinteraktion, vilket kan upplevas som analogt av våra upplysta smartphoneanvändare. Det är däremot ett lågt pris att betala för en idiotsäkermetod som gör användaren till kung och säkerställer möjligheten att få en fläckfri upplevelse av din hemsida oavsett vilken enhet som den öppnas ifrån. Det är dessutom den minst tids- och resurskrävande detektionstekniken.
Metoden innebär kort och gott att en länk med texten “besök vår mobila hemsida” dyker upp överst på sidan och skjutsar kunden vidare till din mobila subdomän. Som sagt så är ingen metod perfekt, och denna är inte heller nnågot undantag. En nackdel kan t ex vara att användaren missar länken eller inte förstår vad den innebär. En annan är att datoranvändare kan klicka på länken och få fram något som i regel ser ut som Jimi Hendrix knackat ihop under en mindre nykter episod. Men som sagt är den starkaste fördelen med denna metoden att användaren själv får ta beslutet att navigera en mobilanpassad eller vanlig hemsida.
Vad du vill ändra i mobila stilmallar
Nu när vi implementerat våra mobila stilmallar är det dags att kika på vad vi faktiskt vill ändra.
Ändra och ta bort onödiga element
Det primära målet med mobila stilmallar är att optimera layouten för en mindre skärmyta. Först och främst innebär det att vi spolar multikolumnslayouter till förmån för en ensam kolumn. Eftersom de flesta mobilskärmar är vertikala så blir det horizontella utrymmet mycket mer dyrbart och en designer har sällan råd med mer än en kolumn i sin mobila layout. Därefter skalar vi ner innehållet till det mest essentiella genom att dölja överflödiga element genom att sätta “display: none;” i CSS-mallen. Slutligen sparar vi ytterligare pixlar genom att reducera marginaler och padding och får en tightare layout.
Reducera bandbreddsanvändning
Att annat mål med mobila stilmallar är att minska dataanvändningen för långsammare mobila nätverk. Börja med att försäkra dig om att inga onödigt stora bakgrundsbilder visas via din mobila CSS, särskilt om du använder en enda stor bakgrundsbild. Var också noga med att dölja bilder som inte är livsviktiga för att användaren ska förstå ditt innehåll. Om din sida använder bilder som knappar eller meny så kan du överväga att ersätta dom med vanlig text eller CSS-kodade motsvarigheter.
Övriga ändringar
Utöver skärmyta och bandbredd finns det några andra saker som ska justeras i mobila stilmallar. Du kan för det första öka läsbarheten på dina texter genom att använda större teckensnittsstorlek på all brödtext.
För att göra det lättare för dina användare att klicka rätt på sina touchdisplayer kan du också förstora den klickbara ytan på knappar och länkar genom att lägga till “display: block” och padding för dina klickbara element.
Element som är justerade med “float”-inställningen i din stilmall kan ställa till problem, så överväg att spola dom ifall de inte är absolut nödvändiga. Kom ihåg att du har väldigt lite horizontellt utrymme, varför du bör optimera allt innehåll för vertikalt scrollande.
Slutligen så fungerar inte mouseover-funktioner i mobila enheter, så var noggrann med att du har ordentliga definitioner av “:active”-states. Om du använder dig av “:hover” i din design så kommer en mobil enhet bara activera “:hover”-stadiet när användaren klickar på objektet, vilket gör funktionen meningslös. Förlita dig därför inte på :hover i viktiga element som drop-downmenyer. Använd istället en meny som är permanent expanderad för mobila enheter.
Mobilanpassade funktioner
Utöver dina mobila sitlmallar kan vi addera ett antal specialfunktioner för mobilanvändare genom html-markups
Hur du gör klickbara telefonnummer (click-to-call)
Tro det eller ej – de flesta smartphones har kapacitet att ringa samtal. Som företag har du mycket att vinna på att göra det så enkelt som möjligt för dina användare att komma i kontakt med dig, så låt oss ta en kik på hur vi kan åstadkomma detta:
<a href="tel:46771365365" class="phone-link">0771-365 365</a>
Nu kan dina användare klicka direkt på telefonnumret för att ringa det, men det är några saker som är viktiga att känna till. Första två siffrorna (46) i telefonnumret är landskoden för Sverige, och eftersom webben är internationell skall den alltid inkluderas.
Länken är också klickbar oavsett om det är en mobil eller dator som använder sidan så när vi inte använder server-side metoden som beskrevs ovan döljer vi helt enkelt länkens klickbarhet via klassen “phone-link” i screen.css, och inkluderar den i de mobila stilmallarna.
Speciella input-typer
När det kommer till mobilsurfande är det betydligt svårare att mata in text på den lilla touchdisplayen jämfört med ett traditionellt skrivbord. Men vi kan göra det enklare för våra användare genom att utnyttja speciella typer av HTML5-input.
input type="tel" /
input type="email" /
Dessa input-typer trollar fram ett kontextuellt skrivbord som är relaterat till input-typen. I exemplet ovan triggrar type="tel" en numerisk tangentuppsättning med stora knappar som gör det enklare att trycka in en nummerserie, och type="email"@ och . så du slipper gå in på menyn för specialtecken.
HTML5 erbjuder browservaliderad datainmatning, och eftersom webbläsare som saknar stöd för HTML5 nergraderas alltid den angivna typen av input till input type="text", så du kan använda funktionerna igenom hela din webbsida utan att oroa dig för kompabilitetsproblem. Se en fullständig lista över HTML5 inputs.
Viewport-dimensioner och skärmorientering
När moderna mobila enheter renderar en webbsida skalar de ner innehållet för att passa deras viewport (visad skärmyta). Även om standardvisning i de flesta fall fungerar helt ok är det ofta nyttigt att justera viewporten. Detta görs enklas med hjälp av en meta-tagg som från början introducerades av Apple och därefter plockats upp av de flesta mobiltillverkare. Inom head-taggarna kan vi peta in denna rad:
meta name="viewport" content="width=320"
I exemplet ovan sätter vi viewporten till 320, vilket innebär att 320 pixlar av sidan kommer visas över hela skärmen på enheten.
Vi kan också låsa möjligheten för användaren att zooma in eller ut på hemsidan för att behålla vår layout intakt:
meta name="viewport" content="width=320,user-scalable=false"
Men precis som med att stänga av möjligheten att scrolla på vanliga hemsidor bör denna begränsning bara användas när det verkligen behövs eftersom du begränsar användarmöjligheterna
Med hjälp av att ställa in skärmorientering kan vi bestämma ifall den mobila hemsidan skall visas vertikalt eller horizontellt på smartphonens skärm, oavsett hur användaren håller mobilen.
För att upptäcka skärmorientering kan vi använda oss av en media query som liknar client-side metoden för device-detektion som nämndes tidigare. I din stilmall inkluderar du:
@import url("portrait.css") all and
(orientation:portrait);
@import url("landscape.css") all and
(orientation:landscape);
I exemplet används portrait.css som stilmall för vertikala enheter och landscape.css för horizontella.Media queries för skärmorientering har inte stöd hos alla enheter.
Slutsats
Världens teknikskifte mot det mobila fortsätter, handhållna enheter kommer bli viktigare och viktigare. Förhoppningsvis har det här inlägget inspirerat dig och erbjudit en del av den kunskap som krävs för att kunna optimera din hemsida för mobilanvändande.
Även om mobilt surfande har ätit upp en väsentlig del av världens internetanvändandning så är teknologin fortfarande kvar i spädbarnsstadiet. Precis som standarder har utvecklats för datorsurfande håller standarder för det mobila på att utvecklas för att så småningom sammanlänkas till mer universella lösningar. Det innebär att teknikerna som beskrivs i artikeln är högst temporära, så kika på datumstämpeln innan du bestämmer dig för vad som är bäst att tillämpa i din utvecklingsplan. Det är ditt ansvar som designer eller utvecklare att hänga med, faktiskt är den enda konstanten inom webbutveckling det ständiga behovet att fortsätta lära dig!
Några enkla tips för att göra din sajt mobil
Under de senaste åren har det marknaden för kraftfulla smartphones och mobila enheter med tillgång till webben on-the-go fullkomligt exploderat. Till skillnad från lillebröderna var förra generationens mobiltelefoners webbläsare fullproppade med kompromisser som begränsade dina möjligheter att åtnjuta ditt mobilsurfande avsevärt, men med hjälp av större displayer, snabbare anslutning och utvecklad teknik så kan du i stort sett uppleva webben på samma sätt som när du sitter vid din stationära eller bärbara dator. Webbkonsulten Jonas delar med sig av några tankar du bör ha i bakhuvudet när du bygger en mobil hemsida
Det råder ingen tvekan om att det är miljoner och åter miljoner människor som inte bara läser nyheterna eller statusuppdaterar med hjälp av sina smartphones, utan även förbereder och genomför faktiska köp via sin smartphone utan större problem. För webbutvecklare och marknadsförare som vill öka trafiken till sin hemsida är en rekommenderad lösning att tillgodose din mobila publik för att öka den trafiktypen.
Marknaden för Smartphones exploderar
Låt mig börja med att klargöra att visst, inte alla har en Smartphone, men Nielson Company har uppskattat att i slutet av 2011 kommer en av två amerikaner äga en Smartphone. Detta är stort, för som alla smartphoneägare vet så är dessa enheter extremt beroendeframkallande. Oavsett om du ute på språng eller hemma i vardagsrummet så har det blivit väldigt enkelt att surfa på webben med hjälp av din mobil.
Optimera din hemsida för smartphones
Att strömlinjeforma din hemsida så att tekniskt kunniga smartphone-användare får den upplevelse de förväntar sig kan vara till stor fördel när du vill generera trafik. En webbplats optimerad för navigering och inköp ifrån mobila enheter kan definitivt öka både försäljning och varumärkeskännedom. Här är några tips om hur du optimerar din hemsida för dem med mobila enheter.
Optimera för mobila webbläsare
Inom mobilwebben existerar i princip inte de traditionella webläsarna som Internet Explorer och Chrome, det är därför det är viktigt att tänka på vilka typer av mobila webbläsare trafiken kommer från. Medan den stora majoriteten av mobila webbläsare naturligtvis kommer att förstå din webbplats är det viktigt att vara medveten om att webbläsare som Opera Mobile och Opera mini tillsammans med Skyfire kommer att användas. Så om du samlar in data via Google Analytics eller dylikt, se då till att din analys kan erbjuda detaljerad information om besökarnas webbläsare.
Skärmupplösning
Det är sant att smartphone-skärmar blir skarpare och skarpare, men med så många produkter och märken tillgängliga kan din hemsidas kompabilitet med olika skärmupplösningar vara avgörande för att göra din användare nöjd eller besviken. Du vill naturligtvis att börja med att säkerställa att din webbplats som är tillgänglig för iPhone som har större biten av smartphonemarknaden, men glöm inte om andra märken som HTC, Blackberry och Nokia.
Låt dina användare scrolla så lite som möjligt
Tyvärr är scrollning på en mobil enhet inte så lätt som man ibland skulle vilja, och genom att minimera avståndet man måste rulla ner för att hitta rätt information så kan du göra din webbplats mer användarvänlig och lättöverskådlig.
Bilder och filer
3G och 4G uppkoppling med trådlöst har gjort det enklare att ladda ner bilder och större filer från mobilen, och en effekt som det har haft är att smartphone-användare oftast har mindre tålamod att vänta på att din hemsida ska ladda färdigt. Se därför till att alla bilder eller filer du laddar upp till din webbplats skapas för att laddas så effektivt som möjligt. En lång laddningstid kan resultera i en förlorad försäljning.
Geo-plats
Om du äger ett företag som tar emot en stor mängd affärer från det närliggande geografiska området, är det definitivt en god idé att göra din hemsida optimerad för smartphones. Se till att du skickar in din webbplats till Google Places för att meddela Google att din verksamhet finns i ett visst fysiskt område. Placera dessutom din adressinfo inklusive ditt postnummer på din webbplats för att se till att Google känner till din exakta position. Detta gör i de flesta fall att du får en nål på Google-kartan när någon gör en lokal sökning.
Optimera för Smartphones
Smartphonemarknaden förändras oerhört snabbt och i takt med att smartphones blir mer populära och kraftfulla, eldas den tekniska utvecklingen på så att många av de funktionerna din smartphone besitter inte är tillgängliga över huvud taget ifrån en stationär dator. Ett gratis online-verktyg som hjälper dig att skapa en mobil version av din webbplats utan att veta hur man programmerar är Mobify.me. En plattformsdriven webbplats kommer ha den fördelen att nya tekniska funktioner kommer kunna implemeteras utan att du själv behöver koda.
