SlideShare a Scribd company logo
Are Websites Optimized for Mobile Devices
and Smart TVs?
Emmanouil Perakakis
mperakakis@staff.teicrete.gr
Brunel University & TEI of Crete
Uxbridge, London, UK
Gheorghita Ghinea
george.ghinea@brunel.ac.uk
Brunel University
Uxbridge, London, UK
Evanthia Thanou
evathanou@gmail.com
TEI of Crete
Ierapetra, Crete, Greece
MOBILE DEVICESDESKTOP/LAPTOP
Introduction
We lived and still live in a world of Objects
We will live in a world of Connected “Things”
We now also live in a world of Devices
Introduction
Internet of Things Web of Things
“Things” being part of the WWW
Communicating using standard web
technologies through Web Interfaces
Web on non-PC devices
The Web started as a desktop native
For many years, the only way to access the WWW was through a Desktop/Laptop PC.
Then it was “opened” to Mobile Phones and later to Tablet devices
Web on non-PC devices
Recently, the Web is making it’s way to even more devices.
So you can, or possibly will in the near future, browse the web from:
Web on non-PC devices
• But browsing the web on other devices is not an automatic thing.
• Every device has different properties, such as screen sizes, input
methods, network bandwidth etc. , and even users can be in
different states.
• So, for a website or a web application to be able to work optimally
on non-PC devices, we need to take into account the specific
devices properties.
• Failing to do that, will result in bad User Experience (UX) or even
complete incompatibility with the device.
Optimizing Content for Devices
Custom device-specific Websites
A different website from the Desktop will be developed from scratch, optimized for the specific device. It will
share the same content with the main website, often sharing the same database, but the presentation layer
will be different.
(+) Optimized for every device (+) Easier to Develop websites compared to RWD
(-) Develop new website for every device (-) Difficult to maintain (-) Questionable SEO
(-) Even for same kind of device may need more websites
Device Specific Apps
Apps were popularized with mobile phones. It is common practice to develop a native App for the device which
usually consumes the content of the website, sharing the same database, but using a totally different
presentation layer.
(+) Optimal for every device (+) Optimal UX
(-) Need to create Specific App for every OS (-) Difficult to maintain (-) Absent from Search results
Responsive Website (RWD)
This more recent method, became very popular in the past 2 years. The main difference is that the same
website is used for all devices, but it adapts (responds) to the specific properties of each device.
(+) Single website for all devices (+) Easy to maintain
(-) Much more difficult to develop in order to respond to all device correctly
There are three main methods to optimize Web content for Devices:
Platforms Overview – Market Landscape
Mobile Phones & Tablets
• An established internet-
connected device
• There are two major
platforms: iOS and Android
• Plus a few other popular
platforms, such as Windows
Phone and Blackberry
Smart TVs
• A newly internet-connected
device
• Smart TV market is very
fragmented
• Μost popular Smart TV platforms (2014):
– Samsung: 26.4%
– LG: 14.3%
– Sony: 14.4%
Platforms Overview - Users
On Mobile Phones:
• e-mail (91%),
• searching the Internet (76%),
• Social Networking (75%) and
• news alerts (62%)
are among the most popular
uses of the phone
On Tablets:
• Email (69%) and searching
for info online (70%) are
the most popular daily
activities to perform
• Social networking is also
popular at 64% and news
alerts on 52%.
REF: Salesforce.com, “2014 Mobile Behavior Report”, 2014.
Nielsen, “Australian Online Landscape Review”, 2013
Mobile web browsing is gaining popularity daily while desktop browsing is
decreasing as many surveys indicate
Platforms Overview - Users
Smart TVs - Surveys
• Consuming Web on a Television device is not a
new thing, but it’s not a secret that it has failed
to capture the interest of viewers so far
• On a recent study by Nielsen in 2013 in
Australia although ownership of Connected
TVs has increased (33% own a Connected TV),
only 5% of them use it to access the internet.
• According to the Australian Connected
Consumer Report the key problems are the
lack of interest, lack of know-how, bad UX and
lack of available content.
• A survey in Germany indicates that “many
responders find the use of the Internet with
the smart TV very inconvenient”.
• Web Browsing activity only captures the
interest of 10% of the users while other
functionality such as Social Media, Shopping,
Maps etc has an even lower than 10% usage.
Smart TVs – Key Problems
• Bad User Experience: As most
aforementioned studies indicate, the current
UX on the Smart TV is not pleasant for users
and causes frustration.
• Input Devices: Browsing a website whose its
interaction design was built with the
mouse/keyboard input devices in mind with
a remote control, can be a very unpleasant
and frustrating experience.
• User State: Users of a Television are in a
different “state of mind” than when using a
PC or a mobile device and normal websites
don’t take this factor into account. A relaxed
navigation style should be preferred
• Lack of TV-Optimized web content: Although
most new TVs include some kind of a web
browser, websites are optimized for desktop
or mobile, not TV, and this can easily result in
an unpleasant UX.
The Website Survey
• In order to study the current state on the levels of adaption
of web sites to non-desktop devices, a survey was
conducted on some of the world’s most popular websites.
• A list of the 100 most visited websites was retrieved from
Alexa Internet (June 2014).
• From these, 49 websites that fulfilled our requirements
(explained later), clustered into 8 categories, were tested
whether they had an optimized version for delivering their
content on (a) mobile phones, (b) tablets and (c) smart TV
devices.
Categorization of websites
• Blogging Platforms (5)
• Commerce (17)
• Informational (4):
• News (14):
• Search (26):
• Services (6):
• Social Media (9):
• Video (5):
• Network Services (8):
• Pornography (4):
• Torrent (2):
Conclusively, the final list came down to 49 websites: 3 Blogging platforms, 12
Commerce sites, 4 information websites, 8 News websites, 5 Search engines, 5
web services, 8 Social networks and 4 Video websites.
Testing Devices
• Smartphones: There were two representative smartphones, iPhone 5s for
iOS devices and Samsung Galaxy S4 for Android devices. These two
operating system platforms are the leading Smartphone systems today.
• Tablets: An Apple iPad 2 (iOS) and an Asus transformer (Android and MS-
Surface) were used.
• Smart TVs: Three devices were used, as there are more platforms for
Smart TVs: Samsung Smart TV 2014 model UE55F6670, an LG Smart TV
2013 model 42LA660S and a Google TV Sony NSZ-GS8 set-top box
Testing Methodology
• In order to have an accurate picture for this survey, each website was carefully
examined.
• For each of the selected websites, two pages were loaded, the home page and a
typical content page.
• In order to confirm the availability of a responsive website, an App or a Custom
website on a device category, it was decided that even if it was available in a
single platform platform is enough.
• A study limitation was that the standards for accepting a website as Smart TV
optimized were kept to an absolute minimal (large fonts, correct display, simple
navigation).
Results
49
48
24
0
5
10
15
20
25
30
35
40
45
Mobile Tablet TV
Overall Optimization per Device
• Results on testing website adoption on the
three different types of devices clearly show
how serious website designers take the large
movement of the users towards mobile
browsing
• All tested websites had at least one mobile-
friendly method to consume their content.
• Tablet-optimized website versions were also
very popular, with only 1 website out of 49
not having some optimized version for a tablet
device
• It is also clear that TV devices are not
considered very important yet, as only 24 out
of 49 websites had some kind of optimized
version for TV compared to 49/49 for mobile
phones.
Results
29
25
9
19
8
6
44
43
12
0
10
20
30
40
50
60
70
80
90
100
Mobile Tablet TV
Website Adaption on Devices
App
Custom
Responsive
• Looking at the preferred
optimization method, clearly
apps and responsive versions are
preferred over custom device-
specific websites
• Quite often, websites had both
an app and a mobile-friendly
website
• Tablet-optimized sites are
popular but not as popular as
phone-optimized
Results – Category Breakdown
0
5
10
15
20
25 Mobile
Responsive, App and Custom adaptation availability of top 49 websites on Mobile, Tablet and Smart TV
categorized by type of website
• it seems that blogging platforms and search engines prefer the use
of responsive websites and completely avoiding custom designs
• News, Social and Commerce websites have a somehow equal
allocation of the three types of formats
0
5
10
15
20
25 Tablet
0
5
10
15
20
25 Smart TV App
Custom
Responsive
Conclusion
Mobile-optimized website has become a standard, to ensure a
better User Experience to the many mobile users
As the popularity of these devices has grown massively, all the websites of the survey have at least one mobile
version, while many of them have both an app and a responsive or custom website optimized for smartphones
and tablets.
Smart TV-optimized websites are not common.
Smart TVs, being the new kind of internet-connected device that grows popular, has not attracted the attention
of the website owners.
Users are not happy with the current TV Web Experience.
It was evident, both from the surveys studied and from the tests that were performed in the survey carried out
in this paper, that current web content is problematic on Smart TVs and does not meet user expectations
Future Work
Extend survey on a greater number of popular websites
Create Guidelines for UX-optimized websites for Smart TVs
Perform user-testing on prototype TV-optimized websites
Maybe extend to other devices (watches?)
So…
are Websites Optimized for
Mobile Devices and Smart TVs
MOBILE DEVICESDESKTOP/LAPTOP

