If you are still reading I can assume you know the fundamentals about RSS and appreciate the tremendous marketing potential of syndication. We touched on the ATOM feed in the previous article, and if you have opted to use the ATOM method of syndication then this article will on the most part still be of benefit.

RSS and Blogging

RSS (or indeed ATOM) feeds are widely being utilized by blogs and news sites of all sizes. There are astute etailers that also broadcast and publish information using these feeds. Although sites are usually using RSS to syndicate news headlines and summaries, you do not have to stick to the conformed norm - instead, you can always try and be more stylish! Think syndication of product information, whether these are special offers or driver updates or images of new products, even help videos.

That is not to say that there is not a tremendous amount to be gained by simple syndication of news headlines, or ideally summaries, to keep clients, partners, resellers and potential customers abreast of your corporate news. If that is your primary aim I assume you already have a blog for your site, and if not then I highly recommend you get one. There are many self-hosted or free web-based service options, and blogging should be part of your basic online marketing strategy.

If you have a CMS driven website or alternatively a Blog application then they will usually either have an RSS feed as a fundamental feature or there will be a module or component available to make it easy. I will cover various applications in more detail in a moment. Getting your blog in place would be ’step one’ in the process.

See You Later Aggregator

However, there is more to marketing your feeds than simply publishing them online. Just as you need to submit your website to Google and others, you need to submit your site to a variety of ‘aggregators’. They will essentially help get your RSS found and publicized and enable your users to have your updates provided to them right on their desktop or RSS reader application.

If you are looking for end users and real eyeballs then there is one clear leader in the field of RSS/ATOM integration, and as an added benefit of using their service, they give you the ability to track your subscribers. That service is Feedburner.com, and having been acquired by Google in 2007 it is sure to continue to be a leader for a long time to come. However you should take a look at what else is out there and potentially promote your feeds through some of those services too.

There are comprehensive lists available, so get the links to your feeds and start publicizing them at the sites of aggregators. The following are two very good lists:

• http://www.newsonfeeds.com/faq/aggregators
• http://en.wikipedia.org/wiki/List_of_feed_aggregators

If you are running any of the following applications then we have some additional tips on getting you started:

WordPress

• Offers RSS Feeds as a standard feature.
• For information on customizing your RSS feeds read this article here
  http://codex.wordpress.org/Customizing_Feeds
• If you wish to use feedburner to promote your rss feeds then read-up here on an additional module that you will need: http://www.google.com/support/feedburner/bin/topic.py?topic=13252

Joomla

• Basic syndication as a standard features, although limited to the front page items.
• It is set to “on” as standard, and you will find the configuration in Components → Syndicate.
• You are limited to the homepage or one category for syndication (you can control the length of excerpts however). If you want more control then you should take a look at the “Feed Manager” a component you can download here: http://www.run-digital.com/mehr_zum_rss_feed_manager_2.html

Typepad

• On your Weblogs tab, click the “Configure “link for the weblog you want to edit, then click the “Feeds” link to open the Syndication setup page. Select whether you’d like to provide a Post feed. If this selection is enabled, readers will be able to subscribe to your weblog’s feed.

Blogger.com

• Basic RSS and Atom syndication are offered as standard on blogger.com
• You can access your sites RSS and Atom feeds here:
  Blogger.com RSS feed: http://[blogname].blogspot.com/rss.xml
  Blogger.com Atom feed: http://[blogname].blogspot.com/atom.xml

Postnuke

• RSS feeds are available by default on a postnuke site. The default feed is www.example.com/backend.php

PhpNuke

• Still running Phpnuke? First, activate ultramode in the Preferences section of the Administration panel. then your rss feed will be available at www.example.com/backend.php

Other CMS Systems

• Please review your vendors website for details, search for “RSS your software” on Google

Remember to validate

Remember to validate your RSS feeds, just to make sure there are no problems. There is a free tool available here: http://feedvalidator.org/

If that is the case then you are missing out on an extremely powerful free marketing tool. When publicized properly and combined with a blog that has good content, you are on a guaranteed route to ‘viral’ success. There is no marketing more stylish than organic marketing, and this is organic marketing at its best.

As DeWitt Clinton states “RSS, as a representation of an idea, is perhaps the single most influential cultural shift of the post-2001 technical and business community. RSS is the embodiment of the notion of sharing and syndication. Businesses will do well to heed the lessons being taught by people like Dave Winer and Robert Scoble.”

What is RSS?

RSS stands for Really Simple Syndication or Rich Site Summary depending who you ask. What no one argues about is that it’s a means of providing content syndication to others. It gives you the ability to automatically republish an article, possibly just a headline or even an image, by another application such as a website, online newspaper or blog.

You can include all manner of applications including audio and video in your syndicated content. This puts you in control, and hundreds of thousands of sites are already providing headline, article summaries, sound and video clips under all sorts of licensing agreements utilising this technology.

Having an RSS feed is a means of creating publicity for your website, and its power should not be underestimated. It may simply be a headline as I stated previously or it may include a summary and photos of the latest posting. The term Rich Site Summary comes from the fact you can provide a rich multimedia experience via rss, providing not just a summary of content but include images or video too.

