1. Add your company to Google Local Business (the little map at the top of search results). Free to register & try putting your product or service in as the Company name!
2. Make sure that popular search keywords and associated terms are in the Page Description, copy and Page Title.
3, Adwords – bit of a cheat here, but you can quite often obtain a free voucher for Adwords campaign. Try ebay – usually a huge discount!
4. Make sure that the images on your site have relevant keyword names and ‘Alt’ tags. Good for Google Images results & SEO
5. No Flash navigation or ’splash pages’! Absolutely not
6. Use a Google Site Map – its Google-friendly, Accessibility-friendly and Blackberry-friendly. Its just SOOO friendly!
7. Make sure you have your contact details in the page footer – nobody uses Yellow Pages, (I don’t even know where our’s is) so your website is usually the first place to find where you are (quite often when I’m running late for a meeting)!
8. Keep the content refreshed. News or blog pages are a great way of updating, providing you have something interesting to say. Suggest weekly additions, and dont forget to keep them keyword-rich.
9. Try and obtain back(inbound) links from popular sites. If you issue media releases, make sure that they have your web address in.
10. Use Google analytics/stats package to monitor referring sites, search terms, popular pages etc. And keep an eye on the ‘bounce’ rate – a sure sign of something to improve if this starts to rise.

and, because we always try and give a bit extra…
11. DON’T believe the guarantees from telemarketing or spam SEO companies – Google doesn’t publish its algorithms, you don’t always know what your competitors strategy is, and Google themslves advise avoiding!

Any more tips, and you’ll have to pay me!

If you choose to have your website re-designed or built from scratch, there are a few things we need to find out. We recently found an excellent set of questions on woobzine.com. A fair few can be ignored due to your business size and/or location etc… The list tries to find out what exactly you expect and would like from your new/re-designed site. We like to know as much as possible about you and your business to make the most effective website for you. To check out the list click here. The list should give you an example of the sort of questions we might ask and could give you some questions for us.

Ever wanted a Google Map integrated into website? Seeven Communications have found a way to embedd the map and add your company logo into your website.

1. Firstly you will need a Google Maps API code – http://code.google.com/apis/maps/signup.html

2. Add the following code before the </head> tags of your html and replace ‘KEY‘ with your Google API code:
<script src=”http://maps.google.com/maps?file=api&v=2&sensor=false&key=KEY” type=”text/javascript”></script>

3. Paste this javascript code before the </head> tags of your html:
<script type=”text/javascript”>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(”map_canvas”));
map.setCenter(new GLatLng(LAT, LONG), ZOOM);
map.setMapType(G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(new GLatLng(LAT, LONG));
map.addOverlay(marker);
var html=”<img src=’map_logo.gif‘” + “width=’165′ height=’60′/> <br/>” + “We are here!”;
marker.openInfoWindowHtml(html);
}
}
</script>

You will need to replace LAT and LONG with the latitude and longitude of your location – This can be done by first visiting http://maps.google.co.uk/ and finding your local area through the ‘Search Maps’ button. When you are happy with your map position double-click over the location you require the coordinates for and the map will centralize on that point. Retrieve the latitude and longitude coordinates by clicking on ‘Link’ in the top right hand corner and noting them from the URL that is displayed. They should look something like (53.406667, -2.152899). The ZOOM is how zoomed in the map is – the values range from 0-17 – we tend to use either 16 or 17. ‘map_logo.gif‘ refers to your logo name and location.

4. Relpace your <body> tag with this: <body onload=”initialize()” onunload=”GUnload()”>

5. Add this code where you want your map: <div id=”map_canvas” style=”width: 500px; height: 500px”></div> you can edit the size of the map by altering the width and height values.

And thats it! Many thanks to justfigures for additional help

Useful? Questions? Comments? Let us know below!

At Seven Communications we test all our websites in multiple browsers and version variations to make sure there are no bugs. The testing process begins with Mozilla Firefox (something that we highly recommend), occasionally have to make small tweaks or hacks so that the websites work in all browsers.

I recently came across an error that was specific to Internet Explorer 8 (Microsofts latest version). The solution? to force Internet Explorer to use the IE7 rendering engine! just paste the code below after the < head > tag in your html. (remember remove the space before meta)

< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Big thanks to Ironpaper

Calling all web design and SEO companies, Google have updated their page ranks again. There was a page rank update in April of this year as well which begs the question why has it happened now. It is thought page rank is changed every quarter, although this is an average and comes from the fact it is usually updated 4 times a year. Hopefully this will mean the page rank will be update more often and all us SEO experts/Web designers can see the results of our hard work more often.

Douglas Bowman recently left Google, as they preferred analytics to design. He was one of the top visual designers at Google and has now left to become creative director at Twitter. Douglas has since said that Google takes decisions on design based on analytics data rather than their designers suggestions. Apparently before he could make a decision on any design he would have to test most of the options online, seeing which option was clicked more, shown more etc.. and sometimes the differences could be as simple as how tall a line of text was.

“Data eventually becomes a crutch for every decision, paralyzing the company and preventing it from making any daring design decisions,” Douglas wrote in his own blog.

In my opinion (and I don’t claim to be a designer) designers aren’t always right, but they know what looks good and looking good is usually what gets the job done in web design.

The internet never stays still. Having a clean markup these days wil keep your website up to date… at least for the foreseeable future (that’s not very long in web design). The latest language to use is XHTML rather than HTML, the purpose for this is to allow for AJAX a new web development technique. One example of AJAX is Google suggestions, this gives you an instant suggestion on whatever you type on real time data. The difference between XHTML and HTML is relatively small, the main thing to note is to close all tags! Simple changes like that will make your site XHTML compliant and allow you to use AJAX, but then you’ll have to master AJAX though…