More Related Content

What's hot

Debunking social media myths
Debunking social media mythsDebunking social media myths
Debunking social media myths
Vincent Teo
 
ASNE 2013: Tom Rosenstiel: What the audience is telling us about the future o...
ASNE 2013: Tom Rosenstiel: What the audience is telling us about the future o...ASNE 2013: Tom Rosenstiel: What the audience is telling us about the future o...
ASNE 2013: Tom Rosenstiel: What the audience is telling us about the future o...Reynolds Journalism Institute (RJI)
 
Mobile: getting started
Mobile: getting startedMobile: getting started
Mobile: getting started
MintTwist
 
I phone, I am case study
I phone, I am case studyI phone, I am case study
I phone, I am case study
Dianne Gardiner
 
Responsive content ... because size does matter - Rob Suckley, Head of Design...
Responsive content ... because size does matter - Rob Suckley, Head of Design...Responsive content ... because size does matter - Rob Suckley, Head of Design...
Responsive content ... because size does matter - Rob Suckley, Head of Design...
B2B Marketing
 
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
 
LMA13 responsive design_final
LMA13 responsive design_finalLMA13 responsive design_final
LMA13 responsive design_finalRobert Algeri
 
WillDevicesShadows
WillDevicesShadowsWillDevicesShadows
WillDevicesShadowsRussellWill
 
