The ins and outs of Responsive Web Design
15
The Ins and Outs of Responsive Web Design
-
Upload
meijuncorp -
Category
Design
-
view
104 -
download
0
description
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.
Transcript of The ins and outs of Responsive Web Design
The Ins and Outs of Responsive Web
Design
Responsive design is an approach to web page creation that makes
use of flexible layouts, flexible imagesand 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.
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 ImportanceOf 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
Why consider RWD?
Easier to manage
One website,
many devices
Conversion optimization benefits
of responsive
design
PROSOf 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
CONSOf 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
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
‘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
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
&Pizza
Notable use of parallax scrollingThe 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
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
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
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
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.
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: [email protected]
