Mobile user’s presence amongst sites and apps has for a while now reached a point of relevance where developers and designers cannot risk overlooking it.
In some instances mobile users represent the majority of users and in other instances they represents at least a very considerate portion of them. Fewer and fewer cases are seen where mobile capability shouldn’t be considered relevant.
Responsive design has been for a considerable time now very important to reach the full spectrum of potential users. This concept, however, can become quite broad and people may wonder what the most important tips for mobile design and development are, aside from the site and app actually working on mobile.
Here are five tips that will help your work be more mobile-friendly.
- Mobile Users Don’t Like to Type
Desktop users may not mind typing a considerable amount for specific purposes. Their login details, comment boxes, and other input fields would not require much effort.
This, however, is not the case for mobile users. It is harder to type on mobiles. Some users may have a lot of experience doing this, but it is no secret that the majority would prefer not to. In fact, they might be persuaded not to use your app/site if it includes typing anything at all.
Solutions? Depends on the situation.
You may now be thinking users nowadays are deterred from using these social login buttons as well due to concerns such as privacy issues and the possibility of the app generally doing things with your profile you don’t want it to.
There are two points to answer this. First of all, social networks like Facebook have been very concerned with this perception, and Facebook specifically to give an example has even gone as far as providing an Anonymous Login Button option so that social login becomes a method accepted by even the most sceptical of users.
Second of all, even though some users might not love the idea of using the social connect button, they will thank you for including it on mobile if it saves them from typing.
- Clicking is Not Equal to Tapping
Similar to typing on a desktop, clicking on a desktop is alright.
However, tapping on your phone is not exactly the same. Large fingers, small buttons, it can go wrong quickly and even if it may be straight-forward for large buttons, people may start to have a poorer experience the more tapping is involved.
Bear in mind, there is a difference between playing a game where there is one button you press that stays in the same place and a site that has multiple dynamic pages with several buttons. The latter is where it can get most annoying. So what to do?
An option is focusing more on other possible actions, such as the scroll and the swipe. This is where techniques such as parallax scrolling can be found quite useful.
Of course, it depends on each individual situation what the best approach is. In some circumstances it might be a case of making the one button more prominent in the interface so that it becomes very straight-forward to tap. In other instances it might be best to consider the scroll and swipe actions to navigate through an app/site.
- Mobile First Design
This may be a big subject as opposed to a small tip, but just consider the following.
If you have your responsive site full of CSS media queries that are designed to start from the widest screen and then adds rules based on lower widths and resolutions, then chances are that on the mobile devices that access your site all the resources for the larger and more bandwidth intensive resolutions are being loaded up as well.
You need to change this.
Mobile first involves designing for the smaller devices first and then building from that.
A common first step is to start using a popular framework such as Foundation which is mobile first and thus will make it easier to make the leap to this methodology.
How will users benefit?
A big one is quicker loading times. If you are only loading up resources for the specific device then that is a big plus.
Bear in mind just using Foundation won’t be enough. One thing you need to make sure is that images that are loaded for the device are appropriate for the bandwidth and resolution of the device. There are a few methods to have different images load up for different devices.
A novel approach that is worth looking into uses Grunt: Grunt Responsive Images.
- Back Button
It is common to find difficulties in apps and sites when trying to go back one level.
Different designs involving within page interaction and or poor implementation of back capabilities mean that users many times end up having to click on the home button or refreshing the page altogether to start all over if they want to go back a level.
A back button on your app or site that allows to go back can improve the user experience by a considerable amount.
Testing with multiple devices is essential. It may look great on the newest iPhone or on your desktop’s Google Chrome but it may look terrible or simply not work on everything else.
An option for this is Browserstack where you can test through multiple devices within an emulator. Another, more expensive option is to buy the devices you wish to test on.
If you wish to go with the latter you may want to read our guide for Building an Effective Testing Station.