Camerafoto.com

The days of building websites targeted solely at desktop or laptop environments are over. Users can and will access your website from a variety of internet-enabled devices.

Accessing the web from mobile devices is far from new. However, the popularity of smartphones and cheaper data packages from network providers have driven a sharp rise in mobile web usage, which is not just reserved for the latest and greatest smartphones.

As website owners, mobile devices also offer some fantastic features typically not available on the desktop – functionality such as clicking a hyperlink in your website to call your phone number, or adding your contact details to an address book. And with more advanced devices, a mobile website can provide more targeted, location-aware content for your visitors.

MOBILE FONTS: Computerlove's Advanced Profile on the iPhone demonstrates how the @font-face technique can be used to bring brand fonts onto a mobile site

With the growing importance of mobile devices and the diversity of access it brings, it's vital as website owners, designers and developers that we think smarter and broader about how we enable visitors to engage with our sites.

You need to have a clear policy and strategy in place for making your website accessible to as many internet-enabled devices as possible. Over the following pages, I'll look at some key lessons the team at Code Computerlove has learned while developing mobile websites. I'll cover general hopefully use and apply to your own websites.

Which technology for mobile sites?

The first question you may be asking is: What technology is involved? Well, a technology stack, served by your existing web server, and utilise your existing web development skills. You use XHTML and CSS. There's no need to invest in learning a new formatting language or resurrect an old one such as WML (Wireless Mark-up Language).

At Code Computerlove, our base-level entry devices have to support WAP 2.0, which in turn supports XHTML-MP (Mobile Profile) and WCSS (Wireless Cascading Style Sheets). We also target high-end devices that fully support XHTML and CSS through to HTML5 and CSS3.

XHTML-MP is simply a subset of XHTML for mobile use and WCSS is a subset of CSS. Whilst XHTML-MP has been adopted and superseded by the W3C with XHTML-Basic 1.1, it's still the most widely supported XHTML variant. If you know XHTML, you already know XHTML-MP and XHTML-Basic. The same applies for WCSS.

Styles can be embedded or linked into your XHTML just like normal desktop web pages. What about more interactive technologies such as JavaScript or Flash? Support for these is inconsistent.

However, at the lowest level, like the desktop version of your website, the mobile website should still work without them.

Device diversity

To reiterate, mobile websites are built using existing web technologies. The main challenge is that given the sheer diversity of mobile devices, support for these technologies is inevitably inconsistent.

Certain devices may not support particular features, or features common to devices may be implemented in different ways. So how can you be sure your mobile website will look and act the same on all mobile devices if they all implement the technology in slightly different ways? How can you test your mobile website effectively? How can you assure your clients that their mobile website will work flawlessly on all devices?

BASIC PROFILE: The Basic profile of the site on OpenWave shows the lowest common denominator

The simple answer to these questions is … you can't! It's a tough call to make, but an important one. It's logistically impossible to set up and test all of the XHTML-supporting mobile devices that are available, as well as dealing with quirks that each device offers.

Ironically, appreciating this early on will actually help your build, testing and quality assurance processes. At Code Computerlove, we came up with a two-pronged approach to help us deal with this diversity.

Firstly we agreed to support at the lowest level, only those devices that support XHTML and CSS. Secondly, we used the concept of 'device profiles'. A device profile is simply a way of logically grouping devices.

The criteria for each group can be based on device capability, manufacturer and operating system, or by any other criteria. We created three core profiles. The 'Basic' profile covers low resolution, text-only devices. The 'Intermediate' profile includes devices that support images and have a screen resolution greater than or equal to 240 pixels (such as the BlackBerry, Nokia N95 and Nokia Xpress).

Finally, the 'Advanced' profile includes the latest smartphones based on WebKit browsers, such as the iPhone and Android phones. These profiles help us both to generalise and specialise device capabilities. They help us form a design, build and testing strategy, as well as enabling us to demonstrate to our customers how a mobile website experience will differ between diverse mobile devices.

These profiles are not set in stone. Neither are they static. Profiles may vary between projects and customers. They reflect which agreed device features are to be targeted, as well as the specific handsets we need to support.

During the life cycle of a website, new profiles may be added and old profiles removed. Additionally, they require regular reviews to guarantee their relevance and to ensure that new devices entering the market are properly assigned to the right profile.

Device profiles play an important part in our build process. We assume that all devices adhere to the basic 'text-only' profile. This is our default, fallback profile that will work on all devices. We then progressively enhance a site for subsequent profiles.

INTERMEDIATE PROFILE: The intermediate device profile for the First Group TransPennine Express site shows how it looks on more advanced mobile devices

For example, the Intermediate profile introduces a wider colour palette and the use of images. The Advanced profile extends this further by using advanced CSS3 techniques or more interactive scripting elements.

Device detection

So how do you determine whether a web page request is coming from a mobile device? And secondly, how do you determine what profile a device belongs to?

We do this by simply inspecting a web browser's user agent details and matching them up in a device capability file, which contains extended details about the device. Each web browser has user agent information about itself, such as vendor, version or operating system.

Irrespective of whether a browser is running on the desktop or mobile device, whenever it requests a page from a server, it also sends this information as part of that request. A server can then use this information to determine whether a request has come from a mobile device or not and what capabilities that device has.

To help with this, there are a number of publicly available 'device capability' files that you can use with your server-side technology. These files contain extended information about the web browser and device accessing your site, such as screen resolution, colour depth, image support, touch screen support, manufacturer and operating system.

