Responsive design

Responsive Design
by Anthony Olsen

Saturday, 19 October 13

A little about me ...


That’s not me.
First learnt Joomla while
building a website for my
acupuncture practice.
Became hooked on the
challenges of design and
built my ﬁrst template.
Curiosity turned to
obsession and so late in
2006 Joomlabamboo was
born.

Since 2006 we have created 80+ templates
30 or more of them are responsive.
First responsive design released in October 2011.


In addition to our themes we
released Zentools in December 2011.


In December 2011 we released ...

-Responsive module designed to complement responsive Joomla templates.
-All in one solution for creating: grids, lists, carousel, slideshows, accordions, ﬁlters
- Comes with a responsive lightbox
- Works with Joomla, K2, images from a folder (Soon to have more sources)
- Built in image resizing
- Drag and drop templating


What is Responsive design?
... but ﬁrst a few questions for you.


Who here has a responsive website?


Who here has used a
responsive template?


Who here has built a
responsive template?


Who here doesn’t own
a smart phone?
The rise of the mobile generation.


17.4% of all global internet trafﬁc
comes from mobile sources.
http://mashable.com/2013/08/20/mobile-web-trafﬁc/

South America, Africa and Asia are
leading the mobile push.


Mobile is becoming ubiquitous.
There were 2.1 billion mobile Web users in the world at
the end of 2012.
Mobile-broadband subscription outnumber ﬁxed
broadband subscriptions 3:1
In developed countries mobile-broadband users often also
have access to a ﬁxed-broadband connection, but in
developing countries mobile broadband is often the only
access method available to people.
http://www.itu.int/en/ITU-D/Statistics/Pages/stat/default.aspx


Mobile use doubles from 2012 to 2013.
Desktop

Tablet

Smart Phone

11%
6%
10%

5%

89%
79%

Quarter 1 - 2012

Quarter 1 - 2013

http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/


So should you believe the hype?
Do you need to make mobile a priority - right now?
Based on these ﬁgures you should ...
... but ﬁrst ...
... a disclaimer of sorts.


The ﬁne print. (Part 1)
Mobile trafﬁc really depends on the type of site you have,
your content, your marketing strategy and your audience.

Not everyone is necessarily viewing
your site on a mobile right now ...

But this is changing ... quickly.



Types of sites that attract a lot of visitors via mobile?
- Sites where the visitor consumes content
blogs, magazines, newspapers etc

- Sites with strong email campaigns.
A lot of email is read on mobile devices now.

- Sites with strong social media focus
- Sites that offer local information.
Real estate, tourism etc

- Other examples?

