Intro to Responsive Web Design
Theory, Approaches and Practices
What is Responsive Web Design?
“Responsive Web design is the approach that suggests that
design and development should res...
Content Adaptation Techniques
Server-Side Adaptation - standard for providing the best user
experience; early 2000s
Progre...
Benefits of Responsive Design
● Single Code Base (Maintainability)
vs. different code bases for desktop / tablet / mobile
...
Responsive Frameworks
● Twitter Bootstrap
○ 12 column system, spanX widths
● Zurb Foundation
○ zurb example
CSS Media Queries
Add the @media tag to your CSS class and specify the width of
the screen in pixels where the following s...
Moving vs. Hiding
Moving:
Grid Layout Alterations
Hiding:
The Semantic, Responsive Navicon
Mobile First
● Old - Graceful Degradation
○ A full, standard website would scale back and gradually remove content and
fea...
Thinking Mobile
● Performance
○ Strip down third-party scripts : Facebook, Google, Twitter
○ Frameworks vs. Reduced/Simple...
Loading Images & Fonts
Problems:
Performance - why serve high resolution images to your
mobile users?
“Art Direction” - so...
Great Design Paradigms
1. Mostly Fluid
1. Column Drop

1. Left Nav Flyout & Toggle Nav
1. Form
1. Grid
Examples of great RWD
● The Boston Globe
● Polygon
● Indochino
Responsive Best Practices
1. Breakpoints based on content and site layout &
design, not device.
2. Based on site design, b...
Sources
http://msdn.microsoft.com/enus/magazine/hh653584.aspx
http://mobiforge.com/starting/story/mobile-webcontent-adapta...
Intro to Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Intro to Responsive Web Design

1,014 views
850 views

Published on

Responsive Web design is the approach that suggests
that design and development should respond to the
user’s behavior and environment based on screen size,
platform and orientation. The practice consists of a mix
of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from
their laptop to iPad, the website should automatically
switch to accommodate for resolution, image size and
scripting abilities. In other words, the website should
have the technology to automatically respond to the
user’s preferences. This would eliminate the need for a
different design and development phase for each new
gadget on the market.

Published in: Software, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,014
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
66
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to Responsive Web Design

  1. 1. Intro to Responsive Web Design Theory, Approaches and Practices
  2. 2. What is Responsive Web Design? “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.”
  3. 3. Content Adaptation Techniques Server-Side Adaptation - standard for providing the best user experience; early 2000s Progressive Enhancement - provide a baseline user experience and build upon it based on the browser’s capabilities; 2005-2007 Responsive Design - extension of Progressive Enhancement utilizing CSS3, media queries, fluid content; 2011 Adaptive Design - hybrid approach of server-side and client-side logic to provide the best user experience; 2013
  4. 4. Benefits of Responsive Design ● Single Code Base (Maintainability) vs. different code bases for desktop / tablet / mobile ● Covers all screen sizes vs. building specific tiers for “typical” device sizes ● Readability and Usability vs. resizing / scrolling / panning / zooming ● Search Engine Optimization vs. different content served for desktop / tablet / mobile
  5. 5. Responsive Frameworks ● Twitter Bootstrap ○ 12 column system, spanX widths ● Zurb Foundation ○ zurb example
  6. 6. CSS Media Queries Add the @media tag to your CSS class and specify the width of the screen in pixels where the following styles should take affect. The above line will apply styles when the width of the screen is equal to or greater than 1024
  7. 7. Moving vs. Hiding
  8. 8. Moving: Grid Layout Alterations
  9. 9. Hiding: The Semantic, Responsive Navicon
  10. 10. Mobile First ● Old - Graceful Degradation ○ A full, standard website would scale back and gradually remove content and features as the viewport became smaller and the system would become simpler ● New - Progressive Enhancement ○ Provide the users with minimal screen real estate and processing power an amazing experience that both looks great and functions perfectly. As the need arises, the site can gradually be “enhanced” and even completely rethought for larger platforms with fewer constraints.
  11. 11. Thinking Mobile ● Performance ○ Strip down third-party scripts : Facebook, Google, Twitter ○ Frameworks vs. Reduced/Simple Style Sheets ● RequireJS ○ only download it when you need it ● UglifyJS ● Touch vs. Hover (example)
  12. 12. Loading Images & Fonts Problems: Performance - why serve high resolution images to your mobile users? “Art Direction” - some images don’t scale so well Solutions?? - CSS3 & web fonts - SVG & icon fonts - Picturefill - lightweight JS framework - HiSRC - jquery plugin - Foresight.js - JS framework - Adaptive Images - server-side framework - Sencha.io - image proxy service (aka TinySrc) - ReSRC.it - similar to Sencha.io
  13. 13. Great Design Paradigms 1. Mostly Fluid 1. Column Drop 1. Left Nav Flyout & Toggle Nav 1. Form 1. Grid
  14. 14. Examples of great RWD ● The Boston Globe ● Polygon ● Indochino
  15. 15. Responsive Best Practices 1. Breakpoints based on content and site layout & design, not device. 2. Based on site design, but between 3 and 12 breakpoints typically. Giving versatility to the layout style. 3. Adaptive loading for images that are better suited to fit the screen size. (smaller images for a smaller screen-size) 4. Think ‘mobile first’ and care about performance
  16. 16. Sources http://msdn.microsoft.com/enus/magazine/hh653584.aspx http://mobiforge.com/starting/story/mobile-webcontent-adaptation-techniques http://bradfrost.github.io/this-isresponsive/resources.html http://mobile.smashingmagazine.com/2013/07/08/cho osing-a-responsive-image-solution/ http://vimeo.com/38947881

×