Browser Variances

Learn why your website will render with some variations across your members.

Brian Hall avatar
Written by Brian Hall
Updated over a week ago

Your website will render with some variations to all your members and website visitors. A combination of factors at the user level determine what these variances will be. Read on to learn more about these variances and some tips for dealing with them.

Factors to consider:

• Device: Laptop, Tablet or Mobile
• Operating System: Mac or PC

• Browser: Chrome, Firefox, Edge, Safari or Opera

• Hardware: Graphic Card

• Settings: Color Settings/Profiles

• Display Resolution: Retina, Normal Resolution or Lower Resolution

Each user will have a unique pairing from the list above to determine how they view content on the web. With so many variables, the combinations are endless with what each user may have.

"A website is just a set of instructions describing how a site should look. It’s up to the browser to render it by reading the entire code of your website and producing a certain output. There are, however, differences in the code interpretation and different browsers will render the same page slightly differently."

More so, the settings a user sets for their computer, tablet or mobile device can have a huge impact on how they view their site. Think about the last time you went into the settings on your computer and how overwhelming all of the choices you have are.

With so many variances that a user can have, how do we make sure they still have a good user experience on our site?

Tips:

Use Colors with High Contrast

Using white text on a yellow background may work for some settings but this is a risky color combination that may block users from viewing all content. Not sure if your colors work well together? Check out this handy checker.

Make Sure Your Images are the Proper Size

If your images are not sized correctly you run the risk of pixelation/blurriness. If you're adding an image through the admin or content editor there are size hints to help! If you're adding an image into a page, do not stretch the image larger than the original size.

Be Mindful of Images with Text

We love seeing all the graphics you and your team created. Just a reminder that while they may look great on your screen, consider the font size, color combinations and resolution that a view may see your graphic. Is there important information in your graphic that your user would be lost without? Make sure to include that content in the text as well to allow the user the best way to consumer the information.

Did this answer your question?