Test website for cross-browser compatibility issues?

What are the best ways to test your website for cross browser compatibility issues? Are there tools to use to make the job easier or do you basically install all major browsers and check what your website looks like on that browser?

Also putting cross-browser compatibility aside. Every machine renders at a different resolution for the screen size and depending on the graphics cards ect.. I understand this can also make your website render more zoomed-in or larger/smaller. How do you ensure that your website renders well on different resolutions/computers ect...

Thanks in advance for your input!

Regards,
Chris

 

Open up the major browsers. Load the page. Resize the window to test responsiveness. Alt-tab.

then in FF and chrome, change the default font size to 20px, lather, rinse, repeat. DONE.

As to cross browser font sizes, use EM. DONE.. Font sizes in EM. Padding in EM. Margins in EM. Media queries in EM unless directly dealing with raster images you don't want to scale. That 's it.

If you have built:

Semi-fluid -- has a max-width or other means of preventing long lines of flow-text from becoming unwieldy.

Elastic -- font-sizes, paddings, margins, widths, media queries all in EM wherever possible.

Responsive -- adjusting the layout to fit instead of doing something stupid like scaling it with VH and VW

Using anywhere from 0.875 body EM (14px at "normal/16px/100%/96dpi/windows small/ pick a huffing name already") to 1 body EM for flow text, and not allowing anything below that 0.875 body EM (REM) minimum, you should be golden.

It's not hard. Artists under the DELUSION they're designers make it hard. Garbage nonsense like "12 wide grids" make it hard. Bad / faulty design premises and mindsets make it hard. Thinking about what it looks like before you even have proper semantics makes it hard. Bad advice like slopping endless pointless classes into the markup and avoiding using selectors makes it hard. People make it hard.

When really if you're not blindly sleazing together snippets, relying on broken front-end frameworks that claim to aid in cross-browser compatibility and responsive design when they do NOTHING OF THE SORT, and instead simply learn to use structured semantic HTML, progressive enhancement, separation of presentation from content, with a working knowledge of accessibility guidelines, you can do in an hour what takes most people WEEKS.

... and then have most of the world claim that timeframe is the other way around, because they never learned to do it properly in the first bloody place; possibly being incapable of doing so.

This is even more true now that flex is pretty much real-world deployable, and display:grid (which is horribly named and has dick to do with what most designers and framework devs would consider "grids") is if you don't mind a degree of degradation since IE knows it not. When it comes to supporting Edge/FF/Chrome, it's not THAT hard anymore. Safari, well... it can lag, but honestly I'm more likely to say "screw Safari" than I am to say "screw IE" at this point. There's a reason a lot of web developers consider Safari the "new IE" given how it's aging like milk, but we're forced to support it thanks to idiots with more money than brains lighting it on fire by buying crApple.

In any case, one of the FIRST development lessons I had taught to me that has been reinforced by experience time and time again the past 40 years: "The less code you use, the less there is to break." It goes hand in hand with KISS. Or as Scotty would say, "the more they overthink the plumbing, the easier it is to stop up the drain.". Modern web developers could learn a hell of a lot from actual engineers.

... and they could start with the code of ethics so the majority of people in the industry can stop running around like sociopaths and psychopaths with their lack of care and dirtbag predation of the ignorant.

 

I recommend BrowserStack for Cross Browser Compatibility Testing

 

I don't understand why a developer wouldn't specifically want to see it in all major browsers to see for themselves? I would only rely on a tool to expedite the process. What kind of web designer wouldn't have all major browsers installed?

 

The type of mouth-breathers who use WYSIWYG's or blindly trust that their dumbass favorite pet "framework" has actually done all the work for them, even when they are clearly incapable of doing so.

Which these days seems to be the vast majority of fly-by-night sleazy scam artists calling themselves "professionals" whilst not knowing enough HTML or CSS to write a single blasted line of either.