Negative Margins - Image Navigation
-
I created a good navigation but can't replicate it with html or css so I might have to stick to images. What would you recommend as a best practice for images in navigation? This site doesn't need to rank really high, it's mostly for a portfolio.
-
Well, if you don't want it to rank, I would at least follow accessiblilty best practices. And those would be:
- Make the images very clear to read
- Provide "Alt Attribute" text for each button that clearly says what each button is for
- Provide "Title" tags that identify the menu button (this is for screen readers that speak the content of a site to blind internet users).
- Make sure that you "map" the area of the button so that when a person hovers over the entire button, they get the little hand that indicates there is a link there.
Having an image menu is definitely not my first choice. I'd really look at the possibility of using Google Fonts, and something like the CSS gradient generator to get dynamic fonts and gradients if that is what you are trying to do before using images.
But, it's not the end of the world, I have done them in the past (years ago). You just want to make sure that it is very clear and readily readable for people that visit the site.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Above the Fold Content - Use of large images
Hi All, Our designers have come to the SEO team to ask if have a large image across the top of the page taking up a large majority of the above the fold real estate will impact our SEO. Our initial thoughts are no as long as we have an optimised H1 visibal to the user landing there which informs them what the page is about. Any thoughts would be appreciated.
Web Design | | J_Sinclair1 -
Is this CSS solution to faceted navigation a problem for SEO?
Hi guys. Take a look at the navigation on this page from our DEV site: http://wwwdev.ccisolutions.com/StoreFront/category/handheld-microphones While the CSS "trick" implemented by our IT Director does allow a visitor to sort products based on more than one criteria, my gut instinct says this is very bad for SEO. Here are the immediate issues I see: The URL doesn't change as the filter criteria changes. At the very least this is a lost opportunity for ranking on longer tail terms. I also think it could make us vulnerable to a Panda penalty because many of the combinations produce zero results, so returning a page without content, under the original URL. This could not only create hundreds of pages with no content, there would be duplicates of those zero content pages as well. Usability - The "Sort by" option in the drop down (upper right of the page) doesn't work in conjunction with the left Nav filters. In other words if you filter down to 5 items and then try to arrange them by price high to low, the "Sort" will take precedence, remove the filter and serve up a result that is all products in that category sorted high to low (and the filter options completely disapper), AND the URL changes to this: http://wwwdev.ccisolutions.com/StoreFront/category/IAFDispatcher regardless of what sort was chosen...(this is a whole separate problem, I realize and not specifically what I'm trying to address here). Aside from these two big problems, are there any other issues you see that arise out of trying to use CSS to create product filters in this way? I am trying to build a case for why I believe it should not be implemented this way. Conversely, if you see this as a possible implementation that could work if tweaked a bit, and advice you are willing to share would be greatly appreciated. Thanks! Thank you to Travis for pointing out the the link wasn't accessible. For anyone willing to take a closer look we can unblock the URL based on your IP address. If you'd be kind enough to send me your IP via private message I can have my IT director unblock it so you can view the page. Thanks!
Web Design | | danatanseo0 -
How to create this image effect for my home page
How do I make a wide, somewhat fast loading image effect like this home page has: 3dcart.com work on my website bobweikel.com I'm asking for how to create the effect (with small enough image kb to load) and what the image should be of in your opinion. Thanks!
Web Design | | BobGW0 -
Should we include our header logo in a sprite or leave it as a regular image?
We are combining the images in our header and footer into sprites. We noticed that when we include our header logo in the sprite, we lose the "alt" text associated with the header logo. Is this undesirable? Would it be better to leave the logo in our header as an image with "alt" text? Here's the link: http://www.ccisolutions.com
Web Design | | danatanseo0 -
AJAX & JQuery Tabs: Indexation & Navigation
Hi I've two questions about indexing Tabs. 1. Let's say I have tabs, or an accordion that is triggered with Jquery. That means that all HTML is accessible and indexed by search engines. But let's say a search query is relevant to the content in Tab#3, while Tab#1 is the one that's open by default. Is there any way that Tab#3 would be open directly if it's more relevant to the search query? 2. AJAX Tabs: We have pages that have Tabs triggered by AJAX (example: http://www.swisscom.ch/en/residential/help/loesung/entfernen-sie-sim-lock.html). I'm wondering about the current best practice. Google recommends HTML Snapshots. A newer SEOMoz Article talks about pushState(). What's the way to go here? Or in other words: How to get Tabs & Accordion content indexed and allow users to navigate directly to it?
Web Design | | zeepartner0 -
Left or right hand navigation
Really stupid question (I think) but does Left or right hand navigation help or hinder SEO and/or user experience? Re-doing our site at the moment and I quite like right hand navigation as it seems to highlight our content better but not sure if it would hinder anything SEO wise - site is based on a responsive theme and side navigation is only called after content anyway so don't think it would make a difference SEO wise Noticing more and more sites moving towards right hand nav and I quite like it, would also differentiate us in our niche as everyone else uses left hand nav As I say probably a stupid question but thought I would ask! 🙂
Web Design | | Jon-C0 -
Keyword rich footer links negative effect
Based on bits and pieces of information I've read on SEOmoz, am I correct to state that:
Web Design | | Partouter
"Keyword-rich footer links effect pages negatively in terms of the keyword referenced in the anchor text?" This means footer links in Thanks in advance fellow Mozzers!0 -
How is link juice split between navigation?
Hey All, I am trying to understand link juice as it relates to duplicate navigation Take for example a site that has a main navigation contained in dropdowns containing 50 links (fully crawl-able and indexable), then in the footer of said page that navigation is repeated so you have a total of 100 links with the same anchor text and url. For simplicity sake will the link juice be divided among those 100 and passed to the corresponding page or does the "1st link rule" still apply and thus only half of the link juice will be passed? What I am getting at is if there was only one navigation menu and the page was passing 50 link juice units then each of the subpages would get passed 1link juice unit right? but if the menu is duplicated than the possible link juice is divided by 100 so only .5 units are being passed through each link. However because there are two links pointing to the same page is there a net of 1 unit? We have several sites that do this for UX reasons but I am trying to figure out how badly this could be hurting us in page sculpting and passing juice to our subpages. Thanks for your help! Cheers.
Web Design | | prima-2535090