pr

Aging iridium oxide catalyst inks: a formulation strategy to enhance ink processability for polymer electrolyte membrane water electrolyzers

Soft Matter, 2024, Advance Article
DOI: 10.1039/D4SM00987H, Paper
Open Access
  This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.
Sunilkumar Khandavalli, Jae Hyung Park, Robin Rice, Diana Y. Zhang, Sarah A. Berlinger, Guido Bender, Deborah J. Myers, Michael Ulsh, Scott A. Mauger
Steady-shear rheology showing evolution of the microstructure of iridium oxide catalyst inks of PEM water electrolyzers with aging time.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Active nematic coherence probed under spatial patterns of distributed activity

Soft Matter, 2024, Accepted Manuscript
DOI: 10.1039/D4SM00651H, Paper
Ignasi Vélez Cerón, Jordi Ignes-Mullol, Francesc Sagues
A photoresponsive variant of the paradigmatic active nematic fluid made of microtubules and powered by kinesin motors is studied in the conventional two-dimensional interfaced form when forced under blue-light illumination....
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Model predictive control of non-interacting active Brownian particles

Soft Matter, 2024, 20,8581-8588
DOI: 10.1039/D4SM00902A, Paper
Titus Quah, Kevin J. Modica, James B. Rawlings, Sho C. Takatori
Model predictive control is used to guide the spatiotemporal distribution of active Brownian particles by forecasting future states and optimizing control inputs to achieve tasks like dividing a population into two groups.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Bending of polymer films: a method for obtaining a compressive modulus of thin films

Soft Matter, 2024, 20,8589-8600
DOI: 10.1039/D4SM00084F, Paper
Akihiro Ohara, Ko Okumura
We constructed a theory and method for measuring the compressive modulus by combining tensile and bending tests. Elastic asymmetry was confirmed in an industrial PET film.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Extended kinetic theory applied to pressure-controlled shear flows of frictionless spheres between rigid, bumpy planes

Soft Matter, 2024, 20,8702-8715
DOI: 10.1039/D4SM00831F, Paper
Open Access
  This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.
Dalila Vescovi, Astrid S. de Wijn, Graham L. W. Cross, Diego Berzi
We perform discrete simulations of steady, pressure-imposed, heterogeneous flows of frictionless spheres sheared between parallel bumpy planes, and use the results to test the predictions of the extended kinetic theory of granular gases.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

The role of macrocycles in supramolecular assembly with polymers

Soft Matter, 2024, 20,8549-8560
DOI: 10.1039/D4SM01053A, Review Article
Ruslan Kashapov, Yuliya Razuvayeva, Elena Fedorova, Lucia Zakharova
Supramolecular self-assembly of polymers with macrocycles has attracted the attention because it enables the spontaneous creation of nanostructures with unique properties.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Dynamics of switching processes: general results and applications to intermittent active motion

Soft Matter, 2024, Accepted Manuscript
DOI: 10.1039/D4SM01054J, Paper
Open Access
  This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.
Ion Santra, Deepak Gupta, Kristian S Olsen
Systems switching between different dynamical phases is an ubiquitous phenomenon. The general understanding of such a process is limited. To this end, we present a general expression that captures fluctuations...
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Mechanical properties soft hydrogels: assessment by scanning ion-conductance microscopy and atomic force microscopy

Soft Matter, 2024, Accepted Manuscript
DOI: 10.1039/D4SM00966E, Paper
Tatiana Tikhonova, Yuri M. Efremov, Vasilii Kolmogorov, Aleksei Iakovlev, Nikolay Sysoev, Peter S. Timashev, Victor Fadeev, Alexander Tivtikyan, Sergey Salikhov, Petr Gorelkin, Yuri Korchev, Alexandr Erofeev, Evgeny Shirshin
The growing interest in biomimetic hydrogels is due to their successful applications in tissue engineering, 3D cell culturing and drug delivery. Major characteristics of hydrogels include swelling, porosity, degradation rate,...
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Supramolecular chiroptical sensing of chiral species based on circularly polarized luminescence

Soft Matter, 2024, Advance Article
DOI: 10.1039/D4SM00960F, Review Article
Panyang Chen, Huahua Fan, Sifan Du, Xin Wen, Li Zhang, Minghua Liu
Chiral analytes can bind to an achiral fluorescent system to generate circularly polarized luminescence (CPL). Subsequently, the CPL signal can be employed to determine the absolute configuration of the chiral substrate.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Reversible pH-responsive supramolecular aggregates from viologen based amphiphiles – A molecular design perspective

Soft Matter, 2024, Accepted Manuscript
DOI: 10.1039/D4SM00695J, Paper
Redhills L. Narendran, Archita Patnaik
pH responsive self-assembled supramolecular systems in water hold tremendous promise spanning across the various realms of science and technology. Herein, we report the design and synthesis of benzyl viologen (BV)...
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

A dynamical system approach to relaxation in glass-forming liquids

