6 Steps to Optimizing a Site for Mobile Phones
Ignoring mobile users is a huge mistake nowadays, no matter what kind of website you might be running. Many people not only browse the Web on their phones, but even use them as their primary surfing device. It’s becoming increasingly common to meet people who don’t even do any browsing on a computer, using the Internet on their phones exclusively.
This makes it important to ensure that your site works well on a mobile device, instead of displaying a garbled mess that’s difficult to navigate. There are many things that you can do to make a typical website more mobile-friendly and responsive, and many of them don’t require any deep expertise in web design. If you still don’t have a mobile-friendly version of your site, it’s definitely time to think about optimizing it.
- 1) Don’t set hard dimensions
Try not to hard-code the dimensions of page elements like divs and spans. Make them dynamic wherever possible, so that they will automatically adjust themselves according to their surrounding elements. This will make your site suitable for any kind of display, regardless of its resolution or orientation, and will give your site a great boost to its usability on mobile devices. Just make sure that nothing breaks in the logical links between components when you do that, and always verify how the design looks on a larger screen.
- 2) Reduce image sizes
If you’re serving a unique mobile version of your site, try to reduce the sizes of its images. You can often get away with reducing the resolution of most pictures, as well as increasing the compression level, and not notice any difference on a typical mobile device. Of course, this doesn’t work for all types of images – those with large patches of single colors will not look very good compressed, for example – but you can often do a lot to make the pictures of your site load faster and look better on a smartphone.
- 3) Keep the layout simple
Remember that a user typically browses a site on a mobile phone in a different way compared to on a desktop, and it’s usually a much more streamlined and focused experience. Try to make your site flow in one direction like a list, as that’s the most popular layout for successful mobile designs nowadays. Of course, you can still introduce some horizontal branching, but you should make it easy for the user to get back on the right “track” if they stray away. Also, don’t make the depth of the horizontal navigation too great, as that may confuse users.
- 4) Don’t use any heavy plugin content
This should be obvious, especially today when things like Flash and Java are being deprecated as browser plugins. But still, try to limit their use as much as possible on your mobile sites as well. Many smartphones can’t reliably handle heavy content like that and will load and display your site significantly faster, leading to a poor user experience. At the same time, you can replicate this sort of functionality with other tools, including plain old JavaScript and its many modern libraries and frameworks. There’s really no good reason to use those heavier plugins anymore, and you should avoid them as best as possible.
- 5) Display everything in the same window
Try to constrain the entire navigation to one window, instead of opening pop-ups and additional windows. Remember, the Web works much more differently on mobile, and users will only get frustrated if you try to follow some of the standard principles for desktop design. Getting back to your main window after a pop-up was opened is more frustrating on a mobile device’s browser, and it usually takes a few extra taps to get there, wasting a lot of time in the long run if the user has to do that over and over again. This is definitely not the kind of experience you want to present mobile users with, especially if your site relies on a lot of user input or other heavy interaction.
- 6) Think about touch interaction
Last but definitely not least, try to make use of the way mobile users navigate their screens compared to those on a desktop. Tapping on a screen is different than clicking with a mouse, and you will want to make your site as usable as possible for both sides. Don’t rely on any actions that are unique to either control device – for example, don’t do anything that requires a right-click. On the other hand, desktop sites shouldn’t rely on things like holding down a button for a few seconds to get a different action. As long as you use some common sense in the design of your site, you should be able to avoid these unique navigation features and focus on getting your users through the site with simple clicks and taps.
\\ tags: mobile phones, mobile websites, Optimizing, Smartphones, tips, webdesign