- Mobile, Website Development

Mobile-Friendly Web Design Tips

Be Mobile-First Friendly: 7 Web Design Tips E-Commerce Websites Should Try

As smartphones and mobile devices have solidified their foothold on people’s lifestyles, mobile-first design in websites isn’t just a trend anymore – it’s a way of life. Mobile commerce isn’t going anywhere which means that the user’s mobile experience should be a major consideration for any online businesses.

[attention-lead-magnet] Before You Design, Before You Build, Before You Spend… Design Sprint [/attention-lead-magnet]

While a study has shown that one in five Millennials (or people between 18-34 years old) aren’t even using desktops any longer, they aren’t just the only age group that’s making the shift into mobile phones – making a mobile-first design very important.

Mobile-Friendly Web Design Tips


Join us for the latest in Digital Media Marketing

Check out these 7 web design tips that can help your website stay on top of mobile-readiness.

1. Don’t Make a Second Website for Mobile

Although having a separate mobile-friendly website has been a common practice for companies and businesses who wanted to stay ahead a few years ago, fairly recent changes have deemed this irrelevant and obsolete. As you may already know, Google has been releasing updates and policies for the past years that is designed to give more weight to a user’s experience. One of the aspects of these updates is mobile-friendliness.

However, having a dedicated mobile website proved to be problematic, especially when it comes to duplicate content – and Google hates duplicate content. If you’re going to build two separate websites, make sure that their content is not the same.

READ  Angular VS React Native

2. Simplify Your Navigation

One observation that can be made in most e-commerce websites is that it’s too many pages. If each product has its own product page and you have about a hundred products, just imagine how many buttons there will be in your home page if each of them had to have one.

The wise thing to do in order to maintain an orderly homepage is by categorizing each product and by using a navigation tab or menu icon that opens a drop-down menu of all categories. This button must always be visible and should be consistently located in the same spot, no matter where visitors of your website go.

3. Make Use of Smart Search

Have you ever visited a website without a search bar? How about a ‘mobile-optimized’ website that uses a very small search bar that’s almost impossible to see? If you really hate this, don’t feel bad. In fact, you’re not alone. It forces people to perform something that can totally be avoided by simply using a visible search bar. On the other hand, using a smart search is a very intuitive way that takes away the need to type, or at least, the need to type a whole phrase.

Smart search boxes automatically bring out suggestions based on the first few letters a visitor types in. these suggestions are in line with trends from recent searches by other users as well as your past searches if you’re a returning customer.

4. Font and Button Size Matters

The size of your website’s text fonts and buttons already play a vital role in desktop websites, so it’s just fitting that these elements remain as important as ever on mobile devices.


Encountering unreadable texts as well as misplaced and oversized buttons can be very frustrating for anyone. To avoid this, always remember that, when it comes to mobile responsiveness, size is a big factor – not just the size of your fonts and buttons, but also the file size of images and files on your web pages.

5. Minimize Pop-Ups

Though pop-ups are a great way to catch your users’ attention, especially when trying to build an email network, too many pop-ups can become annoying for users. In addition, excessive use of pop-ups can negatively affect your website’s load speed, which can have an impact on your website ranking as well as on your bounce rates.

6. Opt for Responsive Mobile Design

One of the easiest – or rather, cost-effective – ways to have a mobile-friendly website is by incorporating responsive mobile design elements on your website. It allows your site to automatically and fluidly adjust between varying device sizes. You can see this at work simply by viewing your webpage on your phone rotating it for a landscape browsing perspective.

A responsive design utilized flexible layouts, images, and a cascaded arrangement of your media. If responsive design is incorporated into your website, it can detect the size of the device it is being accessed from and adjust accordingly.

7. Keep Testing Your Site

Upon applying the necessary changes and improvements to your website, it is crucial to keep testing your website. Don’t just access your website from different browsers and devices, you should also access your website from devices with varying operating systems as well. Use a checklist and ensure that every button, page, and layout appears well on all devices.

READ  Future of Website Design for Marketers

The Bottom Line

Though these are just a few tricks that you can implement in improving your e-commerce store for mobile-friendliness, there are still more ways you can make your website appear better for your users as well as perform better in search engine results.

Author Bio:

Kenneth Sytian is the Owner and CEO of Sytian Productions – Web Developer Philippines. He has been designing websites and developing web apps for more than a decade. He is the driving force behind the company and an influencer in the industry of web design and development in the Philippines.

Mobile-Friendly Web Design Tips


Join the Club!

Every week, we'll be sending you curated materials handpicked to help you with Digital Marketing. 

Plus, you'll be the first to know about our discounts!

We don’t spam! Read our privacy policy for more info.

About eCommerce FAQs

Read All Posts By eCommerce FAQs