Here are a few things to know about creating a website optimized for Google TV.   Many of these are great things to keep in mind when creating a website for any delivery method.   The section on perceived vs. actual performance is spot on.

This information is provided by Google at http://www.google.com/tv/developer/ if you would like to read more about it.

Designing for TV: A Primer

Here are a few tips for those who haven’t designed for TV before. In a television environment, you must:

• Understand that content is king.
• Remember that TV is social. – Offer ways for individuals to use your site or apps in social settings.
• Learn the pros and cons of TV screens and audio.
• Make it easy.

Simplicity above all

Successful TV interfaces are simple in both concept and design. Very simple. Here are some ways to achieve an interface that is easy to understand and to use:

• Identify the vital parts of your interface before you start work. – Group content, controls and interactions by priority.
• Stick with one visible mode of navigation or one information hierarchy.
• Make the primary action reachable in one click.
• Avoid the temptation to use abstract icons.
• Limit vertical scrolling.

Navigation is critical

Getting the navigation right is essential for success. Users will quickly abandon a screen whose navigation frustrates them.

Remote controls, arrow keys, and directional pads

All input devices for Google TV will have QWERTY keyboards, but users will often navigate using a directional pad. Like remote controls, these limit the navigation model to up, down, left, right, and enter.

Users need interactions that are fast and easy to do—at a distance, with one hand, in the dark. When designing a navigation scheme:

Mouse navigation

On a TV screen, the mouse moves a pointer that is small and far away from the user. Mouse control is difficult.

To assist your users:

• Make each click target (link, button, and the like) large with ample padding for an expanded target area.
• Add a hover state to links and buttons to highlight when the pointer has hit its target.

A new kind of screen

TV screens and computer screens differ in canvas size, aspect ratio, safe areas, resolution, cropping, and pixel shape.

When designing for TV screens, you should:

• Avoid highly saturated and very bright colors.
• Make UI elements slightly larger, specifically:
• Make buttons and other click targets larger.
• Take advantage of the wide screen.
• Design for 1280×720 and 1920×1080 resolutions.
• 1280×720 resolution. Recommended width is 1152×648.
• 1920×1080 resolution. Recommended width is 1728×972.

 If you must choose one resolution, design for 720p resolution and Google TV will scale it up on 1080p resolution.

You can specify a property that controls the width of the page in your CSS.

Color

TV screens have higher contrast and saturation levels than computer monitors. Follow these guidelines when working with solid colors:

