roundhouse digital: responsive sites- not just looking good on a mobile
TRANSCRIPT
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