Web conventions can be used to improve the user experience of your web pages. The learned behavior of users surfing many websites web-wide has created some web design conventions that we can take advantage of in our page designs, easing the viewers journey with a sense of familiarity.
 

Hyperlinks

One of the first things we learn about the Internet is what those blue underlined links do, they don’t have to be blue, but I do believe you must differentiate them by giving them an underline or a background color. C

hanging the color only isn’t a great solution as users with color blindness cannot tell the difference. Visited links should usually change color, most commonly a nice purple, recently I have seen more sites using a strike through which seems to work well.

Heading Structure

Users are used to reading in a certain way, magazines and newspapers and now the web, lets take advantage of the nested information structure users are used too. Headings will ease users perception of the information structure allowing them to get a good overview of the information.

The heading could be larger, a different color or have extra space around it to signify its importance. After the main heading the sub headings should also follow a similar semantic order.

Headings should highlight in one or a few words what the following paragraph is about, on the web this ultimately creates scan-ability, something your users will appreciate.

Logo

The logo / site ID, should link to homepage of the website – though probably best to have a home link in the nav as well, the user will feel reassured as she knows there is always a way to start all over again. The logo is usually positioned top left side of the web page.

Buttons

Buttons are going to do something, actionable events, keep buttons for actions. A great element of their design is that they are three dimensional, so its obvious they are click able. I often don’t over style buttons on my designs, leaving the users web browser to style the buttons, this may offer the viewer a little extra familiarity.

Search

I’d recomend keeping your search forms simple, none of these extra tags for accessibility showing like the label, fieldset etc, and no confusing words like “enter keyword” or “quick search”, from a usability perspective the user wants to see the word “search”. If theres any further search criteria they should be straight forward and addiitional.

Main Navigation

The main navigation usually sits next tothe logo at the top of the web page and usually maps out the main sections of your website, or I like to say “the main features”. These links should all be internal too.

Secondary Navigation

Secondary navigation is often situated in the top left or right sidebar and more recently found directly underneath the main navigation showing sub page structure, this is usually a list of hyperlinks leading to category or even content pages.

Utilities Navigation

This navigation is usually at the top right of a web page and includes helpful links such as a Sitemap, Search, a link to the Home Page and Contact page, on a ecommerse site this would probably house the Shopping Cart and Checkout links too.

Images

If a photo has some text underneath it this usually means its a caption describing the image, or the photographers name. If you click on the image thumbnail it will show you a larger version of the image.

Skip to Top

A link at the bottom of the page to take the user back to the top of the page, I’d reccomned this link be aligned with the pages content and that its clearly displayed, I dislike websites that put this on right, I’d suggest this should be the first link in the footer.

Grouped Items

Similar items can be grouped into a list of hyperlinks to show they have a relationship, maybe they are in the same category of service or related products in an ecommerce website. Grouping similar items makes their associations clearer to the user.

Shopping Cart

Don’t call it basket, or carry bag, I’m English and I say “shopping bag” and not “shopping cart” but its the metaphor and wording that’s used the most across the web, so pick a side and stick with it. The shopping cart icon is also widely recognizable across the web, so you may not need the word “shopping Cart”.

Conclusion

Web conventions shouldn’t get in the way of progress and as a designer you must preserve your artistic license, be creative and progressive, and remember conventions had to start somewhere, its more of a web trend than an ideal of design, but if you want to create the best user experience then designing with conventions in mind will aid your users greatly.

There’s probably a good few web conventions I have missed, feel feel to comment and I’ll add them

Wordpress Usability

As Playing with Fire has pointed out Joomla has a lot of catching up to do on the Usability front, Wordpress makes simple tasks really easy to accomplish with few clicks to get a task done such as adding an image, publishing a page or publishing a news item.

For the website owner running a business website or a blog I haven’t found a CMS that has better usability than Wordpress.

Training

When I train clients on how to manage their websites It usually takes about 40 minutes with Wordpress, often a few hours with Joomla, though Joomla has more powerful features, every day tasks the client wants to learn take much longer to train.

Unfortunately once a client has received training in Joomla they often need tips or hints at how to perform a task again a few weeks later, that scenario hasn’t come up once with Wordpress.

Why use Wordpress over Joomla

If you have a small to medium size business I believe Wordpress is currently your best open source option to manage and update your website on a daily basis, tasks are very easy to accomplish, everything is well thought out and I find myself saying this to a lot of clients when training “Everything is where you’d expect it to be” .

Wordpress has an amazing community around it and the in depth documentation is second to none, as a designer or a website owner you’ll find everything you’ll need by the very people that make it and then also by enthusiasts such as myself.

Why use Joomla over Wordpress

My programmer voiced to me that the main pro for using Joomla is it’s power and flexibility, and its true, with me designing and my developer programming we can make Joomla do anything.

The capabilities of Joomla are endless and custom database work is an area where Joomla particularly shines.

Joomla has a complex multiple user privilege system with user registration and layered content privileges. Wordpress does not have a traditional privilege system at all.

When multiple user groups are needed I turn to Joomla, if a business requires multiple users be be able to login and view the website with different content that is user privilege dependent then I believe Joomla is the best open source CMS for the task.

Joomla also has an amazing community based around it, but the official documentation has great depth but is poorly organized, I found the best documentation from external sources.

Conclusion

Joomla was designed from the ground up as a CMS, Wordpress as a publishing platform that has evolved into a CMS, giving each unique strengths and weaknesses.

I think both platforms are fantastic for managing a website, Wordpress for small to medium business and Joomla for a website that requires multiple user privileges or custom database work.