Beginner’s Guide to Google Webmaster Tools


Are you looking for some love… from Google? Other than buying paid traffic through their AdWords program, the best way to get more traffic from them is through search engine optimization. But before you start optimizing your site, the first thing you should do is sign up for Google Webmaster Tools (GWT).

GWT is a free toolset provided by Google that helps you first understand what’s going on with your website. This way you make decisions based off of data instead of going in blindly.

Here is how GWT works.

Adding your website

add website to google webmaster tools

The first thing you need to do after you login to GWT (it’s free to sign up) is to add your website.

After you add your website you’ll have to verify that you actually own the website. You can do this through four ways:

  1. Add a DNS record to your domain’s configuration – You can use this option if you can sign in to your domain registrar or hosting provider and add a new DNS record.
  2. Add a meta tag to your sites homepage – You can choose this option if you can edit your site’s HTML.
  3. Upload an HTML file to your server – You can choose this option if you can upload new files to your site.
  4. Link your Google Analytics account to GWT – You can use this option if your site already has a Google Analytics tracking code that uses the asynchronous snippet. You must be an administrator on the analytics account for this to work.


google webmaster tools dashboard

Once your site is verified you’ll start seeing data on your website. Sometimes it can take a few hours before you see any data, but it’ll start rolling in.

The dashboard gives you a rough overview of everything from what keywords you are ranking for to how much traffic you are getting. In addition to that you’ll see if the Google bot is experiencing any crawl errors when going through your website, the number of sites linking to yours, and how many pages Google has indexed.

Site Configuration

Just like everything else, Google isn’t perfect. So configuring your site can help them do a better job of ranking your website. When configuring there are a few areas that you should be familiar with:


google webmaster tools sitemaps

Submitting a sitemap will help Google determine what pages you have on your website so they can index them. If you don’t submit a sitemap they may not index all of the pages on your website, which means you won’t get as much traffic.

Sitemaps have to be submitted in an XML format and they can’t contain more than 50,000 URLs or be larger than 10 megs. If you exceed any of those limits, you need to split up your sitemap in multiple files and then submit them.

If you aren’t technical, you can go to XML Sitemaps to create a sitemap. All you have to do is enter in your URL of your homepage and click “start”.

Once your sitemaps have been uploaded, Google will tell you how many of your URLs are being indexed. Don’t worry, it is common for them to not index all of your web pages. But your goal should still be to get as many pages indexed as possible.

Typically if pages aren’t being indexed it’s because the content on those pages aren’t unique, the title tags and meta descriptions are generic, and not enough websites are linking to your internal pages.

Crawler access

google webmaster tools crawler access

There will be some pages on your website that you just don’t want Google to index. This could be private login areas, RSS feeds, or crucial data that you don’t want people accessing.

By creating a robots.txt file you can block not just Google, but all search engines from accessing web pages that you don’t want them to get their hands on. However, for highly sensitive areas of your website you may want to consider password protecting all relevant directories.

Through the robots.txt generator and tester, not only will you be able to create a robots.txt file, but you will be able to see if it is done correctly before you upload it to your server. It’s wise to do because the last thing you want to do is make a mistake and tell them not to index your whole website.

And if you accidentally mess up and find Google indexing pages that you don’t want them to index, you can request them to remove it through this section.


google webmaster tools sitelinks

Sitelinks are links to a site’s interior pages displayed on a Google search results page. Not all sites have sitelinks, but as you grow in popularity you’ll naturally get them. Google generates these links automatically, but you can remove sitelinks you don’t want.

Through this section you can somewhat control what sitelinks show up when someone searches for your website. The reason you can’t fully control what pages show up here is that you can only block which pages you don’t want to appear, and you can’t pick which pages you want to appear.

Change of address

google webmaster tools change of address

If you are looking to change the URL of your website, you better let Google know or else your traffic is going to decrease.

You can tell them through 4 easy steps:

  1. Setup the new site – You have to get the new domain up and running. Make sure all your content is available for the public to see.
  2. Redirect the old traffic – A 301 permanent redirect tells users and search engines that your site has permanently moved.
  3. Add your new site to GWT – Make sure you also verify your new website.
  4. Tell GWT your new domain – In the change of address section, you can select the new domain name of your website.


google webmaster tools settings

If your target audience is someone in a specific country, then you can select this option in GWT. For example if my target customer for KISSmetrics lives in the United States, I would then tell GWT that my target audience lives in the United States.

In addition to that you can select a preferred domain name. This is going to be or Either one works, you just have to select which variation you prefer. The reason for picking one is that people may link to both versions of your domain and by selecting one Google will combine the links, which will help your rankings.

The last setting you should be worried about is crawl rate. If you feel that the Google bot needs to be crawling your website more often and faster then you can tell them to do so. Or you can just let them pick the crawl setting for your website. (this is typically the best option because if they crawl your website too often it can cause too much bot traffic going to your server and increase your hosting costs)

Your website on the web

Have you ever wondered how Google looks at your website? After all, it’s a search engine and not a human… so naturally it won’t be able to look at a website in the same way you do.

But luckily for you, through GWT you can see how Google views your website.

Search queries

google webmaster tools search queries

Not only is it important to go after keywords that have high search volume, but it is important to make sure that you have a good click through rate.

By monitoring the search queries page, you can work on improving your click through rate so that people are more likely to click on your listing when they search. Typically you can do this by making your title tag and meta description more attractive as that is what people read before clicking through to your site.

Links to your website

google webmaster tools links to your site

The best way to increase your rankings on Google is to get more sites to link to you. Usually this happens naturally if your website is providing valuable information to potential customers.

A good way to monitor your link growth is to continually monitor this area in GWT. In addition to that, make sure you monitor which pages people are linking to.

If your links aren’t growing fast enough consider writing relevant linkbait that could be submitted throughout the social web. Getting on the homepage of can drive thousands of new links to your site.


google webmaster tools keywords

You may have a good idea of what keywords you want to rank for, but that may not be consistent with what Google is ranking you for. Under the keywords section you can see what keywords your website is the most related to.

You can also see what variations of each keyword that are also relevant to your website. For example some people misspell keywords and you can find out which misspellings your website is most relevant for.

And if those aren’t the keywords you care to rank for, you can then use that data to adjust the content on your website.

Internal links

Google Webmaster Tools Internal Links

Linking your web pages together is a great way to get more Google love. For example, if you want your about page to rank for your company name make sure you link to it multiple times.

If you don’t link to your internal pages, they will not get as much PageRank and they won’t place as well in the search listings.

In addition to that, this data will also help you determine which pages Google feels is the most important. For example, if you look at the image above you’ll see that website owner felt that their about pages was one of the most important pages on their website. So naturally Google felt that as well.

Subscriber stats

google webmaster tools subscriber stats

If you have a blog, this area of GWT will be useful for you. If you don’t, it won’t.

Under the subscriber stats section you can see which of your blog posts are the most subscribed to by Google’s feed reader. You can then take that data and write more posts that are similar to your popular ones. And of course, you can stop writing blog posts similar to the ones that no one subscribed to, as readers probably didn’t enjoy them as much.

On a side note, if you want to track your RSS growth, you can also check out Feedburner, which will allow you to track how popular your feed is.


Websites are made by humans, so don’t expect them to be perfect. Your code maybe a bit messed up, and even worse, your website may contain malware.

Through the diagnostics section, you can figure out what’s wrong with your site and how you can fix it.


google webmaster tools malware

If you have malware on your server, you should see a message here. If you don’t, GWT won’t show you much.

The reason it is important to not have malware on your server is that Google tries not to rank infected sites high because if someone goes to an infected site, their computer may get infected. If you do happen to have malware, make sure you clean it up.

Crawl errors

google webmaster tools crawl errors

The crawl errors section will show you if there any problems that relate to your site on the web or on a mobile phone. The most common error that you’ll see is a 404 error, which means Google’s bot can’t find that page.

The most common reason that you’ll see 404 errors is because other websites sometimes link to pages that don’t exist on your website or used to exist.

What you need to do is get a list of all of the websites that are linking to dead pages on your site and hit them up. When emailing them, ask them if they can change that link to a valid page.

Or if you see a lot of people linking to a dead page on your site, you can always 301 redirect that old URL to the new URL.

Crawl stats

google webmaster tools crawl stats

If you have thousands of pages on your site, then you should expect Google to crawl most of these pages on a daily or weekly basis. If they aren’t, then something is wrong.

Through the graphs and data tables that GWT provides, you should be able to get a good sense if they are crawling enough pages on your website. If they aren’t, consider adjusting the crawl rate under the settings tab.

HTML suggestions

google webmaster tools html suggestions

When Googlebot crawls your site, it may find some issues with your content. These issues won’t prevent your site from appearing in Google search results, but addressing them may help boost your traffic.

The most common problem is related to title tags and meta descriptions. If every page on your site has unique and detailed title tags and meta descriptions, you should be fine. At the same time, you also have to make sure your title tags aren’t too short or too long.

And if that isn’t the case, then you can go through the URLs that GWT tells you they have an issue with, and fix it.


GWT regularly tests new features out. The easiest way to find out about these new features is to go through the labs sections.

Fetch as Googlebot

google webmaster tools fetch as Googlebot

With Fetch as Googlebot you can see exactly how a page appears to Google. All you have to do is type in a URL and GWT will tell if they could successful see it or not.

There currently isn’t a ton of data that GWT is showing in this area, but I expect this to change in the future.


google webmaster tools Sidewiki

If you’re a webmaster, you can leave a special Sidewiki entry on pages of your site. You can choose to leave a master entry for the whole site, or create page specific entries to engage your visitors.

All you have to do is:

  1. If you’ve successfully validated your account in GWT, you will see an option to write as the page owner.
  2. Select the “Write as the page owner” checkbox in the entry form. If you’d like to leave a master entry across the whole site, also select the “Show this page owner entry on all pages…” checkbox.
  3. Click Publish.

Site performance

google webmaster tools site performance

Your website’s load time is one of the most important things you should be monitoring. Every month you should be making sure you improve this number because if your website is too slow your Google traffic may drop.

Numerous website owners have seen a positive increase in their traffic by improving their website load time.

If you aren’t sure how fast your website should load, don’t worry. Google will tell you if your website is too slow or quick enough.

Video sitemaps

google webmaster tools video sitemaps

If you have video on your site, you want to make sure you include those raw video files in your sitemap. This way, Google can index them as they may not be able to find them otherwise.

This will help ensure that your videos are getting the traffic they deserve from Google video search.

If you are trying to create a video sitemap, this page should explain how to do so.


GWT is a useful tool that’s free. If you aren’t making use of it, you should start doing so now. The reason it’s worth using is because it will help guide you and tell you what to do if you want to improve your Google traffic.

What are you waiting for? Sign up for Google Webmaster Tools, it’s FREE!

A Guide to Google’s APIs

Image representing Google as depicted in Crunc...

Image via CrunchBase



Google has been opening up many of its most popular services to outside developers over the past year, including the Google Docs API this week. From quirky applications to venture-funded startups, a wide variety of new services are being launched leveraging Google’s APIs, helping users perform a multitude of tasks. Here is a non-technical introduction to some of the company’s most popular APIs and some of the most interesting applications built on top of them.

Google Toolbar API

The Google Toolbar is widely-used and comes standard with Firefox. The Toolbar API allows developers to create buttons for Google Toolbar, thus creating a way for you to add data from your web site to the user’s web browser. For example, the Fox News – Latest Headlines button will display all of the latest news from the Fox News site and let you click to the story. In addition to the more than 100 apps featured in the Google Toolbar Gallery from mainstream names like CNN and YouTube, dozens of independently developed applications and mashups have also been created. For example, the Twitter Google Toolbar Button allows you to input Twitter feeds and receive updates in your toolbar.

Google Gadgets API

Perhaps the most important of the Google APIs for those looking to take advantage of Google’s massive user base, the Google Gadgets API allows developers to create applications that run on iGoogle (formerly Google Personalized Home), Google Desktop, Google Page Creator, and the “Google Gadgets for Your Web Page” directory. For example, the CNN TV gadget streams live news, while Outlook Tasks imports your task list from Microsoft Outlook. Assuming you are able to get your application into Google’s official directory, the Gadgets API is a great way to gain exposure for your company’s product.

Google Base API

Google Base is Google’s service for listing things online – essentially a classifieds service integrated with the company’s other products like search and Google Checkout.

The Google Base API allows developers to both search the Google Base database and input new listings. Thus, shopping sites, classifieds aggregators, and others are building applications that either expand their own listings or allow sellers to submit items to multiple sites at once. vFlyer is a service that enables you to post to Google Base, Craigslist, and eBay, among others. For real estate listings, BaseEstate integrates Google Base listings into their service, which displays properties on a mashup of the Google Maps API.

Google Calendar API

