The way we browse the Web has changed. People no longer only use desktops or laptop computers: they consume the Web through a multitude of mobile devices, sporting all kinds of screen shapes and resolutions.

The traditional fixed-width layout doesn't really cut it anymore. People expect to be able to view sites on their phones just like they do on their desktop computer. Sites need to adapt to these different browsers and screen resolutions. But what's the right way to do it?

The common response has been for sites to provide a mobile version as a nice little "extra". That's good, but it doesn't always mean the site will display nicely on an iPad or non-iOS mobile devices. This also often means developers will have to maintain two distinct websites, with their own sets of content.

Unfortunately, this doesn't scale well, and it restricts access to the content to only a few selected devices.

The better way to do it is with what we call Responsive Web Design.

The idea behind Responsive Web Design is that the websites' layout and design should adapt to fit any device that chooses to display it.

As Ethan Marcotte explains, "Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them."

This is why last week, codegent released a revamped, responsive and mobile-friendly website for our Learn Apps. The site is still a work in progress (there's a few things that need to be ironed out), but we think it's good enough to take a little tour today!

Learn Apps homepage as seen on a desktop browser

The homepage adapting to smaller resolutions

Here's the effect in video

The Learn Thai page adapting to various resolutions

Some small details that make the difference:

• One website "code", working on a wide range of desktop as well as mobile browsers (including Safari Mobile, Firefox Mobile, Opera Mobile and Opera Mini)
• The header "Our Apps" dropdown is automatically replaced by a Select dropdown for ease of use on mobile devices (ie. works with touch screens devices as well as non-touch screens devices).
• The iPhone and iPod will see an iPhone 4 capture of the apps, while Android handsets should see captures from a Nexus S
• The Contact form uses the JavaScript library called "Chosen" to make it easier for users to find and select apps/devices, by replacing the default Select dropdown with a custom dropdown with auto-complete search (on desktop browsers)

We invite you to go through the website yourself: www.codegent.com/learnapps and have a play!

We are quite pleased with the results so far, and are thrilled to offer more "responsiveness" in future projects! Let us know what you think in the comments.

People are buying Apps for phones, tablets and computers all over the world. There is big money in it and it is not just going to Apple. For example, Gartner predicts that by 2015 Android will account for 49% of smartphones.

The best way to source Apps is through App Stores. Apple, Google, Nokia, Blackberry and even Amazon have them, plus there are many spin offs proliferating the web.

App Stores provide a consolidated location for developers to upload their products and gain instant visibility and traffic from millions of users. However, these stores are quickly getting crowded and competition is intensifying as we strive to build awareness and recognition. Step forward App Store Optimization (ASO).

Optimizing for App Stores

The App Store search algorithm works quite differently to Google. Relevance is driven by downloads, ratings and keywords so, once optimised, popularity is very important. As free apps are downloaded far more than paid ones it supports the theory that a free or “lite” version is advisable. This, in turn, promotes your paid-for upgrade. It’s no coincidence that the same app will often occupy the top spot on both the free and paid charts.

Unlike traditional search engines App Store rankings are not built up over time. Baptiste Benezet of faberNovel came to the conclusion that "The formula for App rankings only accounts for your last 4 days of sales." The formula is 8 times the sales of the current day + 5 times the sales on the 2 proceeding days + 2 times the sales on initial date.

Source: ReadWriteWeb

It would seem that short, sharp campaign bursts are the best way to achieve high rankings, break into the category charts and great a self-perpetuating cycle of high download figures.

However more recently Google and now Apple are including user activity as a factor. Daily or Monthly Active Users are logged and those Apps that are used more frequently will also rank highly. The Android Marketplace takes note of the percentage of users that keep the app installed on their device as space is generally more of a premium with users removing Apps that don’t cut it far more frequently than those using Apple devices.

The Apple App Store search is exact-match only. Your app will only show up if there is an exact match against the app or company name or keywords you have specified. Apple does NOT search against your description, which means that text should be purely around convincing the user reading it to hit install/buy. However, the iTunes Web Preview page is often indexed high on traditional search engines and the first three lines of your description can be indexed so it is still worth optimising the start of your description text. Other App Stores such as Android Marketplace do include description in their search criteria though.

Keyword optimisation is therefore pretty crucial. You should follow similar techniques to standard SEO. Prioritise the words and try and think of what keywords or phrases a user would think of to find your type of app. This could also include popular competitors or major platforms you have integrated with, as their names are popular search terms. A word of warning though. You do risk being rejected by Apple if you blatantly hang on the coat tails of a competitor so you try and be a bit subtle.

That brings us onto the name. Unfortunately a buzzy sounding app name will rank poorly against a does-what-it-says-on-the-tin title. You should also consider starting with a number or early letter in the alphabet for when the user orders their result by name. Including popular search words such as “fun”, “easy”, “exciting” and “free” would do you no harm either.

For example on our new Learn Chinese App we have used the title "Learn Chinese Lite - Mandarin Phrasebook for Travel in China" to capture as much keyword traffic as we can. We have substituted "Lite" with "Pro" for the paid version and also linked to it heavily in the free app to prompt upgrades.

Design & Build

The icon that represents your App is hugely important. It should be eye catching and well designed to give a solid first impression and communicate that this wasn’t cobbled together by a talentless nerd playing with a bit of code. Check out this superb guide on good app icon design.

Whilst your icon design might gain you a view, your screenshots are likely to tip the balance. They should be well chosen examples that flatter the app, demonstrate it’s usefulness and grab the user’s attention. 

Additionally the filesize of your app can affect its popularity. An app under 10MB in size can be downloaded over a 3G network whereas anything over that requires a wifi connection or it has to be downloaded via a computer associated to the device. If you can’t access the app the moment you find it, you may never come back.

Building Downloads

A well-optimised app will still not rank well until it proves to be popular. In order to maximise your potential download figures you should get listed in app directories.

Reaching out to bloggers can be very powerful. We noticed this after we launched Learn Thai and it was picked up by a prominent blog within a few days, skyrocketing downloads. Don’t be afraid to contact bloggers, they need fresh content to write about! Just keep it short, friendly and relevant.

Be social! It is easy to integrate Twitter or facebook connect into the app and encourage users to share their scores, activities or even that they like the app on those platforms with their own audience.

It is also worthwhile asking your more active users to rate the app. If a user has had the app for a while and has used it quite frequently it is worth popping up a simple message asking for a rating or review. If this is done in an unobtrusive manner it should not harm your app at all.

There is quite a lot of information to take in there but I hope I have communicated just how vital it is to plan, research and test your search and marketing tactics to avoid your masterpiece lying unused in the murky vaults of an App Store server.

How do you make money from mobile apps? With all the hype that has surrounded Smart Phone Apps in the last few years it all seems so simple. Design and build a killer app, release it to the various market places and then sit back and watch the money roll in. For some lucky punters this has been the case but the psychology and tactics for successfully making money through apps is nuanced with a few key factors to consider.

Straight Purchase

I won't linger too long on this as it is a pretty simple concept to grasp. Build an app people want, then sell it to them. A word of warning though. Unless your app generates a lot of marketing hype, favourable blog or in-store reviews or charts on the best selling lists for your category then be prepared for fairly barren sales, especially if this app is not an extension to an already established brand. Mobile users do not speculatively part with their cash unless there is some sort of validation that this is the app they are after, normally from ratings from other users. So in order to make money you better be prepared to spend some on advertising and promotion.

Additionally as competition intensifies between app developers a price war has also begun and the Average Sales Price (ASP) of apps has been steadily decreasing over time. Nobody wins in a race to the bottom though so what other options are there?

Make it free?

It does seem counter intuitive to put all of that effort and budget into a mobile app to then just give it away for free, however there are still some benefits to doing this. Apps are frequently bolt ons to existing web services that make it easier for mobile users to access and consume. There is a school of thought that people will start to access the web purely through apps rather than directly through the browser as the quantity of content and noise proliferates users will want some form of filter to it all. There are more than 200 million (of the 600 million total) active users accessing facebook through mobile devices and those that use facebook on their mobile are twice as active as non-mobile users.

So a mobile app is a natural addition to your existing web presence if you want to keep your user base engaged and active. Unsurprisingly free apps also get downloaded a lot more than paid ones, especially on the Android platform so you could also consider this an exercise in brand building as well as facilitating user consumption.

Ad Supported

Including adverts in your app seems like a pretty simple revenue model. There are established Ad platforms such as AdMob (owned by Google), iAd (Apple's own advertising platform) and InMobi which dominates the Asia-Pacific market. However the revenue cuts are not great and in order to really sustain a decent income you need to have a lot of active users for your app. There is no real harm in supporting your free app with Ads aside from a bit of user distraction and the fact they may well click off your App completely if lured in by the marketing (although iAd has the benefit of being completely in app). You could also consider offering a premium service that removes the Ads which your most engaged users will want to take up.

In-app Billing

In-app billing has long been lauded as the answer to the free versus paid debate. Essentially the download of the app is free (which helps maximises the potential user base) and then the app either becomes chargeable for certain features or content. This way users get to try the app out without cost and if they like it can pay for more. It is essential to provide just enough functionality in the demo version to entice the user to try it and then advertise just how much more the user will get when they upgrade to the full version.

Sounds great! But take up of this option has been very slow so far. Bango reported that a mere 5% of the sales it facilitated in 2010 used this method however they also forecast that by the end of 2011 In-app billing will account for 30% of mobile payments as technical limitations that have encumbered developers are gradually resolved.

In-app purchase falls broadly into two camps:

1. Unlocking content and features in the classic upgrade model from a light version.
2. Building in micro transactions to buy things like digital goods in a game. For example a new bird charcater in Angry Birds or a facebook badge.

Subscription (The Holy Grail)

Marketers often cite subscribed users as the most attractive as income is predictable and regular (although naturally there is attrition). Each user that comes on board adds to the bottom line created by the previous. The sales cycle is gradually upward rather than peaking and troughing.

Not all apps can warrant a subscription model but if your app provides an ongoing level of service or is a source of valuable fresh content then it should be on your radar. I have heard anecdotally that users are also more open to it rather than a high one off purchase as they feel they can leave at any time and might not spend as much even though they normally end up spending more.

In February Apple and Google raised the stakes by announcing two different “one-click subscription models”, with the key difference being the amount each party will get for each subscription sold. Apple will get 30% for each subscription sold. By contrast, Google's “One Pass” system is a flat 10% charge (i.e., the publisher keeps 90%).

Previously subscriptions were handled externally to the app through a web interface but the ability to do this easily in-app is potentially huge. However the heavy cut that Apple have demanded has prompted a lot of unrest as the 30% cut eclipses many profit margins and Apple have said that there cannot be any "Apple Tax" (where users subscribing through their platform get charged more than anywhere else). This effectively stifles the competition unless there is a complete withdrawal from the App Store. Additionally the subscribing user's data is not released back to the publisher in the same way it would had they signed up direct. That argument needs more time to full play out.

Despite the negative issues Apple now offers an operating system that controls over 100 million high-value consumer accounts all connected to credit cards. Google and Microsoft are also both investing enormous resources in this area as well and are showing more willingness to be flexible to both publishers and advertisers.

The only downside is that users are only happy to manage around 6 subscriptions at any one time so get in quick before the gold rush!

Either way now might be the time to start thinking of your future app business model.

Shock horror Flash doesn't work on the iPhone or the "magical" iPad. Steve Jobs has declared its death, and decreed that it's not worthy of inclusion in Apple's market leading mobile platform. Dropping Flash in favour of HTML5 is akin to replacing floppy drives with CD-ROMS we are told. You don't need it, you will be better off without it, it's time to stop living in the past and embrace the future. Naturally Adobe (the makers of Flash) aren't too happy about having the door slammed in their face. Adobe tried launching a campaign online but were forced to accept they have lost the battle. However the war is only just heating up; Google's latest phones support both HTML5 & Flash.

The controversy has been fodder for bloggers, sparked flame wars between fans, and led to an awful lot of FUD (fear uncertainly and doubt) being spread online. This puts many of us in the industry in an odd position. For years Apple and Adobe have been the pillars of the creative industries. As developers and designers we have a love hate relationship with both companies. Designers need photoshop to get their work done, yet vent about it online. Developers love apple hardware, but have a hard time accepting the App Store's restrictions on how they can write their apps.

Which side are you on?
Despite what you read online I don't see a major split in the web community between HTML5 and Flash or between iPhone and Android for that matter. On the contrary, I see lots of overlap. In our industry it pays to have multiple disciplines. Lots of the popular games for the iPhone are written by people who are also Flash game developers. The people doing the cool 3D demos in HTML5 are often the same people who pioneered 3D in Flash. Those of us working on the cutting edge do not erect walls between technologies, we tear them down.

Flash has a long history of bringing innovations to the browser: animation, fonts, audio, video, 3D, and networking to name just a few. Recently we have noted interest and momentum building behind HTML5. It's about time browsers had native support for many of the things Flash has supported for years. The 4 "modern" browsers (Chrome, Safari, Opera, Firefox) are competing against each almost daily to take the crown as being the fastest, and most feature complete implementation. Competition is a good thing, after years of stagnation it's an exciting time to be working in the web. If you are stuck using a "legacy" browser (hint: the one with a blue e) do us all a favour and upgrade today, I promise you won't regret it.

Unfortunately outside of cutting edge Mobile web it's hard to fully utilise all the advances offered by these "modern" browsers. The elephant in the room remains every web developers pet hate; Internet Explorer with it's stubborn 50% market share. Even if Microsoft were to support full HTML5 and CSS3 in IE9 (unlikely), we won't see IE7 and IE8 disappear for years to come. Many sites are only just getting around to phasing out IE6. The key strength of Flash has always been that it's cross browser; unencumbered by the incompatibles and quirks that have plagued browsers. With penetration rates hovering close to 100% and a fast upgrade cycle driven by automatic updates it's no wonder Flash has become the de-facto standard for delivering video and rich experiences online.

So where does this leave HTML5 and CSS3?
Some features lend themselves to progressive enhancement, enabling HTML5 drag and drop file uploads or offline storage for those with capable browsers is an easy win. Using the latest CSS3 properties to render nice UIs while still degrading gracefully to support IE can be tricky, but is doable. It doesn't have to be pixel perfect, it just needs to work in older browsers. This leaves those features that you can't degrade gracefully without falling back to an alternative such as Flash. This category includes the much hyped video tag and canvas element.

Video support in HTML5 is still a bit of a minefield, there are 3 different codecs (H264, WebM, and Vorbis) that may or may not work in your browser, some with critical hardware acceleration, others lacking. In order to provide the best experience on the web and mobile you need to encode and deliver the video in multiple formats as well as providing a Flash version for those without HTML5. There are other rough edges too, such as fullscreen support; which depending your browser works differently or may not be supported at all. My advice to clients is to do what YouTube is doing and give users the choice to pick what works best for them.

This brings me to canvas element, a resolution-dependent bitmap canvas, used for rendering graphs, game graphics, or other visual images on the fly. Many of the demos show it being used for amazing Flash like experiences. Unfortunately there are problems here too. when you do a lot of animation and graphics processing you are going to burn CPU. Lots of it. Technology can always be abused at the expense of your CPU, those annoying battery draining banner ads can be rendered using canvas on the iPhone too. Recently Flash player added code to throttle down processing on browser tabs that are not active. I expect a similar feature will have to be added to browsers to control canvas abuse. Then there is the legitimate concern of accessibility, while it can be a challenge to create truly accessible Flash, it is at least possible.

In conclusion
Despite all the challenges I think it's our duty to push for the adoption of the latest web standards. While I may not agree with Steve Jobs reasons for banning Flash from iOS, I'm grateful that the controversy has put the spotlight on HTML5. I take issue with the assertion that Flash is a dead technology, on the contrary I see Adobe continuing to innovate and evolve Flash for many years to come. When noise generated by all the bloggers and fanboys has died down, it will be left to us humble web designers and developers to make all these technologies work for users.

In the past few years, one of the biggest areas of change for the Web has been the amount of Internet users who are accessing websites via their mobile devices. You are probably aware of the facts: today, 71% of smartphone owners are browsing the Internet (88% of iPhone users do, 92% for Android). And this trend isn't going to stop: 4 billion mobile subscribers worldwide are expected by the end of 2010(1).

However, accessing Web content on a mobile device is still a rather inconsistent experience. Dozens of mobile browsers exist, each with different rendering capabilities. Designing and building mobile sites brings some unique situations and challenges. For web developers, optimising websites for mobile browsers is often a painful and difficult process.

But things are changing: the latest mobile browsers, available on the iDevices (iPhone, iPod, iPad) and Android phones (Nexus One, Motorola Droid) are game changing, offering a much superior browsing experience to their users. Amazing results can be achieved, as web developers are now able to make use of the latest web technologies, even on mobile devices.

It comes as no surprise that the US mobile browser usage is now dominated by the iPhone, with 64%(2), and Android, which comes second at 19%. Both Apple and Google are pushing mobile browsing, and empower their users with tools far ahead of the competition.

But whether or not you decide to focus your mobile strategy on the iDevices and Android specifically, here are a few things to consider when going mobile:

Simplify
The key to a successful mobile site is simplification: simpler navigation, fewer options (especially in web apps), a reduced amount of text, and possibly fewer images. While webpages made for the desktop often get crowded (banners/ads, huge blocks of text, countless buttons and links etc.), mobile websites have to remain simple. What is important on the page has to be kept, but the rest should be cut out. Less is definitely more on mobile. With fewer (carefully selected) options available to the mobile user, the site gains usability and the viewer is likely to continue browsing your site.

Think lightweight
Because of the limited bandwidth on mobile devices, as well as the inherent hardware limitations, an important focus has to be put on optimisation (load speed, image compression). Your visitors using mobile devices do not need high definition pictures, neither do they need ambient sounds or music. Pages have to be leaner, so users are spared excessive bandwidth costs and enjoy a faster browsing experience.

Prioritise content
What is crucial in your mobile strategy is to put "function before form" and present users with a customised experience, relevant to mobility. Your mobile site has to be contextually relevant to your users, and first address how content is consumed. If you are an online reseller, you might want to put the search bar at the top of your page and a quick way to find a local store (which are the most likely actions users will need on mobile); if you're a small business with an online presence, you would probably need quick access to your phone number (e.g. a "Call us" button) and address (e.g. "here's our address, view it on a map"). The logic is that your viewers who are accessing the website are on the go and probably have something very specific in mind!

Do not neglect the Mobile Web
Having a mobile website doesn't mean removing images from your website. It deserves it's own strategy and requires dedicated development. As the number of users browsing the Web from mobile devices continues to rise, you cannot miss the opportunity to shine!

References

1. Mobile Subscribers to Reach 2.6B This Year
   
2. Net Applications, February 2010

It is with interest which we have been watching Google’s Android Application competition. This is the $10m competition to develop applications for Google’s Android mobile platform. The 50 semi-finalists were announced today, and although a lot of the applications are shrouded in secrecy, a strong theme seems to be developing. The majority of applications seem to be based around Social Location tools, or Security applications.

For more about the semi finalists information have a look at this site.

Most of the industry are predicting a breakout year for the mobile web in 2008.

For a long time, the mobile web has been unpredictable, costly and low on user take-up. The majority of campaigns I have previously worked on with any serious mobile element have just scraped the surface, tapping into popular SMS and MMS services.

So what is encouraging us to use our mobiles online?

Apple's iPhone, released in late 2007, has made mobiles very sexy again.

If you haven't heard of it (welcome back to Earth, the wall is down and the cold war is over) the iPhone is a revolutionary device that unites your calls, contacts, email, music, camera, web browser etc in a dynamic, touch-screen, curvy-edged box.... and regular people are using it in droves!

For many reasons it would be wrong to confuse the iPhone with most mobile devices, especially if you are considering building a mobile site, but it has finally united the idea of phone and web working together properly.

It's not just the technology that has pushed us. Major websites, search engines and social networks such as YouTube, Flickr and Facebook have placed mobile services at their core, tempting unsuspecting users into an ever-connected virtual world.

Location Based Services

We have been using Google Maps and Sat-Navs for a while. It makes perfect sense to be applying all this thinking to your mobile. Needless to say the iPhone already does a lot but what about the rest?

In 2007 Nokia acquired a mobile advertising firm and a leading navigation system company. It isn't hard to see where they see things going. The benefit to marketers is easily delivered, relevant, geographically contextual content to end users.

Open Platforms for Applications

It's not all about browsing! 2007 really brought home the possibility of the web app, widget, mashup etc. Vista followed the Mac's lead and introduced desktop feeds for your local weather, football scores, status updates (the list goes on forever) and we all became RSS junkies. Adobe launched AIR and iGoogle followed suit so even your default homepage can tell you everything about anything you want.

But what about the mobile phone? Geeks have been hacking the operating systems on their phones for years but there have been no open standards available for developers to really use the core features of a physical handset. Until now!

The Open Handset Alliance Project launched Android, an open, free mobile platform which is being supported by some heavy companies such as Google, Motorola, LG, Samsung and T-Mobile to name a few. Expect that to be supported as standard in most future handsets.

Apple decided to open up the iPhone Developer SDK last week so we can look to develop intelligent bespoke apps that can fully interact with the handset soon!

Mobile Web Standards

There has been a degree of convergence in web standards for mobile. XHTML-MP has become the default industry-supported language for the mobile web. Page load and the multitude of various screen sizes still need to be taken into account when designing but at least the code is behaving itself!

Codegent Mobile

So we thought after all that talking we should show you something. We have built a simple version of our own site for your viewing pleasure.
www.codegent.com/mobile/

Or you can navigate to it using your mobile barcode scanner on the funky looking graphic below. You will see these dotted around everywhere soon. The Japanese have been using them on outdoor advertising, business cards, print ads etc. for years. But don't feel too left behind, they also have robotic dogs that clean their flats whilst they micro-sleep :)

Geek out.