Berry Web Labs
Recent Posts
Categories
Archive
How do visitors see your web site? An explanation of accessibility.
Gone are the days when visitors to your web site were using just a handful of browsers and all you had to do was make sure it worked in Internet Explorer and maybe a few others. Today there are many more browser versions, each having their own nuances and quirks on how they display your site. Visitors are also accessing your site from an ever-increasing variety of devices like phones, netbooks, tablets, iPads and other handheld devices. So as a web site owner how can you possibly make sure all these visitors have the same experience when using your site? The short answer is… you can’t.
But that doesn’t mean you should give up. Even though it’s almost impossible (and certainly cost prohibitive) to build your web site in a way that gives every visitor the exact same experience it is totally possibly to make sure that all users have access to at least the basic information and functionality. This is done using a technique known as progressive enhancement. The idea behind progressive enhancement is actually pretty simple, you start by building your site to support the lowest common denominator which should work with most devices, then incrementally add features and functionality in a way that allows more advanced devices to use them without impacting the basic version of the site available to older and less advanced browsers and devices.
Here at Berry Web Labs this is the approach we use for every web site we build, including our own. To give you an idea of exactly what I’m talking about let’s look at an example using berryweblabs.com.
That looks pretty good (although I’m probably biased since I designed it). And it should! Viewing berryweblabs.com in Firefox gives me access to pretty much all the modern browser features and there’s really no excuse for anything to look “off”.
Let's start by removing javascript functionality. Javascript is a browser feature that allows web developers to manipulate the web page at specific times or in response to user actions. Many mobile devices still lack support for javascript and some users turn it off in their web browsers for security reasons.
The effect on the Berry Web Labs site was pretty minimal. The only difference is a slight change to the heading fonts because we were using a javascript trick to get fancy fonts not normally available in the browser. We provided a standard backup font so the page still looks pretty good.
Now let's take away support for style sheets. Style sheets are common way of defining the layout and style of a page. Most devices have some level of style sheet support but it varies and some users turn style sheets off to improve download performance.
As you can see that made a big change in the appearance of the page. We lost all the colors and the page layout changed from horizontal to vertical. But, the page is still totally usable and well organized.
Finally, let's remove support for images. For many web sites, if they haven't already broken down, it's image support that will do it. All the time I come across sites that heavily rely on images for navigation and content. Unfortunately images tend to be one of the first things that mobile device users turn off to improve performance when browsing.
Wow! Now there are none of the original colors on the page but everything still looks organized and clear. In fact, this view functions perfectly fine and may even be ideal for someone using a small hand held device.
It's important to keep in mind that you don't always need to support every type of browser and device. But you should at least have an understanding of how visitors see your site. We typically recommend that you use a web analytics tool to gather data about what types of browsers and devices people are currently using to visit your site. This give a pretty good indication of what you should be targeting. However, with constantly evolving technology it's important to monitor if the visitor profile changes over time.