I have “rescued” several websites for people in the last couple of years. All had fallen foul of a less than savvy/honest web designer… (see: Has a copy of Frontpage 2001, made a site for their uncle and is now a Web Designer.)

When I get a phone call or email about someones website not getting any visitors or them not getting enquiries etc the first thing I ask is;

“Does your site show up in search results?”

To which the answer invariably is,

“Yes! In fact it shows up as number one in Google.”

Impressive, so what’s the problem? If their site is showing up top spot on the worlds number one search engine why aren’t they getting any traffic?..

So my next question is;

“What search terms to you show up top for?”

“Well it’s when we type our website name in… why?”

Deep breath.

Me: “Well the thing is, it’s not very likely that someone who has never heard of you is going to type your domain name into a search engine is it?”

Client: “I suppose not, we do advertise in a magazine so people reading that will see our domain name won’t they? They’ll type it in won’t they?”

Me: “Possibly but most likely they’ll type your url into their browsers address bar and go directly to your site. What is your website about?”

Client: “We have a couple of holiday cottages in Cornwall that we rent out.”

Me: “Ok, so really you want your website to show up in search results if someone types in something like ‘holiday cottages Cornwall‘ or ‘Cornish holiday cottages‘ then.”

Client: “Yes, that would be great, I see what you mean a stranger is more likely to type that in search than our domain name aren’t they?”

Me: “Exactly, by the way what is your domain name?”

Client: “www.freddyandsandras.co.uk”

Me: “… …”

Me: “Well there’s not much we can do about your domain name, it would be better if it contained keywords relevant to your service. Would you consider registering a new domain something like cornwallholidaycottages.com?.. with keywords like that in your domain you’d be off to a much better start.”

Client: “Well we would, I see what you mean about the name but we’re already paying £30 a month for our existing domain name and hosting.”

Me: “Ouch! That’s a little on the high side but we can talk about that later. I’ve just had a quick look at your website and had a look at all the code that is used to make it all work etc and it’s a pretty bleak picture I’m afraid.”

Client: “Oh dear, we thought something must be wrong. What’s the matter with it and what will it cost to fix it?”

Me: “There are a lot of things missing that need to be included in the behind the scenes coding, some photos could be optimized better and your menu navigation needs looking at. Currently it’s just graphic buttons pointing to pages called page1.html and page2.html.

It gets a bit more involved but basically, graphics are invisible to search engines unless they’re given what called an alt tag, a textual description of the image. The alt tag further benefits by using keywords in it. The button on the navigation menu that points to the Rose Cottage page could be given the alt tag “Rose Holiday Cottage, Available For Rent In Cornwall” . then, the actual link to page1.html could be given a title tag again using some keywords to describe the link destination, Rose Cottage.

Text is much better for navigation links all round and page file names would be better called rose-holiday-cottage.html rather than page1.html. If the menu button needs to stay looking like the current graphic it can be made to look like that using a technique called CSS but that’s for another day.

Anyway I’ll put it all together and get in touch with you in the next couple of days with some ideas and suggestions rather than do it now over the phone. I’ll write up everything I can find and email it to you along with a rough idea of how long and what might be involved to fix it. I can also set you up with domain name registration and hosting for a LOT less than £30 a month.”

Client: “Ok, thanks a lot, I don’t think I’m going enjoy reading through it though. Bye for now.”

Me: “Don’t worry, the appraisal will be totally free to you and I’m sure we can come up with a fair way of taking it from there. Bye.”

And that has been kind of the way the chat went each time, a very disappointed person who had paid good money to a … well I won’t say to what. When you hear the figure £1500 mentioned plus £30 a month for hosting and you go to the site and see:

• A bunch of table cells thrown together (default borders always pleasant to see).
• Times New Roman text just resized for headers no H1, H2 etc used,
• No <head> title tag
• No meta description… a what?
• No alt or title tags used.
• Awful file names like page1.html
• Roaming navigation (homepage it’s at the top, page2 at the left, page 3 over at the right and so on) that swaps around the contents or even misses some out on some pages.
• Photos that are over 1MB but just click and dragged to fit the cell or the more advanced ones using width=”300″ to display a 3000 pixel wide image.
• A multitude of dead links, broken image links and having to constantly use the browser back button to navigate back…

Not good, and there are a lot out there – offering special discounts, £500.00 for a website that not worth £5.00

So, if you have a website that you think could do with a bit of a spring clean, drop me an email. I’ll gladly have a look.

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