An RSS document, often called a “feed”  or “channel,” includes meta-data such as publishing dates and authorship. Therefore web feeds benefit publishers by letting them syndicate content quickly and automatically with certain information. The originating publisher maintains complete control of content at all times.

The RSS feed usually contains the title of the update originating from the website, and it’s normal practice for the website displaying your content to a include a link to the source website.

RSS and Internet Marketing

The RSS concept was born at Netscape. They developed the system, intending it to be used for customization of personal homepages - creating links to web pages that interested them as a kind of advanced website bookmarking tool.

The use of RSS as an Internet marketing tool was the last thing on the mind of RSS technology developers. That does not in any way denigrate their power as marketing medium.

Major Corporations intending to use RSS for marketing their products and services would consider partnering with email account providers, (e.g. Hotmail, Yahoo etc); networking websites (e.g. Myspace, Multiply, Bebo, Hi5); websites of newspapers and television network websites (e.g. FT.com, CNN) and the like. That does not mean small business cannot harness the power of rss.

Small business owners and e-tailers should also consider social media and networking websites, as well as creating blogs on free networks (e.g. Blogspot, Blogger) and websites of clubs and organizations that would probably make use of their products or services. For example, a sports shop can look for the website of their local running/athletics club for possible RSS marketing.

RSS & Beyond

There is a slight deviation from the RSS standard, and that is the Atom Feed. The differences are somewhat technical, however if you are in the web publishing business for financial profit, looking to syndicate a lot of rich multimedia content then you may wish to consider the Atom standard.  Technically it offers everything already covered in this article, however there are a few small variations in the standard, that I would personally consider improvements especially for the commercial sector.

Not least of which is the ability to include copyright/licensing information with your feed. There are some other fundamental differences if you want to see a ‘feature comparison’ table then check out Noori’s blog post here: http://mindboosternoori.blogspot.com/2006/08/feeds-rss-vs-atom.html

Getting started

Check back in the next few days for the next part of this article telling you how to get started by implementing RSS feeds on your site and then promoting them online. SO whether you are running a Blogger blog or hosted wordpress, Joomla or still have a nuke based site we will point you in the right direction for syndicating your content and getting your content the widest possible coverage.

Admittedly, Macromedia (now owned by Adobe) is increasingly cramming more functionality and incredible features into Flash and making it ever more attractive to web designers looking to create something a little different. However, it is important to remember that those ‘funky cool features’ come at a price, and I am not just talking about the 19 year old emo-flash-guru you hired at Elance, but the other factors you need to consider.

First however, before I get an onslaught of email from Fans of Flash, some of the benefits:

Interactivity

Flash’s Actionscript opens up a vast array of possibilities, including..

Animations - These include banner ads, online greeting cards, and cartoons. Many other types of Flash applications include animation elements as well.

Games - Many games are built with Flash. Games usually combine the animation capabilities of Flash with the logic capabilities of ActionScript.

User interfaces - Many website designers use Flash to design user interfaces. The interfaces include simple navigation bars as well as much more complex interfaces such as online hotel or airline reservation systems.

Flexible messaging areas - These are areas in web pages that designers use for displaying information that may change over time. A flexible messaging area (FMA) on a restaurant website might display information about each day’s menu specials.

Rich Internet applications - These include a calendar application, a price-finding application, a shopping catalog, an education and testing application, or any other application that presents remote data with a graphically rich interface.

A standardized site

With Flash, you do not have to worry about cross-browser compatibility. No more worries about how your carefully crafted css code will render in Internet Explorer, Firefox or Opera. Wherever you place a component or element in Flash, that element will always appear exactly as you intended long as the user has Flash Player installed.

Better expression through animation

In Flash, one can make use of its animating features to convey a message in a much more efficient and effective way. Flash is a lightweight option for animation because it is vector-based (information is saved as mathematical lines, not pixels, and hence are smaller file sizes) as opposed to real “movie files” that are raster-based and hence much larger in size.

But Remember . . .

The Flash player

People have to download the Flash player in advance before they can view Flash movies. If you utilize Flash as the only means for accessing your site, you will notice a drop in visitor numbers.  Not everyone is willing or able to download the Flash player. You’ll also have to put in additional work in redirecting the user to the Flash download page if he or she doesn’t have the player installed.

Site optimization

If your content was presented in Flash, most search engines wouldn’t be able to index your content. Hence, you will not be able to rank well in search engines and there will be less traffic heading to your site.

Loading time

Users have to wait longer than usual to load Flash content compared to regular text and images.

To Flash or Not to Flash?

Unless you absolutely need the interactivity and motion that comes with Flash, avoid using it, especially if you are more concerned with search engine optimization. If you want some interactive graphical elements, use a combination of Flash and HTML with alternatives for those users that do not have Flash. If you wish to create an exciting interface but are worried about Flash, there are great alternatives, such as utilizing AJAX programming (asynchronous JavaScript).

Flash is excellent as a stand-alone program within your site. If you own a paint store and wish your users to experience a virtual showroom where they can paint their walls online, Flash is perfect for this. If you have an automotive showroom, using Flash to showcase your models in 3-D is another great idea for Flash.

