Designing Websites Under Information Technology Restrictions

Oct 20 2010 by Maria Malidaki | 17 Comments

Designing Websites Under Information Technology Restrictions

Technology, and especially information technology, evolves rapidly. People have come to terms with the constant, big and fast changes that fall upon the hardware and software we use.

It’s considered common practice to adapt to these changes and to keep your software and hardware up to date. Upgrading your browser to the newest version takes minutes. Operating systems are updated every couple of years. It’s not unusual to purchase a new computer every 3 years.

Oh, Is That So?

As to be expected, there are still individuals (many, actually) that aren’t up to speed with modern technology trends. They might be your older siblings, your grandparents, your boss. They might be people born and raised in an era where computing devices weren’t as "mainstream" as it is today. They may be individuals who didn’t have access to computers or the Internet due to economic situations or geographical restrictions.

Reading this article on the Web in a web design/web development-oriented site (probably through a modern and standards-compliant web browser[1] like Firefox or Chrome), it might be difficult for you to imagine these situations. But, especially in the mainstream, designing for users and clients with limited technology backgrounds is all too common; individuals that were submerged into information technology without choice.

What happens when we want our websites to be useful not only to the technology-savvy, but also to people with little IT background?

Oh, Is That So?

Your Old-Fashioned Clients and Their Restrictions

Clients with IT restrictions are not as scarce as you think they may be. If you happen to work for an academic institution like me, you would find a fair amount of such people who want a personal website for presenting their bio, research and publications, class schedules, resources for students, and so forth.

You might wonder why people with no interest in information technology would want a website. Possible answers are that either their institution requires it by law (as it is in my country), or because they want to stay competitive with colleagues who have their own websites. They might see the value of having a website, regardless of their familiarity with the underlying technologies and concepts associated with it.

So you create a wonderful website using the latest, greatest and most user-friendly content management system (CMS) you can find. It looks stylish in today’s standards. It’s highly functional and meets the client’s objectives. But when the time comes to present it to the final judge — our old-fashioned client — oh, the disaster!

Later, you discover that the browser they’re using is IE6. The spiffy Ajax script you used to load images asynchronously and remotely from the Flickr account you set up for them wasn’t working because they had JavaScript disabled. They couldn’t log into the admin panel of the CMS to edit their posts because the system needed them to have cookies enabled, and they have turned off that feature as well.

The layout looks terrible because, as we all know, IE6 has the tendency to completely waste the hours of CSS perfection we put in.

The client doesn’t understand why the colors aren’t brighter here and there, or why there’s no obvious indication for the news section or their email address (and by "obvious indication", I mean the missing flashing text and spinning @ symbol animated GIF we forgot to use).

Your Old-Fashioned Clients and Their Issues

There’s a horizontal scrollbar hiding 20% of the site’s layout. "Where are the links? Oh wait, that was a link? It wasn’t blue and underlined, I didn’t see it."

Your client is clearly confused with the work you have produced. And you are a bit flustered and mildly frustrated. You check the calendar just to make sure and, yes, it’s says "2010." Scripts are common in websites, computer screen resolutions are no longer at 800×600, there is a handful of awesome standards-based browsers available for free that can be installed in minutes (or at least an upgraded version of IE), and crazed animated GIFs are passé.

But it seems that your employer is oblivious to these facts. Where do we go from here?

Step 1: Education

Taking the time to explain what your client has been missing out on is a must, and the professional way to go in this matter. You are obliged to educate them on these advancements and requirements.

Educating your employers is important for two reasons.

Educating Clients is Part of the Job

You respect your client’s needs and want them to get the most out of what will be their future web presence. Since they’re using the Web, they will probably meet the technology they are rejecting/ignoring eventually. Furthermore, they will remember the advice and information you shared with them, and will be thankful for the time you took to explain to them these things.

Using metaphors that your client will understand is an effective teaching and relational technique. For example, since I mainly work with researchers and academicians, I tell them that using IE6 is like using a magnifying lens instead of a microscope (i.e., a modern browser) to browse their cell collections (i.e., websites).

Your Professional Reputation is at Stake

