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
-
Are pages not included in navigation given less "weight"
Hi, we recently updated our website and our main navigation was dramatically slimmed down to just three pages and no drop down under those. Yet we have many more important pages, which are linked to once on one of those main three pages. However, will this hurt those other pages because they are not included in navigation (some of which were starting to get good traction in rankings)?
Web Design | | LuaMarketing2
Thanks!0 -
Do pull quotes affect SEO positively or negatively?
I like the design element of a pull quote to ad interest and highlight an important point. If I use an exact quote from the page in a pull quote on that page, does that negatively affect SEO as duplicate content? Are there formatting or tagging methods that could help pull quotes to boost SEO? For clarity, by "pull quote" I mean a stylized bit of text that floats on a page in such a way that the body text wraps around it. It is actual text (not text embedded in a graphic) but it behaves like an image with text wrapping around it. Here's an example (in red on the right side): http://www.21ct.com/resources/news-room/21ct-announces-its-latest-us-patent-for-advancing-big-data-security/
Web Design | | kyle21ct0 -
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 -
Should the parent directory of the main site-navigation be clickable or not?!?
Highly discussed in our team is the question: Should all parent navigation items be clickable, or only the ones that have no child menu appearing on mouse over? At Starwood Germany, we would like to adjust the main navigation for all our websites in order to improve consistency and user friendliness. At the moment, most of our websites feature both clickable non-clickable parent items, depending on whether the items have a corresponding child menu (appearing on mouse over) or not. See example here: http://www.imperialvienna.com/en Some of our team members believe it might be irritating and/or confusing for the user if some items are clickable while others are not. What do you think? Any thoughts and insights would be truly appreciated!
Web Design | | DFM_GSA0 -
Html 5 main and secondary navigation for SEO best performances
I am building a website which will have a main navigation related to the site and each link of the main navigation will have a secondary navigation. We do not want to use a megamenu style navigation. I will try to explain it with a example: Let's start with an example for a computer store "My PC Store", the Main Navigation would be: Desktop PC's Notebook & Tablets
Web Design | | netbuilder
Multimedia When clicking on the "Notebook & Tablets" the user is directed to the page domain.com/notebook-tablet.html and on this page the secondary navigation appears: Laptop Netbook Tablets / iPad I am confused on how I should organize the semantic navigation for best SEO performances and I need advice / suggestions. I thought about 2 different ways to do it but which one is more appropriate in terms of SEO? PROPOSITION A Home Page: <header> My PC Store <nav> Desktop PC's Notebook & Tablets Multimedia </nav> </header> Sub-Page (Notebook & Tablets): <nav>(or <aside>?) Desktop PC's Notebook & Tablets Multimedia </aside> </nav> <header> Notebook & Tablets <nav> Laptop Netbook Tablets / iPad </nav> </header> As you notice on the home page the Main Site Navigation is included in the <header>while it is not in the sub-pages. PROPOSITION B Home Page: <header> My PC Store <nav> Desktop PC's Notebook & Tablets Multimedia </nav> </header> Sub-Page (Notebook & Tablets): <header> Notebook & Tablets <nav> Desktop PC's Notebook & Tablets Multimedia </nav> # Notebook & Tablets * Laptop Netbook Tablets / iPad </header> The main navgation remains always in the <header>(home page / sub-pages) of all page. I need suggestions... How would you guys organize the nav ? </header> </header>0 -
Tips for Panda-Proofing an Image Gallery
I'm currently working on a website that has a video, image and media gallery with over 9,000 items. The gallery can be found here:
Web Design | | Peter264
http://flyawaysimulation.com/images/16/microsoft-flight-simulator-x/ Every image has a page of its own. Therefore, essentially 9,000 pages of very thin content, especially the image pages with no UGC comments. Does anyone here have any tips to "panda-proof" these pages? The images still need to be indexed. What can we do here? The site also hosts videos, which of course the page the video resides on needs to stay in the index too (like youtube). Example of the video page here: http://flyawaysimulation.com/images/media/9371/fsps-3d-real-cockpit-effect-for-fsx/ Really want to hear your thoughts. Thanks in advance!0 -
Need help with image resizing (re: slow site)
I'm trying to figure out why I'm having speed issues with my site, and using google speed test to help me knock out some of the issues. One of issues deals with image resizing. I have a responsive design and so even though on the home page the normal width is 580 of the blog area, the full post can go up to 1170. So I size all of my images to 1170 wide and let CSS resize them depending on the size of the browser. (The images on the most recent post are a little bigger than this because I was testing something.) I was wondering what the best practice was in regard to what I'm trying to do. Also feel free to check out my site and let me know of any other feedback / advice you have. Thanks !:)
Web Design | | NoahsDad0 -
What's the best SEO option for jQuery image carousels?
My client wants a fancy jquery carousel at the top of their home page, as is all the rage these days. I would like to add some nice SEO friendly text to that carousel, but I'm not sure how best to do that..I assume that by keeping the text which will appear in the carousel in divs on the page, which will be swapped out as the images cycle, it should still be easily picked up by search engines?
Web Design | | TroyCarlson1