Desktop-First vs. Mobile-First Web Design: What's Best for YOUR Business?

Desktop-First vs.

Mobile-First

Web Design:

Which is Best for

YOUR Business?

Presented by

http://www.splashomnimedia.com/

So you’ve hired a web

designer.

And while you’re

talking with them

about your website,

they ask,


designer.

And while you’re

talking with them

about your website,

they ask,

Would you like it to be

desktop-first or

mobile-first design?


designer.

And while you’re

talking with them

about your website,

they ask,

Would you like it to be

desktop-first or

mobile-first design?

And you’re like…

Um…

Um…

What is

desktop-first

and mobile-

first design?

Don’t worry. We’ve got you covered.

Part 1: Let’s Get

Into Some Web

Design History

It used to be that you’d get a website

designed for people’s computers.

(Because that’s all they would use.)

But then a bunch of devices were invented

that could access the internet.

But then a bunch of devices were invented

that could access the internet.

And a LOT of people started using them.

Source: http://www.businessinsider.com/mobile-web-use-continues-to-rise-2012-6

…as in, over half of Americans.

In response, many websites essentially took

their regular (desktop) website and just shrank

it to fit mobile screens.

The problem with this?

It was very difficult to view some desktop

websites on the smaller screens.

And the coding used for the websites didn’t

always work on the mobile devices.

So then a lot of smart businesses began

making specifically mobile sites.

These were completely separate versions of

the business’s website that would load if the

visitor was viewing the site on a mobile device.

Ex. Walmart desktop vs. mobile websites

As more people began visiting and using

mobile websites, many designers noticed that

certain design features and elements worked

much better on a mobile website than on a

desktop site.

This led to mobile websites starting to look and

behave very differently than their desktop

counterparts.

These become known as “mobile optimized”

sites.

As the number of mobile internet users grew,

many businesses realized that they needed a

mobile website.

But many were still operating on a desktop-first

model of design.

Many mobile sites were incredibly simplified,

with only the bare bones of the desktop sites.

Ugh, where is that

“view on desktop”

link?

Summary of Part 1:

Summary of Part 1:

• The rise of mobile devices that could

access the internet caused many

businesses to create mobile websites.

Summary of Part 1:

• Some of these were shrunken versions of the

desktop sites; some were separate, mobile-

optimized sites altogether.




Summary of Part 1:

• Neither strategy was regularly creating

great mobile websites, just shells of the main

websites made for mobile screens.







Summary of Part 1:

Then everything changed…

• Neither strategy was regularly creating

great mobile websites, just shells of the main

websites made for mobile screens.







Part 2: The Rise of

Responsive Design

and the Fully

Functional Mobile

Site

In May of 2010, Ethan Marcotte published an

article about responsive web design.

He said:

Rather than tailoring disconnected designs

to each of an ever-increasing number of

web devices, we can treat them as facets

of the same experience. We can design for

an optimal viewing experience, but embed

standards-based technologies into our

designs to make them not only more

flexible, but more adaptive to the media that renders them.

“

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



Responsive web design is the idea that you

take one website and simply have it adjust its

look depending on the device or size of the

screen.

Translation:

So instead of multiple sites for multiple

devices…

So instead of multiple sites for multiple

devices…

You have one site with multiple, adaptive

designs.

Needless to say, this blew the minds of

lots of web designers and businesses.

In addition to being just plain cool, what was

so great about responsive design was that,

at its heart, it believed that mobile user

experience was just as important as desktop

user experience.

In other words, that mobile sites could be as

functional and informative as desktop sites.

That they should be.

Instead of creating mobile websites with

limited options, information, and functionality,

responsive web design takes all the benefits of

a desktop website and presents them in a very

mobile-friendly way.

Who does this

make happy?

Business owners (you don’t need a separate

website for every new kind of mobile device)

Your website guy

Smartphone makers

Business owners

Your website guy (who now only has to

create, maintain, and update content for

one site)

Smartphone makers

Business owners

Your website guy

Smartphone makers (with an improved

mobile web, more people will want and be

happy with smartphones)

AND (drumroll)…

Business owners

Your website guy

Smartphone makers

AND

USERS! (who get better websites that meet

their needs and allow them to interact

with businesses on whichever device is best

for them)

But what does this mean for the website

design process today?



You have to design with mobile in mind.



You have to design with mobile in mind.

And not just smartphones, either…

Nowadays, people spend more and more

time on their mobile devices than ever before.

0

20

40

60

80

100

2009 2010 2011 2012

Minutes Spent on Mobile Devices Per Day,

2009-2012

Source: http://www.emarketer.com/Article/Consumers-Spend-More-Time-with-Mobile-Online-Growth-Slows/1009431

They’re spending more of that time on mobile

searches and using mobile websites.

0

2

4

6

8

10

12

Q1 2012 Q2 2012 Q3 2012 Q4 2012 Q1 2013

Smartphone

Tablet

Percentage of Website Visits by Device

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

And they’re often moving from device to

device while interacting with a business

