Post on 21-Jul-2015
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
Market Growth
http://www.digitalbuzzblog.com/infographic-2012-mobile-growth-statistics/http://www.smartinsights.com/mobile-marketing/
*All data are based on Mobile Growth Statistics of 2012
in the past 3 yrs.
300,000 apps
downloaded
10.9 billion times
mobile subscribers
6 billion (worldwide)
mobile browsing
1.2 billion users
Tablet PC market exceeded Laptop sales*
according to data from
NPD DisplaySearch*
Image courtesy: www.abookapart.com/products/responsive-web-design
Ethan Marcotte
Top Web Design Trends2012
Brief History
What is Responsive Web Design (RWD)?
design +development
is the concept of a website which should adapt to fit any device that chooses to display it.
User’s Behavior &Environment =
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’
Elements of RWD
• Fluid Grid / Flexible Layout
• Flexible Media
• CSS3 Media Queries
- sizing in proportions
- % rather than px
- images and videos
- also sized in relative units (up to 100%)
- conditional styling
- allows you to target specific viewport &
device sizes
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
Step 1: Navigation
Step 2: Header- search
Step 3: Body- columns
Step 4: Body- posts, tags- footer
Step 5: Responsive
Demo - http://www.ideyatech.com/demo/index.html
• 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/
References