How to Build a Nonprofit Mobile App To Engage Supporters
How to Build a Nonprofit Mobile App To Engage SupportersHow to Build a Nonprofit Mobile App To Engage Supporters
How to Build a Nonprofit Mobile App To Engage Supporters
TechSoup
 
Multiscreen Response Marketing_111012
Multiscreen Response Marketing_111012Multiscreen Response Marketing_111012
Multiscreen Response Marketing_111012Greg Marta
 
Mobile Roadie - CB Web Presentation
Mobile Roadie - CB Web PresentationMobile Roadie - CB Web Presentation
Mobile Roadie - CB Web Presentation
Mobile Roadie
 
AdMob Mobile Metrics Report - January 2010
AdMob Mobile Metrics Report - January 2010AdMob Mobile Metrics Report - January 2010
AdMob Mobile Metrics Report - January 2010
AdMob Inc
 
Ad Mob Mobile Metrics Jan 10
Ad Mob  Mobile  Metrics  Jan 10Ad Mob  Mobile  Metrics  Jan 10
Ad Mob Mobile Metrics Jan 10
Yuri Itou
 
Transforming Web Business to a Mobile Business - Presentation by Sirish Kosaraju
Transforming Web Business to a Mobile Business - Presentation by Sirish KosarajuTransforming Web Business to a Mobile Business - Presentation by Sirish Kosaraju
Transforming Web Business to a Mobile Business - Presentation by Sirish Kosaraju
RapidValue
 
Fiksu presentation at App Promotion Summit: Optimizing Around KPIs July 2013
Fiksu presentation at App Promotion Summit: Optimizing Around KPIs July 2013Fiksu presentation at App Promotion Summit: Optimizing Around KPIs July 2013
Fiksu presentation at App Promotion Summit: Optimizing Around KPIs July 2013
Fiksu
 
Top10 mistakesofgoingmobile june2014.abbr
Top10 mistakesofgoingmobile june2014.abbrTop10 mistakesofgoingmobile june2014.abbr
Top10 mistakesofgoingmobile june2014.abbrMichael Scully
 
Mobile appsvsmobilewebsites
Mobile appsvsmobilewebsitesMobile appsvsmobilewebsites
Mobile appsvsmobilewebsites
Rita Robinette
 
Mobile Technology and Opportunities for the Media
Mobile Technology and Opportunities for the MediaMobile Technology and Opportunities for the Media
Mobile Technology and Opportunities for the Media
Extentia Information Technology
 
Mobile Me: Programming for Wearables
Mobile Me: Programming for WearablesMobile Me: Programming for Wearables
Mobile Me: Programming for Wearables
Victor Hernandez
 

What's hot (20)

Debunking social media myths
Debunking social media mythsDebunking social media myths
Debunking social media myths
 
ASNE 2013: Tom Rosenstiel: What the audience is telling us about the future o...
ASNE 2013: Tom Rosenstiel: What the audience is telling us about the future o...ASNE 2013: Tom Rosenstiel: What the audience is telling us about the future o...
ASNE 2013: Tom Rosenstiel: What the audience is telling us about the future o...
 
