Responsive Web DesignsPrasanna R
Responsive Web Design – OverviewWebsites that adapts its layout and design to fit any device that chooses todisplay it.• M...
Responsive Web Design – Key ConceptsFluid Grid + Media Queries = Responsive site• Fluid Grid   – Site is designed based on...
Responsive Web Design – Key ConceptsFluid Grid + Media Queries = Responsive site      Using Media Queries re-organize the ...
ChallengesIt is a fundamental shift.• Lack of static design Phase      – Modular Approach      – Navigation      – Tables ...
Approaches to Navigation/Tables Navigation 1. Top Nav or Do Nothing (Demo: Timkadlec, Confab2012) 2. Footer Anchor (Demo: ...
Approaches to NavigationTop Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google)                      ...
Approaches to NavigationTop Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google)                      ...
Approaches to NavigationTop Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google)                      ...
Approaches to TableEach cell into its own line; replace with small mock table with link to view largerone; display drop do...
Approaches to TableEach cell into its own line; replace with small mock table with link to view largerone; display drop do...
More elementsResponsive Carousel & Forms Responsive CarouselLink Responsive Forms Link  12
More elementsMost of the elements Carousel, Breadcrumb, Forms, Search box, Video, Maps,Notification bars & Tabs can be des...
Advantages & DisadvantagesRWD is the way forward for presence across devices. Responsive Web design isGoogle’s recommended...
More Examples http://www.anderssonwise.com/   http://us.illyissimo.com/ http://earthhour.fr/            http://forefathers...
More Examples http://staffanstorp.se/    http://foodsense.is/ http://stephencaver.com/   http://2012.dconstruct.org/ 16
References• Beginner Guide: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design• http://webdesign.tutsp...
Upcoming SlideShare
Loading in …5
×

Responsive Web Designs

852 views
738 views

Published on

1 Comment
0 Likes
Statistics
Notes
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
852
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Designs

  1. 1. Responsive Web DesignsPrasanna R
  2. 2. Responsive Web Design – OverviewWebsites that adapts its layout and design to fit any device that chooses todisplay 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. 3. Responsive Web Design – Key ConceptsFluid 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. 4. Responsive Web Design – Key ConceptsFluid Grid + Media Queries = Responsive site Using Media Queries re-organize the Modules 4
  5. 5. ChallengesIt 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 (Webdeveloper and Author, HTML5 for Web Designers) 5
  6. 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. 7. Approaches to NavigationTop Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google) Top Nav Approach Link Footer Approach Link 7
  8. 8. Approaches to NavigationTop Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google) Drop Down Approach Link Toggle Approach Link 8
  9. 9. Approaches to NavigationTop Nav, Footer Anchor, Drop Down, Toggle, Left Nav flyout (FB App & Google) Filter Link Toggle (Layered Masthead)Link 9
  10. 10. Approaches to TableEach cell into its own line; replace with small mock table with link to view largerone; 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. 11. Approaches to TableEach cell into its own line; replace with small mock table with link to view largerone; display drop down to show other columns, horizontal scroll Display drop down to show other columns Horizontal Scroll 11
  12. 12. More elementsResponsive Carousel & Forms Responsive CarouselLink Responsive Forms Link 12
  13. 13. More elementsMost 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. 14. Advantages & DisadvantagesRWD is the way forward for presence across devices. Responsive Web design isGoogle’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. 15. More Examples http://www.anderssonwise.com/ http://us.illyissimo.com/ http://earthhour.fr/ http://forefathersgroup.com/ 15
  16. 16. More Examples http://staffanstorp.se/ http://foodsense.is/ http://stephencaver.com/ http://2012.dconstruct.org/ 16
  17. 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

×