Can I just say, as someone who got a BA in Journalism – one of the oldest forms of communication – I never thought I’d be writing blog posts with words like “mobile-friendly” and “UX” in the title. Who even am I?
Alright! This week, I’m going to lay out some of the ways you can make visiting your website on a mobile device a much better experience for your users (hence, user experience).
While your site may be mobile-friendly by this point, it doesn’t necessarily mean you’re providing a top notch site that’s easy to use. As in, your words may be legible without zooming in, but if your blog posts are really long, or you use a lot of images, then that means a ton of scrolling to the bottom, and then scrolling allll the way back to the top.
Pain. in. the. butt.
Give the people what they want - an efficient website that doesn't make them work. Click To TweetWe are all busy #girlbosses, right? So we need to make sure we’re providing quick, easy-to-use sites that don’t take up time. We’re going to nail down this mobile thing this week. Ready amigos?
As I mentioned above, it’s the absolute worst when you’re reading something on your phone, scrolling along, happy as a clam, and then you get to the bottom and realize you have to undo all that scrolling to get to the top again! Sorry, thumb. Let’s cut that out ASAP by adding the Dynamic “To Top” plugin to our sites. That’s the one I use on my site, and it’s just a cute circle with an up arrow in the middle. Let me tell you, it’s straight up magical to be able to hit that button and watch it scroll back to the top for me. Your users will be much more likely to stay on your site if you give them this handy option.
You know what’s not fun? Visiting a website and seeing a mess of a menu at the top. Having to zoom in to click on the teeny one word menu items – that’s not fun. Most WordPress websites have a built-in hamburger menu (the menu with three lines) that show up on screens typically less than 800px wide. If your site does not have that capability built in, I highly recommend the Responsive Menu plugin to do the trick. This plugin allows you to customize the menu so that it fits your brand and style.
Columns instead of tables
This is a favorite of mine. If you use a table for anything on your site – like pricing for packages, shipping information, lists of your favorite FRIENDS episodes, etc. – it’s time to switch that table to columns. WordPress uses columns because they can resize and reorder to fix various screen sizes. Tables don’t do that. Here are some examples:
Need I say more? Columns win all the way, both on desktop and mobile. Can you imagine how many hours you’d spend trying to make the pricing line up just right in that table for desktop? Fuggedaboutit.
Incorporating columns into your site is totally possible, even if you don’t know code. The easiest way, if you don’t want to type the code yourself for columns, is to use the Column Shortcodes plugin. It does the work for you!
Test the real UX
I highly recommend you do all of the above for optimal UX, but the real game-changer is having people check your site out on a phone and see how they use it. Do they get stuck in a certain spot? Are they continuously scrolling? Can they read the things you’re saying to them? Do your images make the same impact on a mobile device? These are all things you should look for as they check out your site.
CSS for Web Designers
Learn more about my upcoming CSS for Web Designers course, and get useful tools + tutorials to make you a better web designer.