Mobile: getting started
Mobile: getting startedMobile: getting started
Mobile: getting started
 
I phone, I am case study
I phone, I am case studyI phone, I am case study
I phone, I am case study
 
Responsive content ... because size does matter - Rob Suckley, Head of Design...
Responsive content ... because size does matter - Rob Suckley, Head of Design...Responsive content ... because size does matter - Rob Suckley, Head of Design...
Responsive content ... because size does matter - Rob Suckley, Head of Design...
 
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
 
LMA13 responsive design_final
LMA13 responsive design_finalLMA13 responsive design_final
LMA13 responsive design_final
 
WillDevicesShadows
WillDevicesShadowsWillDevicesShadows
WillDevicesShadows
 
How to Build a Nonprofit Mobile App To Engage Supporters
How to Build a Nonprofit Mobile App To Engage SupportersHow to Build a Nonprofit Mobile App To Engage Supporters
How to Build a Nonprofit Mobile App To Engage Supporters
 
Multiscreen Response Marketing_111012
Multiscreen Response Marketing_111012Multiscreen Response Marketing_111012
Multiscreen Response Marketing_111012
 
Mobile Roadie - CB Web Presentation
Mobile Roadie - CB Web PresentationMobile Roadie - CB Web Presentation
Mobile Roadie - CB Web Presentation
 
AdMob Mobile Metrics Report - January 2010
AdMob Mobile Metrics Report - January 2010AdMob Mobile Metrics Report - January 2010
AdMob Mobile Metrics Report - January 2010
 
Ad Mob Mobile Metrics Jan 10
Ad Mob  Mobile  Metrics  Jan 10Ad Mob  Mobile  Metrics  Jan 10
Ad Mob Mobile Metrics Jan 10
 
Transforming Web Business to a Mobile Business - Presentation by Sirish Kosaraju
Transforming Web Business to a Mobile Business - Presentation by Sirish KosarajuTransforming Web Business to a Mobile Business - Presentation by Sirish Kosaraju
Transforming Web Business to a Mobile Business - Presentation by Sirish Kosaraju
 
Fiksu presentation at App Promotion Summit: Optimizing Around KPIs July 2013
Fiksu presentation at App Promotion Summit: Optimizing Around KPIs July 2013Fiksu presentation at App Promotion Summit: Optimizing Around KPIs July 2013
Fiksu presentation at App Promotion Summit: Optimizing Around KPIs July 2013
 
Mobile seminar-worksheet
Mobile seminar-worksheetMobile seminar-worksheet
Mobile seminar-worksheet
 
Top10 mistakesofgoingmobile june2014.abbr
Top10 mistakesofgoingmobile june2014.abbrTop10 mistakesofgoingmobile june2014.abbr
Top10 mistakesofgoingmobile june2014.abbr
 
Mobile appsvsmobilewebsites
Mobile appsvsmobilewebsitesMobile appsvsmobilewebsites
Mobile appsvsmobilewebsites
 
Mobile Technology and Opportunities for the Media
Mobile Technology and Opportunities for the MediaMobile Technology and Opportunities for the Media
Mobile Technology and Opportunities for the Media
 
Mobile Me: Programming for Wearables
Mobile Me: Programming for WearablesMobile Me: Programming for Wearables
Mobile Me: Programming for Wearables
 

Viewers also liked

ТРЕНИНГ: Формула убеждения для менеджеров по продажам
ТРЕНИНГ: Формула убеждения для менеджеров по продажамТРЕНИНГ: Формула убеждения для менеджеров по продажам
ТРЕНИНГ: Формула убеждения для менеджеров по продажам
ООО Хорошее решение
 
Пудра-камуфляж для редких волос "Kmax". Италия.
Пудра-камуфляж для редких волос "Kmax". Италия.Пудра-камуфляж для редких волос "Kmax". Италия.
Пудра-камуфляж для редких волос "Kmax". Италия.
ООО Хорошее решение
 
DermMatch оптом!
DermMatch оптом!DermMatch оптом!
SEO: Το περιεχόμενο είναι ο θησαυρός σου
SEO: Το περιεχόμενο είναι ο θησαυρός σουSEO: Το περιεχόμενο είναι ο θησαυρός σου
SEO: Το περιεχόμενο είναι ο θησαυρός σου
Manos Perakakis
 
Загуститель волос для мужчин
Загуститель волос для мужчинЗагуститель волос для мужчин
Загуститель волос для мужчин
ООО Хорошее решение
 
Taylor swift
Taylor swiftTaylor swift
Taylor swiftiveyc
 
