7 Steps To a More Mobile Ready Website

7 Steps To a More Mobile-Ready Website

If you aren’t considering how your website looks on mobile, you are doing it wrong. That is a bold statement, but designing only for desktop computers is a thing of the past. Mobile traffic accounted for 48.71% of all web traffic in the first quarter of 2019. This means half of your website visitors are browsing on their mobile devices.

If users land on your page and can’t see your call to action button, can’t read the fonts on your page, or can’t understand the navigation, they will click away.

This will lower your conversion rate, raise your bounce rate, and irritate search engines. Google wants their users to land on your page and stay there, an indication that their users like your site. If they see their users visit your page and immediately bounce, they’re likely to rank your page lower in their results.

So now you understand that making your website mobile-ready is absolutely essential. How do you do it?

7 Tips for a Mobile-Ready Website

There are many elements to consider when making your site mobile ready. Here are seven valuable tips to get you started on a more user-friendly website that will convert.

1. Make Your Fonts Easy To Read On Mobile

A smaller screen means a larger font. As a general rule, start at a 14px font. You will need to test your page on a mobile device to see what looks best with your font and your design.

For simplicity’s sake, unless you are sure of what you are doing, it’s best practice to stick with standard fonts.

2. Optimize Your Images

Images grab your audience’s attention. They are visualizing appealing, connect with the user, and bring their focus in to your web page. At the same time, if they’re poorly optimized, they can slow up your webpage and make it load strangely, especially on mobile devices.

Your images need to be optimized for size so they load quickly. They also need to be saved in the correct format. Your icons and logos likely have transparent backgrounds, so PNG files will look best. Your photographs are likely best suited for JPG format.

3. Are Your Share Buttons In The Way?

Share buttons are an excellent way to encourage your site visitors to share your content with their friends and bring even more traffic to your website. However, floating share buttons that block your content is a common mobile design issue. You will need to either scale these buttons so they are unobtrusive or disable them on screens smaller than 768x.

4. Your Navigation Needs to Encourage Your Visitors to Stay on Site

The desktop version of your website should have visible, easy-to-find links to all of your important pages.

It is common on mobile sites for there to be a hamburger icon all of your links are hidden behind.

Not every user will realize they need to click on this icon to find the links.

This doesn’t mean the hamburger icon is a bad idea. Too many links in your navigation will make your page crowded and difficult to click on a mobile device. It means that you should consider what you want where. It is possible to put your most important links out in the open on your mobile site and then place the rest in your hamburger icon. This means that less-savvy users will still be able to easily find your most important pages and you don’t risk losing those users because they aren’t sure how to find things on your site.

5. Your Buttons Need to Be Easy to Click

Smaller screens make it more difficult for users to click on your buttons. It’s your job as the designer to make this easier for them. You can do things like add padding on your button; this will make the clickable area larger. Making the button slightly taller can also help.

6. Consider Designing Your Site Mobile First

Most people design on their desktops and then check how it works on mobile. But if you want to focus on your mobile design, you can do this in the reverse. Design for mobile and then check how it looks on desktop. This means you will think about your mobile design elements first and will change how you think about your design.

7.Test, Test, Test

This is the most important tip on this list. Test your mobile design regularly. Click through multiple pages and see how intuitive it feels. When in doubt, ask someone else to test it for you and provide feedback.

What did you think of this article?

Rate This Article

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

Join Our Newsletter

function runOnFormSubmit_sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5(th){ /*Before submit, if you want to trigger your event, "include your code here"*/ }; #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 .quickFormHorizontal [name=SIGNUP_SUBMIT_BUTTON]{ white-space: normal !important; } #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 #customForm *{ -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; word-break:break-word; overflow-wrap: break-word; } /*** RESPONSIVE START */ @media only screen and (max-width: 200px){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 #SIGNUP_BODY{ max-idth:200px !important; margin: 0px auto !important; } #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 #SIGNUP_PAGE{ padding:0px !important } } /*Major Mobiles*/ @media screen and (min-width: 320px) and (max-width: 580px) and (orientation : portrait){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 [name='SIGNUP_BODY']{ max-width:100% !important; margin: 0px auto !important; } } /* iPads*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 [name='SIGNUP_BODY']{ max-width:760px !important; margin: 0px auto !important; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 [name='SIGNUP_BODY']{ width:1016px !important; max-width:1016px !important; margin: 0px auto !important; } } @media screen and (min-width: 475px) and (max-width: 980px) and (orientation : landscape){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 #SIGNUP_PAGE{ max-width:100% !important; padding:0px !important; } } /*** RESPONSIVE END */ .quick_form_8_css form{padding-top:10px} @font-face {font-family: "Open Sans";font-style: normal;font-weight: 400; src: url("https://webfonts.zohostatic.com/opensans/font.woff") format("woff");} @font-face {font-family: "Open Sans";font-style: normal;font-weight: 600; src: url("https://webfonts.zohostatic.com/opensanssemibold/font.woff") format("woff");} @font-face {font-family: "Open Sans";font-style: normal;font-weight: 300; src: url("https://webfonts.zohostatic.com/opensanslight/font.woff") format("woff");} @font-face {font-family: "Open Sans";font-style: normal;font-weight: 700; src: url("https://webfonts.zohostatic.com/opensansbold/font.woff") format("woff");}
  Thank you for Signing Up
  Please correct the marked field(s) below.
1,true,6,Lead Email,2

Recent Articles

test drive a website


Jo Seton
Jo Seton
Hope Coalition, Red Wing
Read More
"HOPE Coalition can thoroughly recommend Beau! He did a great job on our website, adding features we'd long wanted and "migrating" it successfully to a platform that is much easier for us to use. He's excellent at problem solving, and understands that non-profits operate on exceedingly tight budgets. Most importantly he takes the time to really listen to a client and to speak plain English (instead of "tech-ese")!"
Lindsey Lowther
Lindsey Lowther
Ed's Plumbing & Heating, Lake City
Read More
Definitely worth a 5-star rating! Beau takes time to make sure you have everything you want/need, and he made the entire process so easy. Pricing was excellent, delivery was fast, and we will certainly be working with Beau in the future. Highly recommended!
Captain Jake
Captain Jake
Swanee's Tackle, Bay City
Read More
" Best marketing guy around period listens to exactly what you want and then exceeds that by far will continue to do business and recommend his services to anyone ."
Stephanie Elsen
Stephanie Elsen
Red Wing
Read More
Beau Brewer Digital gets an A+++!! I have worked with Beau in promoting a large community event, as well as during my campaign for city council. First off, he is wonderful to work with. He listens and provides honest, helpful feedback, which helps projects become the best they can be. His knowledge of digital marketing is exceptional, ranging from the building of web sites to new tech like tracking pixels etc. I was always impressed with his suggestions and recommendations as well as his work.
Scroll to Top