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.
Coming off this exercise it seemed like a good idea to share some of the very basics of site design, such that you roll out a site that rocks right off the bat. This will better ensure that any future changes, as a result in shifts in visitor environments, are small. The first step we took when looking over our site was to check that it was still compatible with the various UI standards. Things like browsers being used, screen resolutions, javascript enablement, Flash availability and the like can change over time as new versions of software are introduced, folks upgrade their hardware, etcetera.
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.
Screen Resolution
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.
Color Considerations
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 Support
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.
Plugins: Javascript, Flash
Javascript is a very popular scripting language, especially Ajax and jQuery. It brings a more elegant and smooth look to most websites as well as to make some functionality more intuitive and user friendly. This said, add-on’s like Javascript and Flash should be used with the understanding that not everyone has javascript enabled or Flash installed. Javascript is still disabled by some folks who hold on to old belief that disabling it makes their browser, and environment, more secure. In fact, the main issue with having Javascript enabled is really the annoyance of pop-up’s. Fortunately, most modern browsers now have pop-up blocking as a separate option.
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.
So, what does StatOwl have to say about plugin availability? Well, in general it appears that most users have Flash installed. This may change a little bit with Apple’s decision to stop providing it by default. As for Javascript, it is a little difficult to discern in that they specify Java within their plugin section and Javascript is in a separate Web Standards Javascript Versions section. Our take is that Javascript is typically enabled, which is the default.
Our recommendation on the use of jQuery, Ajax, Flash and other client side scripting, is that they should be used based upon need and budget. If you simply need a standard site without special features, which is the bucket most sites fall into, then save the overhead and build a nice looking site utilizing current release XHTML and CSS or using server side code, like Java or PHP. If you have the need and have the budget then utilize client side scripting tools appropriately for the task, and be certain to gracefully degrade for those visitors who don’t have Javascript enabled or Flash installed.
Connection Speed
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
- Consolidate and minimize javascript libraries and place them 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.
