It’s not a bad idea to review one’s website design at least a couple of times a year to ensure the design remains solid. Recently, WEBphysiology took a spoonful of our own advice and performed a cross-browser review of our site, which resulted in us making a couple of small user interface (UI) changes. One change was to shift the social tabs from the right of the screen to the top. The other was to increase the font size of the navigation menu. The reason for the first change was because the social tabs on the side were overlapping slightly depending upon screen resolution settings. We also felt that the navigation menus appeared a bit small on some browsers, and even more so when they had to start competing with the newly repositioned social tabs.
Web Environmental Statistics
It is important that one understands the current Internet environment before starting on their website design. Something to understand when it comes to statistics around the web user environment is that they are inherently lacking as there is no one single repository of all users on the Internet. The statistics are typically taken from a given site’s visitor analytics. The more popular the site, the more global the site and the less of a niche that it serves, the better chance that the statistics will be more representative and helpful.
If you Google for “browser statistics” the likely first position result will be W3C Schools, an organization that deals with Web education. The issue with this site’s stats is that their visitors tend to be developers. Developers, in general, tend to have better hardware and are running more current versions of software. They also tend to use browsers that are not necessarily mainstream and often have larger computer displays.
Another site that we like when reviewing Web standards is Stat Owl. It’s the site I reviewed recently to gather the statistics I’ll be noting below. As they note in their “About the Data” page, their data consists of stats from about 28 million monthly unique visitors, mainly in the US. That’s a pretty small subset of the total population but they seem to feel their data is pretty representative.
One other place to look for statistics is your own site’s Google Analytics figures. If you have an established site then you may have enough data to see what the current visitors’ environments look like. Something to review is not only what the general environment of your users looks like, but if there appears to be any negativity around a given environment. For example, are bounce rates higher for a given browser, for a given screen resolution….
As you can tell, it really is difficult to find reliable standards that you can rely upon 100%, but you have to start somewhere. I think the below will provide a reasonable idea of where that somewhere may be.
The most popular screen resolution, according to Stat Owl, is 1024 pixels by 768 pixels. It had 23.7% of the market. That’s a good first step when you are trying to decide what minimum resolution you should use when designing your website. The next step is to see if there is a lower resolution that still has a lot of users. Working down the list, the first screen resolution that was lower was for a resolution of 800 pixels by 600 pixels. The good thing, the percentage of users for this resolution was a mere 2.1%. As such, our opinion is that it probably is safe to design around a resolution of 1024 x 768.
There are a few things to keep in mind when it comes to color usage in web design. The first is that color is a very personal thing and you will likely not please everyone when it comes to your choice of colors. So, how does one deal with this? Well, try and keep the wild colors off your site and don’t use a huge range of colors as you don’t want your message to be missed as a result of color distraction. In general, also try to stay away from trendy uses, such as light colored text on a dark backgrounds. Otherwise your site will likely age out sooner.
More important considerations when it comes to selecting your color palette is to ensure that the contrast is high enough to make the site readable. You will also want to ensure that your color selections will work for that segment of the population with color vision deficiencies. You can find more information on these aspects of color selections in our Web Design Color Considerations article.
Browser compatibility is really only an issue if you push the development environment without the proper budget. Why? Whenever you build a website you should ensure that all current browsers, running within different operating systems, present a similar look-and-feel. This can be time consuming and costly as, even with Web standards, consistencies between browsers is not all that it should be. If you decide to use design features that are not fully supported in all browsers, you will need to spend time to make adjustments specific to those browsers that can’t support the design or that require different code to support it. Rounded corners on boxes is a great example in that Internet Explorer does not support it natively (i.e., without graphic elements) and the other browsers each implement it with a different CSS definition.
Some browsers have implemented features based upon defined future standards. Our recommendation is to work within the current standards as much as possible and to ensure that testing takes place on at least the top 90% of the browsers / operating systems that your visitors use. Keep in mind, though, that if you don’t do 100% testing you may not be supporting a subset of your traffic that provides a dis-proportional size of your revenue. The other thing to understand when thoughts like, “Well, IE 6 is so old that I don’t care about people that aren’t savvy enough to upgrade.”, is that a lot of corporations don’t upgrade software as quickly as the small companies or individual consumers. It’s cost prohibitive and can lead to disabling their companies Intranet applications.
So, what is the most used browser? With developers, if you look at the stats from W3C Schools, it appears to be Firefox. With the general Internet population, which StatOwl likely gravitates toward, it probably is Internet Explorer.
Adobe Flash, used appropriately, also can add a certain level of pizazz to a site. Complete sites built upon Flash, however, are not recommended unless you can be 100% certain that, if a user doesn’t have Flash installed, they would be willing to install it in order to view your site. Otherwise, you will need to budget in the building of two sites, a Flash site and a non-Flash site.
The next item to be cognizant of is that of the bandwidth, or connection type, of your visitors. This is useful in deciding how to architect your pages, that is, can you have a little bit more page weight, or do you need to limit the amount of content on any given page? When in doubt, you always will want to go for a lighter page weight and ensure that navigation is well thought out. Visitors with the fastest connection are still likely to bounce off your site if they have to wait very long for a page to load. Also, if your site gains in popularity, something everyone wants, then having lighter page weights will allow your site to better scale to increased traffic. A few ways to keep the weight down would include the following:
- Optimize graphic elements and don’t use more than necessary
- Consolidate and minimize CSS and place it in an external file
- Use sprites for graphics were you can
- Keeping HTML elements to as few as possible (e.g., don’t use a <div> tag to generate a line break)
- Incorporate caching schemes
Conclusions on User Interface Basics
Our “standard” recommendations, with regard to design standards, is as follows:
Screen resolution: 1024 x 768
Browser Compatibility: Don’t include features that aren’t in the current HTML or CSS releases. Test across all major browsers and operating systems.
Color Considerations: Keep it tasteful, keep it classic, come up with a defined site wide color pallet and remember to design so as not to leave out those with color vision deficiencies.
Plugins: Use jQuery and Flash appropriately and always ensure that they will degrade gracefully.
Page weight: Always do what you can to keep your page weight down.
Navigation: Make certain it is clear, easy and doesn’t veer far from expectations.
Now you should be set to start designing your new site or review your current site.