Lets take into account designing a website using Cascading Style Sheets (CSS). With the main purpose of CSS being a way of separating document content from document presentation, it’s already meant to be a step taken to organize and simplify HTML coding. Now, with that in mind, why not complete the process by organizing your style sheets to help make them easy to understand, making the maintenance of your website a much easier task. But, as far as which is the best way of organizing a style sheet, it really all comes down to a matter of preference.

Here are basic guidelines to get you started:

Divide Into Specific Sections Using Flags
This helps to identify sections to get to them more quickly. Make sure to first plan out what the specific sections will be. For example:

• Global Styles – This section can define background, link color, image related things, etc.




• Typography – This section can define font size, header tags, paragraph tags, etc.




• Library Styles – This section can define classes for pages that have recurring style elements on various parts of your site.




• Templates – This section can define your main template layout.




• Individual Page Structures – This section can define classes for individual pages that do not particularly follow the uniform style of the other pages on your site.

Create A Table Of Contents
Creating a table of contents creates an easy overview of the stylesheet and adding number references to your code is very helpful for finding sections faster.

Alphabetize Your Properties
This is another way of making specific properties faster to locate.

Indent Descendant/Child Items & Related Rules
This helps to visually define page areas and how they’re related.

CSS Organizer Web Apps
Tools such as StyleNeat or ProCSSor can help to visually organize and standardize your CSS.

What other methods have you used to organize a stylesheet?

Related posts:

1. A/B Testing: A Guide To Split Testing 2 Versions Of A Full Website
2. 9 Tips to Make Your Website Load Much Faster (Part 1)
3. Updating A CSS File – The Importance Of Clearing A Browser’s Cache

Now, while I’m not going to side with either, I do want to clarify and emphasize that after all of the debate, it really comes down to a matter of preference.

Which is better for SEO?

The answer is…it does NOT matter. Using either WWW/no WWW versions of a website does not effect a website’s rankings because search engines do not base their ranking algorithms on that part of a URL. But, what is important is that for which ever one you choose, you need to continue to only use that format for all inbound links to your canonical URL. Otherwise, if some websites link to your WWW site, while others link to your non WWW site, then your search engine rankings will be split and not strengthen your canonical URL.

In this case, what you need to do from the get-go is create a 301 redirect from your non-canonical URL to your chosen canonical URL. This way, search engines will automatically redirect inbound links to your canonical URL, giving it the full “link juice” that it’s meant to get.

Here are 2 ways of doing a 301 redirect:

I. Through cPanel:

• Log into your cPanel account
• Under the “Domains” section, click “Redirects”
• Select the domain name in the drop down menu next to “http://(www.)?”
• In the text box to the right, type in the URL that you want to redirect
• Next to “redirects to?” enter your canonical URL
• Click “Add”

II. Through .htaccess:

• Download the .htaccess file
• Open the file in a text editor (e.g. Notepad)
• Use the following code below to redirect (replacing “domain.com” with your URL)

Options +FollowSymlinks
RewriteEngine On
RewriteCond %{http_host} ^www.domain.com$
RewriteRule (.*) http://domain.com/$1 [R=301,L]

NOTE – For SSL Certificates:

By default, companies assign SSL’s to “exampledomain.com” without the WWW, so if you decide to include the WWW in your canonical URL, make sure to notify your SSL company about that, and remember to do so every time you do renewals.

Are you Pro or No WWW?

Related posts:

1. Subdirectories – 3 Ways To Hide Them Through CPanel
2. 3 Ways To Shorten URLs
3. Search Engine Ranking – 5 Useful SERP Trackers

A good web designer knows that when it comes to having a successful website, there are many elements that need to come together in order to obtain “success.” Which, of course, will vary depending on the website type (e.g. – e-commerce, blog, non-profit, etc.). These elements can range anywhere from design (e.g. – color combinations, font sizes, item placements, etc.) to usability (e.g. – how many steps in an order process, new pages vs modal windows, text hierarchy, etc.).

Once you’ve put these elements together, the next step would be to test it out with users. In which there are many different testing options that can be utilized, as mentioned in this previous article: Usability – Track, Test, And Improve Your Website.

So what if you want to compare 2 versions of a website?

Well here’s a way of doing so…If you’re familiar with A/B testing, then you’re probably familiar with Google Website Optimizer (GWO). If you’re new to it, this is the most commonly used website testing and optimization tool that’s available free.

To summarize, GWO lets you create an experiment by taking either a variation of parts of a web page (e.g. – call to action button, image, etc.) or testing 2 different pages to compare conversion rates. This is done by including Control, Tracking and Conversion scripts/tags generated in GWO on your web pages for that particular experiment. For an example of the scripts you can go to http://www.intelligrape.com/blog/2010/08/12/applying-google-web-optimization/.

It also lets you set the percentage of how many various users are directed to each version. For example, you could set a randomization of 50% of users going to either version A or B, or 80% A and 20% B, etc.

