3. 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 first template.
Curiosity turned to
obsession and so late in
2006 Joomlabamboo was
born.
Saturday, 19 October 13
4. Since 2006 we have created 80+ templates
30 or more of them are responsive.
First responsive design released in October 2011.
Saturday, 19 October 13
14. In addition to our themes we
released Zentools in December 2011.
Saturday, 19 October 13
15. 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
Saturday, 19 October 13
16. What is Responsive design?
... but first a few questions for you.
Saturday, 19 October 13
17. Who here has a responsive website?
Saturday, 19 October 13
18. Who here has used a
responsive template?
Saturday, 19 October 13
19. Who here has built a
responsive template?
Saturday, 19 October 13
20. Who here doesn’t own
a smart phone?
The rise of the mobile generation.
Saturday, 19 October 13
21. 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.
Saturday, 19 October 13
23. 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
Saturday, 19 October 13
24. 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/
Saturday, 19 October 13
25. So should you believe the hype?
Do you need to make mobile a priority - right now?
Based on these figures you should ...
... but first ...
... a disclaimer of sorts.
Saturday, 19 October 13
26. The fine print. (Part 1)
Mobile traffic 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.
Saturday, 19 October 13
27. The fine print. (Part 1)
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?
Saturday, 19 October 13
28. The fine print. (Part 2)
Another factor to consider.
What % of users visit your site using ie8
and below?.
Mobile traffic is the future but ...
... at the moment you may be better off
spending more time on crappy
browsers.
eek :(
Saturday, 19 October 13
29. After all, ie8 and below still
account for 11% of worldwide
browser use.
Saturday, 19 October 13
30. Despite this ...
... your client will probably want a
mobile optimised site anyway.
Saturday, 19 October 13
31. Should you make optimising for
mobile a priority for an existing site?
Before I answer that let’s look at
some some case studies.
Saturday, 19 October 13
32. Joomlabamboo.com
My 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
Saturday, 19 October 13
- Monthly email
- Close to 4000 twitter followers
- Small facebook engagement
33. 2ser.com
Sydney radio station with an 18-40 yo demographic.
- 20% mobile
- 80% Desktop
Saturday, 19 October 13
- Dedicated social media team
- 9000 Facebook fans
- 6100 Twitter Followers
34. greensborosportsplex.com
Community sports center on the East Coast of USA
Seasonal activity based on sports season.
Local information provider.
- 18% mobile
- 82% Desktop
Saturday, 19 October 13
- Regular facebook updates
- Small Twitter Following
- Monthly newsletter to 60000
35. Does anyone here have examples of
sites that have more than average
mobile visitors?
Saturday, 19 October 13
36. So back to the question at hand ...
Should you make optimising for
mobile a priority for an existing site?
Shorterm:
Longterm:
Saturday, 19 October 13
It depends.
Definitely.
37. 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.
Saturday, 19 October 13
38. Optimising your site for mobile use is
not just about today ...
... it’s about the future.
Saturday, 19 October 13
39. Mobile traffic maybe growing
but more than that ...
... devices are multiplying.
Saturday, 19 October 13
40. 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.
Saturday, 19 October 13
41. 2007
First iPhone released
2008
HTC dream released (Android)
2010
First iPad released
2012
3997 android devices
http://opensignal.com/reports/fragmentation.php
2013
11868 android devices
http://opensignal.com/reports/fragmentation-2013/
Saturday, 19 October 13
43. 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?
Saturday, 19 October 13
44. So what are the options?
Saturday, 19 October 13
45. Dedicated Mobile theme
vs Responsive design
Neither is perfect ... just yet.
Saturday, 19 October 13
46. 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 specifically 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 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.
Saturday, 19 October 13
48. 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 first.
- Not all mobile devices support all the full range of media queries and css3.
Saturday, 19 October 13
50. So in a nutshell ...
Responsive design aims to provide a single design
solution to suit multiple contexts.
Saturday, 19 October 13
51. 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 traffic.
Saturday, 19 October 13
52. 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 first 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
Saturday, 19 October 13
Ethan Marcotte publishes Responsive Web Design book.
53. er
v
y
A brief history of responsive design.
Sept
2011
Boston Globe has a responsive redesign.
Oct
2011
We released our first 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 first “big” site to have a
responsive makeover.
* She doesn’t really.
Saturday, 19 October 13
54. Key facets of responsive design.
Fluid grid.
Rather than using fixed 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.
Saturday, 19 October 13
55. Responsive Types
Demo
Adaptive vs Responsive vs Mixed.
Adaptive
Fixed width containers that change width at
various breakpoints.
Responsive
Percentage based fluid grid often with a maxwidth set to parent container.
Mixed
Adaptive at large screen sizes and % based at
smaller screen sizes.
Saturday, 19 October 13
56. 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.
Saturday, 19 October 13
58. 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.
Saturday, 19 October 13
59. 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
}
Saturday, 19 October 13
60. 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.*/
}
Saturday, 19 October 13
61. 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 .*/
}
Saturday, 19 October 13
62. Flexible Elements
Demo
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%;
}
Saturday, 19 October 13
// 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() {
...
63. 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/fluid-type/
CSS
CSS solutions via mediaqueries.
Javascript
Javascript solutions via scripts like FitText for headings
http://fittextjs.com/
Saturday, 19 October 13
64. 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.
Saturday, 19 October 13