Responsive Web DesignResponsive Web Design

Allan TanCEO, Ideyatech Inc.

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

Sony

Starbucks

Responsive Sites

Microsoft

Disney

• 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