Soft Matter, 2024, Advance Article
DOI: 10.1039/D4SM00976B, Paper
Open Access
  This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.
Jack F. Douglas, Qi-Lu Yuan, Jiarui Zhang, Hao Zhang, Wen-Sheng Xu
We adapt a dynamical system approach to the practical matter of estimating relaxation times in both cooled liquids and crystals at elevated temperatures, which we identify as weakly non-integrable dynamical systems.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

A multi-scale framework for predicting α-cyclodextrin assembly on polyethylene glycol axles

Soft Matter, 2024, Advance Article
DOI: 10.1039/D4SM01048E, Paper
Open Access
Cameron D. Smith, Chenfeng Ke, Wenlin Zhang
We predict the assembly and time-dependent distribution of cyclodextrin along PEG axles by combining atomistic molecular dynamics with an analytical treatment of bulk diffusion. Our kinetic Monte Carlo can aid in the design of polypseudorotaxanes.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Biomimetic mineralization of positively charged silica nanoparticles templated by thermoresponsive protein micelles: applications to electrostatic assembly of hierarchical and composite superstructures

Soft Matter, 2024, Advance Article
DOI: 10.1039/D4SM00907J, Paper
Nada Y. Naser, William C. Wixson, Helen Larson, Brandi M. Cossairt, Lilo D. Pozzo, François Baneyx
Exploiting the ability of a solid-binding elastin-like peptide to micellize, we mineralize monodisperse silica nanoparticles whose positive surface charge enables one-step electrostatic assembly of various mono- and bi-material superstructures.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

A generalized model for predicting different morphologies of bacterial swarming on a porous solid surface

Soft Matter, 2024, Accepted Manuscript
DOI: 10.1039/D4SM01072H, Paper
Uttam Kumar, Pushpavanam Subramaniam
In this study, we develop a comprehensive two-phase model to analyze the dynamics of bacterial swarming on porous substrates. The two distinct phases under consideration are the cell and aqueous...
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Magnetic colloidal single particles and dumbbells on a tilted washboard moir'e pattern in a precessing external field

Soft Matter, 2024, Accepted Manuscript
DOI: 10.1039/D4SM01183J, Paper
Open Access
  This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.
Farzaneh Farrokhzad, Nico C. X. Stuhlmüller, Piotr Kuswik, Maciej Urbaniak, Feliks Stobiecki, Sapida Akhundzada, Arno Ehresmann, Daniel de las Heras, Thomas M. Fischer
We measure the dynamical behavior of colloidal singlets and dumbbells on an inclined magnetic moir'e pattern, subject to a precessing external homogeneous magnetic field. At low external field strength single...
The content of this RSS Feed (c) The Royal Society of Chemistry




pr

Art Direction and the New WordPress Editor

Mel Choyce explores how the new WordPress editor (also know as Gutenberg) can be used to create more carefully art directed posts. Like gifts carefully arranged beneath the Christmas tree, it’s the contents that matters but the presentation that sells.


The New York Times release of Snowfall in 2012 took the web industry by storm. Media-rich and captivating, its design evoked wonder, fear, and desperation in the face of an avalanche. Snowfall was one of the first great art directed digital experiences in this era of the modern web (Space Jam, obviously, being one of the great experiences of the era prior).

“Art direction combines art and design to evoke a cultural and emotional reaction. …Art direction is about evoking the right emotion, it’s about creating that connection to what you’re seeing and experiencing.”

Art Direction and Design by Dan Mall

Art direction isn’t a new concept. Pick up any magazine or print publication — designers have long been creating evocative media experiences. Then the web came and messed that up. Fonts and even colors were limited at first, especially if you wanted to create something using semantic HTML rather than Flash. Early HTML and CSS didn’t offer great ways to create dynamic layouts like you’d see in a magazine. Floats, am I right?

A lot’s changed in the past decade. We have reliable ways to serve fonts, opening up vast typographic possibilities. CSS features like Flexbox and Grid allow for complex layouts. Plus, our hardware is getting better and better. We live in exciting times.

Behind the curve

But not everyone’s kept up. For most of its history, the WordPress editor was a text-first writing experience, shining with simple blogs but falling flat in the face of a complex website. Want some columns on your page? Well, there’s a plugin for that, it lets you write some pseudo-code WordPress called shortcodes, and yeah you just need to wrap your columns in this code in your editor… Or, uh, maybe you could hand-code a template for your theme that offers three columns of widget areas and put everything in there? Or maybe…

You get the point.

The new WordPress editor (codenamed “Gutenberg”) introduces the concept of blocks, like building blocks or bricks or LEGO. Rather than needing to hand-code anything, you have an interface for editing all sorts of content, even the aforementioned former nightmare of columns. Blocks can come with placeholders, so you can fill-in-the-blanks rather than having to build from scratch.

The new WordPress block editor allows me to focus on the best way of presenting my content instead of focusing on how I’m going to technically enter the content. The block editor allows my designer brain to think more creatively. I can go about creating an appropriate emotional reaction for a site’s content, rather than focusing on implementation.

