How to Design the Perfect Website

Designing a web page is more than a matter of knowing how to use HTML (Hyper Text Markup Language) or web design software. As a professional programmer with many years of experience creating HMIs (Human-Machine Interfaces) and GUIs (Graphical User Interfaces) I chocked up a great deal of experience that is absolutely essential to creating an excellent, accessible, useful web page or site. And my first career was that of a typesetter, a skill that requires knowledge of presentation of information in a way that is pleasing and easy on the brain. That makes this guide you are about to read a tremendous value, and you didn’t even have to pay for it.
This guide is not only for amateurs who wish to design their own websites. It is also quite useful to anyone who is going to hire someone to do the work for them. This is good for top digital marketing strategies also.

 

But First…

Web design may seem difficult to some, and easy to others. The problem is, both points of view are wrong. Making a web page isn’t simply about slapping information on a page, or making the page or site look great with fancy features using complex software. Designing a proper web page or site requires knowledge of presentation of information, rather like a typesetter or graphic designer learns. Designing a perfect web page also requires knowledge of something called content accessibility.

Never heard of it? Join most Americans. The World Wide Web Consortium is an organization which creates internet standards. And the W3C, as they are known, hosts the Web Content Accessibility Guideline (WCAG) which spells out how to design a website or page that is universally accessible. Accessibility is vital if you want to be sure to reach as many people as possible. The first step in web design then, is to visit the W3C’s website and study the WCAG.

The great news is the W3C also provides tips and other information about web design. You could almost stop reading here, but then you’d miss some great tips from a seasoned professional, wouldn’t you?

Accessibility

As a person with physical and mental disabilities, I know all about accessibility. And let me tell you, the frustration of dealing with most American websites is painful. Inaccessible websites cost a friend with similar mental disabilities many a computer due to his impatience with websites that were difficult to use for various reasons. And I use two browsers, Mozilla Firefox and Opera, just to allow me better access to some of these sites.

Opera allows me to turn off Javascript, something that was essential before I entered the world of broadband internet just 3 short years ago, especially since many websites rely far too heavily on it (a no-no according to the WCAG.) It also allows me to turn off images at the click of a button. I use Firefox when I want to watch YouTube videos as I don’t even have Shockwave Flash in Opera.

Failing to make sure your site or page is universally accessible is very much like discrimination, except that it isn’t (yet) a crime. But it is rude. And the key to accessibility, which is spelled out quite eloquently in the WCAG, is simply a matter of perspective.

Imagine you don’t use Flash, despise Javascript, have dialup, are impatient, have epilepsy (flashing can trigger a seizure), are hard of hearing and perhaps even blind. If you can imagine all these and consider users with these accessibility issues while designing a web page, you’ll be far, far ahead of most web designers, including the top dollar professionals!

Before you Code: Knowledge and Software.

So, you’ve mastered the WCAG and are ready to make the world’s greatest website. Now what?

You don’t actually need any software to create a website. HTML can be written in plain text, such as Notepad in Windows or Gedit in Gnome on Linux. Of course, to create websites this way is laborious and requires a few books, a great imagination, and a lot of patience.

But to really do well, you should find software that includes what is called a WSIWYG (What You See Is What You Get) HTML editor. I use IBM’s Websphere Homepage Builder 5.0 which unfortunately isn’t available anymore. And as I don’t use anything else, I can’t recommend a software tool.

The W3C does have some recommendations on their site, so do some digging. Watch out for software such as made by Microsoft and Adobe. Microsoft’s software uses their own version of just about everything, and websites usually only work well with Internet Explorer, which not everyone uses. Adobe relies heavily on Flash, so you get pages that some people can’t even view or use.

Be sure the software you use is compliant with W3C guidelines. The great news is, software that is compliant tends to be less expensive. Much of this software is even free.

The Design Phase

Now that you know how to make your site accessible, and have a helpful software package to get you going, you need to design the site or page. This is where templates and Cascading Style Sheets, or CSS, come in handy.

CSS is essential to web design. CSS is a dynamic template tool that allows you to change your mind on the design of an entire website with just a couple of minor changes. My IBM Websphere handles CSS quite brilliantly and you should be sure your web design software does too.

CSS is a tool, like HTML. You have to decide what information to put on the site, where to put it, how to format it, and generally what to make the page look like. Without professional training or sitting down and reading yet another book or six, my advice is to simply go with what makes sense – not only to yourself, but to anyone you can get to look at your design. But if you want to learn how to do it right, grab some literature on basic typesetting or graphic design principles and study the chapters related to page layout.