The Google Calendar API allows developers to build applications that let users create, manage, and delete events from their calendars. Online task manager Remember The Milk has utilized the Google Calendar API to enable their users to sync their task list with their Google Calendar. For business users, there is a mashup on that allows you to merge your events from with your Google Calendar. If you want to sync your Google Calendar with your mobile phone, open source project GCALSYNC allows you to do so. With dozens of startups focused on finding and managing events, expect more mash ups with Google Calendar in the future.

Google Desktop SDK

The Google Desktop SDK (Software Developer Kit) allows developers to build plugins that extend the functionality of Google’s popular desktop search software. Some plugins add capabilities to Google Desktop, while others are essentially widgets for other programs that you can place in your Desktop sidebar. An excellent example of an application that adds capabilities is the Google Desktop Search Plugin for Windows Explorer which links the “Search” icon that can be found throughout Windows to Google Desktop instead of the default Windows search tool. On the widget side of things, any Google Gadget can be quickly and easily added to your Desktop sidebar, thus making Gadgets an attractive method for developers to reach new users.


Google Maps API

One of the most popular (and longest running) Google API’s is that of Google Maps. The API allows developers to built applications that plot their own data on top of Google Maps. We recently took a look at 13 Must-See Google Maps Mashups, but there are hundreds (if not thousands) of applications using the API, ranging from Frappr’s social maps to Trulia’s real estate search. In addition to the API, Google also recently introduced Maplets, essentially allowing developers to place Google Gadgets on Maps.

AdWords API

The Google AdWords API allows developers to design new programs for managing and analyzing AdWords campaigns. This has lead to a variety of software packages (many of which are of course advertised on Google) that built upon AdWords. For example, the VisualCalc AdWords Dashboard turns data from AdWords into charts and graphs for analyzing which campaigns are performing best, how clicks and conversions are tending over time, and how various metrics compare in different ad groups. Unlike most of Google’s other APIs, developers pay a fee to build applications for AdWords, which is why most of the applications built to-date such as VisualCalc cost money.

Google Docs & Spreadsheets APIs

As announced earlier this week, the Google Documents List Data API allows developers to build applications that can upload documents to Google Docs, request a list of a user’s documents, or search content within a document. The Google Spreadsheets API performs similar functions, allowing external applications to access and edit data within the company’s spreadsheet program. A good example of these relatively new APIs in action is Swivel, where data can be pulled in from Google Spreadsheets and then utilize Swivel’s community tools for analyzing and discussing data.

In all, Google currently offers more than two dozen APIs, which can be found on the Google Code site. Much like the Facebook platform or the APIs offered from widely-used startups like Flickr and Twitter, Google’s APIs provide developers with an “in” to millions of potential users through Google’s vast reach. In turn, creating applications that are both useful and provide smooth integration with an existing Google service is an effective way to spread your product through technology instead of relying solely advertising or viral marketing. At the same time, as Google continues to add new APIs and expand on existing ones, the company further expands its reach as the developer community builds new products tailored to Google products and services.

Designing a blog with html 5


Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.

Firstly what we’ll do is use the headerfooterand nav elements to mark up the broad structure of the page. We’ll make the blog comments form much smarter by using the new data types and built-in validation available in HTML 5-aware browsers.

Then we’ll do some work on the guts of the page, using HTML 5’s article elements to better mark up blog posts and comments and show how to use the section elements to better structure accessible hierarchical headings on sites that are CMS-driven. As blogs are chronologically ordered, we’ll see what HTML 5 offers us for representing dates and times.

So take the phone of the hook, and make a cup of tea and we’ll get started.

Setting the DOCTYPE

HTML 5, when used as plain HTML rather than its XHTML 5 sibling doesn’t need a DOCTYPE. But all browsers do, otherwise they go into Quirksmode, which you don’t want: the collision of HTML 5 and Quirksmode is like matter and anti-matter meeting, and will cause a negative reality inversion that will make your underwear catch fire.

You’ve been warned, so at the top of your document, you need the line<!DOCTYPE html>.

Some sites “use” HTML 5, when in actual fact all they’ve done is take their existing code and change the DOCTYPE. That’s fine and dandy if you’ve been using valid, semantic code as HTML 5 is very similar to valid HTML 4.01. Eric Meyer mentions small differences like “not permitting a value attribute on an image submit”, and there are a few differences between the languages, summarised in the documentHTML 5 differences from HTML 4.

However, I don’t want simply to rebadge my existing code, but to use some of the new structural elements now.

Using some new structural elements

My blog – like millions of others – has a header denoted by <divid="header">, a footer <div id="footer">, some articles (wrapped by an area called “content”, <div id="content">) and some navigation (wrapped up in an area called “sidebar” <divid="sidebar">). Most sites on the Web have similar constructs, although depending on your choice they might be called “branding” or “info” or “menu”, or you might use the equivalent words in your own language.

Although these all have very different functions within the page, they use the same generic div in the markup. as HTML 4 has no other way to code them. HTML 5 has new elements for distinguishing these logical areas: headernavfooter and friends. (There’s more on this in an artice by Lachlan Hunt on A List ApartA Preview of HTML 5.)

The overall aim is to replace this structure:

structure chart before redesign

with this:

structure chart after redesign

It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and “colophon” information as well as site-wide navigation. I decided against the aside element, as the spec says it “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content”, but it’s nevertheless content rather than navigation. So I decided to go for the nav element as the closest fit.

I’ve wrapped the main content in a section element (previously I’d kept it as a div). section is defined in the spec

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.

Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use adiv element. Read more about using section appropriately.

In this case, the “generic document section” is that of main content. I’ve retained an id so that a skip links feature will work, although I hope that in the future, assistive technology will offer an automatic way for people to go to the first section or article.

My fellow HTML 5 doctor, Remy Sharp, also notes that if you retain the div, Internet Explorer without JavaScript would style the div, but none of the other content, making the site very hard to read.

New form attributes

As well as the main structural item on the page, I’ve added some new attributes on input elements in the comments form.

HTML 5 was designed to reflect what developers actually do rather than to reflect a philosophical purity, and that’s very clearly manifested in the new attributes which mean the browser takes up much of the work currently done by developers re-inventing validation routines in JavaScript. (Extending forms functionality was how the HTML 5 spec began).

So I amended the email input field in the comments to be input type="email" which means that when the user submits the form, anHTML 5-aware browser will use built-in validation routines to check that it’s in the correct format, without any JavaScript. Check it out in the current version of Opera, as that the only full implementation at the time of writing (June 2009), and note that it also adds a “mail” icon in the input field as a cue to the user.

