01 is powered by Vocal creators. You support Lynette Bobbitt by reading, sharing and tipping stories... more

01 is powered by Vocal.
Vocal is a platform that provides storytelling tools and engaged communities for writers, musicians, filmmakers, podcasters, and other creators to get discovered and fund their creativity.

How does Vocal work?
Creators share their stories on Vocal’s communities. In return, creators earn money when they are tipped and when their stories are read.

How do I join Vocal?
Vocal welcomes creators of all shapes and sizes. Join for free and start creating.

To learn more about Vocal, visit our resources.

Show less

Special Challenges of Designing for the Web

Viewer and location do not matter—provided, of course, that everyone viewing the painting has equivalent lighting.

I am an artist. It’s what I do. When I paint a picture, I have everything I need in order to do a complete painting, including my paints, brushes, palette board, canvas, and various painting media, solvents and whatnot to control the paint consistency, and paint thinner or Pink Soap Brush Cleaner to clean up when I’m done. When my painting is completed, it will appear the same whether I am viewing it, my wife is viewing it, or someone else. Viewer and location do not matter, provided of course that everyone viewing the painting has equivalent lighting. The actual painting is the same. We may “see” or perceive different things about the painting, but that is not attributable to actual pigment or surface differences from one viewing to the next. The materials are the same as what I used when I painted it.

Similarly, if I design a brochure on my computer and have it printed on certain, specified materials, using specified inks and coatings, it should appear the same no matter who is viewing it or where, again assuming equivalent lighting conditions.

Designing for the web? Not so much. And there’s the rub.

The viewing conditions of user A will likely be different from the conditions under which I designed the website, possibly unrecognizably so. The reasons for this are varied, but they are all the result of the fact that the way my website design appears to each viewer is dependent upon a diverse range of technologies and delivery modes that are not under my control. I simply cannot promise you that my design will look great to every possible site visitor. Some of it is related to the actual computer equipment the viewer is using, and some of it is related to a browser setting that the user may change. Following is my list of some of the factors that may cause one person’s experience of my website to differ from another user’s.

Items Under the Control of the Viewer

Browser Settings

There are many features that website visitors can control or change simply through configuration settings in the particular browsers they are using, such as:

  • Text Size
  • Menus and Menu Bars that are enabled, which will minimize the amount of viewable screen space (i.e., the “View Port”)
  • The browser plug-ins or extensions that are running
  • Browser behavior regarding cache memory
  • Browser behavior regarding javascript
  • Auto-Fill options for forms (e.g., some browsers will highlight certain, common form fields in yellow to signify that they can be auto-filled by the browser)
  • Hyperlink Color and Appearance
  • Platform, Browser, and Version

Most of the time, I use Chrome because I find that it launches more quickly. However, there are dozens of other browsers out there, with a handful being used by the largest share of visitors. While modern browsers should all be standards compliant, and most of them are, there are still major display differences between some browsers. This can have a profound effect on the user experience of a particular website. Add to this situation the fact that there are different versions of each of these browsers being used out there, and that there are often some big differences between versions (think Internet Explorer 7… or 8, or 9, or… okay, just think Internet Explorer), and you can see how there are a lot of possibilities for the user experience to vary dramatically.

Screen Size and Resolution

Going back to the brochure analogy for a moment, when I design the brochure, I design it to be printed at a particular size, and it will be printed at that size and will remain that size for all time after printing. However, when I design my website on my 1440 by 900-pixel monitor, and I design it to look great at that size, I have to understand that the number of screen sizes on which my case study paper website might be viewed are almost as varied as the number of browsers and versions in use. So, while it might look great on my computer, with a nice background effect filling a good amount of the screen and the content popping out of the middle, some visitors may not see any of my cool background at all, and the punch is lost.

Color

Another factor related to the user’s screen is that of color. So, I ordered my brochure with this nice, fiery red color in the logo, and I knew that what would come from the printer would be what I designed. I mean, Pantone 185 C is Pantone 185 C. Same-same, right? But, that is with pigment, while my website uses light, not pigment. The problem is that the colors viewed in my website are dependent upon the specific hardware and other technology by which the site is rendered to the end user, that is, their monitor, video card and driver. And, ultimately, the user (but not the web designer) has control over his or her color settings. Granted, most people probably never change them from the factory settings, but you will still find color differences from one monitor to the next.

If that were not true, there would be no need to spend hours in Best Buy looking at the same picture on a hundred different TVs to pick the best one before you break out the plastic.

Typography

The fonts I use on my hypothetical website are, for the most part, dependent upon the users having the same fonts on their computers. Or, at least, that was the case until fairly recently, and is still the case for the vast number of websites out there that do not use any font embedding technologies. I say “recently,” even though Microsoft had an early rendition of font embedding some time ago, but it was not dependable across platforms and browsers. Nowadays, there are a handful of different tools for embedding fonts in your website that are more cross-browser compatible. One of them, uses javascript to render non-standard fonts, while others generate embedded font files that the server will load with the web page. Both of these methods do carry a little overhead, which may make the pages load a bit more slowly, but they are a huge improvement over what was available before.

Issues Related to Technology

Internet Service

A person’s Internet Service Provider (ISP) can also have an effect on his or her user experience of a website. Of course, the more graphics intensive the website is (image-based graphics, that is), the longer it will take to render in the user’s browser. And even though more and more individuals are getting broadband, now we have the explosion of portable devices, such as smart phones. Being that the bandwidth for portable devices is a bit slower than wired broadband service, if I design for mobile devices, the need for graphics that are more optimized for fast download is still present.

Another issue related to Internet Service that sometimes comes into play is the manner in which certain corporate networks provide internet access to the computers on the network. I have occasionally run into situations where a client was not seeing the latest design revision I had posted, even though I was seeing them. In those cases, the problem ended up being due to the existence of a proxy server on their network which was showing them cached pages of previous versions.

The Viewer’s Hardware

The viewer’s computer hardware can also have a deleterious effect on their experience. In particular, I am referring to the CPU and the video card, both of which will determine how graphics are rendered on that person’s computer. Granted, most computers these days will be capable of rendering more than 256 colors, as used to be the case. However, here I am referring to the speed with which the graphics are rendered. No matter how awesome my graphics may look, even on a slow computer, if they take too long to render, the person will leave. So, even though it’s not a design-created problem, it nonetheless is part of the whole user experience, so if there is anything I can do about it in terms of better optimization of my graphics or marking them up (that is, writing the code to display the graphics) using more CSS color and fewer image-based graphics, then I will probably be better off if I do.

Server Resources

There are some issues related to the server resources that the web host provides which can have unintended consequences for the user experience. There are some Unix-based graphics and drawing technologies that I might want to utilize on my website. If so, then I need to make sure that those resources or modules are available to me, otherwise my site will not display nor function as intended.

In addition, if by chance the hosting server is running low on RAM (hey, it happens), then my site may not load at all. Not that this would be a typical issue you would encounter, nonetheless, it does represent yet another factor that can affect the experience of my designs, which is not within my control.

So, you can see that there are a number of possible factors, many of which are outside of my own control, that can have the final say about how my designs are experienced. I can skirt some of these issues by the way I design and code. As for the rest, well, it’s all part of the life of a web designer.

And I still can’t see myself doing anything else.

Now Reading
Special Challenges of Designing for the Web
Read Next
The 10 Best Gaming Computers for Hardcore Gamers