Welcome to WebmasterWorld Guest from 54.161.201.189

Forum Moderators: not2easy

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)

5+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member rcjordan is a WebmasterWorld Top Contributor of All Time 10+ Year Member



If you have international traffic, graphic links do not translate on babelfish, etc.
6:16 am on Apr 4, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



>>>Always SAVE YOUR SOURCE FILES!!!!!!

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

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

5+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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)

10+ Year Member



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)

5+ Year Member



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

Ken

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month