Another factor to consider.
What % of users visit your site using ie8
and below?.
Mobile trafﬁc is the future but ...
... at the moment you may be better off
spending more time on crappy
browsers.
eek :(


After all, ie8 and below still
account for 11% of worldwide
browser use.


Despite this ...
... your client will probably want a
mobile optimised site anyway.


Should you make optimising for
mobile a priority for an existing site?
Before I answer that let’s look at
some some case studies.


Joomlabamboo.com
My own site which has a moderate amount of trafﬁc
receives a relatively small number of visitors on mobile
devices.
- 2% mobile
- 2% tablets
- 96% Desktop


- Monthly email
- Close to 4000 twitter followers
- Small facebook engagement

2ser.com
Sydney radio station with an 18-40 yo demographic.
- 20% mobile
- 80% Desktop


- Dedicated social media team
- 9000 Facebook fans
- 6100 Twitter Followers

greensborosportsplex.com

Community sports center on the East Coast of USA
Seasonal activity based on sports season.
Local information provider.
- 18% mobile
- 82% Desktop


- Regular facebook updates
- Small Twitter Following
- Monthly newsletter to 60000

Does anyone here have examples of
sites that have more than average
mobile visitors?


So back to the question at hand ...
Should you make optimising for
mobile a priority for an existing site?
Shorterm:
Longterm:


It depends.
Deﬁnitely.

Should you optimise
new sites for mobile?

Yes.

- Mobile usage is increasing rapidly.
- Optimising for mobile adds a relatively small
overhead to the site build vs a complete rebuild
in the future.
- Cost effective to include in initial build
rather than rebuild down the track.
- It’s highly likely your client will want it anyway.

Optimising your site for mobile use is
not just about today ...
... it’s about the future.


Mobile trafﬁc maybe growing
but more than that ...
... devices are multiplying.


It’s not a question of
VHS vs BETA anymore.

If the release of devices have told us anything in
the last few years, the screen size race is not
about ﬁnding a single screen size to ﬁt everyone.

2007

First iPhone released

2008

HTC dream released (Android)

2010

First iPad released

2012

3997 android devices
http://opensignal.com/reports/fragmentation.php

2013

http://opensignal.com/reports/fragmentation-2013/



http://opensignal.com/reports/fragmentation-2013/


A fork in the road.
So we now know, that now or some point in the
future, we should start optimising for mobile.
Before you do that you need to ask a few questions.
How do we do that?
What are our options?
What is the best way to do this in
a rapidly changing landscape?


So what are the options?


Dedicated Mobile theme
vs Responsive design
Neither is perfect ... just yet.


Dedicated Mobile theme
Browser sniff on the server side (using php) to determine the device the user is
viewing the site with and then serve a separate design speciﬁcally for your visitor’s
device.

Pros
- Usually Fast and optimised for mobile viewing.
- Can use more functionality built into the device ios.
- Can be easier to implement depending on design.
- Off the shelf plugins in some CMS - both wordpress and Joomla.

Cons
- Relies on browser snifﬁng which is not 100% accurate.
- Threshold between mobile desktop sizes varies and changes.
- Link to “full website”. I’m missing out on something here.
- May mean managing multiple sets of content.
- Multiple domains, urls = headache for seo and user experience.
Clicking on a mobile link from the desktop.


Examples

http://sixrevisions.com/mobile/methods-mobile-websites/

Responsive theme
A single template that uses mediaqueries to
control the design at various breakpoints.

Pros
- A single theme used across all present and all future devices and browsers.
- A single set of content
- A single site. No mobile domain. One url.
- Easy(ish) to update. One design covers all devices and is applied once.
- Caters to any screen size.

Cons
- Can take longer to implement.
- More challenging to optimise content for different devices.
- Can be slower if not designed mobile ﬁrst.
- Not all mobile devices support all the full range of media queries and css3.


Examples


So in a nutshell ...
Responsive design aims to provide a single design
solution to suit multiple contexts.


Is Responsive design
the future?

Responsive design is the leading edge of optimising
websites for mobile - now.
Technology will change and we will have to adapt
(again) but it is the best vehicle we have now for
optimising for mobile trafﬁc.


er
v

y

A brief history of responsive design.
May 25
2010

Ethan Marcotte writes Responsive Web Design Article on
A List Apart.
http://alistapart.com/article/responsive-web-design

July 19
2010

Smashing Magazine writes their ﬁrst article about
Responsive design.
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

June 7
2011


Ethan Marcotte publishes Responsive Web Design book.

er
v

y

A brief history of responsive design.
Sept
2011

Boston Globe has a responsive redesign.

Oct
2011

We released our ﬁrst responsive template.

Late
2012

Google recommends responsive design as industry best
practice.

Jan 1
2013

My Nanna starts using responsive design*.

Thought to be the ﬁrst “big” site to have a
responsive makeover.

* She doesn’t really.

Key facets of responsive design.
Fluid grid.
Rather than using ﬁxed widths responsive grid
is based on percentages.

Breakpoints and Media Queries.
Media queries are used to determine how the
design looks at certain breakpoints.

Flexible Elements.
Images, video and type change characteristic
depending on the content.


Responsive Types

Demo

Adaptive vs Responsive vs Mixed.
Adaptive
Fixed width containers that change width at
various breakpoints.

Responsive
Percentage based ﬂuid grid often with a maxwidth set to parent container.

Mixed
Adaptive at large screen sizes and % based at
smaller screen sizes.


Fluid Grid

Set a fixed, max-width or
percentage value on the
parent container.
Fluid grid is fundamental to responsive design
Old techniques used fixed values for each
column division in a grid based layout.
A fluid grid uses a fixed width, max-width or %
for the outer container.
Each column in the grid is assigned a % to
represent each column.


Fluid Grid

Classic pixel grid

Classic % grid

Sensible % grid

.grid_1 {width: 60px;}
.grid_7 { width: 540px;}
.grid_8 { width: 620px;}

.span_1 {width:6.5%;}
.span_5 { width:40.5%;}
.span_7 { width:57.5%}
.span_10 {width:83.0%;}
.span_11 {width:91.5%;}
.span_12 {width:100%;}

.one-twelth {width:6.5%;}
.one-sixth {width:15.0%;}
.one-quarter {width:23.5%;}
.one-third {width:32.0%;}
.ﬁve-twelths { width:40.5%;}
.one-half {width:49.0%;}
.seven-twelths { width:57.5%}
.two-thirds {width:66.0%;}
.three-quarters {width:74.5%;}
.four-ﬁfths {width:83.0%;}
.one-whole {width:100%;}

Demo


Breakpoints

Breakpoints literally mean the
point at which your design
breaks.
So this means that rather than
optimising your design based on the
known device sizes eg iPad landscape,
portrait etc you optimise your design
based on where it breaks.


Mediaqueries

Mediaqueries create breakpoints
What is a media query?
A css3 technique used to specify the conditions
of the viewport for when given css should be
applied.

Where do you add them?
Anywhere you would normally add css to your site.
Can keep them in with other rules or separate them into a
separate stylesheet.
Example

@media only screen and (max-width: 800px) {
// Enter rules here to target screens under 800px

}


Mediaqueries

Min and max-widths.
@media (min-width: 481px) and (max-width: 768px)
// Enter rules here to target screens above 481px and under 768px

}