These database files come with a number of pre-built helper methods, enabling you to integrate them easily into various server-side web technologies such as PHP, ASP.NET and Java.

At Code Computerlove, we use the paid-for subscription service DeviceAtlas. For a minimal yearly cost, this service provides us with regular database updates as well as an online database for browsing phone capabilities.

There are of course alternatives, and a popular open source project called WURFL (Wireless Universal Resource File) is available from wurfl.sourceforge.net. Alternatively, you could write your own user agent detection routine!

Testing

How do you test your mobile website and device profiles? There's no substitute for using real physical devices. Not only will you see precisely how the site will look, but you'll also experience any hardware challenges that the device will throw up, such as screen size or quirky input mechanisms.

Physical testing on every single device is, of course, logistically impossible. But you should try to obtain a few devices that fit each of your device profile characteristics. And if you're building a site on behalf of a client, it's worthwhile trying to get hold of the common handsets they use. There are also a number of software-based testing tools you can use in your daily build and testing process.

TEST AS MUCH AS POSSIBLE: The more devices you can test on the better, but testing on all devices is next to impossible

For testing your mobile site within your desktop browser, use the Firefox User Agent extension. This extension changes the browser details that are sent to your server, spoofing the server into thinking you're accessing the site from a mobile device.

It's important to note that you'll still be viewing the website via the Firefox rendering engine, not how it will be actually rendered on mobile devices. What it will show you, though, is an approximation of how your site will look across various device profiles.

For greater accuracy, there are a number of device simulators available for you to install on your development box for BlackBerry, Android, and iPhone to name a few. Furthermore, there are hosted options offered by Opera, Nokia and Device Anywhere. The latter is a paid-for service hosting thousands of genuine mobile device simulators.

IMPROVING ALL THE TIME: The Intermediate profile on a BlackBerry shows improved formatting and imagery

Perhaps one of the most useful tools is the now-defunct OpenWave simulator. It's fantastic for experiencing your mobile website against a small resolution, text-only device profile. Due to its limited nature, what you'll get is an immediate indication of whether your navigation and content work for mobile.

Multiple websites

Throughout this article, I've been discussing mobile websites as distinct entities from desktop websites. But do you need to build separate websites? Do you need separate URLs for your mobile website?

There's no right or wrong answer to these questions. In an ideal world, your website should be accessible to all devices – desktop or other – and be capable of rendering itself where possible, using the same content and navigation structure.

This singular approach works brilliantly if you know from the outset that your website is to target multiple devices as this can be factored in accordingly when planning structure, layout and content. However, if you have to retro-fit mobile onto an existing desktop site, it may be easier to run the two as separate sites.

Navigation and content that traditionally works well on the desktop may not when displayed on a mobile device. Desktop navigation may seem unnecessarily complex on a mobile device, and content may need rewriting, either to be shorter and more immediate or to be split across multiple pages.

As the amount of server-side branching logic increases to alter navigation and content for desktop and mobile, it's then a case of either re-evaluating your design, structure and content or, if the two sites serve slightly different objectives, running the two as separate instances.

At Code Computerlove, we've separated out our desktop and mobile website. We've found this easier when internally managing site assets such as style sheets, scripts and images and server-side logic.

We are, however, in a convenient position in that our content management system enables us to share content between multiple websites. So, while both are distinct sites, there's crossover and shared content between both.

Do you need a separate URL to distinguish your mobile website from your desktop website? Again, there's no right or wrong answer to this: it's purely down to your own requirements. You don't need a '.mobi' domain, an 'm.' subdomain or a 'mobile' folder as part of your main website's URL.

At Code Computerlove we've used the 'm.' sub-domain approach for mobile – for example, m.codecomputerlove.com – and www for desktop, as this suits our requirements.

If a mobile device browses to the desktop URL, it's redirected to the mobile site. The mobile site contains a hyperlink that enables the visitor to navigate back to the desktop site if they wish to. Conversely, if a desktop browser visits the mobile site, we don't force a redirect back to the desktop version.

Structure and content

Due to restrictions on screen real estate and the various input mechanisms used by mobile devices, relying on a traditional multi-column desktop-based layout doesn't work. This is true even for smartphones that accurately render desktop websites. The novelty soon wears off when scrolling through and zooming around desktop-targeted websites.

At Code Computerlove, we've developed a standard template structure for our mobile websites, initially based on a template that can be found at MobiForge.

This template follows a single-column, fluid-width design. What this means is that the user need only ever scroll vertically and that the page always fits the available width of the mobile device's web browser. The template is purposely 'light'. It encourages simple navigation with tightly written, relevant and focused page content.

Additionally, the template promotes the use of clean and simple XHTML markup that mobile devices with limited processing capabilities, memory and variable network speeds are able to render quickly.

MOBILE TEMPLATE: This diagram will give you an idea on how to structure a mobile website

The template is composed of a header containing the company name or logo; top and bottom breadcrumb trails displayed on all pages except the homepage, enabling the visitor to navigate back through the site with ease; a page content area; sub-navigation links; and a footer containing copyright information plus, more importantly, a hyperlink to the desktop version of the site.

Final tips and tricks

To wrap things up, here are a few final tips and tricks to help with your mobile website development:

Mobile-specific META tags

A number of XHTML META tags that are specific to mobile websites can be used in addition to the common tags such as author and description. A review of these can be found here.