As always, consider your audience. If your website is aimed at 25 year old web designers in New York, it is a fair bet they have flash installed and will be accessing your site using broadband or better, so go for it . . .

Flash is like any other tool. Used wisely, you can have an excellent and stylish website. Used wrongly, and you will only frustrate and turn away your online visitors.

What about other soft products like software, scripts or programs? Well a 3d Software Box is perfect for making the product seem more real to your users.

So this is exactly what we have for you today. A Photoshop ActionScript and a collection of templates you can download right here at StylishDesign and use completely free of charge. With these tools and this step by step guide you can have your first 3d cover complete in 20 minutes. Also included in the download is an actionscript for creating a software box. In a follow up article we will cover creating a software box in more detail. However follow the steps in this article and you should find using the other ActionScript is intuitive.

• Download the complete contents here (requires a zip program to unpack.)

Note: Throughout this article screenshots and diagrams are taken from Adobe Photoshop CS2. Therefore, you are recommended to use or this version or higher to achieve desired results (these scripts have been fully tested with CS3). No guarantee is made as to whether older versions of Adobe Photoshop can support the usage of the scripts. DO feel free to try and test them though and provide feedback through the comments section.

Step 1: Launch Photoshop

Launch Photoshop

Step 2: Loading the Action Scripts

Unzip the entire StylishDesigns ZIP package to your hard drive. The files should be allocated into their own respective directories (C:/…/Stylish Designs Covers) so just remember where you extract the files to.

You will be prompted to have all of the following files unzipped:

• PS Action Scripts – these scripts are found in the /PS Action Scripts folder. There should be 2 scripts altogether, the E-book cover and software box.

• PSDTemplates – These are 3 pre-made templates for the Box. You can find them in the /PSDTemplates folder.

Now, in your Adobe Photoshop environment, you need to load the action script:

1. Go to the “Actions” tab. You can see it on your right hand side in the Adobe Photoshop program.
   

   Go to Actions Tab

2. Click on the “triangle” icon and a list of options will appear. Select “Load Actions…”
3. The “Load” screen will appear. Go to your PS Action Scripts directory that you have unzipped earlier (C:/…/Stylish CoverDesigns/PS Action Scripts). Select “Cover – E-Book.atn” and click “Load”.
4. The E-book cover action script will be loaded and now, it is visible in your “Actions” tab!

DESIGNING YOUR COVER

Starting Your Action Script

To get started, pull down the list of actions under the “Cover – E-Book” action script. Again, you can find this under the “Actions” tab on your right hand of the Adobe Photoshop interface.

You’ll be prompted with 3 sequences:

• Start
• Compile
• Finalize

Highlight “Start”, and then click on the “Play” icon. A blank cover will be pre-made for you, like in the screen shot below:

This is the flat surface of an E-book, with the right gray area indicating the book’s binder and the lighter gray area being the front cover. When compiled, the final result will look something like this:

Inserting Text and Graphics on Your Cover

We have provided a blank template which if you follow the steps in this guide will produce exactly that – a blank 3D cover – after compilation.

Prior to compilation it’s up to you to style, design and decorate the cover – of course remembering to add words to the flat cover and the spine.

The main elements to edit are:

• Add text to the cover – put in your product title, description, sub title, author name, and/or website URL.
• Change the color of the cover’s background to suit your own tastes.
• Add graphics images and designs, from other sources or your own hand.

Because we are such a good bunch here at StylshDesign we have thrown in a couple of templates in the Zip file pre-populated with graphics and blank text for you to amend to your own requirements. Hopefully they will prove to be a useful starting point for your own inspiration.

Enjoy, and we would love to hear your comments!

If you host downloads of any kind you should be looking at Amazon. Whether its music, large numbers of images, video, audio or documents, zip files and PDF files. Any file from 1byte in size to 5GB can be stored on Amazon web services. There is even a BitTorrent™ protocol interface which will dramatically reduce your costs for high-scale distribution.

It is cost-effective with hosting at 15cents per GB for storage and 17 cents per gigabyte for downloads it is hard for traditional webhosts to compete. If they can compete you should be asking yourself, how? It is most likely at the detriment of service quality. Amazon S3 does not replace your webhost though. It cannot host your database or CMS system for example, your online shopping script or contact-us form. You supplement your traditional webhosting  with Amazons S3 service, a pay only for what you use srvice, as you use it, with no up-front commitments.

Amazon S3 is intentionally designed to be ultra simple, essentially its an interface that can be used to store and retrieve any amount of data, at any time, from anywhere on the web. There are mechanisms for securing your files, and if you are tech inclined, the whole system is SOAP compliant.

One of the massive benefits of using Amazon is it is truly “battle-tested” and can hande whatever you throw at it. With no pre-commitment and a pay-as-you-go structure (you pay only for what you use, with no up-front expenses or long-term commitments) it is ideally placed to handle your spikes in traffic, no matter how big they might be. This is reliability on a truly massive scale, Amazon style networks do not come cheap they have spent over $2 Billion in 10 years. Its akin to having your data managed by some of the finest minds on the internet hosted on one of the worlds most resilient and complex self healing networks in the world.

