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

218

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
218
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!

×