Thursday, March 28, 2024

10 Tips to Optimize Mobile Websites for Users

As mobile websites become more prevalent, so is the need for better design. In this article, we look at 10 tips to create a better experience for mobile users.

1.      Use a Grid When Building Your Layout in Photoshop: This is essential. “Winging it” when creating a layout is sure to create chaos and/or a messy layout. Among other things, a grid will aid you in precise placement of the various components, spacing of elements, and consistency when designing for tablet or a desktop site.

 

2.      Build the Entire Layout as an Image Before You Start Coding: This is the approach used by Jiffy Software, a well-known software developer. They build the entire interface as an image (or series of images) first. If the client wants something changed, it´s easy to accommodate. It also saves a lot of time. This is a much better approach than creating a design and starting to code right away. If the client doesn´t like it you´ll have to rebuild the layout and, chances are, junk some of your code. This approach will save you time and money.

 

3.      Selectively Use Color for the Site Theme: This is especially important for a mobile site. It´s important to use a limited color palette. The major reason for doing this is to prevent visual overload.

 

4.      Consider the New Adobe Creative Cloud Products: This includes the new iteration of Photoshop CC which includes the Generator plug-in and a new product, Adobe Extract. Used in combination with Edge Reflow these products allow you to build the design in Photoshop, create multiple image files of various sizes and type and to export the HTML and CSS to an HTML design program of your choice. Another option is to make use of Edge Reflow to create a prototype for your desktop, tablet and mobile site using media queries. Afterwards, you can use that information in an HTML program to refine and complete the design.

 

5.      Use Plenty of White Space: A temptation by many a designer is to cram as much information as possible into the mobile interface. Outside of making the interface appear cluttered, users might have difficulty with selections. A cluttered interface could also trigger a “visual headache” and could cause you to lose your audience. In contrast, white space gives your design “breathing room” and will make it easier to see what´s happening on your site and will give margin for error when making selections.

 

6.      Fonts: A major headache for many a designer concerns fonts. It´s important to realize that it´s impossible to have complete control over your fonts and to make sure that all users have the same experience. Attempting to do that is a recipe for failure. What some designers do is to use an image, rather than an actual font when they want to create a consistent appearance. Where this comes into play is for headings and the odd text snippet. It´s not a replacement for body text, though.

 

7.      Consider Using an Icons Based Layout: This is a really easy way of building a mobile site and gives the user fast information about what´s in the layout.

Each icon opens to a normal page with information about your site.

 

8.      Pay attention to Your Content: When moving content from a desktop site to a mobile site, the temptation is to attempt to replicate that on a mobile interface. Instead, look at your content and only post what is absolutely necessary to convey your message. If necessary, you add a reference to your main website or post a link with the option to view it at full size on the smart phone. Some users actually prefer to see the desktop site, despite the sizing issues.

 

9.      Make Use Of Mobile Only Features: Examples of these are the Call Us function and the Find Us settings within the GoMobi interface. The Call Us function allows the user to call the business directly from their phone.

The Find Us option makes use of the GPS capabilities of your phone. Among other things, it will give you a map of the business location. In addition, you can enter your location and the software will bring up a map and give you precise directions to get to the business.

 

10.  Consider Your Branding: Branding is very important and should be clearly indicated on your mobile site. For many businesses a simple logo at the top will suffice. With other businesses, a color scheme might be used which would match the logo along with several icon designs, as well. The color scheme and/or icons create an overall look and feel which clearly defines the brand.

 

Resources

· 20 Steps to the Perfect Website Layout

· 9 Ways to Improve User Experience in Mobile Design

· 7 Key Principles That Make a Web Design Look Good

· 5 Things Every Mobile Design Should Have

 

 

 

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured