1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Test website for cross-browser compatibility issues?

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, Jul 6, 2019.

  1. #1
    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
    SEMrush
     
    Web_Dev_Chris, Jul 6, 2019 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,864
    Likes Received:
    1,612
    Best Answers:
    230
    Trophy Points:
    515
    #2
    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.
     
    Last edited: Jul 7, 2019
    deathshadow, Jul 7, 2019 IP