Why Websites Look Different On Various Devices And Browsers

YouTube Marketing

Podcast:


Transcription:

Good morning internet fans. Ryan Perry here, Simple Biz Support. Today is Thursday, July 28th, therefore it is Internet Marketing Thursday. Therefore I do have Virginie Dorn with Business Website Center. Good morning, Virginie.

Virginie Dorn: Good morning, Ryan, how are you?

RP: I’m doing great, thank you. Your hair looks very nice today.

VD: Well, thank you. I brushed them.

RP: Today we are going to talk about the one thing we can’t control, and that is why do websites look different on different computers, different devices, different operating systems, and even different web browsers. There’s just so many variables out there and I could just imagine you as a designer, when you build it, you want it to look a certain way. Or corporations who actually are very strict about their logo, using the right color and symmetry of the logo, and all those type of things. But there’s a lot of variables out there that are fighting that process.

VD: True, and it’s often a frustration. Not just for us, as you mentioned, the designers, as we like our design on our favorite browser and then look at it on a different browser, it looks different, but also for the customer. So today’s goal is not to truly explain in IT terms why a monitor is showing the same website differently from another and so forth, but to explain what all the conditions then can render those differences, and that that’s okay. It’s never going to be exactly the same. As long as it looks really nice on all those browsers and all of those computers and all those monitors, you should be satisfied with the quality of your website. There’s something at one point you have to stop and say, I can’t stop adjusting the code to make it perfect because it’s never going to be a possibility. It’s not just the font. Sometimes it’s the color, the lightness, the shadowing, the corners even. There’s a lot of different web elements coded a certain way then will render differently.

RP: Yeah, and the reality is there’s just too many variables, and then you throw the fact that we want our websites to be responsive. So it needs to look good on a large monitor, a medium tablet size, and then a small smart phone, if I can enunciate correctly. There’s too many variables, and ultimately, one of the things that popped in my mind was the fact that if you know what your target audience is, you might want to skew towards that. If you look at Google Analytics as an example. It’ll actually tell you if they’re running, I believe PC or MAC, and what browser they’re using. And even smart phones, it’ll tell you the different types of smart phones or tablets they’re using, and if you have a core audience that you really want to niche down to, then you can design towards that device and that audience.

VD: If you are a well-established website, and you have that Google Analytics, look at the data first. This will tell you where you should look your website. So if they’re using Firefox and not Chrome, use Firefox to use your website. If they’re using a Android phone, that’s where you want to spend most of your attention. But in many instances, people either don’t have Google Analytics or just installed it, or maybe they’re trying to target a new audience and they’re not too sure what those people are going to be using. In such case, there are some internet standards which we can review today on which browsers you should look at your site on and the resolution of your computer and so forth. Let’s get started first with with the computer and the operating system. We all know there’s Macs and there are computer… PC’s. The same website will look different on a MAC and a PC. It’s very well-known, they’re both different companies, they program their operating system completely different ways as you all know. And because of those differences in their programming, it will render websites on the same browser differently if you’re on your MAC laptop or your computer, your regular PC.

RP: Yeah, and that’s one of those things that you’re simply not going to be able to change. It’s not an environment that you can control. It’s interesting, because I think the most lay people would just go, “Well, a computer’s, a computer’s, a computer.”

VD: Correct, but let’s take a look at a very simple example: Buttons on a contact form. For instance send now, sign up right away, send the form. Those buttons, when you code them, they come with a default styling, so unless your webmaster has hard coded the styling of a button, they will render a very specific way on PCs and a different way on MAC even with the exact same code for the button. The MAC would just typically will have more of a gradient, and more rounded corner while a PC tend to be more angular in it’s format. But again, we are referring to the exact same code. Your webmaster can make an attempt at hard styling the button to make sure it shows the same way on all devices. But even then, there are some types of styling then are… A MAC will overwrite on it’s own. Have that conversation with your web masters and. Again, be patient and understand that sometimes there’s so much you can do to overwrite, especially a MAC computer, which are very strict in the way they render websites.

RP: Okay, and earlier we were even talking about fonts. That some fonts will render differently between one device and another.

VD: Yes, I mean even if you have the same font like Helvetica or Arial on even different computers, different PCs or between a PC and Mac, they have variations of those fonts. They might be a little thinner on one computer, even with the exact same font. And again, this is not something you or your web masters can deal with. What you can do is look at that font, and see if it’s a good option however it’s rendered. And if you don’t like it, just find a different font that is more acceptable to you. And that even happens if you’re using Google font. Your operating system for your visitors at the end can override anything you do. You can even set your browsers to not show images. So if your client or your visitors has their own unique system and settings, they can overwrite the work of your webmaster.

RP: Right. So that’s just the hardware side, the computer side. What about monitors? I mean, there’s so many different monitors out there. Even some people now are going to… Is it 16:9? More like the movie style monitors I’m seeing.

VD: Yes.

RP: It’s just there’s all different types of the ratio. You know, 4:3 versus 16:9 versus, I don’t know what else is out there. The different size of monitors effects resolution. On the Apple side, they have the retina monitors, which are really high end. Plus, you can buy really cheap stuff, too, if you want to.