If you don’t take the time to explain the "malfunctions" of the site you built, you might give the idea of being unprofessional and lacking knowledge. Use your expertise to show that you understand what has happened and that you can fix it to comply with your client’s needs.

Step 2: Accept That Some People Will Not Change

From my personal experience, you probably won’t manage to convince many of your clients to use modern IT practices, no matter how good your arguments are.

People still used IE6 even when I would install another browser for them; upgrading to a recent version of IE would be a futile attempt because the system would not allow it.

I would fix their monitor resolution to properly fix their screen so as to not blur or stretch images, but they were so used to how things were that they would quickly go back to 800×600, even if web pages looked malformed.

They are wary of JavaScript. And even if I take the time to set the security settings for them on their main computer, they’ll have other devices such as their home computer and laptop that won’t be set up properly.

Long story short: if you know that the client and the audience of a particular site will be in these outdated IT situations, you must create designs that work in these environments.

Step 3: Know the General Design Concerns

To get a website working right under restricted conditions, I personally prefer completely relying only on well-formed and clean HTML and CSS. This ensures cross-browser compatibility and reduces the chances of rendering issues.

Scripting

The dilemma of whether to use scripts or not is a big one. JavaScript, for example, is used for social media integration and third-party web services such as Google Analytics. You can certainly get away without social media integration if the client doesn’t care about the Social Web, and you can use server-side analytics software for tracking site stats, but it still does narrow down your options for providing a rich and engaging web experience.

If you want to use scripts for functionality, prepare your customers on the matter. Ask them if scripts are activated in their browser. Ask them what browser they’re using and give them instructions on how to check JavaScript or cookie options. Better yet: You can write a script that checks for these options — feature detection, if you will.

Explain the importance of these scripts and how scripts can enhance the user experience of a site. If you can’t justify the use of scripts to your client — then do you really need them?

And of course, you should always code for graceful degradation. While building the website, try to imagine a situation where JavaScript and cookies are turned off: is your site still functional? Do main elements like navigation appear properly? As a live example of graceful degradation, check out this accessible jQuery slideshow. Turn off JavaScript in your browser, and you will notice that the content is still accessible.

The site must be able to sustain functionality even when scripts are off. It’s OK if it doesn’t look and work optimally; the important thing is that, in these situations, you’re not making JavaScript a barrier to accessing and using the site.

Content Layout

Content must be presented in a uniform way. Your users will want to view the contents of the website in a templated, standardized and predictable manner, which means each element and component (e.g., headings, header, navigation menu, body text, and footer) mustn’t change to avoid confusion. Simple is better.

Page Layout

If you need to design for smaller-screen resolutions without the benefit of being able to use CSS3 media queries, it is a good idea to go with a fluid layout so that your layout adjusts depending on the size of a person’s monitor. (Read about different layout types.)

This avoids situations where content is partially hidden horizontally, caused by fixed-width layouts that are wider than the user’s monitor.

In order to help with fluidity, and hence resolution issues, try to keep the title and logo of the header in one place (say, left or centered).

Avoid setting fixed widths, especially for the site width and the main text areas. I personally set the total layout width at around 70% so that it won’t get too wide on widescreens. I fix the vertical menu width to a standard value (typically 35% of the 70% width), and leave the rest of the space for the main text.

It takes slightly more math than your typical fixed-width layout — and a heck of a lot more debugging — but it’s worth it for your clients.

Site Navigation

Your clients will expect to find a clear navigation menu with no hidden secrets, so try to break it down to a list of 5-10 pages that will sum up the content of the website. Avoid subcategories, but if they must be used, you can use a CSS only drop-down menu like the lovely ones provided at CSSPlay. It will be useful if you give a one-line description for the menu categories at the index page so that the user will know where to navigate in order to quickly find what they’re looking for.

Code Semantics and Playing It Safe

Proper syntax and correct use of elements (headings, divs, tables) help structure a layout that is easily understandable.

Simple and nicely done hover effects (like background color or border change) can give a stylish feel to the page without scripting. Same goes for CSS background image changes on hover. You can achieve a fair deal of great aesthetics and functionality, in the context of helping the user distinguish different parts of the website, with hover states to suggest that an element is clickable.