Now, in order to utilize GWO to compare 2 full websites, you will need to:

• In Website A, add empty GWO tags.
• In Website B, enter a redirect script that goes to version B.

NOTE:
If there is 1 goal defined for the 2 websites, such as conversion rate, then the statistics calculated in GWO can be used. But, if you want to analyze individual areas of each website, then that can be done for each in Google Analytics. Therefore, GWO will work as the first step as a tool to randomly direct users to either version A or B.

Have you used another method for comparing full websites?

Related posts:

1. Unobtrusive JavaScript – Website Accessibility When JavaScript Is Disabled
2. Usability – Track, Test, And Improve Your Website
3. How To Add A Search Engine To Your Website

Well if you haven’t considered incorporating your feed to your other website(s), you should take into account some of the benefits of cross-promoting:

• Exposes viewers to your other site(s) to help increase traffic




• Viewers can easily see the content of your feed if they’re not subscribers yet




• It adds more opportunity for search engine spiders to index the additional content

Here are a few different tools to embed a feed into your website:

BuzzBoost – This is a feature from FeedBurner (now acquired by Google) that lets you cross-promote a feed to any site that you can display HTML by inserting a small piece of JavaScript code into your website.

Google AJAX Feed API – This is another tool from Google that allows you to embed a Dynamic Feed Control on your website that displays customized views of the feeds you want to display in 2 steps.

RSS2HTML PHP Script – This is a free PHP script that serves as another method of embedding an RSS feed to a website. The benefit of adding a non-JavaScript format is that the content can be found by search engine bots.

Selective RSS For WordPress – This is a plugin for WordPress that allows you to embed an RSS feed into your WP pages or posts, with additional options such as selecting the amount of feeds to display or choosing which ones to display using keywords.

What other ways do you cross-promote your websites/blogs?

Related posts:

1. How To Add A Search Engine To Your Website
2. RSS Or Email? – How To Keep Your Viewers Updated
3. Unobtrusive JavaScript – Website Accessibility When JavaScript Is Disabled

That small image is referred to as a Favorites Icon, or better known by it’s abbreviation as a Favicon (which is usually 16×16 or 32×32 pixels in size, and has 8 or 24-bit color depth). These images also appear in a Favorites or Bookmarks list if websites on the list utilize them, and on tabs in tab-enabled browsers.

So, from a user’s perspective, Favicons act as a visual cue for easily identifying different websites in a Favorites list. And from a website owner’s perspective, it acts as a branding tool.

But not only that, if you don’t have a Favicon, which most browsers look for these days, you will end up with a large amount of 404 errors in your server error logs just for misdirected “favicon.ico” (.ico is the Windows Icon file format) file requests. Moreover, if you have a custom 404 error file, you could end up with wasted bandwidth with all of the requests for that 404 file instead of just pulling up a smaller .ico file.

Therefore, it would be beneficial to add a Favicon to your website to help clean up your server error logs, and more importantly, add an extra step to establish your website’s identity.

Note:
Favicons can also be created in other file formats, such as PNG, GIF, JPEG, etc. However, Internet Explorer does not support these formats. The ICO format is cross-browser compatible (Internet Explorer, Google Chrome, Mozilla Firefox, Opera, and Safari).

How to create a Favicon:

Generators
Here’s a short list of various Favicon generators:

• DynamicDrive FavIcon Generator – This tool will automatically generate a .ico file and scale down its size using an image that you upload.




• Favicon.cc – This site allows you to design your Favicon using the painting/drawing tool on their website, and then generates a .ico file of your design.




• FavIcon from Pics – This can create a still or animated Favicon (.ico file) from an image that you upload.

Using Photoshop
In order to create a Favicon using Adobe Photoshop:

• Download the Windows Icon (ICO) file format plugin that allows you to export the file to the .ico format. You can download an ICO Format plugin for Photoshop here: http://www.telegraphics.com.au/sw/.




• Scale an image or logo down to 16×16 pixels, or you can use a 64×64 canvas to create a simple design that can be scaled down.

How to add a Favicon to your site:

Once you’ve created a Favicon by either methods, the next step is to upload the file.

• Add To Root Directory – If you have access to the root directory of your website, add the following code into the section or to any specific web page(s).

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>




• Add To Your Blog – To add a Favicon to your blog, you will have to add a plugin to the platform that you’re using. Here’s a free WordPress plugin called Shockingly Simple Favicon.

Note:
To test that your Favicon file is working, make sure to:

• Delete all of the current bookmarks to your website if you have any
• Clear your History, Cache and Recycle Bin
• Restart your computer
• Bookmark your website, and your Favicon should appear

Which method of creating a Favicon do you prefer?

Related posts:

1. Streaming Video & Audio On Your Website
2. A/B Testing: A Guide To Split Testing 2 Versions Of A Full Website
3. Unobtrusive JavaScript – Website Accessibility When JavaScript Is Disabled