Why does my Website Look Different on Every Device?

Why does my Website Look Different on Every Device?

When you are developing your Champion WordPress Website it’s a good idea to gain a better understanding about browsers and devices. How your Champion Website looks on one device in one browser may not be the same as it looks in any other browser or device.

And this is OK!

There are over 1000 devices that can access your website.

Let’s let that sink in for a moment.

Over 1000 devices with different screen sizes, number of pixels, web browsers, touch devices, audio devices (for vision impaired people), and wearable technology like the Apple Watch and Google Glass.

Does it sound complicated? Well welcome to the world of your web designer.

How can we possibly design for this variety of devices and screen sizes?

Good question. We can take a few approaches.

The most popular approach to dealing with multiple screen sizes is called Responsive Design.

In responsive design the website layout “responds” to the screen width of the device loading the page. The most common approach is to design for small screens to large screens with a range of screen widths, or “break points” in web designer speak.

Some of the most popular screen widths are:

  • Less than 460px (small screens like smart phones)
  • Greater than 460px (devices like iPads and Android tablets)
  • Greater than 768px (large tablets, laptops and desktops)
  • Greater than 1200px (larger screened laptops and desktops)
  • And so on…. if you want to target plasma screens for example

But each WordPress theme will implement their break points slightly differently to others. There’s no right or wrong here, just what’s more effective and efficient.

So what are the most common screen sizes? You can View the most common screen sizes for web browsers on W3 Schools. It’s a good idea to understand which screen sizes you are targeting, because then you can make informed decisions about which layout issues you want to fix, and which ones are not worth bothering with.

If you only see a layout problem at a screen size used by 2% of Internet users on 1% of browsers – it may not be worth spending hours fixing it. If, on the other hand a layout problem exists for Google Chrome (currently sitting at 64% of Internet users) then that is a bug definitely worth squashing.

It is quite a challenge to make a web design look perfectly on every single device ever.

However – if we target the most popular screen sizes then we will get more than 90% of Internet users to have a good experience with your website when they load it on their phone, tablet or desktop.

That is achievable.

But – this button looks different on my iPhone, than on my Internet Explorer

Yes. It does. And there’s nothing anyone can do about it.

Why?

Well, Apple have decided that buttons on websites must look like buttons in their Apps so they override the styles your Champion Web Designer creates and impose their own button styles.

But you know what? It doesn’t really matter. In life you need to pick your battles, and choosing a fight with one of the largest companies in the world about how your submit button looks is not a good idea. Besides – your users expect that button to look that way on their iPhones now – because they never had a chance to see it any other way. So it’s not a problem.

But my site looks different on my work computer

Yes, it does. If you work for a large company, in education, or for the government then your computers are tightly controlled and managed by… duh duh duuuuhhhhh…. the IT department. Yes, Those folks down in the basement who play computer games all day and say “Did you turn it off and back on again?”

If this is the case  then you could be stuck with an old version of Internet Explorer, or stuck with a poor quality screen, or a thin client. Each of these situations are not the best way to get a good experience on a website. Fear not, though you can always look at it on your own phone, or when you get home from work…or drop down to the basement – because the IT department have got all the best gear.

What’s the bottom line?

  1. Websites look different on every platform
  2. Websites are for achieving your business goals
  3. If your users are engaged and interact with your content, and spend a long time on your site, then you are more likely to achieve your goals
  4. The things that really bug people are slow page load times, indistinct messages and confusing navigation, not small design niggles.
  5. Website users satisfice their way through your website on their way to achieving their goals.

The best thing you can do is understand how you can help your website users achieve their goals. Then design a site to help them achieve them. Only a small part of this is design. The more important aspects are to develop a vision for your Champion WordPress Website, understand your target market, and give people what they want.

When you help other people get what they want they are more likely to give you something in return. Even if this is only their attention.

Can we help you get your Champion WordPress Website designed and built?

Contact Nuttify today.

Like what you see?

Find out how we can build a champion website for you.

Call Nuttify today 1300 688 4391300 688 439
or send us a message