Now you might be saying to yourself, this sounds great as a backup utility for my desktop pc, laptop or external hard drive. You would be right. Their is an application that makes this easy:
JungleDisk http://jungledisk.com/ It turns Amazon S3 into a virtual drive on your computer.
JungleDisk is no good for hosting your websites files, as files uploaded to your virtual drive are not HTTP accessible.

So how do you get started with S3 for webhosting?

1. Signup for an account (its free but you will need a credit card):
   http://aws.amazon.com/s3/
2. When you sign up, you get two codes: an access key ID and secret access key.
   Keep a note of these you will need them
3. You will need to create an S3 “bucket” before you do anything else. The Amazon ‘bucket’ is akin to a folder on your webserver. Its essentially a way to organise your media.
4. Now you can upload your files*
5. Point your webpages and templates to the Amazon S3 URL’s.

* OK, unless you are comfortable with programming (SOAP, Python etc) you will need to use an external application. Amazon does not make it easy. However there are a couple of applications out there that can make it easy. Most require you to follow the steps 1-3 only, then the application takes over.

My personal favourite is a little extension for Mozilla Firefox:
http://www.rjonna.com/ext/s3fox.php

I have tested it and it works very well, with a drag and drop interface that I really like. Another cool tool with more advanced features (but a price tag after the free trial) is:
http://www.bucketexplorer.com/ Bucket Explorer.

Their is a lot more that can be said of the S3 service, basically we have covered the fact that it is extremely cheap, therefore saving you money, which you can spend making your site more stylish. That it is scalable, and that it is far more reliable than some budget priced webhost, extra 25,000 one hour? Just the once, NO problem!

With the links to the tools we have shown you the simple ways to upload and manage your files. If there is feedback I will be happy to answer any questions or write another article covering something in more depth.

A fantastic, flash based website, with cutting edge graphics and utilizing a heap of bleeding edge technology,  is useless as a sales or marketing vehicle if users cannot easily access the content. As always, I have said it before but I will repeat it because its the golden rule: design your website with the user in mind.

So how to optimize your sites usability? Here are some tips to improve the usability of your website to ensure it serves its functions optimally.

Navigation

Keep it consistent across your site - do not be changing where on the page your site navigation is located. Make sure it is clear, uncluttered and easy to use. This is pivotal to a good user experience.

Page Layout

Place your company logo at the top of your page (left, right or center) and link it to your homepage.
Ensure your navigation area is clear. Most sites have important navigation running across the top of the site, or in a table on the left hand page of a website. Unless you have extremely good reasons provide navigation in one of these areas. It keeps things simple for your users.

Also, If you have a large site, make use of ‘breadcrumbs’.

Typography

This is covered in my first article covering “Web design mistakes” where I tell you not to use excessively small or large fonts. Another thing to consider is your use of fonts, remember that you must limit yourself to what your users have on their computer. Their is no reliable method of font downloading. The most readable web-safe fonts are Verdana, Georgia and Arial, in that order. Arial is great but becomes hard to read at smaller font sizes. At a later date we can write a complete article on typography, let us know in feedback if your interested.

Use CSS

Some of the reasoning behind this is covered in my code bloat article. A lot can be achieved using just CCS, just check out http://www.csszengarden.com/ as an example.

The biggest benefit of CSS is separating design from content - If you wish to change the look of your entire site, you can do it from one single CSS sheet!

Fast Loading Time

If you are sure most of your users are in North America and using a broadband connection, you can get away with pages heavy on graphics and video. If your an ecommerce site relying on sales in other countries it pays to ensure your site is fast loading. To keep your site lean, mean and fast-loading:

• Use CSS - this cuts down on code-bloat and multiple-nested tables
• XHTML compliant sites - this means the underlying code you use is standard, and will load faster in modern browsers because they will easily understand and quickly compile it into a webpage
• Don’t go too heavy on the graphics - each graphic and image adds additional download time
• Be careful with scripting and Flash - again, all this code must be initialized first before running, increasing load time

Add site search

Make it easy for your visitors to find your sites content. If you have not got the technical know-how then — surprise surprise — Google has a very effective free option. Read more here: http://www.google.com/sitesearch/

As Google states, you “increase visitor satisfaction and loyalty, Increase website conversions and sales and Reduce support costs by enhancing self-service online.”

Web Copy

Keep your pages and paragraphs to a reasonable length. As with design, write for your audience. Large blocks of text tend to put visitors off, and it does not make for easy reading. Users usually scan the content, looking for pointers, headers and small paragraphs. Use visual queues such as headings and bold to improve readability. Also make sure you do not have typo’s, spelling and grammatical errors.

Web Standards

Wherever possible, ensure your website complies to web standards at www.w3.org. It is simply no good having a great looking site in Internet Explorer that simply explodes when you use it in Firefox.

And finally, check for broken links!

As a web designer you should be designing your websites with its visitors in mind at all times. It is your job to create the best visual impression for sure, but more important is ensuring usability and ease of use. These elements combined create a welcoming user experience.

Do not underestimate how important your role is as a web designer, the greatest product in the world with the best marketing material and copy on a website that has thousands of visitors will suffer badly and not convert if poorly designed.

