A little self indulgent I know, but I have recently used a bit of spare time to re-design my own web design portfolio and promotion site.
Like most web designers, I have tended to neglect my own site, in preference for getting on with jobs for paying customers, but it was beginning to become something of an embarrassment!
I always strive to create standards compliant sites for clients, and wherever possible, using divs and css rather than tables. Tables were once the standard fare of all websites, but with the flexibility of css to allow us to separate content from style, tables are generally frowned upon these days.
Converting a site from tables to div based css also gives an opportunity to address all the accessibility issues an older design may have.
My own site, want-a-site.co.uk, was getting a bit long in the tooth, and the lazy tables based design was generally inferior to all my client created sites. Time to throw away the old design and give it an overhaul.
How to go about switching from tables to divs?
A quick google on the subject will bring up a few free tools that allow you to simply submit your exiting site into an program that will spit out a div based css sheet. These programs basically take your tables, give them an id, and create a css sylesheet based upon the parameters that the tables based design had.
Giving in to my inherently lazy nature I gave one of these a try: Table2css is a commercial program but offer a free trial. the results were, admittedly very good, with all the html mark up removed, tables re-labelled as divs, and an accompanying css stylesheet created with all the relevant dimensions, background images and font styles included in the stylesheet instead of the html.
The only drawback was that the div names are allocated automatically by the program, and are not as intuitively descriptive as they would be if the css was created by hand. For example, instead of div id="header", or div id="navigation", and arbitrary id such as "div1" would be ascribed.
Being able to apply descriptive div id also helps when developing a design as it is instantly apparent which div you are working on by its name alone.
For a quick fix these converter programs aren't a bad idea at all, but I decided that the honest, old fashioned hand coded approach was probably better for my site overhaul, as I was looking to improve on the original design and content as well as simple switch to divs.
I began effectively from scratch with the re-design, creating the div layout I knew I needed for the header, navigation, content area and footer as a basic template. Graphics were created to fit these basic building blocks of the site, and specialist divs created for the needs of specific pages as /i went along.
Once the entire site had been built, I could go back to the css sheet and tidy up the css to combine as many div parameters, classes and font styles as possible to reduce unnecessary code.
I then ran both the ccs and the html code through the W3c validator and made any required changes to make sure it all validated.
Layout Width
The first change I made was to switch the container layout from 740px to 780px wide. Not a huge change, and still quite conservative as I wanted to keep the site accessible to the maximum number of screen resolution possible, (there are still a few visits from screen resolutions of 800x600 to my site and I don't want to preclude custom based on screen size of visiting clients).
The extra space I had allowed myself does provide a chance to space out the content a little more to prevent an over-cluttered look to the site.
Flexible v Fixed Width
I could have gone for a flexible width layout but with the limited time available to work on my re-design I took the easy option and went for fixed width. This meant I didn't have to mess about creating graphics that would expand or shrink across a range of screen resolutions, along with the associated messing about with divs to accommodate the styling.
As I use rounded corners to encompass the pages, I would have to have become involved in all kinds of css trickery and graphic tweaks to maintain the look across the different screen sizes.
Content and Style
The main purpose of the site is to explain quickly to visitors what it is I offer and how much it costs. Most visitors arriving at a web designer site are wanting to find if you offer the sort of site they are after, and how much it will cost them. The old design did place this information in a prominent position on the homepage, but I felt that some graphics, and styled fonts would help increase the impact of the message and make it more immediately apparent to visitors.
Content wise I was simple repeating he information included on the old site, but style wise I chose to box off the design packages I offer into distinct, numbered boxes, with a background image the made each one stand out from the other in sequence. To do this I created 3 nested divs, each with a differently numbered background image to nest within the right hand div column. On top of these background images I added the text information describing the packages, and linking direct to a more detailed page for each option.
I also chose to keep the introductory text on the homepage to a minimum. There is a temptation to place as many keywords and introductory text as possible at the top of a homepage to let visitors know what you are all about. In reality, visitors who have just landed on the site seldom read this blurb and have no interest in it when the first arrive: its the prices and packages that they want to know about so this now takes up the prime place on the page, with a very much abridged strap line or two at the top, and further detail included at the bottom of the page for those who hang around long enough to read it.
The place for detailed copy stating what the site or company is all about is, appropriately enough, the About Us page.
Navigation
I opted to retain the mouseover effect I had on the old design, even though this involved the use of a javascript image switch effect. This method of image switching and using images for links isn't always a good idea in site design. Search engines cant connect link text to the image, and they are less than friendly when it comes to accessibility, (the text cant be scaled up or read by a screen reader).
So why do it this way? I have a very stylised font for my website header that compliments all my of-line imagery, (business cards, leaflets, invoices and letterheads etc). There is no way to re-create this font style as editable text on a site due to the restrictions of web friendly fonts. I value the distinctive look of the font style as a brand image over the benefits of search engine readability so chose to risk the associated issues with using graphics in this case.
To offset the negative side effects I have a second line of plain text links beneath the top level navigation, along with plain text navigation in the site footer. This should address the issue of search engines spidering the page to the rest of the site. However, I am very aware that the use of graphics for the top level navigation remains something of an accessibility issue, and am looking at ways of incorporating alt keys and title tags in the script to make it more screen reader friendly.
Sometimes you just have to compromise.
Animation
The other major change to the homepage is the addition of a graphic towards the foot of the page that showcases some of my portfolio of websites. I felt it was important to add a few examples of may work on the very first page to hopefully encourage visitors to click further and view the rest of the portfolio on the "examples page". In the hierarchy of the page, these portfolio examples come below the package prices both physically and in terms of importance to a visitor.
As there isn't enough room to include a large selection of portfolio examples on the page, I opted for a panoramic, stylised background image showing a selection of site designs, with an animation placed above the background that cycles through a few more examples. For the animation I used a good old fashioned animated gif. Animated gifs often induce shivers of disgust in designers who prefer the use of flash for such dynamic elements, but it suited my purposes perfectly.
The use of flash on a web designers site may well add the “wow” factor, and show off artistic skills, but all too often such embedded flash animations are blocked by employer provided internet access, or older browsers. I think that there is nothing likely to damage the impression of a visitor than an ugly x to denote a missing or blocked image. It is also somewhat presumptuous to expect your potential client to have all the relevant plug ins to view your site as you wish it to be seen, rather than taking the effort to ensure that your site will be fully accessible to them without any effort on their behalf.
With this site, I am trying to encourage custom and orders for websites. The last thing I need is for a potential client to see ugly grey boxes where an animation has been blocked to them.
New Content
The only other major change to the site is the addition of a “tips” page. The page currently has a brief article including a few tips on choosing a web designer. The purpose of this is to extend the content of the site, offering visitors more than just a sales pitch, as well as creating an alternative landing page via search engines. It also serves a a good location to add links to other informative sites and articles, (like this site), in future.
Drawbacks
Ideally, I would have liked t c onvert the whole site to a php based design, giving me the chance to separate the navigation and content into distinct php files. This would allow site wide changes to navigation , style and content and the incorporation of new pages with the alteration of a single php file rather than manual editing of every page. I couldn't do this with an existing site without losing a lot of inbound links seeing an html page where a php page would then be. It would also adversely affect search engine rankings as the site has been long established and indexed with the html suffix
