Using Responsive Design to build a new
generation of Mobile-friendly websites
Introduction
Gabe Sumner
Product Marketing
Manager / Evangelist
@gabesumner
http://gabesumner.com/
Our picture of a “web visitor” is rapidly evolving
Increasingly web visitors aren’t using PC’s
Today, smartphones are outselling PC’s
Global Internet Device Sales
900,000,000
Tablets
500,000,000
Smartphones
100,000,000
2000
Personal Computers
2005
2012
And increasingly used to access our websites
Top Mobile Activities in the U.S
3 mo. avg. ending Dec - 2010.
Send text message
68.0%
Took photo
52.4%
Accessed news and information
39.5%
Used browser
36.4%
Used application
34.4%
Used email
30.5%
Access weather
25.2%
Accessed social networking or blogs
24.7%
Played games
23.2%
Accessed search
21.4%
Capture video
20.2%
Accessed maps
17.8%
Used instant messaging
17.2%
Accessed sports information
15.8%
Listened to music
15.7%
* Source comScore
In fact, mobile traffic will overtake PC traffic by 2014
2,000
1,600
1,200
800
400
2009
* Statistics from the IDC
2015E
So mobile is important
(big surprise)
Which is why mobile is a priority for many organizations
Mobile ranked #2 for 2012 technology priorities surveyed by Gartner
But a lot of us haven’t yet done anything…
And lots of websites still look like this on smartphones
Big pages on tiny screens
How are organizations
addressing mobile?
Many organizations are “forking” to address “mobile”
Adding dedicated
mobile content
alongside “normal”
content
For example, here is a small sample website
Home
About
Site
Contact
And our new “mobile” website
Home
About
Contact
Site
Home
About
Mobile
Contact
But is the web really
this binary?
Tablets are also becoming widespread
Units sold (millions)
Tablet Sales Forecast
500
E-Readers
250
We are here
0
2010A
2012E
2014E
2015E
And today’s web statistics show plenty of fragmentation
49%
Smaller displays
29%
Tablets and notebooks
14%
Monitors with larger displays
8%
Smartphones
Only addressing 2 scenarios neglects many others
Smartphones
Tablets
Laptops
Netbooks
Entertainment devices
Xbox, PlayStation,
Apple TV
This creates unoptimized experiences for many visitors
No worries…keep forking
Each new device (“tablets”) requires a dedicated site
Home
About
Contact
Home
About
Mobile
Contact
Site
Home
About
Tablets
Contact
And this quickly gets out of control…
Home
About
Mobile
Contact
Home
About
Contact
Site
Tablets
Home
About
Contact
Widescreen
displays
Home
About
Contact
And new Internet Devices
are on the way
Retina Display
Google Glass
Cars
We can’t create a new
website for each new device
What is the ideal solution?
Create once and adapt for everywhere
This is possible
Here is why…
Let’s start by introducing Progressive Enhancement
Built with a layered design
Accessible with any browser
But enhanced when supported
Which can address text-only browsers…
Yes, I’m serious.
Why does text-only matter?
Because this is how Google looks at your website
How can a website be optimized
for both text-only browsing and
modern web browsing?
Unrecognized HTML is ignored
This has been true from the beginning
And CSS decouples content from presentation
But what happens when a
desktop computer and a
smartphone support the same
web technologies?
Introducing Responsive Design….
Which is already in use today…
How does it work?
CSS3 Media Queries enable us to specify
different styles for different devices
How does Sitefinity help?
Responsive Design integrated into Sitefinity
Is Responsive Design widely
supported?
This is supported by 70-80% of today’s browsers
38%
Internet Explorer
Internet Explorer
Internet Explorer
Internet Explorer
Internet Explorer
WP7 Mango +
10
9
8
7
Yes
Yes
No
No
Yes
Firefox
Firefox 3.5+
Firefox 3.5-
Yes
No
3%
Opera
Opera Mini
Opera Mobile
Yes
Yes
20%
Chrome
Android Browser
Safari
29%
Yes
7%
Internet Explorer
represents the
largest % of
unsupported
browsers
When to avoid
Responsive Design
Forking is appropriate for creating unique experiences
Starting a
Responsive Design project
Let’s start by setting expectations…
“Even after your user experience designers and web developers fully get
a grasp of the concepts, approaches, and techniques for building
responsive sites, the thought process and effort to build a page that will
deliver an optimum experience across multiple touchpoints can be as
much as twice the effort of building a conventional web page designed
for a single touchpoint.”
- Forrester – 2012 report “Understanding Responsive Design”
Stop evaluating websites like they are pictures…
…by first showing how the design will transform…
…and moving to HTML/CSS as soon as possible…
…and use mobile previews to set expectations
Unstructured content also creates challenges…
…when consistency is required
And a poorly configured WYSIWYG editor…
…can wreak havoc on a responsive website
This can be overcome through structured content…
Quick review…
It’s critical that we address mobile
But traditional strategies don’t scale
Responsive Design is the only mobile strategy that scales
It’s based on web-standards and supported in most browsers.
And integrated directly into Sitefinity
However, responsive design involves more effort to establish
And requires a different mindset to create & maintain
The website should not be viewed statically
And should be heavily built on structured content types
Thank you
Questions?
@gabesumner