Web Design, SEO & CSS… etc

Continuing on from my opening post about my first ever photoshop to XHTML conversion. In this post I’m going to cover the initial chopping up of the photoshop layout into the individual website sections eg header, navigation, content etc. So without further ado, let’s Choop da Shoop…

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.