EXPERTALKS: Sep 2013 - Responsive Web Design

637 views
593 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
637
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

EXPERTALKS: Sep 2013 - Responsive Web Design

  1. 1. www.equalexperts.com Responsive Web Design Tejaswita Takawale ttakawale@equalexperts.com Akshada Yadav ayadav@equalexperts.com
  2. 2. www.equalexperts.com The scenario today • Multiple devices (smart phones, tablets etc.) • Faster connectivity (3G, 4G) As a result: Websites are accessed on multiple devices. What’s needed: Elastic versions of websites which will FIT and be USABLE on multiple devices.
  3. 3. www.equalexperts.com Building Multiple Sites You could create versions of your website for each device and resolution… But would that be possible, or practical ?
  4. 4. www.equalexperts.com Problems with multiple versions Managing multiple codebases Multiple content management Learning curve for platform specific technique Handling multiple URLs impacts: • Content reliability • SEO
  5. 5. www.equalexperts.com Think Different !!! Have Single Solution for multiple devices Design your site so that it responds to the user screen resolution. What we have: • HTML 5 / CSS 3 • Media queries • Browser support • Good network bandwidth
  6. 6. www.equalexperts.com Solution: Responsive Web Design • Term introduced in 2010 by Ethan Marcotte • Responsive Web Design is the approach which suggests that design and development should respond to the user‟s behaviour and the environment screen size, platform and orientation. • Uses a set of techniques and ideas.
  7. 7. www.equalexperts.com Techniques for RWD
  8. 8. www.equalexperts.com Anatomy of a page layout
  9. 9. www.equalexperts.com Make it Fluid Fluid – The layout shrinks / expands depending on the screen size & resolution. Aspects of Fluid design: • Fluid Grids • Flexible images • Flexible Containers, Margins & Padding Formula: Target / Context = Result Target – the size we want to be displayed by default Context – depends on the attribute under calculation (usually the parent element)
  10. 10. www.equalexperts.com Adapt the content Adaptive – The content becomes usable / user friendly on each device. Aspects of Adaptive Design: • Content adaptation • Media Queries • Image Swapping
  11. 11. www.equalexperts.com Responsive Design Combine Fluid Design with Adaptive Design & Content to create a truly responsive web design. Aspects: Fluid Grids Flexible images Media Queries Content Adaptation
  12. 12. www.equalexperts.com But this is not enough… Some issues to be resolved: • “It takes time until I actually see something on the site” • “Though I‟m not processing scripts, they‟re getting downloaded on my phone slowing it down further” • “Device has high screen resolution but doesn‟t support CSS3”
  13. 13. www.equalexperts.com Solutions Progressive Enhancement : PE Mobile first approach: • Create design for the least capable device and the slowest connection speed • Build up from there to larger breakpoints for faster connections and add decorations for higher screen sizes Conditional JavaScript loading: • Load JS only if the rendering device is capable • Getting something on screen as soon as possible really enhances the user experience http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement- what-it-is-and-how-to-use-it/
  14. 14. www.equalexperts.com Solutions RWD + Server Side Detection : RESS • Control the markup and CSS at server side based on the device capability. • Relies on device library on the server to detect the device and return its capabilities. • Helps serving the appropriate user journey. • Example: WURFL Hybrid Model = PE + RESS
  15. 15. www.equalexperts.com Considerations for RWD • Context sensitive interaction (e.g. http://dressresponsively.com/) • Mobile first approach • Performance Network considerations Page weight Conditional and Lazy loading (e.g Gmail)
  16. 16. www.equalexperts.com Lazy Loading • Load it only when the user requires the content on his device • Falls within the Progressive Enhancement school of RWD thought • Requires Server Side Detection <script id=“lazy”> //Make sure to replace (or strip out) comment blocks in your JavaScript first. /*JavaScript of lazy module*/ </script> <script> function lazyLoad(){ var lazyElement = document.getElementbyId(„lazy‟); var lazyElementBody = lazyElement.innerHTML; var jsCode = stripoutCommentBlock(lazyElementBody); eval(jsCode);} </script>
  17. 17. www.equalexperts.com Thinking Native ? Evaluate Native vs RWD on the basis of: • Efforts – Time and Money • Browser support for web apps • Device capabilities • Performance
  18. 18. www.equalexperts.com Help at hand… RWD frameworks: • Bootstrap • Skeleton • Foundation JavaScript frameworks: • Respond.js • Modernizr.js
  19. 19. www.equalexperts.com References http://alistapart.com/article/responsive-web- design http://coding.smashingmagazine.com/2011/0 1/12/guidelines-for-responsive-web-design/ Responsive Web Design – Ethan Marcotte
  20. 20. www.equalexperts.com Thank You !!! Tejaswita Takawale ttakawale@equalexperts.com Akshada Yadav ayadav@equalexperts.com

×