Nowadays more browsing is done on mobile devices than on regular desktops or laptops, this has been the case for the last couple of years since the ubiquity of mobile devices went rocketing into the stratosphere and it still doesn't show signs of slowing any time soon.

These days if you want to succeed in an online business with a shop front you need not only a mobile friendly website but a mobile optimised website. What do I mean by mobile optimised I hear you ask?

This phrase can mean different things to different people. To some it might mean a website that is heavily optimised to be aesthetically pleasing on mobile devices, to others it might be a trimmed version of the full website designed specifically for smaller devices. For nodex it means a few things:

1. A great looking website across ALL devices
2. Limited functionality impact when scaling up and down through device resolutions
3. Optimised markup, Javascript, CSS as to not impact the lesser resources of mobile devices compared to their desktop counterparts.
4. HiDPi/Hi resolution images sometimes known as retina ready images that make products, advertising and decorations look impressive.

A great looking website

For me personally when I visit a website I really take note of the effort that has gone into the design and development of the experience, perhaps this is the developer in me but this goes a long way into whether I make a purchase on the site. An example of this might be that if I go to a website and it doesn't look or feel secure (you know the ones) then I am very likely to leave and go elsewhere, this is often compounded by bad design choices because to me if a company cannot be bothered to make an effort with their own website then they probably don't care about me or my business in a way that gives me any confidence in their brand, company or ability to fulfil my order and treat me properly as a customer. Ask yourself the question that if you had two websites, one that looked amazing, worked across devices, felt secure and one that did not, which one are you more likely to use? We have done surveys on this and the results speak for themselves, mostly this is an unconscious decision that our brain makes for us but this is what it boils down to is does the site feel right or wrong.

Limited functionality impact

A tricky one to get right. As screen sizes scale down the screen real estate (what screen is available) becomes less and less, this often means that certain functionality is dropped and other functions prioritised. I've seen mixed results with this - i.e. where mobile friendliness was an afterthought that was tagged on at the end when the designer realised it was a problem! To overcome this major problem heavy testing and years of experience come into play I/e knowing what does and doesn't work as resolutions change, what is and isn't needed immediate functionality and also link / button sizes after all our users will be using fingers and thumbs and not a mouse pointer!

Optimised markup, javascript, CSS

A very often overlooked part of a great mobile experience is optimised markup, javascript and CSS. Starting with markup, it is detrimental to the performance of a website to have lots and lots of elements, certainly lots of nested elements, this is due to the rendering engine of the device having to resolve all children, parents, siblings and so on in the DOM tree to perform a render, this process is both CPU and RAM intensive and mobile devices tend to have less powerful and less RAM than their desktop counterparts making the process slower.

Optimising javascript seems a silly task as surely all developers write the most efficient methods that they can right? WRONG! Quite often developers are on a tight deadline and rush through projects, choosing to use third party scripts and libraries that were not intended for the task at hand and thus are NOT optimised for the task at hand.

Much like the rendering engine must resolve all DOM nodes to render a page, the javascript engine must download, parse and evaluate the scripts on a page, again this process takes both CPU and RAM resources so it stands to reason that the smaller or more optimised the code then the less resources it takes. Quite often inexperienced developers don't take this into account, or they're simply following another inexperienced developers method they found on stackoverflow or something!

Optimising CSS. I am not going to delve into the reasons why this is a must as it would require a whole other post but suffice it to say that optimised CSS is required for a great mobile experience. It seems silly, and, I see it on a daily basis that developers (us included sometimes) write CSS directives for ease of use and not computation. What allows nodex to do this with little impact is all the other optimisations we enforce when designing and building websites which keeps them loading in the top 1-5% of the world, but I digress...

As an avid programmer and streamer I watch a lot of other developers and designers building systems and it's baffling how few of them know how CSS is rendered. I remember a discussion with someone once who supposedly had around 8 years experience as a front end developer and he was trying to tell me that CSS is not read bottom to top and right to left, he was adamant that long, nested CSS selectors were as performant as was possible, even after explaining with overwhelming documentation and evidence the developer would not listen to reason. Why am I telling you this? Well it's simple really, this developer was not an edge case he was part of the norm which is one of a mix of arrogance and ignorance. Now don't get me wrong arrogance is fine if you have something to back it up with but when your back up to it is because I said so then only ONE person suffers and it's usually the end user such as you or I. The moral of that little tidbit is to make sure your developer knows what they are doing!

HiDPi / Retina images

Having your images look crisp on mobile devices is more often than not overlooked on websites. I've lost track of how many websites I visit on my iPhone where the images are blurred, pixilated or otherwise BAD! In this day and age there really is no excuse for bad imagery, even our smartphones are equipped with exceptional cameras. Loading hi resolution images on a website is extremely trivial these days, often requires no extra latency on the initial page load and certainly makes the page more appealing and look a hell of a lot better

Comments are disabled