skip to main content

Posts tagged “web”, page 3

  1. Relearn CSS layout: Every Layout
    every-layout.dev

    Heydon Pickering and Andy Bell have created a terrific resource for CSS layout patterns following algorithmic design principles.

    We make many of our biggest mistakes as visual designers for the web by insisting on hard coding designs. We break browsers’ layout algorithms by applying fixed positions and dimensions to our content.

    Instead, we should be deferential to the underlying algorithms that power CSS, and we should think in terms of algorithms as we extrapolate layouts based on these foundations. We need to be leveraging selector logic, harnessing flow and wrapping behavior, and using calculations to adapt layout to context.

    This approach is precisely what I’ve been striving for ever since Jen Simmons’s Intrinsic Web Design talk from last year.

  2. Drop caps & design systems
    product.voxmedia.com

    Ethan Marcotte:

    When I’m asked to describe design systems work, I say the word that springs immediately to mind is mapmaking. As designers like Matthew Ström and Alla Kholmatova have argued, every website has a design system underneath it. Take yours, for example: your website’s interface is built from a library of components, each shaped by a series of design decisions and business needs. Your design system may not be explicit—maybe you don’t have a polished pattern library, or a set of well-defined design principles, or maybe your documentation’s not as robust as you’d like it to be—but it’s still a system. And in order to improve that system, you have to research it before you can begin to gradually, slowly improve it.

  3. Underlines Are Beautiful
    adrianroselli.com

    Adrian Roselli:

    Underlines, the standard, built-in signifier of hyperlinks, the core feature of the web, are beautiful.

    This is objectively true. They are aesthetically one of the most delightful visual design elements ever created.

    They represent the ideal of a democratized information system. They are a frail monument to the worldwide reach of ideas and discourse. They are proof of our ascension from trees and swamps, a testament to our species’ intelligence, and a witness to our inevitable downfall.

    ❤️

  4. Details / Summary Are Not [insert control here]
    adrianroselli.com

    Adrian Roselli:

    Once major browsers started supporting <details> & <summary> developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding.

    However, we need to be careful of christening this new-to-us interaction as the solution to all our coding struggles.

  5. There are a few CSS techniques for hiding content visually while keeping it accessible to screen readers, but none of them are perfect — and in some cases may even be harmful.

    @zellwk has put together a great round-up of the issues.

  6. A Website is a Car and Not a Book
    css-tricks.com

    Robin Rendle:

    Anyway, I asked Lindsay that question: what is it about web design that makes it so difficult to understand? She posited that the issue is that most people believe web design is like designing a book. Heck, we still call these things web pages. But Lindsay argued that building a modern website is nothing like designing a book; it’s more like designing a car.

  7. CSS masonry with flexbox, :nth-child(), and order
    tobiasahlin.com

    Tobias Ahlin:

    On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap` and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order. Items will be (unbeknownst to the user) rendered from top to bottom and someone parsing the grid from left to right will read the boxes in a somewhat arbitrary order, for example 1, 3, 6, 2, 4, 7, 8, 5, and so on so forth.

    Flexbox has no easy way of rendering items with a column layout while using a row order, but we can build a masonry layout with CSS only—no JavaScript needed—by using :nth-child() and the order property.

    This is very clever — an actually helpful use of order that helps visual order more accurately follow source order.

    But there’s a catch: it requires a fixed height for the container — and it needs to be a magic number that’s taller than the tallest column. That unfortunately makes it not super resilient to content changes, limiting its usefulness.

  8. All you need to know about hyphenation in CSS
    clagnut.com

    Richard Rutter:

    There is more to setting hyphenation than just turning on the hyphens. The CSS Text Module Level 4 has introduced the same kind of hyphenation controls provided in layout software (eg. InDesign) and some word processors (including Word). These controls provide different ways to define how much hyphenation occurs through your text.

    This is great news. I’ve always avoided CSS hyphenation because of how aggressive the algorithms are. Using these new properties in concert with @supports we can get well-controlled hyphenation as a progressive enhancement while avoiding the half-baked hyper-hyphenated middle ground we’ve had so far.

  9. Accessibility Events
    css-tricks.com

    Mat Marquis:

    It could seem like an enticing option for our users, at first glance: an enhanced, fully-featured website, on the one hand, a fully accessible alternative experience on the other. That unravels with even the slightest examination, though: if the fully-featured website isn’t accessible, the accessible website won’t be fully featured. By choosing to have the “accessible experience” deviate from the “real website,” we end up drawing a sharper line between those two definitions, and we nudge the “accessible experience” closer to an afterthought—limited and frustratingly out-of-sync with the “real” website, like so many dedicated mobile sites quickly became.

  10. Split
    adactio.com

    Jeremy Keith:

    Where it gets interesting is when a technology that’s designed for developer convenience is made out of the very materials being delivered to users. For example, a CSS framework like Bootstrap is made of CSS. That’s different to a tool like Sass which outputs CSS. Whether or not a developer chooses to use Sass is irrelevant to the user—the final output will be CSS either way. But if a developer chooses to use a CSS framework, that decision has a direct impact on the user experience. The user must download the framework in order for the developer to get the benefit.

    So whereas Sass sits at the back of the front end—where I don’t care what you use—Bootstrap sits at the front of the front end. For tools like that, I don’t think saying “use whatever works for you” is good enough. It’s got to be weighed against the cost to the user.