Responsive Web Design

Cory Webb

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

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

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?

Agenda

● What is responsive web design● Responsive CSS and Javascript● Responsive frameworks (Bootstrap)● Testing tools● Should I make my website responsive?● Questions

What is Responsive Web Design?

What is Responsive Web Design

● The practice of making your web content universally and optimally accessible across a variety of devices.

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

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.

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)

Examples

Responsive CSS/Media Queries

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) {}

Responsive JavaScript

Responsive JavaScript

if(screen.width < 959) {some_function();

} else {some_other_function();

}

Responsive Frameworks

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● Joomla 3rd party extension developers are

standardizing their markup on Bootstrap

Responsive Frameworks

● Foundation● http://foundation.zurb.com/● Similar to Bootstrap● Built with SASS

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

Testing Tools

Testing Tools

● BrowserStack.com● Cross-browser, cross-device compatibility

testing in your browser● Runs virtual machines to test many common

device/OS/browser combinations

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

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.

Questions?

@corywebb