Somewhere between 65% to 70% of visitors to your site are using a mobile phone. Needless to say, this makes mobile functionality one of the most important factors to consider during the build of your site.
For older sites, it isn’t uncommon for businesses to attempt to shoehorn mobile functionality in — as an easy way to capture this audience. This is often done by adding new CSS (styling) rules based on the display device. Unfortunately, this is rarely enough to make for a fully-functional and easy-to-use mobile site.
Whether you are creating a new website or updating an existing website, below are some key considerations for creating a mobile website that may be new to you.
Styling & Design
This is the obvious one that I’ve already mentioned and is often the primary consideration for a mobile-friendly website. Ensuring that text is larger for high PPI (pixels per inch) displays, removing or reducing padding and margins, making sure no content is overflowing the page and rearranging ‘blocks’ such as the sidebar and footer to better fit around the content can often be tackled with some CSS.
However, with the mobile interface, there are some other, often neglected, factors worth paying attention to.
Going easy on the thumbs. We’ve all been on those sites where navigation feels like a yoga class for the thumbs. I’m not saying you should measure how long your visitors’ thumbs are, but a good mobile website takes into consideration whether the most used parts of the site are easy to access with the user’s dominant hand.
One example of this is the menus. On a desktop site, the menu is often in the header, at the very top of the page, where it acts as a clear navigation tool. Many sites convert this header menu into a hamburger menu to compact the options on a mobile display. However, if you place the burger menu somewhere that’s quite hard to reach, you’re likely to create a frustrating user journey – and that’s a no-no when it comes to making a sale, right?
Submenus. Submenus are a common feature of desktop sites as they make for clean and elegant designs. However, submenus can be a challenge to implement correctly on mobile as the interface quickly becomes bulky or starts to load parent menu items when being navigated.
Bad design and bad implementation are the plague of good mobile functionality. This is why a quick CSS implementation simply does not make the cut. You need a thoughtful process where what’s important to your business is being considered and displayed wisely.
File Delivery
Let’s have a look at a (very) simplified breakdown of the steps required to view a website.
When you type a web address in, you first connect to a server and tell that server that you are after a page. Perhaps you only have the domain entered, so the server sees that you are after that site, works out what to show you by default and sends you some HTML. This HTML will likely include links to images, CSS and JS files to be downloaded in order to render that page, so when the browser goes through the HTML, each time it sees a reference like this, it will ultimately request each of these resources from the server.
With this in mind, you should be able to see how loading a webpage is more of a conversation in that there are multiple requests and things for the server and browser to ‘work out’ before the page can be completely loaded.
On mobile, due to limitations with processor speed and mobile data connections, this conversation can start to drag on a bit.
Some common ways around such things to better improve this experience on mobile are:
- Optimized image compression, perhaps using the newish .webp format developed by Google where possible, or maybe using vector graphics which can result in sharp-looking images at often very low file sizes.
- Embedded scripts and styling. To completely skip the process to and throwing between the server and the client, the server or site can instead inject JS and CSS into the HTML to be included in the initial response.
- Minification. CSS and JS can be compressed and minified to greatly reduce the amount of data that needs to be downloaded.
- Caching. This process can also feature JS and CSS injection depending on the method used, but caching is the process of having a static copy of a page on the server-side ready to be immediately delivered, completely skipping the page generation/preparation on the server-side.
Compilation
Initially developed by Facebook, React is now an open-source framework for building responsive applications within a page. I bring it up as React is perhaps the most common new framework for website and service development and it is a great library for building interactive sites and Single Page Applications. There are some dangers to this new tech though.
It’s not particularly small. The production version of React comes in the form of a JavaScript file which must be attached to any page of a site that needs to use it. This file is just over 100KB at the moment. On a desktop, we can download and parse this file very quickly, but on a mobile device with a data connection, it takes on average 4 times longer.
Add to this that as soon as this file is downloaded it needs to be ‘parsed’ in order to be used. This is an intensive operation where the browser compiler must go through the script and prepare it for usage by the site.
You can see the implication of this with Google’s own site speed test analysis tool here where even the official React site scored 63% for performance on mobile, whereas the official WordPress website blags an impressive 92% in the same test.
There are also not quite as many existing mature solutions within React, which inevitably leads to extra time spent developing new features or extra time taken in future for fixing bugs not yet discovered. This isn’t a bad thing in itself and is natural for any developing tech, but like anything new, it does introduce the risk of un-optimized code entering a platform which can often lead to slowdown or, even worse, bugs!
I hope this has been helpful and given some insight into some of the basic UX (User eXperience) and technical considerations that actually have a big impact for responsive mobile websites.
At Digitally Tailored, we create sites based on business need, designing a UX around this with as much consideration to mobile and tablet devices as to desktop.