There are similar input validation routines triggered by some of the new input types, such as url (which I use on the field that asks for the user’s web address), number and pattern which compares the input with an arbitrary regular expression.

Another good example is input type="date", which pops up a calendar widget/ date picker when the user focusses on the input field. You can test the date picker, or here’s a screenshot from Opera 9.6:

date picker pops up next to input field

A very useful new attribute I used on both input fields for commenter’s name and email address, and the comment textareawas type="required" which generates a message on submission if the fields are left blank. Each different localisation of a browser would need to have a different message, and it’s not (so far) customisable by the developer.

red-bordered browser message 'You have to specify a value' next to unfilled required field

The good thing with all this new form fabulousness is it’s all formed around new attributes on an existing element, so people using older browsers just see a plain old input field.

A note on screen-readers and HTML 5

I hope screen-readers are ready for these new interactions; I asked the html 5 group to formally invite screenreader vendors to participate in the specification; to my knowledge, none have done so.

Laying out the new elements

It’s not too hard to layout the new elements. In all the non-IE browsers, you can lay out anything using CSS – even a nonsense element. One gotcha is that that the current crop of browsers have no “knowledge” of these elements, although support is improving all the time.

All browsers have default settings for the elements they “know about”—how much padding, margin they element gets, does it display as a block or inline?. (Here’s a sample default stylesheet.) Unless over-ridden by CSS, these defaults apply. But the browsers don’t know about headernav and the like, so have no defaults to apply to them.

I got terrible rendering oddities until I explicitly told the browsers

header, footer, nav, article {display:block;}

IE layout

There’s one gotcha about styling HTML 5 pages in IE: it doesn’t work. You can force it to quite easily with a JavaScript hackdocument.createElement('element name'). (Lachlan Hunt gets to the bottom of why IE needs this.)

For your convenience, Remy Sharp has written an HTML 5 enabling script which I use in the header to conjure all the missing elements into existence all at once.

But let’s be clear: this won’t work if your IE user doesn’t have JavaScript turned on. How much of that’s a big deal that is for you to decide. Pragmatically, it seems to me that the sites that will benefit the most from HTML 5’s new “Ajax”-style features, such as drag-and-drop, are the sites that currently have no hope of working without JavaScript.

Firefox 2 and Camino 1 layout

Firefox 2 and Camino 1 both use Gecko 1.9 which has a bug and so gets grumpy if you don’t serve the page as XHTML. (Go figure; that’s almost enough to trigger a negative reality inversion and you know how bad that can be). However, Firefox and Camino users upgrade frequently so Firefox is in version 3, while Camino 2 beta is out, so the problem will soon cease to exist. (Read more at How to getHTML5 working in IE and Firefox 22 by Remy Sharp.)

What’s the point of those new structural elements?

Well, they add semantics to the page. The browser now knows which area of your site is the header or the footer because there are headerand footer elements, whereas div might be called “branding” and “legal”, or even “en-tete” and “pied-de-page” or “kopfzeile” and “fusszeile“.

But so what?

Robin Berjon expressed it beautifully in a comment on A List Apart:

Pretty much everyone in the Web community agrees that “semantics are yummy, and will get you cookies”, and that’s probably true. But once you start digging a little bit further, it becomes clear that very few people can actually articulate a reason why. So before we all go another round on this, I have to ask: what’s it you wanna do with them darn semantics?

The general answer is “to repurpose content”. That’s fine on the surface, but you quickly reach a point where you have to ask “repurpose to what?” … I think HTML should add only elements that either expose functionality that would be pretty much meaningless otherwise (e.g. canvas) or that provide semantics that help repurpose for Web browsing uses.

In my view, there are a couple of things I want to do with those semantics. The first is for search engine use; it’s easy to imagine Messrs Google or Yahoo! giving lower weighting to content in footer elements, or extra weight to content in the header. The second reason is to make the site navigable for people with disabilities. People with learning difficulties might instruct their browser always to put the articles before the navigation, for example. User agents might very well have a keyboard shortcut which jumped straight to the nav for example, or jumped straight past the navigation, in a programmatic implementation of “skip links“.

Which brings me to…

Further refining the HTML 5 structure

The blog home page

An interesting thing about a blog homepage is that there are generally the last 5 or so posts, each with a heading, a “body” and data about the post (time, who wrote it, how many comments etc.) and usually a link to another page that has the full blog post (if the homepage just showed an excerpt) and its comments.

HTML 5 has an article element which I use to wrap each story:

The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

Let’s look in more detail at the guts of how I mark up each blogpost.

Anatomy of a blog post

diagram of article structure; explanation follows

The wrapper is no longer a generic div but an article. Within that is a header, comprising a heading (the title of the blogpost) and then the time of publication, marked up using the time element.

Then there are the pearls of wit and wisdom that consitute each of my posts, marked up as paragraphs, blockquotes etc., and is pulled unchanged out of the database. Following that is data about the blog post (category, how many comments) marked up as a footer and, in the case of pages that show a single blogpost, there are comments expressing undying admiration and love. Finally, there may be navigation from one article to the next.

Data about the article

Following the content there is some “metadata” about the post: what category it’s in, how many comments there are. I’ve marked this up as footer. I previously used aside which “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content” but decided that it was too much of a stretch; data about a post is intimately related.

footer is a much better fit: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.” I was initially thrown off-course by the presentational name of the element; my use here isn’t at the bottom of the page, or even at the bottom of the article, but it certainly seems to fit the bill – it’s information about its section, containing author name, links to related documents (comments) and the like. There’s no reason that you can’t have more than one footer on page; the spec’s description says “the footer element represents a footer for the section it applies to” and a page may have any number of sections. The spec also says “Footers don’t necessarily have to appear at the end of a section, though they usually do.”


I’ve marked up comments as articles, too, as the spec says that an article could be “a user-submitted comment”, but nested these inside the parent article. The spec says

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.

These are headed with the date and the time of the comment and name of its author—if you want, you can wrap these in a header, too, but to me it seems like markup for the sake of it.

Times and dates

Most blogs, news sites and the like provide dates of articlepublication.

Microformats people, the most vocal advocates of marking up dates and times, believe that computer-formatted dates are best for people: their wiki says “the ISO8601 YYYY-MM-DD format for dates is the best choice that is the most accurately readable for the most people worldwide, and thus the most accessible as well”. I don’t agree (and neither do candidates in my vox pop of non-geeks, my wife, brother and parents).

I do agree with the micro formats people that hidden metadata is not as good as visible, human-readable data and therefore elected not to use the pub date attribute of article.