It is important to style hyperlinks in a way that someone can immediately understand. Blue and underlined, no matter how hackneyed, works[2]. Underline (text-decoration:underline;) or use the border-bottom CSS property for links. Use a color that differs from normal text.

Finally, remember to use web safe fonts that are easy to read. Serif or sans serif? Legibility-wise and on the web, the research results are inconclusive. Whether you use serif or sans serif, make sure font-sizes are not too small.

La Cantina is a beautiful example that includes the ideas mentioned above.

Code Semantics and Playing It Safe

Step 4: Mind the Details

Our site will be a little plain without the nice and useful UI effects scripts provide us, but we’ve worked our way through it. Still, there are some more issues waiting around the corner.

Browser Testing

As far as IE6 is concerned, I haven’t come across a possible way to satisfy the needs of modern, functional browsers together with that nightmare Microsoft has provided. Clean and simple design is what will help you get a good presentation on IE6.

Whenever needed, I design my pages for modern browsers (to be forward-compliant and standards-compliant), and then when I create my first functional template (HTML/CSS), I test it on IE6 and other versions of the Internet Explorer using IETester.

If there are acceptable rendering issues that cannot possibly be fixed without completely ruining the site for modern browsers, I kindly explain to the client that this is the best result that can be achieved to satisfy browsers of all sorts. It’s important to show your client how the website looks on other browsers. More specifically, show the site to them on popular browsers like the latest version of the IE or Firefox  — the two most common browsers today[3] — and explain to them that this is the way the site normally looks and that you did it this way so that the site design will be future-proof.

Security Settings of Scripts in Local Files

The "scripts deactivated for safety reasons" warning that pops up on IE for stored local files is a tricky situation.

Security of Scripts in Local Files

It usually occurs when you present a version of the website before it goes online (e.g., a static prototype viewed locally). If you are presenting it to them in person, be ready to explain why this happens, why it’s not a threat and that it’s normal. If you’re sending the files to them (because you won’t always available when they want to look at the prototype), make sure to give clear directions on how to manage the issue.

Old-School and Bad Design Preferences

If your clients insist on using annoying animated GIFs that come to haunt you from the past or comic sans for content headings, you can use education and training to teach your employer about these types of outmoded or tacky design practices.

Old-School and Bad Design Preferences

Use functional and user-oriented reasoning. You can use a metaphor that relates to them. For example, if I’m working with researchers and teachers, I have them imagine how difficult it would be for them to try and read an important research paper/document in a location where there’s plenty of distraction such loud music, flashing lights coming from the window nearby, and someone talking loudly near them. Would they not agree that the fewer distractions, the better? Then tell them that their website and content is exactly this: important documents (in online form) that someone needs to read and derive information from. The loud music, flashing lights, and loud-mouthed colleague have digital equivalents in the form of annoying sound effects, GIF animations, poor color choices, and garish design elements.

Suggest best practices and ways to achieve the same goals without sacrifice to the user experience. For example, though they have requested an animated GIF to be placed somewhere, their intention is probably to draw attention to something important. They just used something familiar to them to describe their goal.

Look for solutions to their problems. You could suggest, for example, using distinctive colors, bigger fonts to signify importance, icons to aid visual cognition, and borders or underlines to provide distinction for highlighting specific parts of the site.

Last but not least, there are cases where the person you work for will want a website filled with an excess of clipart and poor-quality photos. The "excess" that I’ve dealt with most is the request to add irrelevant photos to inappropriate places such as in logos, in headers, and as web banners.

What are the problems that arise with that? The page ends up being overloaded, slow and, let’s be honest, amateurish. The photos are usually images the client found while browsing the Web (or forwarded to them through chain emails).

First, recognize that their intentions are good. These sorts of requests aren’t being done to make your job a living hell. They’ve sent you photos probably in an effort to contribute and add their ideas to their website.

Whether it’s clipart, poor-resolution photos, or images found on the Web, explain the reasons why they are not a good idea.