140328 전자출판 기술표준세미나 epub 주석 표준 open_annotation_최두립_v2
140328 전자출판 기술표준세미나 epub 주석 표준 open_annotation_최두립_v2140328 전자출판 기술표준세미나 epub 주석 표준 open_annotation_최두립_v2
140328 전자출판 기술표준세미나 epub 주석 표준 open_annotation_최두립_v2
doo rip choi
 
Taylor swift
Taylor swiftTaylor swift
Taylor swiftiveyc
 
[Did you know] 모바일 전략과 웹앱 20130703
[Did you know] 모바일 전략과 웹앱  20130703[Did you know] 모바일 전략과 웹앱  20130703
[Did you know] 모바일 전략과 웹앱 20130703
doo rip choi
 

Viewers also liked (14)

ТРЕНИНГ: Формула убеждения для менеджеров по продажам
ТРЕНИНГ: Формула убеждения для менеджеров по продажамТРЕНИНГ: Формула убеждения для менеджеров по продажам
ТРЕНИНГ: Формула убеждения для менеджеров по продажам
 
9 1
9 19 1
9 1
 
Пудра-камуфляж для редких волос "Kmax". Италия.
Пудра-камуфляж для редких волос "Kmax". Италия.Пудра-камуфляж для редких волос "Kmax". Италия.
Пудра-камуфляж для редких волос "Kmax". Италия.
 
DermMatch оптом!
DermMatch оптом!DermMatch оптом!
DermMatch оптом!
 
Presentacion para computacion ces
Presentacion para computacion cesPresentacion para computacion ces
Presentacion para computacion ces
 
SEO: Το περιεχόμενο είναι ο θησαυρός σου
SEO: Το περιεχόμενο είναι ο θησαυρός σουSEO: Το περιεχόμενο είναι ο θησαυρός σου
SEO: Το περιεχόμενο είναι ο θησαυρός σου
 
Darab
DarabDarab
Darab
 
test FB
test FBtest FB
test FB
 
Загуститель волос HairMax Hair Fibers
Загуститель волос HairMax Hair FibersЗагуститель волос HairMax Hair Fibers
Загуститель волос HairMax Hair Fibers
 
Загуститель волос для мужчин
Загуститель волос для мужчинЗагуститель волос для мужчин
Загуститель волос для мужчин
 
Taylor swift
Taylor swiftTaylor swift
Taylor swift
 
140328 전자출판 기술표준세미나 epub 주석 표준 open_annotation_최두립_v2
140328 전자출판 기술표준세미나 epub 주석 표준 open_annotation_최두립_v2140328 전자출판 기술표준세미나 epub 주석 표준 open_annotation_최두립_v2
140328 전자출판 기술표준세미나 epub 주석 표준 open_annotation_최두립_v2
 
Taylor swift
Taylor swiftTaylor swift
Taylor swift
 
[Did you know] 모바일 전략과 웹앱 20130703
[Did you know] 모바일 전략과 웹앱  20130703[Did you know] 모바일 전략과 웹앱  20130703
[Did you know] 모바일 전략과 웹앱 20130703
 

Similar to Are Websites Optimized for Mobile Devices and Smart TVs ?

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
 
Make a Mobile Web Site
Make a Mobile Web SiteMake a Mobile Web Site
Make a Mobile Web Site
Jasmine Sante
 
Guerra anthony mobile_tablet_design_presentation
Guerra anthony mobile_tablet_design_presentationGuerra anthony mobile_tablet_design_presentation
Guerra anthony mobile_tablet_design_presentation
Anthony Guerra
 
AMA Reno Tahoe Mobile Prsentatino Final
AMA Reno Tahoe Mobile Prsentatino FinalAMA Reno Tahoe Mobile Prsentatino Final
AMA Reno Tahoe Mobile Prsentatino FinalMichael Thomas
 
Creating Large-Scale Responsive Websites
Creating Large-Scale Responsive WebsitesCreating Large-Scale Responsive Websites
Creating Large-Scale Responsive Websites
Keith Doyle
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
Dave Martin
 
Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)
BraveNewCode Inc.
 
Google: Does your website work for the multi-screen UK consumer?
Google: Does your website work for the multi-screen UK consumer?Google: Does your website work for the multi-screen UK consumer?
Google: Does your website work for the multi-screen UK consumer?
Matt Brocklehurst
 
