Responsive design

Voor SME Webshop wordt gebruik gemaakt van drie verschillende grids. Het eerste grid bestaat uit een menu en content. Het tweede grid bestaat uit een menu, een zoekvenster en content. Het derde grid bestaat uit een banner, een menu, een zoekvenster en content. Naast deze drie grids is er ook een grid voor e-mails.

Het uitgangspunt voor het definiëren van het eerste grid voor SME Webshop is de resolutie van de Apple iPad Air 2. De resolutie van deze tablet is 1024 x 768 CSS pixels. Het grid van SME Webshop bestaat bij deze resolutie uit een blok met een verticaal menu en een blok met categorieën of producten.

Apple iPad horizontaal (1024 x 768)

Een pagina op een horizontale Apple iPad bestaat uit twee blokken naast elkaar.
In het linker blok is ruimte voor een kolom met een verticaal menu.
In het rechter blok is ruimte voor vier kolommen met categorieën of producten.
Elk van de kolommen in zowel het linker als rechter blok is even breed.
De twee blokken zijn voorzien van een padding en omlijning en van elkaar gescheiden door een tussenruimte.
Ook de kolommen met categorieën of producten in het rechter blok zijn van elkaar gescheiden door een tussenruimte.
1024 pixels: 15px 1px 15px 175px 15px 1px 10px 1px 15px 175px 15px 175px 15px 175px 15px 175px 15px 1px 15px.

Apple iPad verticaal (768 x 1024)

Een pagina op een verticale Apple iPad bestaat uit twee blokken boven elkaar.
In het bovenste blok is ruimte voor een kolom met een verticaal menu.
In het onderste blok is ruimte voor drie kolommen met categorieën of producten.
768 pixels: auto 15px 1px 15px 175px 15px 175px 15px 175px 15px 1px 15px auto.

Kolommen

Om één kolom van 175 pixels met categorieën of producten te kunnen tonen, is een minimale breedte van 237 pixels nodig.
Om twee kolommen met categorieën of producten te kunnen tonen, is een minimale breedte van 427 pixels nodig.
Om drie kolommen met categorieën of producten te kunnen tonen, is een minimale breedte van 617 pixels nodig.
Om vier kolommen te kunnen tonen, is een minimale breedte van 834 pixels nodig. Links wordt dan een blok met een verticaal menu getoond en rechts een blok met categorieën of producten. In het rechter blok is ruimte voor drie kolommen.
Om vijf kolommen te kunnen tonen, is een minimale breedte van 1024 pixels nodig, zie voor de indeling Apple iPad horizontaal (1024 x 768).
Om zes kolommen te kunnen tonen, is een minimale breedte van 1214 pixels nodig. In het rechter blok is dan ruimte voor vijf kolommen met categorieën of producten.

Breekpunten

De minimale breedte van een pagina is 237 pixels. Als de pagina geleidelijk breder wordt, wordt ook het blok met de kolommen voor categorieën of producten geleidelijk breder. Het blok beweegt mee tot het een maximale breedte van 555 pixels heeft bereikt. Als de pagina nog breder wordt, wordt het blok gecentreerd op de pagina.
Het eerste breekpunt is op 851 pixels. Als de breedte van de pagina groter of gelijk is aan 851 pixels, is er voldoende ruimte om links naast het blok met categorieën en producten ook het blok met het menu te tonen. Bij de bepaling van het eerste breekpunt is rekening gehouden met ruimte voor een verticale schuifbalk in de browser. Bij Google, Firefox en Internet Explorer is dat 17 pixels.
Het blok met het menu heeft een vaste breedte. Het blok met de categorieën en producten beweegt mee tot het een maximale breedte van 935 pixels heeft bereikt.
Het tweede breekpunt is op 1231 pixels. Als de breedte van de pagina groter of gelijk is aan 1231 pixels, wordt de totale ruimte voor het blok met het menu en het blok met de categorieën of producten vast gezet op 1184 pixels. Het geheel wordt gecentreerd op de pagina. Ook bij de bepaling van dit breekpunt is rekening gehouden met ruimte voor een verticale schuifbalk in de browser.

Blokken

Alle content wordt geplaatst in blokken. De namen van de blokken volgen de letters van het alfabet.
De a blokken worden gebruikt voor het grid.
De b blokken worden gebruikt voor het logo, het winkelwagentje en de icoontjes.
De c blokken worden gebruikt voor tekst en lijnen op formulieren.
De d blokken worden gebruikt voor formulierelementen, categorieën en producten. Er zijn vier d blokken met een breedte van 175 pixels, 365 pixels, 555 pixels en 100%. De blokken kunnen zowel onder elkaar als naast elkaar worden geplaatst.

Quirks

Als een pagina wordt weergegeven op een verticale iPhone, dan is de grootte van het lettertype conform de definitie in de CSS. Maar zodra de iPhone wordt gedraaid van verticaal naar horizontaal, wordt het lettertype vergroot. Om dit automatische zoomgedrag op de iPhone uit te schakelen, wordt de volgende experimentele stijlregel aan de CSS toegevoegd: body {-webkit-text-size-adjust: 100%;}.