Responsive Web Design for the Internet Connected TV

Responsive  Web  Design  for  the  Internet  Connected  TV   The  answer  to  more  Smart  TV  Content?    

Emmanouil  Perakakis   mperakakis@staff.teicrete.gr   Brunel  University  &  TEI  of  Crete   Uxbridge,  London,  UK  

Gheorghita  Ghinea     [email protected]   Brunel  University   Uxbridge,  London,  UK  

   

SMARTPHONE          TABLET                LAPTOP                            DESKTOP  

SMART  TV  

IntroducDon   I  have  been  researching  Smart  TVs  for  the  past  few  years  for  my  PhD  work  

IntroducDon   •  During  this  Dme  I  never  miss  the   chance  to  talk  to  people  that  own   or  intend  to  buy  a  SmartTV   •  I  ask  them  what  are  the  features  of   a  Smart  TV  that  they  looked   forward  to  use  prior  to  buying  the   device   •  One  that  comes  up  very  oJen,  is  the   ability  to  access  the  web  from  their   TVs   •  This  is  actually  a  very  standard   Smart  TV  feature,  and  it  sounds   very  exciLng…  

IntroducDon   …  unLl  they  actually  use  it  ☺    

IntroducDon   •  Soon  they  find  out  that  the  web  was  not  made  for  TV  use     •  Websites  are  designed  with  very  different  devices  and  input  methods  in  mind  

 

  So  the  TV  web  experience  becomes…  

A  Nightmare!  

User  Studies       E.g.  

 There  are  actually  many  studies  that  confirm  my  empirical                findings.    

–  A  survey  in  Germany*  indicates  that  “many  responders  find  the  use  of   the  Internet  with  the  smart  TV  very  inconvenient”     •  The  same  survey  also  indicates  that  only  1  out  of  4  Smart  TV  owners  use  their  device   to  go  online.    

–  According  to  the  Australian  Connected  Consumer  Report**  the  key   barriers  from  using  the  Internet  capabiliDes  of  these  devices  are  the   lack  of  interest,  lack  of  know-­‐how,  bad  UX,  slow  connecDon  speed  and   lack  of  interesLng  available  content/apps.    

*Tomorrow  Focus  Media  (2014).  Smart  surfing  has  reached  the  TV  market.  Smart-­‐TV  Effects  2014-­‐1.     **Nielsen  (2013).  Australian  Connected  Consumers  Report.    

InteresDng…   The  web  actually  contains  enormous  amounts  of  content,     which  is  accessible  through  a  Smart  TV       BUT  the  way  this  is  accessed  at  the  moment  is  very  problemaLc,   so  most  Smart  TV  users  simply  choose  to  avoid  it.  

Smart  TV  Apps   •  • 

There  is  an  excepDon  of  TV-­‐opDmized  consumpDon  of  web  TV  content,  in  the  form   of  TV  apps.     This  is  the  preferred  method  used  by  most  content  providers  at  the  moment  but  it   has  many  shortcomings  including:    

–  There  are  many  different  plaVorms,    

so  it  is  very  difficult  and  expensive  to  develop  and  maintain  Apps  for  all  these  different  plaeorms  

–  The  user  has  to  implicitly  download  every  App  he  wants  to  use     so,  unlike  the  web,  it  is  not  readily  available.    

–  The  content  available  through  Apps  is  limited   it  will  always  be  only  a  small  fracLon  of  that  actually  exists  on  the  web  

Mobile  Web   •  We  can  easily  find  many  similariDes  to  the  early  mobile   phone  landscape  in  this  Smart  TV  situaDon.     •  Smart  phones  had  very  similar  problems,  and  it  took  quite  a   while  to  be  considered  the  standard  web  browsing  device   that  is  is  today.   Arguably,  the  most  important  reasons  for  this  to  happen  were:   –  The  availability  of  faster  internet  on  the  go       –  The  improvement  of  the  input  and  display  methods  through  higher   resoluDon  screens  and  quick-­‐responding  finger-­‐touch  sensors.     –  The  opLmizaLon  of  web  content  for  mobile  devices,  mostly  through   the  use  of  Responsive  Web  Design  

Input  methods  and  web  browsers  on  Smart  TVs   •  Manufacturers  are  improving  input  methods   –  SDll  the  D-­‐pad  remains  the  only  standard,  but  new  more  usable  device   are  becoming  very  common  

