Design Template by Anonymous

Proper Design Techniques

Nothing is worse than an overbearing, ugly, and difficult mobile website. With attention spans decreasing universally, you need to give a user a reason to keep their attention on your mobile website and fast. Failing to do so will only bring a high bounce rate and challenge your growth and perception. To do so, there are certain common measures and design choices that can be taken to further your chances of success and make you look like a mobile web design pro. Below is a short list of techniques that can be built upon to ensure a professional site and help ease the design process.

Examples:

Simplify Your Menus

Mile High Comics mobile website — Above is the mobile website for Mile High Comics in Denver, CO. While containing a search feature, the navigation is nearly impossible due to the tiny text and minimal spacing between touch features. Avoid this, among many other things seen on this site, in any designs of your own. Courtesy of Mile High Comics.

Navigation, along with scaling and adaptive design, may be the most important aspect of mobile web design. Making sure the user can reach the desired content easily and with little to no instruction. This should be one of the biggest goals throughout the development process. Mobile devices have limited screen space, and simplifying your menus can be one of the first steps to conserving valuable screen real estate. Be sure to ensure your user can access navigational elements without the excessive need for scrolling or zooming. Mobile users are going to be interacting with your website through touch gestures, so using larger, tappable elements with adequate spacing is a good rule of thumb to follow when creating your menu. Accidental taps and frustration will ultimately push your customer/user away from your product. Complex menus also contain more resources to load, and will in turn increase load times on your site. Overall, clarity and focus will better the user’s understanding of the website's infrastructure to find the information they need.

Make Text Larger

Small text should be your enemy when making a mobile website. As seen in the Mile High Comics example, small text can make using your website impossible. Here are a few more reasons to increase your font size:

Desktop computers allow for much more leeway when considering the size of your text, as there simply is more space to work with.
In a mobile scenario, readability is king. Increasing the text size ensures that content remains legible and easier to read on these smaller screens, while also reducing the tendency of zooming.
Larger text also grants larger touch targets. Having larger touch targets better allows your user to interact with links, buttons, and other interactive features.
As with menus, inaccurate taps can bring danger to user retention. Larger text can also be used to convey importance in content, like reinforcing your brand’s motto and drawing attention to a piece of information in contrast to others.

Make Buttons and Navigation Bigger

Geice mobile website — Geico’s website uses large buttons effectively to distinguish choices for insurance types. Courtesy of Geico.

As covered in why you should make your text larger, and why menus should be simplified, much follows suit for making your buttons larger and more approachable to your audience. Touchscreen interaction is the primary vessel for functionality in phones today. Misclicks can become a frequent problem when buttons aren’t the size of your finger and are made blatantly obvious to the user. What actions are possible on your mobile website should be made as clear as possible, and having a clear distinction between interactable buttons and other design elements will influence your users to make a purchase, sign up for a newsletter, or contact your business for further inquiry, among many other possibilities. The context in which people use their phones also needs to be taken into consideration as well. Often, mobile users can be seen searching the web in less-than-ideal conditions, like walking, commuting, or lying in the sun where visibility can be diminished. Bigger buttons reduce the effort required to use your mobile website as intended. Visual hierarchy is crucial in mobile-first web design and mobile design as a whole, and different size buttons can increase or lessen their weight, leading your audience to important content or a desired navigation trail.

Include a Search Feature

Amazon mobile website — Nobody is doing web design as well as Amazon. The first feature you are presented with upon opening their site is a search bar. This gives you unrivaled access to the massive shopping enterprise, product choices and content only limited by your desires. Courtesy of Amazon.

Efficiency is the most desired trait in mobile technology today. People want their content fast. Implementing a search feature does just this. Having a search bar removes the need for imprudent scrolling or tapping through menus to find a specific piece of content. Keywords and phrases can easily be used to identify a page much faster than mindless searching, and may present information to the user they never knew existed. The user might also not be familiar with your choice of menu. A search feature would be an intuitive way for them to get around your site, regardless of their knowledge of your main navigation system. Accessibility comes into play, and individuals with visual impairments or motor disabilities may not be able to use your main menu efficiently. Searching is an accessible alternative, that can be used with either keyboard input or speech-to-text commands. Lastly, this is an expected feature at this point in website standards. Omitting it entirely can make your image and brand look unprofessional.

Optimize your Images

The images you decide to include in your mobile website should be thoroughly thought out and only included if they add much to the user experience. Reducing your image haul will in turn lead to faster page load times. Optimizing these images further will reduce their file size, leading to a smoother introduction to the user. Many phone users also have limited data plans or pay-per-usage charges. Reducing data consumption by reducing the amount of data being transferred will benefit your audience without them even knowing. The website will save its users money while improving the audience you can reach. In the responsive design process, optimized images will further increase the efficiency of scaling and visual quality across all devices. Lastly, page speed is a critical factor in the search engine ranking process. This is proven to be weighed even higher on mobile devices. Google and other web services are open with their preference for efficiency and positive user experience, so doing this step in turn will improve your overall ranking in search results. Increased visibility and traffic can be extremely valuable to an online mobile shop that needs exposure to bring in customers.

Make it easy to get in touch with you

UNH mobile website — UNH’s mobile website includes its main phone line and links to all social media at the bottom of all its pages. This is a great way to imply consistency in design and invite your audience into a deeper discussion.

Time is limited and patience runs low often when browsing on mobile devices. Your ability to make yourself available directly to the user from your mobile website can reduce immense friction. An open line between your audience can push inquiries, support requests, or feedback that can directly benefit the quality of your mobile website. Real, verbal communication leads to stronger connections and relationships with your user base as well. For a shop, a user may have questions on a product and this information may not be readily available to them on your mobile website. Accessible contact options make them more likely to initiate communication, leading to further retention and profit from eventual sales to follow. Including contact information creates trust and transparency between the brand and the user. A business that is easily accessible is more likely to be perceived as reliable, leading to confidence in the content and/or products you bring to the table. To put it all into simple terms, making yourself available to the user makes them more likely to come back to your mobile website in the future. Including social media directables can also be an amazing way to personalize and grow your audience.