SlideShare a Scribd company logo
Responding to the challenge
of the mobile web
Graham Bird
Contents
• Before we start
• A quick history lesson
• Fast forward to today
• What about our site?
• Looking forwards
Before we start
Why mobile?
Engagement through mobile is one of
the guiding principles defined in
Operation Partridge (Online Capabilities)
Before we start

Recommended for you

Lee hammond
Lee hammondLee hammond
Lee hammond

This document provides biographical information about the famous artist Lee Hammond. It discusses that she was born into an artistic family and was inspired by Crayola commercials at a young age. It notes that Lee Hammond has been a professional artist for over 20 years, has authored over 15 books on drawing techniques, and runs a private studio in Kansas where she teaches. Additionally, it mentions that she has worked as a police sketch artist and creates forensic drawings to help with identifications.

Webpages
WebpagesWebpages
Webpages

Web page designs for strawberry blonde. Each page is listed here to show the new design for the website.

web pagesweb
A pare redo3
A pare redo3A pare redo3
A pare redo3

Logo designs, these are the logos that were desgined before the final logo

logodesigns
By 2013 mobile phones will overtake
PCs as the most common web access
device worldwide
Gartner, Key Predictions for IT Organizations and Users in 2010 and Beyond
http://www.gartner.com/it/page.jsp?id=1278413
Before we start
Why now?
A quick history lesson
The mobile cliché
• Poor connection speed
• Tiny audience
• Lots of distractions
• Tiny screen size
• Requires dedicated mobile site
• On the go (short attention span)
• One handed interaction
• Tedious to type on numeric
keypads
Photo by Oimax
A quick history lesson
The cliché applied in 1999...
• Very slow connection speed
• Extortionate data plans
• Hardly any compatible sites
• Mobile sites very stripped down
• Tiny screens
• Typing URLs on numeric keypad
• Difficult to use wheel/joystick
= geeks/masochists only
A quick history lesson

Recommended for you

Edição especial Belém do Pará - Patrícia Brito
Edição especial Belém do Pará - Patrícia BritoEdição especial Belém do Pará - Patrícia Brito
Edição especial Belém do Pará - Patrícia Brito

O documento fornece informações sobre como se preparar para uma viagem de avião, incluindo dormir bem antes da partida, comer refeições leves, levar medicamentos na bagagem de mão e usar roupas confortáveis. Também discute riscos para mergulhadores e passageiros com problemas médicos, além de fornecer procedimentos para passageiros com mobilidade reduzida.

Um plano sustentável para Algodoal - Moisés Sarraf
Um plano sustentável para Algodoal - Moisés SarrafUm plano sustentável para Algodoal - Moisés Sarraf
Um plano sustentável para Algodoal - Moisés Sarraf
Viva o Pará - Carolina Cotta
Viva o Pará - Carolina CottaViva o Pará - Carolina Cotta
Viva o Pará - Carolina Cotta
Responding to the challenge of the mobile web (2012)
Responding to the challenge of the mobile web (2012)
Responding to the challenge of the mobile web (2012)
Responding to the challenge of the mobile web (2012)

Recommended for you

католог итог
католог итогкатолог итог
католог итог
Business cards
Business cardsBusiness cards
Business cards

Three business cards. The third business card is a double sided bsuniness cards with an image on the back with a image of the designer

businesscards
SDL Tridion at the RSPB (2010)
SDL Tridion at the RSPB (2010)SDL Tridion at the RSPB (2010)
SDL Tridion at the RSPB (2010)

SDL Tridion is a Windows-based content management system used by the RSPB since 2002. It allows for complex websites through features like content modeling with schemas, reusable content components, templates for layouts, workflow approval, and dynamic linking updated during publishing. Content is managed centrally and deployed to websites through a queue system and deployer software. Personalization and blueprinting help manage different audiences and translations.

Responding to the challenge of the mobile web (2012)
29 June 2007...iPhone arrives
• Very slow connection speed
• Extortionate data plans
• Hardly any compatible sites
• Mobile sites very stripped down
• Tiny screens
• Typing URLs on numeric keypad
• Difficult to use wheel/joystick
A quick history lesson
29 June 2007...iPhone arrives
• Very slow connection speed
• Extortionate data plans
• Hardly any compatible sites
• Mobile sites very stripped down
• Tiny screens
• Typing URLs on numeric keypad
• Difficult to use wheel/joystick
A quick history lesson
29 June 2007...iPhone arrives
• Very slow connection speed
• Extortionate data plans
• Hardly any compatible sites
• Mobile sites very stripped down
• Tiny screens
• Typing URLs on numeric keypad
• Difficult to use wheel/joystick
+ Apple marketing
+ widespread PR coverage
A quick history lesson

Recommended for you

Tridion Content Broker - how and why we are using it at the RSPB (2007)
Tridion Content Broker - how and why we are using it at the RSPB (2007)Tridion Content Broker - how and why we are using it at the RSPB (2007)
Tridion Content Broker - how and why we are using it at the RSPB (2007)

This document discusses the RSPB's use of Content Broker to dynamically assemble content from Tridion components. Some key benefits are faster publishing, less page maintenance, and more flexible authoring workflows. Initial issues included slow performance, limited sorting capabilities, and lack of documentation. Lessons learned include the need for load testing and caching. Future plans are to address performance and expand use of Content Broker to more content types.