One important one is the viewport META tag, which can be used to set the initial scale of the width of the site to fit the screen. This is especially important for iPhone browsers. It forces your mobile website to fully fit the screen at the correct resolution and prevents the user 'zooming' into a page, for example:

CSS and presentation tips

Given the variable nature of screen resolutions, it's best as a rule to stick with relative units such as percentages and ems. Relative units will help when it comes to making a quality and scalable mobile design. With perhaps the exception of more advanced smartphones, fonts and sizes are in general poorly supported.

It's best to assume that most devices will only use their default font faces and sizes for XHTML elements. CSS background images tend to be well supported. However, your design must work well in the event that they aren't.

We did find a glitch with BlackBerry browsers. To ensure maximum support, make the URLs to your background images absolute, not relative, to the style sheet.

Image resizing and scaling

It's preferable not to push full-size desktop-targeted images to mobile users. Where possible, ensure your images are optimised accordingly. There may be instances where you need to scale images dynamically on the server to match the screen resolution you're serving to.

If you're using DeviceAtlas for browser detection, you can obtain the actual screen width of the web browser and rescale the image accordingly, using such tools as ImageMagick or any other server-side image manipulation library.

Google Analytics

Avoid using the default JavaScript-generated code. Many mobile devices don't support JavaScript and so using the default code will distort your website statistics. Google now offers tracking code options that are targeted specifically for mobile devices.

This code does not rely on JavaScript. You can find the option under the Advanced tab in the section where you normally generate your tracking code from.

Sony has partnered with the BBC to add an iPlayer widget to its new Vaio laptops, making access to the iPlayer easier than ever.

Sony's new Vaio range will let you access your favourite BBC radio and TV content quickly and easily via its pre-installed iPlayer Desktop widget

On laptops and all-in-ones

"This will allow Sony Vaio customers to benefit from access to live and on-demand TV and Radio programmes directly through a desktop shortcut on laptops and all-in-one computers," reads Sony's announcement.

"The iPlayer Desktop service will be available as a pre–install from September and will allow users to watch downloaded content even when they are offline.

"The partnership between the two companies will make it easier than ever for entertainment fans to instantly watch TV and listen to radio."

Stock up on must-watch telly

The iPlayer widget will let you pre-book a whole series of upcoming shows to be automatically downloaded when available, which is great for commuters and travellers – just stock up your nice shiny new Vaio with all that must-watch telly that you previously never got round to viewing.

Edd Uzzell, Proposition Development Manager for Sony said of the new iPlayer widget: "We are delighted to be able to offer Sony VAIO customers this added entertainment functionality giving users the ability to watch and manage their favourite programmes at the click of a button.

"We are really excited to be partnering with the BBC to bring their fantastic iPlayer service to Sony's VAIO range".

If you compare your average Liverpudlian and Londoner's searches, you might end up thinking that Merseysiders are obsessed with shopping and capital dwellers are all about the celebrity, if Google's fastest rising search terms are to be believed.

We all search for pretty much the same stuff on Google in the UK right? So it would make sense that a list of the fastest rising search terms in both Liverpool and London would have pretty much the same terms. Wrong.

Interestingly, the only two phrases that crop up in the top 20 terms supplied to us by search giant Google are 'Facebook' (login and home, respectively) and 'Sky Sports', continuing a sporting present that is definitely present in both sets of results.

Facebook, but not .com

Liverpool's fastest rising search term in the past week has been Facebook login – which is surely harder to type in than facebook.com? In London, Dutch footballer Rafeal van der Vaart's last ditch move to Spurs put him at the top of the list.

Big Bang Theory star Jim Parsons, second, and Man Men's Christina Hendricks were either side of Facebook in the London rankings and ahead of tennis tournament US Open, whereas Liverpool's top five searches included Natwest, Yahoo and the BBC iPlayer.

Over new arrivals of note include infamous bulletin board 4chan – responsible for some of the internet's most amusing recent japes – and Colombian bank Banco de Bogota, both in the London list.

In fact, if you could draw one overarching conclusion from the search terms it would appear that Liverpool tends to search for brands and sites, whereas London looks for events and people.

Liverpool

facebook login
sky sports
natwest
yahoo
bbc iplayer
bbc sport
youtube
liverpool fc
google
hsbc
hotmail
ebay
liverpool echo
tesco
easyjet
amazon
next
argos
orange
club penguin

London

van der vaart
jim parsons
facebook home
christina hendricks
us open
fiba
4chan
ac milan
gadget show
guns n roses
minecraft
notw
onpe
corinthians
notting hill carnival
transfer rumours
banco de bogota
formula 1
michael jackson
sky sports news

Apple and Facebook are not seeing eye-to-eye over the former's entry into social networking this week, with the announcement of Apple Ping.

Ping is available now, as part of the new Apple iTunes 10, although Facebook doesn't seem to want to get officially involved.

Apple CEO Steve Jobs informed reporters this week that the two companies had discussed how to work together to promote Ping, but that Facebook's terms were "onerous."

Ping causes 'issues'

Apple used some of Facebook's open programming interfaces to let users find their Facebook friends on Ping, although this stopped working earlier this week.

While Ping could well have directed considerable amounts of traffic to Facebook, sources claim that this would have caused site stability and infrastructure problems, hence Facebook pulling the Ping plug.

Following this, Facebook said in statement: "We're working with Apple to resolve this issue. We've worked together successfully in the past, and we look forward to doing so in the future."