For example, excessive use of images leads to bad page response times, which in turn degrades the user experience. These images may be under copyright. The images may be too poor in quality to place on a website. They may be distracting to the reader.

Turn situations like this into positive things that can bolster your relationship with your clients. Instead of putting them on the spot and launching into an unprofessional tirade of finger-wagging lecturing, thank them for their efforts in trying to help in the design process. Remember that designing a website is a collaborative process.

To Sum Up

Creating websites within technology restrictions can be a challenge, but you can certainly pull it off with wonderful results that will satisfy everyone’s needs. Keep in mind that the client’s needs go first and that you’ll mostly have to rely on your technical and intrapersonal skills to get you through the project.

I look forward to hearing your own tips, suggestions and experiences in the comments.

References

  1. Firefox and Chrome users make up 70.48% of traffic to Six Revisions. IE6 users account for less than 0.3% of site traffic.
  2. " To maximize the perceived affordance of clickability, color and underline the link text. […] Shades of blue provide the strongest signal for links [...]." Visualizing Links: 7 Design Guidelines
  3. Usage share of IE8 is 27.90% versus IE6 at 16.18%. IE total market share is 49.87%. Firefox is second to IE at 29.95%. Usage share of web browsers. October 2010.

Related Content

About the Author

Maria Malidaki loves creating and managing websites, focusing on clean and simple design primarily using semantic HTML/CSS. Planning to also work as a vet and researcher, she specializes in building the web presence of academic and scientific events. Keep in touch with her on Twitter @mthunderkit and at her professional website at thunderkit.net.

17 Comments

muni

October 20th, 2010

nice article

Scott

October 20th, 2010

You make a good point about keeping up with current technology; I know my dad would be outraged if he thought he had to replace his computer every three years. The everyday and mainstream market will always be hard to convince. The UK government for example doesn’t believe there is at present time, any need to upgrade browsers on departmental computers from their current IE6 setup.

Stijn Desmedt

October 20th, 2010

a great article … somethings i knew and were funny to be ready realizing i made the mistakes in the past lol … some handy to know for the future …

Mali Studio

October 20th, 2010

Great article. Every once in a while comes a customer with “specific” view on web usability and progress. Well, their money is as good as any money. Harder earned, but valid.

Talat Nat

October 20th, 2010

In Firefox 3.6 (and Ubuntu Lucid), the La Cantina site breaks horribly. The top image of the man with the wine bottles moves up and overlaps the About Us and Contact Us menus, and the text of the second post “Champagne Cattier…” overlaps the image. It is a bad example to use (and I did not check other browsers / OS’s).

Other than that, a good article on the mindset and technical capabilities of some clients. Thanks for reminding me once again of the “gotchas” in design.

Evan Skuthorpe

October 20th, 2010

Scott – I think pretty well all IT departments in most companies are of the same mind set as the UK government. I worked for a travel company (that shall remain nameless) whom their IT department, we in the web team, had to fight in order to have modern browsers installed on our machines. IE6 was more than adequate for the rest of the company though…

Tyler Clair

October 20th, 2010

I also work in Academia and I can relate to most of these situations. Some of these issues can be solved by policy. For example all course materials need to be posted on our Learning Management System (LMS). This saves the time of our web designer and also standardizes the process to post materials. It also saves us, the instructional designers, from having to accommodate an additional service with it’s additional issues.

An additional note, the author said to use familiar terms and metaphors when explaining technical details. In my experience I would advise against this. Or exercise caution. Any time I have used an example from the academic discipline the client is in I have always gotten a lecture on how the example is technically not correct. This just saves you from getting a half-hour correction lecture.

Maria Malidaki

October 20th, 2010

Thanks a lot everyone :) Glad you could relate to it in some ways.

Scott, Evan, I agree. The exact same thing goes on in a large portion of Greek computers. Unless someone buys a new machine, they’re stuck on IE6, and oddly loyal to it!

Talat, I honestly didn’t check on older versions of Firefox or Linux, cause I haven’t searched for a good Firefox old version simulator (if there is any), and as far as Ubuntu goes, the target group presented in this article probably doesn’t even know anything aside Windows exists :) You have a point there though. Personally, I haven’t gone far enough to check my sites on Linux OS as well.

