1. Responsive Web Designs
Prasanna R

2. Responsive Web Design – Overview
Websites that adapts its layout and design to fit any device that chooses to
display it.
• Multiple devices with access to web browsers – Demo Prototying
– Smartphones; Tablets; Phablets; Netbooks; Monitors; Laptops; TV; Video game
consoles
• Two Options for maintain presence – Adaptive (Multiple Fixed Width Layouts
– Mobile site, Phablet site, tablet site) vs Responsive (Fluid Grid Layouts)
• RWD - Key Characteristics
o Mobile first approach
o Web development Follows Progressive
Enhancement
o Works well for Screen readers (irrespective of JS
enabled/disabled)
o Users can access the same content across devices
• What does RWD solve for? – Spectrum of Screen Sizes & Resolutions.
2

3. Responsive Web Design – Key Concepts
Fluid Grid + Media Queries = Responsive site
• Fluid Grid
– Site is designed based on arbitrary percentage values instead
of rigid pixels
– Layout is squeezed onto a tiny mobile device or stretched 
All elements resize
– Ex: Fluid Grid site
• Media Queries
• CSS styles are conditionally applied based on the size of the
displaying browser using the Min-width feature
• Entirely redesign the layout for smaller devices
• Ex: Responsive site
3

4. Responsive Web Design – Key Concepts
Fluid Grid + Media Queries = Responsive site
Using Media Queries re-organize the
Modules
4

5. Challenges
It is a fundamental shift.
• Lack of static design Phase
– Modular Approach
– Navigation
– Tables
– Images – Adaptive Images or Content aware image sizing
• Converting old fixed sites
• Old browser versions
• Testing Time & Cost
• Exit Photoshop, Enter browser (Ex: Storm Franchise pages)
• Question Earlier Design Assumptions
“Stop Thinking in Pages. Start Thinking in Systems” – Jeremy Keith (Web
developer and Author, HTML5 for Web Designers)
5

6. Approaches to Navigation/Tables
Navigation
1. Top Nav or Do Nothing (Demo: Timkadlec, Confab2012)
2. Footer Anchor (Demo: Greygoose, Obama’s Campaign)
3. Select Menu (Demo: Viljamis)
4. Toggle (Demo: Starbucks, Macdonald)
5. Left Nav Flyout (Similar to FB app)
6. Hide and Cry (Demo: Authentic Jobs)
Tables
1. Converting each cell into its own line (Demo)
2. Replace it with small mock up table with link to large table (Demo)
3. Hiding less important columns with drop down menu to enable them
(Demo)
4. Fix the left most column and others can be scrolled horizontally (Demo)
6

7. Approaches to Navigation
Top Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google)
Top Nav Approach
Link
Footer
Approach
Link
7

8. Approaches to Navigation
Top Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google)
Drop Down
Approach
Link
Toggle
Approach
Link
8

9. Approaches to Navigation
Top Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google)
Filter
Link
Toggle (Layered
Masthead)
Link
9

10. Approaches to Table
Each cell into its own line; replace with small mock table with link to view larger
one; display drop down to show other columns, horizontal scroll
Convert each cell into its own line
Replace it with small Mock up table
10

11. Approaches to Table
Each cell into its own line; replace with small mock table with link to view larger
one; display drop down to show other columns, horizontal scroll
Display drop down to show other columns
Horizontal Scroll
11

12. More elements
Responsive Carousel & Forms
Responsive Carousel
Link
Responsive Forms
Link
12

13. More elements
Most of the elements Carousel, Breadcrumb, Forms, Search box, Video, Maps,
Notification bars & Tabs can be designed to be responsive.
Responsive Tabs + Accordion
Fluid Search
More Responsive Patterns
Codes & modern patterns
can be found in Github
(Social Coding Platform)
Link
13

14. Advantages & Disadvantages
RWD is the way forward for presence across devices. Responsive Web design is
Google’s recommended configuration
Advantages
• Solving User Experience for the Long Term
• Analytics: One complete view of all traffic
• Sharing/Linking: One URL per content
• SEO: One URL accumulates Page Rank, Page Authority and hence Search engine
favour them
• Low Maintenance
• High Familiarity/Low learning curve for users: Same information is available in mobile
& desktop site.
Disadvantages
• SEO: Difficulty in adjusting Titles, Description & Content by devices as users might
use voice search – different keywords in mobile
• Resource intensive development. Green field projects cost much lesser than site
upgradation projects
14

15. More Examples
http://www.anderssonwise.com/ http://us.illyissimo.com/
http://earthhour.fr/ http://forefathersgroup.com/
15

16. More Examples
http://staffanstorp.se/ http://foodsense.is/
http://stephencaver.com/ http://2012.dconstruct.org/
16

17. References
• Beginner Guide: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
• http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/
• Learn more - http://bradfrost.github.com/this-is-responsive/
• Framework http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/
• Tutorial - http://teamtreehouse.com/library/websites/build-a-responsive-website/introduction-to-
responsive-web-design
• http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/
• Media Queries - http://www.w3.org/TR/css3-mediaqueries/
• Fluid Images - http://unstoppablerobotninja.com/entry/fluid-images/
• Context aware image sizing -
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
• http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-
design-strategies/
• http://resizemybrowser.com/
• Content Choreagraphy - http://trentwalton.com/2011/07/14/content-choreography/
• Guidelines for RWD - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-
web-design/
• Responsive Design Examples: http://designmodo.com/responsive-design-examples/
• http://bradfrostweb.com/blog/web/responsive-nav-patterns/
17