homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Navigation by gif image or text link?
What are the advantages of these two linking methods?

 2:46 pm on Apr 3, 2002 (gmt 0)

The majority of websites seem to use gif images as their navigation buttons (I think?) whereas some simply go with text links.

Could someone please explain the advantages and disadvantages of each.



 2:47 pm on Apr 3, 2002 (gmt 0)



 2:55 pm on Apr 3, 2002 (gmt 0)

A friend and I were just discussing this. The other post didn't cover this very well so, here's how I see it:

Text Links - SEs love them. They can be a big help if you can include your keywords. They can hinder your results if they don't include your keywords and come before your main content in your code.

Graphical Links - Add to download time, which is bad, but can be used in place of text links that would have otherwise diluted the relevancy of your page, which is good. Can be very effective if done well.


 4:24 pm on Apr 3, 2002 (gmt 0)

And be sure not to forget CSS for buttons (and rollovers) - you can approach a good compromise that has graphical appeal, css speed and is search engine friendly since you are merely using styled html links.

I am adding to a test page and have added some CSS button effects. The nice thing about simple css buttons is there is no need for javascripting to acheive the rollover effect: www.bigbaer.com/css_lists.htm
- the test page will include css eaxamples that may or may not work in various browsers as I expand the page I will notate all the exceptions.


 6:00 pm on Apr 3, 2002 (gmt 0)

The main reason I use graphical links is for better control of layout, color and the ability to use a more interesting display font than would be safe to use with a plain text link.

Often, I'll use graphical links for the general site-wide navigation (home, store, contact, etc.), and use text for a secondary navigation structure to more specific topical pages (widgets, widget accessories, wingdings, etc.).

That way, I can have total control over the appearance of my main navigation (most often across the top of my page), where keywords don't really come into play, but visual branding can enhance the overall site appearance... and still get full advantage of using keywords in the anchor text of the secondary navigation links.


 6:45 pm on Apr 3, 2002 (gmt 0)

Graphic links require very good record keeping so you can match the exact font, font size, letter spacing, and special effects (if any) when the site needs a new button.

If you are working with a development team, or just working on more than one machine yourself, you must be REALLY sure the font in use is exactly the same, and not just similarly named. More than once I've ended up replacing all the nav buttons when I only needed one new one, but couldn't duplicate the sewt already in use.


 8:00 pm on Apr 3, 2002 (gmt 0)

Always SAVE YOUR SOURCE FILES!!!!!! :) Recently re-did the primary logo graphic for a site, not because I couldn't remember the font, but because I couldn't remember all the little tweaked settings I applied to it, and I don't know what happened to the original multi-layer photoshop source file.

Also, I've built a database on my palm with all my domains/sites listed, with spots for listing pertinent fonts, colors, etc. (Now I just need to fill the whole DB in...).


 8:21 pm on Apr 3, 2002 (gmt 0)

If you have international traffic, graphic links do not translate on babelfish, etc.


 6:16 am on Apr 4, 2002 (gmt 0)

Great point rcj! I would opt for text to feed the Babelfish. If your site is extremely regional or you do not care about "mulit-language-traffic" then text images may suffice. But leaving the door open by using translate-able text links is an optimum choice.

It all boils down to (once again!) knowing your market.


 6:35 am on Apr 4, 2002 (gmt 0)


And always burn a back up of your fonts folder!!!!


 9:16 am on Apr 4, 2002 (gmt 0)

This is great help. Thanks everyone.

I assume that most contributors here are design professionals and, therefore, Photoshop users.

What would you recommend for absolute novices in the graphic design field for the (I believe) relatively straightforward task of producing navigation buttons?

I recently downloaded the trial version of Ulead's Photoimpact which I'd read is very easy to manage. The fact is that no such software is ever easy to manage without experience of something similar.

Craig_F says that graphical links are "very effective IF DONE WELL". My attempts with this trial version and with Photoshop Elements most certainly weren't done well!


 1:54 pm on Apr 4, 2002 (gmt 0)

try paint shop pro, its cheap and quite good.

Oh, when I say done well I don't mean "look good". Looking good is important, but I'm more concerned with how/where they are used on the page.


 6:30 pm on Apr 4, 2002 (gmt 0)

I've heard glowing reviews for Fireworks if you're doing primarily web-related graphics... But I think Paint Shop Pro wins the price wars for pro-quality graphics output. (Unless you're using Linux. Don't want to snub the GIMP supporters, but I don't think we're talking *nix here...)


 8:59 am on Apr 5, 2002 (gmt 0)

Hi -
I have tried all sorts of links, and have now refined my system down to text links with either a background image and or a linked button(E.G. my home page).

The logic is that using only small ON and OFF GIF's uses very little band-width, plus text is SE friendly and potentially keyword rich.

It is easy to change the style sheet statements that control all the links appearance, and only requires changing a few little gifs to re-design the whole site.

The pages load very fast with less graphics.


 1:25 pm on Apr 5, 2002 (gmt 0)

Honestly I like both text and gif links.

What determines which I use is how I (or my client) want the site to look.

From the replies we can see that both have advantages and disadvantages.

When I do use gifs as primary links I also use text for secondary links.

As a sidebar I have both PhotoShop and Paint Shop Pro. I always end up going back to PSP. It just seems more intuitive the way things are laid out. For the most part when designing a webpage all I need are simple logos, buttons, spacer-gifs, and sometimes photo editting. I can do all of these quickly in PSP.


 12:22 am on Apr 8, 2002 (gmt 0)

question: If you use graphic-only links, would the ALT text make up for lack of a text link? And be SE friendly?



 12:30 am on Apr 8, 2002 (gmt 0)

Alt attribute text in the img tag describes the image, but not the target page. To add some SE clout to your graphic links, use a title attribute in the anchor tag, not the image tag.

Text links still seem to have more clout than graphic links, but title attributes are a help when you "must" use graphics.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved