Web design overview

Web design has evolved rapidly over the years. Initially, browsers were basic, and early versions

of HTML were fairly limited in what they enabled designers to do. Therefore, many

older sites on the Web are plain in appearance. Additionally, the Web was originally largely

a technical repository, hence the boring layouts of many sites in the mid 1990s—after all,

statistics, documentation, and papers rarely need to be jazzed up, and the audience didn’t

demand such things anyway.

As with any medium finding its feet, things soon changed, especially once the general public

flocked to the Web. It was no longer enough for websites to be text-based information

repositories. Users craved—demanded, even—color! Images! Excitement! Animation!

Interaction! Even video and audio managed to get a foothold as compression techniques

improved and connection speeds increased.

The danger of eye candy became all too apparent as the turn of the century approached:

every site, it seemed, had a Flash intro, and the phrase “skip intro” became so common

that it eventually spawned a parody website.

These days, site design has tended toward being more restrained, as designers have

become more comfortable with using specific types of technologies for relevant and

appropriate purposes. Therefore, you’ll find beautifully designed XHTML- and CSS-based

sites sitting alongside highly animated Flash efforts.

Of late, special emphasis is being placed on usability and accessibility, and, in the majority

of cases, designers have cottoned to the fact that content must take precedence. However,just because web standards, usability, and accessibility are key, that doesn’t mean design
should be thrown out the window. As we’ll see in later chapters, web standards do not
have to come at the expense of good design—far from it. In fact, a strong understanding
of web standards helps to improve websites, making it easier for you to create cuttingedge
layouts that work across platforms and are easy to update. It also provides you with
a method of catering for obsolete devices.
Why WYSIWYG tools aren’t used in this book
With lots of software available and this book being design-oriented, you might wonder
why I’m not using WYSIWYG web design tools. This isn’t because I shun such tools—it’s
more that in order to best learn how to do something, you need to start from scratch, with
the foundations. Many web design applications make it tempting to “hide” the underlying
code from you, and most users end up relying on the graphical interface. This is fine until
something goes wrong and you don’t know how to fix it.
Removing software from the equation also means we concentrate on the underlying technology
that drives web pages, without the distraction of working out which button does
what. It also ensures that the book will be relevant to you, regardless of what software you
use or your current skill level. Therefore, I suggest you install a quality text editor to work
through the exercises, or set your web design application to use its code view. Once you’re
familiar with the concepts outlined in this book, you can apply them to your work, whatever
your chosen application for web design. This level of flexibility is important, because
you never know when you might have to switch applications—something that’s relatively
painless if you know how to design for the Web and understand technologies like CSS
and HTML.
Introducing HTML and XHTML
The foundation of the majority of web pages is HyperText Markup Language, commonly
known by its initials, HTML. A curious facet of the language is that it’s easy to pick up the
basics—anyone who’s computer literate should be able to piece together a basic page
after learning some tags—but it has enough flexibility and scope to keep designers interested
and experimenting, especially when HTML is combined with Cascading Style Sheets
(CSS), which we’ll discuss later in this chapter. This section presents an overview of HTML
tags and elements, and how HTML and XHTML relate to web standards.
If you’re relatively new to web design, you may be wondering about the best platform
and software for creating websites. Ultimately, it matters little which platform you
choose, as long as you have access to the most popular browsers for testing purposes
(a list that I’d now include Apple’s Safari in, alongside Internet Explorer, Firefox, and
Opera). Regarding software, there’s an overview in Appendix E (“Browsers Guide”), but
this isn’t an exhaustive guide, so do your own research and find software to your liking.