All posts in Articles

How to Make SEO Friendly Copy

by The Web Squeeze on August 20, 2010 in Articles with 1 Comment

There is a tacit assumption that SEO friendly copy will detract from the user experience. This is not true. This is only true in the following cases:

Keywords are inserted after the copy was written.
The copy is written by an unskilled writer.
The copy is unnecessarily keyword stuffed.

In the right hands, SEO friendly copy doesn’t have to sound unnatural. If written by someone with a good understanding of how to optimise content for SEO but who is also a skilled writer then there is no reason why the content needs to be any less user-friendly than it is search friendly.

Consider this: keyword density is important for letting search-bots know what the content is about so they can assess how relevant it is for a particular search. But users will also make very quick decisions about whether they’ve arrived at the right place, and seeing the words that they searched for (or related terms) dotted all over the page will do nothing but confirm their click.

Of course, some keywords are easier to incorporate into content than others, but one thing’s for certain: it’s much easier to base content around keywords than it is to shoehorn keywords into content. It is for this reason that SEO should be considered right from the beginning stages of web development. It may very well influence page titles (not just title tags) and the nature of content, as well as the content itself.

By considering SEO right from the start, you stand the highest chance of making natural sounding SEO friendly content rather than crow-barring in awkward phrases purely for the benefit of search engines. If this is what you find yourself doing, you have to ask yourself: is it worth getting high search results if everyone who ends up on your site is put off my awkward copy?

SEO friendly content is a compromise, of course it is. But by setting out with that compromise in mind, a happy medium is much more likely to be achieved than making it afterwards. Your copy needs to satisfy search-bots and users alike.

With all of the above in mind, here are the basics of making SEO friendly copy.

Title

The title of the content has a tremendous bearing on what Google thinks your page is about. This holds for the on-page title, the title tag and the URL. Making sure it includes your keyword is of utmost importance, and this will help you to reuse the keyword in the rest of the content. Remember how at school you would always restate the question in the answer?

Again, this doesn’t have to make an awkward title that no one wants to read. Be careful to fit your keyword in to make a natural title that is as geared towards enticing the reader as it is to upping your search rankings.

Relevancy

As much about place as content, make sure that if you’re posting on third party sites you’re posting on related sites in related categories (if appropriate). Accepting that offer of an article hosted on that casino website linking back to your sustainable tires site is not going to help. The more relevant the site, the more you establish relevancy to your desired keyword.

Keyword Density

Having your keyword in the title but nowhere in the content isn’t going to do you any favours. You need to reinforce the keyword throughout the copy so that it comes up as the most relevant topic for your site. You know those tag clouds that show you the most used phrases? You want your keyword to be the big bold one. Keep keyword density in mind while you are writing so you don’t have to artificially introduce it later. Thinking about keywords whilst you write will fundamentally change your sentence structure, if not the content of your copy entirely.

Length

Your content needs to be long enough to stand a chance of being considered authoritative. Estimates vary on content length, but 400 words is a good minimum to aim for. It gives you enough space to provide content of genuine worth and keep in enough keyword instances to make for some genuine SEO benefit. Short copy can be too easily dismissed as spammy by both Google and readers, but too-long content will often put off users whose attention spans have been eroded by too much micro-blogging.

The best copy will provide as much user experience as SEO benefit and confer as much PR advantage as search. Keeping both in mind from the start will help to achieve that. Copywriters well versed in the principles of SEO are much more useful than separate copywriters and SEO experts.

Create Simple Animation with Illustrator

by The Web Squeeze on August 18, 2010 in Articles, Tutorials with 1 Comment

At some point in time in every designer’s life there comes a time where you need to make an animated web banner.

Illustrator itself has always been a print based application and one thing it just doesn’t do is animation.

There is an application called Adobe Flash. Flash does have the ability to create animation. It’s also one of the most popular applications being used to create animation. Flash uses the concept of framed based animation whereas in Illustrator, there is no frame. However, there are layers inside Illustrator and the beauty of Illustrator is that it can turn layers into frames for you.

Let’s see how we can do that.

Creating Layers

Opening my layers panel will show you that my banner is made up of 5 different layers. If you are familiar with the Flash application, you’ll know how easy it is to create an image like that. Now, just think of a layer as a frame and you’ll see how easy this will be.

What I have done here is basically to put every frame of my animation onto a separate layer. Right now I have five different layers and when combined, it will produce the full image like the example above.

Once you have completed setting up your layers, let’s create our animation.

Saving Your Animation

Things to consider when setting up the Save for Web & Devices command:

