Link tags: study

Pivoting From React to Native DOM APIs: A Real World Example - The New Stack

One dev team made the shift from React’s “overwhelming VDOM” to modern DOM APIs. They immediately saw speed and interaction improvements.

Yay! But:

…finding developers who know vanilla JavaScript and not just the frameworks was an “unexpected difficulty.”

Boo!

Also, if you have a similar story to tell about going cold turkey on React, you should share it with Richard:

If you or your company has also transitioned away from React and into a more web-native, HTML-first approach, please tag me on Mastodon or Threads. We’d love to share further case studies of these modern, dare I say post-React, approaches.

Design notes on the 2023 Wikipedia redesign

So then the question becomes: how do you most effectively communicate designs, to facilitate the best discussions about those designs? My answer is: lots of little prototypes built with HTML, CSS, and JavaScript.

Pixelhop new website walk through

A case study with equal emphasis on animation and performance.

Recreating Wildlife Photographer of the Year online – part 1 – Introduction and technical approach – Blogs from the Natural History Museum

You’ve seen the Wildlife Photographer Of The Year project from Clearleft’s viewpoint …and you’ve listened to the podcast episode, right?

Now here’s the story from the team that made the website. It’s a great walkthrough of thoughtfully evaluating technologies to figure out the best approach.

Prioritizing users in a crisis: Building the California COVID-19 response site

This is a great case study of the excellent California COVID-19 response site. Accessibility and performance are the watchwords here.

Want to know their secret weapon?

A $20 device running Android 9, with no contract commitment has been one of the most useful and effective tools in our effort to be accessible.

Leaner, faster sites benefit everybody, but making sure your applications run smoothly on low-end hardware makes a massive difference for those users.

Basil: Secret Santa as a Service | Trys Mudford

Trys writes up the process—and the tech (JAM)stack—he used to build basil.christmas.

Case Study: lynnandtonic.com 2019 refresh - lynnandtonic.com

Lynn gives a step-by-step walkthrough of the latest amazing redesign of her website. There’s so much joy and craft in here, with real attention to detail—I love it!

Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites

1,841 instances of dark patterns on ecommerce sites, in the categories of sneaking, urgency, misdirection, social proof, scarcity, obstruction, and forced action. You can browse this overview, read the paper, or look at the raw data.

We conducted a large-scale study, analyzing ~53K product pages from ~11K shopping websites to characterize and quantify the prevalence of dark patterns.

How to build complicated grids using CSS grid

A nice walkthrough of a CSS grid in production. I was surprised to see percentages used as units—I wonder if it would feel “cleaner” if they were converted to fr units?

Back to Bradshaw’s / Paul Robert Lloyd

I really like getting Paul’s insights into building his Bradshaw’s Guide project. Here he shares his process for typography, images and geolocation.

The road to Firefly 6, part 2, Roobottom.com

A look at the technical details behind Firefly’s pattern library. The tech stack includes Less, BEM, and some React, but it’s Anna and Danielle that really made it work.

kdzwinel/progress-bar-animation: Making a Doughnut Progress Bar - research notes

This is a thorough write-up of an interesting case where SVG looks like the right tool for the job, but further research leads to some sad-making conclusions.

I love SVG. It’s elegant, scalable and works everywhere. It’s perfect for mobile… as long as it doesn’t move. There is no way to animate it smoothly on Android.

Building Social: A Case Study On Progressive Enhancement – Smashing Magazine

A step-by-step walkthrough of layering on enhancements to a site. The article shows the code used, but it isn’t really the code that matters—it’s the thought and planning that went into it.

Beyond Work

An ongoing photography project from Curtis:

Beyond Work tells stories about humans at work, with no judgement or glorification. It’s an attempt at unearthing the social, cultural and functional world of work, that’s become invisible in everyday life.

SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need

A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.

Things we learnt designing ‘Register to vote’ | GDS design notes

A concise case study from gov.uk:

Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.

Leveraging Advanced Web Features in Responsive Design

A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.

Let’s Talk Solar | LOGO24

Here’s a really useful case study for anyone who wants to do “guerrilla” responsive design: when you’re handed a fixed-width mockup but you know that responsive is the way to go:

I started by styling up every element, without layout. The result was a fully elastic layout that effectively served as a mobile, or small screen, layout, which just needed some tweaking of horizontal spacing.

Bingo! And this approach had knock-on benefits as it “supported writing component-based, or modular, CSS”.

Designing for different devices | Government Digital Service

A behind-the-scenes look at how Gov.uk is handling mobile devices. Spoiler: it’s responsive.

I found this particularly interesting:

When considering the extra requirements users of different devices have we found a lot in common with work already done on accessibility.

Skinny Ties and responsive eCommerce » Blog » Gravity Department

Another responsive design case study. This one’s got numbers too.