Your SlideShare is downloading. ×
0
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Responsive presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive presentation

217

Published on

A presentation given by me, Gertjan Vermeir and Tim Vermaercke at 22 April 2013 for Arteveldehogeschool.

A presentation given by me, Gertjan Vermeir and Tim Vermaercke at 22 April 2013 for Arteveldehogeschool.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
217
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESPONSIVEDESIGNby Tim Vermaercke, Gertjan Vermeir & Nico Verbruggen
  • 2. Contents● Introduction● History of mobile browsing & design● Why implement a responsive design?● Implementation (how-to)● Short demonstration
  • 3. IntroductionA brief explanation of responsive design
  • 4. What is responsive design?● creating a website design that supports:○ multiple screen sizesusing a grid-based system
  • 5. What is responsive design?● creating a website design that supports:○ multiple screen sizes○ multiple input methodsmouse/trackpad, finger(s)
  • 6. History of the mobile webHow we got to this point
  • 7. 2007Year of the new smartphones
  • 8. No real browsing, nomobile site(mostly used for email)
  • 9. 2008-2010Introduction of 3G and faster phones +networks
  • 10. 3G > EDGEno fast internet, but used forsome browsing(!) some request for mobilewebsites
  • 11. 2010Introduction of the first tablets
  • 12. 2011-2012More and more tablets, more and moresmartphones (more Android!)
  • 13. Adaptive design(a dynamic site where adaptation occursserver-side)
  • 14. Responsive design(a dynamic site where adaptation occursclient-side)
  • 15. Today4G, many tablets, many smartphonesmore mobile browsing
  • 16. 4G: faster than WiFi(limited availability in Belgium)
  • 17. Adobe Digital Marketing Analysis (March 2013, data from February 13)(http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/)
  • 18. Adobe Digital Marketing Analysis (March 2013, data from February 13)(http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/)
  • 19. Why we chose responsivedesign
  • 20. Web developer● World Wide Web applications● Up to date● New methods● Technical● Design
  • 21. The rising demand
  • 22. Why implement aresponsive design?
  • 23. Twice the workLyricsDesignsCoding
  • 24. By 2020, mobile internet should takeover desktop internet usage
  • 25. Techniques
  • 26. Device awareness since CSS 2.1<link rel="stylesheet" type="text/css"href="screen.css" media="screen" /><link rel="stylesheet" type="text/css"href="print.css" media="print" />
  • 27. Acceptable Media Types
  • 28. iPhone 3G320 by 480 pixelsiPhone 5640 by 1,136 pixels
  • 29. <link rel="stylesheet" type="text/css"href="style.css" media="handheld" /><link rel="stylesheet" type="text/css"href="style.css" media="handheld and (max-device-width: 320px)” />
  • 30. <link rel="stylesheet" type="text/css"href="style.css" media="handheld and(max-device-width: 320px)” />Media typeMedia query
  • 31. <link rel="stylesheet" type="text/css"href="style.css" media="handheld and(max-device-width: 1136px) and(resolution: 326ppi)” />Keyword to chainpropertiestogether
  • 32. @media screen and (max-device-width:1136px) {body {background: #000;color: #FFF;}}
  • 33. @import url(‘style.css’) screen and (max-device-width: 1136px);
  • 34. media queries=conditional
  • 35. Questions?
  • 36. Some extra timeHeres some examples
  • 37. a list apart
  • 38. designed to move
  • 39. and many more...
  • 40. Thank you for yourattention!

×