Twice as nice: Introducing the NHS.UK Eleventy Plugin
With the NHS.UK Eleventy Plugin you can focus on writing content instead of writing code.
With the NHS.UK Eleventy Plugin you can focus on writing content instead of writing code.
As teams at GDS prepare to launch a refreshed brand for GOV.UK on 25 June, so the X-GOVUK community has been updating its projects in preparation for this go-live date.
Goodbye Dribbble.
I’ll be presenting a beginner’s guide to the IndieWeb.
Come for the talks, stay for the Bitterballen, leave with a better understanding of a beautifully comprehensive tool for design.
Want jam, have jam.
I made a thing; a small website to provide inspiration when naming things.
A golden age of CSS was evident in Amsterdam, but to whose benefit?
Introducing a plugin for the GOV.UK Prototype Kit that adds a helpful collection of Nunjucks template filters. Rapidly modify and transform data while ensuring it follows the GOV.UK style guide.
Embedding content is a pain. There’s got to be another way.
Choosing a new static site generator to power this website.
The GOV.UK Eleventy Plugin makes it easy to start writing documentation rather than spend time building a website for it.
A compelling 120-word critique regarding automated front-end development, as provided by a class attribute.
I assemble a heavenly host of cherubs to sing the virtues of the Eleventy static site generator. By looking at how it compares to the familiar Ruby-based Jekyll, I may have you humming its tune for this season’s holiday projects. But will it put you on cloud eleven?
In thinking about the fabric of the web, I unpick a few threads and tie myself in knots.
Who is this website for?
A two-week stay in Berlin not only gave me time to explore the city, but also space to question the direction of my career and address a growing sense of disillusionment with my profession.
As people look to replace Twitter as their social network of choice, Mastadon and Micro.blog have emerged as early contenders.
GDPR can’t come soon enough.
My relationship with JavaScript? It’s complicated.
It’s that time again.
Three aspects of my personality have proven pertinent.
Why do some designers choose to work for ‘evil’ corporations – and what happens to them when they get there?
Fiddling around with RSS.
Twitter is a place I visit to get annoyed. I need an alternative. That alternative could be my very own website.
Creating something new will always attract attention, but there’s an under celebrated nobility in improving what already exists.
Blogging is a great way to showcase your expertise and raise your profile. But can you achieve this without drawing on manipulative methods of generating traffic?
Container queries are always a popular topic when discussing the future of responsive design. But do we actually need them any more?
The final part of my three-part essay based on the talk I gave at Smashing Conference. I look at how we might build components and consider their wider composition.
In this second part of my three-part essay based on the talk I gave at Smashing Conference, I propose a model for thinking about design systems.
I run my finger along the seam between interface patterns and design systems, exploring how a visual design language can underpin and inform a web style guide, with judicious use of CSS preprocessing. Like a good Christmas jumper, sometimes you need to get creative with the rules.
Because it uses logical values, Flexbox layouts will automatically align according to a document’s text-direction. Well, almost.
Justin Avery, who curates Responsive Design Weekly, asked me to revisit the four questions I answered as part of an interview series in 2013. Here are my answers.
Three years after the Web Aesthetic, comes my second article for A List Apart. Intended to inform a broader discussion about the principles that underline our work, I thought I would share some background as to how this article came about.
Just as blogging began to democratise publishing, social media arrived to undermine it.
Responsive web design changed everything about how we think and work on the web. Five years on, we’re still exploring the best ways to approach our practice. If we want a web that is truly universal, we must consider our users, our medium, and our teams in new, adaptable ways. Looking at where we’ve come from and where we’re going, I propose a philosophical framework for our work on the responsive web.
In what has become a familiar pattern, having decided to embark on a redesign last February, I then spent the following 18 months iterating and iterating. Now, after many missed deadlines, I have finally launched my new site.
I’m attending my second IndieWebCamp this weekend, with the sole aim of implementing webmentions. This has meant prematurely launching my new Jekyll-based website. That this has been in development since last February, many would say this moment is long overdue.
For those looking for a quick and succinct introduction to Sass, the popular CSS pre-processor, my friend Cole Henley has written a pocket guide:
Sass is a tool that takes a lot of the legwork out of writing good CSS. This pocket guide will provide an overview of how Sass can dramatically improve your workflow and make your CSS more flexible, robust and reusable.
This guide only takes 30 to 45 minutes to read, but on turning the last page you’ll be up to speed with all the features of Sass, know why you may want to use them and be thinking about building upon these features to take your Sass usage to the next level – careful now! The book is available now from Five Simple Steps for just £3.
Earlier this month I attended UpFront Conference, an event organised by Dan Donald and other members of Manchester’s digital community.
I recently learnt about a security exploit that can occur when pages served over HTTPS use HTTP compression. Secure or fast, pick one?
Matthew Butterick’s scrutiny of Medium reveals it to be “a form of human fracking”:
In “Death to Typewriters,” Medium insists that the typewriter is its “sworn enemy.” In certain typographic details, maybe so. But as a device that imposes homogeneous design, Medium still has a lot in common with the typewriter.
In fact, its ethics are actually worse than the traditional typewriter. Why? Because Medium’s homogeneous design has nothing to do with limitations of the underlying technology (in this case, the web)… it’s a deliberate choice that lets Medium extract value from the talent and labor of others.
Convenience always has a cost.
I asked Jake Archibald a few questions about how he designed and developed his native-feeling SVG optimisation app.
Answers to questions about responsive design put to me by readers of net Magazine.
I perch my partridge in the CSS pear tree to discuss naming methodologies, ontologies and semantics. What’s in a name? That which we call a cherub by any other name would smell as sweet.
Last Friday I attended Responsive Day Out 2. While the format was the same as last year, the tenor was a little different. Gone were the theoretical presentations, instead speakers focused on the work; getting into the nitty-gritty.
For this month’s net magazine, Martin Cooper asked me to provide some thoughts on this question prompted by a recent exchange between Jeff Croft and Jeffrey Zeldman.
In this interview for Creative Bloq, I talk about web native design and how Saul Bass inspires my work.
Whereas the world’s foremost architects, graphic artists, typographers, iconographers and illustrators are asked to create their best work to celebrate each Olympic Games, still we wait for the Olympic movement to give equal consideration to the design of its websites.
The net Awards return for their fifteenth year, and I’m more than a little surprised to be nominated for Designer of the Year.
Vasilis van Gemert asked me to curate a list of classic articles for the Daily Nerd, but what constitutes a classic?
The tail end of this year has been rather hectic. If moving house and changing jobs weren’t enough to be getting on with, I was also busy redesigning 24 ways.
A brief thought about collaboration.
Bradshaw’s Guide brings George Bradshaw’s 1866 descriptive railway handbook to the web. Today I’ll cover some of the typographic decisions I made, and how they lead me to believe that we still lack the necessary tools for web typography.
A selection of websites of sensational design and superb development.
Since Mikey joined us in February, the number of designers working at Clearleft is at an all time high. As the company grows, we want to maintain the same level of knowledge sharing and collaboration that happened more spontaneously with a smaller team.
An Event Apart, The Next Web and The Guardian are this month’s responsive recommendations.
Skinny Ties, Microsoft and Anna Debenham feature in this month’s responsive recommendations.
The Christmas break provides the time to tie up loose ends and make much needed progress on personal projects. At least, that was the plan. Once again I find myself distracted by the task of making this website just that little bit faster.
Earlier today, 24 Ways published an article in which I outlined five reasons why I believe two current proposed markup patterns for responsive images are largely redundant. Here I provide some follow-up, and hopefully clarification around the points I raised.
I engage with the two main approaches to the matter of responsive images and finds them wanting. Could “Bah, humbug!” be a reasonable response to markup excess?
Justin Avery, who curates the Responsive Design Weekly newsletter, asked me four questions as part of his December Interview Series. Here are my answers.
Quartz, Nominet and SB Nation are this month’s responsive recommendations.
After attending Build in Belfast last month, Chris Armstrong gave Ethan Marcotte, Chris Shifflet and myself a tour of the Causeway Coast which, as the name suggests, is home to the famed Giant’s Causeway.
XOXO, Design Intellection and The Cut are this month’s responsive recommendations.
Jason Santa Maria:
Ratios and baselines grids can be too rigid for the inherently flexible nature of the web. Just because something works at one size doesn’t mean the same ratio will be appropriate at larger or smaller sizes.
I often design websites to a vertical rhythm, even though maintaining it can be difficult during development. Jason’s arguments made me realise that this practice goes against the grain of the medium; something I discourage in The Web Aesthetic. I need to let go of my baseline grids.
Website optimisation can be a cruel game; everything has a number that begs to be reduced, but doing so requires a lot of experimentation, research and testing. And when you’re playing with the last hundred or so kilobytes, there’s little reward for your effort.
Microsoft’s Build conference site, Supereight Studios and Palantir are this month’s responsive recommendations.
At the beginning of this year I was struck by a realisation, prompted in part by the discussions around responsive images but also the artistic ingenuity of the image optimisation techniques being used by Jeremy. How might the visual aesthetic of the web change if we were to acknowledge its nature and embrace its constraints?
Adobe recently announced a new suite a products and services for web developers, called Adobe Edge. .net Magazine asked me to provide some thoughts.
When every device begs to be connected, it has become easier – almost necessary – to accept the adaptable nature of the web. Responsive web design is an emerging best practice, and our layouts are becoming more flexible. But often, innovation is focused on technical implementations while the visual aesthetic remains ignored. To put it another way, we’re embracing “responsive” but neglecting the second part: “design.” Now is the time to seek out an aesthetic that is truer to the medium.
Responsive recommendations from the city of Wichita, Jessica Hische and Momentum.
Rian van der Merwe for A List Apart:
A “shiny citadel” from far away, as The Guardian once wrote, up close Brasília has “degraded into a violent, crime-ridden sprawl of cacophonous traffic jams. The real Brazil has spilled into its utopian vision.”
This problem echoes across today’s web landscape as well, where the needs of ordinary users spill constantly into designers’ utopian vision. All around us we see beautiful, empty monuments erected not for their users, but for the people who built them – and the VCs who are scouting them.
“Digital Brasílias” is a great term for all the beautiful – yet ultimately useless – products emerging from the Valley. Product discovery can help us not only design things better, but design better things.
Earlier this month, Team Clearleft headed up to London for a day of design related exhibitions: Bauhaus: Art as Life at the Barbican and (after a ride across the city on a ‘Boris Bike’) British Design 1948-2012 and Heatherwick Studio: Designing the Extraordinary at the V&A.
Fresh responsive thinking from O Music Awards, BBC TV and Passenger Focus.
Contents, SVT Nyheter and Readlists flex their responsive muscles.
I enjoyed Anna Debenham’s excellent response to Marco Arment’s ridiculous assertion that every web designer needs to buy a retina MacBook Pro:
If you’re a web designer, you really, really need to get a cheap Dell monitor so you can see how bad your site looks on it and fix it.
Jack Cheng:
Timely not real-time. Rhythm not random. Moderation not excess. Knowledge not information. These are a few of the many characteristics of the Slow Web. It’s not so much a checklist as a feeling, one of being at greater ease with the web-enabled products and services in our lives.
I like the sound of the Slow Web.
The cream of responsive design comes courtesy of Weightshift, SALT and BBC News Mobile.
Oliver Reichenstein:
Social media buttons are not a social media strategy, even though they’re often sold that way. Excellent content, serious networking and constant human engagement is the way to build your profile. Adding those sleazy buttons won’t achieve anything.
I approve of this message, which might seem ironic coming from a peddler of social media icons. Perhaps I should include this health warning in the accompanying ‘Read Me’ file.
Catch up on the best of responsive with Kiwibank, dConstruct 2012 and ZURB.
Pascal Altena:
In this article, I’ll cover the techniques I use to make images load fast on a webpage.
A beautifully succinct yet informative article that begs to printed out and stuck on the wall next to every web developer.
Kiwibank say they’re willing to stand up for something new “and even a bit crazy”. In the world of banking, a responsive website is just that.
Barebones is an initial directory setup, style guide and pattern primer intended as a starting point for my own web development projects. I’ve made it available on GitHub so that others can use it in their own projects too. Anna has written more about the release here.
Rather than showcase British interactive design talent, the biggest cultural event of our generation has been represented online by an uninspired mess that flies the flag for the status quo.
Since returning from San Francisco, much of my spare time has been spent writing a tutorial for .net magazine. Published as part of their Responsive Week, this is for developers who want to learn about responsive web design but don’t know where to start.
Last week I was invited to Responsive Summit, a face-to-face discussion about Responsive Web Design. We talked about what we’ve learnt so far, the problems we’re continuing to face and things we’d like to change.
Following on from last July’s extensive redesign of this site, the last few weeks have seen me revisit the design and implementation. In light of today’s Responsive Summit, and with a few people asking about the changes, I thought I should provide a little more detail.
.net Magazine asked a group of experts what they find most delightful and most despicable about the social networking giant Facebook. This was my full response. An excerpt can be found in the March 2012 issue.
Ethan Marcotte asked me some questions about the design of my site. He was writing a round up of his twenty favourite responsive websites for .net Magazine and wanted quotes from each creator.
I unfurl my seraph wings to proclaim peace on Earth and the importance of goodwill between designers and developers. It’s not the office Secret Santa that unites them, but constant contact and shared appreciation of different skills.
Unless you’re viewing this in your RSS reader, you may have noticed a few changes to the site. It’s been well over two years since the last redesign, but I’ve been working on this update on-and-off for the last 12 months. I could probably continue tweaking and refining, but as a wise man once said, “real artists ship”.
Two years ago I joined Clearleft. Now with the responsive design movement in full swing, I look back over the last two years to see how much my approach to web design has changed.
Invaluable advise from Twitter’s Mark Otto:
If you’re a graphic designer, work towards bringing whatever print experience you have to a small single page site. If you’re an interaction designer, start checking out HTML and CSS, and then move on to some basic jQuery. By doing so, you become a much more versatile designer and contributor on any project.
I’ve been thinking about redesigning this website for the last six months, but haven’t been able to find a strategy for making these changes happen. To keep this project on course, I’ve defined a set of design principles.
My esteemed colleague, Cennydd Bowles:
Hover states can provide subtle visual cues that help the user understand how something works. A faint glow around a ‘favourite’ star. An underline appearing underneath a link. But they should not be used for anything else. Hovering does not demonstrate user intent.
There is often talk of there being no landmark design on the web, but I suggest it won’t be long before BBC News is considered one of the greatest design icons online today.
A follow-up on Hack The Planet, our hack day held in Birmingham last month.
Just a quick reminder that Hack The Planet takes place tomorrow, starting at 10am.
I’m a huge supporter of the BBC, yet for many years I was unimpressed with much of it’s online output, where inconsistent design and poor implementation reflected badly upon one of our country’s greatest institutions.
The humble URL has been on my mind a lot recently.
Every year the Multipack – a community of web developers based in the Midlands – seems to undergo a renewal, finding confidence to try new things. This year is no different.
I have been using Movable Type for a number of years, yet the template code required to present an archived list of entries, grouped by month has always evaded me.
The development of graphic design on the Internet, the problems associated with designing for this medium and some of the solutions.