VD: Yes. In terms of monitors, now they have the more of a landscape shape. None of the portrait like we used to. Or they used to be very square-ish. Nowadays, it’s more like 12… I think they’re 1280 by 1024 is the common size monitors. It’s actually quite a large monitors, but they became so affordable that you can’t even find a small screen when you go to a retail shop like Best Buy or Home Depot. You’re stuck with those large monitor. Which we love, by the way. So when you look at your website on different monitors, which your webmaster should be doing, again we recommend the 1280 by 1024 which is the recommend standards as of today. This can change of course, but I understand there are new monitors that are very elongated horizontally. Those are great. You should check your website there, but your focus should always be on the standard, what most users are going to be using to view your website and its pages.

RP: Alright. And then, of course, let’s get into software, ’cause you can actually go in and tweak the settings for your monitor. You go in to the video card, you can adjust things. I know TVs, when you go, like you mentioned Best Buy, typically they have the saturation pushed up, they want everything to look really bright and poppy. And a lot of times, those aren’t the best settings for viewing a website that was designed on a monitor, that was properly color balanced.

VD: Yes, correct. Very correct. So monitors, they come with a manufacturer’s setting. You can override it, just like your TV. And even within the same manufacturing company, different monitors will have different settings. So it’s very difficult to watch your website on all those possibilities because it’s pretty much endless. But again, you want to look at the monitors at maybe 3:2 resolution, which is common. Don’t do something, the 16 that tends to be really big and childish. You have to trust your web design team, and they know what they are doing when they are doing the compatibility check, which we call in our team. Towards the end of the project, they would take your website, which pretty much is a complete product now, and take a look at it on different operating system, different monitor sizes, different resolutions, different devices. And then they make small adjustments, just to make sure it looks really good in all those places even though it may look slightly different. So, again, just go with the standards, unless you have very good analytics that tell you exactly… Which I don’t think they can, tell you what monitors they’re using but can tell you the operating system, but truly they cannot tell you the screen size, as of today.

RP: Right, and you can’t always tell if people are looking at your monitor head on, a little bit off to the side. I mean, just making small adjustments in height and the angle that you view the monitor is going to effect the colors also.

VD: Yes. The color changes is one of the biggest concerns for most of our clients. You can even do a test today. Look at your website, stand up and look at the colors now. Then sit up and you will see the dash might look grey, and the white may… I mean, it’s really incredible by just moving your position and with the same monitor, it will look different. Also, if you have a tint on your screen, or anti-glare screen, or if you’re on your laptop, they tend to be darker. There’s so many different component. What you want to do is sit at a normal position and when most of the people are going to be, you know, 12-18 inches from their monitor. Look at a regular computer, regular monitor, and take a look at it. And if it looks perfect there, then you should be satisfied with that. But yes, colors will never be perfect. Yes, it’s a constant battle for us, especially with corporate office where we have a lot of people to deal with and they’re all checking out the website and the development in their own computer, but nobody’s quite seeing the same thing. The orange is a little lighter on Joe’s computer, and Bob is saying, “No, it’s too dark.” Our goal is to just be Switzerland and bring everybody together and it’s…

RP: Yeah, and then we have these devices, you know? And these devices, typically, most of them will automatically adjust. Our smartphone will adjust based on ambient light. When it’s bright outside the screen will get brighter, when it’s dark it’ll get lighter, but every manufacturer’s using different sensors, they have different software, and so who knows at what light level this phone is versus some other phone?

VD: Yeah, and you can adjust your lighting on your phone, too. So if you like things to be brighter, they will look brighter, and so yes. So the devices is going to make a difference as well. So again, it all goes back to as long as your website is coded properly, respond well to mobile devices, and the layout looks good, then in most cases the colors is right on line with your branding, you should be satisfied and focused on other things, like writing good content and providing good images.

RP: Yeah, and I think the big takeaway for those people that are concerned is just you have to realize that there’s so many variables that are out of the developer’s hands that you cannot control. You can’t control what PC or Macintosh, what monitor they buy, the settings of the monitor, are they on a smartphone where they like a dim screen versus a bright screen? Are they actually looking at the monitor square, or looking at it tall, or looking at it low, or at an angle? All those are going to affect the color, the look, the feel of a website and like you were saying Virginie, essentially, you gotta go “Look, let’s come up with some standard. This is a nice monitor. It’s decently calibrated. I’m looking at it 12-18 inches away and I’m looking at it square. I’m not standing up.” And if that looks correct and the colors are close, there’s a big difference if it’s blue versus purple, but if it’s blue but it’s not the exact shade of blue, ultimately you gotta be happy and you gotta move on, and the reality is people aren’t always going to know what the exact shade of blue is. So if it’s off a little bit, it’s not going to affect the consumer.

VD: Correct. Yes, it won’t affect them. They won’t know the difference, ’cause they are not comparing your website from places to places. Only you are, as a website owner, of course.

RP: Right. Alright, perfect. That is it then for this week’s show on why do websites look differently depending on where you look at them. Any last second comments?

VD: No, it’s a bit of a boring subject, but just go with the flow. Again, if it looks great on the monitor that is used the most by your visitors, thanks to your Google Analytic, be satisfied with that and focus on running your business.

RP: Alright. Perfect, I love it. Focus on running your business, that’s really what we should be doing. Virginie, as always, I appreciate the time and energy that you put into the show, and I look forward to talking with you again next week.

VD: Good bye.

RP: Alright, everybody, that’s it for today’s show. I hope you have a great weekend. We’ll talk to you next week.

2017-10-13T23:15:26+00:00

About the Author:

Ryan Perry is the CEO of Simple Biz Support, Inc. Ryan started video blogging in 2009 as an alternative to written blogs to create visibility and credibility online.

Leave A Comment