How to design a responsive mobile-friendly website? (PART 1)
How do you think is mobile phone different from desktop or a laptop? It comes by no surprise that the answer most of us will have on this question is the ‘size’. Although all these devices work on binary language, but the way we interact with each of them is quite different. One requires quite a different mindset for designing website for mobile rather than desktop. Even though you have learned a lot about UXing your website on desktop, the rules change when it comes to mobile phones.
There are plenty of other things that have to be taken care of while designing mobile-first or rather finger-first website. For starters, the following principles can be implemented to make a website mobile friendly.
- Don’t just ctrl+c and ctrl+v from desktop to mobile
We need an m-site for the desktop version and it has to be done now!!! How hard do you think it is? How much time does it take? Is it easy or tiresome?
Well, some of us may think what could possibly go wrong if we just port from desktop from mobile. A little tweaking in design and it is all set to go. Later, when the design is not much appreciated, it is realised that it was not designed keeping mobile users in mind. Rather than simply picking the similar layout and imagining that the users will love it, it’s all about going the other way round. Changing the UI to make it suitable for making it finger-friendly is the key. This is where most m-sites fail to be responsive. Design rethinking is essential when you have to deliver complex interactions.
2. Let your content be accessible- the bigger, the better!
It is true that you cannot make everything visible when it comes to mobile phones. Nevertheless, the users must be able to access most of the content that your website has. Deliver the information that you users are looking for, at once. The aim while creating an m-site is to compress things down, but making it accessible should and must be the ultimatum. Make everything bigger than the desktop site- text, line spacing, controls and buttons.
3. Keep the user’s access scenarios and surroundings in mind
Most of us use our mobile phones on the go- in public transportations, on the road with sunlight beaming right on the screen. Do you think that compressed elements in your site will be accessible at that moment? Everyone doesn’t own an iPhone with a crisp display and considering to design beyond this will help a lot. Some mobile screens do not offer great display, so keep the users who are accessing your website from such mobiles in mind.
4. Auto-fill or type? Debate on this, until you can minimise typing
Typing on mobile in constricted fields is still a painful process and quite slow as well. Minimising the need for typing in m-site will not only make it responsive but enhance user experience as well. Include simple and short forms in websites by eliminating all the unwanted fields allowing the users to enter only the information that is necessary.
There are plenty of basic steps and small changes that can be made to make a responsive mobile website. In my next post, I will cover some additional points that will prove helpful (and give you a better insight) in designing a mobile friendly and responsive site.
