A recent report on eConsultancy has indicated that the adoption of mobile commerce (mCommerce) is due to finally become a main stream channel rather than the just another toy for aficionados. This is in thanks, largely, to the increased saturation of tablets within the personal computing market. [More]

Once again, the increasing trend of online consumer retail has grown year on year with Boxing Day 2012 breaking all records for eCommerce retail. Early figures suggest that a collective 14million hours were spent by users trawling through online stores, generating somewhere in the region of 113million visits to online shops, thus ensuring that 26/12/12 became the UK’s biggest day for internet shopping. [More]

Now the site is underway, I’m encountering visual problems that need to be addressed.  In particular, I’m noticing the image quality of the product images.  On the live site we optimise the images to best suit not only the space it has to fit in but also, mostly without thinking, the DPI / PPI is set to be 72, as 99% of desktop monitors are set like this.  However modern mobile devices have a much higher PPI to screen size ratio and so normal web images now look pixelated.  As I am creating the mobile version of the site from the same code base as the desktop one, and keeping clarity in mind, I have to resort to using a larger size image which will then be reduced down to the correct size for the different formats.   Also try where possible, to include images as CSS backgrounds as it will make it easier to modify them to look better on mobile devices. General rule of thumb on mobile websites is to use a larger image and re-size it down in order to keep the quality as crisp as possible.  This is even more evident on the new higher res phones.  It’s also handy to follow the Apple style guides when it comes to hi-res images as they make sense. Apple suggest creating an image, 1.75x to 2x the size of the standard image and then naming it with the ending of @2x. Example:I created a logo for a site and set it as a background image with its container being the correct height and width; {background:url(‘assets/harrisonslogo@2x.png’) no-repeat 0 0;width:135px;height:40px;display:block;} Now, as the image is up to twice the original size, we need to reduce it down by using a bit more of CSS3.  This time it’s the ‘background-size’.  As the name suggests it will reduce the background image size either by pixel of percentage.  The easiest thing I found was to set the width to be auto and the height to be 100%, making the image fit correctly within the container; {background:url(‘assets/harrisonslogo@2x.png’) no-repeat 0 0;width:135px;height:40px;display:block;background-size:auto 100%;} You can also add in a small script called retina.js.  This, once included onto the page, will look at the images on the page, and if the site is being viewed on a retina screen, it will go and seek out an image with the ending of ‘@2x’ within the same folder as the standard image, and swap the low-res one out for this version.  Very handy if you want to make carousel banners look crystal clear!

Recently we have been asked a lot of questions about developing mobile friendly versions of our customers websites including questions about best practise. Effectively there are four ways that we have been looking at developing a mobile presence for clients. Cross Browser Testing As per any standard website implementation, and the cheapest way of manipulating your website for mobile is to cross browser test. Cross browser testing will allow the mobile browsers to render the website in the same way as the site looks on desktop. Usability & Practicality Rating 7/10 Media Query A nice alternative to mobile friendly design/browsing is the use of CSS Media Queries to re-render the existing page information to a style that fits the mobile browser’s window. This practise allows designers to resize images, and alternate layouts depending on the user’s window size. The website still resides on the same domain, but recognises the device to render the site accordingly. The media query process requires some additional design time from the start but is a very effective way to create an enhanced user experience on mobiles. Usability & Practicality Rating 9/10 Develop on Sub-domains An alternative to re-rendering a website on the existing domain is to create a standalone mobile version which resides on a sub-domain of the main website, for example m.yourwebsite.com. Whilst there are page speed benefits in developing a site this way (i.e. you are not carrying the weight of the main site behind you), there are also some negative aspects in terms of duplicate content which must be considered as well. You don’t want to be taking any form of search related traffic away from the main site, therefore cross domain canonical tags must be added on the mobile version of the site. Usability & Practicality Rating 6/10 App Development If you have got enough repeat custom then another alternative could well be to look at developing an app to run in tandem with the website. Apps are great for easy browsing and repeat custom, along with brand building. Depending on which platform you use, it is likely that products may reside within two databases, one for your ERP and one for the mCommerce. We are currently in the process of developing a mCommerce platform. For further information on the platform please email Usability & Practicality Rating 8/10