A cookie is simply a piece of text stored by a user’s browser, which online applications use for statistics and personalization purposes for returning users. There are numerous ways that different websites use this data, such as stored shopping cart information, preferences, demographic data, and so on.

How they work…

Every time users go to your website they send an HTTP request (request for a URL) to pull up a page on your domain. The user’s web browser uploads all of the cookies that have been set for your domain each time they request to view a page. So, depending on how many cookies are set, the response time can vary due to the size of the HTTP request, since most users have a slower upload speed than download speed. More cookies make the HTTP request larger in size, thus, it takes longer to upload the HTTP request to your web server to retrieve their requested page.

When would you want to set a cookieless domain?

This question coincides with the way cookies work, which makes it dependent on what you intend to utilize cookies for.

Unless you want cookies set for a specific subdomain or just for your homepage, you may actually have them set incorrectly. This would cause more overhead request than necessary, slowing down a web page’s response time.

If you do not want to have cookies set for subdomains, you will have to make sure your server or application only sets cookies to “www.example.com.” Otherwise, if you set cookies for just your top-level domain “example.com,” cookies will also be set for all subdomains set in the *.example.com format.

But, if you do want to have cookies set for a specific subdomain, such as “shop.example.com,” you will have to set cookies specifically for the “shop.example.com” URL.

You can do further reading about minimizing request overhead at: http://code.google.com/speed/page-speed/docs/request.html#ServeFromCookielessDomain

Can cookies be disabled cookies on browsers?

Yes they can. For example, on Internet Explorer 8, a user can go to:

Safety > Delete Browsing History > Then, select which stored files to delete (Temporary Internet Files, Cookies, History, Form Data, Passwords, and InPrivate Filtering Data)

Note:
First, close your browser, then re-open and delete the files because if you delete the files while you have a web page open, those cookies will not be deleted.

Aside from utilizing cookieless domains, what other methods do you use to reduce response latency?

Related posts:

1. HTTP Status Codes: A Guide To The Most Common Responses
2. Updating A CSS File – The Importance Of Clearing A Browser’s Cache
3. Building A Website: Common Issues

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

Have you considered utilizing icons in your design? They’re an essential way of adding a visual reference that helps users navigate through your website faster (when paired with a descriptive title) with recognizable images that identify sections/applications.

For example, icons in cPanel:

Another bonus of utilizing icons is that you can get them FREE! There are numerous online resources for great quality icon libraries. And of course, if you want to take the extra step, you can purchase custom icons or create them yourself. So why not boost both your website’s usability and design all in one?

Here are 10 resources for free icon libraries:

Icon Finder
This is an icon search engine that allows you to search through over 140,000 icons or browse through almost 700 different icon sets.

Function’s Free Icon Set
This is a set of 128 free 48×48 pixel icons with a glossy look from Function Web Design & Development.

FreeIconsWeb
This is a database of over 20,000 free high quality icons for Windows, Mac and Linux Systems. There will only be a price for icons if used for commercial purposes.

Free Icons Download
This is another large database of high quality icons for Windows, Mac and Linux that can be used free of charge for personal and non-commercial use.

Creative Freedom’s Free Windows 7 Icons
Website and Icon design company, Creative Freedom, offers a free download of their “Shimmer” Windows 7 icon library.

The Working Group Retina Display Icon Set
This company provides a 147 piece icon set that is optimized for Retina Display. It’s available to use for both commercial and non-profit purposes.

Smashing Magazine “Coded” Icon Set
This is free icon set from Smashing Magazine features 25 high-quality icons ranging from 512×512 pixels to 32×32 pixels that was designed with web developers in mind.

Graphicpeel’s Credit Card Icon Pack
This free icon set from Graphicpeel consists of 35 miniature credit card icons that come in 32×32 pixels in PNG format.

iShift’s “SocialShift” Icon Set
This free icon set designed by Manuel Lopez for iShift consists of 246 free social networking/media icons in PNG format.

Webdesigntut+’s Kudos Icon Set
Web Design Tut+ offers this free 51 piece professional web icon set that are sized at 32×32 pixels that can be used for both personal and commercial use.

What’s your favorite icon set?

Related posts:

1. 10 Resources For Free PHP Scripts
2. Favicon.ico – How To Easily Add A Favorites Icon To Your Website
3. 5 Reasons To Validate HTML

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