Responsive presentation

  • 181 views
Uploaded 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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
181
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

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