Cross-Compatibility

Cross-compatibility means your website is easy to use across different devices and browsers.

There is more to cross-compatibility then just making your website responsive. Understanding what devices your users are using and how they are using your website is just as important.

Before you embark on this journey, make sure you have a full understanding of your audience and what they need from your website.

Why?

Have you ever visited a website on your mobile phone and come across a spot in an article that you can't scroll past for some reason? Maybe you have been on your laptop and opened a website where everything looks bigger than it should be. You may have even been to a website where everything just looks off.

These are examples of poor cross-compatibility.

Poor cross-compatibility can lead to a frustrating user experience. Ultimately, the poor user experience will lead to users leaving your website and never coming back.

How?

Cross-Browser Compatibility

Cross-browser compatibility refers to the ability of the website to function correctly on different browsers.

Consider using a framework. Bootstrap, Vue, React and Angular are cross-browser compatible out of the box.
When coding your own front-end
- Make sure your website has a DOCTYPE tag.
- Normalize or reset your CSS. Visit this article from Medium¹ for more information.
- When in doubt, use technology that has already been tried and tested.
- Refer to CanIUse.com to check what elements work on what browsers.
- Use vendor-prefixes when necessary to help fix cross-browser issues.
To test your website for browser compatibility
- Use testing websites such asBrowserstack.com to help you test across browsers.
- An HTML validator such as the W3C Markup Validator can tell you where you have errors.

Cross-Device Compatibility

Cross-device compatibility refers to making the website usable across different devices.

Don't assume that a responsive design solves everything.
- Responsive design means the website is coded in such a way that it resizes to fit on different devices.
Know your audience. I cannot stress this enough.
- Use usability techniques to see what devices your users are using and why.
- Look at analytics to see trends in device usage for your site.
- If it is a new website look at whatothers have done to make their website more usable.
- Use this data to make informed decisions about content and features for different device sizes.
Consider designing things mobile-first.
- More and more people are using cellphones then ever before.
- Mobile-first means you design your website for the mobile device first which means you are designing your content for a smaller screen. It makes the design easier when you move to desktop sizes. To learn more, visit this UX Pin article². For usability tips using mobile-first, visit this NN/g article³.
When in doubt side with simplicity.