designers and developers have a lot in common when you think about it: they’re both lazy at heart 😜. they both want to“Keep It Simple, Stupid”(KISS) and are obsessed about details like tabs vs. spaces(or, for designers, px vs em, hah). knowing this, you will make your designers infinitely happy if you not only pay attention to the general guidelines they are giving you but also the minute details that make your app come alive.
styleguide
to do the aforementioned collaboration effectively, start with a styleguide, which is effectively a contract between design and development. it includes things like: color palettes, fonts, widgets(buttons, menus, etc.), and iconography.
this is an important, yet so-overlooked-it’s-not-even-funny area in web development. at the very least, you shouldn’t be doing silly things like using <span> tags where you should be using <button> or <a> tags. but there’s so much more to a11y than just using the correct HTML elements, like: adding ARIA attributes to your tags, making sure color contrast is correct, placing elements in a certain tab order, and the list goes on and on.
there’s so much to cover in this area such that it wouldn’t all fit in this guide. it is my hope that eventually at least UI toolkits(mentioned in a section below) will become robust enough for the average developer so that at least the widgets are adherent to the guidelines — we’re almost there in that regard. here are some must-read guides on learning the in’s and out’s:
anecdotally, at my previous company, a tool was designed internally to display a11y information on every webpage(so that it wasn’t just hidden in the DevTools). that’s how important this is!
finally, if you’re on a Mac be sure to check out the VoiceOver Utility to get a real-world sense of how your app is feeling when navigating via keyboard(although i think it only works on Safari, sadly).
internationalization(i18n)
somewhat in the same vein as a11y is providing access to your site to the people around the world that don’t necessarily speak the same language that you do. there’s a lot that goes into i18n, not just translating words, but also the way numbers are formatted, dates, relative dates and pluralization.
tl;dr
patterns of consistency and simplicity
styleguide
accessibility (a11y)
internationalization (i18n)