• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design
 

Responsive Web Design

on

  • 2,363 views

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

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

Statistics

Views

Total Views
2,363
Views on SlideShare
1,415
Embed Views
948

Actions

Likes
0
Downloads
33
Comments
0

3 Embeds 948

http://manoscrafted.com 912
https://twitter.com 35
http://www.google.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design Responsive Web Design Presentation Transcript

    • 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.● 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
    • 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.
    • 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 rd ● Joomla 3 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 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.
    • Questions? @corywebb