Target Orientation.
@media only screen and (orientation : portrait) {
/* Target any device in portrait mode.*/

}


Mediaqueries

Demo

Target Resolution.
@media only screen and
(-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5){
/* Enter rules to target screens with 1.5 times resolution or greater .*/

}


Flexible Elements

Demo

Fluid Images
Simple ﬁx is to add max-width to the img rule.
But there is room for improvement here.
img {max-width:100%}

Fluid Video
More complicated and requires javascript but possible.
.videoWrapper {
!
position: relative;
!
padding-bottom: 56.25%; /* 16:9
*/
!
padding-top: 25px;
!
height: 0;
}
.videoWrapper object,
.videoWrapper embed, {
!
position: absolute;
!
top: 0;
!
left: 0;
!
width: 100%;
!
height: 100%;
}


// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {

...

Flexible Elements

Fluid Type
Designed to maintain optimum line length for
reading on the web.
Line Length
Optimum line length is somewhere between
45-75 characters per line..
http://trentwalton.com/2012/06/19/ﬂuid-type/

CSS
CSS solutions via mediaqueries.

Javascript
Javascript solutions via scripts like FitText for headings
http://ﬁttextjs.com/


Responsive Challenges

Navigation
A lot of options out there now.
bradfrost.github.io/this-is-responsive/patterns.html#fluid-images

- Select Menu
- Toggle Menu
- Off Canvas Menu
- Footer Links

Page Load
Building with mobile first strategy in mind.
Optimise for essential content first and add
progressively enhance from there.


Questions?


Responsive design

More Related Content

Similar to Responsive design (20)

More from JoomlaDay Australia (8)

Recently uploaded (20)

Responsive design