View and vote on the article here: Good Web Design Practices
Good Web Design Practices| Category | | | Summary | | In an age where everyone claims to be a web designer, we look at some of the mistakes made in the early stages of web development. This tutorial aims to provide a heads up on what is considered bad practice, and give you the means to redeem yourself. |
| | Body | Contents
INTRODUCTION
- STRUCTURE
- Background
- Method
BACKGROUNDTHE USE OF TABLES
- What are Tables for?
- Maintenance
- Load Times
- Spacers
- Table Accessibility
CONTENT VERSUS DESIGNIMAGES
- Size
- Colours
- Content
- Effects
- Animation
NAVIGATION AND CLICKSSTANDARDS COMPLIANCEPLUGINSSTYLINGUSER-AGENTSTHE REST OF THE WORSTMETHODTHE USE OF TABLES
CONTENT VERSUS DESIGNIMAGESSTANDARDS COMPLIANCEPLUGINSSTYLINGUSER-AGENTSTHE REST OF THE WORSTSUMMARY
Introduction
Consider this: You're sitting at home playing WoW, frantically tapping away at the keyboard, trying to "pwn the noobs". On the right is a can of Red Bull, on the left is a bag of cheesy balls, both of which you consume as and when there's a short recess in the "pwnage". You realise that you've been playing this game for three months; and you smell. Wait! Tonight is the LAN party, and that girl on IRC you invited might turn up. This calls for extreme measures! Time to wash!
The above story is all too familiar, although you might wonder how it relates to this tutorial. Well, imagine that you get to your bathroom, squirt in some bubble-bath and turn on the hot tap, when all of a sudden there is almighty "KABOOM!" Oh dear, the boiler is broken!
What on earth has this got to do with anything? Stay with me. You call the boiler repair man, he turns up four hours late, and proceeds to fix your boiler, just in time for you to get a wash, have your LAN party and score with the hot chick. Life is good, no?
Now let’s take a step back. Imagine the boiler repair man turns up, starts "umming and arring", and proceeds to fix your boiler by taping bits of copper pipe to the sides, putting a new control panel on that he stole from an old washing machine, and relighting it with a match and the contents of an aerosol can. You turn on the hot tap, it runs cold for fifteen minutes until finally it slowly gets a little warm, and you never really get rid of that smell of body odour and cheesy balls. Your LAN party is a total failure and the girl from IRC goes home with the nub you totally "pwnd" on WoW last week without even trying.
The outcome of your problem is never certain, but one way we can try and reduce the chances of things going horribly wrong - is to do them properly. In the first example, the boiler repair man was Corgi certified, from a reputable company and used the right tools for the job. In the second example, the boiler repair man was just an enthusiast, who didn’t really know what he was doing, and just wanted to earn a bit of extra cash, regardless of how much he ruined your life.
At this point you may still be wondering how this has anything to do with this tutorial. The point is, in nearly all areas of work you need to be qualified by the correct governing body to carry out any work. Whether you're a plumber, an electrician, or work in any number of other fields, you can’t just go and hack away at something until it works. Unfortunately, this is not (yet) true in the field of computing.
Every Tom, Dick and Harry has "web designer" as part of their work experience repertoire. I mean, how hard is it to get hold of a copy of Frontpage or Dreamweaver and throw some text, images and colours together? The problem with this is that they don’t really know what they are doing, or how their web sites actually work. In turn, this causes problems down the line for the users of the web.
The aim of this tutorial is to give anybody who feels they may fit in to the category described above, anybody starting out in web design or simply anyone who wants to tick off a list of things they don’t do to show how awesome they are a sound introduction on good web design techniques.
The only prerequisite of this tutorial is that you have a brief knowledge of the web and how it works (i.e. hyperlinks, URLs, web pages, etc). Preferably, you will also have a bit of experience with HTML and CSS.
Structure
This tutorial will be presented in two simple steps.
Background
We begin with a discussion of what is bad. To be good web designers we need to know what we shouldn’t do first, to avoid making the mistakes in the first place. From there we can move on to what we are allowed to do.
Method
The Method section will have the same main headings as the Background section, and will literally provide you with methods on how to fix your problems, or avoid them altogether.
You may find that there will only be examples or a brief introduction to the different Methods you can use. Each one has enough depth to produce its own book, never mind its own tutorial, however there will be enough material for you to go on and read further in that area. The aim of this tutorial is to let you know what is bad and what you should do about it.
Background
So we start with a discussion of what is bad, and more importantly - why. This section will introduce you to a few practices that make up the multitude of bad web design.
The use of Tables
Putting the fact that the W3C explicitly tell you "Tables should not be used purely as a means to layout document content" aside, there are many reasons that tables are a bad, bad thing. If they are so bad though, why do we have them?
What are Tables for?
Tables were introduced to HTML as a way of formatting tabular data. As the first users of the Web were scientists and technical users in Universities and similar academic based institutions, HTML was designed as a way for them to share their information. Headers, paragraphs, tables, and more; they were there for them to represent their data on the web.
Businesses and designers came later. It wasn’t until big organisations saw the huge potential of the Web that it really began to take off. At the same time, faster connection speeds were available and the Internet was spreading. Organisations wanted their designers to abstract the technical side of the web in to a lovely new graphical based experience, where they could promote their products and lay things out exactly as they wanted.
Designers soon realised that they could manipulate the table tag of HTML to get pixel-perfect layouts. Along with the use of spacer images and a few other tricks like removing the padding and spacing, not to mention embedding tables within tables (within tables!), they could now create the fancy layouts they wanted.
Alas, tables were never intended to do all this – tables were only designed to display a table of scientific data. Because of this "hack" method, there were bound to be problems.
Maintenance
If you've ever seen the mark-up for a table, you'll know that even though it’s quite simple to understand, it doesn’t take long before things start getting complicated. With this in mind, imagine how horrible the mark-up of a single HTML page would be, using tables as its method of laying out a fairly intricate design. Nesting tables within tables is pretty much the only way that it can be done, to perfectly reflect what the designer wants.
Imagine you wanted to add a single button on to a menu system that has been coded with the use of tables. Imagine looking through one huge table with multiple nested tables, and many more nested tables inside them. Consider the fact that not many people code their HTML with indentation to help us humans more easily figure out the structure of the page – or even worse, consider a page generated by some server-side language such as PHP, where it is almost impossible to keep the code structured in such a way.
Now imagine that some of your columns or rows span over multiple columns or rows, with nested tables inside of them, and then imagine that some of them are table headings. Finally, consider someone made a small mistake with one of the tables, but the browsers parsing process allows for this and displays it how it is supposed to.
Now, how easy do you think it would be to find the exact spot to add a single menu item to your navigation section?
Load Times
Though every browser is different in how they load content and display web pages, it is a little known fact that browsers are designed to download each separate table as a single entity. Your table (and of course, all of its contents) will not be displayed until the whole table has been downloaded. When you think of what a table is really for this makes perfect sense. Tables are for tabular data that relates to itself, in that a value in one certain column has a relationship of some sort with a value in another column. This data doesn’t make sense unless it is all displayed at once, in the table.
Because of the large amount of tables that are used to create layouts, as well as the content inside them, the load times reflect this drawback. Even now, with faster than ever download speeds, a page can seem to have a delay before it loads all of the data. This is one of the single most concerning factors over long page loading times.
Spacers
Design your web site with tables and you're almost sure to make use of spacer images. Spacer images are small, transparent images that are used to stretch or "space out" different elements within a table, to aid getting elements laid out pixel perfect.
Not only will the use of spacers often restrict the page size from being able to be stretched to the width of the browser because of its strict fixed pixel size, it can also significantly impact the load times for web pages. Consider the fact that layouts may use tens, or even hundreds of these spacers to get the layout spot on.
Table Accessibility
Finally, using tables to lay out the elements of your page can be an almost suicidal task if you want to make your page accessible. Think of how screen-readers, Braille output and other types of Web Browser look at your page. They don’t see the visually laid out structure of the page you see with your eyes, they look at the code and take what’s there. Even if you added things like descriptions or summaries to your tables as you should, they will be sent to the user as if they were something of importance. When the table summary is "this table puts the logo in the right position and lines up the picture of Bill Gates properly", it is of no use. Considering there are going to be many nested tables, it becomes impossible for them to view that web page.
Content versus Design
This section could have easily been placed in the above tables section, as it relates to it quite closely. However, the debate of Content versus Design stretches across many other areas too.
Imagine you had a web site that, on each page, had a footer with a small menu. The menu holds a few links, one called "contact". Your manager decides that he wants "contact" to be in bold. Sounds pretty simple, right?
No, not really. It isn’t going to be as simple as it sounds. First you go in to the code, find the section that holds the footer, find the correct link within the nest tables, correctly insert a tag to make it bold, save it, and repeat for each page that has a footer. Now consider that there are 1000 web pages and some differ slightly, making it hard to do a global search and replace. I’ll also let you imagine something that is bound to happen; you finish updating the web site and your manager says "Nah, it looked better before", or "actually, can you make it italic too? And maybe yellow!" – You get the message. This sounds like a lot of headache for not a lot of work, and it was only for something very simple too.
Now imagine you have a template that you want to use on every single page of the site. You're using PHP to implement the use of the template and everything looks pretty rocking! The manager comes along again and tells you "actually, I think we need to made the text four points bigger for every header that's on a blog post, if it's either a sub heading, or a new, unread post. Oh, and while you’re at it, make it Times New Roman and capitalized too…" This sort of thing happens all the time.
Simply put, mixing up your content and design is a bad thing. You need to have the content saved in one place and the design saved in another. Obviously the designers and coders will need to work together, but being able to separate them both will not only make lives easier for them - but will also promote considerably better practice. Of course, on a smaller scale you might do it all yourself – but the same values hold true.
Images
So you’ve just made the most amazing layout in Photoshop. It has gradients, glass effects and awesome looking fonts. Now you decide to cut it all up and put it back together as a web page to show the world your 'mad skillz'. Does all the text really have to be in the "Xinghua" font, with a lime green and mustard yellow gradient?
Images are pretty much essential to almost all designs these days. In fact, with the Web 2.0 craziness going on, there are plenty of nice big rounded edges that just can’t be created using normal background colours in your HTML. But when are images bad?
Size
We are talking physical dimensions as well as file-size here. You take your logo from Photoshop and stick it straight in the page at 1200px wide. Your wide-screen Dell monitor displays it fabulously! Along comes Joe and his 15" monitor, all ready to buy one of your products and make you rich, when he realises he has to scroll horizontally to see the entire page. Joe sends the link to a friend called Jack. Jack is on a 56k modem. He doesn’t use the Internet to do anything other than buy a certain product in bulk, which he finds his pay as you go 56k connection can handle fine. He comes to your page ready to spend a few thousand pounds, when nothing will load because it takes a good 30 or 40 seconds to download and cache each image.
Colours
Even in places that are good to use images, you must remember to think about the people looking at them. If you think that dark grey text on a black background looks really cool and futuristic, or a bright yellow sun on a mustard yellow background gives that nice warm affect, spare a thought for our visually impaired friends. Whether they are colour blind or just have bad sight altogether, they won’t be able to see the images. They may have their browser set to display text and backgrounds in a completely different colour to everyone else. Put information in your images alone, and they could miss some very important information.
Content
As I touched on in the previous heading, it's important to consider the information you put in your images. For instance, if you have a web store and you want to let users know that a certain product doesn't include a power lead or something similarly important - and you put that in your site image alone, they're not going to see it if they can't see the image.
Effects
I've called this heading "effects", in a way that will hopefully generalise what point I am trying to make. If you have a white background with a main middle section that has a dark grey background and white text on top, it may look pretty good. But with any combination of the problems outlined above, it may turn out that the background image doesn’t load very quickly, or not at all. This would leave white text on a white background, which doesn't work.
This occurs if you're not careful with your colour combinations.
Animation
Have you ever seen a web page full of animated gifs? Does the contact button stretch the whole page, animating a paper aeroplane flying in to an envelope that is magically emailed through the Internet?! Are your eyes bleeding yet?
Apart from being plain fugly, animated images (most commonly animated gifs) take an eternity to load. This is not to say that animation on web sites is all bad - on the contrary I explain later they can be a good thing, but there are ways and means of achieving the affect. Fifteen animated versions of Homer Simpson on your web page is not cool.
Navigation and Clicks
It's been said by a few top human-Computer Interaction experts, that you should be able to access any part of your web site with just three clicks. It's also been said that the average time a person will wait for your page to display before they leave, is seven seconds. That’s not a huge window.
We'll think about two different sites that do the same thing. We'll use Microsoft MSDN and Google Groups as examples. With MSDN, you'll probably need something very specific, such as the specification of the App object in VB6. With Google Groups you'll probably not be bothered what you're looking for specifically, as long as it comes up with the information you need.
Both MSDN and Google Groups offer a hierarchy of content, where you select from the most likely link in the list to view the next list of links, and continue until you find your data.
MSDN and Google Groups, no matter how similar they are, give completely different experiences. Whereas MSDN can be quite confusing, offering many choices you're not sure about (almost always resulting in you just giving up and using the mediocre search engine), Google Groups have everything split up in a simple, easily navigated directory. Their search engine there too, of course - but if you were looking for the App Object specification, as above, you could click Computers > Programming > VB6 in a few seconds and be close to having the resources you want.
The above example may be biased I admit, in that it is my opinion and evaluation of two similar (though obviously differing) web sites. The example and point I am trying to make remain; you can have the absolute best content in the world, but if your users don’t know how to reach it, it’s as good as having no content at all.
Standards Compliance
Adhering to standards is often overlooked. In fact, you could almost be forgiven, for the fact that companies like Microsoft do this all the time could easily make you think "Why should I?" But I ask you, do you really want to be a MS Fanboy?
Joking aside, standards are put in place so that everyone is working on the same page. If you're all working to a common specification or list of rules about a given technology it makes life in the long run a whole lot easier. Think about if you want to extend other peoples web sites, whether you want to make web sites to talk to each other, or if you want to make custom web browsers to view your page. Without standards, chaos reigns.
As far as the web is concerned, there are a number of standards such as (x)HTML, CSS, XML; the list goes on. But just using these technologies doesn’t necessarily mean you're adhering to the standards. There are certain ways to go about using them – where to use them, how to use them, when not to use them and many more specifics to consider.
If you're not using the correct code or mark-up considered true to the standard (compliant), then all kinds of problems occur - such as your web site not being displayed correctly, browsers not being able to view certain elements of your web site, the use of outdated and unused code, and more.
Plugins
The web has become a close friend to the media, with thousands of content rich sites offering all kinds of interactive experiences. These exciting "flashes" and "parps" need to be considered carefully.
How about we create a new menu system that has great looking images, hierarchical menus that pop open like a big tree system, little animations, and even sounds? Surely this is going to make the experience of the user better? Sadly, it is not always the case.
Without even mentioning how the users are affected by accessibility, loading times and other constraints mentioned previously, you also need to consider how the technology required to display your "flashes" and "parps" will affect them. Perhaps you're using Java? Or maybe you're using Flash? What about DHTML?
What happens when a user decides to visit your web site that doesn’t have (nor wish to have) the plugin needed to display your content? What if someone intentionally disables, or even blocks out explicitly, for security reasons or otherwise? Do you really want to lose those visitors?
Maybe you decide you want to put video or music on your web site. You use Windows Media Player to listen to your music so think it would be a good idea to let people access your media with a web based version of it, after all, it works on your computer so it should theirs. But what if Linus Smith plods along on to your web site, wishing to watch your "pure ownage of a nub – WoW tribute" video, but doesn’t know what this crazy ".wmv" format is. That may sound a little far fetched, but maybe you should consider that the same guy knows perfectly well what Windows Media Player is, but refuses to even consider it.
Styling
It’s safe to say that not everyone is a master of design, able to put a few combinations of colour together to create a simple but beautiful piece of work. That’s fair enough – but sometimes people really do take their artistic licences too seriously.
It's probably safe to say that, unless you're one of these people who is confident about how colours work together and what the user’s perception of them will be, while at the same time managing to choose something pretty, stylish and modern, you shouldn’t really be using your own ideas.
It’s not just colours either. Imagine having a web site with a fantastic colour scheme, which has several different fonts at different sizes and doesn’t really follow any kind of consistency. Not only does it begin to get very ugly, but humans prefer things to be laid out in such a way that's simple.
If the only way to distinguish you headings from your paragraph text is a bold weighting, how do people know you're not just trying to emphasis that particular line? If you decide to have one section of text that is a lot bigger than another, surely that means it is more important? Who reads the small-print anyway?
As well as the aesthetics, there are other issues to consider, such as accessibility. If you used header tags to create headers and paragraph tags to create paragraphs, it is going to be a lot easier for someone to use your web site with a screen reader. If you just use a lot of breaks and only specify a heading by its larger size and different colour, it may look like one continuous paragraph.
User-Agents
I recently had the displeasure of a perfect example of bad web design practice. Our University is now using Microsoft Sharepoint for its Intranet based needs, such as forums, coursework submission, calendars, etc. The security method it uses is NTLMv2, which is a Microsoft technology. This is obviously supported by Internet Explorer (albeit more recent versions) on a Windows machine, but when it comes to other browsers such as FireFox, Mozilla, Safari, Lynx, etc on Windows, Linux and Macs, we can no longer access this content. We are forced to either install some supporting software, or only access this information while at University.
In the context of the World Wide Web, "User-Agent" is just another word for something that accesses web pages. We could just call them all browsers, but there are other things like bespoke software for the disabled, search bots and other less obvious applications that are all considered to be a User-Agent, but not necessarily a web browser. My point in this section is that sometimes, designing with a very strict or small number of User-Agents can be a bad thing.
I’m not saying that you should adapt your web sites to specifically handle every thing that could possibly visit your web site (even though there may be advantages to doing so to a certain extent, for example custom output for web crawling bots like GoogleBot), but what you should bear in mind is the fact that there are a lot of technologies out there, and even standards, that are compatible in some User-Agents and not in others. What User-Agents should you support? What limitations might this bring? It ties in quite nicely with the standards compliance section, but as with many things, it is often a lot more complicated.
The Rest of the Worst
Finally, I would like to briefly point out a few other things that are considered bad practice. Let’s start with frames!
Frames are not used so much these days (if you forget about iframes and a few Microsoft web based products such as Outlook Web Access), but for newbies and novices they may seem like a good idea at first. Let me assure you, they aren’t.
First of all you need to worry about the extra time coding the frames, making sure each page is loaded properly, in the proper frame, and that you get the sizes and borders and everything else set up so your users don’t feel disorientated with them. Coupled with the fact that search engine bots and other User-Agents will have a real hard time figuring out what the heck’s going on, you're not really on to a winner. In some people’s eyes, the fact that they are plain horrible looking is enough to say no.
Speaking of "fugliness", one sure way to put someone off your web site, or even stop them from ever returning again - is to use bad grammar and spelling. Now this isn’t a dig at people who aren't very good at spelling or just don’t seem to understand how the rules of grammar work. It isn’t even a dig at people like myself, who make about five typos every word. It's just plain ugly.
Another problem certain to drive users away from your web site, is to make it easy for their personal data to be stolen by spammers. If somebody signs up to your web site and suddenly starts getting 10,000 emails a day about how they can enlarge their penis, they're probably going to be rather annoyed.
Similarly, if your web site is full of content that has been automatically posted by a spam-bot, such as forum posts, blog comments or shout boxes, it's going to look very unprofessional and will make people very wary of any content they find on your site.
Finally, and maybe this is just my own personal opinion, but if you have to put advertisements and/or donate buttons on your web site, It's not a good idea to drone on and on about them. If people want to donate, they will. If they think an advertisement leads to something they want to purchase, they will probably click it. Other than that, shut up, and don’t, for the love of JavaScript, have a thousand pop-ups per page that you have to individually close before you can begin to comprehend the information you're actually interested in.
Method
It is now time to take our knowledge of the dirty web design practices we all thought were so great, and put them to good use.
The use of Tables
In my opinion (and in the opinion of many experts such as those at CSS Play, A list Apart, etc), tables aren’t needed at all in most web sites these days. Not many of us have to display tabular data, so there’s that excuse out of the window.
So, what is the method then, of creating sites that don’t use tables? The answer to all your questions is: CSS.
Now, before I start explaining why - I want to point out that I will not have any of you telling me "CSS is crap – I can’t do blah with CSS like I could with tables! You SUCK!" Not only will it hurt my feelings, it also isn’t true. I struggled for a while trying to do everything I wanted in CSS, and of course, I'm still learning new things all the time. The fact of the matter is that if you understand (X)HTML, CSS (and the Box Model) fairly well, you can create most of the layouts you want.
I admit there are a few drawbacks still (such as column heights not being the same in certain types of layouts), but none of these are impossible to fix, it just takes a little more reading, understanding and effort. The point is, once you have implemented your web site this way, instead of using tables, the advantages are endless.
Although I don’t feel a full explanation of CSS and how to create layouts with it, are within the scope of this tutorial - here are a few handy hints with which to start.
Divs
Divs are used extensively when creating CSS layouts. They are displayed as boxes on a web page (and by a box I don’t mean like a square with a border; I mean an element on the page that other elements live around), and can contain most other elements inside of them. Let’s say you wanted a header, body and footer layout for your design that spanned the full width of the page. You would have something like this for the initial HTML:
<div id="header">
<!-- logo goes here -->
</div>
<div id="body">
<!-- text goes here -->
</div>
<div id="footer">
<!-- copyright info goes here -->
</div>
You would then style the Divs (or if you like, call them sections, panels, whatever you want) with CSS rules. The CSS rules would specify their positioning (where they are on the page, what margins and padding they have), their styling (colours, backgrounds, borders, text properties, etc) and a whole host of other things to make them look exactly how you want.
Nesting
The power of CSS lets you do more complicated things than simple layouts like the above. Where the use of tables forced you define everything nested and in the exact order it had to be displayed, CSS isn't so strict. A layout like this:
<table width="500" cellspacing="2" border="1">
<tr>
<td><b>Cheese Varieties</b>
<table width="120" cellspacing="2" cellpadding="2" align="left" border="1">
<tr>
<td>Holland Cheeses</td>
</tr>
</table>
<table width="380" cellspacing="2" cellpadding="2" align="right" border="1">
<tr>
<td>Britain Cheeses</td>
</tr>
</table>
</td>
</tr>
</table>
..that uses tables, could simply be written as:
<h1>Cheese Varieties</h1>
<div id="holland">
<p>Holland Cheeses</p>
</div>
<div id="britain">
<p>Britain Cheeses</p>
</div>
..that uses just CSS. The styling is abstracted away (more about that later), and you could even have "Britain Cheeses" earlier in the page than "Holland Cheeses" without having to edit the HTML at all.
Content versus Design
Following on from the last section is simple. With the use of CSS you can specify sections, or placeholders, with techniques such as using Divs. You do not need to specify what they look like or how they are placed in the web site, but can concentrate on the actual data or content itself. For instance, one member of the Web Authoring team could write up a few HTML pages that hold the content needed on the web site. They use headings, paragraphs, and possibly Divs to group common content in to certain areas. The designers then come along and produce a "stylesheet" with lots of CSS rules that tell the browser how to visually display the content on the screen.
Separating content and design like this is great for a number of reasons. If you have certain data that is highly important, you can place it at the top of the HTML file. But when it comes to displaying a web page you may want the logo or header information to come first. With CSS you don’t need to worry about things like this, and can have more control over everything. This will also help tackle problems with screen readers and other User-Agents because you can cleverly choose the information it should present and in what order, without making your web pages look different.
This method also makes it incredibly easy to modify the look of multiple elements (or classes of elements) all at once. Earlier we discussed that a manager may want "the text 4 points bigger for every header that is on a blog post, if it is either a sub heading, or a new, unread post. Oh, and while you’re at it, make it Times New Roman and capitalized too…" In theory, with CSS you could do all of this with one single rule.
CSS aside, there are also other things to think about when debating how to separate your content from design. Think about using a templating system and enabling it with a server side language such as PHP or CGI. You may also want to put a lot of your data in to a Database so that you can load it in at runtime. Obviously there are many pros and cons for all the different things possible, but it is generally quite simple as long as you follow the rules in this tutorial.
Images
First of all, use tools like the WellStyled colour scheme generator at http://wellstyled.com/tools/colorscheme2/ to come up with colours that go together well. And remember, contrasting colours can be good for the visually impaired, but get them wrong and you will blind everyone.
Products such as Fireworks, Gimp, and Adobe Imageready will let you take your graphics and prepare them for the web. You can edit the size, colours, etc, but probably most importantly, you can compress the file in to various different levels of compression and save it in different file formats. Some of these programs will even tell you roughly how many seconds it will take for that particular image to download on different connections. Sometimes you can radically reduce the file size of an image without making too much difference to the image quality. This is a must for most sites, but absolutely critical for image heavy web sites.
Another thing to point out is that you don’t always need images to achieve the layout or effect you want. Some times you can use colours, fonts and other elements or attributes built in to HTML and CSS to create the same effect you made in your image editor. Bear in mind that replacing images with mark-up is a great way to reduce the download times.
One final thing to note is file types. Different image formats are better for different types of image. PNG is a popular format for most images, but is not always supported by the browser correctly. JPEG is a decent alternative, with GIF having a few good points but just as many drawbacks. A general rule of thumb is to have a good look at what each offer, the size of the files, the type of compression and loss of quality, the support across different User-Agents and other things that affect the users.
Standards Compliance
If you were only to use one tool, the W3C Mark-up Validation Service, to comply with Web Standards, you would probably be well on your way to being fairly compliant. Found at http://validator.w3.org/, the W3C Validator will check your HTML, XHTML, CSS, Accessibility and more, and offer tips and hints on any errors it finds. You can then also take buttons to place on your website to show that your web site complies with the W3C standards.
For other products and technologies (i.e. those not governed by the W3C), you should read the standards documentation they offer and adhere to their guidelines and rules.
Plugins
Although you should really take it on a case by case basis, you can usually safely say that certain plugins are now slightly more standard than others. These days, you only tend to see Java on the web for small chat rooms, web based SSH clients or applets with a similar nature. Most of the other things that people used to use Java for, such as menu systems, games and animation (though it was never that good at animation) are now done in Adobe Flash. If you're thinking of making an introduction movie, a very dynamic/animated site (such as for a movie release or a band) or simply something very media rich, you will probably use Flash (though Microsoft are now trying to push Silverlight as an alternative).
What you do need to consider is - when it is and when it isn’t a good time to use Flash (or for that matter, any other plugin). Generally, if you're doing it "because you can", it isn’t really a good idea. If you really need the feature set it offers, such as playing different types of media or animation, you can be confident that it is probably the right choice.
But always remember, if you are going to offer some form of content that requires a plugin, make sure, at the very least, your users can access instructions on why they can’t view the information and how to go about installing the plugin on their machine. You may even wish to consider offering the same information in another format (HTML), either for those who don’t support the plugin, or just for people with slower connections. This is a bit iffy though, and I tend to disagree with reproducing content.
One final note for the plugins section is that due to the nature of Flash, many web sites now use it over any other plugin. For instance, where web sites used to use different media players (Quicktime, Media Player, Winamp, Realplayer) to play different types of Sound or Video, they can now use Flash to do all of this. Some plugins will obviously be very specific, and not something Flash can do. In this case you need to think how badly you need that functionality, and is it worth the chance that you may deter your users? Obviously, using this on an eCommerce site would be an awful idea, whereas using it on a small community of gamers wouldn’t.
Styling
First and foremost, you can use the colour scheme tool that I mentioned earlier to get yourself a nice looking set of colours. Next, you should decide (on paper is often easier) what specific fonts, colours and sizes you're going to have for different levels of headings, normal texts, links, backgrounds and so on. Once you have all these written down in your own little standards document, you can implement them in a style sheet in CSS, and then just write your web site. It will be easy to change when you like, but the consistency and professionalism will speak for itself.
As you apply other techniques outlined in this tutorial you will find that styling becomes less of a chore and more of an art form. What I mean by that, is that you will be able to appreciate how your web site looks, without having to spend hours looking for bits of code to change little things to make it look better.
Another thing to point out is that a lot of the time people expect more of the same. For instance, headings are usually bigger and/or bolder than normal text, hyperlinks are very similar to normal text but with a slight colour change or text decoration and pages normally have a fairly similar navigation and content layout. In no way do I think you should design your sites to be like everyone else’s, in fact I would definitely encourage people to express themselves. What I do mean is don’t stroll too far from the path, because your users may just get disorientated, annoyed and confused.
User-Agents
Usually, if you stick to being standards compliant, you have a good chance of not having to worry too much about the User-Agents. You basically need to think about different technologies available to you and whether the people visiting your site will be able to enjoy them.
More specifically, don’t design to one type of web browser, don’t use things like Microsoft ActiveX, don’t use features of technologies that are only available to one specific operating system or browser (such as extensions to HTML or CSS by Netscape Navigator) or anything else that will in some way limit or promote prejudice to a specific class of users.
I understand that this is sometimes a lot harder than it sounds, what with different organisations trying to push their own products and be kings of the computing world, but if you look up statistics and trends of your own users and that of the web as a whole, you can often make a decision on what is best. As an example, if you wondered whether using Sharepoint for your University Intranet was a good idea, don’t just go and do it, when 50% of your students are not Internet Explorer users.
The Rest of the Worst
One of your obligations as a web designer is to keep other peoples private information hidden. There are many ways to stop this from happening, such as tricking the bots that harvest this information from your web sites in to thinking the private data being displayed isn’t actually what it seems. Generally, the best thing to do is not show it at all. If you really have to show this information, then enforce security rules such as needing to be logged in to view that data. At very least, give the users some tips on how to hide their personal information such as their email address with simple tricks, like replacing .com for (d0t)com.
If your web site is getting spammed, for instance if you use a public forum like PHPBB, you should apply all the latest security and anti-spam patches. If there aren’t any, and you're still getting spammed, it may be time to rethink your method of implementing a feature to allow people to post altogether.
As far as spelling and grammar are concerned, the simplest thing is to get beta-testers, or simply put, friends - to check out your web site first. When you're closely involved in something you don’t tend to look at things from outside the box – you could miss something blatantly obvious after looking at it a hundred times.
Use tools like Further’s Website Spell Check, found at http://www.furtheronline.co.uk/free-website-spellcheck/. You'll want to remember to find one in your language and locale as well.
Summary
We have looked at a number of different hurdles that many budding web designers never quite clear. Everything from how your web site looks and how it is presented, to how it is actually created in the background is important when you want to enforce good web design practices. There are often no specific rules, but only guidelines on what you should do to make your web site step away from the millions of drab, boring and quite unprofessional looking web sites around, to one of the better quality pieces of work you admire.
With all these rules and regulations, it is important that you should never forget that for most people, you get in to web design because you enjoy it. It's an opportunity for you to present yourself to the world in a manner you desire. Despite this, I feel that if you steer clear of the bad habits outlined previously, and enforce these methods, you will be able to do both.
This article was originally published by CyberArmy.net in the CyberArmy Library. |
|
There are no replies to this post yet.
|