Block it to me

The building blocks of the new editor (text, media) are the same, but the new ways to combine and build upon those blocks makes for a better art direction experience.

New to the WordPress editor is the Media and Text block, which combines — you guessed it — media and text into a new way to approach layouts.

This is the foundation of the new WordPress editor. Take atomic pieces, and combine them to make whole sections and layouts. Best yet, no fumbling with floats if you want to put some text next to an image!

Do you want to build a website?

Let’s imagine I’m building a website for a non-profit that rescues black cats. They offer adoption services, run a fostering program, and take in abandoned, feral, or other cats in need. The primary goal of the site is to connect people to the rescue organization. Raising awareness and soliciting donations are secondary, but still important factors.

Because so much of a person’s experience with WordPress is contingent on their particular setup — themes, plugins, and admin customizations — I’ve decided to keep this site pretty light.

The Twenty Twenty Theme

WordPress releases a new default theme pretty much every year. This year’s theme, Twenty Twenty, was built with Gutenberg in mind. It supports optional features like color schemes and wider block alignments. The design is clean and modern, and offers some additional customization options. I think it’s a good choice for this website.

Columns

While there’s no internal grid system in WordPress (yet!), the Columns block comes close to allowing complex layouts within a post or page. With it, you can start to break out of one column and think more like a print designer.

The most straightforward layout we could do is a familiar pattern on the web — three feature columns consisting of a heading, some text, and a button.

To accomplish this, I loaded up the editor and started planning.

First, I added a group block to contain my columns, and provide a background color. (The columns block does not currently support background colors, but it might in the future.)

I want my columns to stand out from the white background of the page, so I opt for a light grey.

Within the group, I placed my Column block, which features a convenient placeholder to help me pick which layout I want:

I opt for the three column option.

From here, it’s easy to build out my section — headings, paragraphs, and buttons are all existing blocks I can plop right into my columns:

It looks really good on the front-end of my site, too:

This is all fairly straightforward, but by changing up a couple columns widths and some sizing, I can get something that looks more dynamic and draws attention to the adoption process, which is the most important feature:

I could even add an image, change up my background color to match, and nest “Foster” and “Save” into another set of columns beneath “Adopt”:

All of this from the same set of blocks, yet each variation strikes a different impact. …And, you know, feels a little less like this:

But if I wanted to start looking like that, uh, second example — I can!

Media and Text

The aforementioned Media and Text block is a great building block for some eye-catching, informational parts of my homepage.

Galleries

To break up all that text content and get my site looking less like it’s for a startup, how about adding even more cute cats in between? You can never have too many cat photos on the internet.

CoBlocks is a fantastic plugin that adds new blocks to WordPress, among them the icon block I used above, as well as a couple of different gallery layouts. I think carousels are terrible when they’re used for showcasing features or content, but I think they’re a good gallery format, and having something horizontal means my cats aren’t taking up too much space (unlike my own black cat, who likes to hog all my leg room in bed).

My favorite thing about this block is that, even though it’s fully-featured, it’s still 100x less of a chaotic mess than any other slider plugin I’ve experienced in WordPress.

CoBlocks comes with Carousel, Collage, Masonry, Offest, and Stacked gallery blocks. The default Gallery block in WordPress is also pretty good — much better than it used to be.

Buttons

Alright, where am I? I have my intro columns featuring the primary information about site, some informational text, lots of cute cat photos, more informational text… I think my homepage is shaping up. I just need one final element: a donation section. Can’t take care of those kitties without some cash.

The only way to integrate payments into WordPress is to either link to a third party platform, or use a plugin. I’ve used ActBlue quite a bit when making candidate websites, so I’m going to pretend that this site uses a third party service that, like ActBlue, lets me link to specific donation increments off-site.

WordPress has a Buttons block underway that lets you add a row of buttons, without needing to rely on another block like Columns, but in the meantime, CoBlocks has an equivalent block I can use for now.

Great. It’s got a bold color, and I can link to a couple different donation increments.

But it could really use… something, you know, that draws the eye even more?

Shape Divider

CoBlocks has another great block, Shape Divider, which lets you add a decorative border that sits nicely above or below any container element, like the group block I’m using here. It comes with a variety of shape styles, like hills, rounded, and pointed. I settle on waves, which includes some overlapping transparencies along the top. It’s different from the rest of my page, but in a good way — it’s a subtle way for that section to stand out.

With that final block, my homepage is almost done. I just want to touch on two more blocks that can be used to improve the design: the Separator block, and the Spacer block.

Separator

Separator inserts an <hr /> into the page, with some minimal styles to make it look nice. Themes can then add new styles, or restyle the default to get some fancy alternatives, like this:

The Separator block is a great way to break up sections in a page.

Spacer

The Spacer block is an abomination, but I love it. It’s just an empty space. Think spacer gif, but spacer div. It’s terrible, but oh, oh so useful. I can increase space between elements without having to write any custom CSS. It empowers folks that are visual, but not technical. Combine it with Columns and you can almost pretend that you’re using a grid!

