Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #188: Real-World Accessibility, Flexbox Madness, And The Ephemerality Of Things We Build

CSS is an amazing tool which we constantly use but we don’t seem to honor it appropriately. Whenever I see the growing browser support of the :focus-within selector, the much wanted justify-content: space-evenly for Flexbox or how great CSS Grids already work, I feel really grateful to have such awesome tools available to work with.

And with advanced new media queries such as prefers-reduced-motion, screen and (color), or pointer, we get amazing tools to improve accessibility and usability of our websites. Just let the user be in control how to view your amazing design and it’ll be a success for everyone.

Further Reading on SmashingMag: Link

News Link

Generic Link

  • Docracy6 is a community-driven platform for free legal documents. It already covers a lot of categories and might become useful in future for you.

Security Link

JavaScript Link

Donut Chart9
Donut chart with Legend (Image source10)

CSS/Sass Link

  • The :focus-within CSS pseudo-selector11 is a nice way to enhance your form sections further. Browser support12 is still a bit limited so far but it’s already worth thinking about adding it to your code to improve design and usability for those whose browser support the selector already.
  • The CSS Flexbox Module specification now has a new value justify-content: space-evenly13. This new setting places even space between and to the outer of the elements — a feature we all wanted to have very much in Flexbox. It already works in Firefox, and Safari Tech Preview and Chrome Canary have the support as well.
  • Zach Leatherman on how you can rename a font in CSS14 and font aliasing.

Concept & Design Link

date and time picker16
When designing a date/time picker, keep in mind that every date picker may fit every interface, but not every interface actually needs a date picker. (Credits: Topvet.net17)

Accessibility Link

  • Hampus Sethfors18 and Hugo Giraudel19 collected a bunch of real-world experiences regarding accessibility on websites. These two articles give a lot of insight on how to understand accessibility and usability of websites better.
Tweet screenshot20
Zooming problems: Some users with low vision point to layout and navigation problems when zooming or increasing font-size. (Image source21)

Going Beyond… Link

—Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/
  2. 2 https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
  3. 3 https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
  4. 4 https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
  5. 5 https://letsencrypt.org//2017/07/06/wildcard-certificates-coming-jan-2018.html
  6. 6 http://www.docracy.com/
  7. 7 https://blog.haschek.at/2017/how-to-defend-your-website-with-zip-bombs.html
  8. 8 https://eventbrite.github.io/britecharts/
  9. 9 https://eventbrite.github.io/britecharts/tutorial-donut.html
  10. 10 https://eventbrite.github.io/britecharts/tutorial-donut.html
  11. 11 https://codepen.io/matuzo/pen/awdevz
  12. 12 https://caniuse.com/#search=%3Afocus-within
  13. 13 https://codepen.io/matuzo/pen/GmXVWo?editors=1100
  14. 14 https://www.zachleat.com/web/rename-font/
  15. 15 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
  16. 16 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
  17. 17 http://topvet.net
  18. 18 https://axesslab.com/accessibility-according-to-pwd/
  19. 19 https://hugogiraudel.com/2017/07/02/accessibility-feedback/
  20. 20 https://axesslab.com/accessibility-according-to-pwd/
  21. 21 https://axesslab.com/accessibility-according-to-pwd/
  22. 22 https://www.offscreenmag.com/blog/the-grip-of-now

↑ Back to top Tweet itShare on Facebook

is a freelance front-end developer and architect and cares about sustainable front-end experiences and ethical choices in life. He curates the WDRL, a weekly handcrafted web development newsletter that thousands of developers love, subscribe to, and donate for.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top