Responsive Web Design

2,878 views

Published on

This presentation provides an overview of Responsive Web Design with some practical information about how to create responsive web designs.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,878
On SlideShare
0
From Embeds
0
Number of Embeds
1,024
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web Design Cory Webb
  2. 2. http://manoscrafted.com/rwd-jdnc-2013.pdf
  3. 3. Who is this guy?● Part of the Joomla/Mambo community since 2003● Founded Manos in 2008● Author: Beginning Joomla Web Site Development (Wrox, 2009)● Reality TV Junkie
  4. 4. Who are you?● Designers● Front-end developers (HTML/CSS/JS)● Back-end developers (PHP, MySQL, Ruby, etc)● Joomla integrators● Website Admins● Stumbled in here on accident?
  5. 5. Agenda● What is responsive web design● Responsive CSS and Javascript● Responsive frameworks (Bootstrap)● Testing tools● Should I make my website responsive?● Questions
  6. 6. What is Responsive Web Design?
  7. 7. What is Responsive Web Design● The practice of making your web content universally and optimally accessible across a variety of devices.
  8. 8. What is Responsive Web Design● Nothing new.● Worlds first website (built in 1991) was responsive, only they didnt call it that back then. http://www.w3.org/History/19921103- hypertext/hypertext/WWW/TheProject.html
  9. 9. What is Responsive Web Design● NOT mobile optimization (though thats part of it)● You must account for: smartphones, tablets (large and small form factors), netbooks, notebooks, desktop monitors of ALL sizes, web- enabled tvs, kiosks, web glasses, etc.
  10. 10. What is Responsive Web Design● NOT just layout/grid adjustment for screen width● Different devices have various interface limitations beyond just screen width● Example: Mouse hover effects do not translate well to touch screens (No more suckerfish)
  11. 11. Examples
  12. 12. Responsive CSS/Media Queries
  13. 13. Responsive CSS/Media Queries/* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) {}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {}
  14. 14. Responsive JavaScript
  15. 15. Responsive JavaScript if(screen.width < 959) { some_function(); } else { some_other_function(); }
  16. 16. Responsive Frameworks
  17. 17. Responsive Frameworks● Bootstrap ● http://twitter.github.com/bootstrap/ ● Built with LESS ● Included in Joomla 3.0 core ● Joomla 3.0 admin was designed with Bootstrap rd ● Joomla 3 party extension developers are standardizing their markup on Bootstrap
  18. 18. Responsive Frameworks● Foundation ● http://foundation.zurb.com/ ● Similar to Bootstrap ● Built with SASS
  19. 19. Responsive Frameworks● Unsemantic ● http://unsemantic.com/ ● Just a responsive grid ● Does not include extra UI elements that Bootstrap and Foundation include ● Built by Nathan Smith, the guy behind 960.gs
  20. 20. Testing Tools
  21. 21. Testing Tools● BrowserStack.com ● Cross-browser, cross-device compatibility testing in your browser ● Runs virtual machines to test many common device/OS/browser combinations
  22. 22. Testing Tools● Adobe Edge Inspect ● Develop on your computer and automatically test multiple connected devices simultaneously ● Tests on actual devices, not emulators or virtual machines ● Built-in inspector tools to test on devices where before that would be impossible
  23. 23. Should I make my websiteresponsive?● It depends, but probably yes.● Do your users access your site from multiple devices?● Will they in the future?● Pay attention to analytics to see which devices and browsers are used to access your site.
  24. 24. Questions? @corywebb

×