5 Tips for Planning Your Mobile Web Design

For SMBs, word-of-mouth continues to remain a powerful marketing tool. That said, did you know that over half (57%) of Internet users won’t recommend a business that has a poor mobile website design (socPub)? In other words, poor mobile web design can cost you both the business of the consumer visiting your site and the potential business of their friends.

Not only is almost half of today’s Internet traffic mobile (47.96%) (Statistica), but more and more users are moving toward strictly using mobile. In fact, one in five Internet users in the U.S. solely uses their mobile device to access the web (Pew Research Center), and with 47.2 million Internet users in the U.S., you’ll want to ensure that you’re not losing out on this large segment of your potential consumer base (Statistica).

Whether you’re building a brand new mobile site or giving your existing site a makeover, you’ll want to ensure that great mobile web design is at the heart of your creation. Here are 5 steps you should take when planning your design to ensure your goals are both achievable and ready to provide you with great results.

1. Establish your business goals, budget, and user needs.

Person Writing Down their Budget, Goals, and Target Audience for Their Mobile Web Design

The first step in planning your mobile web design is determining your goals with this design. You likely have goals for your mobile site, so how will your mobile site’s design contribute to your achieving those goals? While you may some grand goals for what your design should do, you’ll want to assure that those goals are also within reach, or rather your budget.

Even with your business goals and budget ironed out, you won’t want to dive too deep into the planning process before getting to know what your users need. While design plays a major role in providing a great user interface (UI) and user experience (UX), it’s also important that you have enough resources available to support the backend development necessary to make your UX/UI design complete.    

2. Choose mobile or responsive web design.  

The next thing you’ll need to determine is if you’d prefer to build a mobile-dedicated site or a responsive site. A mobile-dedicated site is designed specifically for a mobile device, while a responsive site is a site designed to adjust to fit the dimensions of various platforms.

Whichever option you choose should be based on your goals for site, your budget, and user needs. That being said, here are a few things to consider choosing between the two:


Responsive Sites

Pros

  • One site for cross-platform functionality

  • Same content on desktop & mobile

  • Easier to maintain (as there is only one site)

  • Better for SEO (e.g. one site URL)

Cons

  • Slower loading speed

  • Complex tasks & content from full site may create a poor mobile UX

  • Poor integration with third-party services

 

Mobile-Dedicated Sites

Pros

  • Optimized for mobile

  • Quicker loading speed

  • Eliminate the need for users to deal with complex tasks & content

  • Accommodate third-party services

Cons

  • Need two sites (full & mobile) for cross-platform functionality

  • More difficult to maintain (as you’ll need two sites)

  • Not as good for SEO (e.g. different url → m.clik.global vs. clik.global)


If you feel limited by these two options, consider progressive web apps (PWA). PWAs are a great option for those not ready to fully dive into building a mobile app, but who would like to ensure they are accommodating mobile users.

3. Make sure your design doesn’t hamper loading speed.

Next, you’ll want to start considering how your potential design ideas might impact site loading speed. According to Neil Patel, the slower a web page’s loading time, the more likely the user will be to abandon the page they are visiting. In fact, almost half (47%) of Internet users expect web pages to load within 2 seconds or less, making optimal speed critical.

Unfortunately, most people are tempted to view loading speed as an afterthought. However, as Hakan Nizam, director of the E-commerce Center of Excellence at L'Oréal, says, “It’s much more efficient to deliver something fast if it is part of the design criteria” (Think with Google). In other words, take loading speed into consideration from the get-go in order to ensure that the development process continues moving forward.

4. Keep navigation simple.

Person Holding Mobile Device while on Plane

Even when your mobile site’s loading speed is optimal, there’s another reason they may abandon your site: frustrating navigation. In fact, well over half (67%) of mobile users abandon sites with frustrating navigation (Reusser Design). While dropdown and mega menus may look fine on your desktop computer, such navigation is often cluttered and difficult to use on a smaller mobile device.

How you downscale the navigation from your full site to your mobile site will heavily depend on whether you choose to build a responsive or mobile-dedicated site. With a responsive site, you may choose to hide certain navigational features for mobile that would otherwise appear on a desktop. But with a mobile-dedicated site, you may choose to abandon certain navigation features altogether.

In addition to navigation menus, especially if your site is content-heavy, you may want to consider including a static search tool on your site. Based on Google’s recommendations, site search should be located at the top of the webpage (not hidden with the the menu, for instance). This improves your users’ chances of finding what they are looking for and becoming customers.

5. Take the limitations of mobile into account.

Throughout the mobile web design process, keep in mind that mobile is much different than desktop. From a size perspective alone, desktops give you a lot more to work with: At the time of this writing, a majority (31.5%) of mobile users have a screen resolution of 360x640, while the majority of desktop users (25%) have a screen resolution of 1366x758 (Statcounter).

Along with ensuring that your site looks right on a smaller device, you’ll want to ensure that it feels right. With this in mind, you’ll want to consider how well your design accommodates tapping and vertical scrolling. If graphics at too large and overwhelming, or text is too small to click on, your users may struggle to use your site and choose to abandon it. Instead, embrace the limitations of mobile in your design for the best results.

Start your mobile web design now!

With these tips in mind, you should be ready to start planning your mobile web design for your mobile site. Once you have a more concrete plan in mind for what you’re expecting from your site, it’s time to hire a team of software developers to bring your vision to life.

At ClikGlobal, our team of mobile website designers is ready to take your design ideas and make them into a reality. As an agency, we also have mobile website developers on staff, who are can step in to help bridge the gap between your mobile site’s design and functionality as needed.

Your new mobile web design is just a click away—contact us.