(It is, at the very least, hidden from screen readers.)

Okay but what does it look like?

With those in place, let’s check out my homepage.

Almost perfect. It’s bold, streamlined, and features plenty of cute cats. The only issue that caught my eye is the gap of white between the page content and the footer, which I can fix with some CSS added into WordPress’s Customizer tool:

.home .footer-nav-widgets-wrapper {
    margin-top: 0;
}

Not too bad, considering this is the first bit of CSS I’ve had to write for my homepage layout.

Much better.

How about the old editor?

Out of curiosity, I tried to recreate my homepage using the Classic Editor plugin, which restores the old WordPress editing interface. Since I used some of my favorite plugins on my block editor site, I decided it was only fair to leverage plugins on my classic site. I installed
Shortcodes Ultimate, a plugin offering over 60 shortcodes to improve the WordPress editor. It has a good shortcode picking interface, great documentation, and in my opinion, is one of the best shortcode plugins the WordPress community has to offer.

This wasn’t fun. No shortcode interface will make the experience worth it to me, when I could use Gutenberg. One misplaced bracket, and I’ve borked my site. It takes a whole lot of time. And, I almost always need to write a bunch of custom styles to get it to work with my theme.

Yes, this is a LiveJournal icon I’ve had saved for like, 16 years.

With our homepage complete, let’s move on to some interior pages. There are a couple other blocks, and combinations of blocks, that can help me build out the rest of my site.

Cover Block

One of the earliest complex blocks offered in the new WordPress editor was the “Cover” block, which can be used for banners and hero images:

Originally, it only allowed you to add an image or video, headings, and paragraphs, but the requirements have recently been loosened so you can add whatever blocks you like. This can lead to some unique layout possibilities.

Take, for example, a “Teams” section on our About page. We could use columns to make a simple layout, like this:

But if we have better images, we could explore using Cover to create more visual impact:

Let’s say we didn’t have any staff images, or they’re all poor quality and weirdly cropped, which is… not an usual occurrence! We can forego images altogether and instead, use the new gradient picker in Cover and use that to create visual impact:

Explore third-party blocks

Like CoBlocks’s gallery blocks, many third-party WordPress plugins can enhance your site and allow you to create a better experience for your visitors.

Accordions

Let’s say this rescue organization has some FAQs. Rather than creating a wall-of-text, we could use an accordion block to organize the content for easier browsing:

Accordion Block from CoBlocks

Grids

If columns aren’t adequate for achieving the layout you’re looking to build, you could try the Grids plugin by Evolve, which comes with a “build your own grid” feature:

I can use this block to make a more visually interesting landing page for the “Get Involved” section, which only exists to link out to its child pages:

Typography

You can also use plugins like CoBlocks and Kioken Blocks to customize your site’s typography, opening up the possibilities for a truly from-scratch site design. And I have to admit, as someone who makes web software, the idea of giving full typographic control to users terrifies me… but as a designer, I absolutely love this feature! ????

With these tools, it won’t take long to finish my website.

Tons of new possibilities

Mix and match to create beautiful, art-directed experiences using blocks. You can look for plugins that support and build on the new editor, or specifically download individual blocks in the new WordPress block directory (just beta launched!).

Unsure of how to combine blocks to make an impact? A couple of plugins like Atomic Blocks, Kioken Blocks, and Ultimate Addons for Gutenberg include pre-curated layouts you can quickly add to your own sites. These layouts are already art directed, so you can choose the one that creates the biggest impact on your own audience.

Explore, and share your results!


About the author

Mel Choyce is a wicked awesome product designer based in Boston, Massachusetts. Not only is Mel a WordPress Core Committer and former Release Lead, she is a regular core contributor and speaks frequently at WordCamps on design, typography, and user experience.

When Mel isn’t designing products at Automattic, she enjoys cold brew coffee, craft beer, and rocking out in her band. Say hi to her on Twitter at @melchoyce, and visit her site at choycedesign.com.

More articles by Mel




pr

Four Ways Design Systems Can Promote Accessibility – and What They Can’t Do

Amy Hupe prepares a four bird roast of tasty treats so we can learn how the needs of many different types of users can be served through careful implementation of components within a design system.


Design systems help us to make our products consistent, and to make sure we’re creating them in the most efficient way possible. They also help us to ensure our products are designed and built to a high quality; that they’re not only consistent in appearance, and efficiently-built, but that they are good. And good design means accessible design.

1 in 5 people in the UK have a long term illness, impairment or disability – and many more have a temporary disability. Designing accessible services is incredibly important from an ethical, reputational and commercial standpoint. For EU government websites and apps, accessibility is also a legal requirement.

With that in mind, I’ll explain the four main ways I think we can use design systems to promote accessible design within an organisation, and what design systems can’t do.

1. Bake it in