Therefore I’ve used the HTML 5 time element to give a machine parsable date to computers, while giving people a human-readable date. Blog posts get the date, while comments get the date and time.

The spec is quite hard to understand, in my opinion, but the format you use is 2004-02-28T15:19:21+00:00, where T separates the date and the time, and the + (or a -) is the offset from UTC. Dates on their own don’t need a timezone; full date times do. Oddly, the spec suggests that if you use a time without a date, you don’t need a timezone either.

There’s considerable controversy over the time element at the moment. Recently one of the inner circle, Henri Sivonen, wrote that it’s for marking up future events only and not for times tamping blogs or news items: “The expected use cases of hCalendar are mainly transferring future event entries from a Web page into an application like iCal.” This seems very silly to me; if there is a time element, why not allow me to mark up any time or date?

The spec for time does not mention the future event-only restriction: “The time element represents a precise date and/or a time in the proleptic Gregorian calendar” and gives three examples, two of which are about the past and none of which are “future events”. Although the spec doesn’t (currently) limit use of the element, it does limit format to precise dates in “the proleptic Gregorian calendar”. This means I can mark up an archive page for “all blog posts today” using time, but not “all July 2008 posts” as that’s not a full YYYY-MM-DD date. Neither can you mark up precise, but ancient dates, so the date of Julius Ceasar’s assassination, 15 March 44 BC is not compatible.

I don’t expect this to be resolved. If you think as I do, feel free to mail the Working Group to express your feeling!

Hopefully, this brief article has given you a quick overview of how to use some of the new semantic elements.

Which tablet should I buy?


Since CES 2011, there are officially a lot of tablets out there and now that the Apple iPad 2 has hit as well, anyone asking themselves “which tablet should I buy?” has plenty of thinking to do. Thankfully, here at RAM we have lined all the major players up back to back to see how they compare. So, while it’s a bit of a mouthful, this effectively is the Apple iPad 2 vs Motorola Xoom vs HTC Flyer vs Samsung Galaxy Tab 10.1V vsBlackBerry PlayBook vs HP TouchPad vs LG Optimus Pad. If you don’t fancy one of these, then you’re probably not after a tablet at all.

Form Factor

193 x 130 x 10mm, 400g
241.2 x 185.7 x 8.8mm, 601g
195.4 x 122 x 13.2mm, 415g
246.2 x 170.4 x 10.9mm, 599g
243 x 149 x 12.5mm, 654g
249.1 x 167.8 x 12.9mm, 730g
240 x 190 x 13.7mm, 740g

Size is a very important consideration for any mobile device, and dimensions that offer portability are a must for a tablet. Apple’s iPad was previously one of the largest tablets around, but thanks to a few nips and tucks on the second-generation model, it’s not the most unwieldy device around anymore. That title goes to HP’s TouchPad which sports the same slightly square shape as the iPad along with the thickest profile and the largest mass.

Not much better off is the Motorola Xoom that’s got a serious bloat of its own but, fortunately, it all begins to slim down once we get to the LG Optimus Pad – shedding the best part of 100g on its nearest rival.

Unsurprisingly, it’s the BlackBerry PlayBook that comes out top. As one of the two 7-inch tablets, it was always going to be light but it also happens to be the second thinnest of the bunch as well. The real shocker is that its fellow diminutive device, the HTC Flyer, has been bumped down into third by the heavier iPad 2. The reason is all about the profile. At less than the thickness of the iPhone 4, the Apple tablet is seriously impressive at just 8.8mm and, when you compare that to an unnecessarily chunky offering from HTC, it makes more of a difference than that 186g extra in mass.

While the Samsung Galaxy Tab 10.1V is also thinner than the Flyer, it’s less pronounced. So, this time, the difference puts it more on a par. From the Optimus Pad upwards, you’re probably doing okay on form factor. It’s only the TouchPad and the Xoom that might extract the odd giggle from friends who own one of the others.


10.1-inch, 1280 x 800px, LCD
10.1-inch, 1280 x 800px, LCD
9.7-inch, 1024 x 768px, LCD
9.7-inch, 1024 x 768px, LCD
8.9-inch, 1280 x 768px, LCD
7-inch, 1024 x 600px, LCD
7-inch, 1024 x 600px, LCD

The display is one of the key considerations when shopping for a tablet – a smaller screen certainly allows for a more portable device, but if it’s not that much bigger than a smartphone, then is it really worth it? By their very nature, the prime purpose of a tablet is to consumer content, so this is really one of the more important categories out there.

The HTC Flyer and BlackBerry’s PlayBook come in last in this round thanks to their relatively small 7-inch screens, which do tend to make them look a little like comically large mobile phones. LG’s Optimus Pad is next up the list with its 8.9-inch screen, but it manages to shift itself up into joint third place with the iPad 2 and HP TouchPad thanks to not only a better aspect ratio for watching movies but also a higher pixel density at 168ppi, compared to the 132ppi of the others, which makes up for the small loss in actual screen real estate.

Sharing the crown in this round, though, are the Motorola Xoom and Samsung Galaxy Tab 10.1V, which both sport a 10.1-inch display with the same 1280×800-pixel resolution. Although there are clear winners and losers here, what the tablet market is really crying out for is someone to come up with a super hi-res panel or even OLED technology but, presumably, there’s the serious issue of pricing to consider.

Engine Room

A5 dual-core 1GHz CPU, 512MB
Dual-core Snapdragon APQ8660, 512MB
Nvidia Tegra 2, 1GHz dual-core CPU, 1GB
Nvidia Tegra 2, 1GHz dual-core CPU, 1GB
Nvidia Tegra 2, 1GHz dual-core CPU 1GB
1GHz dual-core CPU, 1GB
Single-core Qualcomm 1.5GHz CPU, 1GB

In terms of processors, tablet manufacturers have seriously upped the ante in 2011. Most new tablets, and even a few mobile phones now, boast dual-core processors for speeding up operation and bundled in GPUs capable of plenty of gaming and the like.

One of the few companies that hasn’t jumped on the dual-core bandwagon for its new tablet is HTC, with its Flyer sporting a single-core CPU, albeit a one with an impressive 1.5GHz of processing power and a decent wedge of memory to back it up. All the same, that puts it bottom of our league table for this category.

From here on in, it starts to get a bit tricky. CPU-wise, they’re all much of a muchness beyond this point. While, then, one might be tempted to compare them on the basis of RAM, the problem lies in the silent statistic which is the graphics processors. The Tegra 2 set up uses an Nvidia GeForce GPU, the iPad has a PowerVR SGX 543 and HP TouchPad an Adreno 220. RIM has given nothing away about what’s inside the PlayBook.