Apple has not yet responded to the matter.

Facebook boss Mark Zuckerberg has already opened his own account on Ping.

Twitter CEO Evan Williams has revealed that Twitter now has over 145 million users and nearly 300,000 apps.

Williams posted on the Twitter blog this week about the state of Twitter on mobile phones, outlining the top ten apps.

Interestingly, Twitter for Android does not even make the top ten.

Twitter on the money

However, there are certainly plenty to choose from, with Williams stating that there are nearly 300,000 registered apps in the Twitter ecosystem, a number which has tripled since Twitter's 'Chirp' conference back in April.

Williams also outlined a few more interesting facts and figures about the current state of Twitter, revealing that mobile users have increased 62 per cent since mid-April and that 16 per cent of all new users to Twitter now start on mobile.

Additionally, he revealed that 46 per cent of active Twitter users use a mobile Twitter app and that 78 per cent of those who interact with Twitter do so through twitter.com, while m.twitter.com is the second most-used Twitter interface at 14 per cent.

The Twitter CEO also noted that Twitter's Promoted Products exceeded their expectations, but said nothing about how much money they are currently making.

No word on if that means Twitter has turned a profit, but that seems pretty unlikely. Still, revenues are undoubtedly growing.

Virgin Media has announced that it will publish its average broadband speeds for all of its packages for everyone to see, as it joins the campaign for greater honesty in the way that speeds are advertised by consumers.

With Ofcom now also publishing its results, it is increasingly obvious that the 'Up to..' services that are run by most ISPs show a huge disparity between what customers think they are getting and what they actually achieve on average.

Virgin Media, which has the luxury of a fibre optic network that leads to higher average speeds which Ofcom's research showed were much closer to advertised, is now going to publish its own average speeds at www.virginmedia.com/speedhonesty for all to see.

Ripped off

Jon James, executive director of broadband, at Virgin Media said: "People are paying for faster and faster broadband but being ripped off by unscrupulous providers who can't deliver their promised speeds to even a single customer.

"A change in advertising is urgently needed to build consumer confidence in super-fast broadband and the industry more generally.

"In the meantime, I hope other ISPs will quickly follow Virgin Media's lead by disclosing their own monthly performance data so people can make an informed decision about how to spend their money."

The ASA are currently looking into the way that broadband is advertised, and ultimately TechRadar believes that the 'Up to...' claims should be dropped from advertising altogether and average speeds used in their stead.

The UK's advertising watchdog, the Advertising Standards Authority (ASA) is extending its remit to cover online advertising.

The ASA will soon be keeping a closer eye on web advertising and marketing campaigns on social networks such as Facebook and Twitter.

New powers to block online ads

From 1 March 2011, the organisation will be able to apply the same strict rules that it currently applies to traditional print media.

The ASA received no less than 3,500 complaints last year, but over half of those were outside of its remit.

"This is a massive step. Consumers don't differentiate between adverts on TV or online and this ensures that claims online will be subject to the same strict scrutiny of those in traditional media," an ASA spokesman told the BBC.

The ASA will also be given powers to remove paid-for search advertising and, in some circumstances, replace it with its own advertisements outlining an advertiser's non-compliance.

Sci-Fi writer Neal Stephenson has set up a new e-publishing venture to develop a new platform for creating and publishing digital novels.

Stephenson, perhaps most famous for his post-Cyberpunk 1992 novel Snow Crash is launching a new publishing operation called Subutai, based out of Seattle and San Francisco.

PULP Fiction

Subutai is developing what it calls the PULP platform for creating digital novels, offering authors the ability to augment their core text with images, video, music and background articles.

PULP also features social networking aspects, so readers can earn badges for activity on the site, interact with other readers, create their own profiles and so on.

Stephenson says of his latest venture: "I can remember reading Dune for the first time, and I started by reading the glossary. Any book that had that kind of extra stuff in it was always hugely fascinating to me."

The Mongoloid

Subutai is launching its first serialised story called The Mongoliad about the Mongol invasion of Europe, this week. Readers pay $5.99 (£3.90) for a six-month subscription fee or $9.99 (£6.50) for a year.

Subutai's co-founder and President Jeremy Bornstein hopes that readers will still be prepared to pay for content when "the experience is so much more rich, so much more involving."

Head over to The Mongoliad website for more. An iPad/iPhone/iPod Touch app and and Android app are both in the works and set to arrive very soon.

In what is becoming something of an industry trend, Amazon.com is reportedly approaching media companies with a proposal for an 'all-you-can-eat' style TV and movie streaming service.

Amazon.com has approached Time Warner, CBS and Viacom, according to Reuters' sources. Talks are currently at an early stage, claim the same unnamed sources.

Amazon's US website already offers a number of TV shows and movies in its video-on-demand section at a cost of $1.99 and upwards

Amazon, Apple, Google, Sony

The proposed new Amazon subscription service would go up against the likes of Hulu and Netflix in the US.

One option that Amazon is offering its potential media partners is that of subscriptions bundled with the existing Amazon Prime service, which offers US consumers free two-day shipping on most of Amazon's products for $79 (£50) a year.

Apple is expected to unveil its latest plans for Apple TV at a press event in Cupertino later today, while both Google and Sony are also looking at ways of delivering (and monetising) TV and movie subscription and streaming services.

Amazon, CBS, Viacom Time Warner and NBC Universal have all so far declined to comment.

According to Adams Media Research online sales and streaming of movies were worth $300 million in the US in 2009, and $340 million for TV shows.

Sony is reported to be readying a launch announcement for a new music and video service set to take on the might of Apple's iTunes.

Sony is set to make the announcement at this year's IFA event in Berlin, according to 'sources in the media industry' cited by The Financial Times this week.

PS3 and PSP to lead

The Financial Times claims that the new service from Sony will use the PlayStation 3 and PSP consoles as a launch point.

Other Sony devices including Vaio PCs, Bravia TVs, Walkman media players and Sony Ericsson mobile phones are also in the roadmap for the service, according to the FT's sources.

Sony's $260m acquisition of music-identifying service Gracenote back in 2008 is said to play a significant role in the new service.

The service is expected to be launched at some point in 2011.

Apple is set to make a slew of new product announcements at its own music-themed press conference in California later this evening.

Google' CEO Eric Schmidt will provide the closing keynote for the IFA conference in Berlin, further testament to the increasing power of the European electronics show.

IFA 2010 is perhaps the most influential consumer electronics offering outside of CES, and has become a key launchpad for many major manufacturers in the run up to the festive period.

And this year's IFA will close with the CEO of the most powerful internet company – Eric Schmidt – an indication of the increasingly connected world of the electronic device.

Innovations

"Google and technological innovation are synonymous," said Jens Heithecker, executive director of IFA.

"We are delighted that Dr Schmidt will join other thought-leaders in IFA's International Keynote program to define the technologies and innovations that will move our industry forward."

Schmidt is the most vocal of the senior figures at Google, with founders Sergei Brin and Larry Page happy to avoid the majority of the limelight.

He has courted controversy at times, most often over privacy issues, but his presence in Berlin shows just how far Google, and IFA have come.

Google has overhauled its much-admired Google Translate, with the search giant pumping time and effort into making the world's languages accessible for all.

Machine translation has been around for some time, but Google is putting major resources into perfecting its Google Translate technology, and the latest changes will be rolled out globally in the coming days.

"Today, you may have noticed a brighter looking Google Translate," blogged Google Translate product manager Awaneesh Verma.

"We're currently rolling out several changes globally to our look and feel that should make translating text, webpages and documents on Google Translate even easier."

Google check out

Google is hoping that a new look will encourage more people to check out the features within translate.

"With today's functional and visual changes we wanted to make it simpler for you to discover and make the most of Google Translate's many features and integrations," added Verma.

Google has also created an Inside Google Translate page, that explains more about the project.

It is only ten years since Friends Reunited launched in Britain, helping millions of Brits join up with old school friends.

It was one of the first online social networks to really capture the public's imagination in the UK, years before MySpace (and, later still, Facebook) stole its thunder.

Husband and wife team

The site was the brainchild of husband and wife team Steve and Julie Pankhurst. At the height of its popularity it had over 20 million registered users.

The site was bought by ITV in 2005 for £175m and sold to DC Thomson subsidiary Brightsolid earlier this year for a mere £25m.

It now attracts around 1.3m unique visitors a month.

Ian Maude, head of internet at Enders Analysis, cites the fact that ITV didn't take the site's paywall down quicker was a key reason for its demise, as users began to switch to MySpace and Facebook in droves.

Brightsolid also purchased Friends Reunited Dating and Genes Reunited. Users pay up to £64.95 a year for the Genes Reunited platinum package.

Strong connections with real friends

Brightsolid's Chief Exec, Chris van der Kuyl, is still adamant that Friends Reunited's business plan is set to be based around the concept of "stronger connections with real friends", as opposed to the "hundreds of 'friends' people have on sites like Facebook" making the site stickier.

"Right now a lot people just click on quickly for a brief snoop to see if anyone's personal details have changed," adds the Friends Reunited man.

"We know for our advertising model to work and to get people more engaged, we have to introduce quirky features, such as social games, which keep people's attention for longer and stop the site being so voyeuristic."

Google has announced a musical project with band Arcade Fire and music video director Chris Milk called 'The Wilderness Downtown' which is aimed to show the power of HTML5.

The project, which Google says that it has been 'playing around with for the last few months' is designed to show just how far browsers have come in the past few years.

"Today we're excited to launch a musical experience made specifically for the browser. Called "The Wilderness Downtown", the project was created by writer/director Chris Milk with the band Arcade Fire and Google," blogged Aaron Koblin of Google Creative Lab.

"Building this project on the web and for the browser allowed us to craft an experience that is not only personalized, but also deeply personal for each viewer.

Memory lane

"The Wilderness Downtown" takes you down memory lane through the streets you grew up in. It's set to Arcade Fire's new song "We Used to Wait" off their newly released album The Suburbs.

"The project was built with the latest web technologies and includes HTML5, Google Maps, an integrated drawing tool, as well as multiple browser windows that move around the screen."

Google is, of course, hoping that you use its Chrome browser to take part in the experiment at www.chromeexperiments.com/arcadefire but it will work with any HTML 5 compliant browser.

It's a fascinating experiment, which verges on being a bit eerie but certainly brings a hefty whack of novelty along with it.

If youare suffering from email overload, then Google’s latest innovation for Gmail,simply called ‘Priority Inbox’, is certainly worth checking out.

For manyusers, particularly if you are signed up to lots of automated newsletters andemail updates from companies, it can be overwhelming to open up their email ina morning and sort the wheat from the chaff.