Design systems typically provide guidance and examples to aid the design process, showing what best practice looks like. Many design systems also encompass code that teams can use to take these elements into production. This gives us an opportunity to build good design into the foundations of our products, not just in terms of how they look, but also how they work. For everyone.

Let me give an example.

The GOV.UK Design System contains a component called the Summary list. It’s used in a few different contexts on GOV.UK, to summarise information. It’s often used at the end of a long or complex form, to let users check their answers before they send them, like this:

Users can review the information and, if they’ve entered something incorrectly, they can go back and edit their answer by clicking the “Change” link on the right-hand side. This works well if you can see the change link, because you can see which information it corresponds to.

In the top row, for example, I can see that the link is giving me the option to change the name I’ve entered because I can see the name label, and the name I put in is next to it.

However, if you’re using a screen reader, this link – and all the others – will just say “change”, and it becomes harder to tell what you’re selecting. So to help with this, the GOV.UK Design System team added some visually-hidden text to the code in the example, to make the link more descriptive.

Sighted users won’t see this text, but when a screen reader reads out the link, it’ll say “change name”. This makes the component more accessible, and helps it to satisfy a Web Content Accessibility Guidelines (WCAG 2.1) success criterion for links which says we must “provide link text that identifies the purpose of the link without needing additional context”.

By building our components with inclusion in mind, we can make it easier to make products accessible, before anyone’s even had to think about it. And that’s a great starting point. But that doesn’t mean we don’t have to think about it – we definitely do. And a design system can help with that too.

2. Explain it

Having worked as the GOV.UK Design System’s content designer for the best part of 3 years, I’m somewhat biased about this, but I think that the most valuable aspect of a design system is its documentation.

(Here’s a shameless plug for my patterns Day talk on design system documentation earlier this year, if you want to know more about that.)

When it comes to accessibility, written documentation lets us guide good practice in a way that code and examples alone can’t.

By carefully documenting implementation rules for each component, we have an opportunity to distribute accessible design principles throughout a design system. This means design system users encounter them not just once, but repeatedly and frequently, in various contexts, which helps to build awareness over time.

For instance, WCAG 2.1 warns against using colour as “the only visual means of conveying information, calling an action, prompting a response or distinguishing a visual element”. This is a general principle to follow, but design system documentation lets us explain how this relates to specific components.

Take the GOV.UK Design System’s warning buttons. These are used for actions with serious, often destructive consequences that can’t easily be undone – like permanently deleting an account.

The example doesn’t tell you this, but the guidance explains that you shouldn’t rely on the red colour of warning buttons to communicate that the button performs a serious action, since not all users will be able to see the colour or understand what it signifies.

Instead, it says, “make sure the context and button text makes clear what will happen if the user selects it”. In this way, the colour is used as an enhancement for people who can interpret it, but it’s not necessary in order to understand it.

Making the code in our examples and component packages as accessible as possible by default is really important, but written documentation like this lets us be much more explicit about how to design accessible services.

3. Lead by example

In our design systems’ documentation, we’re telling people what good design looks like, so it’s really important that we practice what we preach.

Design systems are usually for members of staff, rather than members of the public. But if we want to build an inclusive workplace, we need to hold them to the same standards and ensure they’re accessible to everyone who might need to use them – today and in the future.

One of the ways we did this in my team, was by making sure the GOV.UK Design System supports users who need to customise the colours they use to browse the web. There are a range of different user needs for changing colours on the web. People who are sensitive to light, for instance, might find a white background too bright. And some users with dyslexia find certain colours easier to read than others.

My colleague, Nick Colley, wrote about the work we did to ensure GOV.UK Design System’s components will work when users change colours on GOV.UK. To ensure we weren’t introducing barriers to our colleagues, we also made it possible to customise colours in the GOV.UK Design System website itself.

Building this flexibility into our design system helps to support our colleagues who need it, but it also shows others that we’re committed to inclusion and removing barriers.

4. Teach it

The examples I’ve drawn on here have mostly focused on design system documentation and tooling, but design systems are much bigger than that. In the fortuitously-timed “There is No Design System”, Jina reminds us that tooling is just one of the ways we systematise design:

…it’s a lot of people-focused work: Reviewing. Advising. Organizing. Coordinating. Triaging. Educating. Supporting.”

To make a design system successful, we can’t just build a set of components and hope they work. We have to actively help people find it, use it and contribute to it. That means we have to go out and talk about it. We have to support people in learning to use it and help new teams adopt it. These engagement activities and collaborative processes that sit around it can help to promote awareness of the why, not just the what.

At GDS, we ran workshops on accessibility in the design system, getting people to browse various web pages using visual impairment simulation glasses to understand how visually impaired users might experience our content. By working closely with our systems’ users and contributors like this, we have an opportunity to bring them along on the journey of making something accessible.

We can help them to test out their code and content and understand how they’ll work on different platforms, and how they might need to be adjusted to make sure they’re accessible. We can teach them what accessibility means in practice.

