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

Preview:

Citation preview

Responsive sitesNot just looking good on a mobile

@RH__Digital

Who we are

@RH__Digital

@RH__Digital

Design Partners of TERMINALFOUR

DesignersDevelopersConsultants

What you can be doing

@RH__Digital

right now…

User Engagement

@RH__Digital

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

@RH__Digital

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

@RH__Digital

@RH__Digital

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Make it easy for your users to navigate…

@RH__Digital

@RH__Digital

“Emphasise information, not navigation”

@RH__Digital

Steven Hoober (UX Matters)

Mobile users gravitate towards the centre

@RH__Digital

image from UX Matters

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

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

@RH__Digital

@RH__Digital

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

@RH__Digital

Heat mappingGoogle AnalyticsNavigationCall to actionsUse of language

Understand your audience.Speak their language

@RH__Digital

@RH__Digital

Aesthetic focus

@RH__Digital

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Is your content easy to read?

@RH__Digital

@RH__Digital

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

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

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

@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

@RH__Digital

Contrast between default and current slide navigation

Additional visual indicator for current slide

Text is visible over imagery

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

Staged photography can have a negative effect on your brand

@RH__Digital

@RH__Digital

Be as honest and transparent as you can

@RH__Digital

@RH__Digital

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

@RH__Digital

White space & readabilityColourRelevant imageryHit Areas

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

@RH__Digital

Personalisation

@RH__Digital

@RH__Digital

19% increase in revenue using personalisation techniquesEconsultancy and Monetate

@RH__Digital

ReferrersRecommendationsLocationNetwork

@RH__Digital

ReferrersRecommendationsLocationNetwork

@RH__Digital

Landing Pages- Average of a 80% bounce rateKissMetrics

@RH__Digital

ReferrersRecommendationsLocationNetwork

@RH__Digital

ReferrersRecommendationsLocationNetwork

@RH__Digital

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

@RH__Digital

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

@RH__Digital

ReferrersRecommendationsLocationNetwork

@RH__Digital

ReferrersRecommendationsLocationNetwork

@RH__Digital

Instant segmentationbased upon where a user is located

90% of consumers find custom content usefulDemand Metric

@RH__Digital

@RH__Digital

ReferrersRecommendationsLocationNetwork

@RH__Digital

ReferrersRecommendationsLocationNetwork

@RH__Digital

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

@RH__Digital

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

@RH__Digital

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

@RH__Digital

Personalise by prioritising

Optimisation

@RH__Digital

@RH__Digital

Delay greater than one second will interrupt a users thoughtGoogle Research

@RH__Digital

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

@RH__Digital

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

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

@RH__Digital

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

@RH__Digital

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

@RH__Digital

Time savings:

Edge = 56 seconds

3G = 5 seconds

4G = 1 second

@RH__Digital

Reduce dropouts rates by:

Edge = 392%

3G = 35%

4G = 7%

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

@RH__Digital

Issue with mobile3G connections experience up to 300ms latency

SolutionReduce render blocking requests

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

@RH__Digital

Education for editorial usersPrioritise visible contentWeb Content Optimisation

@RH__Digital

User ServerWCOServer

@RH__Digital

Polish ImagesMinify/Compress CSS and JSAutomatic CDN

Network detection

@RH__Digital

Without WCO With WCO

ran from Hong Kong

Come and talk with us if you have any

questions.@RH__Digital

Recommended