Apresentação1
Apresentação1Apresentação1
Apresentação1
A pare designrational
A pare designrationalA pare designrational
A pare designrational

This is the design ration for the Crayola website which includes all items used for the design process

= overnight sensation
Fast forward to today
It’s not all Apple
Fast forward to today
Figures from statcounter.com for August 2011
Many screen sizes
Even the Kindle
has a browser
Fast forward to today

Recommended for you

Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancement

Presented at Cardiff's monthly dev meetup, Unified.diff, on 5 June 2013. Learn what progressive enhancement is and how it can help your content authors do amazing things automagically.

progressive enhancement javascript css
Optimising the RSPB website (2011)
Optimising the RSPB website (2011)Optimising the RSPB website (2011)
Optimising the RSPB website (2011)

Talk given to development teams at the RSPB on the importance of client-side performance optimisation.

Presentacion power point tipos de paisaje
Presentacion power point tipos de paisajePresentacion power point tipos de paisaje
Presentacion power point tipos de paisaje

Este documento describe diferentes tipos de paisajes como los paisajes transformados, montañosos y templados. También describe los seis continentes principales de la Tierra y características de cada uno. Explica que Asia es el continente más grande y poblado, mientras que Antártida es el más grande cubierto de hielo. Finalmente, discute los océanos, la vida marina, y los recursos que obtenemos del mar.

89% of smartphone owners use their
mobile device at home
Nielsen/Yahoo
http://advertising.yahoo.com/industry-knowledge/mobile-shopping-insight.html
Variable connection speed
Fast forward to today
Variable connection speed
Mobile devices
have overtaken
laptops for Wi-Fi
hotspot usage
GigaOM
http://gigaom.com/2011/06/21/mobile-devices-overtake-computers-on-wi-fi-networks/
0.00%
10.00%
20.00%
30.00%
40.00%
50.00%
60.00%
70.00%
80.00%
90.00%
100.00%
2010 2011
Fast forward to today
Portable, but not always moving
86% use their mobile device while at
home watching the TV
Nielsen/Yahoo
http://advertising.yahoo.com/industry-knowledge/mobile-shopping-insight.html
Fast forward to today
But most importantly...

Recommended for you

Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014

For many web developers whose jobs don't allow them to play with all the newest technologies, something like responsive design can be just out of reach. As more users are surfing exclusively on mobile devices, these are skills every web developer, designer, and manager needs to develop. We'll walk through the background, assorted techniques, how to measure success, and where it's all going. This is not a coding session, but a planning and strategy session.

rwdprintcss
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website

This document provides guidance on creating a mobile version of a website. It discusses considerations for mobile design including speed, dimensions, behavior, and designing. It emphasizes the importance of speed for mobile and provides tips for fluid layouts, CSS media queries, touch interfaces, short pages, and mobile development tools.

css3mobile version
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)

Covers the following contents. Objective of this seminar Backgrounds Issues Google’s Issue Web site Owner’s Issue Mobile SEO Measures

mobile seoseoweb marketing
People expect mobile support
Nearly half of mobile web users are
unlikely to return to a website that they
had trouble accessing from their phone,
and 57% are unlikely to recommend the
site
Compuware, New Study Reveals the Mobile Web Disappoints Global Consumers
http://investor.compuware.com/releasedetail.cfm?ReleaseID=592528
Fast forward to today
People expect mobile support
34% visit a site on their PC and then
follow up on mobile
Nielsen/Yahoo
http://advertising.yahoo.com/industry-knowledge/mobile-shopping-insight.html
Fast forward to today
People expect mobile support
70% of smartphone owners choose to
find information via the browser instead
of apps
Orange
http://www.unanimis.co.uk/orange-mobile-exposure-2010/
Fast forward to today
And they’re active users
People that use Facebook on their
mobile devices are twice as active on
Facebook than non-mobile users.
http://www.facebook.com/press/info.php?statistics
Fast forward to today

Recommended for you

Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices

The document discusses key considerations for designing websites and apps for mobile devices. It outlines two main approaches: mobile websites and mobile apps. It then covers challenges like varying screen sizes, performance issues, and limited resources. UI principles are presented to optimize the mobile experience. Tactics like simplifying designs, minimizing images, and optimizing navigation are recommended. The document concludes with additional best practices and resources for mobile development.

mobile development tips principles
Digital Marketing in a Mobile First World
Digital Marketing in a Mobile First World Digital Marketing in a Mobile First World
Digital Marketing in a Mobile First World

Digital Marketing in a Mobile First World. This isn't just Google's world, this is the environment that every SEO, site owner or webmaster needs to be focused on. Everything is moving to Mobile First

seomobile marketingmobile
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...

This document discusses how some mobile marketing pioneers are successfully winning over customers. It outlines the agenda for a presentation which will cover setting the scene on mobile marketing, the three principles of mobile web development around performance, interaction and enhancement, the publisher perspective on mobile monetization, reaching audiences through mobile, and wrapping up. The presentation will feature speakers from leading mobile development companies.