These kinds of activities are invaluable in helping to promote accessible design thinking. And these kinds of lessons – when taught well – are disseminated as colleagues share knowledge with their teams, departments and the wider industry.

What design systems can’t do

Our industry’s excitement about design systems shows no signs of abating, and I’m excited about the opportunities it affords us to make accessible design the default, not an edge case. But I want to finish on a word about their limitations.

While a design system can help to promote awareness of the need to be accessible, and how to design products and services that are, a design system can’t make an organisation fundamentally care about accessibility.

Even with the help of a thoughtfully created design system, it’s still possible to make really inaccessible products if you’re not actively working to remove barriers. I feel lucky to have worked somewhere that prioritises accessibility. Thanks to the work of some really brilliant people, it’s just part of the fabric at GDS. (For more on that work and those brilliant people, I can’t think of a better place to start than my colleague Ollie Byford’s talk on inclusive forms.)

I’m far from being an accessibility expert, but I can write about this because I’ve worked in an organisation where it’s always a central consideration. This shouldn’t be something to feel lucky about. It should be the default, but sadly we’re not there yet. Not even close.

Earlier this year, Domino’s pizza was successfully sued by a blind customer after he was unable to order food on their website or mobile app, despite using screen-reading software. And in a recent study carried out by disability equality charity, Scope, 50% of respondents said that they had given up on buying a product because the website, app or in-store machine had accessibility issues.

Legally, reputationally and most importantly, morally, we all have a duty to do better. To make sure our products and services are accessible to everyone. We can use design systems to help us on that journey, but they’re just one part of our toolkit.

In the end, it’s about committing to the cause – doing the work to make things accessible. Because accessible design is good design.


About the author

Amy is a content specialist and design systems advocate who’s spent the last 3 years working as a Senior Content Designer at the Government Digital Service.

In that time, she’s led the content strategy for the GOV.UK Design System, including a straightforward and inclusive approach to documentation.

In January, Amy will continue her work in this space, in her new role as Product Manager for Babylon Health’s design system, DNA.

More articles by Amy




pr

The Accidental Side Project

Drew McLellan puts the chairs up on the tables, sweeps the floor, and closes off our season, and indeed the entire 24 ways project with a look back at what it’s meant to run this site as a site project, and what impact side projects can have on the work we do. Will the last one out turn off Christmas the lights?


Brought to you by The CSS Layout Workshop. Does developing layouts with CSS seem like hard work? How much time could you save without all the trial and error? Are you ready to really learn CSS layout?


Fifteen years ago, on a bit of a whim, I decided it would be fun to have a Web Standards version of something like the Perl Advent calendar. A simple website with a new tip or trick each day leading the readers through December up until Christmas.

I emailed a bunch of friends that kept web design and development themed blogs (remember those?) suggesting the idea and asking if they’d like to contribute. My vision had been that each post would be a couple of paragraphs of information. A small nugget of an idea, or a tip, or a suggestion. What happened was something really amazing. I began to receive really insightful blog posts containing some of the most valuable writing I’d seen online all year.

Look at this piece from Ethan Marcotte on Centered Tabs with CSS, or this detailed piece on scripting block quotes from Jeremy Keith. I was blown away, and the scene was set.

Part of the original design. Photo by Bert Heymans.

Collaboration

What I hadn’t anticipated in 2005 was that this little side project would turn into a fixture of the industry calendar, would introduce me to a raft of field experts, and would have me working with an eclectic team of collaborators for fifteen long seasons.

And that last point is crucial. I’ve by no means produced this alone. Rachel Andrew has been a constant supporter in helping each year to see the light of day and producing our ebooks. After a couple of years, Brian Suda stepped in to help me plan and select authors. In 2008, I managed to persuade Tim Van Damme to replace my very basic site design with something altogether more fitting. In 2010, Anna Debenham came on board initially to help with the production of articles, but rapidly became a co-producer working with me on all aspects of the content. Owen Gregory joined up that same year to help with the proofing and editing of articles, and for many years did a fantastic job writing the home page article teasers, which are now but a shadow of their former selves.

Tim Van Damme’s 2008 redesign.

Also in 2010, we produced a book in collaboration with Five Simple Steps and raising funds in the memory of Remy and Julie’s daughter, Tia Sharp.

The Five Simple Steps 24 ways book. Photo by Patrick Haney.

In 2013, Paul Robert Lloyd stepped up to the plate to provide us with the design you see today, which not only subtly shifts colours between each day, but across the years as well. Compare the reds of 2005 to the purples of 2019, and the warm tones of a Day 1 to its correspondingly cool Day 24. It’s a terrific piece of work.

Paul Robert Lloyd’s design plays subtly with colour shifts.

In 2014 we won a Net Award for Best Collaborative Project at a fancy ceremony in London. Many past authors were there, and as it was an aware for our collaborative efforts, we all posed with the glassware for photos.

We all went to a right fancy do.

Looking back, looking forward

