You don't have to be a design agency to know that a large portion of your website traffic comes from mobile users. In fact, over 70% of customers say they prefer mobile-friendly websites because they often surf the web while on a phone or tablet. So if you have been ignoring your mobile web design, now is the time to start paying attention. Web development can be a serious source of leads and revenue for your business - if you treat it as such.
We understand that building a website itself can seem a daunting task, let alone making it mobile responsive and friendly. Don't feel too overwhelmed though. As a design agency, we have had extensive experience in web design for both computer browsers and mobile browsers. We have even compiled a list of our favorite mobile design tips to share with you.
Mobile Web Design 101
Remove the Navbar: This may seem a bit counter-intuitive at first, however bear with us. Digital agencies know that on mobile, real estate is a premium. Using a mobile navbar usually takes up around 20% of your screen space. This space should be used for text, images, and buttons. Make the navigation simple and scroll based. Even without a navbar, there are ways for visitors to browse your site. The most popular method is the hamburger menu (the three little lines in the top right or top left of most mobile websites you visit). This type of menu can help conserve space and let a customer navigate your website as they need to.
Consider Thumb Reach: Most people only use one hand at a time while on the phone, occasionally switching to two hands when absolutely necessary. Keep in mind how far across a screen someone's thumb will reach (usually right thumb, as most people use their phone with their right hand). Keep important elements that people need to click within reach of the thumb. This gives visitors one less reason to leave your page. Also remember that touch accuracy drops towards the outer edges of the screen, so buttons should be in the middle areas. If you aren't quite sure where to place the buttons, get in touch with a design agency for some help.
Where Practical, Minimize File Size: Large pictures and files can take extra long to load on mobile devices depending on data or WiFi connections. A slow load time is the most common visitor bounce reason on all websites. Additionally, a high bounce rate will affect the search ranking of your pages. There are plenty of sites like TinyJPG or Squoosh that will help minimize file size without compromising quality of the image.
Clickable Phone Numbers and Addresses: This is one of the most important design elements a design agency can help you with on mobile web design. Any digital agency or SEO agency will tell you how important clickable phone numbers and addresses are. For starters, a clickable phone number makes it very easy for a visitor to your website to call in and get more information. Clickable addresses are especially important for restaurants and services businesses, as it can immediately route a potential customer to your business.
Eliminate ALL Popups: Yes. All popups. Even the handy email capture. Here's the thing, most people that are visiting your website on mobile are only going to be there for a short time. Your goal is to eventually convert that person to a lead or a customer. Most visitors upon getting an immediate popup leave the page. In fact, Google has recently announced that they are penalizing websites that start off the visitor experience with intrusive popups. If you would still like to deliver a popup, consider doing it as a small footer as the visitor scrolls to the bottom of the page.
Reduce Inputs on Forms: For a visitor signup on a desktop browser, you might ask for a name, phone number, address, second line for address, email address, zip code, and a number of other fields. This gets very crowded on mobile. Minimize to only the essentials for mobile visitors, and focus on gathering other information later.
We hope you enjoyed some of our favorite tips any designer can implement for mobile.
