Sida Design för landskaps- och porträttvisningar - dummies

När du slår på en iPhone eller iPad justerar orienteringen av en webbsida automatiskt. Safari webbläsaren förstärker (eller minskar) webbsidor på ett smart sätt för att passa skärmen, men det är inte perfekt. Även om Safari kan göra att dina sidor passar utrymmet i stort sett kan dina konstruktioner drabbas av:

• När sidan förstoras för att passa liggande läge på en iPad kan optimerade bilder bli suddiga.

• Att minska sidans storlek kan göra texten omöjlig att läsa.

I många år har de flesta webbsidor bredd och höjd för de vanligaste dataskärmarna:

• Bredd: I de tidiga dagarna på webben medförde du att du skapade mönster som var inte mer än 780 pixlar bred så att de skulle passa in i en bildskärmsupplösning inställd på 800 x 600 pixlar. De flesta valde 780 pixlar eftersom den inställningen lämnade lite utrymme för rullningsfältet på vardera sidan av webbläsarfönstret.

  På senare år, som större skärmar har blivit billigare och mer använt, uppdaterade de flesta webbdesigners målstorleken på 960 till 980 pixlar, vilket passar bekvämt på bildskärmar med en upplösning på 1024 x 768 pixlar.

• Höjd: Även om de flesta designers är överens om bredden på en design som är optimerad för dessa skärmstorlekar (ge eller ta 10 eller 20 pixlar) har en debatt rastat om webbsidans mönster ska passa inom höjden av dessa mönster.

  Teorin bakom att begränsa höjden på webbsidor bygger på studier som tyder på att användarna inte tycker om att rulla ner en sida och att innehåll som inte är synligt när sidan laddas först ignoreras. Möjligen rullning har fått en dålig rap under åren. Det är dags att överge tanken att webbdesign aldrig ska förlänga mer än 600 pixlar ner på en sida.

Denna figur illustrerar varför iPad har ändrat för evigt debatten om hur länge en webbsida ska vara. Här ser du ett skärmdump av ING Direct-webbplatsen som det visas på en iPad i porträttläge. I rättvisa till designarna hos ING Direct passar webbplatsen bekvämt inom ramen för en bildskärm med en upplösning på 800 x 600 pixlar.

Genom att begränsa webbplatsens innehåll till 600-pixel cutoff, upptar emellertid designen bara ungefär en tredjedel av iPad-skärmen i stående läge. Även i landskapsläget på iPad tar inte designen upp det vertikala utrymmet, utan fyller i bottenkvartalet av skärmen med den ljusa orange bakgrundsfärgen.

Om du vill skapa en design för en webbplats, är det bästa sättet att designa sidorna för att vara 980 pixlar breda och sedan utöka dem åtminstone 980 pixlar nerför skärmen.Om du gör det, anpassar både iPad och iPhone automatiskt designen för att fylla skärmen i liggande och stående lägen genom att justera storleken för att passa.

Men om du verkligen bryr dig om design och vill ha dina sidor att se sitt bästa ut på iPad och iPhone, är det bäst att skapa två olika mönster.

Reglerna för Cascading Style Sheets (CSS) innehåller möjligheten att skapa flera stilark så att de bäst kan dra nytta av storleken och funktionerna på varje enhet. Till exempel kan du skapa stilar riktade mot landskapet eller porträttorienteringen av iPhone eller iPad (som i den här designen).

På samma sätt kan du rikta in olika enheter med olika stilark genom att skapa en uppsättning stilar för en sida när den visas på en stationär dator och en annan uppsättning stilar när sidan skickas till en skrivare.