a4uexpo london 2012
Mobile web design today
• Don’t assume bandwidth
Fast forward to today
Mobile web design today
• Don’t assume bandwidth
• Don’t assume user intent
Fast forward to today
Mobile web design today
• Don’t assume bandwidth
• Don’t assume user intent
• Don’t design for specific screen sizes
Fast forward to today
Mobile web design today
• Don’t assume bandwidth
• Don’t assume user intent
• Don’t design for specific screen sizes
• Do provide large touch targets
Fast forward to today

Recommended for you

Why Are Mobile Websites Important?
Why Are Mobile Websites Important?Why Are Mobile Websites Important?
Why Are Mobile Websites Important?

This document discusses preparing websites for mobile users. It begins by noting how consumers are constantly connected across different devices. It then discusses Google's focus on improving the mobile user experience through algorithm updates that favor mobile-friendly sites. The document outlines various design options for making sites mobile-friendly, including responsive design and separate mobile sites. It emphasizes testing sites on mobile using Google's tools and recommendations. A case study shows how one company improved mobile traffic, sales, and future-proofed their site using a responsive design approach. The document concludes by offering examples of well-designed mobile websites.

mobile usabilitymobile
Conversion Conference - Schuh's journey to RWD
Conversion Conference - Schuh's journey to RWDConversion Conference - Schuh's journey to RWD
Conversion Conference - Schuh's journey to RWD

Presentation I did at Conversion Conference London 2013, discussing schuh's move from desktop, mobile & tablet optimised sites to one single responsive site

conversion rateresponsive web designe-commerce
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing

This document discusses responsive design for ecommerce websites. It begins with introducing several speakers who are experts on responsive design and ecommerce. It then discusses the benefits of responsive design over separate mobile sites or apps, including lower maintenance costs and SEO benefits. The document outlines a case study of implementing responsive design for Peter Millar's ecommerce site, which led to increased mobile visits, average order value, conversion rate, and overall site visits. Finally, it discusses best practices for responsive design, including analyzing user behaviors across devices and budgeting based on business goals and needs assessments.

imagine2013magento
Mobile web design today
• Don’t assume bandwidth
• Don’t assume user intent
• Don’t design for specific screen sizes
• Do provide large touch targets
• Do take advantage of new capabilities
Fast forward to today
Mobile web design today
• Don’t assume bandwidth
• Don’t assume user intent
• Don’t design for specific screen sizes
• Do provide large touch targets
• Do take advantage of new capabilities
• Don’t use Flash (or other plugins)
Fast forward to today
What about our site?
The 1% rule
The Big Garden Birdwatch survey form
(and by implication, the rest of the website)
should support any browser that
exceeds 1% of traffic to our website
What about our site?

Recommended for you

Modern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive DesignModern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive Design

You've probably already heard of the term Responsive Design. Currently it's one of the hot topics being discussed in the digital space and something many businesses are trying to get their heads around. So what exactly is Responsive Design? And why does it matter?

valtechresponsive designmodern design
Mobile Optimization that Actually Works
Mobile Optimization that Actually WorksMobile Optimization that Actually Works
Mobile Optimization that Actually Works

KYLE DUFORD, ECOMMERCE DIRECTOR, CHROME INDUSTRIES PETER MCLACHLAN, FOUNDER AND CPO, MOBIFY SEAN OLIVER, HEAD OF PRODUCT MARKETING, OPTIMIZELY Did you know that U.S. smartphone users check their devices more than 150 times per day? That's once every 6.5 minutes. Consumers are spending more time on their smartphones now than they ever have before. As a result, delivering delightful experiences that span web and mobile has never been more important. Peter McLachlan, Co-Founder and Chief Product Officer at Mobify, and Kyle Duford, eCommerce Director at Chrome Industries, explain in practical terms how to build a unified web and mobile optimization strategy. Learn how to set up a team to manage a cross-device optimization plan, and hear their best practices on how to make the most of mobile.

conversion rateoptimizationmobile
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How

This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.

ryan doddciddsiteworx
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Jan 2008 Jan 2009 Jan 2010 Jan 2011 Jan 2012
Graph shows combined iPhone, iPad, iPod Touch, Android, Blackberry and Nokia traffic to the RSPB website
RSPB website
% of
all traffic
What about our site?
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Jan 2008 Jan 2009 Jan 2010 Jan 2011 Jan 2012
Graph shows combined iPhone, iPad, iPod Touch, Android, Blackberry and Nokia traffic to the RSPB website
RSPB website
% of
all traffic
What about our site?
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Jan 2008 Jan 2009 Jan 2010 Jan 2011 Dec 2011
Graph shows combined iPhone, iPad, iPod Touch, Android, Blackberry and Nokia traffic to the RSPB website
RSPB website
% of
all traffic
What about our site?
What’s popular on mobile?
• 11% of Bird identifier traffic
• 11% of Bird guide traffic
• 9% of Community traffic
• 9% of Feed the Birds day traffic
• 6.5% of Join traffic
• 6% of Reserves traffic (8.5% on find page)
• 0.3% of landing page traffic (2,500 people)
What about our site?
Figures from October 2011

Recommended for you

Who's winning the mobile web?
Who's winning the mobile web?Who's winning the mobile web?
Who's winning the mobile web?

