13 februari 2015 • mei 16, 2018 at 1:54 pm Qdraw

Responsive design vs. Adaptive Web Design

In dit artikel ga ik het hebben over hoe je Het design principe Mobile First het beste kunt toepassen en over het verschil tussen Responsive webdesign en Adaptive webdesign. Bij Responsive Web Design wordt het ontwerp traploos geschaald en bij Adaptive Web Design wordt er stapsgewijs geschaald.

Adaptive Web Design (AWD)

Adaptive Web Design herken je aan het feit dat er breekpunten gedefinieerd zijn. Wanneer de website gebouwd wordt dan worden de schermbreedtes door middel van media queries aangegeven.

Responsive webdesign (RWD)

Het grote verschil tussen AWD/RWD is de manier waarop de inhoud geschaald wordt. Bij een AWD worden de maten afgekapt en bij RWD loopt het grid soepeler over. Er wordt niet op een bepaalde maat overgeschakeld naar een andere variatie op het ontwerp. In het ontwerp wordt al bepaald hoe het grid gaat verschalen.

Desktop/Laptop

Op een groot scherm past meer informatie dan op een klein scherm. Dit is bijzonder obvious maar met dit punt moet tijdens het ontwerpen rekening mee gehouden worden. Op een desktopscherm past het meeste informatie. De meest voorkomende schermresolutie anno 2015 is voor de desktop: 1366 x 768 px. De meeste desktopschermen zitten tussen 1920×1080 px (HD 1080p) en 1024×768 px (15”, oude monitor). Door veel ontwerpers wordt gebruik gemaakt van het 960.gs grid-system.

Tablet

Een tablet heeft twee eigenschappen die de meeste desktops niet hebben, namelijk een hogere pixeldichtheid en een kleiner scherm dan een desktop. De nieuwste iPad Air heeft bijvoorbeeld een pixeldichtheid van 264 PPI (Pixels per inch) terwijl er voor een desktop altijd met 72 PPI gerekend wordt. Het gevolg is dat als er geen rekening wordt gehouden met de schermresoluties de beelden er pixelig uit zien. In de technische realisatie zijn hier meerdere manieren voor om dit op te lossen, zoals svg en @2. Als je werkt op basis van pixels dan is het nodig om verschilllende formaten te kunnen exporteren.

Een tablet kan ook verticaal gebruikt worden. De maat die door de iPad naar buiten wordt gedragen, wanneer deze verticaal wordt gehouden, 768×1024 px (teruggerekend naar 72ppi).

Mobiel

Een mobiel heeft als belangrijke eigenschap dat je er weinig informatie op kan laten zien. In het artikel Het design principe Mobile First leg ik uit waarom het handigste is om hiermee te beginnen. De meeste mobile schermformaten liggen tussen 300px en 500px breed. (teruggerekend naar 72ppi).

Een voorbeeld van een scenario waar mobiel gebruikt wordt:

Responsive design ; mobiel, utrecht centraal, station, i am | foto 1

Dit bericht is geschreven door: Dion

Tags: , , ,

Gecategoriseerd in: