If you find out that the code is not that flawless do not be too harsh on your web designer though. Go ahead and ask why there are errors. If there aren’t too many most probably the problem lies in your own posts and the “template” provided by the designer might even be flawless. However, if there are just too many errors then you can ask the designer to clean up the code, unless you weren’t able to stipulate in your contract that the code needs to be W3C compliant. In that case, you can chalk it up to experience and either pay an additional fee or choose to stay with the existing design as long as your blog looks decent enough when viewed using browsers other than Internet Explorer.

Useful Stuff:
Validate Your Code Here.
Read about W3C (World Wide Web Consortium) Here.

Alt-tags ARE very important. SEO-wise the absence of alt-tags will ensure that your images and other embedded media will NOT be indexed by spiders since they will be unable to determine the actual content of each embedded element.

Being a parent of a child with special needs though, I am very sensitive about discrimination towards people with disabilities. To my shame I have have to admit that I have always been focused on the SEO perks of Alt-Tags and neglected to give importance to what it meant for those that are visually impaired until I read about the class-action suit against Target. To be fair to Target though more than a third of websites are inaccessible to blind users. Not that it makes it right but only that I do pity Target in a way since they have to bear the brunt of the negative consequences due to the neglect of webmasters all over the world. If I were them though I would fire my web designers/SEO consultants. They should have followed W3C Guidelines!

“Provide a text equivalent for every non-text element (e.g., via “alt”, “longdesc”, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.”

This is a reminder to ALL OF US especially here at Blog-Tutorials. Let’s make sure our beloved blog is optimized and discriminates against no one.

The bad news is, HTML has a dark side: it has tags and attributes that are not very useful or meaningful (i.e., deprecated) but can still be used by the ignorant, especially since HTML is very easy to learn. But if it is not learned correctly, your blog might load more slowly or not work at all in other people’s browsers.

Warning: Do NOT try these at home!

Tacky Tags

Used by people who are trying hard to impress their visitors—but are clueless about what good web design is all about.

<marquee>

While it can have interesting uses, people looking to spice things up should not turn to this tacky replica of a stock ticker. (Horror of horrors, this blog is promoting its use!)

<blink>

Again, completely tacky and irritating to look at. If you want to put animations on your website, learn Adobe Flash (or Microsoft Silverlight).

Cosmetic Tags

Used by people who don’t want to style their sites with CSS. These tags may have been irreplaceable a few years ago, but today, there is absolutely no need to use them.

<font>

If you want to change the font style of a paragraph, you can add use the style attribute in the enclosing HTML tag, e.g., <p>:

<p style="font-family: Tahoma, Sans-serif; font-size: 18pt;">Enclosed Text</p>

(But entering rules in a separate stylesheet is the best solution.)

<s> or <strike>

You can indicate deleted text by the more meaningful <del> tag. (Hint: <ins> is the complementary tag used to insert text.)

<center>

If you want to center a paragraph, you can add use the style attribute in the enclosing HTML tag, e.g., <p>:

<p style="text-align: center;">Enclosed Text</p>

(But entering rules in a separate stylesheet is the best solution.)

The Madness Has Just Begun

There are many more deprecated HTML tags to mention, but you probably haven’t encountered them (assuming you’ve only began to see HTML code lately). The sample code above will not always apply in other situations, but they give you an idea of how to add inline CSS into your HTML. (Recommended reading: W3Schools.com CSS page)

While you think taking these extra steps (learning CSS, particularly) to eliminate use of these evil HTML tags is an inconvenience, it’s a very good investment.

There are all sorts of complications in this, which are more often than not clarified (if not in the most intimidating legalese) in these services’ respective TOS’s, or Terms of Service. One thing to keep in mind, and something most bloggers may likely be concerned about is what is commonly worded as “…perpetual, non-exclusive, transferrable, fully-paid, worldwide license to use, copy, publicly perform, publicly display, reformat, translate…” **. The “non-exclusive” (or its equal) portion pre-empts possible user recoils on the ground that users who avail of these services relinquish ALL rights to material uploaded and thereafter shuttled to the consumers of the image content. Not much to worry about; it’s a lawyer thing to be six steps ahead and write off 99% of claims to privacy when, say, users suddenly find their beach body picture all over the web on a Flickr advertisement.

Also, keep in mind is how the service you choose to employ the phrase “legal use”. Case in point: both ImageShack and Yahoo! Flickr provides hotlinks (direct URLs to the images used in embedding t hem onto web pages where they are served), but their usage clauses are not as parallel. Flickr in each of the uploaded photos’ pages – where you can choose sizes that range from thumbnail, to small, medium, and full size – that directly linking to the individual files is a breach of the services’ Terms and Conditions, while ImageShack gets by with a simple reminder that using the thumbnail codes that include the words “Free image hosting by www.ImageShack.us” to allow them to show ads keep the basic services free. Multiply, while not exactly an image-only site but has served as one for a lot of bloggers taking advantage of the free* bandwidth, does allow hot-linking, and inserts a watermark with the Multiply logo on a corner of the image.

Remember, a little step you take to conform to the self-imposed rules on a web of free* services goes a long way in avoiding issues that may rise later on when you find yourself right at the center of buzz and traffic, which mostly translates to revenue, considering you’ve followed the other great tips and tricks from the writers of Blog Tutorials!

* – free may mean ad-supported
** – taken from Facebook Terms of Service

Proper use of fonts – as a general rule, no more than three font families are to be used on a single page. Too similar fonts make for a staid feel, while over-using fonts is gaudy. (This one I remember from my elementary Journalism class)
Font families – unlike in print media, the use of serifs (Garamond, Times New Roman, Cambria) and sans-serifs (Arial, Tahoma, Calibri) are reversed: serifs are generally used online for headers and titles, while sans-serifs are used for body text. The general assumption is that serifs when displayed onscreen without sub-pixel font rendering tend to strain the eyes. While OS X and Windows Vista already implement font families optimized for sub-pixel font rendering, this is still a small percentage of your audience.

Writing special symbols – with the proliferation of adaptive WYSIWYG interface, it’s increasingly more difficult to resist writing in Microsoft Word and pasting everything over to your platform’s Visual Editor (in my experience, Wordpress and Blogger are notorious for not filtering Microsoft-proprietary extensions to HTML when copy-pasting). As such, the inevitable appearance of symbols such as é and € make the work of future-proofing your code more difficult than it should be. To get on the good side of font substitution between operating systems and browsers, and future extensions to the current HTML/XHTML standards, consider using entity names versus entity numbers.

Use of images – here’s where it gets dicey. Unless you’re running a design site, it is good practice to stick with muted background patterns that tile well – not wallpaper sized images that only add unnecessary loading times to your page. Then again, I have seen well-optimized images used as watermarks that still manifest good practice. Your gut feel would be your best bet.

Formats of choice – JPEG is still de factor photos and PNG for outlined images. Generally, it is best to leave a file in its original format. You almost never have to perform format conversions as this decreases the fidelity of your images. This is especially true for PNG; unless specialized software is employed, converting a GIF does not give the vector-based advantage of PNG because the latter is dependent on distance between image elements (lines, loops, fills), unlike GIF.

In the next installment…

Color themes -
Adapting to different screen resolutions -
Cross-browser compatibility -

Stock photography is the general term for photographs that are readily found in repositories whether in the real world or over the internet. Since the photos are already made, creative control is often lost since the modifications that a client can do is limited to his or her image editing skills. Fortunately, there are literally millions of stock photos in the internet and there are a lot of sites that give them out for free. Those sites who charge for their service often compensate photographers and artists for use of their images.

A considerable number of these stock photography sites have one thing in common – they use hideously large watermarks to label their images. The labels are so huge they obscure the elements of the photograph and worse, they take away a lot of the aesthetic value that the image could bring to your blog post and your site in general. Almost all of the most relevant search results for ’stock photography’ would feature watermarks so every obsessive-compulsive blogger would be easily turned off from the get-go.

Luckily, there are still stock photography sites that feature images minus the unsightly humongous watermarks. Everystockphoto collates free images from known hosting sites (Flickr, etc.). Each image comes with its own Creative Commons license that lets you know just how much liberty you could take with the image and how you can credit the owner of the image in your post/ site. Details like the original address of the image can also be derived from the particulars provided in the site. To be absolutely sure, you may ask the owner for his or her permission before using the stock image.