Responsive Web Designs
0 likes747 views
Responsive Web Designs Responsive web design allows websites to adapt their layout depending on the screen size and orientation of the device used to view them. Websites using responsive design dynamically change the viewport, columns, images and more to provide the best possible viewing and interaction experience across all devices including desktops, tablets, and mobile phones. Key techniques for responsive design include using fluid grids that resize based on screen width and media queries that allow different CSS styles to be applied depending on screen size. Navigation, images, forms and other elements can be adapted to be responsive as well.
Responsive Web Designs
- 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