How To Create a Mobile-Friendly Website Design With Ease

Reading this on your phone?

If you’re like over 65% of my website’s readers, the answer is probably yes.

Which makes me laugh, because I deeply remember the days where accidentally accessing the internet on my flip phone rang up a bill large enough to be grounded for an entire week… and then the days where my very first iPhone *could* browse the web, but I didn’t know why anyone ever would because it looked so very bad on that tiny screen.

And now, I carry the world in my pocket – because we know I am absolutely not wearing something without pockets – and do most of my recreational Internet-using from a device smaller than a Pop-Tart. So while I love teaching bigger, more recognizable ways to make your website stand out – here's a covert way to do it that makes an even larger impact.

How to Make Your Website Mobile-Friendly

We all lean heavily on our smartphones, which means that your website needs to be ready and polished to be explored on both a phone and a computer. More than 54% of all website traffic comes from mobile devices, and major tech companies are absolutely rising to the occasion and leaning into this trend.

In fact, in 2020 Google announced mobile-first indexing – meaning that when their bots crawl your site, they’re looking at it like they’re a mobile device/smartphone first (sometimes only). 

Seriously – don’t sleep on your website’s mobile design.

Having a mobile-friendly design it means that you're making things as easy as possible for people to use your website – so they stay on your website, which not only boosts your website’s stats (time on page), but increases the odds that they hire you (whether it’s now or later).

How do I find out what devices my website visitors are using?

If you have a Google Analytics profile set up for your website, you’ll be able to grab this info quickly and easily by clicking: Reports → User → Tech → Overview. 

Here’s an example from a client’s website! The vast majority of her website traffic (84%!) is viewing her site from their phones. And note: less than 1% of website traffic is from a tablet – so yes, while tablets exist, they're not something I lose sleep over while designing a website. Focusing on desktop/mobile produces a result that looks great on all screen sizes, including for the one person who uses the iPad for the Internet and not Netflix or Procreate. 😉

PS – if you don’t have Google Analytics set up, I highly recommend doing it ASAP! Whether you’re planning to use the information now or in the future, Google can only start analyzing your traffic after this is set up. So, spend five minutes doing it now and get your data ready-to-use when you’re ready!

What is mobile-responsive website design?

“Mobile-responsive design” simply means that the elements on your website’s page (like a piece of heading text, an image, etc) are the same content, displayed differently on each screen size.

The main goal with responsive design is to ensure that your website is equally easy-to-use and aesthetic on all devices.

How to Make Your Website Design Mobile-Friendly

Simplify Your Mobile Design

To be clear –  when I say simplify, I don't mean that there will be a quality difference. If anything, simplifying your website's design for different screen sizes actually ensures a higher quality experience for your visitors!

Computer and laptop screens are oriented in landscape (wide + short) mode, while mobile devices are oriented in portrait mode.  Often, desktop designs require wider or more design elements in order to keep them feeling balanced – there’s more white space on bigger screens.

Obviously, key elements (like all of your text and essential images) need to stay on all versions of your website. But if you use any custom graphics for embellishment, or more complex designs on desktop, it’s best to pare those back on mobile.

If you’re wondering how I did this – the answer is Showit! Showit’s website builder allows you to turn website elements on and off for mobile/desktop versions of your website with a single click. It’s one of my favorite features to ensure that a client’s website looks perfect and polished no matter how it’s viewed.

Showit also enables you to turn whole sections on/off for mobile/desktop – I use this feature for blog sidebars, which are a huge part of desktop blog design but would limit the readability of the post content on mobile.

Use Negative Space

Negative space (also called white space or blank space) is one of the most underrated and underused design elements. Typically, when I do a website audit for a DIYer who wants to edit and polish their design a little, the first thing I notice and recommend is more blank space.

This doesn’t mean your website has to be stark and cold – just give your content room to breathe!

Negative space is especially important on clickable items like buttons –  on a computer, the cursor gives you a lot more precision about where you click. On a phone, you’re using your thumb – much less precise.  if you put several calls to action or links  close together, likely your website users won't be able to click the ones they want using their finger on their phone,  and will likely go in search of what they're looking for elsewhere (AKA, another person’s website).

Make Your Pop-Ups Mobile Friendly

Some recommend avoiding mobile pop-ups altogether, but I do my best to avoid saying “always” and “never” – so I’ll never say never to a design element. I will, however, leave you with these must-have tips for mobile pop-ups!

• Don’t do full screen – size your pop-ups to leave parts of the screen visible/accessible to users.
• Give people an exit route – install a button that closes the pop-up, and make sure it’s placed somewhere accessible on mobile. Too close to the sides, top, or bottom of the screen make it hard to click.

Make it Skimmable

This is actually a non-negotiable on all website design sizes for me – but it’s especially important for mobile. People don’t read websites, they skim them.  I actually can't remember the last time I visited a web page on my phone without doing the quick little instant *thumb scroll* through – even if I scrolled up and ended up reading it top-to-bottom as intended.