This presentation from the Online Information 2013 conference in London, uses the medium of Lolcat to present an overview of the various adaptation methods mobile websites use. Brand head-to-head comparisons include EasyJet vs Ryanair, and Apple vs Microsoft, and four way competitions in the news, charity, and retail sectors. The presentation makes a data-driven case that pure Responsive Design, while marketed as a silver bullet and undeniably attractive enough as a development method to get its own textbooks, slows sites down and results in a poor user experience. It also presents evidence that detection of a user's hardware type presents useful actionable intelligence about the user before a byte is served.

adaptive web designlolcatdetectright
Webinar: Web Design Trends
Webinar: Web Design TrendsWebinar: Web Design Trends
Webinar: Web Design Trends

The rise of mobile devices and other prevailing trends have had a profound impact on the way we design digital experiences. We will examine web design patterns that were more commonplace just a few years ago, and discuss the current (and future) thinking on creating impactful websites.

beaconfirewebinardesgin
SEO - What is it?
SEO - What is it?SEO - What is it?
SEO - What is it?

Woj takes you on a journey to demystify the art and science of Search Engine Optimisation. Explore the true facts about SEO, the history of Google and other search engines and what the current landscape looks like. Arm yourself with valuable tips on production & writing for search engines as well as Woj’s indispensable do-and-don’t best practice guide so you can leave the session ready to take action!

seoseo serviceslocal seo
Looking forwards
To provide the complete RSPB website
to the widest range of mobile devices with
little or no additional maintenance effort
What is our ambition?
Looking forwards
Help us achieve it
Looking forwards
• Bring mobile into the web strategy
• Support standardisation of the website
• Give us time to redesign the site
• Give us devices to test on
• A mobile-friendly site
Looking forwards
What are the benefits?

Recommended for you

Mobile first - one key important aspect in digitalisation
Mobile first - one key important aspect in digitalisationMobile first - one key important aspect in digitalisation
Mobile first - one key important aspect in digitalisation

Presentation slides I presented during Asian Banking and Finance - Retail Banking Forum on 16 May 2017 at Hilton Hotel Kuala Lumpur Malaysia.

mobile-firstandroidmobile apps
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013

This document discusses responsive web design (RWD). RWD allows websites to automatically adjust their layout depending on the user's screen size using media queries. It is important for accessibility and usability as most internet users now access the web on mobile devices. The document recommends using a mobile-first and progressive enhancement approach where basic content and functionality work on all browsers and advanced features are progressively added. It provides examples of RWD techniques and tools to test responsive designs.

drupalresponsive web designsandcamp
Schuh Responsive Website
Schuh Responsive WebsiteSchuh Responsive Website
Schuh Responsive Website

Slides from a presentation I made at Internet Retailing Expo 2015, about the schuh responsive website, 6 months since the launch.

responsive web designuxirx15
• A mobile-friendly site
• Better user experience
Looking forwards
What are the benefits?
• A mobile-friendly site
• Better user experience
• Better search rankings
Looking forwards
What are the benefits?
• A mobile-friendly site
• Better user experience
• Better search rankings
• Web Team more agile
Looking forwards
What are the benefits?
• A mobile-friendly site
• Better user experience
• Better search rankings
• Web Team more agile
• Increased robustness across desktop browsers as
well as mobile
Looking forwards
What are the benefits?

Recommended for you

Mobile Marketing
Mobile MarketingMobile Marketing
Mobile Marketing

The document discusses the importance of mobile optimization for websites. It notes that the mobile web is becoming the primary means of global communication and that mobile-optimized sites are specially designed for mobile browsing. Poor mobile performance can deter business, while optimizing for mobile increases business. It emphasizes that mobile traffic is growing exponentially and will soon surpass desktop. The document advocates for complete customization, flawless functionality, and flexibility in mobile site design to provide the best customer experience and keep up with changing markets.

mobilemobile phonemobile marketing
Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?

Full text: http://bit.do/optimizedwebtv The purpose of this study is to evaluate the adaptation of some of the world’s most popular websites to the “post-pc era” of using multiple devices for accessing the web. Up till recently the PC used to be the only device used for accessing the WWW. This has changed dramatically over the past few years with the introduction of many powerful Internet-connected devices such as Smart Phones, Tablets and Smart TVs. Due to the many differences between these devices in terms of screen size, hardware power, input methods etc. in most cases a PC-optimized website is not optimally viewed in these devices, resulting in poor usability and User Experience. In this survey 49 of the world’s most visited websites, according to Alexa.com, are being examined to see if they offer optimized versions for Internet-connected mobile devices and Smart TVs. Results show wide support for mobile devices in contrast to very limited support for Smart TVs.

responsive web designweb designux
• A mobile-friendly site
• Better user experience
• Better search rankings
• Web Team more agile
• Increased robustness across desktop browsers as
well as mobile
• Continuous improvement across the site
Looking forwards
What are the benefits?
Including mobile in the strategy
Looking forwards
We need to recognise that mobile is here to
stay and ensure that the needs of the mobile
audience are part and parcel of our web
strategy
Standardising the site
Looking forwards
• Identify gaps in functionality
• Create a toolkit of reusable modular elements
• Tested on desktop and mobile
• Consistent behaviour across site
• Less code to maintain
• Quicker to build new sections
• Quicker to roll out updates
• No page left behind
Perceived downsides
of standardisation
Looking forwards
• Templates are seen as restrictive, limiting, dull
• Limited scope to reproduce print materials is
seen as a bad thing
• There is a desire from customers to make their
mark (“I want my thing to be different from
everything else”)
• Novelty is seen as inherently good (“change for
change’s sake”)
• Personal opinions are given too much weight

