Date post: | 17-Jul-2015 |
Category: |
Design |
Upload: | percussion-software |
View: | 139 times |
Download: | 2 times |
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
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
www.linkedin.com/in/chrisoquistwww.dialoguetheory.com
Questions?
D I A L O G U E T H E O R Y