Sunday, June 20, 2021

Find out why your website might look hideous on mobile

Testing on every device is hard. Just when you think you've got it mastered, you' find something new...and ugly.
smartphone in hand

Picture this. You’ve just unboxed and set up your brand new smartphone. 

As you toy with the settings, you decide to check out your website on your new device. You put your URL in the browser and voila! 

Hello gorgeous and…oh no! It’s hideous! 

Dark Mode Shock

This is what happened to me the first time I checked out my website in  “Dark Mode” on a smartphone. The most noticeable problem is that you couldn’t see half the logo. 

This was a neglected space in need of immediate attention! Especially now, as more and more visitors access websites on their smartphones. As of April 2021, 56% of web traffic came through mobile devices.

Given the rise in smartphone traffic, it should come as no surprise that Google has announced their search engine will prioritize mobile over the desktop. Google will also give more weight to page speed going forward. 

With that in mind, we all need to focus more on quick and nimble websites that look great across devices of every size and shape. Even in dark mode. 

With that in mind, here are three tips for making sure your website is up to snuff in 2021.

#1 Have a Responsive Design

“Responsive design” means your website adapts well for viewing on multiple devices, including mobile, tablet, and desktop. By now, you’ might think everyone’s website is responsive, but that is not the case. 

Millions of websites are still out there, frustrating mobile users who pinch, scroll, and cuss to no avail. 

Nowadays, most platforms add some sort of responsive design as a standard feature. Most even give you previews options for mobile, desktop, and tablet. 

If your website is not responsive, visitors will leave. In 2021, every website should be responsive.

#2 Test, Test, Test!

As I mentioned above, most platforms now give you the option to preview your website. Previews are a great place to start, but there’s no substitute for actually viewing your website on various devices. 

The more real-world scenarios you can test, the better. Here seven ideas to consider:

  1. Preview desktop, tablet, and mobile in your design tool, but don’t stop there.
  2. For mobile, test on both iPhone and Android in light and dark mode.
  3. Test on Chromebooks and tablets.
  4. Test on laptops and desktops, with big and small screens and low and high resolution.
  5. Test on a fast connection and also on a slow one.
  6. Test using major browsers including Chrome and Firefox.
  7. User your analytics to see how your visitors access your site, and heavily test the most common configurations. 

If 2/3 of your users access your website through mobile and over half of them are using iPhone, you can’t afford to skip testing on iPhone.  

#3 Choose Great Tools

Use the right tools to build a great foundation for your online presence.

WordPress

There’s a reason WordPress is the most popular content management system on the planetIncredibly, it’s also open source and free.

Astra

If you choose WordPress, consider using Astra for your theme. After experimenting with many different themes over the years, I’ve found this is one is by far the best. It’s flexible enough to use for all or most of your clients, and it’s fast. 

You will notice that lots of themes have serious flaws, especially when you start testing across multiple devices. There’s a reason Astra is “The Most Popular Theme of All Time.” 

Elementor

Once you have your Astra theme installed, consider adding Elementor so you can design like a pro without ever writing a single line of code. Maybe that’s why Elementor is “The World’s Leading WordPress Website Builder.

It takes a minute to learn Elementor, but once you’ve go it, you can do just about anything with this tool. 

A Solid Foundation

The three most popular tools on the planet are a winning combination. They work together to make your website amazing. And they’re all free (though the premium version of Elementor is well worth the price).  

Adjusting for Dark Mode

With all that out of the way, now it’s time to discuss what to do with a site that’s ugly or broken in dark mode. 

First, actually go look at your website in dark mode. If you’re lucky, it looks great and you’re done. 

Most of the time, you will need to make some changes. Does your logo have black text or dark design elements? You may not even be able to see your logo. 

A Quick Fix

You can find more sophisticated solutions, but one easy solution for your logo is to place it on a light background. Since the header on my website is pure white, I traded the transparent background I’d normally use for white. 

This is not a beautiful solution but it does make my logo visible and readable. It will do for now.  

Light Mode

light mode

Dark Mode

dark mode

An Easy forever Fix

Dual User Logos

If you are designing or redesigning your logo, you might create a clever design that works in both light and dark modes. 

If you need help finding the right colors, check out color hexa where you’ll learn everything you ever wanted to know about colors and more.

light mode logo
dark mode logo

Conclusion

You may be wondering if dark and high contrast modes are really worth the fuss. The answer is probably “yes.” 

There are people who prefer dark mode and then there are those who can only access the internet through dark or high-contrast mode, and you don’t want them to be left out.

With a little extra effort you can deliver a great experience to the widest possible audience.

Share this...

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest