So the inevitable has happened - Google have built their first browser, set to take on Microsoft and leave Internet Explorer as a distant memory.News of today’s launch was ‘leaked’ to Google Blog-oscoped (the blog by Philipp Lenssen - which is currently down, probably due to having been visited just a bit over the last 24 hours!) via a 28 page comic book style introduction.

Google say they “hit “send” a bit early” and so have now made the comic available to one and all here.

According to The Times Online, Google Chrome will “feature a new format for tabs, the ability to view web pages as thumbnails and better features on the address bar.”

Well I for one will be having a play shortly, and will let you know my vote…

Update 11.51am Tuesday 2nd September 2008

Phew -  whoever said that comic was 28 pages long was wrong - it’s over 30 and there is some serious stuff in there! Basically Google have completely rewritten web browsers as we know them! With each tab having it’s own controls and being quite independent. This gives advantages such as each being able to do it’s own thing at one, and if one crashes the others aren’t effected. They’ve also worked on V8 - to enable fast and efficient use of Javascript in web based applications.

Anywho - Google Chrome is going to be made available any minute now… or at any point during today anyway… just watch this space…

Wednesday 3rd Septemner 2008

Well I waited and waited yesterday until I had to go out - but I now this morning have Google Chrome running on my pc. And so far so good!It’s identifying my most commonly visited pages so that when I open a new tab I can just pick one of them if I wish. I can even slide each tab around to reorder them if I want. One of Google’s major claims is that the browser makes much better use of available memory - so time will tell on that one.

News reports (on TV last night and across the web) are saying this is Google challenging Microsoft. I think it’s more likely to be a challenge to Firefox - which is a shame, seeings they’ve worked well together for a while now (and I can already see Firefox 3 features in Chrome). I recently got a new PC (and am not finding vista as bad as I thought I might!) and it came with Google Desktop installed. So are Microsoft going to keep that allegiance with Google now? Apparently Google were always worried that Microsoft might bring out their own search engine and drive their users straight to it through IE and away from Google.

Whilst Jo Public seem to have an amazing dependence on Google (I am shocked by the amount of web users who believe the Google search box is the only way to access any website), they are also scared of ‘downloading’ anything. Or don’t see a change as necessary. We can see this from the number of existing IE6 users. I’ve got a laptop with IE6 on it that we keep for testing - but even I have to be careful not to accept the IE7 update that Microsoft keep offering. And yet, somehow, so many people do still resist it! So I’m really not sure what will win out - the Google brand, or the lazy and cautious public.

Also - does anyone actually  believe that Google ‘accidentally’ sent that email early?! The Google exec on the news last night, sheepishly explaining their school-boy error (”well we are only 10 years old, so we are a school boy”) did little to sway my thoughts about a pr stunt. 

Meanwhile, what will become of Firefox? The developers favourite. Whilst I’m sat here trying out Chrome (and also - I really don’t like the name!) I do feel pangs of guilt about my former favourite shortcut sitting unused on my desktop - my computer’s hardly ever on without Firefox being open. I feel Firefox - perhaps along with Safari a while ago - set the tone that IE wasn’t up to the job in todays world (in many cases). So I hope they continue to prosper and Google doesn’t take their recent world record title (most downloads in one day) away from them too soon!

Bookmarks are very handy for remembering sites you like, but wouldn’t it be really neat to let your users create a proper icon on their desktop that links directly through to your website? Or even a link in the Quick Launch bar right next to the start button. Using Gears this is now totally possible as this tutorial now explains.

I’d be very interested to hear how you get on with this, what you think of Gears - both the idea and the actual reality of what Google has developed, and if you can think of any other alternative approaches for doing the same thing.

We’ve touched on mobile web development in the past couple of posts. It’s an exciting new area which offers a huge potential for growth as more people get online with their mobile phones. Well rather than just talk about it, we thought we’d give it a go, and Pricecheck.at is the result.

Imagine the scenario…

You’re on your way back from work when you happen to walk past a window with a big sign that says, ‘Sale today only! Nintendo Wii Console just £190!’. The shop is closing in 20 minutes so you don’t have chance to get home and check the latest prices available online. Luckily you have an Internet enabled mobile phone, so you quickly call up pricecheck.at, enter ‘Nintendo Wii Console’, and with the single click of a button you get a list of prices for the Nintendo Wii, and where it’s available online. It’s a good job you did too, as it turns out that you can in fact get a brand new console online from game.co.uk for just £179.99.

You are in PC World and you want to buy a brand new digital camera. You’d checked prices on the Internet before you left, but the sales assistant recommends a model you hadn’t considered. You think it seems perfect, but you don’t want to buy it from the first place you find, and would rather check the price available online first. The problem is PC World is about 10 miles from your house, so going home first is a bit of a mission, especially with the price of petrol these days. So you call up pricecheck.at, enter ‘Canon IXUS 75 Digital Camera’ and click ‘Check Price’. You’re then presented with 12 different prices for where the same model is available online. As it happens the price available from PC World is the same as the cheapest price available elsewhere, in this case either Curry’s or Amazon Marketplace, all three offering the camera for £129.99. But had you been in Jessops this service would have been invaluable, as they list the camera for £159. So you would have saved yourself £30 + a lot of trouble finding out.

People have been benefiting from price comparision services on their PC’s for years, with sites such as Kelkoo and Pricerunner becoming incredibly popular, but the Pricecheck.at service packages up all this functionality and makes it available to users on their mobile phones when they are actually out and about shopping in the real world as a last check to do before buying anything in a shop.

Another great example of when the Pricecheck service could really come into it’s own is in the huge market of mobile phones themselves!

A friend of mine just got stung when he mistakenly signed up for an 18 month mobile phone contract which it turned out he didn’t want. Despite taking the phone back to the shop just 3 hours after he bought it, they wouldn’t let him get out of his contract and he was completely committed to paying off the 18 months contract! There is apparently NO cooling off period when buying a mobile phone in store which I was very surprised about… However this makes a service like Pricecheck.at incredibly useful.

A quick search on Pricecheck.at for the ‘Sony ericsson K850i on the O2 Network’ reveals an incredible 163 prices, with mobiles.co.uk being the cheapest at just £15! Now presumably this is a contract arrangement, but still it gives you a good indication of what’s available online, and may just stop you signing up to a cast iron instore contract, when you can get it cheaper online.

These are just a few of the scenarios that sprung to mind, but I’m sure there are plenty of other situations where being able to access a price comparision service, while on the move, could prove to be immensely useful.

Pricecheck.at also offers a mobile friendly web directory, which is a list of sites that are particularly aimed at working well on mobile devices. You’d be surprised how much on the Internet simply isn’t accessible from a mobile device. You can also browse the site for products and prices.

The site is currently just a basic service, but if it proves popular we plan to expand and improve the browsing and shopping service to make it more user friendly and useful for mobile shoppers. It’s a tricky balancing act between attractive design, and accessibility on as wide a range of platforms as possible.

I’d welcome any feedback or comments about the site and the ethos behind it. Also if you have an Internet enabled mobile phone, let me know how Pricecheck.at looks on your phone.

There are a few basic things to consider when building a site that’s mobile friendly. It’s all pretty common sense when you think about it, and infact I’ve found most of these rules simply apply as good ‘general’ rules anyway. I.e. Use of good quality well-formed code, css based design and semantic markup. But there are also a few extra tips you can use to make the user experience that little bit better for the mobile user.

Use the Correct Character Encoding

It’s important to tell your browser what character encoding your content will be in. This appears on the first line of each XHTML Basic page for example
<?xml version=”1.0″ encoding=”UTF-8″ ?>

UTF-8 is a good choice as it includes quite a wide range of characters.
ISO-8859 is another commonly used character set

<?xml version=”1.0″ encoding=”iso-8859-1″?>

You can also include this as a meta tag
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

Doctype

The document type (doctype) tells the browser how the page needs to be rendered, including the rules and how strictly to follow these rules.
Here is an example of a doctype declaration for XHTML Strict
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Use Well-formed Code

All the code your write should be well-formed and valid code. Depending on the rules you choose to follow and how strictly these rules are applied, as defined in your doc type declaration above. XHTML has the following requirements.

• All elements should be closed. I.e. <br /> <p>Blah text</p>
• All elements must be properly nested. I.e. <p><strong>Title</strong></p>
• The alt attribute must be used for all images. I.e. <img src=”blah.jpg” alt=”My Image” />
• Text should appear within a block level element and not directly in the body. I.e. <body><p>My paragraph</p></body>
• Inline elements should always nest with block level elements. Inline elements include the span tag for example, which should therefore be nested within a block level element such as <p> or <div> tags.
• All attributes should appear within double quotes. I.e. <img src=”blah.jpg” alt=”My Image” />
• All elements and attributes should use lowercase. Just keeps things looking neat if nothing else!

Avoid using tables for layout - CSS based design

CSS evangelists have been harking on about this for years now. But when developing for a mobile device, where the page size is all important, makes this even more relevant. Most professional web designers have been coding 100% CSS layouts for a while now, so this shouldn’t come as much of a shock.

Use accesskeys in the Primary Navigation

This is about the first rule which I think most traditional web designers making sites for a computer would perhaps not consider. But using accesskeys could make navigation on a mobile device considerably easier.

<li><a href=”home.html” accesskey=”1″>Home</a></li>

This links the “1″ key on the mobile device to the Home link.

Use Ordered Lists for Navigation

Again something most professional web designers using CSS layouts will be quite confident with.

Link Phone Numbers

One of the benefits of the Mobile Web is that its users primarily view it on their phone, so allowing the user to quickly and easily make phone calls is a pretty cool idea.
<a href=”tel:+12065450210″>+1 206 545-0210</a>
Like any hyperlink, any text could appear between the <a> element to initiate a call. However, the recommendation is to display the phone number.

Caching

“Limited bandwidth and high latency can reduce the usability of Web sites on mobile devices. Using caching information effectively can reduce the need to reload data such as style sheets, images and pages, thus improving performance and reducing cost of use. It can also prevent the reuse of content where this is not appropriate, for example content that is adapted for one device should not be re-used by different devices. Devices and network caches are both affected by caching information.

How to do it:
Set expiry times in a way that is appropriate to your application. Consider using Cache-Control: public to allow sharing of pages between devices, Cache-Control: private to allow re-use but only by the requesting device and Cache-Control: nocache to prevent caching.”
- W3C Mobile Web Initiative

Tab Order

Consider the order of elements on your page by either completely avoiding the tabindex attribute and allowing the browser to determine the logical order of elements, or by specifying the order explicitly. Either way it’s worth checking the page works as expected when tabing through links and other elements.

Labels on Forms

It’s good to use the <label> tag to link labels to form elements. I typically build forms using a definition list, as this represents in my opinion a semantically correct markup for a form which also looks perfectly ok even without any styling at all.

References

Mobile Web Developer’s Guide from dev.mobi

W3C’s Mobile Web Initative

Mobile Web Best Practices 1.0

A websites navigation is one of the most important aspects in it’s design. Making a site easy to navigate and intuitive to the user, while at the same time interesting and original is always something to aspire to. This article by smashing magazine gives a nice little overview of some of the latest trends currently in use and a great showcase for inspiration.

How easy is it to change the entire look of your site? If your site is more than 2 years old and the slightest bit complicated I would imagine it’s pretty tricky…

The days of table based layouts are long behind us. Over the past couple of years we’ve seen a surge in the use of true CSS based layouts which is fantastic news for everyone. It makes designs typically much cleaner, files sizes much smaller and sites faster to load. Best of all, with the style elements of your site clearly separated from the content and stuctural elements you’re able to change the look and feel of your site very quickly and easily.

We’re just putting the finishing touches to a great new artist website CMS (content management system) that lets artists create quick and simple websites to showcase their work. The coolest thing, (apart from the use of the legendary Thickbox to update the pages, and the lovely galleries), is the ease at which the artist can literally switch the entire look of their site if they get bored of it, by logging in and switching the skin.

Check it out http://www.artist-websites.co.uk/designs. I think the daisy one is the coolest!

I love the way Facebook works; there are so many subtly clever gizmos that just make the whole experience that little bit smoother and pleasant. One feature I particularly like is the image grabber. For those that don’t know, if you enter a URL while writing a private message in Facebook, the site cleverly goes off to the URL and grabs all the images it can find for you. You can then select the image you want to include alongside your message. It’s a really sweet use of Ajax; subtle and very effective. This gave me the idea to develop a similar tool for use with our social shopping site. You can see the script in action here. It’s a simplified version of the code in production, but it works ok as a demo. (and please excuse the repeat of this paragraph on the demon page).

I’m always looking for cool new effects to build into our sites. It can be tricky to balance out supporting older browsers and keeping things interesting, not only for our visitors/clients, but also for myself! I’ve been experimenting with a few cool CSS effects and AJAX widgetty things lately, including editinplace functionality and a very cool AJAX image uploading feature, both of which I’m building into our new small business website software. I’m sure I’ll blog about that some time soon, but for now here’s a link to another cool effect I’ve discovered. Infact it isn’t anything particularly new really. The technology has been around for a while! It uses opacity filters to dim out the background of the page, while highlighting the all important popup information in the middle. I’ve not used this before on any sites as yet, but assuming IE6 supports it I have the perfect application for it in a project I’m working on at the moment… Again, more details to follow!

http://dbachrach.com/blog/2006/10/09/a-cool-css-effect-dashboard/

Anyone who has ever made a website, then tried to make it look the same for everyone will have come up against the nightmare that is cross-browser compatibility. Things are no doubt easier than they used to be. Back in the days of ie4/5 and Netscape you practically had to have different versions of your website, or atleast different javascript files. Nowadays the main issues tend to be around CSS and often relate to IE’s inability to abide by the rules. Much of this has been fixed in IE7, infact off the top of my head I can’t think of any issues I’ve personally had with IE7, but unfortunately there are still bazillions of IE6 infected computers which the poor web designer is obliged to support.

In the past I’ve used many a hack to get the job done, but a ‘nicer’ way of doing things is to use conditional comments. Why not take a look for yourself on Bruce’s website.

http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/

User interface design is critically important when designing good and useable websites. It’s often something that’s overlooked or taken for granted by the general public as they use a site, but the basic principles are often applied by designers almost without them realising. Good design more often than not goes hand-in-hand with good user interface design and is a result of creating interfaces which people find intuitive and straight forward to use.

Some basic points to bear in mind when creating a website design:
(more…)