Tags: responsive

460

sparkline

Website Accessibility Begins with Responsive Web Design

I recently asked a friend who happens to be blind if he’d share some sites that were built really well—sites that were beautifully accessible. You know what he said? “I don’t use the web. Everything is broken.”

Everything is broken. And it’s broken because we broke it.

But we can do better.

Jongert

Nick demonstrates the responsive power of variable fonts by recreating a lovely design from Jacob Jongert.

Grab that browser window and get squishin’!

Home Refreshment

A nifty little responsive demo from Nick, recreating a 1948 Coca-Cola ad that was designed to be responsive to different wall spaces.

Fractional. — Ethan Marcotte

Ethan’s ode to the fr unit in CSS grid.

Brutalist Web Design

A website is not a magazine, though it might have magazine-like articles. A website is not an application, although you might use it to purchase products or interact with other people. A website is not a database, although it might be driven by one.

My biggest challenge with JavaScript | Go Make Things

This really, really resonates with me:

I think the thing I struggle the most with right now is determining when something new is going to change the way our industry works for the better (like responsive web design did 5 or 6 years ago), and when it’s just a fad that will fade away in a year or three (which is how I feel about our obsession with things like Angular and React).

I try to avoid jumping from fad to fad, but I also don’t want to be that old guy who misses out on something that’s an important leap forward for us. I spend a lot of time thinking about the longer term impact of the things we make (and make with).

Designing Web Content for watchOS - WWDC 2018 - Videos - Apple Developer

If you don’t fancy watching this video, Eric Runyon has written down the salient points about what it means for developers now that websites can be viewed on the Apple Watch. Basically, as long as you’re writing good, meaningful markup and you’ve got a sensible font stack, you’re all set.

Or, as Tim puts it:

When we build our sites in a way that allows people using less-capable devices, slower networks and other less than ideal circumstances, we end up better prepared for whatever crazy device or technology comes along next.

CSS Grid — Responsive layouts and components – Deemaze Writing Wall – Medium

Rafaela Ferro has written a good case study on Ev’s blog of using CSS grid to build some practical image-based responsive components.

Compressive Images Revisited - TimKadlec.com

Tim explains why that neat trick of making a really big JPEG with quality set to 0% is no longer necessary, and how the savings you make in bandwidth with that technique are nullified by the expense of the memory footprint needed.

Responsive Components: a Solution to the Container Queries Problem — Philip Walton

Here’s a really smart approach to creating container queries today—it uses ResizeObserver to ensure that listening for size changes is nice and performant.

There’s a demo site you can play around with to see it in action.

While the strategy I outline in this post is production-ready, I see us as being still very much in the early stages of this space. As the web development community starts shifting its component design from viewport or device-oriented to container-oriented, I’m excited to see what possibilities and best practices emerge.

Saving Your Web Workflows with Prototyping · Matthias Ott – User Experience Designer

A well-written (and beautifully designed) article on the nature of the web, and what that means for those of us who build upon it. Matthias builds on the idea of material honestly and concludes that designing through prototypes—rather than making pictures of websites—results in a truer product.

A prototyping mindset means cultivating transparency and showing your work early to your team, to users – and to clients as well, which can spark excited conversations. A prototyping mindset also means valuing learning over fast results. And it means involving everyone from the beginning and closely working together as a team to dissolve the separation of linear workflows.

Can Preload Cut the Mustard? | Filament Group, Inc., Boston, MA

Ooh, this is clever! Scott shows how you can use rel="preload" to conditionally load JavaScript (say, for screens above a certain size). The browser support isn’t quite there yet, but the thinking here is smart.

Lynn Fisher

This homepage is media-querytastic. It’s so refreshing to see this kind of fun experimentation on a personal site—have fun resizing your browser window!

Cognitive Overload - daverupert.com

From Scott McCloud to responsive design, Dave is pondering our assumptions about screen real estate:

As the amount of information increases, removing details reduces information density and thereby increasing comprehension.

It reminds me of Edward Tufte’s data-ink ratio.

A Responsive Accessible Table | Adrian Roselli

Following on from Richard’s article, here’s a deep dive into making HTML tables that are accessible and responsive.

Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article

An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).

Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.

(It also contains a splendid use of the term “crawl bar.”)

Rebuilding slack.com – Several People Are Coding

A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.

Robtober 2017 | Rob Weychert

What an excellent example of a responsive calendar!

When the news goes sideways – James Donohue – Medium

The BBC has been experimenting with some alternative layouts for some articles on mobile devices. Read on for the details, but especially for the philosophical musings towards the end—this is gold dust:

Even the subtext of Google’s marketing push around Progressive Web Apps is that mobile websites must aspire to be more like native apps. While I’m as excited about getting access to previously native-only features such as offline support and push notifications as the next web dev, I’m not sure that the mobile web should only try to imitate the kind of user interfaces that we see on native.

Do mobile websites really dream of being native apps, any more than they dreamt of being magazines?