Famous designer George Nelson had rightly said, “Design is a response to social change”.
And a change that has taken the world by storm is the exponential rise in the use of mobile devices.
Are we design ready to respond to this sweeping change?
But before we go deeper into our discussion on mobile web development, we need to remember the ways mobile devices are used.
5 Characteristics of Mobile Devices
- People usually carry mobile devices with them at all times.
- People check mobiles on the go.
- People use mobile websites for particular information rather than detailed reading.
- People want information fast and quick.
- There is a crunch of real estate on mobile devices.
If you keep these 5 things in mind, and work around the challenges and opportunities they offer, you can never go wrong with mobile web designing.
When mobile adoption had just started, companies used to create and maintain separate versions of the same website. One was meant for desktops and tablets while the other was a ‘mobile only’ website meant for mobile phones.
However, thanks to the development of responsive web design, designing one website suffices for all devices nowadays. Responsive web design allows the content and layout of the website to adapt to the device it is opened on, desktop, tablet or mobile. So it takes care of great multi-device user experience.
But again, research shows that people use mobile devices to chat, gossip, use social media, catch-up on news rather than read detailed reviews or make purchases. For that they still prefer desktops and tablets. Hence, it might still make sense to have separate websites.
Actually, everything is relative and differs from company to company. Therefore, before designing a mobile website, doing proper research is important. You should be able to answer the following questions:
- Who are your visitors?
- What pulls visitors to your website?
- What do they do there?
- How much time do they spend on your website?
- What do you want your visitors to do on your website?
- How much time will that require?
- Which devices are they using to access your website?
- When and where is your site accessed?
If you are able to answer these questions, you will be able to develop a streamlined design for your mobile website. Remember, people usually visit mobile sites for particular information. If you can find out the main reasons why people visit your website, you may then use that as the highlight of your design.
Now here a few general tips that you should keep in mind while designing:
- Use a vertical scroll Just pick your mobile and see how you scroll pages. You will see that it is easier scrolling pages up and down than sideways. As our header image shows, we often use our left thumb to scroll mobile pages!
- Keep the menu to a minimum The once favourite sliding hamburger menu should be avoided. With such a crunch of space, a short, no frills menu is the most practical. A drop down menu or a menu as a home page is practical enough. Learn how to create a drop down menu on CSS here.
- Keep the CTA buttons prominent with space around CTA buttons should be at least 40 to 50 pixels with clear white space around to let fingers comfortably click the buttons without activating other actions on touch screens.
- Content should be created with “glanceability” in mind The visual design should convey the information at a glance. Users should get what they want from the site easily without effort. Content should be created with that in focus. This will lead to better engagement and conversion.
- Avoid lengthy written content Don’t write long headings and chunky paragraphs. Write content with mobile in mind. It will work well for desktops too.
- Load time should be fast Loading time affects conversion. If web pages do not load within 2 seconds, users leave for other websites. So, avoid videos, images and also optimize HTML to increase speed.
- Create short forms Forms with minimum fields should be created as it is very difficult to fill forms on mobiles. Get some guidance from Google here to create great forms.
- There should be one click functionality Whatever you wish your visitors to do, namely, buying, registering, contacting, and so on, should be streamlined to just one click. Remember, “Good design is good business.”
If you are interested in mobile web development, it is good idea to be aware of the different technologies that are available. Over the years, W3C has developed a number of technologies keeping mobile devices in mind. They are as follows:
- CSS Mobile: It is a kind of cascading style sheet language for Mobile web
- SVG Tiny: It is kind of the Web SVG (Scalable Vector Graphic) suitable for the mobile
- XHTML Mobile: It is again a kind of XHTML that is meant for the mobile
Here is a list of helpful RESOURCES that will help you design your own responsive web design:
- Technologies that have been developed to fit mobile devices
- HTML and CSS code snippets to create a responsive web design
- Tutorial to create a responsive web design
- Tutorial for responsive web design using CSS
Mobile web designing is the way forward. Please let us know of aspects that we might have missed.