Learns email habits

Gmail’sPriority Inbox attempts to learn your e-mail habits and then decides whichmessages are most important to you, and thus bumps them up the list for you tocheck them first.

Priority Inbox splits your inbox into three sections: "Important and unread,""Starred" and "Everything else":

It is, inbasic terms, an automated way of doing what many already do by setting upmanual filters in their Gmail.

Google Software Engineer Doug Aberdeen, explains thethinking behind Priority Inbox(which is currently in beta) as follows: "Ourinboxes are slammed with hundreds, sometimes thousands of messages a day—mailfrom colleagues, from lists, about appointments and automated mail that’s oftennot important. It’s time-consuming to figure out what needs to be read and whatneeds a reply."

Aberdeen says that, in addition to spam, people get a lot of mail that isn'toutright junk but isn't very important— known as bologna, or "bacn."

"So we've evolved Gmail's filter to address this problem and extended it tonot only classify outright spam, but also to help users separate this"bologna" from the important stuff. In a way, Priority Inbox is likeyour personal assistant, helping you focus on the messages that matter withoutrequiring you to set up complex rules."

Via TheOfficial Gmail Blog

News Corporation-owned MySpace is now offering its users the option to sync with rival social network Facebook and micro-blogging site Twitter.

Members can now post their status updates and shared content to Facebook and Twitter, in a move that is pretty much a tacit admission of the old maxim: "if you can't beat 'em, join em."

Span the networks

The move takes the recently revamped 'stream' design of MySpace profiles and plugs in Twitter and Facebook's application program interfaces (APIs) to allow easy syncing across the networks.

The syncing applies both to individual MySpace users, as well as bands and celebrities.

"This is particularly exciting for the millions of musicians on MySpace who can now use this tool as a complement to their MySpace Music presence and share their vast library of content, including full album catalogs, to people who've liked their Facebook page," explained MySpace in a press release.

Sync with Facebook

Jennifer Ruffner, Director of Product, MySpace Stream explains a little further about the thinking behind Sync with Facebook.

"Sync with Facebook allows users to keep their friends on Facebook up to date on everything, including: sharing songs, latest photos, fun game apps, and more.

"The opportunities to experience and share this type of entertainment content are endless. This is particularly exciting for artists who can now use this tool as a complement to their MySpace Music presence and share their vast library of content, including full album catalogs, to people who've liked their Facebook Page."

"Users continue to have the option to sync to Twitter as well. Once you've synced your Facebook account, simply update your status on MySpace as you normally would (from your homepage, status and mood page, or mobile phone). When you update your status on MySpace, it will then be shared with friends on Facebook."

The venerable institution that is the 126-year-old Oxford English Dictionary may no longer be made available in print, with the OED's publishers seriously considering an online-only release for the forthcoming third edition.

The OED3 will be the first new edition since 1989 and could well be made available in its entirety online according to the AP.

The current print version of the OED weighs over 130 pounds, so it's easy to see why smartphone-toting academics might well be more inclined to opt for a subscription to the online-only version in the future.

Print market is disappearing

Nigel Portwood, Chief Exec of Oxford University Press says that online revenue is an increasingly important aspect of the business, adding that the publisher is considering dropping print versions of the new OED completely.

Portwood told The Sunday Times: "The print dictionary market is just disappearing. It is falling away by tens of percent a year."

The online version of the OED, while still costing £205 + VAT for individuals to subscribe to gets around two million hits per year from subscribers right now.

New online version in December

Oxford University Press has a team of 80 lexographers working on OED3, which has already been in development for over a decade. No word as yet on when it might be released.

A new online version of the OED is planned for launch in December, which will include a historical thesaurus to improve the ease of cross-referencing.

"At present we are experiencing increasing demand for the online product," said a statement from Oxford University Press.

"However, a print version will certainly be considered if there is sufficient demand at the time of publication."

Google has confirmed plans to use GPU acceleration to give the latest version of its Chrome browser a serious bump-up in speed.

The news follows similar plans expected to be announced from the Microsoft and Mozilla camps in the coming weeks, with Internet Explorer 9 (IE9) and Firefox 4 both looking set to add GPU acceleration.

Overhauling the graphics system

"There's been a lot of work going on to overhaul Chromium's graphics system" and the browser will "begin to take advantage of the GPU to speed up its entire drawing model, including many common 2D operations such as compositing and image scaling," a Google rep informed conceivablytech.com.

As such, Chrome 7 will appear to be far zippier than its predecessors, particularly on graphics-heavy sites.

Google plans to offload an increasing amount of the graphics' rendering work onto the GPU to "achieve impressive speedups", detailing how the tech works on a document on Google's Chromium website.

Mozilla's Firefox 4 beta is currently available for those that want to check it out, while Microsoft is currently readying itself for the launch of Internet Explorer 9 on 15 September.

Google is planning on developing a paid-for on-demand movie service via YouTube by the end of the year, according to latest reports.

The FT reports that Google is pitching the business plan to all the major Tinseltown studios, citing anonymous sources familiar with the deals.

Google takes on Apple

The announcement comes hot on the heels of last week's news that Google is planning on boosting the free movies-on-demand offering on YouTube.

The service will go head-to-head with offerings from the likes of Lovefilm in the UK and Netflix and Hulu in the US.

Additionally, it is rumoured that Apple is preparing to make an announcement about its own plans in the movie streaming market.

