EXPERTALKS: Sep 2013 - Responsive Web Design
- 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.
- 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. 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. 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.
- 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)
- 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. 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. 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. 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. 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>