Mobile devices are getting more advanced these days and with the uptake of so called smartphones growing 41% in Europe for the past year [1], a need for a mobile website is getting greater, or at least more advised since these devices are more than capable of providing internet to the mobile user. There are, however, a number of restrictions that a mobile device can provide us. In the post, we will look at some of these issues and take you through some of the things we do to get around these issues.
When designing for a mobile device, there are a few things that you need to remember. Firstly, you are not going to have the same functionality or design ratio as a desktop; therefore, it is important that you think about proportions and how the user is going to see your site on a mobile device. A two or three column layout, which can work well on a desktop, will need to be streamlined to a one column layout for a mobile device. This way, you are giving yourself the full screen available as a content area, making it easier for the user to view all the information on your mobile website.
Keeping your content simple and to the point will mean that a user is more likely to read your content. If you present a long essay on a mobile website, then the user will more likely either ignore it, or it won’t load in the first place because of the slow connection that mobiles have in comparison to that of where a person uses a desktop. A slow connection on a mobile device is another issue that you will need to bear in mind when designing your mobile website. Any images you wish to use will need to be optimised and resized so that they don’t slow down the loading time of your mobile website.
That’s not to say that images shouldn’t be used, they can make a boring mobile website look intriguing to the user and draw them in to read your content. One way in which to pick your design for your mobile website is to look at your full site and take elements that you think can carry over to continue the theme. For instance, on our mobile website, the top banner, the logos for the tabbed navigation and the footer are all aspects taken from our full site. This means that anyone who may have seen the mobile website first and then go to see the full site, or vice versa; will pick up on your branding and the similarities between the two versions of your website.
In terms of being able to transfer between the two websites, we provided a button on each website to link to the other. When, it comes to using this button, the user on the mobile device will need to touch the screen rather than click with their mouse, which obviously doesn’t have as much precision; therefore the buttons we provided on our mobile website needed to be large enough for a user to select them, but also with enough space between them in order to prevent a user accidentally making the wrong selection.
One of our biggest call to actions on our mobile website was our phone number in order to contact us, so we placed it at the top of the page and also made it selectable so that a user can make a phone call to us without having to come out of their mobile browser, bringing up the phone option and then typing in the number… anyway you get the idea. Also having a Google Maps pop-up on the contact page makes it easy for someone to navigate to us using their phone.
You can take a look at our mobile website [here], and if you are looking to design a mobile website or have a site already that you wish to optimise for mobile use, then feel free to [take a look] at we can offer you or just give us a call for a quote on 01242 654000.