Google has a number of added advantages that it can offer Hollywood studios, not least the fact that it is the most popular search engine in the world, plus the company owns YouTube, the world's most popular video streaming service.

Google goes to the movies

According to the FT's sources, Google hopes to launch its new movies-on-demand service later this year, rolling it out to other countries over time.

"Google and YouTube are a global phenomenon with a hell of a lot of eyeballs – more than any cable or satellite service," said one source. "They've talked about how many people they could steer to this . . . it's a huge number."

Google has been beta testing a film rental service since January 2010.

It is said that the company plans to plan to charge US movie fans around $5 to stream newer titles, which would be made available at the same time as the DVD release or the download option on stores such as Amazon.com and Apple's iTunes.

Google is more than a search company: it's an online leader in applications and cloud services too. All of its offerings are packaged in the same minimalist way because with Google, form takes second place to function.

Take Google's strongest and most comprehensive toolkit – Chrome. Among the most standards-compliant of web browsers, it's the ideal browser for development. Add to that a series of features and tools that make it an ideal tweaking and testing platform for editing your own sites.

To launch Chrome Developer Tools, hit [Ctrl] + [Shift] + [I] on any page or click the 'Control the current page' icon on the Chrome toolbar and choose 'Developer'. The Developer Tools suite is similar to Firebug, with tabs for analysing page performance, script behaviour and an 'Audit' feature that validates and suggests code optimisations.

Most powerful is the elements section, which gives you live, line-by-line control over the HTML and CSS in the current page at DOM level. Use it to troubleshoot errant code, try out layout tweaks or inspect another site's layout. You'll find Chrome's JavaScript debugger built in, alongside tools for testing script speed and performance.

Here's a feature tip that's often overlooked: you can right-click on any element in a page and choose Inspect Element to launch Developer Tools right there in the document. You can also click the magnifying glass icon – labelled 'Select an element to inspect' – when you're in Developer Tools. Roll the cursor over the current page and elements are highlighted in blue, enabling you to drill directly to them in the page code.

Of course, Google's better known for its hosted services and cloud-based tools. There's no shortage of those for site tweaking and tinkering either. For instance, Browser Size is a simple and effective gadget. Enter your URL and an overlay shows you what percentage of your page can be seen at different window sizes. It's a quick test that should be added to your pre-flight routine.

Caffeine didn't add speed to its page rank algorithm without notice or support. Page Speed and Speed Tracer are plug-ins for Firefox and Chrome that you can use to look for speed bumps in your sites.

"At Crayon we use Page Speed along with [the Yahoo tool] YSlow to see where we can shave off page weight and reduce load times," says Chris Michael of Crayon. "These tools easily integrate into our existing development environments and give well-documented feedback."

He goes on to praise Page Speed's use in creating PPC (pay per click) landing pages. "Page Speed has had a direct positive impact on the cost of running our PPC campaigns," Michael says, "due to the way Google rewards more efficient pages."

Clickthroughs / keyword tweaks

It's in the field of SEO that Google's most widely used tools can be found. Top of the pile is Google Analytics, which enables you to track unique and returning page hits across a number of categories. More impressively, you can configure goals and targets of your own.

With AdWords integration, it's a must-have tool for click-conscious business sites, enabling you to track hits and clickthroughs to your site from Google's ad network. "We recommend Google Analytics because, for the majority of clients, it can meet their needs without subscription costs," says Margaret Manning, CEO of Reading Room. "Too often we see companies spending significant money on commercial analytics tools, then only using them to get visitor numbers and bounce rates at the end of each month."

It does have its limitations, though. While a fan – "Our clients particularly like the feature whereby they can get automated weekly dashboards sent to them by email" – Chris Michael uses other commercial tools alongside it. "If you're in the business of driving online sales then you should consider a more sophisticated tool like Omniture or Web Trends too," he recommends.

AdWords is surely Google's most successful tool aimed at web builders. Alongside AdSense, a service that enables you to publish context-relevant ads on your pages, it's Google's real business. AdWords pushes traffic your way, AdSense earns money from your content, everyone's happy. What's not to like?

If Analytics is the rock star of Google's cloud SEO service, Webmaster Tools is the faithful roadie. Your listing on Google can, to an extent, be controlled by server-side means, using the standard robots.txt to guide Google's search spider through the hierarchy of your site.

You can spot visits from search engines in your server logs, too. Webmaster Tools helps you tune all that, letting you decide when and where Google crawls your site. The service can also be used to generate a bespoke robots.txt and for close tracking of clicks from search results.

Its real strength, though, is that it displays search rankings for your sites' keyword results on Google in an easy-to-read format. You can easily see which keywords are performing well for you, and which content needs optimising.

Soak testing

Rounding out Google's trio of optimisation tools is Website Optimizer, a service that enables you to quantitatively analyse the performance of different site layouts. The principle is simple. You set up two (or more) different versions of a page and Website Optimizer collects user data, live.

It's an effective, free way to perform user experience testing. "A big growth area for us over the last year has been site optimisation, and in particular the use of A/B and multivariate testing," says Crayon's Chris Michael. "Website Optimizer is great for getting started in this area, although it can only take you so far. We also use Omniture Test and Target and Maxymiser, which offer much richer toolsets."

You're best off starting with an A/B test, which compares and contrasts the metrics for two different layouts. More complex multi-variate testing is better suited to high traffic sites, when you want to test response to more subtle changes, such as a new logo or a repositioned navigation box.