When I discuss good design, its not just about the graphics, there are many design elemnts to take into consideration. Any professional web designer will agree there are many components to good design.

The key areas are:
Accessibility, User Interface and Graphic design.

In the interests of the above, here are my top 5 things to avoid:

1. Using Frames

Frames is obsolete, trampled-on, beaten-up and highly disliked by pretty well every designer worth his or her salt. Back in the mid 1990’s (when dinosaurs still roamed the earth), frames allowed your site’s navigation and logo to be visible even as you scrolled down the page. This is because, depending on the frame layout, you could have your navigation and header in different frames.

The problems? Besides being ugly and confusing, frame-based pages usually only show the home page URL in the address bar, making your site impossible to bookmark. Search engines despise them - which frame takes precedence as the content to show up? Often, from a search, only the content from one frame shows up, stripped of the other frames, leaving no navigation or logo.

If that’s not enough to turn you off, using frames makes your site look like a decrepit old man. It’s just old, bad technology.

2. Playing music

No background music. If you must have music then ensure the user starts the whole audio process off by pressing “Play”. This applies to the currently in vogue and considered stylish “Site Tours” where some virtual person starts talking about the site or its products. Do not auto-start these tours or force a user to listen to music.

3. Silly text sizes

This is central to usability. Do not use excessively big or small text, additionally do not use fixed font sizes (the user should be able to adjust font sizes using the browser settings). Text needs to be legible, users should not be squinting to read your content or scrolling simply to read a sentence. Good content should be clear and easy to read.

Note: To use adjustable font sizes in your CSS styles, use EM, percentages or the “small” setting. Avoid pixel or point sizes.

4. Popups/New Windows/Breaking the back button

Popups are generally blocked by users in any case, and there is very little good reason for them. Most pop-ups are for advertising, so users are put-off by the very idea, so even if it gets past a pop-up blocker, users instinctively close them.

IN any case popups break the ‘back’ button. Do not break the “Back” button, as this is a basic rule of usability, and will only confuse and frustrate your user.

5. Blinking Text

Nasty, just do no do it! It’s one of those html tags that somebody at Netscape thought was a good idea. Blinking text belongs to cheap, kitsch motel in a bad area of town. There is no excuse, I really do not think I should have to explain why, its a distraction.

So you can see there is a lot more to good web design than purely graphics, and I hope you appreciate why user accessibility and usability is important. My next article on usability and accessibility will explain in more detail and give you even more tips for running a successful site.

Colocation - A Location For Your Server

With colocation, you own and are responsible for your server or servers. However, you rent space at a hosting facility or datacenter that provides an environment that is conducive to the optimal working of your machines. Among the pros of this hosting option are:

• the temperature and humidity are controlled with HVAC systems
• your server is protected from fires and other natural disasters
• depending on the company, your data may be backed up with recovery measures in place to tide over an emergency situation
• your server is protected from unauthorized access
• you have redundant connections to a reliable Internet backbone so that your site has the maximum uptime
• if your office moves, you do not have to move your server location
• your server is kept running with adequate power backup sources.

What hosting should I get?

Colocation is the best option if your business is not large enough to have it’s own hosting area with all the costs of security, climate-control, backup sources and I.T. personnel you would need if you housed your own server infrastructure.

Colocation is a great option for medium-sized companies - your servers are protected by another company, while you still own and are responsible for all the software and the hardware. If you have sensitive data, need the best in security options, and want the best and most reliable Internet connections around, but without the cost of the security and the housing, then colocation is your best bet.

Dedicated Hosting - Lower Up-Front Costs

With colocation, you own the server and lease the physical location. With dedicated, you lease both the server and the space. Dedicated and colocation offer all the same benefits as those listed above. With a dedicated server (colocated servers are also dedicated), you don’t share a server or bandwidth with anyone else.

When it comes to cost, dedicated servers are less expensive than their colocated counterparts in the short run because you don’t have to spend a large amount initially to buy the hardware. The drawback is that if you wish to upgrade or change servers, you have to wait for the host to do this for you. With colocated, you simply buy the new hardware, enter the site and install it yourself.

Managed Hosting - Best of Both Worlds

Managed hosting is the most expensive hosting option - the flip-side is that you do not need the expense of having an I.T. member configuring and maintaining your server. Colocation and dedicated services typically have a managed option, which is what this type is. The hosting company is entirely responsible for the management and configuration of your server. Managed hosting offers all the benefits of dedicated hosting and colocation, along with the following (these may vary depending on the service plan):

• the provider takes care of all software updates, security patches
• technical support is included
• software installation, configuration and ongoing maintenance

You will have to look at the costs versus benefits to see which is better for you. If you have a strong IT team and you are geographically close to your facility, you may be better off managing your server yourself.

Shared Hosting - The Most Popular Option

By far the most popular option is shared hosting. You are one among many others who rent space on a single server and pay for the bandwidth you use. The greatest (and perhaps only) advantage of shared hosting is that it costs a fraction of what dedicated hosting or colocation would. Among the disadvantages:

• you have limited storage space and bandwidth
• some companies “oversell” their bandwidth and server space as a marketing tactic, promising huge or even “unlimited” amounts of resources with the knowledge that most of their customers will only use a fraction of what they are allowed. This often leads to overcrowding and very slow response times.
• you don’t know who you share space with - the server your website resides on may get blacklisted if your co-sharers turn out to be involved in illegal activities
• you may face site outages if your co-sharers are bandwidth hogs.

To avoid many of these negatives, research the best shared hosting options from reliable companies, and look at their feedback from unbiased sites, like webhostingtalk.com.

Blue Host and Hostgator are very popular choices for shared hosting, though they do play the oversell and “unlimited everything” game to entice new customers and grab market share. If you have a small website with little bandwidth, you shouldn’t have any problems.

Business Application Hosting

A fancy marketing term for shared hosting. The big difference is that these hosting companies do not play the “oversell” game, instead offering more reasonable bandwidth and hard drive space amounts. You get less space for a higher price, but with the knowledge that your server will not be crammed with many other websites. This is a great option if you are concerned more about reliability and strong servers than price - and of course, if you run a business, reliability should always be of greater importance than price!

Clustered Hosting

A method whereby multiple hosting servers are connected together and sharing all content. This allows greater flexibility and balance in space and bandwidth usage, and is designed for larger, more popular websites.  Cartika Hosting is a great example of a hosting company offering clustered technology. (Stylishdesign.com happily resides with this host.)

Virtual Private Servers (VPS)

The answer to those looking for middle ground between shared and dedicated hosting. While the server is actually shared between many sites, special software actually partitions the machine into completely separate systems. For all practical purposes, you are getting a dedicated machine.

You get a fixed amount of bandwidth and storage space, your own IP address, and your own database space. The only downside here is that the space is limited. So if your needs grow beyond this limit, it’s probably time to upgrade to a dedicated server.

Reseller hosting

This is shared hosting in a new bottle – a hosting company leases out server space to a reseller, and the reseller in turn repackages and offers shared hosting under his or her own name. The advantages and disadvantages of shared hosting hold good here, with one additional disadvantage – even if you can trust your immediate reseller, you don’t know who they depend on for your connection to the Internet backbone. And if the original seller is not reliable, you’re in for a rough ride.

Free hosting

Sites like Wordpress, Geocities and Blogger allow you a minimum amount of space where you can host your own sites. This is enough for your needs if you’re a blogger or just looking to put up a site for your own personal use. On the plus side, it’s free, and on the minus, you have absolutely no control over your hosting or any server configurations, and your site may have ads, banners and pop-ups from the sponsors to help keep your site free.

Hosting Features

Now that you know the different types of hosting, it is time to learn the features and differences between the various options:

Hosting Costs

Managed hosting is the costliest among all hosting options while free hosting, as the name implies, is free. When you opt for managed hosting, your cost includes that of the lease (either the data center, server, or both), infrastructure, bandwidth, management and administration, security and backup, and other miscellaneous expenses. This leaves you free from hiring a network administrator, so managed hosting is definitely an option for many smaller companies.

With colocation, you incur the cost of the server, of maintaining your hardware and software, and other running costs. With shared, virtual private and reseller hosting, you only pay your service provider for the use of their server, tech support and for other services included in your package.

Bandwidth

Colocation and dedicated servers allow you the maximum bandwidth while free hosting services allow you the least. Virtual private servers and business hosting provide limited but guaranteed bandwidth, something you cannot expect with a shared server where you share space and bandwidth with many other customers. Clustered hosting avoids bandwidth bottlenecks, allowing greater reliability and speed.

Control

Though managed colocated services and dedicated servers are some of the costliest options, you have the advantage of retaining the most control over the hardware and software on your server. Rather than having to choose one of the options provided by your service provider in shared hosting, you get to choose the operating system, any software and hardware for your server.

Maintenance Plans

Unmanaged servers are the most difficult to maintain and update, because you are responsible for the hardware and software. You must keep up to date with patches and system updates to ensure that you’re not beset by viruses and other malware. Because of this, you will likely have an I.T. team within your company that supports this. If you are a small company with a limited I.T. budget, or you just have a personal site, quality shared hosting is your best option.

About the author:

This article is contributed by Sarah Scrafford. Sarah regularly writes on the topic of web design colleges. She invites your questions, comments and freelancing job inquiries at her email address: sarah.scrafford25@gmail.com.

So what is ‘bloated’ code?

To put it simply it is code that does not need to be there. This can be varying degree’s of ‘dos not need to exist’. On the base level, it is simply extraneous code. Code that does absolutely nothing, no formatting changes or anything else. We will call this ‘extraneous bloat’

Code like the following often occurs when changing formatting in a Visual Editor:

<strong> </strong>
<em> </em>
<font> </font>
<div> </div>
<span> </span>

Elements opening and closing with no content in between, they serve absolutely no purpose other than to clutter up the code. These left over chunks of code are as a result of trying different formatting, when you undo a font change, sometimes instead of deleting the element created it just moves the tag, so that the element is left behind with no effect on formatting.

