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

53
Click icon to add background picture, or just change the background color using one of the palette colors. What is Responsive Design and how does it help your business?

description

In our discussions with our clients we often hear - What is Responsive Design? This is why we made a presentation showing the business value of responsive design. We combined our experience and know-how with external sources of information to create an easy to understand presentation for people in the marketing and management area. We hope you enjoy it!

Transcript of What is Responsive Design and how does it help your business ?

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

Click icon to add background picture,or just change the background color

using one of the palette colors.

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

Page 2: What is Responsive Design and how does it help your business ?

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.

Page 3: What is Responsive Design and how does it help your business ?

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.

Page 4: What is Responsive Design and how does it help your business ?

Is your website prepared for the mobile revolution?

Page 5: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

Here comes Responsive Design

Page 6: What is Responsive Design and how does it help your business ?

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

Page 7: What is Responsive Design and how does it help your business ?

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

Page 8: What is Responsive Design and how does it help your business ?

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

Page 9: What is Responsive Design and how does it help your business ?

GRAPEFRUIT | DESIGNING MOBILE APPS

9

Page 10: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

Here are some live examples

Page 11: What is Responsive Design and how does it help your business ?

Full-screen harvard.edu website

Page 12: What is Responsive Design and how does it help your business ?

Half-screen harvard.edu website

Page 13: What is Responsive Design and how does it help your business ?

Mobile view of harvard.edu website

Page 14: What is Responsive Design and how does it help your business ?

Full width view of time.com

Page 15: What is Responsive Design and how does it help your business ?

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

Page 16: What is Responsive Design and how does it help your business ?

Full-width view salesforce.com

Page 17: What is Responsive Design and how does it help your business ?

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

Page 18: What is Responsive Design and how does it help your business ?

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/

Page 19: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

Why is Responsive Design vital for your business?

Page 20: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

1.The same brand experience on all the platforms

Page 21: What is Responsive Design and how does it help your business ?

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

Page 22: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

Google made a research on customers opinions regarding mobile sites

Page 23: What is Responsive Design and how does it help your business ?

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.

Page 24: What is Responsive Design and how does it help your business ?

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.

Page 25: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

2.Use less resources. Save more time

Page 26: What is Responsive Design and how does it help your business ?

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.

Page 27: What is Responsive Design and how does it help your business ?

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.

Page 28: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

3.Responsive websites drive conversion

Page 29: What is Responsive Design and how does it help your business ?

The total number of mobile users is huge

They are cross-platform

shoppers and they are

visiting your site.

Page 30: What is Responsive Design and how does it help your business ?

They gatherinfo from various channels.

Your website is a

valuable resource and

you have to exploit this

opportunity.

Page 31: What is Responsive Design and how does it help your business ?

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.

Page 32: What is Responsive Design and how does it help your business ?

So what does this mean for you ?

Page 33: What is Responsive Design and how does it help your business ?
Page 34: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

4.Google likes it

Page 35: What is Responsive Design and how does it help your business ?

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

Page 36: What is Responsive Design and how does it help your business ?

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

Page 37: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

But why does Google like Responsive Design?

Page 38: What is Responsive Design and how does it help your business ?

Using a single address

for a piece of content

makes it easier for

your users to interact

with, share and link.

Page 39: What is Responsive Design and how does it help your business ?

A single address makes

Google’s algorithms

work easier and this

means that your

content gets indexed

faster.

Page 40: What is Responsive Design and how does it help your business ?

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.

Page 41: What is Responsive Design and how does it help your business ?

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.

Page 42: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

5.Prepare for the unpredictable

Page 43: What is Responsive Design and how does it help your business ?
Page 44: What is Responsive Design and how does it help your business ?

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. 

Page 45: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

So how much does a Responsive Website cost?

Page 46: What is Responsive Design and how does it help your business ?

Here are 2 examples from our experienceWe 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.

Page 47: What is Responsive Design and how does it help your business ?

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.

Page 48: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

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

Page 49: What is Responsive Design and how does it help your business ?

Choose Responsive Design.

Page 50: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.Found this useful?Share it forward.

Interesting web project?Send a pidgeon.

Page 51: What is Responsive Design and how does it help your business ?

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/

Page 52: What is Responsive Design and how does it help your business ?

Resources

Sites given as examplehttp://www.time.comhttp://www.Harvard.edu

http://www.salesforce.com

Page 53: What is Responsive Design and how does it help your business ?

Click icon to add background picture,or just change the background color

using one of the palette colors.

Thank you.You rock !