I don’t get it! My site looked totally different on my other computer!
Too often, I hear comments about how a site doesn’t look the same at work as it does at home, or on a different device, colleague’s computer, etc. In other words, it seems like the website is somehow broken when in fact, different computers (and by extension: different browsers and operating systems) make sites look different. Is that possible? Is this a thing?
Yes, it’s a thing and there are legitimate reasons behind this [seemingly odd] phenomenon.
Web Standards and Compliant Code
Website browsers are just vehicles that interpret websites so you can view them on your computer. Each browser is essentially a program or application on your computer and behind the scenes, they each have slightly different code which reads, renders, and interprets if you will, what is on a website. In turn that browser will display a site how it’s interpreting the code based on the way that particular browser has been coded. The fact is, not all browsers are the same which means the interpreted website may appear different in each, no matter what kind of computer your’e on. There are ever-changing industry standards for the web, but unfortunately, not all browsers keep up or have been coded to comply with all these standards. These variances cause things to vary when viewing a website. Text is usually the most obvious difference. Weight, size and color may be different. A simple test: look at a website on a Mac and then on a PC. You will notice differences, no matter what. There are also certain effects (such as shadows, borders, and other more modern styling methods) that may or may not show up depending on the browser.
Color Rendering
HD screens have become very popular, if not the new standard for many computer users, device screens, and preferences of the consumer. But that’s just part of the visual rendering differences a user may experience.
What we have to understand is that some folks are still using the older model CRT monitors, or they nay just have an older monitor that haven’t yet reached their “end of life cycle”. Oddly, these days, when you refer to some technology device, “older” isn’t as old as you might think. Something that is 5 years old is far more obsolete or outdated than it was 10 or 15 years ago.
So what’s a CRT monitor? Alright, so you know, those massive monitors we used to have with the huge asses on the back and weigh about 1,000 pounds. THAT. No, there’s nothing wrong with them (cough), but with age comes usage, wear and tear. Those monitors have color tubes (like old tvs) and eventually one of those color tubes start to lose it’s crisp color and bright display. If you have one of these bad boys still in use, you’ll know what I’m talking about. Things strangely seem a little more blue, or green, or red than they should. This alone will definitely impact what a site looks like (if viewed on a CRT monitor) compared to someone with a newer device with an HD screen.
Still, even with newer and more updated monitors, colors eventually fade, calibration is not done or simply neglected. What this means is that just based on the monitor’s age alone, there are an infinite number of possible color variations without knowing with any certainty, just what monitors are still in use or what a user will see and experience.
And keep in mind, the web is completely different from a printed piece, on which color can be precisely controlled (especially if color critical accuracy is necessary). It is not possible to do this with millions of monitors on even more devices in use.
Neglecting browser and software upgrades
This section title speaks for itself. Browser updates (for the most part) introduce new features, security patches, standards compliance updates, and other rendering improvements. If you don’t/refuse to/ignore/can’t update your browser, or perhaps are still using obsolete browsers (like any version of Internet Explorer which has been retired for close to a year), anything prior to v7 (possibly v8 and if I’m guessing correctly, all fo them) IE isn’t even supported by Microsoft (cough-cough).
Based on browser updates alone, you can’t expect to receive the same visual experience on an old version of ANYTHING as you would in newer versions, right? Compare an old analog television to an HD version and you’ll know exactly what I am referring to. New cars are great examples. Take a car like a Toyota Corolla for example. Do you think that the model from 5 years ago will have the same features as the one that just came out? Of course not.
What is crucial to note and understand is with the rapidly changing web code standards I’ve mentioned, browsers that are not updated to the most recent version may expose you to security risk. They will most definitely not be as compliant with newer web coding standards, and other issues we don’t have time for. This ultimately results in visual rendering issues and is 100% problematic for consistency.
Takeaway: Always make sure your computer, installed apps, and especially your browsers are up to date.
Individual User Settings
This is probably one of the biggest and most common challenges in web. It is also the primary reason websites are guaranteed to look a little different on every computer or device. Think of how many millions of people have computers (if not multiple computers). I have 2, plus a smartphone and a tablet. They are all slightly different ages and sometimes, I do notice a slight variance in what I see. I expect that but many people don’t realize this is even possible.
The beautiful part of personal computers is in the name: “Personal Computer”. We have the ability and flexibility to customize an infinite number of settings on our computers and devices. This is how we create our individual and optimal usage and workflow, and experience. Once again, with these customizations come even more variance.
Every single user can alter screen solution, calibrate for color, increase or decrease brightness, enlarge font size, zoom in or out (sometimes referred to as changing screen resolution), to name a few. You get the idea right? Especially since you are reading this on your own device which is likely different than the one on which I wrote this article. More than likely, you have customized everything to your liking and enjoyment. Even on your phone, this article may appear different to you.
And yes, you guessed it: I have absolutely no control over what you have done on your devices.
The challenge
All of these settings are virtually impossible for website designers and developers to anticipate since there are an infinite number of customization combinations, as I have outlined in short lists above. Even screen size is an issue.
One person may have their monitor set to view at a resolution 800x600px but the site might be best viewed or experienced at 2-3x that resolution. The reverse is also true. Therefore, the site will not look the same for these different users, by default (just as I have my phone text set to the smallest, I have friends who change text to a much larger size for easier reading. Let’s face it, we get older and one day our eyes can’t handle the smaller fonts. Sigh. You know what I’m talking about, don’t you?
Is there a solution?
Yes. But it’s a little more complicated than saying there’s a solution, and in my opinion, not a simple yes or no question. Developers can do certain things to address some anticipated variances but because there is an infinite number of possibilities, it would take a lifetime to code it properly which just renders the site totally cost inefficient, or by the time we’re done, new techniques have been introduced.
Why? Styling a site has become more robust. It’s much more fun and interesting to try new things when styling a website, but I will even admit that by the time I’m done with some sites, I discover new techniques that I didn’t use on the last site I created and certainly won’t go back to recode everything only to encounter the same problem again in 3-5 months. There are elements we have to consider today that we never used to have to deal with including, but not limited to:
- Responsiveness for different size browser windows
- Different resolutions as mentioned
- Mobile
- Devices like smartphones and tablets; and today there are at least X different mobile and tablet sizes (in addition to the laptop and desktop monitor sizes)
Responsive Sites
The introduction of responsive and adaptive websites created a multi-challenging issue for web developers:
- Anticipating the different points at which a site will respond to a screen size, and
- Evolving changes which may create a trickle down effect to other elements on a page (as mentioned above)
There are easier ways to style sites to respond in a more fluid way so less will need to be adjusted if elements change in the site design, but there are important User Experience (UX) aspects to consider: the intended audience for a site is the primary focus when designing a site.
Mobile Devices and User Experience
With the ever increasing usage of mobile devices used to search and use the internet, it is CRUCIAL that the mobile experience is as great (if not better) than what a user would experience on a desktop get. Each site has an intended audience and yes, some sites may not receive as many mobile users as others (and vice versa). Therefore, knowing that information is useful when designing and developing a site. The more information and data the designer has, the more likely your variances will exist.
Interestingly, in my experience, I have found that sites which have fewer mobile users have been the direct result of a site that simply does not provide a good or proper mobile UX. So the site will either have lower traffic overall, or the visitors become accustomed and just know they need visit on desktops which can skew traffic data. Either way, improperly coded sites which do not address mobile users is a huge missed opportunity to reach people. But, I digress.
Specifically as it pertains to viewing consistency, creating a fluid, responsive, adaptive site for the best mobile UX will always fluctuate per user. An iPhone 4 or 5 will most definitely render a site a different than the 6/6s or 7. And lest we forget the Phablets and tablets sizes.
Based on all of this, you will probably agree it is important to know your audience, and track visitors activity on your site using something like Google Analytics or any of the other many tools available today. The data it provides greatly helps you and your designer plan for a larger number of scenarios.
The Old School Method
(Cough-cough. For the record, this is NOT the right way.)
I choke on the following words but feel it is necessary to explain since there is always someone who will argue: “YES YOU CAN MAKE THE SITE LOOK THE SAME!”
Aside from the more advanced coding and styling techniques… Okay fine. Nothing is impossible and pretty much anything is doable but here’s the thing: The only true foolproof way to ensure that a site will look (almost) exactly the same in EVERY browser is to use outdated and very unconventional methods to create a site. These methods don’t follow current web standards, do not provide a good UX for visitors, and ultimately are pretty bad for your SEO (if you’re into that sort of thing).
One can create and develop a site using static images showing the exact desired layout (for everything – including text), and yes, with this method you can achieve the consistent results you long for. So again, yes, it IS possible. BUT, I do not recommend it, nor would any web designer I know, encourage this practice. It is impractical for various reasons:
- It will KILL your SEO
If everything on your site is an image, including the text, search engines won’t have much to index. You can use alt tags for you images but even if you do this and over stuff keywords and tags with too much text, your site can be viewed as spam by search engines and potentially get blacklisted or drop drastically in SERPs. Even worse, last year Google started penalizing sites that were not mobile friendly. And what I’ve described above is just that: not mobile friendly. Sure you’ll see the site and it will look how you want, by it won’t respond to smaller screens properly. This will single-handedly make your user’s experience poor. You’ll suffer as you see your traffic and rankings drop in SERPs (Search Engine Results Pages). SEO is not dead, no matter what anyone tells you, and it does matter if you’re pushed back to page 10 in Google. Studies show that most folks don’t click past page 1 of the results. - Professionalism
These days, having a website created from all static images can be spotted a mile away, even by a novice. Compared to newer websites which are properly code to be responsive and follow industry code standards, a site built from all static images will look and behave very different and that’s just not professional for your business. An example would be that site you visit and you have to pinch and zoom in to simply READ what is on the page. The content on your page should easily adapt to the size screen on which it’s being viewed and your visitor shouldn’t have to do anything to consume your content. - Costly updates/revisions
When a site is coded correctly, it can take as little as a few minutes to find and replace a misspelled word, swap out a new image, and be done. Of course ‘results are not typical’ (gratuitous disclaimer) but for matter of fact, it does matter when time and money are an issue. If everything on your site is created as perfectly designed static images, the editing process is more complicated and time consuming. You (or the web dev) will have to first find the original/native art file used to create that web image which contains the image and text, edit the text and potentially move things around and reformat things shift based on the new text or image composition, re-save, optimize the image for faster loading time, and finally upload the new image to the server. And that is just for one image change. ONE! Imagine if your site had changes like this needed on every page and you had 20, 40 or even a hundred images? That is potentially HOURS of unnecessary editing costs you can avoid by having your site created properly from the start.
In summary, it’s important to understand what really goes into creating a website, including planning, design and development. Making a website function well no matter what device it’s on to provide a great UX, will far outweigh if a color looks slightly off on your work computer’s old monitor from the early 90’s.
Let’s talk about YOUR Website!
If you’re struggling with your website and want to get it up to snuff, we’d love to talk to you. We want to know what makes you tick, learn about your business and help create a great website to boost your business image. What issues are you having with your site? Does it need maintenance, love, and attention?
We want to hear from you. What are the challenges you are facing with your site? Traffic? Speed? Does it look out of date? Or does it simply not look the same on different browsers?
We can help you with all of these issues.
Complete the quick form below and we’ll get back to you quickly to set up a time to chat.