• Save
Responsive presentation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive presentation

on

  • 303 views

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.

Statistics

Views

Total Views
303
Views on SlideShare
300
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 3

https://abs.twimg.com 1
https://twitter.com 1
https://www.docsnode.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive presentation Presentation 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!