I mean investing in learning how to use the debugger, read the network tab, inspect (and understand) memory snapshots, and monitor your bundle size to be sure you’re not including unnecessary dependencies. I don’t mean how to view the console and read console.logs. Handling the nuances of keyboard and event handling, form submissions, and similar are difficult enough. The first item of this list should really be “don’t subvert the users' expectations.” Don’t subvert the users' expectations. I don’t say this because the browser developers are “better” than you, but because the user is used to the browser’s controls. Unlike a lot of other advice that will say don’t do this because users might have JavaScript disabled, I think the more important reason to do this is you can’t do it better than the browser (after all, 99.4% of users have JavaScript enabled 1). Don’t use JavaScript to replace browser controls Be sure to also familiarize yourself with and use the relevant ARIA labels when a semantic element isn't possible or if they would improve the user experience. Using semantic HTML means you can avoid manually assigning role tags while keeping your HTML legible for yourself and the page usable for users of assistive technologies.
MDN has a great list of all the valid elements here. This has been covered pretty extensively so I’ll keep it short, but use tags like header, footer, nav, and main. I also haven't found a better PNG optimizer than the online, so if you have a replacement that works locally please let me know! Embrace semantic HTML Be sure to use the right tool for the job though for example, I use svgo for optimizing SVGs. For things similar to this blog I manually compress the images locally using ImageOptim, an open-source Mac app. There are a lot of tools for automating this, like WebP Express for WordPress, but no complicated infrastructure is necessary. Someone more business savvy than me would say something about bounce rates and loading times being correlated, but I won't do that. Below you can see a screenshot of the tool being applied to. It helps you not just fix your errors but understand them by guiding you through the relevant part of the HTML5 spec in plain language. It's my first step for finding the lowest hanging improvements. WAVE is a suite of tools for finding, diagnosing, and fixing accessibility problems.
Invest in learning your developer tools.Don’t use JavaScript to replace browser controls.Below is a short list I wrote up for people who are comfortable building websites (with any technology) but want to improve their work, whether that be in terms of loading speeds, software quality, or accessibility.
0 kommentar(er)
