Having any business without a website is like building a brick and mortar store without a front door. We build websites to make sure we’re found online, make sure the site’s optimized, and then mobilize them for smartphones. Today we have to concern ourselves with smart TVs and how our online presence will display on a HDTV.
Don’t panic. There are things we can do to make sure our sites are optimized—and I’m here to make sure you know what they are. Follow these tips and your site will look great to anyone sitting back and relaxing on their couch.
Do you know what “optimized for TV” means?
The experience with an HDTV is different than sitting in front of a computer monitor. It’s important to understand what people are expecting when they’re sitting back several feet from the smart TV. It’s about creating the right experience:
- Bigger text, so words/menu items can be seen clearly from the couch.
- Easy, simple navigation that allows viewers to use a remote D-pad instead of a mouse or touchpad.
- Obvious selections. When people sit so far back from a screen, it’s important that elements highlight properly.
- Avoid using bright whites, oranges and reds to prevent color distortion on the screen.
- Graphics display without pixilation.
Image Source: techiesmartstore.com
So how do we know what items we need to fix? Here’s a simple way to see what your site will look like on that new HDTV:
- View your site at 1920 x 1080 on a large computer monitor.
- Visit your site at full screen, then “zoom” the browser. Browsers accomplish this in different ways. Chrome/Firefox allows you to press ctrl+ (the ctrl and + button at the same time) to zoom. If you click the + button twice, it enlarges roughly 1.5 the original size.
- Step back to 3X’s the distance from your monitor and check out your site. How does it look?
Take your time and take good notes. Here are the most common considerations you’ll want to pay attention to:
The Viewer’s Distance – Our traditional websites are going to be harder to see. Increase the font size, the buttons and make sure selected items are highlighted clearly for viewers. This also means increasing the padding between the elements of our pages and making sure the site can be viewed on a single screen without having to scroll. The last key here is to avoid clutter.
Fast and Functional – Just because the site looks hot, doesn’t guarantee it’ll be attractive to all viewers. With smart technology, users want function with fancy; and that means fast. Performance is a key element, which makes testing your own site a critical step in this process. Test the site for rendering times, animations and consider the impacts these will have on visitors.
One Screen, Multiple Experiences – Keeping viewers on one page cannot be stressed enough. It’s not appealing to scroll on a TV UI and it defeats the appearance of looking seamless. Unlike a desktop browser, many viewers won’t know that there’s more information below the lip of the screen. This is a TV, not a computer—so treat it that way in your design.
Keep The Human Happy – The experience using a browser on the TV will be new for most people and they can easily become frustrated. That’s why elements should be easy to find, making that new pointer a snap to use when targeting areas of the screen. Try to stay away from requiring complex or precise movements to interact with your site.
For a complete list of optimization items, you can visit Google TV’s website: https://developers.google.com/tv/web/docs/optimization_list
Have suggestions you feel we missed? Leave a comment below and share your thoughts and experiences with us.
Author Bio: Dwayne Thomas currently writes for Cable TV. You can find him on Twitter @Dwayne_CableTV.