Beyond the iPhone: Delivering Mobile Content & Services
Beyond the iPhone: Delivering Mobile Content & ServicesBeyond the iPhone: Delivering Mobile Content & Services
Beyond the iPhone: Delivering Mobile Content & Services
Dave Olsen
 
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)
Graham Bird
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Jack Zheng
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Matt Machell
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
Woody Pewitt
 
Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Nathan Gerber
 
Smartphones - the ultimate recruitment tool
Smartphones - the ultimate recruitment toolSmartphones - the ultimate recruitment tool
Smartphones - the ultimate recruitment tool
ThirtyThree
 
EPA Victoria - Case study in responsive design
EPA Victoria - Case study in responsive designEPA Victoria - Case study in responsive design
EPA Victoria - Case study in responsive design
eGovernment Resource Centre
 
Nuno pelaez juan_mobilepresentation
Nuno pelaez juan_mobilepresentationNuno pelaez juan_mobilepresentation
Nuno pelaez juan_mobilepresentation
jmnuno
 
#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior
One North
 

Similar to Are Websites Optimized for Mobile Devices and Smart TVs ? (20)

Who's winning the mobile web?
Who's winning the mobile web?Who's winning the mobile web?
Who's winning the mobile web?
 
Make a Mobile Web Site
Make a Mobile Web SiteMake a Mobile Web Site
Make a Mobile Web Site
 
Guerra anthony mobile_tablet_design_presentation
Guerra anthony mobile_tablet_design_presentationGuerra anthony mobile_tablet_design_presentation
Guerra anthony mobile_tablet_design_presentation
 
01 Mobile Jungle
01 Mobile Jungle01 Mobile Jungle
01 Mobile Jungle
 
AMA Reno Tahoe Mobile Prsentatino Final
AMA Reno Tahoe Mobile Prsentatino FinalAMA Reno Tahoe Mobile Prsentatino Final
AMA Reno Tahoe Mobile Prsentatino Final
 
Creating Large-Scale Responsive Websites
Creating Large-Scale Responsive WebsitesCreating Large-Scale Responsive Websites
Creating Large-Scale Responsive Websites
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)
 
Google: Does your website work for the multi-screen UK consumer?
Google: Does your website work for the multi-screen UK consumer?Google: Does your website work for the multi-screen UK consumer?
Google: Does your website work for the multi-screen UK consumer?
 
Beyond the iPhone: Delivering Mobile Content & Services
Beyond the iPhone: Delivering Mobile Content & ServicesBeyond the iPhone: Delivering Mobile Content & Services
Beyond the iPhone: Delivering Mobile Content & Services
 
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)
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011
 
Smartphones - the ultimate recruitment tool
Smartphones - the ultimate recruitment toolSmartphones - the ultimate recruitment tool
Smartphones - the ultimate recruitment tool
 
EPA Victoria - Case study in responsive design
EPA Victoria - Case study in responsive designEPA Victoria - Case study in responsive design
EPA Victoria - Case study in responsive design
 
Nuno pelaez juan_mobilepresentation
Nuno pelaez juan_mobilepresentationNuno pelaez juan_mobilepresentation
Nuno pelaez juan_mobilepresentation
 
Mobile 5.21.12
Mobile   5.21.12Mobile   5.21.12
Mobile 5.21.12
 
#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior
 

Recently uploaded

Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
PlanitIsrael
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
fastfixgaragedoor
 
Top 5 Indian Style Modular Kitchen Designs
Top 5 Indian Style Modular Kitchen DesignsTop 5 Indian Style Modular Kitchen Designs
Top 5 Indian Style Modular Kitchen Designs
Finzo Kitchens
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
AlecAnidul
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdf
SudhanshuMandlik
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 

Recently uploaded (20)

Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
 
Top 5 Indian Style Modular Kitchen Designs
Top 5 Indian Style Modular Kitchen DesignsTop 5 Indian Style Modular Kitchen Designs
Top 5 Indian Style Modular Kitchen Designs
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdf
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 