Recommended for you

A brief interlude
Don’t fear the template
A brief interlude
• Templates can still be
beautiful & flexible
• We have one website, not
many
• Consistency is very
important
• If we weren’t doing bespoke
work all the time, we could
improve the core template
for everyone
Who else uses templates?
A brief interlude
BBC Online is heavily templated and strictly
controlled by visual guidelines
Responding to the challenge of the mobile web (2012)

Recommended for you

Responding to the challenge of the mobile web (2012)
Responding to the challenge of the mobile web (2012)
Responding to the challenge of the mobile web (2012)
Responding to the challenge of the mobile web (2012)

Recommended for you

Responding to the challenge of the mobile web (2012)
Responding to the challenge of the mobile web (2012)
Let’s compare web budgets
A brief interlude
0
10,000,000
20,000,000
30,000,000
40,000,000
50,000,000
60,000,000
70,000,000
80,000,000
90,000,000
100,000,000
BBC RSPB
Optimistic
Let’s compare web budgets
A brief interlude
0
10,000,000
20,000,000
30,000,000
40,000,000
50,000,000
60,000,000
70,000,000
80,000,000
90,000,000
100,000,000
BBC RSPB
Using templates well Trying not to

Recommended for you

Back to the point...
Standardisation is good
Looking forwards
• Consistency is a “first principle” of interaction
design – it breeds familiarity, confidence and
trust
• Feels professional and thought through
• User is more able to focus on task at hand
• Website is faster
• Reduced time to build and to maintain
• New functionality is created once and can be
used anywhere
Redesign
Looking forwards
• A new site that adapts to the device being used,
providing optimum design & usability for all
• Future-proof
• Best practice
• Optimised for poor connection speeds
• Consistent user experience
Redesign
Looking forwards
• A new site that adapts to the device being used,
providing optimum design & usability for all
• Future-proof Future-friendly
• Best practice
• Optimised for poor connection speeds
• Consistent user experience

Recommended for you

Testing
Looking forwards
• Wi-Fi in the Web Team area
• Access to internal test servers and internet
• 1 x iPad 2
• 1 x iPhone 4
• 1 x Android phone
• 1 x Blackberry 6 phone
• 1 x Blackberry 5 phone
Thank you
Remember...not every mobile device will have an
RSPB app on it but every mobile device can access
the RSPB website

More Related Content

Viewers also liked

Competitive review
Competitive reviewCompetitive review
Competitive review
Amanda Pare
 
Belém do presente - Bernardo Biagioni
Belém do presente - Bernardo BiagioniBelém do presente - Bernardo Biagioni
Belém do presente - Bernardo Biagioni
Paratur
 
Amanda pare week1
Amanda pare week1Amanda pare week1
Amanda pare week1
Amanda Pare
 
Lee hammond
Lee hammondLee hammond
Lee hammond
105904
 
Webpages
WebpagesWebpages
Webpages
Amanda Pare
 
A pare redo3
A pare redo3A pare redo3
A pare redo3
Amanda Pare
 
Edição especial Belém do Pará - Patrícia Brito
Edição especial Belém do Pará - Patrícia BritoEdição especial Belém do Pará - Patrícia Brito
Edição especial Belém do Pará - Patrícia Brito
Paratur
 
Um plano sustentável para Algodoal - Moisés Sarraf
Um plano sustentável para Algodoal - Moisés SarrafUm plano sustentável para Algodoal - Moisés Sarraf
Um plano sustentável para Algodoal - Moisés Sarraf
Paratur
 
Viva o Pará - Carolina Cotta
Viva o Pará - Carolina CottaViva o Pará - Carolina Cotta
Viva o Pará - Carolina Cotta
Paratur
 
католог итог
католог итогкатолог итог
католог итог
Vadim Semenov
 
Business cards
Business cardsBusiness cards
Business cards
Amanda Pare
 
SDL Tridion at the RSPB (2010)
SDL Tridion at the RSPB (2010)SDL Tridion at the RSPB (2010)
SDL Tridion at the RSPB (2010)
Graham Bird
 
Tridion Content Broker - how and why we are using it at the RSPB (2007)
Tridion Content Broker - how and why we are using it at the RSPB (2007)Tridion Content Broker - how and why we are using it at the RSPB (2007)
Tridion Content Broker - how and why we are using it at the RSPB (2007)
Graham Bird
 
A pare designrational
A pare designrationalA pare designrational
A pare designrational
Amanda Pare
 
Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancement
Graham Bird
 
Optimising the RSPB website (2011)
Optimising the RSPB website (2011)Optimising the RSPB website (2011)
Optimising the RSPB website (2011)
Graham Bird
 
Presentacion power point tipos de paisaje
Presentacion power point tipos de paisajePresentacion power point tipos de paisaje
Presentacion power point tipos de paisaje
Tatis Ramirez
 