Tyler, indeed it’s a good idea to exercise caution, I probably added the advice to use relating examples because I simultaneously belong to the scientific community. The lecture you might get is quite funny, on the other hand :D

If you generalize the use of relating examples though, you can use them rather safely. There’s a widely used example of traffic lights and signs that correlates to web standards and why they are useful for normal web traffic. This is what I was actually getting to. Don’t necessarily go into the academic field examples (it’s indeed cautious unless you work on the field), there’s ton of stuff from daily life to use :)

On a side note, I forgot to add that there’s another very useful article on Six Revisions, specifically on IE6: “Definitive Guide to Taming the IE6 Beast”.

Ryan

October 20th, 2010

“Accept That Some People Will Not Change” makes me cringe when I realize have have to accept it. Great article, thanks!

Michael Tuck

October 20th, 2010

I’ve posted extensively about this on the SitePoint forums. Technophiles and cutting-edge designers sometimes tend to forget that large numbers of the general public don’t upgrade their computers every three years, don’t change the defaults, and don’t know or care about spiffy new technologies, font techniques, or the like. They also forget that many people work for institutions that give them no room for upgrading or improvement. (I had to plead with my IT person to upgrade my computer to IE7; she codes our Web site in HTML 2.0 because she doesn’t write her own code and the only approved tool she can use produces code in that language. I can’t touch our site because I am not, and will never have, access.)

Idraki M.

October 20th, 2010

@Evan

I feel your pain bro. Now I’m working as web designer at a well known bank, they provide me a CRT monitor, with Pentium 4 Cpu, 512 mb ram, and only IE 6 to work with. no tools are allowed, I don’t even have a Photoshop. I code with notepad++ and use paint for some graphic. Pain in the ass.

Gabriele Maidecchi

October 21st, 2010

I believe that to avoid this kind of problems you need to carefully analyze the customer’s needs and lay down a project for it along with him. We experienced similar problems through the years but we always managed to come to an agreement by educating, as you mention, and making them realize that the web is a living organism that needs to grow and change in order to stay competitive and serve its purposes.
It’s often better not to have a website rather than having an “antique” one, in my view.

Ralph

October 21st, 2010

That was a good read. Although I knew already a lot mentioned in the article, it can serve on the other hand as a checklist when I’m in situations like this. Thanks! Bookmarked and shared!

Evan Skuthorpe

October 21st, 2010

@Idraki M. – Ouch! Hope they pay you well to put up with that sh*t!

rajendra ray

October 25th, 2010

nice post, thanks for the article…

semainwaring

October 31st, 2010

Thanks for the great article. Working within the industry it’s very easy to forget that not everyone experiences the web using the latest machines using the latest browsers. Often we can let our ideas and the desire to add cutting edge technology into a site get away from us, and we forget to consider our clients technical limitations, especially for intranets and internal facing sites. That said, what I really appreciate about this piece is the focus on the importance of a clean design, utilising well-structured, semantic code. Following these basics rules goes a long way to ensuring a site will still work with a client’s restricted technology.

I don’t think anyone can highlight any stronger the need for testing, testing, testing. Working for a large corporate, our team had to constantly ensure the site worked in IE6 as the whole company, including the executive team, were stuck in 2001 as far as the web was concerned. Our strategy was to develop to more modern browsers, but would have to test everything looked OK and worked in IE6. This can be time consuming, but it will save a lot of heartache down the track.

Vik

October 31st, 2010

As far as our customers, it’s all about requirements analysis. Corporations have thousands, or tens of thousands, of computers in use. The cost and logistics of doing that without breaking something and the training involved are daunting… and very expensive. It’d be nice to have those upgrades, but unless there’s a very good (usually financial) reason to do it, it won’t be done. Y2K was the last force-feeding of many upgrades. Right now the most obvious benefits for new technology are in mobile, and IMO that’s where the money will be spent.

Leave a Comment

Subscribe to the comments on this article.