unlocking the mysteries of mobile browsing · • mobile optimisation •uses a different set of...
TRANSCRIPT
![Page 1: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/1.jpg)
Unlocking the Mysteries
of
Mobile Browsing The Who, The Why and The What
![Page 2: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/2.jpg)
Mobile Devices What do you
mean?
![Page 3: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/3.jpg)
• A small, handheld computing device, typically having a display
screen with touch input and/or a miniature keyboard and weighing
less than 2 pounds (Wikipedia)
Mobile Devices What do you
mean?
![Page 4: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/4.jpg)
• Use a native operating system (OS) to run configurable applications
• Most commonly use WiFi, 3G and 4G to connect to the web
• Smartphones & Tablets
Mobile Devices What do you
mean?
![Page 5: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/5.jpg)
Mobile Devices Who’s using
them?
![Page 6: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/6.jpg)
• 8.27 million mobile subscriptions in the UK
• 61% of these are contract subscriptions
• 91% adults own/use a mobile device
• Average person carries 2.9 devices
• 85% smartphones
• 29% e-readers
Mobile Devices Who’s using
them?
![Page 7: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/7.jpg)
• 42% of internet access in the UK is from smartphones
• 63% adults use mobile devices as main means of
accessing the web
• Places mobile devices are used:
• 90% home
• 39% public
• 28% work
• 15% other
Mobile Devices Who’s using
them?
![Page 8: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/8.jpg)
Mobile Devices Who’s using
them? • 47% of web traffic in the UK is from an Apple device
• 20% comes from a Samsung
• 39.45% mobile web traffic in the UK is from Chrome
• 32% of news site traffic
• 58% of retail site traffic
• 55% of social media traffic
![Page 9: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/9.jpg)
Mobile Devices Why are they
important?
![Page 10: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/10.jpg)
• Mobile browsing is more immediate
• Access to web anytime, anyplace
• Quick look up of information
• Improving hardware and faster connections
supporting the growth of mobile browsing
• Anticipated that mobile browsing will overtake
traditional browsing by mid 2014
Mobile Devices Why are they
important?
![Page 11: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/11.jpg)
• Your users will be happier if they can access your
site on-the-go
• You will reach a larger audience, especially those on
low incomes or with disabilities
• A mobile option fits into your audiences lifestyle
• Integration with native functionality
Mobile Devices Why are they
important?
![Page 12: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/12.jpg)
Mobile Browsing What are the
options?
![Page 13: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/13.jpg)
• Mobile style-sheet (“Responsive design”)
• Applies a new style-sheet (CSS) to your website,
depending on the pixel width of the browser window
• Mobile optimisation
• Uses a different set of HTML templates if you’re
viewing the website on a mobile phone’s browser
• App
• Recreates functionality from your website as a piece
of software, which users install directly onto their
phone
Mobile Browsing What are the
options?
![Page 14: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/14.jpg)
www.nhh.org.uk
• Advantages:
• Quick to create
• Easy to implement
• Cost effective
• Widely used
• Google’s preferred mobile
solution (single URL)
Mobile Browsing Responsive
Design
![Page 15: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/15.jpg)
• Disadvantages:
• Does not resize or strip out large files
• Requires a data connection in order to load and interact
Mobile Browsing Responsive
Design
![Page 16: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/16.jpg)
m.facebook.com
• Advantages:
• Ideal for activity-based
websites
• Faster loading times
• Stores offline activity
until next connected,
then uploads it
Mobile Browsing Mobile
Optimisation
![Page 17: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/17.jpg)
• Disadvantages:
• Effectively another website, doubling cost and effort to
implement
• Different URL – can affect SEO results
• Difficult to find content published at an earlier date
Mobile Browsing Mobile
Optimisation
![Page 18: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/18.jpg)
• Advantages:
• Ideal for interactions and
transactions
• Does not require the
user to be connected to
the web view/prepare
content
• Can provide an
additional source of
revenue
• Apps can store users’
details
Mobile Browsing App
![Page 19: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/19.jpg)
• Disadvantages:
• Longer development times
• Requires extra resource for supporting and updating different
versions
• Apps can store users’ details
Mobile Browsing App
![Page 20: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/20.jpg)
Mobile Browsing Accessibility
![Page 21: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/21.jpg)
• Presents similar challenges to the full web, such as:
• Links out of context
• Small and hard to read text
• Typing is slow, tedious, error-prone
• Lower bandwidth and software restrictions limit experience
• Rapid advancement and development of technologies leading to degradation
Nearly twelve million people in the UK
have a limiting illness, impairment or
disability.
Mobile Browsing Accessibility
![Page 22: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/22.jpg)
• Market share
• Who are your target audience?
• What devices are they using?
• Native accessibility functionality
• Mobile Web Best Practice Guidelines
• http://www.w3.org/TR/mobile-bp
• Shared accessibility principles
• Progressive enhancement
• Graceful degradation
• Responsive design
Mobile Browsing Accessibility
Almost two million
people in the UK are living
with sight loss. That's
approximately one
person in 30. More than
800,000 are
severely or
profoundly deaf.
![Page 23: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/23.jpg)
Live Examples
![Page 24: Unlocking the Mysteries of Mobile Browsing · • Mobile optimisation •Uses a different set of HTML templates if you’re viewing the website on a mobile phone’s browser • App](https://reader034.vdocument.in/reader034/viewer/2022050500/5f9349352f89377ecd0b11b2/html5/thumbnails/24.jpg)
Questions?