In this particular example I was provided the original photoshop layout by my clients graphics designer, a very skilled man indeed (who I am fortunate to continue to work alongside occasionally) but from a 100% print background handling lots of high resolution brochures, posters etc.

The layout was provided as a single layered image which meant I didn’t have the luxury of being able to grab each element as I would have done had the layout been provided as a layered .psd file. I think I also mentioned in my previous post about it also being supplied as a.pdf file :O( but hey back then I didn’t know any better. You never stop learning!

The first thing I did was take a full sized screen shot, cropped the layout out and saved it as a high res .png file. I also re captured the large photo that dominates the homepage content area and saved that as a .jpg for later use.

This gave me something a little like this:

Next I had to decide how to chop it all apart, what could be recreated using styled text and what would have to remain graphical. Unfortunately due to the non web safe font a lot of the original graphics has to remain in use (more on which later but I figured out a nice way to use text styled with CSS to look like the graphics including rollover effects) as opposed to primarily using text which is so much better for search engine optimization.

After a bit of chopping I basically arrived at this breakdown into the main sections:

• A – Header
• B – Top main navigation
• C – Main content area
• D – right column, secondary navigation
• E – Footer

I had to reconstruct some areas eg the header without the main navigation but I eventually ended up with a few individual elements that would then be built back together to display the whole, working site using XHTML, .PHP and CSS.

I had to divide the main navigation section into individual buttons and then create a darker hover state for the rollover effect. The resulting CSS required to convert what was a basic unordered list type of navigation using optimized text into the graphical representation was quite a challenge to say the least.

Each list item required a unique class so that each menu button could be given it’s own graphic hover image. Plus (by using .php) each item could be assigned a ‘selected’ class to allow the darker hovered image to remain displayed to indicate the currently viewed page.

What began as a tidy, unordered list quickly became something of a rats nest of code. You can see an idea of the list items below (I’ve removed urls and title etc to clean things up a bit):

<ul>
<li class="home"><a href="#" title="title here" <?php if ($page == ‘index.php’) { ?>class="selected"<?php } ?>><span>text link</span></a></li>

<li class="something"><a href="#" title="title here" <?php if ($page == ‘something.php’) { ?>class="selected"<?php } ?>><span>text link</span></a></li>

<li class="somethingelse"><a href="#" title="title here" <?php if ($page == ‘somethingelse.php’) { ?>class="selected"<?php } ?>><span>text link</span></a></li>
</ul>

This first list items class is “home” which calls the CSS to display the homepageUP graphic (the span is given a negative margin to move the anchor text 999pixels to the left and out of sight) for the link and swap it for the homepageHOVER graphic when the link is hovered. Once the link is clicked the .php code assigns the class of “selected” and the CSS for “.home.selected” tells the browser to display the hovered image to indicate that menu item as the currently displayed page. I could have used a totally different image for the “selected” state, maybe bright red with flashing dots but time was pressing on and it works fine. Here’s the CSS:

#navTop .home a {
background-image: url(../img/homepageUP.png);
background-repeat: no-repeat;
width: 96px;
height: 34px;
}

#navTop .home a:hover {
background-image: url(../img/homepageHOVER.png);
background-repeat: no-repeat;
width: 96px;
height: 34px;
}

#navTop .home .selected  {
background-image: url(../img/homepageHOVER.png);
background-repeat: no-repeat;
width: 96px;
height: 34px;
}

This was applied to each of the five main navigation elements that were assigned a div id of navTop and saved as an included .php file navTop.php

See a demo and grab the source files: CSS text/image navigation menu using .php to assign selected class.

In my next post in this series I’ll share how I eventually got the navigation in the right column working, it was originally just whole blocks of graphics with a hover action assigned using javascript, urgh. It took me a while but in the end I did it with CSS, got the blue diamond showing and correctly overlapping the main content div.

One of my passions if you like is to learn more about how to create websites that conform to a few basic rules that are 90% of the time missed out by simple page builder software and online site builders. Following these simple to implement rules usually ensures, among many other things, stuff like:

1) Showing up in search engine results pages (serps) through SEO – (here are some (not all) hot tips some people charge a lot of money to share!) keyworded image alt and link title tags, h1 & h2 tags at least for content titles and sub-titles, a good <head> title tag, text links not graphical buttons for menus/navigation, placing javascript etc in external files, adding an .xml sitemap and lastly keep using the description meta tag… although now deprecated for search engine ranking description meta does tell the search engine what text to display in the snippet shown below the blue link in the results pages. Reciprocal linking with other similar topic related sites/blogs is also vital.

2) Showing a reasonably similar appearance in the major browsers

3) Web safe colours and fonts – people go to a lot of trouble to design their site using a font they downloaded not realising it will just default to a serif or sans-serif regular font on every browser in the world on computers that don’t have that same font installed.

4) Usability for others, you might instinctively know your way around your site but a first time visitor may well be lost if you don’t follow simple rules or expectations like:

4i) Logo top left or top right (usually top-left) should always be a link back to the homepage.

4ii) Navigation menus should always remain in the same place on a page – if it’s in the left column on the homepage, keep it there on all the other pages – and be one click away from the homepage or top level pages. I hate clicking a link, getting to that page then finding all navigation has moved or vanished totally leaving me the back button on my browser as the only means of getting back… I’ll just go to Google and find a site that works, goodbye potential customer, gone for good!

4iii) Search Feature – if it’s a big site help your users find what they want with a built in search feature. Most people on ye goode olde tinterwebs are looking for something (often while at work or in a hurry), if they can’t find it on your site they will quickly go elsewhere so help them find it! Wave goodbye once again…

5) Images & links should always be given alt and title tags respectively not just for SEO but for text only browsers like Lynx and screen reader software too. Links should also be given a “focus” state similar to a hover state that tells you it’s a link (often an underline that vanishes on hover) when you hover your mouse cursor over it, the focus state is for people navigating via a keyboard and not a mouse and highlights the links when the TAB button is pressed.

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