But even I, Sea Captain Belly Button am not enough of a navel gazer to just be writing an article just about this website. As we draw our fifteenth and final year to a close, it’s important to reflect on what can be learned. Not from the articles (so much!) or from the folly of committing to a nightly publishing schedule for a month every year for fifteen years (don’t do it!) but from the value in starting something not because you have to, but just because you want to. From scratching an itch. From working with a friend just because you love spending time with them. Or for doing something because you see the opportunity for good.

As web designers and developers, we have the opportunity to turn the skills we use in our profession to so many different purposes. In doing so you never know what good might come from it.

Seeing the good

This week I asked around to find out what good others have seen from their side projects. Long time 24 ways contributor Simon Willison had this to say:

Simon went onto explain how it was a website side project that got him his first job in tech. After that, his personal blog lead him to getting a job at Lawrence Journal-World where he created Django. On his honeymoon, Simon and his new wife (and 24 ways contributor) Natalie Downe created Lanyrd, and Simon’s more recent Datasette project landed him a JSK Fellowship at Stanford. That’s an impressive record of side projects, for sure.

Others had similar stories. My good friend Meri Williams is currently CTO of challenger bank Monzo, as well as being a trustee at Stonewall and Chair of The Lead Developer conference.

Again, an impressive list of achievements, and I’m sure both Simon and Meri would have eventally found other routes to their individual success, but the reality is they did it through side projects. Through being present and active, contributing a little to their communities, and receiving so much more back in return.

Of course, not all projects have to be directly related to the web or software to be fulfilling. Of course they don’t. Mark Small and Jack Shoulder embraced their love of a good rear end and created MuseumBums, informally cataloging perfect posteriors for your perusing pleasure. On its success, Mark says:

Jack adds:

I had so many heartwarming responses to my request for stories, I really recommend you go over to the thread on Twitter and read it. It’s been one of my favourite set of replies in a long time.

Focussing on what’s important

As the years progressed, more and more publications sprang up both at Christmas and throughout the year with how-to articles explaining techniques. As a natural response, 24 ways started mixing up solution-based articles with bigger picture takes on a wider range of topics, but always with a practical takeaway to impress your friends.

After the embarrassment of white dudes that dominated the early years, we actively sought to open the opportunity to write to a wider and more diverse range of experts. While I don’t think we ever got as much racial diversity in our lineup as I would have liked to have achieved, I’m very proud that each season has been closely gender-balanced since 2012. This is something that was never forced or remotely hard to achieve, all it took was an awareness of the potential for bias.

Calling time

With all the benefits that side projects can bring, it’s also important to be mindful of downsides. Not every project will take flight, and those that do can also start to consume valuable time. That’s fine while it’s fun and you’re seeing the benefits, but it’s neither fun or healthy long-term to have no time away from something that might otherwise be your job.

Spending time with family, friends, and loved ones is equally important especially at this time of year. Just as anyone who does a lot of sport or fitness will tell you about the value of rest days between your activities to let the body recover, time away from ‘work’ is important to do the same for your brain.

Having run this site every Christmas for 15 seasons, it’s time to take a breather and give it a rest. Who knows if we might return in the future, but no promises. It’s been a good run, and an absolute privilege to provide this small tradition to the community I love.

So from me and the whole 24 ways family, Happy Christmas to all, and to all a good night.

Anna and Drew at the 2014 Net Awards dinner.

About the author

Drew McLellan is a developer and content management consultant from Bristol, England. He’s the lead developer for the popular Perch and Perch Runway content management systems, and public speaking portfolio site Notist. Drew was formerly Group Lead at the Web Standards Project, and a Search Innovation engineer at Yahoo!. When not publishing 24 ways, he keeps a personal site about web development, takes photos, tweets a lot and tries to stay upright on his bicycle.

More articles by Drew




pr

Sprinting away in style

The ongoing Olympics at Rio is creating a buzz not just for its sports but also for the fashion flaunted by the sportsmen, says NEETI SARKAR




pr

Sprinting away in style

The ongoing Olympics at Rio is creating a buzz not just for its sports but also for the fashion flaunted by the sports stars, says NEETI SARKAR




pr

LFW W/F 2016: Past meets present

Bina Rao’s collection for Lakme Fashion Week Winter/Festive 2016 draws inspiration from Rembrandt’s paintings




pr

Imprints for life

An affinity for art and certain turns her life took that drew R. Vaishnavi to tattooing




pr

Mahila Praharis of the BSF Camel Contingent will make their Republic Day parade debut in uniform designed by Raghavendra Rathore

The designer also incorporated various skills from across the country and it took him three months to complete the uniform



  • Life &amp; Style

pr

After a 20 year-long wait, Anita Dongre launches her vegan accessory line comprising handbags and belts

The new line of belts and bags are made from a plant-based, plastic-free material called Mirum



  • Life &amp; Style

pr

Neeta Lulla on ‘Shaakuntalam’: Samantha Ruth Prabhu’s outfits are simple yet alluring

