Ontwerpen voor grote schermen

Written by joericlaes on Monday March 17, 2014

Responsive design

Iedereen heeft er tegenwoordig de mond vol van. Maar wat is Responsive design eigenlijk? 

Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide 

an optimal viewing experience—easy reading and navigation with a 

minim

um of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors

Juist ja, een optimale gebruikerservaring op elke schermgrootte. Dat is waar dit alles om draait. Grote schermen worden vaak niet betrokken bij het ontwerpproces.

 

Content is king

Veel mensen maken vandaag een foute denkpiste. Een website moet er goed uitzien op mobiel en meer niet. We vergeten te vaak dat content van cruciaal belang is. We moeten er dus voor zorgen dat onze content steeds goed wordt weergegeven. Vanuit dit standpunt is mobile first een uiterst interessante strategie. Je gaat dan nadenken waar het om draait. Men stelt zich vragen als: wat is onze core-business? Wat willen we verkopen,...

 

1/4 mobiele bezoekers

25% van de bezoeken gebeuren via een mobiel apparaat. Dat betekent dus ook dat er 75% van de bezoekers jouw website op een groter scherm bekijkt. Waarom houden we vandaag ons dan uitsluitend met de mobiele aanpak bezig? 

 

Wat met grote schermen

Een groter scherm betekent meer plaats en vrijheid voor een designer. Toch moeten we oppassen bij het ontwerpen voor grote schermen. Het is niet omdat we meer plaats hebben dat we ook alles moeten volproppen met content. Speel hierop in en zorg voor voldoende ademruimte in jouw ontwerpen.

 

 

 

 

Breakpoints

Laat ons eerlijk zijn, we werken niet graag met mediaqueries. Wat we eigenlijk doen is ons aanpassen aan de huidige situatie. We houden geen rekening met toekomstscenario's en zijn teveel gefocust op devices. Maar hoe moet het dan wel? Mediaqueries zijn vaak de enige oplossing om sommige zaken aan te pakken. Recente tools zoals Edge Reflow van Adobe helpen ons hierbij.

 

 

 

 

 

 

Enkele voorbeelden

 

 

comments powered by Disqus