Photoshop navigation design text, as image or actual html text?

[DesigntheWorld]

I am experimenting using different methods of making navigation menus

I made a nav from scratch in Photoshop. I used a sprite image I made.




I have a couple of questions and would appreciate help with any of them.


Question 1:
I was able to get the navigation working correctly, BUT are there any discrepancies, errors or unnecessary markup in my HTML or CSS?


Question 2:
Should the nav ul li be display: inline as opposed to float: left ?
Since they both achieve what seems to be the same effect, which one is recommended in this situation and why?


Question 3:
I previously made another PSD navigation menu but I included the home,about,services and contact text and saved it all as a jpeg. I have seen that method used alot, but then I read somewhere that we should avoid putting the link texts as images for various reasons, such as for SEO purposes, screen readers and such...that is why the current navigation I am working on uses the html text that is styled using CSS. Should I always leave the text as html, and style it using CSS when using a psd navigation sprite, such as the one I made? Or is it okay to include the text inside the PSD nav sprite?

This is the browser view, that shows the text as actual html styled with CSS and you can see the hover state of one of the links:




Here is the HTML:

<nav>
    <ul>
    	<li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="services"><a href="#">Services</a></li>
        <li class="contact"><a href="#">Contact</a></li>
    </ul>
</nav>

Here is the CSS:

* {
	margin: 0;
padding: 0;
}


nav {
	display: block;
	background: url(images/nav_bg.jpg);
	}


nav ul {
	background: #0C0 url(images/nav_sprite2.jpg) no-repeat;
	width: 500px;
	height: 50px;
	margin: 0 auto;
	list-style-type:none;
	}
	
nav ul li {
	float: left;
	}
	
nav ul li a {
	display: block;
	width: 125px;
	height: 50px;
	font-family: segoe "Segoe UI", "Segoe UI Light", sans-serif;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 50px;
	text-decoration: none;
	text-align: center;
	text-shadow: 1px 1px 2px #333;
	}

nav ul li a:hover {
	background: url(images/nav_sprite2.jpg);
	}	
	
nav ul li.home a {
	background-position: 0 -50px;
	}
	
nav ul li.about a {
	background-position: -125px -50px;
	}
	
nav ul li.services a {
	background-position: -250px -50px;
	}
	
nav ul li.contact a {
	background-position: -375px -50px;
	}

Thank you again!!

 

[chrishirst]

Should the nav ul li be display: inline as opposed to float: left ?
Since they both achieve what seems to be the same effect, which one is recommended in this situation and why?

Neither, either or both.

However, floating elements is a VERY different method to making elements display as inline, and their use is absolutely NOT interchangeable.

3:
PROVIDED you use appropriate alt attribute text to replace the 'in image text' for user agents that do not, or cannot display images using image based navigation is not a major issue.

 

[chrishirst]

Oh and before any "expert" starts blethering on about how navigation images are "not good for SEO".

You are WRONG!!!

SE indexers use the alt attribute (it's not a 'tag') text as the anchor text of linked images.

 

[DesigntheWorld]

3:
PROVIDED you use appropriate alt attribute text to replace the 'in image text' for user agents that do not, or cannot display images using image based navigation is not a major issue.

Oh, so it is okay to design the whole navigation(text and all) in photoshop then save as an image and then go to the html and use the alt attribute in the anchor tag, like so :

<nav>
   <ul>
         <li><a href="#" alt="home"></a></li>
         <li><a href="#" alt="about"></a></li>
         <li><a href="#" alt="services"></a></li>
         <li><a href="#" alt="contact"></a></li>
   </ul>
</nav>

Did I understand your suggestion well? Is it okay to place the alt attribute in the anchor tag..or did you mean for it to be placed inside the li tag instead?


Thanks for all your help chrishirst! You are a tremendous help to people like me. : )

 

[Phreaddee]

the alt goes in the img tag.
personally I prefer text to images but that's not from an seo point of view but from a maintainability point of view.
but then again I avoid PS for web design at all costs, it's only real benefit to me is in IMAGE resizing, which IMHO is what photoshop should be used for, not website mockups. (but thats just me)

 

[chrishirst]

Oh, so it is okay to design the whole navigation(text and all) in photoshop then save as an image and then go to the html and use the alt attribute in the anchor tag, like so :

Yes and no.

Is it okay to place the alt attribute in the anchor tag..or did you mean for it to be placed inside the li tag instead?

No and no

For this case alt attributes apply ONLY to image elements, to add a 'tooltip' to arbitrary elements you use the title attribute.
If you have all text navigation using plain anchor elements there is no need to provide an alternative form of the wording.


But be aware, that for accessibility, too many titles can be worse than none at all

 

[chrishirst]

Just to clarify; because it was I that created the misunderstanding.

Your layout does not actually create an "image link", as in

<a href="path"><img src="path"></a>

because it is using the image as a background to an element. For this the text should NOT be in the image, as the anchor text is in the foreground of the element as text.