Web Design, SEO & CSS… etc

This is the first part in what will eventually become a series of posts regarding converting a Photoshop layout into a fully functional website. I won’t go into too gory details as these tutorials have been done (far better) elsewhere. My aim is to try to highlight some of the pitfalls encountered and subsequent workarounds.

If you’re fairly new to using css one of the best things to do to get that much needed practice is to try and convert a photoshop (.psd) website layout into a fully functional web site.

If you’re lucky the .psd will be provided with all the relevant layers still floated etc making it much easier to crop out the individual graphical elements for the final site.

The site I’m using in this example is for a housing developer in the UK and I was provided the original layout by their graphics designer. I might add at this point the graphics designer is a top bloke and has over 25 years experience in printed design graphics, ie brochures, posters advertising, flyers etc etc. He was approached by the company to design them a website layout, which he did, and a beautiful design it is too. We have now worked together on several projects and he has learned things about typical web layout expectations and standards and I’ve learned a hell of a lot more from him about graphics.

My problem began when I was approached to be the guy to turn it into a website, I loved the layout I was shown and was keen to get involved in the project. However, I was provided the layout as a single layered image so I had to get busy on the cutting up myself. I also had to reconstruct areas that were hidden by things that would have been floated above initially.

Oh I almost forgot, it was provided as a .pdf file… … I should have just asked for the files but I was new to all this back then and keen to impress the pros. I just took a screen shot of the .pdf at 100% and then saved the layout as a big old .png.

I also had to construct static, hover and visited link images for the top, graphical menu as a non web standard font over a gradient background meant I couldn’t just use text links with a background colour change on hover etc.

This additional workload was going to put me way past my initial time frame so to save time on then having to write a load of css from scratch to put it all back together, then de-bug it for Internet Explorer (Grrr I hate IE) I used tables for the basic layout…

Wrong move! Suddenly the right hand side menu was giving me a world of pain, trying to incorporate the graphics (now being chopped into tiny filler blocks etc for the tables and cells) in with the smaller real text (something in Arial finally).

With a lot of swearing, hacking and tweaking even resorting to Frontpage (OMG!!! now long binned) and totally giving up on validation – that was way too far gone – I got a working site up and running. The thing was although the client was delighted and the site did perform very well for search I was never truly happy with it – the knowledge of what lurked below the surface had me waking in the night in a cold sweat… Anyone viewing the source code would have lol’d to say the least!

So I went right back to the start, as a personal project and to teach myself more about css, and began again.

Thanks to awesome blogs and sites like CSS Tricks not to mention lots of lot of Googling and Stumbling I began to figure out ways of achieving a fully css styled version of the site. I had to have a couple of chats with the owners to make sure they were happy that a couple of fonts might change but that generally it would look the same on the outside albeit certain wobbly areas would be a lot cleaner. The magic would be hidden away and unknown to all but web geeks like myself viewing source and search engine spiders.

There is also a bit of .php going on, using includes for all the menus then having to figure a way of assigning a ‘current’ class to the relevant link to show it as the currently viewed page. Easy enough with a menu on each page – just assign the class of the link for that page as current. Not so easy when the menus are just included from a single external file.

Thanks to this tutorial for that problem solved.

I have learned so much from this experience, I’ve actually gone back over some other sites I did a while ago and re-vamped them too.

The finished results are cleaner, faster loading, W3C valid and well, I can just look at them and smile finally.

Go To Part 2: Photoshop layout to XHTML