Optimized file format: SWF
Flash Player version: Flash Player 9 (the latest version on your machine)
Type of export: Layers to SWF Frames (this is the most important setting)
Curve Quality: 7
Frame Rate: 1 second
Loop: Play animation repeatedly (tick this checkbox)

Saving the file to SWF, a Flash format, Illustrator will ask you which flash player you want to optimize. Select Flash Player 9 which is the latest version at the time of writing this tutorial.

Type of export, this is the most important setting that you need to set. You can tell Illustrator to save your file into a big flash file by selecting the AI File to SWF File. You can also turn all your Illustrator layers into frames by selecting the second option which is Layers to SWF Frames and that’s going to create an animation.

Next, if you want to play the animation over and over again, put a tick in the Loop check box. Setting the frame rate to one frame per second means that every one second it’s going to switch within the layer.

Let’s go ahead and save the animation and select HTML and Images (*.html) in the Save as type. This will then automatically export an html demo file with the table already in it, so on and so forth.

This is how your html will look like, automatically generated for you by Illustrator.

<html>
<head>
<title>Simple-Animation-In-Illustrator-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script src="images/Simple-Animation-with-Illustrator.js" type="text/javascript" ></script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><noscript>
<!-- ImageReady Slices (Simple-Animation-with-Illustrator.ai) -->
<embed src="images/Simple-Animation-with-Illustrator.swf" width="569" height="80" alt="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/">
<!-- End ImageReady Slices --></noscript><script type="text/javascript">fn00000()</script>
</body>
</html>

DEMO

Click here to view demo!

14 Google Chrome Extensions for Web Designers & Developers

by The Web Squeeze on August 16, 2010 in Articles with 8 Comments

Google Chrome is gaining popularity at a rapid pace with it’s incredible speed, malware protection and intriguing features. With chrome extensions, web designers and developers get the freedom to install their favorite addons and work effectively. These extensions can be used in web design and development process, thereby saving a lot of time and effort.

Editor’s Note: Visit our previous article for more great Chrome extensions.

Google Chrome is fast and secure. With it’s support for extensions, it becomes easy for developers and web designers to multi-task within the browser. Following are some useful Google Chrome extensions which can be handy for web developers and designers.

1. Web Developer

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. Some of the useful tools it provides include,

Validation of HTML, CSS and links
Outline table cells, headings, frames and external links
Displays title attributes, image dimensions, link details, anchors, abbrevations and tab index
Displays browser, handheld, print, inline and linked style sheets

2. SEO Site Tools

This extension provides you with on-page external metrics, social media information, page rank / numbering on Yahoo, Bing, Google search engine result pages.

It validates CSS and HTML, checks for gzip compression, and gives helpful on-page SEO suggestions about title tag, links on page, meta description and meta keywords.

SEO Site Tools also adds social media reactions like Facebook shares, likes, Delicous boomarks etc., to Google Analytics and it enhances Google Webmaster Tools with links anchor text, if they are followed links and mozRank (or PageRank) of linking pages.

3. XML Tree

This extensions displays XML data in a user friendly way. XML Tree makes it easier for you to view XML data like a tree with an option to (un)/fold the nodes.

4. JavaScript Tester

JavaScript Tester adds a shortcut to your browser to run and test performance of JavaScript code.

5. View Selection Source

This extension provides you with a resizable popup to view selection source. It’s very simple, but handy for web developers.

6. Csscan

This Chrome extension allows you to easily scan an element’s basic CSS properties without having to explore through the inspector window.

7. MultiSwitch

MultiSwitch enables you to quickly switch between development, test and productive application.

8. Regular Expression Checker

This is a simple regular expression checker/tester which works right in your browser. It’s handy to test regular expressions and patterns.

9. Eye Dropper

Eye Dropper extension allows you to pick color from any webpage or from advanced color picker. This is mainly useful for web developers.

10. jsshell

Jsshell lets you run jQuery and jLinq commands within your browser. jQuery and jLinq commands show up in the hint list along with CSS styles, elements and IDs.

11. JSONView for Chrome

JSONView for chrome is an extension that helps you view JSON documents in the browser.

12. SEO and Website Analysis

SEO & Website Analysis for Chrome provides an in-depth analysis of SEO covering more that fifty SEO and usability criterias. It is a useful tool for web designers, usability experts and developers.

When you click on the WooRank icon on your browser toolbar for any webpage, you will be sent to the full SEO analysis of the website covering.

13. SEO SERP

SEO SERP (Search Engine Result Pages) is a simple extension that enables you to quickly check the position of a list of sites given a keyword.

14. SEO Analysis Tool

This extension allows you to perform a basic analysis of a web page in your browser with a single click. It provides you with details including meta tags listing, meta tags analysis, the pages displayed within search engine results, keywords found in the anchor tags etc.