Some of Google's most hardcore tools are aimed squarely at developers. If you're a coder and you know what you're looking for, Code Search can be invaluable. It indexes thousands of code repositories and sources and can find you snippets of PHP, Java, C, Python or PERL. The advanced search option enables you to narrow your quest to specific languages and queries.

If you prefer your code samples to come with working examples, then you have a couple of choices. Google Code is where you'll find scripts, apps and source development kits. It's the gateway for Google's APIs, including the Android SDK, OpenSocial and Google Ajax Libraries, and also a repository for third-party, open source projects.

The best way to find suitable code is at code.google.com/hosting/, where you can keywordsearch or browse projects using a variety of different programming languages. For example, a search for 'social network' returns 655 hits, including full application scripts, PHP libraries and APIs. So far, so server-side.

Chrome Experiments is where you need to go for JavaScript, CSS and HTML inspiration, with a selection of fancily coded pages that play with the extremes of standards-compliant code. It's hosted by rather than produced by Google, so each 'experiment' links to an external site.

With demonstrations of DOM elements imbued with artificial gravity, fractal drawings generated within the HTML5 tag and browser-based drawing tools, the magic behind the curtain is always just a View Source away.

But there's more to Chrome Experiments, with some demonstrations of complete application behaviour rendered entirely in client-side code.

Like Darkroom, a tool for touching up digital photos directly in Chrome. Then there's Kevin Roast's Asteroids, a full and updated implementation of the classic arcade game in HTML5 and JavaScript.

It's worth mentioning one of the cooler aspects of Chrome's View Source option here. It automatically links to external documents, such as the JavaScript files required to drive these advanced experiments.

Making applications

As we venture further away from site construction and towards application creation, Google's tools become more singular and more robust.

Gears may not have the visibility of Adobe AIR, another wrapper for application content built using web technologies, but it's still widely used. While AIR is more often deployed to bring web apps to the desktop, Gears is used to add offline functionality to web pages, adding database, storage and file I/O to applications running in a browser.

It comes bundled with JavaScript APIs that enable you to control local resources. These are LocalServer, an API that intercepts URL calls from your browser and server files from your machine; Database, for SQL accessible data storage; and WorkerPool, which runs application processes.

However, although Gears is still available to developers and supported by Google, the company is moving towards standardised web technologies to achieve the same ends.

HTML5 includes much of the same local and session storage functionality and, following the W3C's Web Applications 1.0 spec, there are Local Storage and Web Sockets features now built directly into Chrome.

For application development in pure JavaScript, Google's Closure Tools is a little known but very powerful suite. A Google Code resource, there are several apps.

The Closure Compiler enables you to optimise JavaScript documents into fast, portable and syntax-checked code. Although the resulting script is no longer readable by mere human beings, there's the Closure Inspector, a tool that lets you edit the 'compiled' code as easily as an unoptimised script.

While we're still on the hard stuff, Google Web Toolkit features the GWT SDK, which enables you to write applications in Java, then translate them to optimised JavaScript. There's a plug-in for open source IDE Eclipse too, so you can develop tools in a visual environment.

"The strengths of the toolkit are most certainly the provided tools, and the development environment," says Mike Parker, co-founder of digital media agency Orange Bus. "We knew Java and were comfortable using that technology for the server side, and were intrigued by their approach of writing the web UI in Java and having the tools compile that for delivery to the browser. An interesting level of abstraction!"

Of course, there's real value in tools that are less than industrial strength – those ostensibly aimed at consumers. Google-owned YouTube, for example, offers a free and easy method to host, embed and serve video on websites, for example.

Blogger is still one of the most flexible hosted content publishing tools there is, with AdSense integration making it the only free platform that allows you to earn from advertising.

Then there's Google Sites, a tool that's eminently suited to intranet usage, given its collaborative, wiki-style editing tools and structure. Other tools that can be integrated directly into your website, with embeddable code ready to use, include photo organiser Picasa, Google Maps and Google Merchant Center (formerly known as Google Base).

Designer Guy Hoogewerf uses them all – and more. "My methodology is simple," says Guy. "Why reinvent the wheel? If (Picasa) has created slideshow code, we should use it. Google has so many tools that it should be a web developer's dream come true."

While the tools we've considered so far are all directly applicable to the design and development process, Google has other services that enable teams to work together on projects.

Take Google Documents, which now enables you to upload and share files of any type. "It's not exactly a development tool, but Google Docs is definitely part of our web development efforts," says Prem Prakash, senior developer at Likemind.

"We use documents and spreadsheet aspects of Google Docs for collaboration and information-sharing within the team for in-house projects. It's saved us from keeping multiple versions of Excel files. We also like the fact that the spreadsheets are available to all concerned, at all times, and that we can all work on them simultaneously."

Similarly, Google Calendar, with its shared, colour-coded calendar features, can be useful for project management. With Gmail integration, you can directly add appointments to Calendar from email or receive reminders or alerts in your inbox.

And while we're on the theme of collaboration, Google Wave may not be as popular as Google expected, but it does provide an ideal forum for real-time collaboration, with tools for chat, thread creation, posting images and documents and the all-important whiteboard.

Did you even realise Google had so many diverse projects on the go? From complex, near-clandestine efforts like Google's programming language Go to well-known consumer tools like YouTube, there's one thing that effectively unites them all; imaginative web developers and designers can harness the power of these free-to-use tools to make great websites.