className
twoColumn
RESPONSIVE
DESIGN
Scroll
What is it?
And why does my
business need it?
 
className
threeRows
Let's examine the facts:
1.8 BILLION
In 2011, the world was home to more than 1.8 billion smartphones (iPhone, BlackBerry, Android, etc.)
In Canada alone, smartphones
account for more than
1/3 of all mobile phones
className
twoColumn
 
57%
 
of which have been used for mobile searches triggered by offline advertising
className
twoColumn
43%
of which converted
into an online purchase
className
twoColumn
Since 2009,
mobile internet
use has
DOUBLED ANNUALLY
DOUBLED ANNUALLY
DOUBLED ANNUALLY
DOUBLED ANNUALLY
DOUBLED ANNUALLY
DOUBLED ANNUALLY
DOUBLED ANNUALLY
 
className
twoColumn
2
OUT
OF
3
In corporate Canada
the numbers are even higher -
more than 2/3 of workers
use smartphones or tablets
 
className
threeRows
Over the next 5 years, B2B mobile marketing spend is expected to quadruple.
 
2009
$26 000 000
2014
$106 000 000
className
oneColumn
As a responsive marketer,
what are you going to do about it?
className
twoColumn
Start by asking yourself three questions:
 
1. How does my website
look on a mobile screen?
Is it even legible?
className
keyline
className
twoColumn
2. How functional is it on
a mobile device?
className
twoColumn
3. After clients or prospects
have visited my site on a
smartphone, do they look
like this:
:)
className
threeRows
Responsive Design will
ensure they look like this:
:)
 
AND READY TO
SPEND MORE OF THIS:
$
className
twoColumn
Responsive sites respond
intuitively to any web
browsing environment for
smartphones, tablets,
laptops, desktops, etc.
className
twoColumn
They offer a seamless
user experience for a
true, effective solution.
className
threeRows
Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we'll build websites for the decade to come.
— Jeffery Veen
className
twoColumn
NOW FOR THE
TECHNICAL PART
The whole system relies on a
CSS3 feature we like to call
“Media Queries”

Something that allows specific site styles to respond to particular device constraints– i.e. browser width
className
keyline
className
twoColumn
The sites themselves are designed with a “fluid grid”, rather than “fixed width” layout
className
twoColumn
As with any good technological
innovation, math is used:

target / context = result
(A significant shift from fixed width layouts)
className
keyline
className
twoColumn
Ok, if you've read this far and we haven't put you to sleep with tech jargon, let's see how it works!
className
threeRows
What follows are examples of highly effective sites we love*, pulled from the world of responsive design.

*Love, but didn't build ourselves.
className
oneColumn
 
Barack Obama
image1
The Boston Globe
image2
Starbucks
image3
Sony
image3
className
twoColumn
HOW IT WORKS

1. Grab the resize icon in the corner
of your window and see how easy
it is to scale in and out.

2. Now, try it on your mobile
device or tablet.

A responsive site provides maximum
functionality in any format!
className
twoColumn
WANT TO
LEARN MORE?
OF COURSE
YOU DO.
Contact Ben at
Hagon Design

+1 519 954 9263
ben@hagondesign.com