SEO Effects » Web Design

Tools of the Trade for a web developer

Warren — Mon, 13 Oct 2008 15:27:14 +0000

Where do I start with this, well I guess the program I use most is Abode Dreamweaver CS3, I know some developers will disagree with this but after using Dreamweaver for many years I think I am either just very used to it or stuck in my ways, but at the end of the day I do like many features of Dreamweaver.

I hand code everything in Dreamweaver and test/view what I am creating in Firefox and IE and find this to be the quickest way to create pages. So if you are building a static X/HTML webpage then there is no need for anything else, set up your CSS and webpage all in Dreamweaver and test in all the browsers you can get your hands on, I find testing in IE6, IE7, Firefox and Google Chrome suitable for most things.

Firefox web development Addons.

Firefox is both a great web browser and an ideal tool for web developers. There are simply loads of free addons to make your life and day to day work tasks easier. The one I use most when building a webpage is FireBug. This tool gives you, with the click of a mouse, detail about any page you are viewing, it can show you all the DOM elements on the page and their related CSS styles, it lets you manipulate the DOM to test or see where problems are and also has a JavaScript debugger built in. One the the best thing I find with FireBug is the ability the view AJAX XMLHttpRequest POSTS and Responses so for testing AJAZ applications it is simply great..

Firefox also has an added called “Web Developer” which when installed can be a great tool for testing XHTML and CSS to see if everything validates. This addon also lets you disable JavaScript and CSS easily and is good for resetting sessions and clearing the cache.
You can download FireBug here – http://getfirebug.com/ .
Download Web Developer here – http://chrispederick.com/work/web-developer/

Testing Locally

If you are like me and use PHP and MySQL then you will have to set up a local web server to test your work. For the non technical there is a great all-in-one download that will set up a development environment on your PC in a few easy steps. XAMPP by Apache Friends is a simple download and install to have your own local web server up and running so you can test your MySQL AND php Applications before going live.
Download XAMPP here – http://www.apachefriends.org/en/xampp.html

SQLyog MySQL GUI client.

When creating databases it really is quicker to have a good GUI client to help you set up all your tables and to test queries before you put them in your page. I use SQLyog from www.webyog.com, its fast, easy to use and great for testing your database queries.

SEO Friendly XHTML

Warren — Sun, 28 Sep 2008 16:44:16 +0000

Create an SEO friendly XHTML page

When creating a xhtml page on your website here are some important considerations for search engine optimization. This is a basic rundown or checklist with some of the most important elements for the on site SEO of your page.

Document declaration and headers.

Declare the document type;
The most common is the Transitional
Give the document an xmlns attribute and set the page language code.
Declare the head element of the page
Define the character set used in the page.
Define the page Title element
Title of the page
The page title should be around 40 to 70 characters in length and be a description of the text content of the page. The title should also include the main key words / phrases that you would like it to be found for in the search engines. It is possible the most important part of the page in terms of SEO value and is what the search engines use as the link through to your site in their search results pages.
Define the page description.

The meta description of your page should contain approx 25 words or around 150-200 characters and should be a detailed description of the page content. The meta description has no direct SEO effect but is normally used by the search engines in their results pages as a description of the link through to your site, and so should be an added incentive for a user to click, containing relevant keywords / phrases .
Include external CSS and Javascript files.

Always keep your CSS and JavaScript functions in external files as this keeps your page code cleaner and easier for the search engines to spider your pages.
Close the head element
The document Body

Important XHTML elements of a page.

This is the main text header for the page. There should be only 1

element on a page and like the page title it should be a short description on the page text content.

/

Sub heading h1 to h6. Use these to split up your paragraphs with sub headings. You can have numerous h2 to h6 tags on your page.

The paragraph tag, used for the paragraphs of text on your page.

Used to bold text. Search engines will put emphasis on any text that is bold on your page. Do not over use this tag but if possible you could bold up your most important keywords.

Used to italicize text. Like the tag the search engines will put emphasis on text inside this tag.

Used for creating links. The attribute is used for the link and will pass page rank to the page it is linking to unless you add a nofollow attribute, . When linking out to other sites it can be a good idea to use the nofollow attribute so you can pass all your page rank internally in your site.

When adding images to your page always include an image ALT attribute along with width and height. eg. Width, height and the ALT attribute are all required for valid XHTML.

Summary

The text content of your page is obviously very import in how the page will rank, Try to have a minimum of 300 words on the page written grammatically correctly. The text needs to be both engaging and interesting for your user at the same time written so the search engines can spider the page and index your content with ease. Code your pages using external CSS and Javascript and use relevant and semantic XHTML formatting.

Next Step

Promtote your web page.

Lets talk Text !

leona — Sat, 13 Sep 2008 10:53:28 +0000

lets go further into the text copy on a site :

Now I am not an expert on this and SEO copy is vast but I do enjoy a good read and I have studied enough quality books on the subject to give you a few pointers, if they help you can let me know……..

So, First things first – Who are you writing to ?

Is it a broad spectrum market, or a niche that is only relevant to, let say, policemen? (???)

That’s your first task right there – establish who it is you are writing to.
Secondly what do you want your reader to do ?
And most importantly what’s in it for them ?

Far too many people think that simply making the text on a website informative around the subject matter will get the prospective reader excited enough to sign up or buy – Wrong ! That’s a really good way to miss out on a lot of new clients.

You need to decide :

who you are aiming your words at

what it is you expect of them

and what they will get for their time or investment,

These points are crucial to your text, and getting them right can be make or break for a site. But, before we go into creating the main body of text lets look at what to do with your copy in the opening visuals of a page. Remembering first impressions count……

