Before we have a discussion about responsive design (which we will have very soon), I thought it might be a good idea to first examine what it takes to have good web design for mobile devices. When dealing with mobile design, it’s a constant battle to fit all of your content on a very small screen. Here are a few tips that will help you figure out how to present all your information while keeping user frustrations to a minimum.
- Simplify and optimize core content: With a desktop website, you can put in as much information as you’d like without problem (well, don’t put in TOO much). With mobile devices, the screen size is much smaller, and so you need to be choosy with your content. Only present the most vital information in small, scannable chunks and cut out the rest. Doing this will benefit your website in several ways: 1) you reduce the amount of scrolling a user has to do; 2) you decrease the loading time for your website; 3) relevant information is much easier to find; and 4) you have more available space so you can increase font size, reducing user eye strain.
- One-column designs: When viewing websites on a desktop computer, it’s very likely that you’ve seen many designs that use multiple columns. This makes viewing information easy, but on a mobile device this multi-column design will only make your text extremely tiny and difficult to read. You want to reduce your design to one column only, that way your images and content can utilize all the available space possible.
- Make buttons/links BIG: It’s easy to click on tiny links on a desktop; you have a tiny little arrow that you can move with precision with your mouse or trackpad. On a mobile device it’s very unlikely the you have this kind of accuracy so you must accommodate. Make buttons big and text links long, as this will give users more area to hit with their fingers.
- Consider hiding navigation: While you could have a large, button-style navigation at the top of your page, another space-saving option would be to hide your navigation. This is usually done by having a small icon with a menu symbol (usually three horizontal lines) that opens up to reveal menu links when the user touches the icon. The advantage of this is that you can have the icon fixed on the screen so that no matter how far down the user is on the page they can easily access it without it being obstructive.
- Keep file sizes small: Mobile devices are not going to have the same connectivity that desktops have. Loading rates are going to be much, much slower, and so it’s essential that you keep your file sizes as small as possible so total loading time is reduced. File sizes can particularly spike when it comes to images, so consider optimizing your images to appropriate file types and sizes (although you should be doing this anyways!).
- Use a responsive layout: If you’re designing for mobile devices, chances are that you’re not designing for just one device. With a vast multitude of screen sizes available, it’s best to design a responsive website. This means using relative units of measurements like percentages (%) or ems, rather than absolute units like pixels. In particular, you want to have images that scale nicely across screen sizes. Responsive design will be covered in more detail in another article.
- Reduce user input: If there is one common aggravation that most users have experienced, it’s trying to fill out a registration or some other form on a phone. It’s tedious to type out your information, and it’s even more irritating when your session times out as you try to hit submit. Therefore, you should try to keep form inputs to an absolute minimum. If a user is trying to register to your website, have them only provide a name, username and password; if you need more information beyond that, have them fill it out at a later time so they can complete it at their convenience.
As always, there is much more to consider when it comes to mobile design than what is listed here. However, I feel these seven tips are probably the most important to keep in mind the next time you’re designing your website.