1. What Responsive Web Design is? Why Responsive Web Design is important for small and mid-sized businesses? - Mobile Traffic, Increased mobile internet usage, mobile users experiences. 2. Why should this consider? Easy to manage and optimize your website 3. Pros and Cons of RWD - How would you deal with your website from a different kind of devices? People access your website's SEO. An issue with taking longer to load. 4. Examples of Responsive Web Design in different industries. Healthcare, Non-profits, Education, Food and Drink, Retail, Publishing, and Creative. 5. Conclusion - With an expectation that mobile sales will overtake desktop sales, you need to focus on how to make your website friendly on the mobile. Consumers are more likely to consider it is a good that a company has a positive viewing experience.

1. The Ins and Outs of
Responsive Web Design

2. Responsive design is an approach to web page creation that makes
use of flexible layouts, flexible images
and cascading style sheet media queries.
The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change
the layout accordingly.
- Wikipedia
This allows you to have a single website that automatically fits the screen size of the device on
which is being viewed.
This is achieved by adapting the content, design, navigation and method of interaction
to deliver the same comfort and usability to the mobile user as to the desktop user.
Definition
Simply put,
RWD is having a single website
that looks equally well on all types of devices.

3. In a study of 5,388 smartphone & tablet users 48% complained that websites were not optimized for mobile devices
‘Mobile usage’ is increasingly becoming popular and practical
The Importance
Of RWD for Small and Mid-sized Businesses
Mobile sales have already overtaken desktop sales
Mobile internet usage is predicted to overtake desktop internet usage by 2014
Mobile traffic now accounts for 16% of all web traffic
85% of adults think that a company’s mobile website should be as good or better than their desktop website

4. Why consider RWD?
Easier to manage
One website,
many devices
Conversion
optimization
benefits of
responsive
design

5. PROS
Of Responsive Web Design
Adaptable across all screen resolutions and all devices
Impact on your website’s SEO
Resize images, text, forms, and button to maximize screen space

6. CONS
Of Responsive Web Design
Small screen formats can be a serious challenge
May take longer to load
Advanced page functionality like forms,
applications can be difficult to implement

7. Well executed, strong visual components.
Expansive imagery across all breakpoints
Handy graphics that showcase the most important information first.
‘Emergency room’ wait time widget featured front and center.
Examples in
Healthcare
Kaiser Family Foundation
The use of beautiful info graphics on their homepage,
‘Trending on KFF’ – a feature which highlights popular topics of
interest to the user.
Silverton Health

8. ‘Take Action page’
Apart from its beautiful design, the website encourages visitors
to take real action on AIDS, Food, Energy and a number of
other issues in Africa and beyond.
Makes unique use of RWD by dividing the site
into Species, Places and Threats Tabs
Examples in
Non-profits
World Wildlife FundOne

9. DC Internships
Highlights nation’s capital
through stunning photography
Incorporates the variety of programs
available to prospective interns into a vibrant online brochure
Harvard University
Displays information on admissions, programs, and
in a cohesive manner
Design includes panels on social media, podcasts,
and notable news regarding the university
Examples in
Education

10. &Pizza
Notable use of parallax scrolling
The site’s beautiful black, white and red photography
along with easy navigation
Café Evoke
Distinctive use of space and color
is perfection along with the gorgeous site photography
Examples in
Food and Drink

11. Intros with the use of responsive multimedia,
followed by a visual site with fluid grids and
flexible images
Hotel Style
A very fresh and friendly look
with big bold images
and simple navigation
Examples in
Retail
Wendy’s

12. Effective use of white space
& mobile-feel of the design
The separated news feed functionality on the right
side of the desktop version & the slide out tray
incorporated in the responsive site.
The typical section style of an online news source
the photos of varying size
provide an extreme contrast that draws the user’s eye
Examples in
Publishing
Time BBC

13. Into the Arctic
Displays an interactive map
& numerous case stories
in an easy to use interface
More Hazards
Once the user hits play,
the simple animation of a rotating record
adds a natural, genuine feel to this website.
Examples in
Creative

14. Conclusion
Because of the expansion of mobile devices, the
“one site fits all devices” approach will soon become the norm.
To provide users with a positive viewing experience and meet the
needs of both web and mobile, responsive web design is a must for
any digital strategy.

15. Questions on creating a responsive site?
We’d love to have a conversation with you.
Visit Us: www.meijun.cc
Tweet Us: @meijun
Email Us: hello@meijun.cc