We’ve all encountered this problem – you checked out a website and found it very helpful, it would be really useful to click on that site now, but you’re out and about and only have a mobile device with you. Of course, you can still access the web, and that particular site, but it will only give you the mobile version; unfortunately, the mobile version just does not work as well. So far, developers have struggled to merge the gap between the online experience and the mobile version.

Well, fear not! The frustration may be over. The latest smartphones are so much more powerful that developers are now able to build far superior apps; some of these are so good it is not possible to differentiate between the two. Here are five examples:

Web-based Calendars

These have never been easy to merge with a website, the calendar on a mobile website is bound to look and function badly; this is the reason why you normally just see a list of relevant dates. With the aid of JavaScript and carousels, it is now possible to make a perfectly acceptable and useable calendar on a mobile.

Dynamic Content in Off-Canvas Flyouts

The Off-Canvas Flyout is the area of the screen that cannot be seen until you click the tab. On mobile sites they tend to hide menus and other static content, not being very effective at hiding dynamic content. As this has become the primary way of navigating these pages, it is important to be able to show both static and dynamic content. On Style.com for example, the primary navigation is on the left, there is then a secondary flyout on the right displaying the users history – especially important for those who want to review their favorite content without browsing the site again. This is achieved by merging two systems – a local storage solution paired with an in-house developed off-canvas library.

Pinch to Zoom

We’re all familiar with pinch the screen to zoom into the detail of what we’re looking at; we are also aware that on mobile browsers this tends to be a less than satisfying result. This is because, in the main, the zoom is operating on the entire screen; the closer you get to the picture the worse the focus – but, by making each picture its own container, it is possible to zoom into just that part of the screen and achieve far better clarity.

Unfortunately, due to the processing power this requires, it is currently only available on smartphones with Retina iOS. To ensure users of other phones still receive the same experience they are used to, the developers have used pixel density to estimate the power of a device and adjust this feature accordingly.

Huge Image Carousels

Large carousels don’t work on mobile sites as they require a large amount of processing power and have navigation issues. Devices are just not powerful enough to render many objects, instead they just crash. It is all down to the size of each slide. Navigation is also a serious issue; if you have a huge row of slides you cannot easily see what is available, in a simple but clever move. Style.com for example, uses the HTML carousel to create a grid view, creating a far better experience for the mobile customer.

Alphabetical Lists

Long lists, such as music artists, are often the easiest to scroll through if they are alphabetized. Unfortunately this does not normally work as well on a mobile site as for the standard online page, this problem has been resolved by; again, using a double carousel, but this time, it is also paired with a container to make sure it does not affect the other information on the page.

This is the guest post by Fredrick Cameron and Dirt Bike Games 365!