Responsive Web Design
description
Transcript of Responsive Web Design
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