You might ask yourself, why do I care? Aside from the fact it shows a lack of professionalism, it does not adhere to standards, and it simply is not stylish? The fact that people with disabilities using special browsers may find your page illegible? Well for a start it increases the download time of your page. Too much clutter and your site me be relegated to the “too slow to index” file, getting a visit every 6 months or so and 1 or 2 pages indexed only.

That is not where the problem ends. Sometimes you get code like this
# Missing tags

<h1>heading
<h2>subheading</h3>

when they should be:

<h1>heading</h1>
<h2>subheading</h2>

Or worse still:
# Missing or mismatched end tags are detected and corrected

<a href=”http://somesite.com”>italic heading</a
when it should be:
<a href=”http://somesite.com”>italic heading</a>

Is that a good enough set of reasons for you? Great, in which case can move on and discuss other reasons code gets bloated. When using a Visual Editor its very easy to create nested tables and the like to achieve the formatting you require. However a simple ‘3 column’ web page layout can end up resulting in 15 or more tables with 50 or more table cells. Using CSS it is possible to achieve the same results without using tables at all.

SO we will call this ‘amateur bloat’ it is extraneous code that is caused as a result of limited web design experience. So you may say to yourself you have no desire to learn about the code behind the web page, your site looks great and you saved yourself a packet by doing it yourself in Microsoft FrontPage, or you got it done on the cheap. All that money you saved on web design you spent on content, pretty smart huh! Content is King after all.

You optimised your content for the search engines, it is keyword rich and as you already pointed out, by using one of those $60 templates from some template site looks real good. Well guess what, those fancy tables do a little more than look pretty, sometimes they can tell the search engines that your page content is the least important thing on the page, and that the banner advert at the top of the page is really important.

This is best explained with a graphic

So you see that the search engine reads the content one table at a time, in the order it appears in the code. Table 1, 2 then 3 where your content resides. This is not great for your well written content, if its relegated to the end of a page with bloated HTML the search engine may give up on your page before it even gets there if the page load is too long. There is no point in optimised articles no one reads and the search engines do not see.

Suddenly that initial saving on a web development company becomes a costly mistake. If your web design firm does not understand the importance of SEO then maybe it is time to consider another.
If you used CSS to create the same visual effect an additional (important) bonus is the SEO benefits, which means you can have column 3 read first.

This is an article in itself, but start by getting rid of that lazy code, you can do this easily using a tool called HTMLtidy. There are other products out there, but this imho is the best.