Technically speaking, the GeForce GPU appears to be the least powerful of the lot with the one inside the Apple A5 chip supposedly edging it over the Adreno. Practically speaking, however, the argument runs that Nvidia has optimised the graphics unit in the Tegra 2 system to work just as well for games as both the Adreno and the PowerVR do. For other jobs such as media playback, though, the Tegra 2 could be around twice as slow.

Quite how all this ties in with the two most powerful engine’s graphically also having half the memory is another thing altogether. Ultimately, though, the take-home message is that HTC Flyer is the least impressive of them all. The others should all be fine for gaming but one might expect the iPad 2 to have the edge when it comes to video editing – perhaps why iMovie has been included for it and not the original iPad as well.


32GB + SD
32GB + SD

The biggest difference between tablets, in storage terms, is whether they have expandable memory or not. You could argue that if a device has 64GB of built-in memory then surely that’s enough for most people, and indeed, for most people it probably is. However, there are always going to be plenty of gadget lovers for whom the lack of an add-on storage option simply won’t cut the mustard.

Trailing back in joint 6th place in the storage round are the LG Optimus Pad and BlackBerry PlayBook which offer a maximum of only half as much storage as all of the others and no way of making it any bigger.

Joint third place goes to the Samsung Galaxy Tab 10.1V, HP TouchPad and Apple iPad 2, each of which takes the user up to a possible 64GB of fixed space. But, it’s the HTC Flyer and Motorola Xoom that mean the most flexibility with a current top level of the same 64GB plus as many spare SD cards as you care to carry around.


3/4G, BT, Wi-Fi, USB, HDMI-out
3/4G, BT, Wi-Fi, USB, HDMI-out
3G, BT, Wi-Fi, HDMI support
3G, BT, Wi-Fi, some DLNA, USB
3G, Wi-Fi, BT, USB
(3G), BT, Wi-Fi, USB, NFC

Without any 3G support for the time being, the BlackBerry PlayBook and HP TouchPad sit at the foot of things for connectivity. Both have promised updated models at a later date but seeing as they’re still struggling to get out the Wi-Fi only versions, that could be some time away. And that’s quite a shame given that the PlayBook comes with DLNA and HDMI support and the TouchPad with some interesting wireless connection action if you happen to have a Palm smartphone.

One could argue that the PlayBook gets around its connectivity issue with its smartphone tethering ability, but that’s going to chew through both your phone’s battery and its data in double quick time.

Next up the list at 5th is Samsung’s tablet, which offers surprisingly little – just 3G, Wi-Fi, Bluetooth and a USB. Standing on pretty much even ground in joint 3rd are the iPad 2 and HTC Flyer. Both have the regulation 3G and Wi-Fi along with Bluetooth, while the Flyer also offers a USB and a degree of DLNA support. Apple’s tablet balances this out with the provision of HDMI support for hooking up to an HD TV, albeit through an accessory, as well as some good wireless action if you happen to own an Apple TV set up.

Fighting it out at the top, though, are the Motorola Xoom and the LG Optimus Pad, both of which have all the usual suspects along with USB and HDMI. They also have 4G support – no use at the moment in the UK, but this could be a key feature a year or so down the line. You’ll have to rely on your Android apps for any wireless streaming.


QNX BlackBerry Tablet OS
webOS 3.0
Android 3.0 Honeycomb
Android 3.0 Honeycomb
Android 3.0 Honeycomb
iOS 4.3
Android 2.3 Gingerbread

The software round is a very tricky one to call, largely because much of it comes down to personal opinion, however, there are a couple of major flaws in one or two of the systems worth being aware of. Last place is easy enough to work out because the HTC Flyer is the only one of the bunch using an operating system that isn’t optimised and dedicated to running a tablet at its core, although HTC has optimised its Sense UI to fit in with the new screen size and form factor. Gingerbread is a mobile phone OS.

In 6th place is the iPad 2 which suffers from the now famous trio of weak spots – no Flash browsing, no personalisation options, and notification issues that will drive you around the bend. Otherwise, of course, it’s a cracking bit of software.

That leaves the five other tablets to occupy top spot. Although no one has really had a good play with the likes of the QNX OS and webOS 3.0 in anything other than demos, there’s plenty to get excited about. The Synergy system of integrating your internet accounts and the cloud syncing on webOS are well documented, and the multi-core, multi-threading capabilities on the PlayBook should mean it can run anything you can throw at it.

At the same time, there’s nothing in those others to necessarily put them above the made-for-tablet Android Honeycomb 3.0, which brings you all the flexibility and support you could need.


5MP rear, 2MP front, 1080p video, 3D
8MP rear, 2MP front, 1080p video
5MP rear, 3MP front, 1080p video
5MP rear, 2MP front, 720p video
5MP rear, 1.3MP webcam, 720p video
Rear cam, front cam, 720p video
1.3MP front-facing webcam

This is one area that has a fair bit of variation, and things have changed a lot since the original iPad hit the shops in 2010.

Even the last on the list, the HP TouchPad, manages to come up with a 1.3MP front-facing cam for video calling, although sadly that’s where its imaging credentials stop. Sharing the number five spot are the iPad 2 and the HTC Flyer, with the latter offering a relatively basic 5MP rear camera, 1.3MP front-facing cam and 720p video capture. Apple hasn’t released specific details on the iPad 2’s cameras (one rear, one front), but we’d be very surprised if they were any lower-specced than those offered by HTC. The iPad 2 also enables you to take high-def videos at 720p. Motorola’s Xoom does a little better, with all the same attributes, but with a 2MP front-facing camera.

BlackBerry’s tablet ups the ante even further, boosting the front-facing cam’s megapixel count to three and throwing full HD 1080p recording into the mix. Samsung’s device also offers 1080p capture, along with an 8MP rear cam but taking the top spot has to be the LG Optimus Pad. Not only does it have a rear 5MP cam, 2MP front cam and 1080p video capability but it can also capture 3D video, setting it apart from all other tablets currently on the market. Just a shame you can’t actually watch it back in stereoscopic format on the tablet afterwards.


1ST=: IPAD 2
10 hours
1ST=: SAMTAB 10.1V
10 hours (probably)
10 hours
9 hours
8 hours
4 hours

Battery life is fairly high up the list of priorities when it comes to tablet shopping. Carrying a fancy mobile device around is all well and good, but if the battery is likely to conk out halfway through the day, then it might not seem so cool.

