Responsive design

Responsive Designby Anthony Olsen

Saturday, 19 October 13

A little about me ...


First learnt Joomla while building a website for my acupuncture practice.

Became hooked on the challenges of design and built my first template.

Curiosity turned to obsession and so late in 2006 Joomlabamboo was born.

That’s not me.


Since 2006 we have created 80+ templates

First responsive design released in October 2011.

30 or more of them are responsive.











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, filters

- 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 first 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?


The rise of the mobile generation.

Who here doesn’t own a smart phone?


17.4% of all global internet traffic comes from mobile sources.

http://mashable.com/2013/08/20/mobile-web-traffic/

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 fixed broadband subscriptions 3:1

In developed countries mobile-broadband users often also have access to a fixed-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.

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

5%

6%

89%

Desktop Tablet Smart Phone

10%

11%

79%

Quarter 1 - 2012 Quarter 1 - 2013




So should you believe the hype?

... a disclaimer of sorts.

Based on these figures you should ...

... but first ...

Do you need to make mobile a priority - right now?


Mobile traffic really depends on the type of site you have, your content, your marketing strategy and your audience.

The fine print. (Part 1)

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

But this is changing ... quickly.


- 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?

Types of sites that attract a lot of visitors via mobile?The fine print. (Part 1)


Another factor to consider.

Mobile traffic is the future but ...

eek :(

What % of users visit your site using ie8 and below?.

... at the moment you may be better off spending more time on crappy browsers.

The fine print. (Part 2)


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


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

Despite this ...


Before I answer that let’s look at some some case studies.

Should you make optimising for mobile a priority for an existing site?


Joomlabamboo.comMy own site which has a moderate amount of traffic 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.comSydney radio station with an 18-40 yo demographic.

- 20% mobile - 80% Desktop

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


Community sports center on the East Coast of USASeasonal activity based on sports season.Local information provider.

- 18% mobile - 82% Desktop

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

greensborosportsplex.com


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


Definitely.

Should you make optimising for mobile a priority for an existing site?

Shorterm: It depends.

Longterm:

So back to the question at hand ...


Should you optimise new sites for mobile?

Yes.

- Mobile usage is increasing rapidly.

- It’s highly likely your client will want it anyway.

- 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.


Optimising your site for mobile use is not just about today ...

... it’s about the future.


Mobile traffic 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 finding a single screen size to fit everyone.


First iPhone released2007

2008 HTC dream released (Android)

2012 3997 android deviceshttp://opensignal.com/reports/fragmentation.php

2013 11868 android deviceshttp://opensignal.com/reports/fragmentation-2013/

2010 First iPad released


http://opensignal.com/reports/fragmentation.php

http://opensignal.com/reports/fragmentation.php

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


11868 android deviceshttp://opensignal.com/reports/fragmentation-2013/




So we now know, that now or some point in the future, we should start optimising for mobile.

A fork in the road.

How do we do that?

What is the best way to do this in a rapidly changing landscape?

What are our options?

Before you do that you need to ask a few questions.


So what are the options?


Dedicated Mobile theme vs Responsive design

Neither is perfect ... just yet.


Dedicated Mobile theme

Pros

Cons

- 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.

- Relies on browser sniffing 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.

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 specifically for your visitor’s device.


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

Examples




Responsive theme

Pros

Cons

- 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.

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

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


Examples


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

So in a nutshell ...


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 traffic.

Is Responsive designthe future?


A brief history of responsive design.

Ethan Marcotte writes Responsive Web Design Article on A List Apart.

May 25 2010

http://alistapart.com/article/responsive-web-design

June 72011

Ethan Marcotte publishes Responsive Web Design book.

very

Smashing Magazine writes their first article about Responsive design.

July 192010

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/






A brief history of responsive design.

Boston Globe has a responsive redesign.Sept 2011

Oct 2011

We released our first responsive template.

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

very

Late 2012

Google recommends responsive design as industry best practice.

My Nanna starts using responsive design*.

* She doesn’t really.

Jan 1 2013


http://www.bostonglobe.com/

http://www.bostonglobe.com/

Key facets of responsive design.

Fluid grid.

Breakpoints and Media Queries.

Rather than using fixed widths responsive grid is based on percentages.

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.


Adaptive vs Responsive vs Mixed.

Adaptive

Responsive

Fixed width containers that change width at various breakpoints.

Percentage based fluid grid often with a max-width set to parent container.

Mixed

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

Responsive TypesDemo


http://localhost:8888/talk/responsive/index.html


Set a fixed, max-width or percentage value on the parent container.

A fluid grid uses a fixed width, max-width or % for the outer container.

Fluid Grid

Fluid grid is fundamental to responsive design

Old techniques used fixed values for each column division in a grid based layout.

Each column in the grid is assigned a % to represent each column.


Fluid Grid

.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%;}

.five-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-fifths {width:83.0%;}

.one-whole {width:100%;}

Classic % grid Sensible % grid

Demo

.grid_1 {width: 60px;}




.grid_7 { width: 540px;}

.grid_8 { width: 620px;}



Classic pixel grid




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

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.

@media only screen and (max-width: 800px) {

// Enter rules here to target screens under 800px

}

Example

Mediaqueries create breakpoints


Mediaqueries

Min and max-widths.@media (min-width: 481px) and (max-width: 768px)

// Enter rules here to target screens above 481px and under 768px

}

@media only screen and (orientation : portrait) {

/* Target any device in portrait mode.*/

}

Target Orientation.


Mediaqueries

@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 .*/

}

Target Resolution.

Demo




Flexible Elements

Fluid Images

Simple fix 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 videosvar $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() {

...

Demo


http://localhost:8888/talk/responsive/images.html

http://localhost:8888/talk/responsive/images.html



Flexible Elements

Fluid Type

Designed to maintain optimum line length for reading on the web.

Optimum line length is somewhere between 45-75 characters per line..http://trentwalton.com/2012/06/19/fluid-type/

CSS solutions via mediaqueries.

Javascript solutions via scripts like FitText for headings

http://fittextjs.com/

Line Length

CSS

Javascript


http://trentwalton.com/2012/06/19/fluid-type/

http://trentwalton.com/2012/06/19/fluid-type/



Responsive Challenges

Navigation

A lot of options out there now.

Page Load

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

- Select Menu

- Toggle Menu

- Off Canvas Menu

- Footer Links

bradfrost.github.io/this-is-responsive/patterns.html#fluid-images


Questions?
