Submit Search
Upload
Responsive webdesign
•
1 like
•
501 views
Sybren Wartna
Follow
webdesign done right
Read less
Read more
Technology
Report
Share
Report
Share
1 of 79
Recommended
De dynamische arena van web development evolueert bijna op dagelijkse basis en is onmisbaar voor de websites ontwikkelings experts
Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017
Rasin Bekkevold
Smartphone video inagro
Inagro video
Inagro video
I Like Media
Klanten hebben via steeds meer apparaten toegang tot het internet. Het vermogen van een verzekeraar om je klanten via alle apparaten een naadloze ervaring te bieden wordt steeds meer een cruciale factor in de klanttevredenheid. Het bereiken van de naadloze ervaring is geen eenvoudige opgave, maar als je het als verzekeraar eenmaal voor elkaar hebt kun je klanten echt aan je binden.
Responsive webdesign - wat is het en wat hebben verzekeraars eraan
Responsive webdesign - wat is het en wat hebben verzekeraars eraan
Kristian Wijnen
Html5 jeugdwerknet
Html5 jeugdwerknet
Hans Rossel
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
Ferry den Dopper
Asterix en Obelix nemen je mee op reis door het Responsive Webdesign landschap
Responsive webdesign
Responsive webdesign
Denver Sessink
Process steps to design a websites
Webdesign
Webdesign
Raoul Postel
Responsive presentatie
Responsive presentatie
Wendie Huis in 't Veld
Recommended
De dynamische arena van web development evolueert bijna op dagelijkse basis en is onmisbaar voor de websites ontwikkelings experts
Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017
Rasin Bekkevold
Smartphone video inagro
Inagro video
Inagro video
I Like Media
Klanten hebben via steeds meer apparaten toegang tot het internet. Het vermogen van een verzekeraar om je klanten via alle apparaten een naadloze ervaring te bieden wordt steeds meer een cruciale factor in de klanttevredenheid. Het bereiken van de naadloze ervaring is geen eenvoudige opgave, maar als je het als verzekeraar eenmaal voor elkaar hebt kun je klanten echt aan je binden.
Responsive webdesign - wat is het en wat hebben verzekeraars eraan
Responsive webdesign - wat is het en wat hebben verzekeraars eraan
Kristian Wijnen
Html5 jeugdwerknet
Html5 jeugdwerknet
Hans Rossel
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
Ferry den Dopper
Asterix en Obelix nemen je mee op reis door het Responsive Webdesign landschap
Responsive webdesign
Responsive webdesign
Denver Sessink
Process steps to design a websites
Webdesign
Webdesign
Raoul Postel
Responsive presentatie
Responsive presentatie
Wendie Huis in 't Veld
Talk 02 html5-css3
Talk 02 html5-css3
Monkeyshot
E-skills
Augmented reality
Augmented reality
Israa Al Adawi
Presentatie over ontwikkelingen op het web - gegeven op 23 augustus 2007
Presentatie @RC Groningen Oost
Presentatie @RC Groningen Oost
folkjur
SEO, customer journety
OrangeValley event 2014 SEO ontwikkelingen (Martin)
OrangeValley event 2014 SEO ontwikkelingen (Martin)
OrangeValley
Editie 7 van usabilityweb magazine. Een gratis magazine dat we versturen aan iedereen die zich hiervoor aangemeld heeft.
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7
srprs.me
responsive design: content is presented optimally and device specific. Is your screen small? Then a wide main menu from left to right will be useless. A so called 'Hamburger menu' (not related to cows in any manner) will be helpful.
Whitepaper responsive design voor een betere ux
Whitepaper responsive design voor een betere ux
Paul Immerzeel
OWD2010 - 1+2 - Mobiel: Aan de slag met grafische tags en layar - Marieke de ...
OWD2010 - 1+2 - Mobiel: Aan de slag met grafische tags en layar - Marieke de ...
SURF Events
Toekomst Fork CMS
Toekomst Fork CMS
Fork-CMS
Presentation given at Design by Fire Cafe in Breda, 18 december 2012
UX Candy
UX Candy
huijkman
Bij het ontwerpen van een responsive site kom je er snel achter dat het verder gaat dan alleen het aanpassen van layout aan de breedte van het device. In deze workshop delen we onze learnings met responsive sites als ontwerpers.
Responsive Design beyond layout
Responsive Design beyond layout
ANGI studio
Basisprincipes voor een goed werkende website.
Een website die werkt (Hogeschool Gent)
Een website die werkt (Hogeschool Gent)
Bram Vanderhaeghe
Presentatie over augmented reality.
Augmented reality.pptx
Augmented reality.pptx
RobinVanCoppenolle1
Native-, web- en hybride apps voor op mobiele toestellen Apps zijn applicaties die op tablets en smartphones draaien. Er bestaan native apps, web apps en hybride apps. Ook html 5 en css komen ter sprake om een 'responsive design' te maken. In Nederlands.
Apps voor mobiele toestellen
Apps voor mobiele toestellen
Karen De Groof
Door Peter Luit en Peter van Teeseling. CMBO Café bijeenkomst op 12 mei 2009 in Amstelveen. Onderwerp 'Nieuwe Businessmodellen met SaaS'.
CMBO Café - Nieuwe businessmodellen met SaaS
CMBO Café - Nieuwe businessmodellen met SaaS
Peter van Teeseling
Presentation of the Exploding Website model of Info.nl as presented on eDay 2008
Info Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht Ext
Info.nl
DLMA bestrijkt alle facetten van online marketing. Van het opzetten van een strategisch marketingplan tot het ontwikkelen van webapplicaties. Van het ontwerpen van effectieve websites tot hands-on advies bij zoekmachine-marketing – DLMA kent de mogelijkheden en de uitdagingen die internet biedt. DLMA heeft een frisse kijk op het samenspel van marketing, communicatie, design en techniek. Altijd deskundig en resultaatgericht en waar nodig, prettig eigenwijs.
Dlma company presentation
Dlma company presentation
Ruben Kruit
Met LeapStation wil we bedrijven helpen heel concreet "digitaal te transformeren". Deze presentatie geeft een overzicht van onze aanpak.
De Digitale Sprong
De Digitale Sprong
Steven Van den Berghe
Presentatie Succesvolle Websites tijdens SMM MannenMediaMarkt 2008 te Amsterdam
Succesvol Website Bouwen
Succesvol Website Bouwen
Bram Boertjes
Waarom 42windmills
Waarom 42windmills
42windmills
Presentatie Vincent Mejan - Computron - Onderwijs en ICT middag Triavium Nijmegen - Computron en Microsoft
Presentatie 4 maart
Presentatie 4 maart
Computron
Short introduction to typography. Presentation was given to front end
Typografie
Typografie
Sybren Wartna
Ingang van Lowlands & LL10 bandje: http://www.flickr.com/photos/danieke/ Gozer met bier: http://www.skoften.net/ Badges: http://www.4squarebadges.com/ Tekening door Olaf Muller: http://olafmuller.nl
UXD Lowlands concept
UXD Lowlands concept
Sybren Wartna
More Related Content
Similar to Responsive webdesign
Talk 02 html5-css3
Talk 02 html5-css3
Monkeyshot
E-skills
Augmented reality
Augmented reality
Israa Al Adawi
Presentatie over ontwikkelingen op het web - gegeven op 23 augustus 2007
Presentatie @RC Groningen Oost
Presentatie @RC Groningen Oost
folkjur
SEO, customer journety
OrangeValley event 2014 SEO ontwikkelingen (Martin)
OrangeValley event 2014 SEO ontwikkelingen (Martin)
OrangeValley
Editie 7 van usabilityweb magazine. Een gratis magazine dat we versturen aan iedereen die zich hiervoor aangemeld heeft.
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7
srprs.me
responsive design: content is presented optimally and device specific. Is your screen small? Then a wide main menu from left to right will be useless. A so called 'Hamburger menu' (not related to cows in any manner) will be helpful.
Whitepaper responsive design voor een betere ux
Whitepaper responsive design voor een betere ux
Paul Immerzeel
OWD2010 - 1+2 - Mobiel: Aan de slag met grafische tags en layar - Marieke de ...
OWD2010 - 1+2 - Mobiel: Aan de slag met grafische tags en layar - Marieke de ...
SURF Events
Toekomst Fork CMS
Toekomst Fork CMS
Fork-CMS
Presentation given at Design by Fire Cafe in Breda, 18 december 2012
UX Candy
UX Candy
huijkman
Bij het ontwerpen van een responsive site kom je er snel achter dat het verder gaat dan alleen het aanpassen van layout aan de breedte van het device. In deze workshop delen we onze learnings met responsive sites als ontwerpers.
Responsive Design beyond layout
Responsive Design beyond layout
ANGI studio
Basisprincipes voor een goed werkende website.
Een website die werkt (Hogeschool Gent)
Een website die werkt (Hogeschool Gent)
Bram Vanderhaeghe
Presentatie over augmented reality.
Augmented reality.pptx
Augmented reality.pptx
RobinVanCoppenolle1
Native-, web- en hybride apps voor op mobiele toestellen Apps zijn applicaties die op tablets en smartphones draaien. Er bestaan native apps, web apps en hybride apps. Ook html 5 en css komen ter sprake om een 'responsive design' te maken. In Nederlands.
Apps voor mobiele toestellen
Apps voor mobiele toestellen
Karen De Groof
Door Peter Luit en Peter van Teeseling. CMBO Café bijeenkomst op 12 mei 2009 in Amstelveen. Onderwerp 'Nieuwe Businessmodellen met SaaS'.
CMBO Café - Nieuwe businessmodellen met SaaS
CMBO Café - Nieuwe businessmodellen met SaaS
Peter van Teeseling
Presentation of the Exploding Website model of Info.nl as presented on eDay 2008
Info Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht Ext
Info.nl
DLMA bestrijkt alle facetten van online marketing. Van het opzetten van een strategisch marketingplan tot het ontwikkelen van webapplicaties. Van het ontwerpen van effectieve websites tot hands-on advies bij zoekmachine-marketing – DLMA kent de mogelijkheden en de uitdagingen die internet biedt. DLMA heeft een frisse kijk op het samenspel van marketing, communicatie, design en techniek. Altijd deskundig en resultaatgericht en waar nodig, prettig eigenwijs.
Dlma company presentation
Dlma company presentation
Ruben Kruit
Met LeapStation wil we bedrijven helpen heel concreet "digitaal te transformeren". Deze presentatie geeft een overzicht van onze aanpak.
De Digitale Sprong
De Digitale Sprong
Steven Van den Berghe
Presentatie Succesvolle Websites tijdens SMM MannenMediaMarkt 2008 te Amsterdam
Succesvol Website Bouwen
Succesvol Website Bouwen
Bram Boertjes
Waarom 42windmills
Waarom 42windmills
42windmills
Presentatie Vincent Mejan - Computron - Onderwijs en ICT middag Triavium Nijmegen - Computron en Microsoft
Presentatie 4 maart
Presentatie 4 maart
Computron
Similar to Responsive webdesign
(20)
Talk 02 html5-css3
Talk 02 html5-css3
Augmented reality
Augmented reality
Presentatie @RC Groningen Oost
Presentatie @RC Groningen Oost
OrangeValley event 2014 SEO ontwikkelingen (Martin)
OrangeValley event 2014 SEO ontwikkelingen (Martin)
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7
Whitepaper responsive design voor een betere ux
Whitepaper responsive design voor een betere ux
OWD2010 - 1+2 - Mobiel: Aan de slag met grafische tags en layar - Marieke de ...
OWD2010 - 1+2 - Mobiel: Aan de slag met grafische tags en layar - Marieke de ...
Toekomst Fork CMS
Toekomst Fork CMS
UX Candy
UX Candy
Responsive Design beyond layout
Responsive Design beyond layout
Een website die werkt (Hogeschool Gent)
Een website die werkt (Hogeschool Gent)
Augmented reality.pptx
Augmented reality.pptx
Apps voor mobiele toestellen
Apps voor mobiele toestellen
CMBO Café - Nieuwe businessmodellen met SaaS
CMBO Café - Nieuwe businessmodellen met SaaS
Info Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht Ext
Dlma company presentation
Dlma company presentation
De Digitale Sprong
De Digitale Sprong
Succesvol Website Bouwen
Succesvol Website Bouwen
Waarom 42windmills
Waarom 42windmills
Presentatie 4 maart
Presentatie 4 maart
More from Sybren Wartna
Short introduction to typography. Presentation was given to front end
Typografie
Typografie
Sybren Wartna
Ingang van Lowlands & LL10 bandje: http://www.flickr.com/photos/danieke/ Gozer met bier: http://www.skoften.net/ Badges: http://www.4squarebadges.com/ Tekening door Olaf Muller: http://olafmuller.nl
UXD Lowlands concept
UXD Lowlands concept
Sybren Wartna
Concept Kozijn
Concept Kozijn
Sybren Wartna
DesignThis Process
DesignThis Process
Sybren Wartna
Presentatie medmeo mail
Presentatie medmeo mail
Sybren Wartna
Concept
Concept
Sybren Wartna
More from Sybren Wartna
(6)
Typografie
Typografie
UXD Lowlands concept
UXD Lowlands concept
Concept Kozijn
Concept Kozijn
DesignThis Process
DesignThis Process
Presentatie medmeo mail
Presentatie medmeo mail
Concept
Concept
Responsive webdesign
1.
RESPONSIVE WEBDESIGN
webdesign done right
2.
Sybren Wartna
3.
4.
WAAROM RESPONSIVE?
5.
devices, devices, devices
6.
wie heeft geen
smartphone?
7.
mobile first ‣ markt
groeit sterk ‣ meer mogelijkheden ‣ focus op broodnodige
8.
let’s make a
mobile app
9.
telefoons niet in
verhouding
10.
oh, en we
willen ook iets met tablets
11.
12.
er is geen
mobile web
13.
er is één
web
14.
en dat is
responsive
15.
RESPONSIVE VOORBEELDEN
16.
< film van
hicksdesign.co.uk >
17.
flexibel
media flexibele grid queries afbeeldingen
18.
garrettwinder.com
19.
20.
21.
22.
werkenbijmirabeau.nl
23.
24.
25.
26.
sony.com
27.
28.
29.
30.
staffanstorp.se
31.
32.
33.
34.
simplebits.com
35.
36.
37.
38.
HOE WORD JE
RESPONSIVE?
39.
flexibel
media flexibele grid queries afbeeldingen
40.
flexibel grid
41.
wat doet een
grid?
42.
wat doet een
grid? ‣ orde scheppen ‣ organiseren van elementen op de pagina ‣ groeperen van elementen ‣ visuele connecties creëren
43.
target ÷ context
= result
44.
doel in pixels
(inclusief marges) target ÷ context = result ouderelement (parent)
45.
46.
47.
300px
60 60 60 20 20 20 960px
48.
300 ÷ 960
= 0,3125 .advertisement { width: 31,25% }
49.
media queries
50.
mediawat? ‣ type medium ‣
eigenschappen van medium ‣ nesten van styles ‣ overruling
51.
typen media ‣
braille ‣ embossed ‣ handheld ‣ print ‣ projection ‣ screen ‣ speech ‣ tty ‣ tv
52.
handheld wordt niet
(meer) voor mobiele telefoons gebruikt
53.
eigenschappen van media ‣
breedte / hoogte device ‣ breedte / hoogte viewport ‣ oriëntatie van device ‣ kleuren
54.
@media screen and (max-device-width:
480px) { /* specifieke CSS */ }
55.
@media print and
(orientation:landscape) and (monochrome) { }
56.
Blackberry
Internet Explorer Opera Mini
57.
hoe oplossen? ‣ mobile
first html + css ‣ modernizr ‣ jQuery plugins
58.
iPhone iPhone 4+
59.
@media screen and (-webkit-min-device-pixel-ratio:
2) { /* retina afbeeldingen */ }
60.
Modernizr.load([{ test
: Modernizr.mq(‘(-webkit-min- device-pixel-ratio: 2)’), yep : [‘retina.css’], nope : [‘images.css’] }]);
61.
modernizr ‣ touch screen ‣
CSS3 animations ‣ CSS3 transform
62.
what’s next? ‣ ondersteuning
tv’s ‣ ondersteuning beamers ‣ meer CSS3 ondersteuning
63.
flexibele afbeeldingen
64.
afbeelding schaalt mee .advertisement
img { max-width: 100%; }
65.
‘mobile’ first <img src="small.r.jpg"
data- fullsrc="large.jpg">
66.
services ‣ adaptive-images.com ‣ github.com/filamentgroup/Responsive-Images
67.
moeilijkheden ‣ inladen van
afbeeldingen ‣ schalen in browsers ‣ background sizing
68.
< film van
hicksdesign.co.uk >
69.
WERKWIJZE VOOR RESPONSIVE
70.
projectaanpak
71.
72.
agile / scrum ‣
samenwerken ‣ iteratief werken ‣ continue testen
73.
content first ‣ wat
is er echt nodig? ‣ focus op toptaken ‣ tekst ‣ afbeeldingen
74.
niet ontwerpen in
photoshop ‣ content first ‣ functioneel ontwerp ‣ grid maken ‣ schetsen
75.
testen
76.
bookmarklet ‣ resize window
bookmarklet ‣ http://tiny.cc/resize-bookmarklet ‣ niet dé oplossing
77.
zorg voor devices
78.
must read
79.
WEBDESIGN DONE RIGHT
twitter: @NLife - http://tiny.cc/webdesign-done-right