• Use pure white (#FFFFFF) sparingly. Pure whites cause vibrancy or image ghosting in TV displays. Instead use #F1F1F1 or 240/240/240 (RGB).
• Bright whites, reds, and oranges cause particularly bad distortion.

Even TV needs text

For TV, avoid lightweight fonts or fonts with both very narrow and broad strokes. Use simply constructed sans serif fonts and apply anti-aliasing to increase readability.

• Limit each paragraph to no more than 90 words.
• Break text into small chunks that can be read at a glance.
• Keep line length at about 5–7 words per line. Never go shorter than 3 or longer than 12.
• Remember that light text on a dark background is slightly easier to read on TV (compared to dark text on a light background).
• Target body text to be around 21pt on 720p and 28pt on 1080p.
• Don’t use any text smaller than 18pt on 720p and 24pt on 1080p.
• Add more leading (larger line spacing) for onscreen text than print text.

Sound matters

Google TV will often be connected to the best speakers in the household. Sound is not disruptive on TV (as it often is on a computer), So think about ways to use sound in your interface.

Keep in mind:

• Sounds should be appropriate to the living room environment.
• By default, the volume should be low.
• Some users will be listening to music from a player application running in the background. Provide a simple way to mute your website or application, and don’t make interactions entirely dependent on audio cues.

Flash on Google TV

Google TV is capable of playing 720p and 1080p Flash videos. For best performance:

• Avoid adding continuous-playing, Flash-based banner or sidebar ads on a page that includes a video. If you cannot avoid such ads, unload or stop them when a user starts watching the primary video or goes to full screen.
• To ensure a smooth video-watching experience, make sure your content uses only one instance of the media player at a time.
• Handle errors or crashes gracefully with proper recovery messaging.

Perceived vs. actual performance

Users are the ultimate judges of whether your application performs well. Developers may measure application performance in terms of how long certain operations take or how many instances of objects are created. However, those metrics aren’t important to end users. Sometimes users measure performance by different criteria. For example, does the application operate quickly and smoothly, and respond quickly to input? Does it have a negative effect on the performance of the system as a whole?

Ask yourself the following questions to measure perceived performance:

• Are animations smooth or choppy?
• Does video content look smooth or choppy?
• Do audio clips play continuously, or do they pause and resume?
• Does the window flicker or turn blank during long operations?
• When you type, does the text input keep up or lag behind?
• If you click, does something happen immediately, or is there a delay?
• Do other applications respond poorly when the application is running?

The distinction between perceived performance and actual performance is important. The way to achieve the best perceived performance isn’t always the same as the way to get the absolute fastest performance. Make sure your application never executes So much code that the runtime isn’t able to frequently update the screen and gather user input. In some cases, achieving this balance involves dividing up a program task into parts So that, between parts, the runtime updates the screen.

eye9 Design…Your Denver Web Design Company!

Related posts:

1. Google Goes Universal Last week Google made the most significant change to its...
2. Does the age of my site matter? How to fight the Google “Sandbox Effect” As they say…”communication is the basis of every relationship.” Unfortunately...
3. Focusing on Google still the best bet for SEO Google continues to gain market share and widen its lead...

Related posts brought to you by Yet Another Related Posts Plugin.

• In a world where we are constantly bombarded with media (web, print advertising); good design allows you to stand out or at a minimum hold a strong placement against your competitors
• Good design can create a bond (association) between you and and your target demographic.
• Good design clearly portrays your brand and ideals to potential clients/customers; for example, a green company emphasizing their commitment to the environment
• Good design elevates the perceived quality of services by demonstrating your commitment to excellence in everything, including your collateral

USER INTERFACE DESIGN (behind the scene) – Also known as: Information Architecture

Good design must include excellent User Interface Design. UID is summarized in the question: “how difficult (or easy) is the website to use”

• When applied to designing websites, UID refers to the structure and flow of a site. If a site is difficult to navigate, making it hard to find what you are looking for, the user most likely will not contact the site owner or purchase a product.
• Well structured websites have a natural information flow that most users will find comfortable. Comfort on the web is beneficial as there is no knowledgeable salesperson at your visitor’s side to guide them. The web is a self-service environment, with no instruction manual or training. Good UID ensures your user can find what they need, and guides them to your conversion pages
• A good user experience forms positive impressions of your product/service offerings, allowing visitors to intuitively access the information they need. This will be a primary factor in whether or not they come back!

eye9 Design is a leading Denver Design Firm providing web development and Colorado SEO.
Thanks to Bret Glassett, our Senior Web Designer, for his significant contribution to this article.

Related posts:

1. Four Design Myths Tall tales. Urban myths. In this article we tackle four...
2. Finally…flexibility in the ecommerce website and graphic design process Flexibility. Adaptation. “Rolling with the punches.” We begin every project...
3. Logo design work – Denver Design Firm eye9 Design has been hard at work churning out some...

Related posts brought to you by Yet Another Related Posts Plugin.

A website has become one of the primary modes of communication in today’s business world. It has many advantages, including

• Omnipresent: a website is not limited by geography or time zones, and can be accessed 24/7 by visitors around the world
• Transient: did you decide you want to change that marketing tagline? Found a typo in that press release? You can change content and, unlike brochures or signage, it is instantaneously available to the world

However, there are a couple challenges that companies often face

• Expertise: websites are written in coding languages that most people cannot effectively use
• Frequency: website content has a notoriously short shelf life, and needs to be updated regularly to stay fresh
• Budget: paying web designer fees to upload a press release can be a drain on your budget

Content Management Systems eliminate these barriers. They allow anyone to update the website without technical knowledge, allowing more people throughout your organization to have a role in keeping your website up to date. It also allows you to focus your technology on investing in new web development features or increasing your search engine rankings.

We have covered “What is a CMS ” and “Why you need a CMS.” In the final part of this series we cover “What is the best Content Management System? ”

eye9 Design is a leading Denver website development company .

Related posts:

1. What is a Content Management System: CMS Series Part 1 of 3 First off, what is a content management system (CMS)? As...
2. Take Control of your Website Tools with Adobe Contribute Imagine yourself at your local cell phone store, considering an...
3. Content is king for SEO Optimization Search engines operate based on algorithms that are highly guarded...

Related posts brought to you by Yet Another Related Posts Plugin.

Sometimes metaphors are helpful to explain concepts more clearly. Let’s say you need to get from Denver to Phoenix, so you need a car. Toyota has spent millions of dollars in R&D to make sure the car is dependable, efficient, and easy to drive. You may never understand the principles of aerodynamics or torque. However, if you can push the gas pedal (and the brake!) and steer the car, you do not need to understand all that.

Just like your investment in a car allows you the benefit of easy transportation, a content management system allows you to manage a website without any programming knowledge. Like Toyota, developers have spent countless hours developing dependable, efficient CMS that are easy to use. Similar to the car example above, you do not need to understand the technical principles behind the tool. You just need to know how type some text, insert a picture, or upload a file…basic tasks you likely perform every day on your PC!

Now that you know what a CMS is, check out part 2 of this series: Why you need a content management system .

eye9 Design is a leading Denver design firm .

Related posts:

1. CMS – the freedom to manage your own website Over the past several years, we have observed a strong...
2. eCommerce Web Design: free PayPal Shopping Cart vs. integrated ecommerce solutions While most of our clients choose an integrated ecommerce shopping...
3. Content is king for SEO Optimization Search engines operate based on algorithms that are highly guarded...

Related posts brought to you by Yet Another Related Posts Plugin.

One of the most significant hardware changes in the last 5 years is the ever-increasing screen resolution (measured in pixels, such as 800 pixels wide by 600 pixels high). Big, bulky CRT monitors have given way to sleek, thin flat-panel LCD’s . With this transition, screen resolutions have also changed, most notably the emergence of 1024×768 and the disappearance of 800×600.

W3C Schools, part of the main international web standards organization (W3C) , reported that in 2003 almost half of its visitors were on the 800×600 screen resolution. That number has now dropped to 8%. The statistics for our website for 2008 put the number even lower at 2%.

Since both of the above statistics are for sites in the web design industry, I looked at the statistics for 2008 for several of our clients in a variety of industries

• Printing company for financial industry: 3%
• Non-profit serving the disabled: 6%
• Business management consulting firm: 3%
• Marine exploration company: 6%

Why is this important? Size matters because increased website widths allow for the user to see more content without scrolling down the page. As you can see above, throughout a variety of industries the 800×600 screen resolution is fading into obscurity. We recommend the 1024×768 resolution to all our web design and website development clients in order to “future-proof” the sites as much as possible.

Are there larger screen resolutions coming? Of course! In fact, some 70% of our visitors have screen resolutions greater than (and not equal to) 1024×768. However, on other site reports we looked at 1024×768 is as much as half of the traffic and this resolution does not show signs of disappearing soon.

This Denver design firm calls the browser wars in favor of 1024×768!

Related posts:

1. Take Control of your Website Tools with Adobe Contribute Imagine yourself at your local cell phone store, considering an...
2. CMS – the freedom to manage your own website Over the past several years, we have observed a strong...
3. Finally…flexibility in the ecommerce website and graphic design process Flexibility. Adaptation. “Rolling with the punches.” We begin every project...

Related posts brought to you by Yet Another Related Posts Plugin.

Cell phones are a tool designed to increase your productivity. However, this particular device is accomplishing much the opposite!

As a leading Denver website designer, we have clients who come to us every week having had experiences similar to the story above. Except in this case, the cause of frustration is their website. Instead of giving them an online marketing tool that allows them to be more productive, it is far too complicated and has become a hindrance. In the end, they find themselves paying their web designer to make simple changes they would much rather be making themselves.

We use a variety of Content Management Systems (CMS), including Joomla and DotNetNuke. For those of our clients who simply need an informational “brochure website,” we use Adobe Contribute. We have implemented this CMS dozens of times for clients in virtually every industry.

Contribute allows you to add new pages, change text, insert pictures, add audio/video, build PayPal buttons, and more. However, the biggest benefit for our clients is not the features…it is the ease of use. If you know how to use word processing software like Microsoft Word, you can use Contribute.

So take control of your website tools with Adobe Contribute!

Brian Rants
President
eye9 Design

eye9 Design is a Colorado web design company, providing graphic design, web development, and SEO optimization.

Related posts:

1. CMS – the freedom to manage your own website Over the past several years, we have observed a strong...
2. Four Design Myths Tall tales. Urban myths. In this article we tackle four...
3. Finally…flexibility in the ecommerce website and graphic design process Flexibility. Adaptation. “Rolling with the punches.” We begin every project...

Related posts brought to you by Yet Another Related Posts Plugin.

1. If you have space…use it
2. >>> !!! *** Be catchy *** !!! <<<
3. Web content and printed content are the same
4. It pays to be different

Myth #1: If you have space…use it

You paid your designer to create an effective marketing piece for you and they returned a comp that is 1/2 a blank page! Why is your designer wasting costly marketing “real estate?”

This “blank” area is termed negative space, whereas an image or graphic would be considered positive space. To a designer, negative space is just another tool at his/her disposal. Often negative space can be used to emphasize composition, create visual paths, direct the focus of the viewer, and increase the dramatic effect of the overall piece.

Great design is often strikingly simple.

Myth #2: >>> !!! *** Be catchy *** !!! <<<

Some people hold the sentiment that crazy shapes, bright colors and seductive ’starbursts’ are always helpful in attracting attention. Florescent pink anyone? The fact is, just because something catches the eye does not necessarily mean the viewer will be interested enough to open, click, or otherwise respond.

A good example of effective advertising is Apple. Their marketing campaigns are quite minimalist in appearance: black and white, vast amounts of empty space, and a subtle use of color. Their collateral is elegant and reflects an attention to detail. Apple users will attest that even opening the product box is an experience in itself. People buy into the (expensive) Mac lifestyle because its aesthetics tell you this is a quality “must have” product, not because their designers resorted to cheap, flashy design tricks.

There are a variety of ways to attract the eye of the visitor, and your industry and target audience always guide these. What is effective for a used car sale advertisement may not work for a software company website.

Myth #3: Web content and printed content are the same

In most cases, your website content should be different than the content from your printed marketing collateral. All your copy should focus on your target audience and be guided by your overall marketing strategy. However, website content is unique in several ways:

• Keep it concise: website visitors have, shall we say, very short attention spans! If your visitor gets the impression that finding the content she desires will be like finding a needle in a haystack, you can be sure she will leave and likely not return.
• Click here for more info: while brevity is essential, you also want your site to be an effective online resource about your services/products. Towards that end, you can allow visitors who want to know more to dig deeper. If you have 5 reasons your product is superior to your competitor’s product, provide them in synopsis form on your products page. Each reason can conclude with “click here for more info” which guides the interested visitor to a more in-depth discussion of the topic.
• Internal Linking: one of the benefits of the web is internal, contextual linking. By using hyperlinks, you can direct users in one section of your website to another relevant section with a simple click. Make the attempt to have at least a half dozen links in the content of every page that allow the visitor to move with ease throughout your site.

Myth #4: It always pays to be different

In business, we are always looking to distinguish ourselves from our competition. Companies can do this by emphasizing a unique philosophy, an improved formula, and better customer service.

Distinctive is also good when it comes to web design. It is important that your website is distinctive, from the look and feel of the site to the marketing message it carries. We accomplish this by having you fill out a web design questionnaire that (among other things) asks how you distinguish yourselves from the competition. Our design can then highlight your unique approach and benefit to your clients.

However, occasionally clients want to take this to an extreme, and end up with marketing collateral that is completely dissimilar from others in their industry. The famous Sesame Street song said, “one of these things is not like the others, one of these things just doesn’t belong.” So while it is beneficial at times to buck the system, it is always a good idea to make sure your collateral is in line with the marketing best practices of your industry.

eye9 Design is a Colorado website design company, specializing in web and graphic design, web development, and seo optimization. Denver, CO.

Related posts:

1. Does the age of my site matter? How to fight the Google “Sandbox Effect” As they say…”communication is the basis of every relationship.” Unfortunately...
2. Marketing drives effective Web and Graphic Design Advances in web design technologies have expanded the tool-set available...
3. What you can do to increase your SEO rankings Did you know you have an essential role to play...

Related posts brought to you by Yet Another Related Posts Plugin.

We begin every project with a website questionnaire. We supply you with a time line for completion, and guide you in what input we need from you. Years of project management have helped us create a smooth process for turning out incredible web work.

That same experience tells us that there will always be curve balls, and often from the client. That is ok with us! We are used to it, and plan for it. Hear what Peter Breese of Billygoose.com said about our work.

A truly positive experience; eye9 delivered a functional site with all the bells and whistles. Not only did eye9 tolerate my ever changing vision, but they made every effort to incorporate all of the elements I thew at them.

As the design and development process progresses, it often reveals our clients’ preferences. The layout, colors, fonts, or navigation you thought you like now seem…unappealing. We work with you to accommodate your changing needs…often without any additional charge. Where a change in scope is required, we clearly articulate your options so as to choose the most strategic and cost effective option.

Flexibility. What you would expect from an elite Denver graphic and web page design firm.

Related posts:

1. eCommerce Web Design: free PayPal Shopping Cart vs. integrated ecommerce solutions While most of our clients choose an integrated ecommerce shopping...
2. Marketing drives effective Web and Graphic Design Advances in web design technologies have expanded the tool-set available...
3. CMS – the freedom to manage your own website Over the past several years, we have observed a strong...

Related posts brought to you by Yet Another Related Posts Plugin.

First of all, what is a CMS?

CMS stands for Content Management System. As the name indicates, it is a back end tool (invisible to the website visitor) that allows you to update text, pictures, and links without any knowledge of HTML. Some CMS systems even allow you to add audio, video, and PayPal buttons.

Why use a CMS?

If you frequently update your site with news, product information, product pricing, pictures, or other information, a CMS makes sense. It also makes “cents!” Having a CMS allows you to update your content, and focus your budget towards filling holes in your web strategy. For example, have you considered how much potential business you are losing by not having a search engine optimized site? Or, for ecommerce websites, adding expanded product profiles and user interface improvements (like picture zoom in/out) can increase your sales.

Can a CMS work with any website?

There is a CMS for every major website language.

• HTML: we recommend Contribute, Adobe’s (formerly Macromedia) best selling editor. It is simple for us to integrate with any HTML website, and is unmatched in ease of use. Features include the ability to include PDF’s in your web pages, add audio/video files, include PayPal buttons, and more.
  • Example of Contribute in use: Zahr & Associates
• PHP and PHP eCommerce: we recommend Mambo, an open source CMS. It is widely used and widely documented, which allows us to adapt it for just about any need. Mambo is our CMS of choice for eCommerce web site design.
  • Example of Mambo in use: Billygoose.com

Implementing a CMS

Whether you already have a website, or are just about to get going, a CMS is an important tool to consider. It gives you freedom in managing your own website, and allows you to redirect budget dollars towards essential improvements of your website.

Related posts:

1. eCommerce Web Design: free PayPal Shopping Cart vs. integrated ecommerce solutions While most of our clients choose an integrated ecommerce shopping...
2. Google Goes Universal Last week Google made the most significant change to its...
3. Web 2.0…am I missing something? Clients will ask me from time to time, with trepidation...

Related posts brought to you by Yet Another Related Posts Plugin.

What are the advantages of each?

• Integrated ecommerce shopping cart: we develop a cart on your hosting account, so that the entire secure shopping and checkout process stays on your server. This allows us complete control over the shopping experience. It also enables us to use an integrated content management system (CMS) like Mambo, and gives you the SEO benefit of having all the product information on your domain.
  If you are looking for a flexible, powerful, and scalable long term ecommerce solution, choose an integrated shopping cart.

  • Example: Sumbody.com
• External ecommerce PayPal shopping cart: we develop a shopping cart which allows your visitors the benefit of buying multiple quantities and items. Since it is hosted entirely on PayPal’s servers, this requires less setup and therefore is less expensive.
  If you are new to ecommerce, or simply have limited ecommerce needs, the free PayPal shopping cart is an excellent alternative.
  • Example: TheHoopSource.com
  • Here what Justen Byler of TheHoopSource.com says about his new site:
    eye9 took a small business idea and created a website to suit even the biggest business. The overall look and the functionality, including PayPal incorporation into the site matched and then exceeded our expectations. We look forward to a long relationship with eye9.

Are you interested in taking advantage of the myriad of opportunities presented by internet commerce? Contact us today, and select “eCommerce” for your area of interest.

*A note of clarification: PayPal does offer payment processing services (Website Payments Pro) for integrated shopping carts as well. The free PayPal shopping cart demonstrated here (Website Payments Standard) is an external shopping cart, hosted on PayPal’s servers.

eye9 Design provides affordable ecommerce website design services and Denver web site development to our clients across the nation and around the world.

Related posts:

1. Google Goes Universal Last week Google made the most significant change to its...
2. Web 2.0…am I missing something? Clients will ask me from time to time, with trepidation...
3. Marketing drives effective Web and Graphic Design Advances in web design technologies have expanded the tool-set available...

Related posts brought to you by Yet Another Related Posts Plugin.