Mobil vs. desktop

Museum24 har i utgangspunktet et mobile-first design der innholdsmodulene i all hovedsak plasseres under hverandre.

Unntaket kan være små kort, små bildethumbnails, små bannere og visse visninger av bilder/media sidestilt med tekst, hvor typisk en 50/50 fordeling av bredden også vil forekomme på mobil (portrett-mode).

På større skjermer vil mange av modulene kunne plassere elementer i større grad utover i bredden, avgjort av hvor mye bredde som er tilgjengelig (innstillinger eller faktisk nettleserbredde)

Eksempler på innhold som vil utnytte større bredde er:

  • bannere i rutenett: kan vise opptil 4 små bannere ved maks bredde
  • Kort/media i "grid" kan bygge f.eks 6 elementer i bredden på ved maks bredde.

Innstillinger som "bred/full" bredde på moduler eller seksjoner vil primært ha en effekt på skjermflater over 1080px bredde, men på mobil kunne påvirke om f.eks bilder blir helt utfallende eller om de vil ligge inne i standard marger sammen med øvrig innhold i f.eks en innholdsseksjon.

I det følgende kommer en diverse eksempler som man kan betrakte i mindre og mindre nettleservindu og/eller mobil.

s

"small" vil dekke 50% på mobil

s

m-s

Alt over small vil bli 100% på mobil

l-m

100% på mobil. Høyde vil avhenge av om modul er large-medium, large eller xlarge.

Innholdsseksjoner

I innholdsseksjoner vil det primært være moduler som trekker frem "kort" og "mediaelementer" og som vises som "grids" som vil fremstå ganske ulikt avhengig av skjermstrørrelse.

Grids: media

Mediamoduler vist i grid vil også vise færre i bredden ved mindre skjermer.

  •  (Foto/Photo)
    1/7
  •  (Foto/Photo)
    2/7
  •  (Foto/Photo)
    3/7
  •  (Foto/Photo)
    4/7
  •  (Foto/Photo)
    5/7
  •  (Foto/Photo)
    6/7
  •  (Foto/Photo)
    7/7

Andre forskjeller mellom desktop og mobil

Fordi desktop ofte vil ha et liggende preg mens mobil som regel vil ha et stående preg, vil bilder som brukes som heldekkende bakgrunner i bannere og enkelte andre visningsformer, få svært ulike vilkår for omsluttende plass. F.eks vil liggende bilder som samtidig skal fylle hele eller store deler av høyden på en mobil (i portett-mode) måtte kutte informasjon i bildet for at det ikke skal forvrenges. Redaksjonelt kan man velge fokuspunkter på bilder for å sørge for at riktige ting kommer i fokus når bildene av ulike årsaker ikke kan vises i sin helhet.
Dette er videre en egenskap som medfører at man skal være forsiktig med å legge f.eks viktige tekslige budskap innbakt i grafikk/bilder som ligger som bakgrunner i bannere, da deler av dette budskapet uunngåelig vil bli kuttet på visse skjermflater. Tilgjengeliggjør man bilder/media via media eller tekstmoduler er dette imidlertid ikke noe problem, da bildene som regel (untatt ved noen type innstillinger i slideshow og layouts i tekstmoduler) da alltid vises i sin helhet og aldri kutter bort noe.