Website Design 2010 Style

It’ s hard to explain to someone who is looking at a website the work that has gone into it to get it to be there. At a glance, if it is a good website, it just looks like a brochure with interactive links. But behind the scenes with good website design it has taken a lot of hard work to get it to look so simple.

The things to aim for with design and code is less is more. The less code you have the faster the website will load and the better the search engine spiders will find the relevant text. When website design first started out everything was laid out in frames and tables. Today, design is very much based around search engines, tables and frames are a big taboo as search engines treat tables as data ignoring the text and frames hide text on different pages away from where you want the viewer to land.

I have found with WISIWYG (What You See Is What You Get) software, like Dreamweaver and such like. The code the software writes is not up to scratch with modern design. They tend to leave a messy code and go about things in a long converluted way, using javascript when it’s not neccarry. Most things can be done with CSS and HTML and it is a very light on code way of doing it. For example take a clickable button. I would use this kind of code...

<a class="button" title="Home" href="http://www.blogger.com/index.html"><span>Home</span></a>

The CSS would do the rest in a very neat and tidy way. Where as a WISIWYG designer would get lumbered with this...

<p><a title="Home" onmouseover="changeImages('home','homein.gif');return true" onmouseout="changeImages('home','home.gif');return true" href="http://www.blogger.com/index.html"><img id="home" src="http://www.blogger.com/home.gif" alt="" name="home" height="25" width="110" border="0" />
You can imagine with a menu that could become very long, which make it slow and difficult for search engines to cypher out the text.

So WISIWYG editors can’t be used, tables can’t be used and frames can’t be used which leaves div’s a invisible box that can be defined by CSS. But don’t just design the whole site replacing tables with div’s as that too can be messy, the trick is to balance each image with the text using as little code as possible, getting a pleasant site for the customer to view and fast, short code for the search engine spider to read. Sounds simple, but thinking of ways to say things in the shortest way possible is not an easy task.