site, especially as they move through the

buying process.

Source: Google

http://services.google.com/fh/files/misc/multi-screen_infographic.pdf

So your business website should provide a

quality user experience for your web visitors,

no matter what device they’re using to

interact with you.

Note: This doesn’t mean you have to use

responsive design on your site.

There are still some businesses and

circumstances in which it’s still a good idea

to have separate desktop and mobile

websites.

But no matter whether you decide to have

separate sites or use responsive design,

mobile websites are now more dynamic,

informative, and helpful than they were

even a few years ago.

Which means that the design of your mobile

website is just as crucial as the design of

your desktop website.

Summary of Part 2:

• As more people are using mobile devices,

however, this means that businesses have

to figure out how to bring the best

experience for their visitors.

• This meant that mobile websites were now

as functional, helpful, and informative as

their desktop counterparts.

• Responsive design changed the game by

using one website design that adapted to

different devices, rather than separate sites.

Part 3: Don’t bury

the lead! What’s

this got to do with

desktop-first vs.

mobile-first

web design?

Well, as many websites jumped into gear to

get fully mobile-optimized and mobile-

ready websites, web designers started

noticing a problem…

It could be very frustrating and time consuming.

Websites that were complex and awe-

inspiring for desktops were not always easy

to adapt to mobile devices.

Websites that were complex and awe-

inspiring for desktops were not always easy

to adapt to mobile devices.

It could be very frustrating and time consuming.

Because mobile websites are usually simpler

than their desktop counterparts, many web

designers started recommending that you

start designing the mobile version of the

website first, then design up to the desktop

version.

In other words, you start with the most

important information and features for the

mobile version, then add more as the site gets

bigger on tablets and desktops.

However, while this is a great idea and

helpful for website designers, it’s not always

so straightforward a decision for businesses.




Sometimes mobile-first design makes the

most sense; sometimes desktop-first design

does.




Sometimes mobile-first design makes the

most sense; sometimes desktop-first design

does.

Whether you decide to design for desktop

first or mobile first, you need to make sure

your decision is about providing the best

user experience to your target market.

USER EXPERIENCE:

how a person feels

about your business

or your product

based on their

interactions with,

perceptions of, and

expectations of you

(or, in this case, your

website)

In other words, you want to start with the

design that would provide the best

experience for your target market.

For instance, if you knew that 80% of your

web traffic came to your site on mobile

devices, which would you do?

Mobile-first, most likely.

What about if your traffic was split between

mobile and desktop 50-50, but the

majority of your sales (65%) came from the

desktop?

Probably desktop-first.

What if you’re just getting started on your

business’s website, and you don’t have any

data to go on about your web visitors and their

behavior?

Take a look at your target market.

Think about things like:

Who they are

What activities they like

How they spend their free time

Where they work or learn

How old they are

What ideas they identify with

What they need

How they will get what they need

Take a look at your target market.

Think about things like:

Who they are

What activities they like

How they spend their free time

Where they work or learn

How old they are

What ideas they identify with

What they need

How they will get what they need

http://www.splashomnimedia.com/marketing-blog/5-marketing-techniques-to-find-your-target-market

In other words, you want to know how, when,

and where your target market is

going to look for you (whether they know

they’re looking for you or not!).

Depending on what kind of information your

target market is looking for and

their general tastes and behaviors, you can

determine whether you should

do desktop-first or mobile-first design.

Key Differences

Primarily Desktop

Visitors • Stable and

immobile (usually

at home)

• Have more time on

their hands

• Looking for lots of

information

• More likely to make

online purchase

Primarily Mobile

Visitors

• On-the-go

• Don’t have as

much time to look

for information

• Looking for specific

information • More likely to make

offline (in store)

purchase

If a majority of your visitors or potential

visitors are going to come from the same

kind of devices and with the same kind of

goals, then that tells you which design you

should focus on first!

But remember, the question of desktop-first

and mobile-first website design is about

where to start with your design.

Because your web visitors can come from

anywhere at any time, the best way to be

prepared for them is for your site to be

adaptable to any device.

Even future devices…

So, to summarize:

So, to summarize:

We’ve come a long way since the days of

designing websites just for desktop

computers.

So, to summarize:

Whether they use responsive design or

separate website designs, mobile websites

have become as informative, helpful, and

functional as their desktop counterparts.

So, to summarize:

As a business, then, when trying to decide

whether mobile-first or desktop-first design

would be best for your website…

So, to summarize:




Look at your target market.

So, to summarize:





Their interests, habits,

expectations, likes, and

dislikes.

So, to summarize:





Their interests, habits,

expectations, likes, and

dislikes.

And design for them.

For more information on

website design, knowing

your target market, and

other online marketing

subjects,

web

consulting

SEM

video

SEO

marketing

print

branding

Visit our blog at

www.splashomnimedia.com

Or click on the logo:


http://www.splashomnimedia.com/marketing-blog


Technology

Desktop-First vs. Mobile-First Web Design: What's Best for YOUR Business?