Articles in The 'CSS' Tag

Dreamweaver Templates

by Carolina Usbeck

Have you ever been in the position of having to choose a technology to create a website and someone mentions Dreamweaver templates?
If you decide to use this technology, there are a couple of things you should know. The template addition to Dreamweaver might come in handy if you plan on keeping your website simple and have a general idea of exactly which areas of your site will be editable regions, meaning that those areas can be editable in each corresponding page, and which will only be allowed to change on the template itself. The uses of templates are a great help when updating non-editable regions since they update all the pages that are using the template, which can save you a lot of time if you are using them the right way.

A very important thing to keep in mind is to know which information you would like to display on all of the pages, usually a main menu, logo or any other information you place on your site that will be repeated in multiple pages, and which information will be displayed only in individual pages.
The only problem that I have faced with customizing a Dreamweaver template is that it can be quite cumbersome, especially if you need to update information in multiple pages that are not part of a non-editable region of a template or that are not part of a library. The use of libraries, which allow you to place information into a separate file, are a great help since they can be added by the means of a library object to a template of the site and help structure your site better.

If you decide to create a website with a Dreamweaver template, make sure that you use libraries for those areas that will be repeated in various pages. Create multiple templates if you have different side menus or images being used on specific pages,   even if it just has a minor difference from other templates since this will save you time in the future when updating the website. I would also recommend using CSS to create the styles for the templates because this will make any changes for the template regarding to styles of the site a lot easier.

JavaScript Flyout Menus, Why Are They Bad for SEO?

by Lee Zoumas

One of the many items we look for in our website Optimization Reviews is whether or not a website is using JavaScript flyout menus. JavaScript dependent flyout menus are not ideal navigation solutions for a number of different reasons. First and foremost, search engines cannot crawl JavaScript menus. This means that if you are relying on a menu system for users to find certain pages, while they may be able to, search engines will not. JavaScript menus also contribute to a page’s code bloat, by automatically adding numerous lines of irrelevant code to a page’s HTML output. Additionally, if a user has JavaScript turned off on their web browser, whether intentionally or not, not only will the search engines not be able to see the navigation, but neither will the user.

It just so happens that the most widely used menu system that we come across is the one that comes bundled with the most popular web development application, Adobe Dreamweaver. While this menu system is very easy to setup, style and implement, it’s a JavaScript menu. An alternative to JavaScript dependent menus would be a menu that is created using a combination of Cascading Style Sheets (CSS) and jQuery (a JavaScript). CSS and jQuery navigation systems will perform just as well, if not better, than a pure JavaScript menu and they are 100% SEO friendly. Also, if the user has JavaScript turned off, then the menu will degrade nicely to pure CSS.

If you are concerned about SEO and are considering using flyout menus on your website, then it is important to explore non JavaScript dependent menu systems so that your site can easily be crawled by search engine spiders.

How switching from image to text-based navigation can help your SEO

by Jessica Hammer

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.

Using CSS and limited Javascript, you can make stylish and scalable menus by formatting the text within the CSS sheet. We like son of a suckerfish and for more effect, Superfish dropdowns for their easy editing, styling and lightness of code.

For a huge selection of menu code, and great design ideas, visit this CSS Showcase page.