The synchronization of TV content and web content has definitely heralded a new era in but it has at the same time opened us Pandora \u2019s Box, since designers are going to face a barrage of troubles to make a website looks impressive even when it is being viewed in TV. Though it is relatively a new area of work, you need to arm your website with adequate ammo so it can face the challenges of the coming generation with equal ease.<\/p>\n
![\"Area](\"https:\/\/www.webguru-india.com\/blog\/wp-content\/uploads\/2010\/10\/Google-TV.jpg\" "\\"Google-TV\\"")
<\/p>\n
Area of Focus<\/strong><\/h2>\nSince TV viewers sit far from the TV screen, you might find it hard to make your website readable at that distance. Navigation is another segment where troubles are expected to surge since just putting links on the right side panel would not work here at all. Here are some other issues that you need to focus:<\/p>\n
\n- Blank space between different elements has to large enough so that viewers can figure out the difference between them without making any strenuous effort. This typically known as white space or padding and you need to be a little particular while using white space your website for TV.<\/li>\n
- Use large fonts and graphics so that viewers can recognize them even when they are viewing it from long distance.<\/li>\n
- Since wide screen monitor comes with a large and usable horizontal space, it is always better to feature navigation in the side, as it will help you place important elements horizontally.<\/li>\n<\/ul>\n
![\"Layout\"](\"https:\/\/www.webguru-india.com\/blog\/wp-content\/uploads\/2010\/10\/GoogleTV-works.jpg\" "\\"GoogleTV-works\\"")
<\/p>\n
Layout<\/strong><\/h2>\nLayout is another important area where you need to give utmost attention. Since TV screen contains a limited number of pixels, you need to be a bit cautious while using images in your website.<\/p>\n
Make It Easy On the Eyes<\/strong><\/h2>\nTry to shun lightweight text or narrow text. Instead, keep your faith on simple sans serif font and apply anti-aliasing in order to increase readability. It is good to make a choice between Droid Serif and Droid Sans font families, since both of them are supported by Google TV.<\/p>\n
\n- Font embedding techniques can be adopted for further customizing users\u2019 experience.<\/li>\n
- Try to sum up a line within 5 to 7 words. Do not make it longer than 12 words.<\/li>\n
- Break long text into small chunks.<\/li>\n
- Use light text on dark background.<\/li>\n
- Paragraphs should not exceed 90 words.<\/li>\n<\/ul>\n
![\"Color](\"https:\/\/www.webguru-india.com\/blog\/wp-content\/uploads\/2010\/10\/Quick-Tour.jpg\" "\\"Quick-Tour\\"")
<\/p>\n
Color Guidelines<\/strong><\/h2>\nCompared to computer screen, TV screen have higher saturation and contrast level and therefore, you need to maintain some guidelines to make your website look impressive and unique:<\/p>\n
\n- Do not use bright colors since they can cause strain on eyes and can get distorted at times.<\/li>\n
- Be sure to test your website in different TV modes such as Games, Vivid, Standard, Theater etc.<\/li>\n
- Try to use pure white sparingly. Instead, you can use 240\/240\/240 (RGB) or #F1F1F1.<\/li>\n
- Test your website on lower quality displays.<\/li>\n<\/ul>\n
![\"Limit](\"https:\/\/www.webguru-india.com\/blog\/wp-content\/uploads\/2010\/10\/TVandWeb.jpg\" "\\"TVandWeb\\"")
<\/p>\n
Limit scrolling<\/strong><\/h2>\nIt is a fact that Google TV does not scroll down seamlessly and smoothly and therefore, try not to feature large content in your website.<\/p>\n
Know The Safe Area<\/strong><\/h2>\nEvery TV has a safe area i.e. an area that is surrounded by a small amount of screen space. If you place anything beyond this safe area, it will not be displayed. Therefore, try to keep 10% margin at each of these resolutions:<\/p>\n
\n- 1920×1080 resolution, recommended width is 1728×972<\/li>\n
- 1280×720 resolution, recommended width is 1152×648<\/li>\n<\/ul>\n
Keep navigation Simple<\/strong><\/h2>\nSince people watch TV to relax, you should stop playing with the navigation system. Make it dead simple.<\/p>\n","protected":false},"excerpt":{"rendered":"
Google is now having an all-pervasive presence in both virtual and physical worlds. It is in your office, in your home, in the roads (Google Street View) and by making a foray into the Television industry, it has sneaked into your bedroom. Now, do not hate it for doing so because Google is redefining the… Continue reading Website Design For Google TV: Learn The Tricks, Tips and Trends<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[],"aioseo_notices":[],"views":2123,"_links":{"self":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049"}],"collection":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/comments?post=1049"}],"version-history":[{"count":9,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049\/revisions"}],"predecessor-version":[{"id":11929,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049\/revisions\/11929"}],"wp:attachment":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/media?parent=1049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/categories?post=1049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/tags?post=1049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n
Layout<\/strong><\/h2>\nLayout is another important area where you need to give utmost attention. Since TV screen contains a limited number of pixels, you need to be a bit cautious while using images in your website.<\/p>\n
Make It Easy On the Eyes<\/strong><\/h2>\nTry to shun lightweight text or narrow text. Instead, keep your faith on simple sans serif font and apply anti-aliasing in order to increase readability. It is good to make a choice between Droid Serif and Droid Sans font families, since both of them are supported by Google TV.<\/p>\n
\n- Font embedding techniques can be adopted for further customizing users\u2019 experience.<\/li>\n
- Try to sum up a line within 5 to 7 words. Do not make it longer than 12 words.<\/li>\n
- Break long text into small chunks.<\/li>\n
- Use light text on dark background.<\/li>\n
- Paragraphs should not exceed 90 words.<\/li>\n<\/ul>\n
<\/p>\n
Color Guidelines<\/strong><\/h2>\nCompared to computer screen, TV screen have higher saturation and contrast level and therefore, you need to maintain some guidelines to make your website look impressive and unique:<\/p>\n
\n- Do not use bright colors since they can cause strain on eyes and can get distorted at times.<\/li>\n
- Be sure to test your website in different TV modes such as Games, Vivid, Standard, Theater etc.<\/li>\n
- Try to use pure white sparingly. Instead, you can use 240\/240\/240 (RGB) or #F1F1F1.<\/li>\n
- Test your website on lower quality displays.<\/li>\n<\/ul>\n
<\/p>\n
Limit scrolling<\/strong><\/h2>\nIt is a fact that Google TV does not scroll down seamlessly and smoothly and therefore, try not to feature large content in your website.<\/p>\n
Know The Safe Area<\/strong><\/h2>\nEvery TV has a safe area i.e. an area that is surrounded by a small amount of screen space. If you place anything beyond this safe area, it will not be displayed. Therefore, try to keep 10% margin at each of these resolutions:<\/p>\n
\n- 1920×1080 resolution, recommended width is 1728×972<\/li>\n
- 1280×720 resolution, recommended width is 1152×648<\/li>\n<\/ul>\n
Keep navigation Simple<\/strong><\/h2>\nSince people watch TV to relax, you should stop playing with the navigation system. Make it dead simple.<\/p>\n","protected":false},"excerpt":{"rendered":"
Google is now having an all-pervasive presence in both virtual and physical worlds. It is in your office, in your home, in the roads (Google Street View) and by making a foray into the Television industry, it has sneaked into your bedroom. Now, do not hate it for doing so because Google is redefining the… Continue reading Website Design For Google TV: Learn The Tricks, Tips and Trends<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[],"aioseo_notices":[],"views":2123,"_links":{"self":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049"}],"collection":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/comments?post=1049"}],"version-history":[{"count":9,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049\/revisions"}],"predecessor-version":[{"id":11929,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049\/revisions\/11929"}],"wp:attachment":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/media?parent=1049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/categories?post=1049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/tags?post=1049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Try to shun lightweight text or narrow text. Instead, keep your faith on simple sans serif font and apply anti-aliasing in order to increase readability. It is good to make a choice between Droid Serif and Droid Sans font families, since both of them are supported by Google TV.<\/p>\n
- \n
- Font embedding techniques can be adopted for further customizing users\u2019 experience.<\/li>\n
- Try to sum up a line within 5 to 7 words. Do not make it longer than 12 words.<\/li>\n
- Break long text into small chunks.<\/li>\n
- Use light text on dark background.<\/li>\n
- Paragraphs should not exceed 90 words.<\/li>\n<\/ul>\n<\/p>\n
Color Guidelines<\/strong><\/h2>\n
Compared to computer screen, TV screen have higher saturation and contrast level and therefore, you need to maintain some guidelines to make your website look impressive and unique:<\/p>\n
- \n
- Do not use bright colors since they can cause strain on eyes and can get distorted at times.<\/li>\n
- Be sure to test your website in different TV modes such as Games, Vivid, Standard, Theater etc.<\/li>\n
- Try to use pure white sparingly. Instead, you can use 240\/240\/240 (RGB) or #F1F1F1.<\/li>\n
- Test your website on lower quality displays.<\/li>\n<\/ul>\n<\/p>\n
Limit scrolling<\/strong><\/h2>\n
It is a fact that Google TV does not scroll down seamlessly and smoothly and therefore, try not to feature large content in your website.<\/p>\n
Know The Safe Area<\/strong><\/h2>\n
Every TV has a safe area i.e. an area that is surrounded by a small amount of screen space. If you place anything beyond this safe area, it will not be displayed. Therefore, try to keep 10% margin at each of these resolutions:<\/p>\n
- \n
- 1920×1080 resolution, recommended width is 1728×972<\/li>\n
- 1280×720 resolution, recommended width is 1152×648<\/li>\n<\/ul>\n
Keep navigation Simple<\/strong><\/h2>\n
Since people watch TV to relax, you should stop playing with the navigation system. Make it dead simple.<\/p>\n","protected":false},"excerpt":{"rendered":"
Google is now having an all-pervasive presence in both virtual and physical worlds. It is in your office, in your home, in the roads (Google Street View) and by making a foray into the Television industry, it has sneaked into your bedroom. Now, do not hate it for doing so because Google is redefining the… Continue reading Website Design For Google TV: Learn The Tricks, Tips and Trends<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[],"aioseo_notices":[],"views":2123,"_links":{"self":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049"}],"collection":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/comments?post=1049"}],"version-history":[{"count":9,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049\/revisions"}],"predecessor-version":[{"id":11929,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/posts\/1049\/revisions\/11929"}],"wp:attachment":[{"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/media?parent=1049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/categories?post=1049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webguru-india.com\/blog\/wp-json\/wp\/v2\/tags?post=1049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}