We’ve left the PlayBook out of this one, as BlackBerry hasn’t been forthcoming with the battery details. HTC sits in 6th place, with its quoted 4 hours of video playback, which is a fair way behind most of its rivals. The HP TouchPad takes the next spot with 8 hours, while the Optimus creeps ahead with 9. Bedded in at the top spot are the iPad 2, Samsung and Motorola, although with roughly 10 hours of video playback (or at least those are the numbers currently quoted or estimated). We’ll know more about how the tablets stack up against each other in this category once we can get them in for a full review.

Apps (updated)

Lots and lots
Quite a few
Quite a few
2ND=: SAMTAB 10.1V
Quite a few
Quite a few
Not that many (but maybe quite a few)
Not that many modern ones

You might have the fanciest piece of tablet hardware around but these devices are nothing without apps. It’s been well documented how Apple has led the way with the iTunes app store and the massive amount of apps on offer (over 65,000 for the iPad alone, at the last count). Android is making steady progress in playing catch-up, but it hasn’t quite got there yet, either with the amount of apps on offer or with the usability of its Android Market. That’s why the HTC Flyer, LG Optimus Pad, Samsung Galaxy Tab 10.1V and the Motorola Xoom – all Android-powered devices – sit in joint second position.

The BlackBerry PlayBook offers a relatively small selection of BlackBerry apps, although it has now been confirmed that the tablet will support Android apps, via a special app player that will be available from the BlackBerry App World store. Although this is certainly good news, don’t get too excited, as the PlayBook will only be able to run apps made for the mobile versions of Android, rather than the tablet-angled Honeycomb. That means that some apps will probably have to be stretched to fit the screen.

HP has struggled somewhat when it comes to gathering the support of third-party developers which is why it sits at the bottom of our table. Naturally, webOS 3.0 will have the benefit of lots and lots of more old school apps from the Palm homebrew set up .

Price (updated)

£420 (Wi-Fi) £560 (3G)
£499 (Wi-Fi only) £599 (3G)
£399/£479/£599 (Wi-Fi) £499/£579/£659 (3G)

Pricing is a bit of a tricky one for the moment as the only two which are actually official on this front are the iPad 2 and the Motorola Xoom. However, there are some solid rumours on how much the HTC Flyer is set to cost which puts it at the top of the tree. (Remember that, at 32GB of storage, it needs to be compared to the equivalent size Apple model). Next down is the Xoom which is, once again, cheaper than the equivalent iPad by a matter of £11.

Beyond those are the odd and fairly spurious claims, which makes neither of the last four world beaters much different from the other. We’ve heard US prices for some of them, but it’s usually impossible to predict what the UK price will be from this. Either way, it’s something we’ll update as the announcements come. For now, though, we’ll have to leave the bottom of the table as a tie.


There’s a few different ways you can use all of this data to work out which is the best tablet, and, in the name of fairness, we’ll run through the lot. Pay close attention now:


Calculated purely on total of the rank positions, the table looks like this:

20 points
23 points
28 points
28 points
40 points
41 points
43 points

The problem with this method, though, is that it ignores the fact that some categories might be more important than others and, indeed, the fact that some of the losses or wins might have been narrower or larger than others. What is clear very quickly, however, is that there seems to be a large gap between the top four and the bottom three meaning that it was more than just a one off heavy loss in a single category for the Flyer, PlayBook and TouchPad to find themselves where they are. Something to bear in mind if you’re thinking of going for one of them.


Probably a more realistic way to look at the results is by considering which areas are more important than others. Naturally, this is going to vary from one person to the other depending upon your priorities. However, looking at it as objectively as possible, something like imaging is not very important at all for a tablet. So, as long as it has a front facing camera – which they all do – you’ve always got your phone on you to shoot video and stills for which a smaller device is far more convenient anyway.

The price is fairly irrelevant too. None of these things are cheap and, if you’ve got your heart set on one, you’ll find the money for it somewhere. So, taking those two out of the equation and the picture changes a little, but not a lot.

14 points
17 points
20 points
23 points
32 points
33 points
35 points

The only real shift around has been in the bottom order but there’s still two distinct packs. So, is it still a fair idea of which you should be spending your cash on? Perhaps a more realistic way of looking at the data is the final one.


The bottom line with all of this is that your tablet choice is most affected by which ecosystem you’ve already bought into. If you’re an iPhone user, then the answer is to buy an iPad 2. It’s as simple as that.

Likewise, if you’re an Android user, it’s going to be an awful upheaval to switch your life to Apple. So, unless you really want to, the best option on paper looks to be the Motorola Xoom which only allows the Samsung Galaxy Tab 10.1V to be close on account of the former’s slightly more robust form factor. We’d like to say that the HTC Flyer is there for those looking for a smaller size device to carry around but, without a proper tablet OS to back it up, there’s some serious reservations.

BlackBerry users are in a slightly different position. While the PlayBook is the obvious choice, a 7-inch tablet might not be what you’re after. If that’s the case, then your best bet is either the Xoom or the iPad 2 depending upon which way you’d rather go. If you’re all about the sleek look and smooth operation, Apple might be the best solution, and chances are you’re already rocking an iPod touch in your household anyway – the iPad 2 and the original iPad for that matter really is just a bigger version of that. For a more open experience, and possibly one that will eventually lure you away from the phone OS as well, it’s Android all the way.

Dedicated Palm device users are probably only reading this out of some kind of self-torture. It’s pretty clear that the HP TouchPad is not the best tablet here based on specs, but it is the one with webOS and that’s what makes the difference.

If you have no affiliations to any of the systems above, then again it’s a choice between the iPad 2 and the Xoom. It’s a matter of taste as to which you’ll prefer but as the story of the spec sheets go, one would have to advise the Xoom as the correct choice.

Use the Homegroup Feature in Windows 7 to Share Printers and Files


The new HomeGroup feature makes sharing files and printers between Windows 7 machines very easy.  Today we will take a closer look at this new feature to show how easy the sharing process is.

Setting up your HomeGroup

There are several ways to access the HomeGroup feature, go to Control Panel and click on“Choose homegroup and sharing options” or just type “homegroup” without quotes into the start menu search bar.

control panel

Next click on the Create a homegroup button.


In the Create a HomeGroup screen select what you want to share with the other machines.

select files

After the group is created you will get a password to access it from the other computers.


After you get the Password you’re brought back to the HomeGroup screen where you can make additional changes if you want.


Connecting to your HomeGroup

On the other Windows 7 computer(s) go into the HomeGroup feature and click to join the group you just created.

