Responsive design is a web design approach that ensures optimal viewing across devices, catering to the multi-screen usage trend where users expect a seamless experience. Having a responsive website increases user engagement, saves resources by reducing the need for multiple updates across platforms, and can lead to higher conversions due to a growing number of mobile shoppers. Moreover, it is favored by Google for better search rankings, helping businesses maintain relevance as new devices emerge.

1. What is Responsive
Design and how does it
help your business?

2. In Jan. 2014 42% of US
adults owned a tablet and
were actively browsing
the Internet
on it.
Till the end on 2014
almost 1.76 billion people
will own and use a
smartphone.

3. Multi-screen is the new norm now.
—We shop on our tablets while we watch TV.
—We check our social stream on our phone while we work on
our laptop.

4. Is your website prepared for the
mobile revolution?

5. Here comes
Responsive Design

6. Responsive design is a web
design approach aimed at
creating sites that provide an
optimal viewing experience
across a wide range of devices.

7. The same site works on the
mobile phone in your pocket,
tablet in your backpack and
computer at your office.

8. Responsive web design adapts
the site’s layout, text, media, ads
to the size of the window
through which you are exploring
the Internet.

9. GRAPEFRUIT | DESIGNING MOBILE APPS
9

10. Here are some live
examples

11. Full-screen harvard.edu website

12. Half-screen harvard.edu website

13. Mobile view of harvard.edu website

14. Full width view of time.com

15. Half-screen, mobile view, menu view and mobile view after TAP

16. Full-width view salesforce.com

17. Half-width view salesforce.com, mobile view and menu view

18. Want more examples?
Visit these websites:
http://www.ing.com/
http://www.oliverharvey.co.uk/
http://www.t-mobile.com/
http://www.catscarf.com/
http://group.renault.com/

19. Why is Responsive
Design vital for your
business?

20. 1.The same brand
experience on all the
platforms

21. “The users expect to have
a seamless experience
across all their devices”
– Google B2B campaign
They want to:
— see the same content;
— navigate through a
similar layout;
— have access to the
same options and
possibilities across all
their mediums.

22. Google made a
research on customers
opinions regarding
mobile sites

23. When you have a mobile
friendly site:
74% say that they’re more
likely to return to a mobile
friendly site.
67% say that they’re more
likely to buy a site’s product
when visiting a mobile
friendly site.

24. When you don’t have a
mobile friendly site:
48% say that they feel
frustrated and annoyed.
36% say that they’ve
wasted their time visiting
that site.
52% said that a bad mobile
experience made them less
likely to engage with that
company.

25. 2.Use less resources.
Save more time

26. When you
have a
responsive
site
You don’t have to make
updates on different
platforms;
You don’t have to make
different SEO and ad
campaigns;
You don’t have to worry
about timing your updates
on different platforms.

27. Having one
platform to
rule them
all
Once you updated your
content, all your clients
receive the same
information.
Consumers expect to have
the same content and offers
on all the platforms. With
responsive design you
make them happy.

28. 3.Responsive websites
drive conversion

29. The total
number
of mobile
users is
huge
They are cross-platform
shoppers and they are
visiting your site.

30. They
gather
info from
various
channels.
Your website is a valuable
resource and you have to
exploit this opportunity.

31. 27% of shoppers expect to
increase their purchase via
mobile phone.
49% of retailers have
purchasing capabilities on
their mobile site.
36% percent of customers
find shopping via mobile
easy.
60% are interested in
posting to social media
while shopping in store.

32. So what does this mean for you ?

34. 4.Google likes it

35. Just to be sure you
know
With an astounding global
market share Google remains
the main actor in the search
market.

36. Being on the good side of
Google means more organic
search traffic and more leads for
your company.

37. But why does Google like
Responsive Design?

38. Using a single address for a
piece of content makes it
easier for your users to
interact with, share and
link.

39. A single address makes
Google’s algorithms work
easier and this means that
your content gets indexed
faster.

40. If you have a responsive
design the users don’t get
redirected to another
website, thus the loading
time decreases and the
chance of a bounce
appearing decreases.
When you have one
address, Google’s crawlers
need to access your pages
only once, thus saving
resources for both your
company and Google.

41. When you share from a mobile site, chances are that a
person from a different medium, like a tablet or desktop,
will access the link. They will get a bad version of your
site and bounce immediately right out of it. This
increase in bounce rate can hurt your Google ranking for
that page and for your site.

42. 5.Prepare for the
unpredictable

44. We do not know what are the future screen
dimensions that will appear on the
mobile/tablet/pc market. This uncertainty does
not scare us. We know that responsive design
can tackle almost any screen resolution if it’s
done right.

45. So how much does a
Responsive Website
cost?

46. Here are 2 examples
from our experience
We made for a client a
desktop version of a site.
After we delivered, they
wanted a mobile friendly
version. The cost increased
by 30%.
Another client requested a
responsive website. The
final cost was 10% less
than if we would have made
a desktop and a separate
mobile site.

47. A responsive
design might cost
you more in the
development
stage of the
project but on the
long run:
— It will save you money
for site maintenance;
— You will use less HR
resources and the
updates will be easier;
— The stress and
chances of mistakes
will decrease;
— Will generate more
leads and it will be
Google Friendly.

48. In the end we give you
the same advice we
give to our clients.

49. Choose Responsive
Design.

50. Found this useful?
Share it forward.
Interesting web project?
Send a pidgeon.

51. Resources
http://www.emarketer.com/Article/Worldwide-Smartphone-Usage-Grow-25-2014/1010920
http://www.marketingcharts.com/online/us-tablet-ownership-update-january-2014-39508/
http://googlemobileads.blogspot.ro/2012/09/mobile-friendly-sites-turn-visitors.html
https://developers.google.com/webmasters/smartphone-sites/details
http://www.accenture.com/Microsites/retail-research/Pages/consumer-research-results.
aspx#results
http://commons.wikimedia.org/wiki/File:Content-is-like-water-1980.jpg
http://commons.wikimedia.org/wiki/File:Responsive_Web_Design_for_Desktop,_Notebook,_Tablet
_and_Mobile_Phone.png
http://www.flaticon.com/

52. Resources
Sites given as example
http://www.time.com
http://www.Harvard.edu
http://www.salesforce.com

53. Thank you.
You rock !