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.

We’ve all done it - well, those of us who have accounts with affiliate marketing networks. Set up an account, put a few banners on a site, and then get tied down with the next project, forget exactly who we joined/what we linked to and just delete each merchant email as they come flooding through.

But STOP! Take your merchants seriously! You bothered to take the time to set up the site in the first place, so make the most of the offers and promotions offered to you. Admittedly, on a Friday afternoon when you’ve had your 4th AffiliateWindow email from Comet about £10 off a particular washing machine you can start to glaze over and just think it’s too much to keep up with. But from the point of view of your visitor - that might be just what they need! And £10 off just what they need, is worth having!

So take notice of each email and act on at least some of the offers thrown your way. Code your website in such a way that it’s easy for you to add the latest offers - if it’s quick and simple you’re more likely to. Plus
you may want to build a mailing list / newsletter system so you’ve got a base of users to promote your latest deals to. (And of course, if you need a hand with any of this, you know where we are )

This might seem a strange thing to ask considering my previous 2 blog entries, but it’s a view shared by a couple of long standing mobile web entrepreneurs, and highlighted in an article I’ve just read.

Personally I think this is a prime example of link baiting! By stating something controversial to stimulate debate and get your site noticed (It worked!) I don’t believe it for a minute. It also sounds a little like the kind of dot.com crash talk; you can’t make money just from advertising… But that all turned out ok.

It makes for an interesting read though, I wonder what the future holds for the mobile web…

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

I’ve been reading a fair bit lately into what many people suspect will be the ‘next big thing’ on the Internet; the final ‘coming of age’ of the mobile Internet.

There are a lot of people doing a lot of things in the mobile web world, I feel like I’ve barely scratched the surface of a whole new world of innovation, but here are my top finds so far.

www.gypsii.com - A social networking tool which is location based. There’s a neat little introduction video which explains it all.
www.mofuse.com - Create a mobile version of your site.

Here’s one vision that I especially like, entitled The Future of Internet Search: Mobile Version, from the PetitInvention blog.

But you might ask why this has happened before. People have been talking about the mobile web for ages, but it’s not really caught on… There are a few reasons for this, but many people now believe we’re literally standing on the edge of a precipice of a new cultural revolution where access to mobile web technologies and services will literally change the way we live and organise our lives together.

Buy why now?

i) Web developers are finally embracing the use of good, high quality, semantically rich code. CSS layouts are replacing the bloating table based layouts of the late 90’s and early 00’s.

ii) Mobile phone technology is also finally catching up to the demands placed on it by the content. XHTML is becoming more widely supported in place of the older more basic mobile markup languages such as WML. The iphone is the obvious example of how people are starting to realise they will be able to access fully featured websites via their phones.

iii) It might be a small factor, but a new announcement by the European Commission to support in-flight mobile use by harmonizing the technical and licensing requirements.

iv) Mobile Internet companies are starting to offer the consumer a realistically affordable tarrifs for going online.

v) Firefox on your mobile. - Mobile Firefox prototype browser arrives for eager early adopters to play with.

So the infrastructure is there, the technology is there. The software and applications are fastly becoming available. All that remains now is the slow but inevitable adoption of all this by the average joe on their mobile handset.

If anyone would like to show us some examples of their mobile based services and applications we’d love to see them.

That’s where everyone wants their site to be. Some people, incredibly naively, think that as soon as they make a website, their site will magically appear above the millions of other existing pages in the search results. I’ve often heard stories from other developers of clients calling them up in a rage, accusing them of not doing their job properly because their site only appears at number 8, rather than 1 in Google! Completely ignoring the fact that their site is already appearing above millions of other pages and is infact in the top 99.9% of pages on the subject; which is an incredibly impressive feat in itself!

Unfortunately it’s a lack of understanding in this area that can lead to confusion and misunderstandings between client and designer, and ill feeling where there really shouldn’t be any.

So I thought it would be worthwhile outlining a few basic points about ranking in Google.

1. A basic search result page in Google shows 2 kinds of ads:

i) Paid listings - Which anyone can appear in, but you have to pay for each and every visitor you receive.
ii) Organic listings - Which are the pages that Google considers to be the most relevant to your search.

Obviously it’s far better to not pay for visitors to your site, so appearing in the organic results is the primary objective of every website.

What a lot of people don’t realise, is that there’s a HUGE industry based about Search Engine Optimisation or SEO as it’s often known. Getting a number 1 ranking in Google for a term such as ‘mortgages’ for example could be incredibly profitable as your site will receive lots of traffic from people wanting to take out mortgages. You could then send these people on to mortgage providers via their affiliate program and make sometimes more than £100 for each mortgage taken out. If you site is receiving 1000s of visitors each day this could easily make you a millionaire very quickly.

So as you can imagine the most popular search terms are incredibly competitive!

The more niche and small your chosen audience, the more likely you are to appear in the search results. For example if you are a plumber in Bristol you might want to target people searching for “plumbers”, but if you search for “plumbers” you’ll see it results in 18,300,000 web pages on the subject. Now that’s an awful lot of competition! If however you search for “plumbers bristol” you’ll see it returns just 355,000 returns. This might still seem a lot, but your chances of appearing on the first page are considerably better.

Here are my top SEO tips for small businesses.

1. Target your audience and try and think what they will be searching for.

2. Build pages targeted to specific topics.

3. Get as many pages of your website as possible listed in Google. The more pages you have indexed, the more possible entry points there are to your website. Say for example you’ve written a ‘how to’ article about changing lightbulbs and someone somewhere searches for ‘how to change a lightbulb’ you might appear in the search results for that search. Then if the user gets stuck and decides that they need ‘professional’ help, your site is right under their nose. This is obviously a slightly silly example, but I’m sure you get the point.

To see how many pages of your site are included in the Google index just type ’site:www.mysite.com (www)’ in the search box. This will return a list of pages and you can see how many of your pages are included in the index.

4. Don’t try and trick Google. - Some people over optimise their websites and try and trick the search engines into thinking their page is more relevant than it in fact is. This is a very risky business and could see your website dropped from the search engines completely.

5. Finally - Don’t believe anyone who says they can get you to number 1 in Google for any search term you like. Just remember if they were that good why aren’t they a millionaire already.

If you’d like more specific SEO advice, including on-page optimisation tips, help building a sitemap, or anything else there’s a vast array of places online to get help. Sitepoint.com for example is a great site. Or just drop us a line and we’ll do what we can to point you in the right direction. We’re also always happy to swap links with related sites or sites that we just think are cool. So please get in touch or leave us a comment.

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.

Stumbled upon this post on ReadWriteWeb this morning which I found particularly interesting and had me going for a minute! I particularly like the new CPD (cost per Desire) trading model, sounds like they are onto a winner if they manage to get this project up and running!

Anyone else visit http://www.google.co.uk today and think their monitor was being screwwy?

The usually white background was black, with the text in white.

Apparently it was all part of Google’s attempt to raise the UK public’s attention to ‘Earth Hour’ and attempts at conserving engergy usage.

Earth Hour wants people across the globe to turn their lights off between 8pm and 9pm (local time) on Saturday March 29th. Cities all over the world are also holding events to show their commitment to energy conservation. http://www.google.co.uk/intl/en_uk/earthhour/

Google state on the page linked to above, that whilst they’ve ‘turned the lights out’ to raise awareness of the issue, there’s no actually benefit to giving Google a black background generally as contemporary monitors use the same amount of energy regardless of what they display.

And for all your web developers with a great idea that’ll help save the world… Google are taking suggestions for other campaigns to back/promote; just drop them an email.

Check us out on Technorati…

Technorati Profile