Buttons or text navigation in Mobile website

Question

When building a mobile site, will using JPG buttons for navigation penalize the SEO for the site? (Assuming I use proper keyword alt text for the buttons)

Stylistically the site obviously looks better with some simple buttons, but does this decrease the juice I may gain from simple text links?

Answer 1

Why use .jpgs? They probably wont look good, and you could use css to make a link look like a button without sacrificing any seo.

Answer 2

You can also create CSS buttons http://www.cssbuttongenerator.com/ and have the best of both worlds, a nice looking button which functions on mouse hover down etc. Plus text on the button which is a little better I think than alt tags.

As for menus which are responsive it's pretty common for a select menu to appear in place of a horizontal menu on desktops or iPads. For examples you can review Canvas theme from Woothemes.

Answer 3

None of the answers so far answer your question about the impacts/benefits to SEO, so here goes:

• The filetype used to make the "button" (jpeg,gif,png etc) makes no material difference to your SEO
• Using inline images (img) requires the use of alt attributes, which would be used as the anchor text for your linked button
• CSS background images, or image replacement techniques can also be used to replace the anchor text with an image. If done correctly (there's lots of good resources on this), there will be no negative SEO impact.

Consider this however, one of the critical elements for Mobile performance is speed (now a ranking factor) - so you should consider the need to add additional HTTP requests for those navigation images, rather than styling with CSS.

Answer 4

I would use .PNGs, repeat the image to make a button (or just use a PNG button) and then place some text on the top of it. All can be done in CSS really easily. I would suggest looking at this http://www.getskeleton.com/ - Add the CSS files they provide and then just add the class #button or #full-width button to all of your links. They are really simple and the framework as a whole is brilliant for developing on mobile devices.

Answer 5

check out http://twitter.github.com/bootstrap/ they have a ton of basically pre done CSS and you can make great looking buttons by simply doing

<button class="btn"> I'm a button </button>

though before using it I would suggest you learn a bit of CSS.