Join Group

Enter in the password that was created for the HomeGroup.

enter Pass

When the password is accepted the connection will take place and you’re finished.

login successful

If you don’t want to use a password at all go into the Network and Sharing Center under advanced options and turn off password protected sharing.


Another thing you might want to do is create a shortcut to the HomeGroup.  I just go into Network and copy the icon to my desktop by Right-Clicking and dragging it.  A more direct approach is to create shortcuts directly to the shared public folders but of course it’s completely up to you.


To share a printer make sure to select Printers when creating the group and when you go into Devices and Printers on the Start menu you should see it and can set it as the default if you wish.


This should help get you started sharing files and printers between you’re Windows 7 machines on your home network.

Make use of Cloud services. More effectively

Cloud computing icon

Image via Wikipedia


Cloud and cloud services are the latest buzz words, be it with major organizations, medium businesses, individual developers or ordinary home users. Everyone wants to share and store their documents, media and files on to the cloud. That is because it is simple, you can access it anywhere, gives you centralized storage, providesbackup and most cloud service companies claim that it is exceedingly secure. Many technology evangelists around the world foresee Cloud as the next big thing incomputer technology and predict that it will change the way we work, store, share and connect.

Listed below are few common tips on how an individual or home user can effectively use cloud service.

Backup your documents from Google Docs

Google Docs is the most extensively used online documents storage and sharing cloud service offered by Google. It offers to store, edit, save and share all major document formats commonly in use. Even after the assurance of online reliability from Google, it is safer to keep a backup on your offline storage. Not because Google data centres may crash tomorrow, but simply because your Internet connection may face issues one day and you may need a specific document urgently.

With Google Docs, you can download all your online documents into a zip file and save it offline. It allows a maximum download of only 2GB per zip file.

Open Google Docs and log in using your Google account. Select checkboxes of all or only required documents. Click Actions. Click Download. Choose the respective document formats or proceed with the default selection. Click Download. Wait for the processing to complete, post which it will prompt you to open or save the zipped file. Save it offline.

Backup your documents from Google Docs

Listen to music from Dropbox

Dropbox is fabulously good for storing and sharing any kind of files over the Internet. You can even store your music collection on Dropbox. These music files can also be played online via DropTunes service.

If you do not have any music files in your Dropbox, upload few from your hard drive. I uploaded a track by Enrique Iglesias.

Listen to music from Dropbox 1

Now, go to DropTunes and log in with your Dropbox credentials only. Navigate to the folder where your music files are stored. It will list all music files with a Playnext to each one. Click the respective Play button to play that track online.

Listen to music from Dropbox 2

Sync My Documents on your Windows to Dropbox

The My Documents directory on Windows acts as a primary document storage directory for most of us. Isn’t that the sole purpose Microsoft created it in the very first place? I think yes.

You can sync your My Documents directory to Dropbox. Therefore, anything you store, move or delete within My Documents will automatically synchronize with Dropbox. You should have the Dropbox client installed on your computer and a Dropbox directory already set.

Right click on My Documents and select Properties. Click on Location tab. Click the Move button and choose the already set Dropbox directory. Click Select Folder. Click Apply and then OK. Your My Documents directory is now synced with Dropbox.

Note: My Documents directory in Windows 7 may be found under the directory with your Windows Username (commonly placed on the desktop).

Sync My Documents on your Windows to Dropbox

How do you play around with Cloud services?

iWeb – Build A Quick, Easy & Beautiful Website [Mac only]


Image via Wikipedia


Having recently discovered a way to get my own (unlimited) domain names and several good places where I could host them for free, I can’t help but falling into the mood of web building. And while I’m at it, I think this is the perfect time to try building one using Apple’s own iWeb 09.

This free Mac website building tool comes with iLife suite – free with every new Mac purchase. It promises its users quick and easy ways to build beautiful websites. To be able to achieve that, iWeb comes with various ‘plug and play’ ready-made templates for users to use and modify.

Experience is the best teacher. So there’s no better way to explore what iWeb can do than by using it to make use of our domain name and web host.

Settling on the Settings

The first thing that you’ll see when you first open iWeb is the choices of templates. Don’t worry too much at this stage. Just pick the one that you like, and you can change your mind later.

free mac website builder tools
Then we can continue with the settings. Click the “Site” item on the left pane, and you’ll see the “Site Publishing Setting” opened in the middle pane. This is the place to change the name of your site from “Site” into something more appealing.
free mac web tools

If you want to publish your site on your chosen hosting service, choose “FTP Server” from the “Publish to” options. (Note: This option is not available on the older version of iWeb). Then fill in all the fields with the required information; from the site name, to the FTP settings, to the website URL.


For you Facebookers, there’s a bonus that you’ll love: the ability to update your Facebook profile when you publish your site. Tick the checkbox and provide the user information if you want to activate this option.

mac web design software

Shaping the Site

The web building process itself is as simple as adding pages (Command + N), editing the text, and replacing the pictures.

mac web design software

If you want to, you can edit every element of the page by clicking on that specific element and opening the “Page Inspector” from the “View –> Show Inspector” menu or by pressing “Command + Option + I

mac web design software

There are several types of pages that you can add, such as a blank page; ready to edit pages (Welcome Page, About Me page); blog page – where you can write and update your posts; and also the rich-media pages (Photo Album page, Movies page and Podcast page).

The pages will be placed in the left pane and you can re-arrange the order as you like. You can also add another website(s) (Command + Shift + N) to the project, each with its own pages and themes.

designing web pages in a mac

Enhancing with Elements

To enhance your site, you can add as many kinds of elements you want to each page. There are four tabs on the right pane:

    • Audios –> You can add music to your pages from Garageband and iTunes

designing web pages in a mac

    • Photos –> You can add pictures from iPhoto and Photobooth

designing web pages in a mac

    • Movies –> You can add movies from iMovie and iTunes

free mac web design programs

    • Widgets –> You can add several ready made widgets, including the one to include HTML code called HTML snippet widget

free mac web design programs

There are more advanced settings that you can do by going deeper into the Page Inspector, but the scope is too big to be discussed here. You can find many nice effects while you experiment with iWeb.

After the building process is done, you can do the final step by clicking the “Publish Site” button below. If you put the FTP settings right, everything should be uploaded to your server, and your site will be alive.

iWeb might not be the ultimate tool for those professional-level web designers. But for everyday folks who just want to build a beautiful site quickly and easily, this app is more than capable to fulfill their needs.

Have you tried iWeb? Got any tricks to optimize iWeb? Share using the comments below.