Viewers also liked (18)

Competitive review
Competitive reviewCompetitive review
Competitive review
 
Belém do presente - Bernardo Biagioni
Belém do presente - Bernardo BiagioniBelém do presente - Bernardo Biagioni
Belém do presente - Bernardo Biagioni
 
Amanda pare week1
Amanda pare week1Amanda pare week1
Amanda pare week1
 
Lee hammond
Lee hammondLee hammond
Lee hammond
 
Webpages
WebpagesWebpages
Webpages
 
A pare redo3
A pare redo3A pare redo3
A pare redo3
 
Edição especial Belém do Pará - Patrícia Brito
Edição especial Belém do Pará - Patrícia BritoEdição especial Belém do Pará - Patrícia Brito
Edição especial Belém do Pará - Patrícia Brito
 
Um plano sustentável para Algodoal - Moisés Sarraf
Um plano sustentável para Algodoal - Moisés SarrafUm plano sustentável para Algodoal - Moisés Sarraf
Um plano sustentável para Algodoal - Moisés Sarraf
 
Viva o Pará - Carolina Cotta
Viva o Pará - Carolina CottaViva o Pará - Carolina Cotta
Viva o Pará - Carolina Cotta
 
католог итог
католог итогкатолог итог
католог итог
 
Business cards
Business cardsBusiness cards
Business cards
 
SDL Tridion at the RSPB (2010)
SDL Tridion at the RSPB (2010)SDL Tridion at the RSPB (2010)
SDL Tridion at the RSPB (2010)
 
Tridion Content Broker - how and why we are using it at the RSPB (2007)
Tridion Content Broker - how and why we are using it at the RSPB (2007)Tridion Content Broker - how and why we are using it at the RSPB (2007)
Tridion Content Broker - how and why we are using it at the RSPB (2007)
 
Apresentação1
Apresentação1Apresentação1
Apresentação1
 
A pare designrational
A pare designrationalA pare designrational
A pare designrational
 
Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancement
 
Optimising the RSPB website (2011)
Optimising the RSPB website (2011)Optimising the RSPB website (2011)
Optimising the RSPB website (2011)
 
Presentacion power point tipos de paisaje
Presentacion power point tipos de paisajePresentacion power point tipos de paisaje
Presentacion power point tipos de paisaje
 

Similar to Responding to the challenge of the mobile web (2012)

Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014
Adrian Roselli
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
Mahmoud Farrag
 
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)
ssuserd60633
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices
Fahd Alhazmi
 
Digital Marketing in a Mobile First World
Digital Marketing in a Mobile First World Digital Marketing in a Mobile First World
Digital Marketing in a Mobile First World
MarketingNomads.com
 
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
auexpo Conference
 
Why Are Mobile Websites Important?
Why Are Mobile Websites Important?Why Are Mobile Websites Important?
Why Are Mobile Websites Important?
Generate UK
 
Conversion Conference - Schuh's journey to RWD
Conversion Conference - Schuh's journey to RWDConversion Conference - Schuh's journey to RWD
Conversion Conference - Schuh's journey to RWD
Stuart McMillan
 
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Atwix
 
Modern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive DesignModern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive Design
Valtech UK
 
Mobile Optimization that Actually Works
Mobile Optimization that Actually WorksMobile Optimization that Actually Works
Mobile Optimization that Actually Works
Optimizely
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
Judi Wunderlich
 
Who's winning the mobile web?
Who's winning the mobile web?Who's winning the mobile web?
Who's winning the mobile web?
DetectRight Limited
 
Webinar: Web Design Trends
Webinar: Web Design TrendsWebinar: Web Design Trends
Webinar: Web Design Trends
Stephen MacKley
 
SEO - What is it?
SEO - What is it?SEO - What is it?
SEO - What is it?
Woj Kwasi
 
Mobile first - one key important aspect in digitalisation
Mobile first - one key important aspect in digitalisationMobile first - one key important aspect in digitalisation
Mobile first - one key important aspect in digitalisation
Helmi Hasan
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
Achieve Internet
 
Schuh Responsive Website
Schuh Responsive WebsiteSchuh Responsive Website
Schuh Responsive Website
Stuart McMillan
 
Mobile Marketing
Mobile MarketingMobile Marketing
Mobile Marketing
gemini5designs
 
Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?
Manos Perakakis
 

Similar to Responding to the challenge of the mobile web (2012) (20)

Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
 
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices
 
Digital Marketing in a Mobile First World
Digital Marketing in a Mobile First World Digital Marketing in a Mobile First World
Digital Marketing in a Mobile First World
 
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Why Are Mobile Websites Important?
Why Are Mobile Websites Important?Why Are Mobile Websites Important?
Why Are Mobile Websites Important?
 
Conversion Conference - Schuh's journey to RWD
Conversion Conference - Schuh's journey to RWDConversion Conference - Schuh's journey to RWD
Conversion Conference - Schuh's journey to RWD
 
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
 
Modern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive DesignModern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive Design
 
Mobile Optimization that Actually Works
Mobile Optimization that Actually WorksMobile Optimization that Actually Works
Mobile Optimization that Actually Works
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
 
