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

1. Responsive Web Design
Cory Webb

2. http://manoscrafted.com/rwd-jdnc-2013.pdf

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. 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. Agenda
● What is responsive web design
● Responsive CSS and Javascript
● Responsive frameworks (Bootstrap)
● Testing tools
● Should I make my website responsive?
● Questions

6. What is Responsive Web Design?

7. What is Responsive Web Design
● The practice of making your web content
universally and optimally accessible across a
variety of devices.

8. What is Responsive Web Design
● Nothing new.
● World's first website (built in 1991) was
responsive, only they didn't call it that back
then.
http://www.w3.org/History/19921103-
hypertext/hypertext/WWW/TheProject.html

9. What is Responsive Web Design
● NOT mobile optimization (though that's part of
it)
● You must account for: smartphones, tablets
(large and small form factors), netbooks,
notebooks, desktop monitors of ALL sizes, web-
enabled tv's, kiosks, web glasses, etc.

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. Examples

12. Responsive CSS/Media Queries

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. Responsive JavaScript

15. Responsive JavaScript
if(screen.width < 959) {
some_function();
} else {
some_other_function();
}

16. Responsive Frameworks

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. Responsive Frameworks
● Foundation
● http://foundation.zurb.com/
● Similar to Bootstrap
● Built with SASS

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. Testing Tools

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. 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. Should I make my website
responsive?
● 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. Questions?
@corywebb