Responsive Web Design (RWD) is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It utilizes a flexible layout, flexible images and media queries. Adopting RWD allows a website to automatically adapt its content and layout depending on different screen sizes and orientations. This provides users with an optimized viewing and interaction experience, whether browsing with a desktop computer, tablet or mobile phone.

1. Responsive Web Design
Allan Tan
CEO, Ideyatech Inc.

2. Overview of Contents
• Market Growth
• Brief History
• What is Responsive Web Design ( RWD)?
• Why use Responsive Web Design?
• Elements of Responsive Web Design
• Best Practices
• Demo

3. Market Growth
in the past 3 yrs.
Tablet PC 300,000 apps
market
exceeded downloaded
Laptop sales* 10.9 billion times
according to data from mobile subscribers
NPD DisplaySearch* 6 billion (worldwide)
mobile browsing
1.2 billion users
*All data are based on Mobile Growth Statistics of 2012
http://www.digitalbuzzblog.com/infographic-2012-mobile-growth-statistics/
http://www.smartinsights.com/mobile-marketing/

4. Brief History
Ethan Marcotte
2012
Top Web Design Trends
Image courtesy: www.abookapart.com/products/responsive-web-design

5. What is Responsive Web Design (RWD)?
is the concept of a website which should adapt to fit any
device that chooses to display it.
User’s Behavior &
= design +
Environment development

6. Why use Responsive Web Design?
1. Smoother user experience
2. Less maintenance
3. Better analysis on statistics
4. It is the ‘wave of the future’

7. Elements of RWD
• Fluid Grid / Flexible Layout
- sizing in proportions
- % rather than px
• Flexible Media
- images and videos
- also sized in relative units (up to 100%)
• CSS3 Media Queries
- conditional styling
- allows you to target specific viewport &
device sizes

8. Best Practices
1. Content choreography
- the art of maintaining order and context
2. Surrender control
- hide/reveal content
3. Embrace fluidity
- think and develop a flexible system
4. Think proportionally
- how elements in the design relate to each other and
how those relationships can change.
http://www.netmagazine.com/features/five-steps-gettin-flexy-responsive-web-design

9. Demo - http://www.ideyatech.com/demo/index.html
Step 1: Navigation
Step 2: Header
- search
Step 3: Body
- columns
Step 4: Body
- posts, tags
- footer
Step 5: Responsive

10. Responsive Sites
Microsoft Starbucks
Sony Disney

11. References
• http://en.wikipedia.org/wiki/Responsive_web_design
• http://mediaqueri.es/about/
• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-
web-design/
• http://www.mequoda.com/articles/website-design/3-important-elements-of-
responsive-website-design/
• http://www.mobilecommercedaily.com/the-pros-and-cons-of-responsive-web-
design
• http://engagingcomms.com/s/48/Responsive-Web-Design-Pros-Cons.html
• http://www.designlunatic.com/2011/11/pros-and-cons-of-responsive-web-
design/