Best viewed with an open mind...

The so-called "browser wars" long before current web standards like HTML 5 made some web developers add badges like "best viewed with Netscape" or "best viewed with Internet Explorer". An alternative badge stating "best viewed with an open mind" was a statement for cross-browser functionality and progressive enhancement.

... or best viewed in Safari 16?

We might be lucky that there is no "best viewed in Safari 16" sticker, but some websites feel like they need one.

Old Apple devices don't get the latest Apple browsers, and there are still people using old Apple devices for various reasons, including sustainability. Their high-end hardware still works well ten years later, but their software doesn't, and I suspect they're doing that on purpose to give people a reason to buy the latest iPhone. I've got an iPhone 6+ that I use for device testing only, and a classic MacBook that has been used for browsing, development, and testing for more than ten years.

Same site, different devices

Here is one of my recent projects, kleiderordnung.berlin on different devices:

This is a nice picture, and I occasionally test websites on real devices to get a better feeling. But any number of specific devices is just a small selection that does not reflect every real user. That's why I use services like BrowserStack to remote-control a much greater number of different devices.

Advertising my services

I must admit, this post is kind of a recap of things that I wrote before and writing it feels a bit like those listicles that make me feel cringe about DEV.to sometimes. But then again, some things can't be repeated often enough. Why can't developers add some simple improvements to their default workflow, when things have got so easy thanks to automation?

I must also admit that I don't do much test automation or test-driven development yet, and that I tend to procrastinate and write posts like "Emotion-driven development" instead.

But if you need help with responsive design, CSS, accessibility and client-side performance optimization, call me! I am happy to improve your storefront, working with CSS, HTML, and just as much JavaScript and PHP code as necessary.

I am also happy when I can put things into practice and find pragmatic solutions quickly, without denying the need for testing, documentation, and maintainable clean code but without striving for perfection without impact or business value either.

Audits and automation

We have emulation, automation and remote control to improve our insights. We can compare full page screenshots cross-device, use cypress or CodeceptJS and Testomat.io for automating tests, including hover states and dynamic behavior, and we can use BrowserStack to test WordPress and other local projects before deploying anything.

Pro tip for Linux users: we can use a "Secret" Linux Browser to reproduce some Safari bugs in a local browser.

So far, so good – but what about accessibility and sustainability?

Sustainability

Sustainability includes different aspects:

• energy efficiency, estimated by page load metrics, green hosting list, and CO2e carbon dioxide equivalent,
• maintainability, facilitated by using open-source software and increasing code quality,
• privacy and usability

Web performance tools like WebPageTest and PageSpeed Insights have added ecological aspects, and there are specific tools like WebsiteCarbon and Ecograder as well.

Putting the users' needs before our customers and their companies can be an effective strategy to improve usability. In the long run, companies will also profit by retaining their users as happy customers.

Usability also implies accessibility.

Accessibility

Although there are diverse disabilities and challenges to website users, there are a few proven ways to facilitate any kind of assistive technology. Progressive enhancement is a strategy starting with simple, text-based content and the most important functionality and the most robust and compatible implementation, adding optional design and comfort functions on top for those devices and users that can and want to use it.

Feature queries and media queries for accessibility like prefers-reduced-motion, prefers-reduced-transparency or prefers-contrast are easy ways to customize the page experience for different target groups with only a few lines of additional CSS code.

To measure or rather estimate accessibility, we can use automated audits like WAVE, axe and the accessibility report in Lighthouse or PageSpeed Insights to ensure that we don't violate essential Web Content Accessibility Guidelines (WCAG)

Further reading

European legislation are planning to enforce stricter rules concerning websites' accessibility and sustainability with the reformed European Accessibility Act (EAA) and they also planned a strict Supply Chain Due Diligence Act (Lieferkettengesetz) which has been blocked by the smallest party in Germany's government coalition: https://www.reuters.com/world/europe/eu-envoys-fail-back-supply-chain-checks-law-2024-02-28/

Accessibility, SustyWeb, SDGs, and upcoming European Legislation in 2024/2025 🇪🇺⚖️

Ingo Steinke, web developer ・ Nov 6 '23

#webdev #a11y #sustyweb #ecology

I have also added special pages detailing sustainable and accessible web development and how to develop, check and optimize web pages to make them more sustainable on my portfolio website.