Who's winning the mobile web?
Who's winning the mobile web?Who's winning the mobile web?
Who's winning the mobile web?
 
Webinar: Web Design Trends
Webinar: Web Design TrendsWebinar: Web Design Trends
Webinar: Web Design Trends
 
SEO - What is it?
SEO - What is it?SEO - What is it?
SEO - What is it?
 
Mobile first - one key important aspect in digitalisation
Mobile first - one key important aspect in digitalisationMobile first - one key important aspect in digitalisation
Mobile first - one key important aspect in digitalisation
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Schuh Responsive Website
Schuh Responsive WebsiteSchuh Responsive Website
Schuh Responsive Website
 
Mobile Marketing
Mobile MarketingMobile Marketing
Mobile Marketing
 
Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?
 

Responding to the challenge of the mobile web (2012)

  • 1. Responding to the challenge of the mobile web Graham Bird
  • 2. Contents • Before we start • A quick history lesson • Fast forward to today • What about our site? • Looking forwards
  • 4. Why mobile? Engagement through mobile is one of the guiding principles defined in Operation Partridge (Online Capabilities) Before we start
  • 5. By 2013 mobile phones will overtake PCs as the most common web access device worldwide Gartner, Key Predictions for IT Organizations and Users in 2010 and Beyond http://www.gartner.com/it/page.jsp?id=1278413 Before we start Why now?
  • 7. The mobile cliché • Poor connection speed • Tiny audience • Lots of distractions • Tiny screen size • Requires dedicated mobile site • On the go (short attention span) • One handed interaction • Tedious to type on numeric keypads Photo by Oimax A quick history lesson
  • 8. The cliché applied in 1999... • Very slow connection speed • Extortionate data plans • Hardly any compatible sites • Mobile sites very stripped down • Tiny screens • Typing URLs on numeric keypad • Difficult to use wheel/joystick = geeks/masochists only A quick history lesson
  • 14. 29 June 2007...iPhone arrives • Very slow connection speed • Extortionate data plans • Hardly any compatible sites • Mobile sites very stripped down • Tiny screens • Typing URLs on numeric keypad • Difficult to use wheel/joystick A quick history lesson
  • 15. 29 June 2007...iPhone arrives • Very slow connection speed • Extortionate data plans • Hardly any compatible sites • Mobile sites very stripped down • Tiny screens • Typing URLs on numeric keypad • Difficult to use wheel/joystick A quick history lesson
  • 16. 29 June 2007...iPhone arrives • Very slow connection speed • Extortionate data plans • Hardly any compatible sites • Mobile sites very stripped down • Tiny screens • Typing URLs on numeric keypad • Difficult to use wheel/joystick + Apple marketing + widespread PR coverage A quick history lesson
  • 19. It’s not all Apple Fast forward to today Figures from statcounter.com for August 2011
  • 20. Many screen sizes Even the Kindle has a browser Fast forward to today
  • 21. 89% of smartphone owners use their mobile device at home Nielsen/Yahoo http://advertising.yahoo.com/industry-knowledge/mobile-shopping-insight.html Variable connection speed Fast forward to today
  • 22. Variable connection speed Mobile devices have overtaken laptops for Wi-Fi hotspot usage GigaOM http://gigaom.com/2011/06/21/mobile-devices-overtake-computers-on-wi-fi-networks/ 0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00% 70.00% 80.00% 90.00% 100.00% 2010 2011 Fast forward to today
  • 23. Portable, but not always moving 86% use their mobile device while at home watching the TV Nielsen/Yahoo http://advertising.yahoo.com/industry-knowledge/mobile-shopping-insight.html Fast forward to today
  • 25. People expect mobile support Nearly half of mobile web users are unlikely to return to a website that they had trouble accessing from their phone, and 57% are unlikely to recommend the site Compuware, New Study Reveals the Mobile Web Disappoints Global Consumers http://investor.compuware.com/releasedetail.cfm?ReleaseID=592528 Fast forward to today
  • 26. People expect mobile support 34% visit a site on their PC and then follow up on mobile Nielsen/Yahoo http://advertising.yahoo.com/industry-knowledge/mobile-shopping-insight.html Fast forward to today
  • 27. People expect mobile support 70% of smartphone owners choose to find information via the browser instead of apps Orange http://www.unanimis.co.uk/orange-mobile-exposure-2010/ Fast forward to today
  • 28. And they’re active users People that use Facebook on their mobile devices are twice as active on Facebook than non-mobile users. http://www.facebook.com/press/info.php?statistics Fast forward to today
  • 29. Mobile web design today • Don’t assume bandwidth Fast forward to today
  • 30. Mobile web design today • Don’t assume bandwidth • Don’t assume user intent Fast forward to today
  • 31. Mobile web design today • Don’t assume bandwidth • Don’t assume user intent • Don’t design for specific screen sizes Fast forward to today
  • 32. Mobile web design today • Don’t assume bandwidth • Don’t assume user intent • Don’t design for specific screen sizes • Do provide large touch targets Fast forward to today
  • 33. Mobile web design today • Don’t assume bandwidth • Don’t assume user intent • Don’t design for specific screen sizes • Do provide large touch targets • Do take advantage of new capabilities Fast forward to today
  • 34. Mobile web design today • Don’t assume bandwidth • Don’t assume user intent • Don’t design for specific screen sizes • Do provide large touch targets • Do take advantage of new capabilities • Don’t use Flash (or other plugins) Fast forward to today
  • 35. What about our site?
  • 36. The 1% rule The Big Garden Birdwatch survey form (and by implication, the rest of the website) should support any browser that exceeds 1% of traffic to our website What about our site?
  • 37. 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Jan 2008 Jan 2009 Jan 2010 Jan 2011 Jan 2012 Graph shows combined iPhone, iPad, iPod Touch, Android, Blackberry and Nokia traffic to the RSPB website RSPB website % of all traffic What about our site?
  • 38. 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Jan 2008 Jan 2009 Jan 2010 Jan 2011 Jan 2012 Graph shows combined iPhone, iPad, iPod Touch, Android, Blackberry and Nokia traffic to the RSPB website RSPB website % of all traffic What about our site?
  • 39. 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Jan 2008 Jan 2009 Jan 2010 Jan 2011 Dec 2011 Graph shows combined iPhone, iPad, iPod Touch, Android, Blackberry and Nokia traffic to the RSPB website RSPB website % of all traffic What about our site?
  • 40. What’s popular on mobile? • 11% of Bird identifier traffic • 11% of Bird guide traffic • 9% of Community traffic • 9% of Feed the Birds day traffic • 6.5% of Join traffic • 6% of Reserves traffic (8.5% on find page) • 0.3% of landing page traffic (2,500 people) What about our site? Figures from October 2011
  • 42. To provide the complete RSPB website to the widest range of mobile devices with little or no additional maintenance effort What is our ambition? Looking forwards
  • 43. Help us achieve it Looking forwards • Bring mobile into the web strategy • Support standardisation of the website • Give us time to redesign the site • Give us devices to test on
  • 44. • A mobile-friendly site Looking forwards What are the benefits?
  • 45. • A mobile-friendly site • Better user experience Looking forwards What are the benefits?
  • 46. • A mobile-friendly site • Better user experience • Better search rankings Looking forwards What are the benefits?
  • 47. • A mobile-friendly site • Better user experience • Better search rankings • Web Team more agile Looking forwards What are the benefits?
  • 48. • A mobile-friendly site • Better user experience • Better search rankings • Web Team more agile • Increased robustness across desktop browsers as well as mobile Looking forwards What are the benefits?
  • 49. • A mobile-friendly site • Better user experience • Better search rankings • Web Team more agile • Increased robustness across desktop browsers as well as mobile • Continuous improvement across the site Looking forwards What are the benefits?
  • 50. Including mobile in the strategy Looking forwards We need to recognise that mobile is here to stay and ensure that the needs of the mobile audience are part and parcel of our web strategy
  • 51. Standardising the site Looking forwards • Identify gaps in functionality • Create a toolkit of reusable modular elements • Tested on desktop and mobile • Consistent behaviour across site • Less code to maintain • Quicker to build new sections • Quicker to roll out updates • No page left behind
  • 52. Perceived downsides of standardisation Looking forwards • Templates are seen as restrictive, limiting, dull • Limited scope to reproduce print materials is seen as a bad thing • There is a desire from customers to make their mark (“I want my thing to be different from everything else”) • Novelty is seen as inherently good (“change for change’s sake”) • Personal opinions are given too much weight
  • 54. Don’t fear the template A brief interlude • Templates can still be beautiful & flexible • We have one website, not many • Consistency is very important • If we weren’t doing bespoke work all the time, we could improve the core template for everyone
  • 55. Who else uses templates? A brief interlude BBC Online is heavily templated and strictly controlled by visual guidelines
  • 63. Let’s compare web budgets A brief interlude 0 10,000,000 20,000,000 30,000,000 40,000,000 50,000,000 60,000,000 70,000,000 80,000,000 90,000,000 100,000,000 BBC RSPB Optimistic
  • 64. Let’s compare web budgets A brief interlude 0 10,000,000 20,000,000 30,000,000 40,000,000 50,000,000 60,000,000 70,000,000 80,000,000 90,000,000 100,000,000 BBC RSPB Using templates well Trying not to
  • 65. Back to the point...
  • 66. Standardisation is good Looking forwards • Consistency is a “first principle” of interaction design – it breeds familiarity, confidence and trust • Feels professional and thought through • User is more able to focus on task at hand • Website is faster • Reduced time to build and to maintain • New functionality is created once and can be used anywhere
  • 67. Redesign Looking forwards • A new site that adapts to the device being used, providing optimum design & usability for all • Future-proof • Best practice • Optimised for poor connection speeds • Consistent user experience
  • 68. Redesign Looking forwards • A new site that adapts to the device being used, providing optimum design & usability for all • Future-proof Future-friendly • Best practice • Optimised for poor connection speeds • Consistent user experience
  • 69. Testing Looking forwards • Wi-Fi in the Web Team area • Access to internal test servers and internet • 1 x iPad 2 • 1 x iPhone 4 • 1 x Android phone • 1 x Blackberry 6 phone • 1 x Blackberry 5 phone
  • 70. Thank you Remember...not every mobile device will have an RSPB app on it but every mobile device can access the RSPB website