Templates

Many web design software contain templates for you to use to create a website. These are excellent tools, but don’t get caught up in them. Templates are the result of CSS in most cases, but in some they are more complex tools that create content dynamically. Keep it simple and use CSS.

And don’t rely on the template as the final answer for your design. Change the colors. Change the placement. Make it your own design, which you can quite easily do with CSS – even after the site is created and published!

Pitfalls to Avoid

So now you’re coding (or writing and letting the software do the coding for you.) There are a lot of mistakes you can make along the way. You’ve already sorted out the design and made sure the page is accessible; but what about the little things?

The WCAG is an excellent resource for this. My advice is to keep it simple. Consider your audience and design an interface that is appropriate. My favorite is a two-frame page design with a small left-hand frame which contains a simple menu of buttons or text in a table. It works, its easy to use, and its simple in design and implementation. Feel free to experiment.

Features like frames and tables are far, far more flexible than you could imagine. Take a look at your favorite sites and view the source code to see how they created the look. Opera even has tools to let you see how websites are built such as visualizing tables.

Don’t get caught up in technology though. Again, keep in simple. Users of your site won’t be able to appreciate that you put dozens of hours creating an intricate site when a design that takes a lot less work is equally effective.

Testing Your Design

Not everyone uses the browser you use. And browsers have many versions. The W3C has helpful information in this regard (I promise I don’t work for the W3C, they’re just a really awesome organization…see for your self, and bookmark the page, and tell everyone you know about it, including American corporations whose websites you use), of course. You’ll need to test your design on different browsers and even on different computers.

I use Opera as my primary test bed because it is, as far as I know, the only truly compliant (with W3C standards) browser. And as I use both Linux and Windows simultaneously, I have the ability to test on two different operating systems. Libraries, friends’ computers, and virtual machines are all resources you can use.

Having others test the site for you is a great idea too. This way, you can be sure your site is accessible. Don’t give it to friends who are just going to tell you how great your site is no matter how hideous it is. Give it to your mom, your uncle, your teacher – anyone who can be brutally honest with you. And when you get feedback, assess it in consideration of all you have learned thus far in this guide, then make changes.

Honest Search Engine Optimization

SEO is a hot topic these days. Search Engine Optimization is the set of techniques to be sure your site gets as close to the top of an internet search as possible. But beware. As sites like Ask.com, Yahoo! Answers and many others are finding out, SEO can be a bad thing if not done correctly and with honest intent. Don’t get bumped because you tried too hard.

Honesty is of course the best policy. You want people to find your site because they were looking for the content you provide. And just as seeing results from content farms is annoying when you’re looking for information on how to, say, dry tomatoes; so would users be annoyed if you were not entirely honest in your SEO.

SEO is a skill that can be mastered, and in my opinion, should require a 4 year college degree due to how complex it is. But if you are honest, and follow some simple guidelines, you’ll be ahead of the curve.

Keywords are essential. What is your site about? What information is presented. What are the topics? What information will people find on your site? Answer these questions with the same phrases you expect people to put in a search engine and you’ve mastered SEO in an honest form, what I call HSEO (Honest SEO.)

Why spend four years in college (okay, so that’s a slight exaggeration) learning how to optimize your site to get to the top of the list, when simple honesty, which may not get you to the first spot, will get you to the top of the list of sites that actually have the information people are looking for?

There are plenty of resources online for how to learn SEO techniques. Use caution, and always remember to be honest. Think of keywords as a guide to what’s on your site rather than a way to get people to go to your site and you, and your site’s users, will have a much more pleasant experience.

Maintenance

Nothing is more annoying than a website with outdated links and information. So don’t just publish your site. Maintain it. Check the links on the site periodically. Read through every page and make sure the information is correct. Check your keywords and adjust them as necessary.

A good design software will also include publishing tools. My IBM Websphere for example will allow you to automatically upload only those pages that you update in a site. You should make sure the software you use has a similar tool.

Conclusion

Website design isn’t an unreachable skill. With the information presented here, you should have everything you need to know to get started. More importantly, you are now familiar with the World Wide Web Consortium and it’s Web Content Accessibility Guide; which puts you ahead of the game. Who knows, you might just turn professional.

Leave a Reply

Your email address will not be published. Required fields are marked *