Today, a large portion of internet users view websites on their smartphones or tablets. Since the introduction of the smartphone, companies who were early adopters to tech innovations quickly realized the importance of optimizing their websites for mobile-friendly viewing. More likely than not, your web host—whether WordPress, Squarespace, Joomla, Wix, and other platforms—already have a mobile editor for your website template.
Whilst the proportions and content placement is almost automatic when converting your website to mobile viewing, one of the common frustrations for novice web developers and designers is the menu bar. This is because menus are uniquely placed in each website. While it’s true that the standard placement of menu bars is at the top with dropdown features, there are templates that have side bars or a more complicated top menu bar design.
This can sometimes lead to a messy mobile version of your website. I have seen websites that look great on the desktop computer, but have their menu bars blocking the whole screen when viewed on my smartphone. This will annoy your audience and could potentially cause them to lose interest. If you’re an e-commerce business, this means potential profit down the drain.
All of this drama can be avoided if you just took the time to optimize your menu bar for mobile devices. Here are a few tips to consider when designing your layout.
1. Pick the Right Template
I know this sounds like common sense, because it is, but many web designers simply choose the wrong template or theme for their website. Web hosts like WordPress, Squarespace and Wix offer a wide variety of themes that are optimized for specific applications: restaurants, photography/art portfolios, event planning, e-commerce, among others.
If you’re an e-commerce company, try picking out a sleek theme which offers a lot of customization options. This will allow you to create menus and sub-menus that will be easy to navigate on mobile devices.
2. De-Clutter Your Menu Bar
If you have a top menu bar, try to list only the main pages of your website (e.g. About, Contact, etc.). Don’t clutter your main menu with multiple buttons. Also, try to limit your sub-menu items.
If you’re a large corporation that offers a variety of services and products, then you’ll mostly likely end up with a lot of individual web pages. However, try to conglomerate relevant pages. For instance, you can put products and services in one page rather than creating separate ones for each.
3. Responsive Design
Choose a menu bar from your template that has a responsive design. For instance, there are menus that functions in basic HTML. That’s fine if your website is minimalist, but try an HTML5 template that has a more dynamic response when navigating through menu items and sub-items.
4. Test Before Launching
This is another common sense tip that some designers skip, but it’s important to always test your website on an actual mobile device. It doesn’t matter if you view it on an iPhone, Android device or Windows phone. Don’t rely on mobile emulators as sometimes they can lead to inaccurate results.