•  TV  Devices  are  becoming  more  powerful  and  can  perform   faster  and  more  accurate  web  rendering   –  Browsers  are  HMTL5/CSS3/JS  capable  and  are  adopDng  the  new   standards  to  a  large  extend  

About  Responsive  Web  Design  (RWD)   •  A  way  for  a  single  website  to  be  automaLcally  adjusted,  using  CSS  media   queries,  to  the  user’s  device  for  opLmal  viewing   •  For  the  past  few  years,  this  technique  has  been  successfully  used  to  make   websites  friendly  to  mobile  phones  and  tablets  with  such  success,  that  it   has  become  a  standard  pracLce  to  web  design.     •  On  a  recent  study  we  performed  on  the  world's  50  most  visited  websites,   we  found  that  over  60%  of  them  uses  RWD*.  

*E.  Perakakis,  G.  Ghinea,  E.  Thanou  (2015).  Are  Websites  OpDmized  for  Mobile  Devices  and  Smart  TVs?  .  8th   InternaAonal  Conference  on  Human  System  InteracAon  (HSI2015),    

RWD  on  Smart  TVs   Is  RWD  currently  being  used  to  make   the  web  content  TV-­‐opLmized  ?   •  No…  It  seems  that  responsive  web  design  has  been  disregarded  so  far  for   the  TV.   •  On  our  aforemenDoned  study  only  9  out  of  49  websites  had  some  basic   responsive  opDmizaDons  for  TV*   •  As  RWD  must  result  in  opDmally  viewing  a  website  on  a  device,  a   responsive  website  doesn’t  automaDcally  mean  that  it  responds  well  on   EVERY  available  device  

*E.  Perakakis,  G.  Ghinea,  E.  Thanou  (2015).  Are  Websites  OpDmized  for  Mobile  Devices  and  Smart  TVs?  .  8th   InternaAonal  Conference  on  Human  System  InteracAon  (HSI2015),    

How  can  a  website  be  opDmally  viewed  on  TV?   By  studying  the  (limited)  literature  available  on  web  TV  content,  combined  with  research  done  mostly   for  TV  Apps  (which  share  many  in  common)  and  InteracDve  TV  interfaces  we  extracted  the  following   basic  principles  for  TV-­‐opDmized  websites:  

•  Minimum  font  size  of  22px,    

Line  length  of  10  words  or  less,  generous   leading,  limit  paragraphs  to  90  words,   broken  into  small  chunks.  

•  D-­‐Pad  NavigaLon  is  preferred,   instead  of  point-­‐and-­‐click,  as  many  TV   devices  do  not  have  a  reliable  poinDng   device.    

•  Paging  is  beoer  than  scrolling    

that  does  not  work  well  with  most  remote   controls,  as  the  pointer  must  usually  move  to   the  booom  of  the  screen  to  iniDate  scrolling.   Horizontal  Paging  is  preferred  to  verDcal.  

•  Clear  focus  of  selected   navigaLon  item  can  be  easily   achieved  by  stronger  coloring/ highlighDng  of  the  element.    

•  Auto-­‐scroll  to  current  navigaLon   item    

wehn  scrolling  is  necessary  while  dealing  with   pages  with  lots  of  items  (links/buoons).  This  can   be  made  user-­‐friendly  if  the  page  automaDcally   scrolls  to  the  focus/selected  item.    

 

•  Avoid  Overscan  issues    

have  to  do  with  hiding  of  content  exisDng  in  the   far-­‐edges  of  the  TV  screen.  To  prevent  this,  avoid   placing  important  elements  at  these  locaDons.  

A  Prototype  Responsive  Web  Site  for  Smart  TV   • 

• 

To  test  our  RWD  technique,  we  developed  a  mock-­‐up  News  website  responsive  for  Desktop  and  Mobile   devices,  but  also  extended  it  with  an  addiLonal  adapLve  layout  for  Smart  TVs     We  used  a  Bootstrap  HTML5  template  of  a  News  website,  Responsive  for  Mobiles  and  Extended  it  to  be  TV   compaLble  

! Figure  1.  “The  missing  layout”:  A  complete  Responsive  design  template  with  the  3  common  versions  (Phone,  Tablet,  Desktop)  and  an   addiLonal  one  for  Smart  TV  devices.  The  TV  layout  enables  simple  D-­‐PAD  navigaLon,  larger  fonts  and  simplifies  the  overall  experience.    

Comparison  of  navigaDonal  elements   •  • 

The  arrow  lines  show  the  navigaLonal  paths  using  “link  navigaDon”,  a  common  feature  in  most  TVs  for   navigaDng  a  page  with  the  D-­‐PAD  of  the  remote  control.     It  is  clear  that  in  the  TV-­‐opLmized  version,  the  navigaLon  is  much  simpler  and  straigheorward,  with  fewer   hops  between  links.    

!

How  to  RWD  for  TV  -­‐  Challenges   Smart  TV  DetecLon   •  Media  queries  (breakpoints)  used  in  tradiDonal  RWD  are  not   enough  for  TV   –  The  resoluDon  of  devices  can  be  very  misleading    

•  @Media  Type=“TV”  also  does  not  work    

•  A  more  applicable  soluDon  for  TV  device  detecDon  is  to  check   the  User  Agent  (UA)  string  using  JavaScript.     –  This  is  what  popular  scripts  like  Categorizr.js  [19]  and  DetecDzr.js  [20]  are  doing    

  Mozilla/5.0  (SMART-­‐TV;X11;  Linux  armv7I)  AppleWebKit/537.42  (KHTML,  like  Gecko  )   Chromium/25.0.1349.2  Chrome  /25.0.1349.2  Safari  537.42    

How  to  RWD  for  TV  -­‐  Challenges   Dynamically  move  page  elements,  focusing  on  items,  paging  etc   •  CSS  is  not  enough  to  perform  all  the  dynamic  changes  to  the   page  funcDonality     •  This  seemingly  complex  funcDonality  can  be  easily  achieved   using  JavaScript  libraries,  such  as  jQuery   • 

However,  where  simpler  styling  customizaDons  are  required,  CSS-­‐only  code  is   adequate  and  also  easier  to  handle.     The  basic  idea  is  including  a  trigger  class  to  the  main    element  to  enable  custom  smart-­‐tv   styling.  So  by  having  an      

 

TesDng  on  Devices  -­‐  Issues   Some  of  the  issues  encountered  included:     •  Browser  resoluLon  was  not  the  same  across  tested  TV  models,    

i.e.  the  fact  that  a  TV  is  HD  and  has  a  naDve  resoluDon  of  1920x1080  does  not  mean  that  when  in  browser  mode  the  same  resoluDon  is   used.  For  example  in  the  Samsung  2014  model  the  resoluDon  of  the  browser  was  1280x720,  while  on  GoogleTV  was  1128x634.  For  the   newer  LG  2015  (WebOS)  model  the  resoluDon  was  1920x1080.  

•  • 

    Some  TV  devices  may  have  the  “Smart-­‐TV”  keyword  on  their  UA  string.     However,  all  tested  devices  in  this  experiment  were  idenDfied  correctly  as  Smart  TVs.  

  NavigaLon  with  the  remote  control  or  other  control  devices  is  very  heterogeneous,  and  the  support  for   D-­‐PAD  navigaDon  in  the  browser  is  also  not  the  same  across  all  plaeorms.     Even  in  devices  from  the  same  manufacturers,  there  is  not  a  seamless  operaDon  of  the  remote  control.  For  example  in  LG  models  from  2014,   D-­‐PAD  (link)  navigaDon  was  working  inside  the  browser  but  this  changed  in  the  2015  LG  WebOS  models,  where  only  point  and  click  is   supported.  So  both  types  of  navigaDon  have  to  work  correctly  in  order  to  have  an  opDmal  cross-­‐plaeorm  experience.    

• 

Performance  Issues.  As  the  hardware  capabiliDes  of  these  devices  is  limited,  having  even  simple   JavaScript  animaLon  can  cause  visible  slowness  of  the  visual  elements  and  the  navigaDon,     so  it  is  beoer  to  avoid  them  for  beoer  user  experience,  especially  on  older  devices.  It  is  noteworthy  that  most  2015  models  have  much  more  capable   hardware  and  this  will  not  be  an  issue  in  the  future.  

 

RecommendaDons  &  Guidelines   It  would  be  possible  to  use  this  technique  on  new  and  exisDng  responsive  web  sites,  improving  the  user   experience  and  compaDbility,  on  the  ever-­‐increasing  Smart  TV  market.     • 

•  • 

• 

IdenLfy  the  type  of  device    

and  its  capabiliDes  using  a  JavaScript  detector  script  or  by   looking  at  the  UA  browser  string.    

