D I A L O G U E T H E O R Y

Designing Your Website for the Mobile Web

Survive Mobilegeddon

www.dialoguetheory.com

chris@dialoguetheory.com

Designing Your Website for the Mobile Web

D I A L O G U E T H E O R Y

1. Mobilegeddon?2. Mobile is the new normal3. Designing for the mobile web4. Useful Resources5. Questions!

Mobilegeddon?

D I A L O G U E T H E O R Y

Mobilegeddon

D I A L O G U E T H E O R Y

One of the biggest changes to Google’s algorithm in recent years.

Mobilegeddon

D I A L O G U E T H E O R Y

What exactly is happening?

D I A L O G U E T H E O R Y

“Mobile friendliness” will now be an important ranking factor for websites, and sites that aren’t optimized for

mobile will appear lower in search results.

Who does this affect?

D I A L O G U E T H E O R Y

• All websites indexed by Google … globally• Only mobile search results• Applies to individual pages, not complete websites.

D I A L O G U E T H E O R Y

Google’s Mobile-Friendly Test:

https://www.google.com/webmasters/tools/mobile-friendly

What problem does Google intended to solve?

D I A L O G U E T H E O R Y

Mainly, Google is trying to provide a better experience for people searching via smartphones.

There’s a propensity for consumers to abandon your brand if they are struggling to see your

products, make purchases, get information, or contact you.

The Message

D I A L O G U E T H E O R Y

Optimizing for mobile is no longer a matter of choice.

Mobile: the new normal

D I A L O G U E T H E O R Y

Mobile: the new normal

D I A L O G U E T H E O R Y

Purchases of smartphones and tablets now far surpass those of

laptops and desktop PCs.

Mobile: the new normal

D I A L O G U E T H E O R Y

The tipping point has been passed: most internet users

access websites on their phones.

Mobile: the new normal

D I A L O G U E T H E O R Y

OK, fine – but are folks actually searching on their phones?

Mobile: the new normal

D I A L O G U E T H E O R Y

Designing for the Mobile Web

D I A L O G U E T H E O R Y

Three ways to design for mobile

D I A L O G U E T H E O R Y

• Responsive design: A single website, which flexes and

adapts to the screen it is viewed on.• Dynamic serving: A single URL, using an agent to

detect device type and then serving the appropriate

HTML.• Mobile website: Separate websites (with different

URLs) served depending on which device is being

used.

Three ways to design for mobile

D I A L O G U E T H E O R Y

• Responsive design: A single website, which flexes and

adapts to the screen it is viewed on.• Dynamic serving: A single URL, using an agent to

detect device type and then serving the appropriate

HTML.• Mobile website: Separate websites (with different

URLs) served depending on which device is being

used.

D I A L O G U E T H E O R Y

What does a responsive site look like?

D I A L O G U E T H E O R Y

What should I keep in mind when

starting a mobile redesign?

1) Go – and plan for - responsive

D I A L O G U E T H E O R Y

• By far the best of the three website patterns for most situations

• Keep critical goals in mind• Use “chunkable” content that can condense cleverly

• Above all, design for user intent!

2) Large text and calls-to-action

D I A L O G U E T H E O R Y

Design for fingers!

2) Large text and calls-to-action

D I A L O G U E T H E O R Y

Design for fingers!

2) Large text and calls-to-action

D I A L O G U E T H E O R Y

Text sizing: At least 16 CSS pixels.

Text spacing: At least browser default line height of 1.2em.

Most important tap targets: At least 48 CSS (7mm) pixels.

Target spacing: At least 32 CSS pixels (5mm).

3) Avoid common technical mistakes

D I A L O G U E T H E O R Y

These include:

• Blocked code (robots.txt)

3) Avoid common technical mistakes

D I A L O G U E T H E O R Y

These include:

• Blocked code (robots.txt)• Unplayable content (replace Flash with HTML 5 or

Jquery)

3) Avoid common technical mistakes

D I A L O G U E T H E O R Y

These include:

• Blocked code (robots.txt)• Unplayable content (replace Flash with HTML 5 or

Jquery)• Avoid interstitials: opt for simple banners instead!

NO: YES!

3) Avoid common technical mistakes

D I A L O G U E T H E O R Y

These include:

• Blocked code (robots.txt)• Unplayable content (replace Flash with HTML 5 or

Jquery)• Avoid interstitials: opt for simple banners instead!• Ignoring slow page load times. Use Google’s PageSpeed

Insights tool to test load times: https://developers.google.com/speed/pagespeed/insights/

4) Properly tag your pages

D I A L O G U E T H E O R Y

The meta viewport tag signals to browsers (and Google!) that your site has been designed for mobile.

Make sure it is added to the head of your documents: <meta name="viewport" content="width=device-

width, initial-scale=1.0">

5) Iterative improvement

D I A L O G U E T H E O R Y

1) Once you’ve gone responsive, watch usage!2) Compare KPIs by desktop vs. mobile:

• Time on site• Pages viewed• Conversion, conversion, conversion!

3) Conduct A/B tests

Useful Resources

D I A L O G U E T H E O R Y

Useful Resources

D I A L O G U E T H E O R Y

Google Mobile Friendly Test:https://www.google.com/webmasters/tools/mobile-friendly/

Google Mobile-Friendly Websites Guide:https://developers.google.com/webmasters/mobile-sites/

How to Ace The Google-Mobile-Friendly Test:https://moz.com/ugc/cracking-the-google-mobile-friendly-test-how-to-score-

100

Screenflyhttp://quirktools.com/screenfly/

Contact Us

D I A L O G U E T H E O R Y

chris@dialoguetheory.com

www.linkedin.com/in/chrisoquistwww.dialoguetheory.com

Questions?

D I A L O G U E T H E O R Y