It is not simply a great tool for cleaning up code generated by your Visual or WYSWIYG html editors, it can do a lot more, so it is well worth checking out. HTMLtidy was originally developed by Dave Raggett. It is a free tool, an excerpt from his web page (http://www.w3.org/People/Raggett/tidy/):

“When editing HTML it’s easy to make mistakes. Wouldn’t it be nice if there was a simple way to fix these mistakes automatically and tidy up sloppy editing into nicely layed out markup? Well now there is! Dave Raggett’s HTML TIDY is a free utility for doing just that. It also works great on the atrociously hard to read markup generated by specialized HTML editors and conversion tools, and can help you identify where you need to pay further attention on making your pages more accessible to people with disabilities.”

Check out their online interface tool here:

http://www.w3.org/People/Raggett/tidy/

If we had a tool of the month here at Stylishdesign.com, then it would be HTMLtidy this month. It certainly adds performance to your code by taking out the junk. Now an example of what it can do….

This is the code after HTML Tidy:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 3.2//EN”>

<html>
<head>
<meta name=”generator” content=
“HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org”>

<title></title>
</head>

<body>
WORKING MOM NOW YOUR HOUSE CAN SHINE LIKE A
PALACE published By The queen of
shiny clean Dutch heritage! Proven effective Program! Thank you very much
for choosing my e-book Copyright 2008 Your browser may not support display of this image.
</body>
</html>

And this is the code before:

<html>

<head>
<meta name=”GENERATOR” content=”Microsoft FrontPage 5.0″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>New Page 4</title>
</head>

<body>

<p align=”center”><font size=”6″ face=”Signboard”>WORKING MOM </font></p>
<p align=”center”><font size=”6″ face=”Signboard”>NOW </font></p>
<p align=”center”><font size=”6″ face=”Signboard”>“YOUR” HOUSE</font></p>
<p align=”center”><font size=”6″ face=”Signboard”>CAN </font></p>
<p align=”center”><font size=”6″ face=”Signboard”>SHINE LIKE A “PALACE”</font>&nbsp;<br>
&nbsp;<br>
&nbsp;</p>
<p align=”center”><font size=”4″ face=”Signboard”>published</font></p>
<p align=”center”><font size=”4″ face=”Signboard”>By </font></p>
<p align=”center”><font size=”4″ face=”Signboard”>“The queen of shiny clean”</font>&nbsp;<br>
&nbsp;</p>
<p align=”center”><font size=”4″ face=”Signboard”>Dutch heritage!</font>&nbsp;<br>
&nbsp;</p>
<p align=”center”><font size=”4″ face=”Signboard”>Proven effective</font></p>
<p align=”center”><font size=”4″ face=”Signboard”>Program!</font>&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;</p>
<p align=”center”><font size=”4″ face=”Signboard”>Thank you very much for
choosing my e-book</font>&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;</p>
<p align=”center”><font size=”4″ face=”Signboard”>Copyright 2008</font>&nbsp;<br>
&nbsp;<br>
&nbsp;</p>
<p align=”center”>&nbsp;</p>
<p>&nbsp;<br>
&nbsp;</p>
<p align=”center”>&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;</p>
<p align=”center”><font size=”3″ face=”Eras Demi ITC”></p>
<center>
<p>
<img src=”http://mail.google.com/mail/?name=43d6b4299e7e408b.jpg&attid=0.5&disp=vahi&view=att&th=11ce1c10c70d27b0″ alt=”Your browser may not support display of this image.” width=”267″ height=”200″></p>
</center></font>
<p>&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;</p>
<p>&nbsp;</p>

</body> ::

Basically once a website visitor has a copy of your favicon.ico it will be displayed anywhere a link to the website appears.

Now that the favicon is supported in various ways by most browsers (Internet Explorer 4+, Netscape 7+, Mozilla 1+, Firefox 1+, Safari 0.5b+, Camino 1+, Opera 7+, AOL Desktop) it makes sense to spend the time to include one on your site.

There are several good reasons to include a favicon.ico file

• It shows attention to detail as a web designer
• Allows your site to stand out in the favorites list of user
• Allows your site to stand out when a visitor has multiple tabs open
• It simply looks better! Check the examples:

So now you understand I hope, both what an ICO file is and why it is so stylish.

I am sure you are simply itching to implement one on your site. If that is the case you have a couple of options. To fully appreciate why you have these options, and to make an informed choice as to whether you want to take the fast track or to take th time to go the other rout you need to know more about the ICO file format

Why an .ICO file?

There is one distinct advantage to an ICO file over other formats. This file format will allow you to store several versions of an icon within one file, so you can embed a 16×16, 32×32 and 64×64. Whilst the single 16×16 format will suffice for most people, if a user was to create a shortcut to your website on their desktop a much bigger version of your icon appears, a 32×32 pixel version, therefore web developers are increasingly taking full advantage of the .ico format. The limitation of this format is inherit in the fact it needs to work at such as small canvas size 16×16pixels.

Quick start guide

The quick route to creating a favicon is to simply have a 16×16 ico image file located in your server’s root directory. This path means using a pre-existing image (your logo, for example) in GIF or JPEG format and using a graphics editor or online application to convert the image into an ICO file.

1. Create/Choose your GIF/JPEG image file
2. Visit an online converter. There are many free ones available. The one from Maxiscript.com worked just fine for me.
3. Convert your file using the online tool, save the image that is generated as favicon.ico and upload to your root directory on your web-server via ftp. Upload in binary format.

Note for advanced ICO files:

If you want to create multiple sizes of your image and have it embedded in your ICO files then there is a windows application you can use to do this. It is freeware and released by Furred.net:

png2ico GUI++ (binary)

Icon Editors

There are a variety of ICON editors that allow you to draw your icons individually by hand. Go to your favourite software downloads site and search for ICON editors.

Photoshop Users

There is a free (donation-ware) plugin for Photoshop that will help you create your ICO files. Downloading and installing it will allow you to save your files in the ICO format. There is a second plugin which allows you to combine multiple images saved in in the ICO format(16×16 & 32×32) into one single ICO file.

1. Go to the plugin authors site and download and install the plugins in Photoshop or CS2 -
   http://www.telegraphics.com.au/sw/
2. Create a new File in Photoshop and make its size 128×128. This give you a reasonable size canvas to work with. Once complete you can resize your image to 16×16.
3. Save file in .ico format

If there is enough interest we will follow this article up with an in-depth looking at creating icons in Photoshop. Leave feedback if you are interested in such an article.

Advanced Usage

Different favicon according to directory:
Want to use a different favicon according to which directory your web pages are located?
This is relatively simple; just drop a favicon.ico file in the relevant directory and browsers *should* use that instead of the default image in your root directory.

Different favicon according to page:
If there are specific pages that you want to display a favicon for (especially useful if you do not have your own domain name) you can use the LINK tag within your html head on those pages.

Troubleshooting

If your web-host does not support the upload of .ICO files, ask them to include support by dropping them a nice note via email. Failing that, try changing the extension to .BMP, upload the file in binary format and then use an FTP client to rename the file to the correct .ICO format once it is on your webhost. This works in many instances.

Transparent backgrounds, in my experience very hit and miss, sometimes working, sometimes filling the background with a random colour, thereby ruining the whole effect.

Testing favicons can be laborious, so make sure you are happy with your finished design before uploading and testing it in your browser. Once you have tested a favicon it can be difficult to remove from your system (even with delete of your history and cache). So if you are still seeing the old favicon after uploading a new image file, then try testing the site from a different computer.

Bear in mind the implementation is still not robust. So there will be occasions where you simply do not see your favicon. Strange I know, and I cannot say I have the answers as to why this happens, suffice to say it occasionally happens and you should not lose any sleep over it. If you want to be sure your browser/platform supports the favicon then check out this page: http://informationgift.com/ud/faviconic/