Remove  any  unimportant  elements  from  the  page,  to  

streamline  the  navigaDon,  which  needs  to  be  simple.  

• 

• 

ULlize  D-­‐Pad  NavigaLon  using  correct  syntax  HTML5  

• 

Avoid  large  chunks  of  text,  if  possible.    

• 

Rearrange  any  navigaLonal  elements  to  only   horizontal  and  verLcal  grids  for  clear  navigaLon.       Make  sure  the  current  (focused)  element  is  clearly   standing  out  from  the  others.    

• 

Avoid  heavily  animated  elements,    

Avoid  auto-­‐sliders  as  they  are  not  easy  to  use  on  a  TV.     In  our  example  we  replaced  the  main  slider  with  a  much  more   funcDonal  4-­‐column  grid  of  the  main  news  elements.    

in  order  to  be  easily  read  from  a  distance.  

• 

so  that  the  screen  scrolling  will  follow  the  users  navigaDonal   path  automaDcally.  

although  a  TV  interface  would  be  nice  to  have  them,  the  hardware  is   usually  incapable  of  displaying  them  smoothly  and  slows  down  the   whole  page,  making  even  navigaDon  slow  and  un-­‐responding   (especially  on  pre-­‐2015  models).  

(Check  CSS3  nav-­‐down  property  for  D-­‐PAD  moving).  Remove  any   unnecessary  links  as  they  will  interfere  with  the  navigaDonal  paoers,   as  most  TV  browsers  use  “link  navigaDon”,  i.e.  moving  from  one  link  to   another.  (Fig.  2)  

Adjust  the  font  sizes,  keeping  a  minimum  of  22   pixels,    

Enable  auto-­‐scrolling  to  the  focused  element    

• 

Use  Paging  –  Avoid  Scrolling    

Can  be  triggered  either  with  the  D-­‐PAD  keys  or  (if  the  device  has   a  scroll  buoon)  just  as  the  user  iniDates  scrolling.  ExisDng   javascript  libraries  such  as  fullPage.js  [24]  can  make  this  easier   to  implement.    

• 

Test  on  as  many  Smart  TV  devices  as  possible,    

to  fix  minor  incompaDbiliDes.  This  is  a  standard  pracDce  on  RWD,   e.g.  in  mobiles  tesDng  in  as  many  as  possible  mobile  devices  is   essenDal.    

Conclusion  and  Future  Work   •  In  this  paper,  we  propose  the  extension  of  Responsive  Web  Design   techniques  on  Smart  TV  systems.  This  technique  can  be  relaDvely   easily  implemented  on  exisLng  responsive  websites,  resulDng  in  an   improved  User  Experience  for  the  TV  users.       •  Applying  this  technique  to  more  and  more  websites  could  be  a   soluDon  to  the  availability  of  the  vast  amount  of  web  content  to   the  Smart  TV  devices,  a  new  and  quickly  developing  internet-­‐ connected  area,  with  need  for  more  content.     •  In  this  iniDal  work,  it  is  clear  that  the  described  method  can  be   successfully  applied  in  the  TV  context  and  our  purpose  is  to  further   explore  its  possibiliDes.       •  In  the  future  we  intend  to  perform  tests  on  a  greater  number  of   Smart  TVs  from  different  manufacturers  as  well  as  performing   actual  user  tesLng.    

So,  will  Smart  TVs  be  ever  used  as  a   standard  Web  Browsing  device?   This  is  a  difficult  quesDon  to  answer,  it  certainly  seems  quite   unlikely  right  now,  but  this  has  also  been  the  case  on  pre-­‐iPhone   mobiles  as  well,  not  to  menDon  WAP  :o       In  our  opinion,  as  the  Web  TV  UX  improves  it  is  likely  that  more   users  will  start  using  it,  and  yes,  it  will  not  be  a  surprise  for  us  if  it   will  be  added  to  the  standard  web  devices  in  the  future     But,  this  remain  to  be  seen….  

Responsive  Web  Design  for  the  Internet  Connected  TV   The  answer  to  more  Smart  TV  Content?    

Emmanouil  Perakakis   mperakakis@staff.teicrete.gr   Brunel  University  &  TEI  of  Crete   Uxbridge,  London,  UK  

   

Gheorghita  Ghinea     [email protected]   Brunel  University   Uxbridge,  London,  UK  

THANK  YOU  FOR  YOUR  TIME!