84
Responsive sites Not just looking good on a mobile @RH__Digital

Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Embed Size (px)

Citation preview

Page 1: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Responsive sitesNot just looking good on a mobile

@RH__Digital

Page 2: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Who we are

@RH__Digital

Page 3: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Design Partners of TERMINALFOUR

DesignersDevelopersConsultants

Page 4: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

What you can be doing

@RH__Digital

right now…

Page 5: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

User Engagement

@RH__Digital

Page 6: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 7: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 8: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 9: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 10: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 11: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 12: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 13: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 14: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 15: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Make it easy for your users to navigate…

@RH__Digital

Page 16: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 17: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

“Emphasise information, not navigation”

@RH__Digital

Steven Hoober (UX Matters)

Page 18: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Mobile users gravitate towards the centre

@RH__Digital

image from UX Matters

Page 19: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 20: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 21: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

If there are tasks that you want your users to complete - make it obvious

@RH__Digital

Page 22: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 23: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 24: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Page 25: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Understand your audience.Speak their language

@RH__Digital

Page 26: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 27: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Aesthetic focus

@RH__Digital

Page 28: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Page 29: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Page 30: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Is your content easy to read?

@RH__Digital

Page 31: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Bad - line length too long Good - reduced line word count

Page 32: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

“Placing text in an 11px font and cramming it into the bottom of the page just won’t deliver the experience your readers crave”

@RH__Digital

Gisele Muller (Treehouse)

Page 33: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Page 34: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Page 35: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

63%

* WebAim Survey of Users with Low Vision Results

use the accessibility settings or accessibility software on a mobile phone or tablet *

one of several scenarios where colour might be impaired when viewing your design

Poorly calibrated screens shifting colour

Page 36: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Contrast between default and current slide navigation

Additional visual indicator for current slide

Text is visible over imagery

Page 37: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Page 38: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Page 39: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Staged photography can have a negative effect on your brand

@RH__Digital

Page 40: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 41: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Be as honest and transparent as you can

@RH__Digital

Page 42: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 43: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Page 44: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Page 45: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

“In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target.”

@RH__Digital

Anthony T (UX Movement)

Page 46: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 47: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Personalisation

@RH__Digital

Page 48: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

19% increase in revenue using personalisation techniquesEconsultancy and Monetate

Page 49: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

ReferrersRecommendationsLocationNetwork

Page 50: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

ReferrersRecommendationsLocationNetwork

Page 51: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Landing Pages- Average of a 80% bounce rateKissMetrics

Page 52: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

ReferrersRecommendationsLocationNetwork

Page 53: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

ReferrersRecommendationsLocationNetwork

Page 54: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Conversion rate 5.5x higher from clicking a recommendation than directly visiting the pageBarilliance

Page 55: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Make them global call to actions based upon the information gathered from the users activities

Page 56: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

ReferrersRecommendationsLocationNetwork

Page 57: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

ReferrersRecommendationsLocationNetwork

Page 58: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Instant segmentationbased upon where a user is located

90% of consumers find custom content usefulDemand Metric

Page 59: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Page 60: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

ReferrersRecommendationsLocationNetwork

Page 61: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

ReferrersRecommendationsLocationNetwork

Page 62: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Mobile data traffic predicted to increase by 60% from 2015 to 2017.Statista

Page 63: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

47% of users expect a page to load in less than 2 seconds Kissmetrics

Page 64: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

40% of users abandon a website that takes longer than 3 seconds to loadKissmetrics

Page 65: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Personalise by prioritising

Page 66: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Optimisation

@RH__Digital

Page 67: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Delay greater than one second will interrupt a users thoughtGoogle Research

Page 68: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Each second delay in load time leads to a 7% user drop outKissMetrics

Page 69: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

25% users expect mobile sites to perform the same as the desktop equivalentKissMetrics

Page 70: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

Page 71: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

Page 72: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Images on average could be compressed by 38% Roundhouse Digital Research

Page 73: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Average savings of 1200KB can be made.Roundhouse Digital Research

Page 74: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Time savings:

Edge = 56 seconds

3G = 5 seconds

4G = 1 second

Page 75: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Reduce dropouts rates by:

Edge = 392%

3G = 35%

4G = 7%

Page 76: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

Page 77: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

Page 78: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Issue with mobile3G connections experience up to 300ms latency

SolutionReduce render blocking requests

Page 79: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

Page 80: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

Page 81: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

User ServerWCOServer

Page 82: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Polish ImagesMinify/Compress CSS and JSAutomatic CDN

Network detection

Page 83: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

@RH__Digital

Without WCO With WCO

ran from Hong Kong

Page 84: Roundhouse Digital: Responsive Sites- Not just looking good on a mobile

Come and talk with us if you have any

questions.@RH__Digital