Responsive and Mobile Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive and Mobile Design

  • 570 views
Uploaded on

Now that more than 55% of American adults own a smartphone, designing for the mobile web isn't just important—it's a requirement. Through this session, we'll discuss best practices for designing ...

Now that more than 55% of American adults own a smartphone, designing for the mobile web isn't just important—it's a requirement. Through this session, we'll discuss best practices for designing mobile websites using responsive design, a technique for developing cross-platform to account for the ever-growing range of device sizes and resolutions. The session will also cover design constraints of different devices, how to use CSS3 media queries, and front-end development frameworks like Twitter Bootstrap.

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
No Downloads

Views

Total Views
570
On Slideshare
568
From Embeds
2
Number of Embeds
2

Actions

Shares
Downloads
12
Comments
0
Likes
3

Embeds 2

https://twitter.com 1
https://www.linkedin.com 1

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. Responsive Design Mobile design and development techniques
  • 2. What we’re covering A brief agenda... • What is responsive design • How to design for mobile effectively • Implementing responsive design techniques on the web • Frameworks to make your life easier
  • 3. @mike_tedeschi http://mtedeschi.com
  • 4. Why support mobile? (really? you’re not convinced?)
  • 5. 1.75B Smartphone Users Worldwide http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014
  • 6. 1.75B Smartphone Users Worldwide http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014 (that’s 300 million more than last year)
  • 7. 55% of Americans have smartphones http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  • 8. 60% use their phone to go online http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  • 9. http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/ 200 million unhappy visitors
  • 10. 200 million unhappy visitors customers http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  • 11. What is responsive design?
  • 12. What is responsive design? More than just a buzzword The web design approach for building sites that adapt and are optimized for a range of screen resolutions, sizes, and formats.
  • 13. They “respond” to the conditions in which the site is viewed.
  • 14. 1200px 996px 480px768px
  • 15. Desktops and Laptops Tablets Phones
  • 16. Common breakpoints For most screen sizes • 320 px – Mobile portrait • 480 px – Mobile landscape • 600 px – Small tablet • 768 px – Tablet portrait • 1024 px – Tablet landscape/Netbook • 1280 px & greater – Desktop
  • 17. Responsive A d a p t i v e ­versus
  • 18. Responsive (percentages) Adaptive (pixels)
  • 19. Responsive (percentages) Adaptive (pixels) 30px
  • 20. Responsive (percentages) Adaptive (pixels) 12.28% 30px
  • 21. We usually meet in the middle
  • 22. Adaptive (fixed-width grid) Responsive (%-based grid)
  • 23. So, what actually changes?
  • 24. Adaptive (fixed-width grid)
  • 25. Navigation Categories
  • 26. Categories Search Ads = gone
  • 27. Categories Images fit
  • 28. Mobile web design best practices
  • 29. Best practices & considerations Think about how people use their phones • Consider hand placement • Avoid edges and corners if possible • Place content in the middle and give room to scroll • Make targets an appropriate, easy-to-tap size • Don’t place anything important under a target/button
  • 30. Fingers and hand placement
  • 31. Ideal hit zone
  • 32. Ideal hit zone The short stretch
  • 33. Ideal hit zone The long stretch The short stretch
  • 34. Avoid the edges
  • 35. http://4ourth.com/
  • 36. Inaccurate http://4ourth.com/
  • 37. Accurate!Inaccurate http://4ourth.com/
  • 38. Be smart with buttons/targets
  • 39. Contact point +
  • 40. + Obscured area Contact point
  • 41. Where is the worst place for a button?
  • 42. Good luck.
  • 43. How to implement it on the web (yes, that means writing code)
  • 44. CSS Media Queries
  • 45. .content { width: 1024px; margin: 0 auto; background: red; } Start with some basic CSS.
  • 46. What a lovely red box!
  • 47. That doesn’t seem quite right...
  • 48. .content { width: 1024px; margin: 0 auto; background: red; } @media screen and (max-width: 1023px) { .content { width: 100%; margin: 0 20px; } } Let’s add in some media queries.
  • 49. Much better!
  • 50. So... break that down.
  • 51. @media screen and (max-width: 1023px) { ... } rule media parameters
  • 52. @media screen and (max-width: 1023px) { ... } print handheld projection tv aural braille embossed tty all
  • 53. @media screen and (max-width: 1023px) { ... } min-width max-device-width min-device-width device-aspect-ratio orientation min-resolution color
  • 54. .content { width: 50%; margin: 0 auto; background: red; } @media screen and (min-width: 320px) and (max-width: 480px) { .content { width: 100%; } } Between a range of screen sizes.
  • 55. .content { width: 50%; margin: 0 auto; background: red; } @media screen and (min-width: 320px) and (max-width: 480px) { .content { width: 100%; } } Between a range of screen sizes.
  • 56. .content { width: 100%; margin: 0 auto; background: red; } @media screen and (orientation: portrait) { .content { width: 50%; } } Orientation of the device or window.
  • 57. .content { width: 100%; margin: 0 auto; background: red; } @media screen and (orientation: portrait) { .content { width: 50%; } } Orientation of the device or window.
  • 58. .my-image { width: 100px; background: url(my-image.jpg); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .my-image { background-image: url(my-image@2x.jpg); background-size: 100%; } } On retina or high-resolution displays.
  • 59. Frameworks and libraries
  • 60. Frameworks & libraries Better than starting from scratch • Twitter Bootstrap • Zurb Foundation • Responsive Grid System • Many, many others...
  • 61. Twitter Bootstrap 3.0 getbootstrap.com
  • 62. Zurb Foundation 5.0 foundation.zurb.com
  • 63. Responsive Grid System responsivegridsystem.com
  • 64. Go make awesome mobile sites!
  • 65. @mike_tedeschi http://mtedeschi.com