Anpassa din hemsida till iPad

iPad är Apples senaste och mest hypade produkt hittils. Här i studion har det även blivit det senaste tillskottet, inte bara för att det är en rolig pryl men även för att den fungerar utmärkt för exempelvis presentationer av din portfolio till nya kunder. Den fungerar även bra och är smidig om du ska utbilda någon hur WordPress eller hur en hemsida underhålls och uppdateras, vilket jag nyligen har gjort och det fungerade alldelles utmärkt.

Detta är den första riktiga tablet-produkten av sitt slag och mer kommer. Användare kommer onekligen att surfa på den och stor chans är att de hamnar på din hemsida. Hur ser din hemsida ut i iPad?

Omskalning och liten yta

Upplösningen på en iPad är 1024×768 (landscape-mode) och 768×1024 (portrait mode) på 132PPI (pixels per inch). iPaden kommer automatiskt att skala om din hemsida så att den passar den lilla ytan och dra ut innehållet så att det fyller skärmen. Detta är inga problem då det är en proportionell omskalning oavsett hur du håller den.

Problemet var att Grafix Studio hade inga marginaler på sidorna vilket resulterade att det såg väldigt hoptryckt ut på sidorna. Ingen luft med andra ord.

En minimal faktor att åtgärda, men för det tränade ögat kan det vara irriterande. Vill lägga till lite luft på sidorna så att designen syns mer i sin helhet.

Lösningen, två olika CSS-filer

Detta löser man smidigt genom att använda två olika CSS-filer, en för landscape mode och en annan för portrait mode, beroende på hur du håller din iPad. Såhär ser koden ut:

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css">
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

För Grafix Studio blev lösningen att öka padding på sidorna med 10px; Då blev resultatet såhär:

En rätt minimal aspekt för slutanvändaren, men irriterande för de mer insatta webb-användarna, som i slutändan är de som besöker min hemsida.

Observera att det nu är luft längs sidorna, vilket det inte var förut. Någon vidareutveckling för att anpassa hemsidan till iPad har jag ännu inte funderat. Än så länge så finns det ingen ny standard för att designa ”touch”-hemsidor. Detta är något vi alla kommer att komma fram till desto mer tablets som dyker upp och sätter standarden för hur man ska visa hemsidor på den lilla roterande ytan.

Har du ingen iPad för att testa din hemsida. Testa då denna User Agent Switcher för FireFox som simulerar en iPad.

Fler inlägg om Design

• Därför misstags en webbdesigner för att vara en webbutvecklare
• 5 konkreta tips till en säljande design
• Vad kostar en hemsida?
• Dagens publiceringsverktyg i två grupper
• WordPress VS CushyCMS
• Webbdesigner eller Front End Developer?
• Designa utanför din stil
• Gratis CMS