Designer Neeta Lulla on the fairytale-like silhouettes for Samantha Ruth Prabhu’s mythological romance drama ‘Shaakuntalam’




pr

Namonia spreads!




pr

Sprinting over every hurdle

Being a woman doesn’t mean you need to be bogged down with household and office chores. With some planning, you too can start off by being a runner.




pr

Hyderabad mountaineer’s Project 3K in Ladakh

Hyderabad-based Abhishek Duttagupta on how he scaled Mt Kun, Mt Kang Yatse and completed the Ladakh ultra marathon back-to-back



  • Life &amp; Style

pr

Editorial. Gold users must get a transparent Re-based price

There is a need to provide consumers with a transparently derived domestic reference rate which is under regulatory supervision




pr

Editorial. Overall rain surplus but spatial, temporal spread concerning

While the IMD has strived to improve its predictive models, global warming is the wild card factor




pr

Editorial. India Inc Q1 results provide little fuel for market rally

A surge in prices of fuel, metals and industrial feedstock led to a spike in production and operating costs this quarter, denting profit growth




pr

Editorial. Sound compromise

UPS addresses concerns of both employees and the fisc




pr

Editorial. Sort out FPO problems before trying to scale up

The policy confusion over FPOs needs to be cleared




pr

Editorial. Loose ends in SEBI’s colo scam and other probes

There are multiple instances of SEBI’s orders being overturned by SAT, displaying lack of rigour in its investigation




pr

Editorial. RBI’s diktat on sharp lending practices in gold loans welcome

Non-compliance by lenders must be strictly dealt with by the central bank




pr

Editorial. Farm price support should go beyond procurement

Bhavantar can work well in tandem with e-NAM which improves price realisation. This can reduce the Bhavantar outgo




pr

IndusInd Bank Q2 PAT tanks 40 per cent on higher provisions, bad loans

NIM moderates as deposits outpace credit growth



  • Money &amp; Banking

pr

Suryoday Small Finance Bank’s net profit dips 10% in Q2FY25 to ₹45 cr

Net interest margin rose to 9.7 per cent in Q2FY25 against 9.4 per cent in Q2FY24



  • Money &amp; Banking

pr

RBI approves third term for Axis Bank MD, CEO Amitabh Chaudhry

Before joining Axis Bank, Chaudhry was leading HDFC Life



  • Money &amp; Banking

pr

Bank of Baroda likely to report 5% YoY net profit growth in Q2FY25

Analysts from PL Capital and Axis Capital estimate a slowdown in loan growth to 12%, down from 19% in the previous year, and a dip in deposit growth to 9% from 15%



  • Money &amp; Banking

pr

Bank of Baroda reports 23% increase in Q2FY25 net profit at ₹5,238 cr

BoB had reported a net profit of Rs ₹4,253 crore in the year ago quarter (Q2FY24)



  • Money &amp; Banking

pr

IDBI Bank’s Q2FY25 net profit up 39% at ₹1,836 cr

The private sector lender had reported a net profit of ₹1,323 crore in the year ago quarter



  • Money &amp; Banking

pr

Indian banks increased their overseas presence during 2023-24 : RBI Survey

During the year, the number of branches and employees of foreign banks in India also expanded by 0.6 per cent and 1.4 per cent, respectively



  • Money &amp; Banking

pr

Yes Bank Q2 Results: Net profit surges 145% year-on-year to ₹553 crore, with NII rising 14%

Yes Bank’s standalone net profit more than doubled to ₹5.53 billion for the financial second quarter from ₹2.25 billion in the same period a year earlier



  • Money &amp; Banking

pr

REC posts ₹4,038 crore net profit in Q2 FY25

Its consolidated total income stood at around Rs ₹13,706 crore in Q2 FY25, compared to Rs ₹13,092 in Q1 FY25




pr

Record profits: PNB Q2 consolidated net zooms 137% at ₹4,714 crore

On a standalone basis, PNB’s net profit for the quarter under review increased 145 per cent to ₹4,303 crore (₹1,756 crore)



  • Money &amp; Banking

pr

Tamilnad Mercantile Bank posts ₹303 cr net profit in Q2

Net interest income grew by 12 per cent to ₹596 crore, up from ₹533 crore a year earlier



  • Money &amp; Banking

pr

bl interview. After recognising MFI pain, profitability to improve in H2FY25: IDFC First Bank MD

Deposit to continue growing faster than credit in H2FY25



  • Money &amp; Banking

pr

Canara Bank beats estimate, reports 11% growth in net profit to ₹4,014 crore in Q2FY24

Global deposits were ₹13,47,347 crore, up by 9.34 percent, while gross advances reached ₹10,11,997 crore growing by 9.53%



  • Money &amp; Banking

pr

Five-Star Business Finance posts ₹268 cr profit in Q2, AUM grows 32%

For the quarter ended September 30, 2024, the company’s net profit surged by 34 per cent to ₹268 crore, up from ₹199 crore



  • Money &amp; Banking