Planera mallarna

Inför responsivt

Bästa tillvägagångssättet för att bygga om befintliga, ej responsiva, mallar till responsiva är att börja om helt från början. Planera det responsiva utseendet och funktionaliteten utifrån de enheter webbplatsen ska fungera för.

Många anser att det är en bra ide att tänka "mobile first". Det innebär i princip att fokusera på det om är viktigt för webbplatsen, utgå från det och börja bygga utifrån det minsta formatet (telefoner). Sedan läggs saker till när formatet blir större (istället för att ta bort saker när skärmen krymper). En anledning till detta är att allt innehåll laddas trots en begränsning till vad som ska synas. Det betyder att allt innehåll som finns för vanlig datorupplösning även laddas för den mobila upplösningen.

Design för tre olika typer av upplösningar är vanligt förekommande:

• Dator (upp till 978 px)
• Surfplatta (upp till 768px)
• Telefon (upp till 480px)

Tänk på att utgå från din webbplats! Fungerar designen lika bra för datorupplösning och surfplatteupplösning så är det ingen mening att skapa en brytpunkt för surfplatta. Då räcker det kanske med en brytpunkt för en mindre skärmupplösning (som telefon).

Här är ett exempel med enbart en datorupplösning och en telefonupplösning:

Planering av mallytor och innehållsytor

Det är bra att veta hur övriga mallar ska se ut (inte bara startsidan) redan vid skapandet av första mallen. Innan det responsiva bygget påbörjas är det bra att skissa upp en enkel ritning över mallarna. Planera in mall- och innehållsytorna för att få en bra struktur då mallarna bygger på varandra.

• Mallytor markerar områden i mallen som kan ändras på vid byggandet av nästa mall.
• Innehållssytor innebär de områden som redaktören har rätt att lägga till innehåll i.

I det här exemplet syns skisser för den stora upplösningen, men övriga upplösningar finns med i åtanke.

Utifrån ovanstående skisser bygger vi fem olika mallar, en delmall med mallyta samt fyra mallar med innehållsytor:

1. Delmall — Utgångsmall

Här bygger vi en utgångsmall med

• Övre sidhuvud (100% grå bakgrund)
  • Toppmeny (8 kolumner bred)
  • Sök (4 kolumner bred)
• Sidhuvud
  • Logotyp (12 kolumner bred)
• Mallyta (markerar område för nya mallar som baseras på denna mall)
• Sidfot
  • Puff 1 (4 kolumner bred)
  • Puff 2 (4 kolumner bred)
  • Puff 3 (4 kolumner bred)
• Nedre sidfot (100% grå bakgrund)
  • Kontaktuppgifter (12 kolumner bred)

2. Mall 1 — En spalt

Mallen baseras på utgångsmallen (det gör alla mallar i exemplet).

Mallen består av endast en spalt så vi lägger till en gridrad och konverterar den till en innehållsyta.

• Mittenspalt (innehållsyta, 12 kolumner)

2. Mall 2— Standard (2 spalter)

Mallen baseras på utgångsmallen.

Området för mallytan delas i två delar där varje del består av en spalt innehållande kolumner:

• Mittenspalt (innehållsyta, 6 kolumner)
• Högerspalt (innehållsyta, 6 kolumner)

Konvertera de två ytorna till innehållsytor.

3. Mall 3 — Nyhetsmall

Mallen baseras på utgångsmallen.

Området för mallytan delas i två delar där varje del består av en spalt innehållande kolumner:

• Mittenspalt (innehållsyta, 8 kolumner)
• Högerspalt (nyhetsmeny, 4 kolumner)

Konvertera Mittenspalt till en innehållsyta.

4. Mall 4 — Startmall

Mallen baseras på utgångsmallen.

Området för mallytan delas i tre delar fördelade på två rader. Lägg till två gridrader Lägg en spalt med samtliga kolumner i bredd i den övre raden. Dela den undre raden i två spalter där vardera spalten ges en bredd angiven i kolumner.

• Rad
  • Övre bild (innehållsyta, 12 kolumner)
• Rad
  • Mittenspalt (innehållsyta, 6 kolumner)
  • Högerspalt (innehållsyta, 6 kolumner)

Konvertera alla tre ytorna till innehållsytor.