Hjälpwebb

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:

TOPPMENY

SÖK

LOGOTYP

BILD

INNEHÅLL

INNEHÅLL

PUFFAR

PUFFAR

PUFFAR

KONTAKTUPPGIFTER

1. Utseeende på dator

TOPPMENY (rullgardin)

SÖK

LOGOTYP

BILD

INNEHÅLL

INNEHÅLL

PUFFAR

PUFFAR

PUFFAR

KONTAKTUPPGIFTER

2. Utseeende på telefon

Toppmenyn är utbytt till en rullgardinsmeny. Sök får ligga på en egen rad under menyn. Både innehåll och puffarna staplas istället för att ligga bredvid varandra.

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.

Tips! Undvik nästlade spalter och gridrader. Försök hålla nere antalet utgångsmallar för att förenkla hanteringen av de olika ytorna i mallen.


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

1. En spalt (bred mall)

1. En spalt (bred mall)

1. Två spalter (standardmall)

1. Två spalter (standardmall)

3. Nyhetsmall

3. Nyhetsmall

4. Startmall

4. Startmall

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)
Delmall

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)
Tvåspalt

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.

Standardmall

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.

Tre spalter

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.

Startmall

Denna sida publicerades: 2017-12-22

Skriv ut PDF-avsnitt

Hjälpte informationen på den här sidan dig?

Missa inga nya rön, tips och tricks! Prenumerera på insite!

Hitta till oss!

SiteVision AB (huvudkontor)
Drottninggatan 18A
702 10 Örebro

Info: 019-17 30 30
Support: 019-17 30 39

Senaste Tweets