When someone opens up the site in question they need to see immediately and exactly what it is all about, and, as we have discussed, what’s in it for them, so bullet points are really handy here.

Don’t have too many as the eye will just see them as a block of text and then most likely dismiss them. So maybe a maximum of 4 – 5 bullet points revolving around the facts and advantages of the subject matter. These then need to be positioned artfully in the opening visuals, usually above the clear and attractively positioned call to action.

The “Call to Action” in itself is imperative as this is what tells your viewer what to do or where to go, and it can be anything as simple as “BUY NOW” or “SIGN UP HERE”

It will pay you to really think about these above points, do some research, all the info necessary is out there at your fingertips.

Now onto the text body :

If this is your first time remember it’s going to take a few drafts to get the main body of the text just right, and nobody is going to read the first one, so don’t worry about getting it perfect at first, just start playing with words around you subject matter. You can keep a note of things that pop into your head at the bottom of the page, like a kind of “skeleton text”, points that you don’t want to forget and will add into the text later where suitable.

Did you know surveys have shown that sites containing text that answers all the “Likely to be asked” questions are more successful with their audience? So make sure you cover all the details.

You can add humour too, tastefully, and only if appropriate, but if you get it just right your reader will remember the text for longer, every body likes humour and good humour gets discussed……….

Put some personality in there, Joe Vitale, (who is in my opinion one of the best copywriters on the net) said “Remember every thing you were taught in school about writing – Well forget it !” What he means is talk to people in your copy, don’t focus on writing an award winning piece of English literature. Make your text engaging, market appropriate of course, but make it fun to read……..Do Not Bore People !!!

One of the most important keys to good copy is having the reader think the text is written to them personally……if you can get to people on an emotional level you have done it! Don’t scare people though, we are talking about positive emotional levels here !!!

Use colour within the text, if its broken up with headers in an eye catching colour its easier for the reader to digest, personally I like grey for the text body rather than black, its softer on the eye.

Another good tip : If you get “Writers Block”, walk away, do some thing that will make you laugh or something that will lift your spirits. Come back to it when you feel inspired, don’t write for the sake of writing – your reader wont thank you!

Last point for today, and probably the most obvious one – Have your copy proof read by some one who knows how to spell !!!!!!!

Now has anyone noticed there is one very significant element I have left out here –
The SEO value of the copy ! But that’s for next week…….

Have fun
Leona

Landing Pages for the Layman

leona — Thu, 04 Sep 2008 14:12:54 +0000

Where do you start ? Well as with most things in life first impressions count! As we know, people are all too “finger clicking happy” so if the site you are working on wont do it for the viewer within 5 – 15 seconds of them landing on it, then I’m afraid they will just click away, mouse in hand……….

So how do you get the perfect marketing reaction behind the design ?

Well firstly the design has to be market appropriate……Too many designers have a tendency to get carried away in their own creation, I’ve done it myself, all that happens is you waste time and the ego that was having so much fun gets a swift yank back down to earth when the client says – “ Mmmm, yes, but I don’t think this will impress the housewife’s am trying to sell to……” and that’s you back to the drawing board ! – Market Appropriate Design !!!!!

Navigation, where do we put the navigation bar ?

Well this may sound really boring but the very best place for the navigation is where people expect it to be ! That is in a horizontal bar under the top banner, now you may be wanting to flex your creative muscles and have an exciting looking navigation area else where on the page, unfortunately however that will only hinder the average viewers ability to quickly suss out how navigate through the site, leaving them thinking “Ooo, a wee bit to complicated for me”, and –click- that’s them gone!

Your client’s logo should also be presented where the viewer will expect to see it, which is on the top left of the page……..

You see many people when browsing the net have other things on their mind, so designing a site that is easy to absorb and navigate is vital.

Now let’s get to the fact that you have a really limited amount of space here. Trying to get as much as possible into that 1000 x 600 or so pixels is not the best idea, it just confuses people or leaves them straining to find what it is they are looking for. Space things out properly, in fact white space itself is a big selling tool. White space subconsciously says to the mind of the viewer – “ok, this isn’t complicated” which lets the viewer then absorb details. So leave enough space between things, white where possible.

Make sure you let the viewer know what it is you want them to do, if the site is ecommerce then having products featured on the home page is important.

You can use your colours to lead the eye to the “call to action”. If the colour scheme of the site is blue & green, then a red or orange button will certainly attract the eye very quickly. Red by the way (for those who don’t know) also has a subconscious trigger – It says, among other things, “urgent” ! So if you have red anywhere on the page, the viewer’s eye will clock it within the first few second. A very good colour for logos! Red demands attention.

I know this is an obvious one but – Please check spelling & grammar, believe it or not too many people don’t. Encourage your client’s personality to come through in their text, if they are American use American English, if they are British use the correct British spelling. The internet is a cold place so text should be engaging; making the reader feel like the site is talking to them, which can encourage confidence. When possible it’s always best to have a professional website copywriter to at very least proof text before it goes live.

Another cool thing to do with text is use a couple of colours, it helps people to view it as something interesting to read and breaks up a text heavy page once the viewer starts scrolling down.

This is really just a brief intro, which I hope has been helpful, I will be posting more on this blog frequently, if you have any comments or there are topics you want to discuss just let me know…….

All in all if you enjoy what you are doing and aim to do it to the best of your ability you cant really go wrong……have fun with it, learn from your mistakes and keep an eye on the professionals at the top of the tree……….and if any of you “Top of the Tree” experts want to add to this please feel free……..

Have fun

Leona