1. www.equalexperts.com
Responsive Web
Design
Tejaswita Takawale
ttakawale@equalexperts.com
Akshada Yadav
ayadav@equalexperts.com

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. 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. 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.

7. www.equalexperts.com
Techniques for RWD

8. www.equalexperts.com
Anatomy of a page layout

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. 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. 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. 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>

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. www.equalexperts.com
Help at hand…
RWD frameworks:
• Bootstrap
• Skeleton
• Foundation
JavaScript frameworks:
• Respond.js
• Modernizr.js

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. www.equalexperts.com
Thank You !!!
Tejaswita Takawale
ttakawale@equalexperts.com
Akshada Yadav
ayadav@equalexperts.com