We are often asked to implement new navigation on sites that have poor optimized rankings. Many times, this is due to an image-based navigation, or a navigation structure that has been poorly designed.
While we understand that everyone wants an attractive and interesting site, a CSS, text-based navigation is a must-have for almost every website. It is your choice whether or not you want to give up looks for optimization, but in most cases, the text-based navigation looks just as good as an image-based one.
Here is the SEO difference. Image based navigations display all the ‘words’ of page names inside an image (a gif, jpg or png) and while that allows for a multitude of style options, the search spiders can not read your image. It only sees an image, and perhaps an alt tag. Text-based navigations, however, have the navigation (page names) in the code, so the spider reads it as plain language, and therefore, can follow links and index pages with better accuracy.
For a huge selection of menu code, and great design ideas, visit this CSS Showcase page.
Landing Pages are an excellent way of driving your traffic to a particular page, and funneling your visitors to a specific goal. We design landing pages for clients and recommend them for specific campaigns and promotions. That being said, they can be time-consuming to design and code. So how can you get the greatest use out of them?
Aside from having a well-designed page and a well-targeted campaign with a clear call to action, Seasonal Pages can get you a lot of bang for your buck. The variety of seasons and possible promotions are endless, and can be quite lucrative, depending on your product. Major religious holidays, back to school, Valentines, St. Patrick’s Day, Mother’s and Father’s Day are all great opportunities to give your campaign a boost. A versatile landing page can do that!
Before you begin to design the page, think about the elements that will remain stagnant throughout the seasons, and those that will have to change. The general look and feel should stay consistent, but think about a graphic or text area whose color can be changed to reflect seasonal colors. Perhaps allow for an area of the header to include a seasonal icon, so that when the time comes, you will just have to update that image. Buttons and icons within the text can also be easily switched out to match.
These graphic changes, in addition to updated, seasonal text, are a quick and easy way to get a fresh landing page in a fraction of the time. But as always, the initial design has to be smart and flexible!
Happy Mother’s Day Readers!
Part III – How to hunt down and patch up ie6 bugs
You are coding out a web page, you fit the styles, arrange your divs, align your margins, and check it on your browser, just to be sure that it’s correct.
There’s a huge hole in your layout, and you have no idea why! What do you do?
Well, you could read Part 1 of this series, and feel some solidarity with others (including me) who share your dilemma. Or you could read part 2, and employ some of the ie hacks I suggest, add an ie specific stylesheet, or try some different CSS tricks. But when none of that works, and you just cannot find the source of the ghost, you will need some serious tools.
As I have mentioned before, we test on many browsers at MoreVisibility, so our machines host a range of browsers ad web developer tools. Web developer tools are available for most browsers and are indispensable when troubleshooting layout. There is absolutely no way I would be sane, or even still working today, without my trusty Firefox and ie add-ons.
This fantastic little tool was introduced to me by a colleague, who convinced me to ditch my old trial-and-error ways. With one click inside Firefox, a dialog box pops up within the window, showing the HTML and CSS side by side. You can mouse over an element to bring up its code, and what’s more, CSS styles are shown in hierarchical order, giving you a view of which styles are at the top of the inheritance pile. A great asset when you can’t figure out where that underline is coming from!
Mozilla Web Developer Toolbar: http://chrispederick.com/work/web-developer/
This toolbar isn’t as universally useful as Firebug, but it does pack a host of valuable tools. You can check the actual (not stated) size of an element, use the ruler and generate a great image report with a list of images, their sizes and urls.
Internet Explorer Add-on
There is only 1 proprietary application for ie in this category, and it works for all versions of ie http://www.microsoft.com/downloads/
It combines some of the tools available from both Firefox add-ons. You can view the html, but the CSS panel is often code-bloated or unspecific. There is a ruler, an outline feature, and some image options.
Ie Web Developer is essential in troubleshooting the browser, but even with its aid, you may still need to use your wiles and common sense. Happy Hunting!