People are viciously scrolling on your page, so make it easy to understand whether you’re poring over each letter, or skimming the surface & coming back for more.

Use visually distinct design settings for your headings and subheadings (like in this post!) so people can easily identify what’s important.  This also gives their brains the signal that the content may be changing topics each time there’s a heading – so if they can’t find what they want in the first section, they may just be browsing for the next heading.

I also really like to alternate the backgrounds on website sections especially  for mobile because they are scrolled through a little more aggressively –  so sprinkling in contrasting backgrounds helps give that visual cue that content is changing.

Format Text For Mobile

Formatting writing is where I spend a lot of my time when designing responsive websites.

What looks great on desktop, may look awful on mobile – and vice versa.  Text that looks fantastic when center aligned on a computer might only look fantastic when left-aligned on mobile (the above example is from my Rebecca website template – you can see how I formatted the placeholder text differently for different screen sizes to make as brainless as possible for you to have a mobile-friendly website!).  Text sizing needs to be adjusted for all versions of your website, too! Big enough to keep things readable, and small enough that with adequate white space/margins it’s not getting cut off at 3 words per line. 

Some fonts simply don’t render (show up) on mobile – so make sure you’re actually viewing your website from a mobile device instead of just from the website builder on your computer! You can either change fonts to one that’s mobile-friendly, or use a different font in those places (again, one-click change with Showit) on mobile.

Repeat Yourself A Little Bit

Generally speaking, we tend to remember the first and last words that we hear or read. This is called the primacy & recency effect, and it’s why I give equal attention to designing the bottom of a website and the top/header.

 For main website pages you can leverage this effect by adding a call to action at the bottom of the page. This will help signal to those lightning-fast scrollers that they’ve reached the end – so if they’re truly done with that page (and not scrolling back up), they now know where to head next and stay on your site.

If you blog and you have a nicely growing post archive, you can leverage the recency effect by connecting your related posts or recent posts at the bottom of the screen, add a “mini-about” section, or even quick links to your services and offerings (I call this website charcuterie and will not be taking feedback on it, thank you).

The Best Website Builder for Mobile-Responsive Design

You guessed it: my favorite is Showit.

Here’s the thing: building your website on a platform that allows you to manipulate the design on desktop and mobile is not optional.  All of the major website builders have this feature now, so advertising something like “mobile responsive” design is not actually a selling point to me.

I want to know how easy it is to use and how much work it’s going to be for me to use essential design principles to create a great experience on mobile and desktop.

And for me and all of my clients, that’s Showit.

Showit allows you to independently format each element on the desktop and mobile versions of your website. You don't have to create two completely separate websites –  but you can add and hide elements depending on which version of the website you're using, completely change the way text is formatted (size, color, alignment, font, spacing), and more with Showit.

Oh, and you do it without code. Instead, you’ll use Showit’s highly intuitive design app to make quick and easy changes to your mobile site – usually in just a few clicks – without even Googling a tutorial. That's not true for several other major website platforms – where you'd need custom code just to have the same text center-aligned on desktop and left-aligned on mobile.

Want to try my favorite website builder for free? Click here or use the code HELLOCO for your first month of Showit, absolutely free!

If you skimmed this post and thought, “Great – but I don’t have time to do all that,” I’ve got the best news for you: Not only do I have the time to do it for you, but I already did! Browse the website template shop to grab a Showit website that’s optimized for desktop and mobile and ready to help your website readers go from “just browsing” to your new #1 clients.

---

Whether you're new here or a frequent flyer, welcome! I'm Amy Hanneke, brand & website designer for business owners who hate boring. More specifically, I help service-based business owners book more clients & work less through captivating brand/web design and copywriting. I want it to feel super easy for clients to fall in love with you and for you to feel confident in your business, so here's how I can help make that happen:

DONE with YOU

The ultimate starter website launch pack that includes: a website, branding course, and copywriting guide in one (oh, and it’s already designed to be mobile-friendly for you) I poured everything I think new business owners should have and know about their brand + web design into one big offering, then put it into videos, too – so it'll be like I'm designing right alongside you. Learn more here.

DONE for YOU

Fully custom brand identity design, copywriting, and website design. Your job: answering some questions, having some fun on Pinterest, eating some chocolate, hanging out with me on Zoom a few times. My job: Taking all of your brand dreams and turning them into a cohesive online experience that clients can't book fast enough. Learn more here.

Here for the free stuff?

Can't say I blame you – I freaking love freebies. Here's the best of the best:

• Learn my tricks on the blog
• Grab free, instant downloads to help you win at your website
• Hang with me on Instagram
• Subscribe to my every-other-week newsletter for a peek inside my branding brain

Head straight to my inbox

To chat directly, head to my Contact page or email me at amy@hellococreative.com.