Are Websites Optimized for Mobile Devices and Smart TVs ?

  • 1. Are Websites Optimized for Mobile Devices and Smart TVs? Emmanouil Perakakis mperakakis@staff.teicrete.gr Brunel University & TEI of Crete Uxbridge, London, UK Gheorghita Ghinea george.ghinea@brunel.ac.uk Brunel University Uxbridge, London, UK Evanthia Thanou evathanou@gmail.com TEI of Crete Ierapetra, Crete, Greece MOBILE DEVICESDESKTOP/LAPTOP
  • 2. Introduction We lived and still live in a world of Objects We will live in a world of Connected “Things” We now also live in a world of Devices
  • 3. Introduction Internet of Things Web of Things “Things” being part of the WWW Communicating using standard web technologies through Web Interfaces
  • 4. Web on non-PC devices The Web started as a desktop native For many years, the only way to access the WWW was through a Desktop/Laptop PC. Then it was “opened” to Mobile Phones and later to Tablet devices
  • 5. Web on non-PC devices Recently, the Web is making it’s way to even more devices. So you can, or possibly will in the near future, browse the web from:
  • 6. Web on non-PC devices • But browsing the web on other devices is not an automatic thing. • Every device has different properties, such as screen sizes, input methods, network bandwidth etc. , and even users can be in different states. • So, for a website or a web application to be able to work optimally on non-PC devices, we need to take into account the specific devices properties. • Failing to do that, will result in bad User Experience (UX) or even complete incompatibility with the device.
  • 7. Optimizing Content for Devices Custom device-specific Websites A different website from the Desktop will be developed from scratch, optimized for the specific device. It will share the same content with the main website, often sharing the same database, but the presentation layer will be different. (+) Optimized for every device (+) Easier to Develop websites compared to RWD (-) Develop new website for every device (-) Difficult to maintain (-) Questionable SEO (-) Even for same kind of device may need more websites Device Specific Apps Apps were popularized with mobile phones. It is common practice to develop a native App for the device which usually consumes the content of the website, sharing the same database, but using a totally different presentation layer. (+) Optimal for every device (+) Optimal UX (-) Need to create Specific App for every OS (-) Difficult to maintain (-) Absent from Search results Responsive Website (RWD) This more recent method, became very popular in the past 2 years. The main difference is that the same website is used for all devices, but it adapts (responds) to the specific properties of each device. (+) Single website for all devices (+) Easy to maintain (-) Much more difficult to develop in order to respond to all device correctly There are three main methods to optimize Web content for Devices:
  • 8. Platforms Overview – Market Landscape Mobile Phones & Tablets • An established internet- connected device • There are two major platforms: iOS and Android • Plus a few other popular platforms, such as Windows Phone and Blackberry Smart TVs • A newly internet-connected device • Smart TV market is very fragmented • Μost popular Smart TV platforms (2014): – Samsung: 26.4% – LG: 14.3% – Sony: 14.4%
  • 9. Platforms Overview - Users On Mobile Phones: • e-mail (91%), • searching the Internet (76%), • Social Networking (75%) and • news alerts (62%) are among the most popular uses of the phone On Tablets: • Email (69%) and searching for info online (70%) are the most popular daily activities to perform • Social networking is also popular at 64% and news alerts on 52%. REF: Salesforce.com, “2014 Mobile Behavior Report”, 2014. Nielsen, “Australian Online Landscape Review”, 2013 Mobile web browsing is gaining popularity daily while desktop browsing is decreasing as many surveys indicate
  • 10. Platforms Overview - Users Smart TVs - Surveys • Consuming Web on a Television device is not a new thing, but it’s not a secret that it has failed to capture the interest of viewers so far • On a recent study by Nielsen in 2013 in Australia although ownership of Connected TVs has increased (33% own a Connected TV), only 5% of them use it to access the internet. • According to the Australian Connected Consumer Report the key problems are the lack of interest, lack of know-how, bad UX and lack of available content. • A survey in Germany indicates that “many responders find the use of the Internet with the smart TV very inconvenient”. • Web Browsing activity only captures the interest of 10% of the users while other functionality such as Social Media, Shopping, Maps etc has an even lower than 10% usage. Smart TVs – Key Problems • Bad User Experience: As most aforementioned studies indicate, the current UX on the Smart TV is not pleasant for users and causes frustration. • Input Devices: Browsing a website whose its interaction design was built with the mouse/keyboard input devices in mind with a remote control, can be a very unpleasant and frustrating experience. • User State: Users of a Television are in a different “state of mind” than when using a PC or a mobile device and normal websites don’t take this factor into account. A relaxed navigation style should be preferred • Lack of TV-Optimized web content: Although most new TVs include some kind of a web browser, websites are optimized for desktop or mobile, not TV, and this can easily result in an unpleasant UX.
  • 11. The Website Survey • In order to study the current state on the levels of adaption of web sites to non-desktop devices, a survey was conducted on some of the world’s most popular websites. • A list of the 100 most visited websites was retrieved from Alexa Internet (June 2014). • From these, 49 websites that fulfilled our requirements (explained later), clustered into 8 categories, were tested whether they had an optimized version for delivering their content on (a) mobile phones, (b) tablets and (c) smart TV devices.
  • 12. Categorization of websites • Blogging Platforms (5) • Commerce (17) • Informational (4): • News (14): • Search (26): • Services (6): • Social Media (9): • Video (5): • Network Services (8): • Pornography (4): • Torrent (2): Conclusively, the final list came down to 49 websites: 3 Blogging platforms, 12 Commerce sites, 4 information websites, 8 News websites, 5 Search engines, 5 web services, 8 Social networks and 4 Video websites.
  • 13. Testing Devices • Smartphones: There were two representative smartphones, iPhone 5s for iOS devices and Samsung Galaxy S4 for Android devices. These two operating system platforms are the leading Smartphone systems today. • Tablets: An Apple iPad 2 (iOS) and an Asus transformer (Android and MS- Surface) were used. • Smart TVs: Three devices were used, as there are more platforms for Smart TVs: Samsung Smart TV 2014 model UE55F6670, an LG Smart TV 2013 model 42LA660S and a Google TV Sony NSZ-GS8 set-top box
  • 14. Testing Methodology • In order to have an accurate picture for this survey, each website was carefully examined. • For each of the selected websites, two pages were loaded, the home page and a typical content page. • In order to confirm the availability of a responsive website, an App or a Custom website on a device category, it was decided that even if it was available in a single platform platform is enough. • A study limitation was that the standards for accepting a website as Smart TV optimized were kept to an absolute minimal (large fonts, correct display, simple navigation).
  • 15. Results 49 48 24 0 5 10 15 20 25 30 35 40 45 Mobile Tablet TV Overall Optimization per Device • Results on testing website adoption on the three different types of devices clearly show how serious website designers take the large movement of the users towards mobile browsing • All tested websites had at least one mobile- friendly method to consume their content. • Tablet-optimized website versions were also very popular, with only 1 website out of 49 not having some optimized version for a tablet device • It is also clear that TV devices are not considered very important yet, as only 24 out of 49 websites had some kind of optimized version for TV compared to 49/49 for mobile phones.
  • 16. Results 29 25 9 19 8 6 44 43 12 0 10 20 30 40 50 60 70 80 90 100 Mobile Tablet TV Website Adaption on Devices App Custom Responsive • Looking at the preferred optimization method, clearly apps and responsive versions are preferred over custom device- specific websites • Quite often, websites had both an app and a mobile-friendly website • Tablet-optimized sites are popular but not as popular as phone-optimized
  • 17. Results – Category Breakdown 0 5 10 15 20 25 Mobile Responsive, App and Custom adaptation availability of top 49 websites on Mobile, Tablet and Smart TV categorized by type of website • it seems that blogging platforms and search engines prefer the use of responsive websites and completely avoiding custom designs • News, Social and Commerce websites have a somehow equal allocation of the three types of formats 0 5 10 15 20 25 Tablet 0 5 10 15 20 25 Smart TV App Custom Responsive
  • 18. Conclusion Mobile-optimized website has become a standard, to ensure a better User Experience to the many mobile users As the popularity of these devices has grown massively, all the websites of the survey have at least one mobile version, while many of them have both an app and a responsive or custom website optimized for smartphones and tablets. Smart TV-optimized websites are not common. Smart TVs, being the new kind of internet-connected device that grows popular, has not attracted the attention of the website owners. Users are not happy with the current TV Web Experience. It was evident, both from the surveys studied and from the tests that were performed in the survey carried out in this paper, that current web content is problematic on Smart TVs and does not meet user expectations
  • 19. Future Work Extend survey on a greater number of popular websites Create Guidelines for UX-optimized websites for Smart TVs Perform user-testing on prototype TV-optimized websites Maybe extend to other devices (watches?)
  • 20. So… are Websites Optimized for Mobile Devices and Smart TVs MOBILE DEVICESDESKTOP/LAPTOP

Editor's Notes

  1. So it’s about communicating with the devices through the internet and the www And in some cases it stands the other way round as well => accessing the internet and the WWW through these devices
  2. Although, these devices do have browsers that can handle web sites with HTML5, CSS3 and Javascript satisfactory, a website that was designed for desktop or mobile is not optimal for viewing on TV as is. So, users of these devices, although initially interested in using their TVs to browse the web, soon become discouraged from the bad usability and UX of using non-optimized websites. It was surprisingly, that even among the top visited websites of the world, TV adoption was not a standard, with only 50% of them having some form (often very limited) of TV-optimized version, compared to 100% of mobile-optimized versions.
  3. Hopefully, in the immediate future, more effort will be put towards this direction, and this might boost the actual usage of the smart TVs web browser, a functionality that seems able to provide so much content, is expected by users to do so, but currently fails to serve this purpose.