Responsive webdesign

RESPONSIVE WEBDESIGN
webdesign done right

mobile first

‣ markt groeit sterk
‣ meer mogelijkheden
‣ focus op broodnodige

oh, en we willen ook
iets met tablets

< film van hicksdesign.co.uk >

flexibel media flexibele
grid queries afbeeldingen

wat doet een grid?

‣ orde scheppen
‣ organiseren van elementen op de pagina
‣ groeperen van elementen
‣ visuele connecties creëren

doel in pixels (inclusief marges)

target ÷ context = result
ouderelement (parent)

300px

60 60 60

20 20 20

960px

300 ÷ 960 = 0,3125

.advertisement {
width: 31,25%
}

mediawat?

‣ type medium
‣ eigenschappen van medium
‣ nesten van styles
‣ overruling

typen media
‣ braille
‣ embossed
‣ handheld
‣ print
‣ projection
‣ screen
‣ speech
‣ tty
‣ tv

handheld wordt niet (meer)
voor mobiele telefoons
gebruikt

eigenschappen van media

‣ breedte / hoogte device
‣ breedte / hoogte viewport
‣ oriëntatie van device
‣ kleuren

@media screen and
(max-device-width: 480px) {
/* specifieke CSS */
}

@media print and (orientation:landscape)
and (monochrome) {

}

Blackberry Internet Explorer Opera Mini

hoe oplossen?

‣ mobile first html + css
‣ modernizr
‣ jQuery plugins

@media screen and
(-webkit-min-device-pixel-ratio: 2) {
/* retina afbeeldingen */
}

Modernizr.load([{
test : Modernizr.mq(‘(-webkit-min-
device-pixel-ratio: 2)’),
yep : [‘retina.css’],
nope : [‘images.css’]
}]);

modernizr

‣ touch screen
‣ CSS3 animations
‣ CSS3 transform

what’s next?

‣ ondersteuning tv’s
‣ ondersteuning beamers
‣ meer CSS3 ondersteuning

afbeelding schaalt mee

.advertisement img {
max-width: 100%;
}

‘mobile’ first

<img src="small.r.jpg" data-
fullsrc="large.jpg">

services

‣ adaptive-images.com
‣ github.com/filamentgroup/Responsive-Images

moeilijkheden

‣ inladen van afbeeldingen
‣ schalen in browsers
‣ background sizing

agile / scrum

‣ samenwerken
‣ iteratief werken
‣ continue testen

content first

‣ wat is er echt nodig?
‣ focus op toptaken
‣ tekst
‣ afbeeldingen

niet ontwerpen in photoshop

‣ content first
‣ functioneel ontwerp
‣ grid maken
‣ schetsen

bookmarklet

‣ resize window bookmarklet
‣ http://tiny.cc/resize-bookmarklet
‣ niet dé oplossing

WEBDESIGN DONE RIGHT
twitter: @NLife - http://tiny.cc/webdesign-done-right

More Related Content