<![CDATA[Blogging and All that Malarkey]]> https://stuffandnonsense.co.uk Sun, 04 Apr 2021 00:00:00 +0100 en-us © Copyright 2021 3600 <![CDATA[A quick note about using filters to change link colours]]> https://stuffandnonsense.co.uk/blog/a-quick-note-about-using-filters-to-change-link-colours https://stuffandnonsense.co.uk/blog/a-quick-note-about-using-filters-to-change-link-colours Sun, 04 Apr 2021 00:00:00 +0100 For as long as I can remember, I’ve been specifying different colours for hyperlinks and their :hover pseudo-classes. Recently, I’ve been experimenting with CSS filters and found they make development much easier.

]]> This is the way I’ve specified link colours for so long:

a {
color: var(--color-text-link); /* #fa6e34 */ }

a:hover {
color: var(--color-text-link-hover); /* #e04606 */ }

Instead of specifying two different colours for hyperlinks and their :hover pseudo-classes, I can use CSS filters including brightness(), hue-rotate(), opacity(), and saturate(). To emulate that darker :hover colour, I might reduce the brightness of a link to 90%:

a:hover {
filter: brightness(90%); }

Or, to brighten a link colour on :hover, I might increase its brightness to 110%:

a:hover {
filter: brightness(110%); }

To change a link colour on :hover to one on the opposite side of the colour wheel—in my case from orange to blue—I can rotate its hue:

a:hover {
filter: hue-rotate(180deg); }

And, to reduce the intensity of previously visited links, I can adjust their saturation using a filter:

a:visited {
filter: saturate(75%); }

I can even add a subtle transition to add depth to the effect. So, my new styles for hyperlinks and pseudo-classes might look like this:

a {
color: var(--color-text-link); /* #fa6e34 */
transition: filter 250ms; }

a:visited {
filter: saturate(75%); }

a:hover {
filter: brightness(110%); }

As I only need to adjust the link colour when a design changes, this approach seems much more flexible than specifying two or more link colours in my stylesheets.

]]>
<![CDATA[Thrilled to work on Worrysome]]> https://stuffandnonsense.co.uk/blog/thrilled-to-work-on-worrysome https://stuffandnonsense.co.uk/blog/thrilled-to-work-on-worrysome Thu, 01 Apr 2021 00:00:00 +0100 Although I don’t get to do it as often as I’d like, I enjoy working with startups. So, I was thrilled to be asked to work on a website design for Worrysome, a new business which aims to take the worry out of worrying.

]]> Worrysome home page
Worrysome is a groundbreaking service with a team of expert worriers who will lift the weight of worrying from your shoulders.

Worrysome has a unique proposition and business model. Everyone knows that worrying doesn’t stop bad things from happening. So, instead of worrying about climate change, dieting, getting old, or job security, pay someone else to worry for you.

For just £2.99 per month per worry, they worry about everything from ageing to the rise of artificial intelligence, from climate change to crime, and from Brexit to being perfect. You receive a Worrysome certificate to print and hang on your wall, letting you know you can stop worrying and get on with your life.

Typeface choices

As a start-up, Worrysome has no brand guidelines or visual identity, so I spent time with Rolf Spolia—Worrysome’s Head of Marketing—to discuss the company’s ideas for their brand values. Rolf and Lila Proofs—their Head of Product—wanted an approachable, friendly design. I chose two typefaces for their design. “Obviously” by OH no Type Co.’s James Edmondson for headlines and body copy. “Shelby” by Laura Worthington as my accent typeface and for the Worrysome logotype. While these fonts are currently served via Adobe Typekit, there are plans to self-host them as the site develops.

Colour palette

I opted for a muted pastel palette of colours for this design. Starting with the blue used on the home page, I calculated a set of split complementary colours and use them across the Worrysome website.

Worrysome colour palette
I usually worry about using pastel colours, but they work very well in this Worrysome design.

Illustrations and SVG

I based the Worrysome design around illustrations—which can be themed to match the website’s colour palette—and commissioned Italian Australian illustrator Flori Alsop. Just as I’d done with the vector illustrations for Stuff & Nonsense, I took the SVG files Flori delivered, optimised them using Jake Archibald’s SVGOMG! online tool, then added class attributes to individual paths.

Worrysome SVG illustrations
Jake Archibald’s SVGOMG! takes the worry out of optimising SVG files.

This enables me to adjust the colour of their fills to match the different theme colours:

<svg>
<path class="illustration-col-theme">…</path>
</svg>

[data-theme="theme-blue"] .illustration-col-theme {
fill: rgb(154, 180, 190); }

[data-theme="theme-brown"] .illustration-col-theme {
fill: rgb(191, 174, 155); }

[data-theme="theme-green"] .illustration-col-theme {
fill: rgb(164, 195, 187); }

[data-theme="theme-pink"] .illustration-col-theme {
fill: rgb(191, 136, 147); }

Layout grids

As this project came hot on the heels of my design for Stuff & Nonsense, my familiarity with a 4+5 compound grid tempted me to use it again. I needn’t have worried the two designs would look too similar as this grid is flexible and offers countless layout variations.

Worrysome various page designs
I needn’t worry about layout. The 4+5 compound grid offers countless layout variations.

There’s the familiar asymmetrical two-column layout on the home page, two even columns from the four-column grid on the team page, and the much more elaborate modular grid for the worrying topics.

They worry, so you don’t have to

Paying someone to worry for you may seem like a strange concept. But while we were designing and developing their new website, one of their team worried about Getting fat for me and it worked. Of course, I didn’t lose any weight, but I wasn’t worried about eating burgers, donuts, or ice cream for the entire month. Taking worries like that off my shoulders is well worth the £2.99 per month they’re asking.

And if you believe that, you really are an April fool.

]]>
<![CDATA[Extra life for my Game Boy]]> https://stuffandnonsense.co.uk/blog/extra-life-for-my-game-boy https://stuffandnonsense.co.uk/blog/extra-life-for-my-game-boy Mon, 29 Mar 2021 00:00:00 +0100 Rooting around in boxes in our storage unit, I came across the Nintendo Game Boy I bought new in 1990. The plastic covering the green LCD was missing, but it was otherwise intact. The box even contained a few game cartridges. I popped it in my pocket and took it home.

]]> With four fresh AA batteries in the back, I flipped the on-switch and “ping,” that familiar start-up chime. Even after 30-plus years, the little box of gaming magic still worked.

I played Super Mario Land and Tetris for a couple of days and then decided the Game Boy deserved a new lease of life. Most obvious was the yellowing of its grey plastic shell, worn buttons, and that missing LCD cover.

New screen covers are available for just a few pounds. There are replacement buttons and rubbers, and plenty of third-party replacement shells in different colours. I plumped for a grey shell and purple buttons because I wanted my Game Boy to look as original as possible.

Cosmetic upgrades

Swapping the old case for a new one is easy as the new case I bought even came with cheap tri-wing and cross-wing screwdrivers. Inside the Game Boy are a front and back circuit board, plus a small board for the speaker amplifier, and the LCD screen. The rubbers behind the buttons hadn’t perished, so didn’t need replacing.

I unscrewed the boards and screen from the original shell and moved them to the new one. After screwing the Game Boy back and front together, I stuck the tougher new glass LCD screen cover to the front, reinstalled the batteries and “ping,” my original Game Boy looked and played like new.

Installing a new screen

The original Game Boy green LCD wasn’t backlit and often suffered from blurring. After a few weeks of playing with the green screen, I decided to upgrade to a much brighter backlit IPS screen. Fitting the new screen wasn’t complicated. I opened the Game Boy case, removed the screen and boards, then cut away a couple of the screw posts to make room for the new screen.

This replacement screen is a major upgrade from the original. It’s bright, clear, and has the option to change the base colour from green. I like playing with a white background which looks sharp and matches the case.

Now to play some more games. I had a half-dozen original game cartridges and plenty of games are available to buy secondhand on eBay. If you’re less fussy about where your games come from, sites like Emulator Games also have ROMs to download.

Adding SD card storage

To load new games, I bought an EZ Flash Junior SD card adapter which looks like a Nintendo Gamepak but includes a holder for an SD card and firmware to run game ROMS. I fitted it with 16Gb card which cost less than £5 from Amazon and which can hold as many games as I’ll ever want to play.

I’ve played my Game Boy almost every day since I revamped it and the only gripe I had was that the bright new IPS screen chomped through batteries faster than Donkey Kong chomps bananas.

Upgrading to a USB C rechargeable battery

On Friday I ordered a CleanJuice XL USB C battery pack from Retrosix. I installed it on Saturday along with a new battery cover which has a hole for the USB C charging cable. Installing this rechargeable battery involved only removing the bottom battery contact springs and slotting in the battery and its board. Now I can play my Game Boy for over a day and don’t need to spend a small fortune on batteries again.

What it all cost

So far, revamping my old Game Boy has cost about the same as I paid for the original. I could’ve bought a refurbished console with the same upgrades from eBay or Retosix but this would’ve cost over £200 and I wouldn’t have had the satisfaction of upgrading it myself. Here’s what I bought to revamp my Game Boy:

The experience of pounding those plastic buttons is so much nicer than playing games on a phone. If you’ve got an old Game Boy (Advance, Color, DMG, or Pocket) lying around and you love a bit of casual gaming like I do, I thoroughly recommend revamping it and getting your thumbs busy again.

]]>
<![CDATA[Ekster MagSafe wallet review]]> https://stuffandnonsense.co.uk/blog/ekster-magsafe-wallet-review https://stuffandnonsense.co.uk/blog/ekster-magsafe-wallet-review Mon, 08 Mar 2021 09:00:00 +0000 Ekster sent me their iPhone 12 MagSafe wallet for review. The short version? I like it. But, I probably wouldn’t buy it.

]]>

I upgraded to a blue iPhone 12 Pro Max last year and added one of Apple’s (not quite the same) blue leather case. Both are compatible with their re-purposed MagSafe connector for charging and accessories. One of these accessories is a slim wallet which attaches to the back of their MagSafe cases.

Ekster MagSafe wallet (Photo: Ekster)

Not being able to see Apple’s MagSafe wallet in person, I haven’t an opinion about it except its price. Which, at £59.00 puts it outside my impulse buy range. Other manufacturers have also released MagSafe compatible wallets including one from Moft which, unlike Apple’s, has an integrated stand.

The Ekster MagSafe wallet doesn’t have a stand, but does claim to have room for three cards or “some cash.” I normally carry two cards and a couple of notes and they don’t stretch the case at all. If I had to squeeze in more cards, that wouldn’t be a problem, but I’d have to spend my cash first. There’s not room for both. The Ekster wallet also has a thumb slot on the back which is designed to help slide out the back card. Even with just two cards, I’ve never slid a card out successfully using this slot.

Ekster MagSafe wallet, front and back (Photo: Ekster)

Ekster’s doesn’t come in colours like Apple’s wallet (I would’ve chosen their California Poppy yellow) so the wallet I received is in black. This doesn’t look as good against my blue case as it might next to a black one.

The texture of their “Premium American hide” on this case certainly feels different from the leather on my Apple phone case. It’s harder, stiffer, and less textured. It doesn’t feel bad, just different, more like a good quality vinyl than quality leather.

Some reviews of Apple’s MagSafe wallet criticised the strength of its magnets. But, I have no complaints about magnets in Ekster’s wallet. It snaps to the back of my iPhone with a satisfying snap and, once it’s attached, there’s very little wiggle. The wallet has never slipped off accidentally in or out of my pocket, which is impressive considering the size of my iPhone 12 Pro Max.

What I like

Ekster’s magnets are strong and they attach with a satisfying snap. The case hasn’t slipped off accidentally once.

It adds very little bulk in my hand or my pocket. It’s flat and doesn’t make the phone feel unstable when laid on my desk.

It carries what I currently need on a daily basis. When I’m able to travel again and need to carry more cards or collect receipts, I’ll likely go back to using my bulkier Bellroy wallet.

What could be better

Maybe it just the laws of physics, but the case must be removed when sitting on my Qi charging pad.

I would like to see a selection of colours to either complement or contrast with the colour of my case.

The texture feels more like vinyl than leather. It certainly feels different from my Apple leather case.

Conclusion

At $33 on-sale (£23,) this Ekster MagSafe wallet is good value at less than half the price of Apple’s MagSafe wallet. If you can live without a choice of colours like Apple’s or a stand like Moft’s, it’s a great alternative. That’s if you like to stick a few cards to the back of your phone. Me? I actually prefer a reassuringly bulkier wallet because I like to know with a tap that it’s in my pocket. Which is why I probably wouldn’t buy this or any other MagSafe wallet.


Ekster MagSafe wallet

]]>
<![CDATA[A quick note about SVG foreignObject]]> https://stuffandnonsense.co.uk/blog/a-quick-note-about-svg-foreignobject https://stuffandnonsense.co.uk/blog/a-quick-note-about-svg-foreignobject Mon, 08 Mar 2021 00:00:00 +0000 When I was developing the SVG panel for principles on the Stuff & Nonsense about page, I ran into a problem which could only be fixed using <foreignObject>.

]]>
Stuff & Nonsense about page SVG panel

This panel includes eight of the things “we believe…,” in speech bubbles. Each bubble is a separate SVG element nested inside a container SVG. To avoid repeating identical code eight times to create the bubbles, I define the bubble shape as a symbol once and then I reference it multiple times:

<svg>
<symbol id="principles-bubble">
<path>…</path>
</symbol>

<svg>
<use xlink:href="#principles-bubble"></use>
…
</svg>
</svg>

A bubble includes an SVG <text> element for “WE BELIEVE…,”, but the trouble came when I needed to include wrapping text. Text in SVG doesn’t wrap like HTML text. Using <tspan> elements makes sense for separating lines in headlines, but is too restrictive for text in these bubbles. I don’t want to specify where line-breaks occur, I want text to flow and wrap naturally. A little research led to the <foreignObject> element.

The <foreignObject> element allows elements from other XML namespaces like HTML to be included within SVG:

<svg>
<text>WE BELIEVE…</text>
<foreignObject>
<p>in only working on projects where our experience adds value.</p>
</foreignObject>
</svg>

I include a paragraph, but a foreignObject can just as easily include any other HTML element and even groups of elements. Like other elements in SVG, I can size a foreignObject using width and height attributes, and position it using x y coordinates. I can apply a fill or stroke, add a filter or mask, and even clip its shape.

<svg xmlns:xhtml="http://www.w3.org/1999/xhtml">
<use xlink:href="#principles-bubble"></use>
<text x="20" y="50">WE BELIEVE…</text>
<foreignObject x="20" y="65" width="210" height="100">
<p>in long-term creative partnerships…</p>
</foreignObject>
</svg>

With foreignObject, my principles text wraps inside each bubble. Exactly like I want it too.


If you like this post, why not buy an Art Direction for the Web e-book for £12.99?

]]>
<![CDATA[Stuffed with layout options: Using a 4+5 compound grid]]> https://stuffandnonsense.co.uk/blog/using-a-4-5-compound-grid https://stuffandnonsense.co.uk/blog/using-a-4-5-compound-grid Sun, 07 Mar 2021 00:00:00 +0000 A generation of product and website designers has grown up with 12 or 16 column grids from Bootstrap-style frameworks. In those frameworks, columns are used mostly for aligning content. In my new design for Stuff & Nonsense, I wanted to go beyond that and use a compound grid to influence the entire design.

]]>
New Stuff & Nonsense home page showing four columns and five columns stacked into a 4+5 compound grid

When you use grids imaginatively, they do much, much more than align content. A grid brings cohesion to a composition. It helps people understand the stories you’re telling by suggesting hierarchies. Grids inform people what to read first, then next, and how much attention to give it. They define the position of valuable information or a call to action. A thoughtfully chosen grid leads to a wealth of possibilities and any number of exciting designs.

Compound grids

A compound grid is two or more grids of any type—column, modular, symmetrical, and asymmetrical—on one page. They can occupy separate areas or overlap. The interplay of two grids makes a compound layout more interesting than one grid in isolation. Compound grids offer enormous flexibility, but people rarely speak about them. After spending time experimenting with different numbers of columns, I settled on a compound grid where four columns overlap five columns. I might use widths from one or the other.


Tip: I wrote about compound grids in much more detail in my book Art Direction for the Web. Buy the e-book for £12.99.

I might use column widths from the 4-column grid (left) or the 5-column grid (right)

Or I could combine widths from both to form columns that don’t conform to either. Seeing how the two grids interact makes this much clearer.

Left: How the two grids overlap. Right: The unusual column formation created by overlapping the two grids.

Overlapping a 4-column grid and 5-column grid results in eight columns with four different widths. This grid has a rhythmic pattern of 6|1|4|3|3|4|1|6, which when expressed using fractional units in CSS Grid is:

[class*="grid"] {
grid-template-columns: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr; }

Part of the joy of designing using a compound grid like this is seeing how the unusual arrangement of columns can result in more unusual layouts than anything achievable using a 12 or 16 column framework grid.

These layouts are based on the same 4+5 compound grid.

Clockwise from top-left:

  1. 1. A full-height image might occupy half the width. Two columns of copy are perfect for when the viewport becomes wide enough. Between them, an empty column adds whitespace to the composition.
  2. 2. Those same elements rearranged, placing the full-height image in the centre. The two outer columns might contain two different stories.
  3. 3. This composition gives a long-form article an editorial feel. Offsetting the image draws your eye down into the story.
  4. 4. Adding a column of reversed-out copy emphasises the distinction between two content types. CSS Grid makes implementing complex layouts more straightforward than ever before.

Home page composition

To add drama to the Stuff & Nonsense home page, I dedicated the largest amount of space to the SVG hero panel I described last week. Separated by one of my thinnest columns is a single column of copy.

This composition avoids the conventional full-width header seen on countless framework-based websites.

My compound grid also defines widths within the SVG hero panel, including the relationship between Fast Eddie and the headline text beside him. It also determines the width of the Stuff & Nonsense logo and the size of the circle device.

I often work in black and white and use cursive typefaces while experimenting with ideas for layout compositions.

Compound grids are adaptable, and at this stage of my design process, I begin to think about how I might rearrange elements on my grid at several standard screen widths.

Left: Rearranging elements on the compound grid for medium-width screens. Right: A single-column scrolling layout for the narrowest screens.

With the compound grid still visible, it’s easy to see how this grid enforces its structure on the elements while not appearing rigid.

Top of the Stuff & Nonsense home page with its SVG hero panel, all elements influenced by the compound grid.

I used the same compound grid columns to inform proportions in the second section of the Stuff & Nonsense home page. Here, I reserved a tall space—made up of two columns of different widths— for an image. Using two differently-sized columns of whitespace adds to this composition’s unusual feel.

The layout of this section is based on the same 4+5 compound grid.

The vertical nature of this section’s layout helps emphasise the tall stack of boxes that Fast Eddie has delivered.

But it has an altogether different feel to other parts of this page and the website overall.

Compound and modular grids

A module is a rectangular or square unit of any size. Modules repeat horizontally and vertically to form a modular grid. They’re easy to work with, so it surprises me that so few web designers use modular grids. Modular grids are excellent for bringing order to large amounts of varied content, and you can also use them to create visually appealing layouts even when there’s very little content.

The layout of my home page’s client portfolio section is based on the same 4+5 compound grid with added modular grid components.

Left: A compound grid with modular grid components in my home page client portfolio section. Right: The fully rendered design.

Arranging elements differently gives a very different feel to the page describing my books. This variety of pages helps to keep my design feeling fresh. By using the same compound grid, I achieve a sense of connectedness across all my pages.

Left: Compound grid with modular grid components on my books page. Right: The fully rendered design.

I’m still amazed at how varied layout possibilities from a compound grid can be, especially when combined with grid modules. This became even clearer to me while I was designing the various compositions across my design portfolio pages.

Although each of my portfolio entries looks and feels differently, they’re all based on the same modular 4+5 compound grid. However, this time, the compositions use columns from the 5-column grid. Grids with five columns aren’t commonly used on the web.

5-column grid with modular grid components on pages from my design portfolio.

I based my design portfolio pages—Animal Search, Buskers Bern, Compass Financial, Greenpeace, So Foot, SunLife, and WWF— on the same 5-columns with modular grid components.

5-column grid with modular grid components on the Animal Search design portfolio page.

Although each of the pages are different from each other—and my other pages—the 5-column component in my compound grid helps connect them with the rest of my website.


I wrote about more about compound grids in my book Art Direction for the Web. If you like this post, why not buy the e-book for £12.99?

]]>
<![CDATA[Stuffed with SVG. Combining SVG graphics with text]]> https://stuffandnonsense.co.uk/blog/combining-svg-graphics-with-text https://stuffandnonsense.co.uk/blog/combining-svg-graphics-with-text Wed, 03 Mar 2021 12:00:00 +0000 Given that SVG makes it possible to create cool compositions of images and text, I’m surprised I rarely see designers and developers using it for more than just icons.

]]> This new Stuff & Nonsense website is jam-packed with SVG, from the Fast Eddie illustrations to key headlines and data visualisations. Learning about developing with SVG was one of the best parts of implementing this new design. I want to explain a few things I learned.

Hero panel from the Stuff & Nonsense home page

Let’s start with this hero panel from the Stuff & Nonsense home page. There are five parts to this panel:

  1. 1. A big gorilla. (His name’s Fast Eddie)
  2. 2. Eddie’s bunch of bananas
  3. 3. One loose banana
  4. 4. A large headline, “Our designs deliver”
  5. 5. The “We know our stuff and we’re fun to work with” tagline

These elements are stacked on the z-axis:

  1. Back: Bunch of bananas
  2. Middle: Headline and tagline
  3. Front: Eddie and the loose banana

Aligning text and placing it in combination with the graphic elements precisely are key to making this design work. In the distant past, I would’ve shoved all these elements into a single bitmap image. There are plenty of ways to develop this design using HTML text, CSS, and SVG. But it could be tricky to keep those elements in their correct positions and maintain their proportions within a flexible layout. Using SVG for the entire panel is a much more sensible choice, so I need to:

  1. Make optimised SVG graphics
  2. Add SVG <text> elements
  3. Nest SVGs and position each element
  4. Add class attribute and CSS styles
  5. Consider accessibility

Make optimised SVG graphics

Markus Freise sketched Fast Eddie and his bananas using Adobe Fresco. Then, he produced the finished artwork in Illustrator and exported it to SVG. Brilliant though the artwork looked, the way Illustrator exports SVG is famously flabby. Dozens of paths contained hundreds of points which all contributed to the overall file size.

I took Markus’ Illustrator SVGs and deleted every colour-filled path, leaving just his hand-drawn outlines. To reduce the overall file size, I added eight new filled paths behind those outlines with as few points and curves as possible.

(Watch out: I’ve intentionally simplified the code in these examples by including attributes only if they’re relevant.)

<svg>
<!-- Fast Eddie -->
<path> … </path> <!-- Gorilla hair -->
<path> … </path> <!-- Gorilla skin -->
<path> … </path> <!-- Gorilla face -->
<path> … </path> <!-- Gorilla eyes -->
<path> … </path> <!-- Box dark -->
<path> … </path> <!-- Box light -->
<path> … </path> <!-- Banana dark -->
<path> … </path> <!-- Banana light -->
<path> … </path> <!-- All outlines -->
</svg>

<!-- Banana -->
<svg>
<path> … </path> <!-- Banana darkest -->
<path> … </path> <!-- Banana dark -->
<path> … </path> <!-- Banana light -->
<path> … </path> <!-- Outlines -->
</svg>

I exported new SVGs from Sketch with these simpler paths, then optimised the new files using using Jake Archibald’s SVGOMG! online tool. These files are now a fraction of Illustrator’ original file size.

Simpler paths in Sketch. Left: Original. Right: Optimised

Add SVG <text> elements

In the past, I often converted text to outlines before exporting it to SVG. This presents obvious accessibility concerns, and changing the text meant replacing an SVG file. By setting text in SVG using the <text> element, my text has better accessibility, can be changed more easily, and is searchable and selectable. SVG text also makes it possible to:

  • Use any webfont and style it using CSS
  • Fill text with any flat colour, gradient, or pattern
  • Apply strokes to create outlines
  • Add masks or filters; including blurs and shadows

You can add as many text elements as you need, but my next panel needs only two:

<svg>
<text>Our designs deliver</text>
<text>We know our stuff and we’re fun to work with</text>
</svg>

Only content inside SVG text elements is rendered by browsers, and they ignore anything outside them. SVG text elements won’t wrap like HTML text. HTML has its span element and SVG includes a similar element which is useful for separating text into smaller elements so they can be styled uniquely. To break my headline across three lines, I divide it into three <tspan< elements, one per line:

<svg>
<text>
<tspan>Our </tspan>
<tspan>designs </tspan>
<tspan>deliver </tspan>
</text>
</svg>

By splitting my headline into multiple elements, I’m able to position each line. SVG uses a coordinates system where the origin is at the top left of a viewport (0,0). A positive value on the x-axis places an element horizontally from the left, while a positive value on the y-axis places it vertically from the top.

  • x is the horizontal starting point for the text baseline;
  • y is the vertical starting point for the text baseline;
  • dx shifts text horizontally from a previous element;
  • dy shifts text vertically from an earlier element.

(Sara Soueidan has a much more thorough explanation of the viewport coordinate system.)

I use both x and y values on my tspan elements to place each one and allow space before the first element for the bunch of bananas. Because one unit equals one pixel, I needn’t specify the unit type:

<svg>
<text>
<tspan x="155" y="215">Our </tspan>
<tspan x="10" y="395">designs </tspan>
<tspan x="10" y="575">deliver </tspan>
</text>
</svg>

tspan elements are useful for precise positioning and individual styling, but they’re not without accessibility concerns. Assistive technology pronounce tspan elements as individual words and even spell them when a tspan wraps a single letter. For example, a screen reader will pronounce this series of tspan elements:

<tspan>S</tspan>
<tspan>t</tspan>
<tspan>u</tspan>
<tspan>f</tspan>
<tspan>f</tspan>

As “S”, “t”, “u”, “f”, “f”.

Sketch illustration showing guides

Nest SVGs to position each element

In SVG, the <g> element allows paths and other elements to share common properties, including fill and stroke. But whereas it’s possible to position child elements using x and y coordinate values, it’s impossible to position the g element itself.

While developing my panel, I learned it’s possible to overcome this limitation by splitting it into separate SVGs, one for each of the major elements; banana bunch (back,) headline and tagline (middle,) Fast Eddie (front,) and the loose banana (front.) By nesting these within a container SVG element,I can use their x and y coordinate values to place them precisely where I need them within my composition.

<svg>

<!-- Banana bunch -->
<svg width="150" height="95" x="50" y="130">
</svg>

<!-- Headline and tagline -->
<svg x="0" y="0">
</svg>

<!-- Fast Eddie -->
<svg x="120" y="15">
</svg>

<!-- Loose banana -->
<svg width="150" height="95" x="250" y="500">
</svg>

</svg>

(Yet again, Sara Soueidan has written a much more comprehensive explanation of mimicking relative positioning inside an SVG with nested SVGs.)

Like HTML source order, SVG elements are stacked back to front in the order they’re written. The same is also true of nested SVGs, so the banana bunch is lower down the z-index order, allowing the headline and tagline to overlap it. Fast Eddie comes next and is placed in front of my text, followed by that loose banana.

Colour grading Fast Eddie

Add class attribute and CSS styles

This new design includes a theme with a light background, a dark theme with a blue background, plus an Easter egg theme with an orange background. I use CSS to change the fill colours to match each theme. I use CSS, so first add class attributes to every element. There are three colours for Fast Eddie and two for the box he’s delivering. His bananas and outlines are the same colours on all themes:

<svg>
<!-- Fast Eddie -->
<path class="ill-col-1"> … </path> <!-- Gorilla hair -->
<path class="ill-col-2"> … </path> <!-- Gorilla skin -->
<path class="ill-col-3"> … </path> <!-- Gorilla face -->
<path class="eyes"> … </path> <!-- Gorilla eyes -->
<path class="ill-col-4"> … </path> <!-- Box dark -->
<path class="box-lght"> … </path> <!-- Box light -->
<path class="ban-dk"> … </path> <!-- Banana dark -->
<path class="ban-lght"> … </path> <!-- Banana light -->
<path class="outlines"> … </path> <!-- All outlines -->
</svg>

<!-- Headline and tagline -->
#60;svg>
<text class="ill-t-brand" >Our designs deliver</text>
<text class="ill-t-fill">We know our stuff…</text>
</svg>

First, I change the headline and tagline fill colours to fit each theme. Then, I adapt colours in the Fast Eddie illustration to subtly blend them with each theme’s background. I use CSS Custom Properties to define these colours and make changing them between themes easier:

.ill-t-brand { fill: var(--color-brand); }
.ill-t-fill { fill: var(--color-text); }

.ill-col-1 { fill: var(--ill-col-1); }
.ill-col-2 { fill: var(--ill-col-2); }
.ill-col-3 { fill: var(--ill-col-3); }

Using the prefers-color-scheme media query then allows me to specify a set of custom property values for each theme:

:root {
--ill-t-brand: #a62339;
--ill-t-fill: #1b1a18;
--ill-col-1: #272d30;
--ill-col-2: #565656;
--ill-col-3: #bfbfbf; }

@media (prefers-color-scheme: dark) {
:root {
--ill-t-brand: #1b7ca6;
--ill-t-fill: #fff;
--ill-col-1: #1d303a;
--ill-col-2: #485764;
--ill-col-3: #889aaa; }
}
Highlighting ARIA in dev tools

Consider accessibility

SVG images which contain text outlines can be made more accessible by using alternative text and ARIA properties. So, when linking to an external SVG file, I should add alternative text as I should with any non-decorative image:

<img src="header.svg"
alt="Our design delivers">

SVG text is accessible and selectable when embedded in HTML, and the best way to help people who use assistive technology is to add an ARIA role and a descriptive label. Screen readers will treat the SVG as a single element and read the label description aloud. If I wanted to refer to this panel as an image, I would specify the img role:

<svg role="img" aria-label="Our designs deliver">
…
</svg>

Adding a title element helps assistive technology to understand the difference between several blocks of SVG and this title will be displayed as a tooltip by most browsers:

<svg>
<title>Our designs deliver</title>
</svg>

I need a more comprehensive approach for my panel’s more complex combination of graphical and text elements. First, I add a heading ARIA role to the container SVG, plus a heading level of "1" as this represents the top-level heading on this page:

<svg role="heading" aria-level="1">
…
</svg>

Then I add a title element to the nested SVG, which contains my headline and tagline and add aria-labelledby to help assistive technology understand the difference between several blocks of SVG:

<svg aria-labelledby="headline-title">
<title id="headline-title">Our designs deliver. We know our stuff…</title>
</svg>

For Fast Eddie and the two decorative banana graphics, I add a presentation role plus short descriptions of each image:

<svg role="presentation">
<desc>Fast Eddie is the Stuff & Nonsense gorilla mascot</desc>
</svg>

<svg role="presentation">
<desc>A bunch of bananas</desc>
</svg>

<svg role="presentation">
<desc>A loose banana on the floor</desc>
</svg>

Accessibility and performance matter as much as style in this design. I tried to pay close attention to accessibility. While I haven’t (yet) tested its accessibility with people and assistive technologies, I plan to do just that over the next few weeks.

Heather Migliorisi wrote a more thorough explanation of SVG accessibility on CSS Tricks.

I used a similar approach on the Stuff & Nonsense blog page

Wrapping up

Learning about developing with SVG was one of the most enjoyable parts of implementing this new design. Given how SVG makes it possible to create accessible, flexible, and high-performance compositions like my home page panel, I’m surprised I rarely see designers and developers doing that more often. I hope posts like this might spur you on to use SVG in more creative ways.

]]>
<![CDATA[Yours truly on the Being Freelance podcast]]> https://stuffandnonsense.co.uk/blog/yours-truly-on-the-being-freelance-podcast https://stuffandnonsense.co.uk/blog/yours-truly-on-the-being-freelance-podcast Sat, 27 Feb 2021 00:00:00 +0000 Late last year, I sat down for an hour with Steve Folland to talk about “blagging and learning” on the Being Freelance podcast. The episode’s now available and, to be honest, it’s the best podcast interview I’ve done for a long while.

]]> Here’s my favourite quote from the episode:

“The world does not owe you a living. You don’t have the right to the perfect job, the real world is not like that. You make the most of your own opportunities and you work hard to do it. You need to put the work in and you need to be adaptable. If you are in control of your own destiny, instead of working for a company, and you do it right, I think it can be a really great way of being independent, making a living and doing something which you enjoy.”

It’s a cracking episode. Even if I do say so myself. Which I do.

]]>
<![CDATA[His name is Fast Eddie. And the new Stuff & Nonsense website design]]> https://stuffandnonsense.co.uk/blog/his-name-is-fast-eddie https://stuffandnonsense.co.uk/blog/his-name-is-fast-eddie Thu, 25 Feb 2021 00:00:00 +0000 I’ve been tempted to redesign the Stuff & Nonsense website since we moved back from Australia, but you know, there’s always something else to do.

]]>

Also, I didn’t want to make a half-hearted attempt at a refresh. Instead, I wanted a new design to reflect all the things I’ve learned over the past couple of years and where I am now as a designer. Plus, I didn’t have an idea.

Over the Christmas break, an idea for a new design came to mind and I started to sketch rough layouts and experiment by implementing them in Grid. What really made the design feel right to me was the 4+5 compound grid I’d chosen. It not only allowed for dozens of layout modules, but also looked distinctive and interesting. Those experiments lead to the design you see today. I’ll talk more about the compound grid and how I implemented it in a future post.

New Stuff & Nonsense home page (light version)

Attracting the right clients

I’m now working as Director of Product Design for Nozomi Networks three weeks per month. In the one or two weeks off between sprints, I’m available to work on projects I think are interesting. These should be commissions where I can add value and at the same time enjoy creating something I can be proud of.

The new website is tailored to helping me find the right clients and projects for the time I have available. I know not everyone will like it, but I hope those who do will better understand what I can offer, then get in touch.

Typeface choices

Choosing the right typeface is a fine balance between flexibility, performance, and style. I quickly fell in love with the personality of Dharma Gothic by Dharma Type’s Ryoichi Tsunekawa. Dharma Gothic might’ve been inspired by 1800s-style wood type, but it has a certain contemporary feel and seems friendlier than condensed alternatives like Champion Gothic or Tungsten Narrow.

Although Dharma Gothic is available from Adobe’s font library and Typekit, for performance reasons I decided to buy a license for the four web fonts I use and am hosting them on my own server.

For body copy, I settled on Merriweather which I downloaded from Google Fonts and also host on my server. The total payload of these font files is 265Kb. That might seem expensive, but as typography is such an important aspect of this design, these fonts are worth their weight.

The new logo

It’s been over ten years since Jon Hicks turned Kevin Cornell’s sketches for a car badge-based design into a Stuff & Nonsense logo. This time, I wanted to evolve that logo mark by enlarging its wings, reshaping the badge, and making the “SN” inside it clearer. My Illustrator skills aren’t up to much, so I asked the one and only Veerle Pieters to turn my Sketch concepts into the finished new logo.

Colour grading

The default colour of that Stuff & Nonsense badge is the same red we’ve used for years. But when it came to the dark colour theme, I wanted to do something different by making the badge colour blue.

For this new design, I chose two palettes with a very limited set of colours. One shade of red, black, and white for the light theme, and two shades of blue for the dark version.

New Stuff & Nonsense home page (dark version)

I laboured for far too long to find the two shades of yellow for the banana skins which litter the site, because I needed them to work well with both the blue and red themes. If you can find it, there’s also an orange theme Easter egg version of the design.

New Stuff & Nonsense home page (Easter egg version)

I’ll talk more about my colour choices and how I implemented them in a future post but needless to say, using CSS Custom properties make switching between colour palettes simpler than ever before.

Colour grading Fast Eddie

It isn’t just backgrounds, buttons, and text which change for each theme. Each Fast Eddie illustration also subtly changes colour to blend better into light, dark, and Easter egg versions. Each of the stories in my portfolio also include a new colour palette which matches the client’s brand.

Buskers Bern portfolio story

And of course, Fast Eddie

If you stay clear of the generic style so popular with tech companies, illustrations can add real personality to a website. I also love working with illustrators, and couldn’t be happier about working with Markus Freise.

Markus Freise’s original sketches

Markus took my ideas, added plenty of his own including the COVID-safe, fist-bumping, pair of gorillas on the about page, and the Kong-style, banana holding gorilla on the contact page. I asked for very few changes to Markus’s initial sketches.

As a tribute to Motorhead’s classic line-up guitarist, this new gorilla is called Fast Eddie (Clarke.) The small gorilla on the about page is of course called Philthy Phil.

SVG (almost) everything

This new website is laden with SVG, from the obvious Fast Eddie illustrations to key headlines and data visualisations. Learning more about developing creative, high-performance SVG files has been one of the most enjoyable parts of implementing the new design.

For Fast Eddie, I took the Illustrator SVGs Markus delivered and deleted all the colour-filled paths, leaving just his hand-drawn outlines. Using Sketch, I added new filled paths using as few points and curves as possible to reduce the overall file size. From there, I optimised the resulting files using Jake Archibald’s SVGOMG! online tool, then opened them in my text editor (Nova) and added class attributes to each path which allows for the subtle changes in colour.

New Stuff & Nonsense about page (dark version)

This process to took time, but the result is some highly optimised, low weight, high performance SVGs. Including Fast Eddie, his bananas, and both blocks of text, the header section of the home page weighs only 80kb.

SVG text

I’ve really enjoyed learning about how to combine SVG text elements with graphical components. This layering of elements is important because it adds extra depth to the design.

The key headlines are set using SVG text elements and the Dharma Gothic typeface. Unlike HTML/CSS text, SVG text scales fluidly and positions can be very precisely controlled. I’m very surprised I don’t see more designers and developers setting text in SVG and I will definitely being doing it more often.

With several different element types inside my SVGs—paths, primitives, and text—I needed a way to change their positions without exporting new versions every time I changed the design. Before this project, I hadn’t learned that it’s possible to nest SVGs. Doing this allowed me to put every element exactly where I wanted it, and change positions without leaving Nova. I’ll talk more about how I used SVG text in a future post.

Different page layouts

Spending time experimenting with my compound grid encourages me to design several, very different page layouts for this new website. There’s a very different look at feel to my biography page, a simpler layout on the contact page, and I had plenty of fun bring the information on my speaking and workshop pages to life.

New Stuff & Nonsense speaking page (dark version)

Over the past few years I’ve become fascinated by data visualisation and the speaking page in particular allowed me plenty of scope to play with both visualisation design and how to implement them using SVG.

Accessibility and performance

Accessibility and performance matter as much as style in this design. I paid close attention to accessibility and while I haven’t (yet) tested its accessibility with people and assistive technologies, I plan to do just that over the next few weeks.

With so many visual elements in this design, I also wanted its performance to be better than ever. Along with optimising my images and serving them from my Cloudinary CDN, I optimised SVGs aggressively.

I also took advice from Harry Roberts on structuring the content order of my pages’ HTML head portion. To give the illusion of even faster pages, I now use Instant.page to preload pages when someone hovers over a link.

The home page now has a Lighthouse score of 96/100 on mobile and 100% on desktop. I couldn’t be happier about that.

Thanks to everyone who helped with the new site

This was a team effort, but there’s really only me on the design, so I called on some of friends to help out where my experience is lacking.


Paul Boag reviewed content, helping me focus messaging on what appeals to potential clients. Markus Freise created Fast Eddie and was a pleasure to collaborate with on the new illustrations. Steven Grant was a shoulder to lean on when deploying the website to GitHub and Digital Ocean. Sush Kelly wrote the Javascript and implemented the swing-out menu. Veerle Pieters polished my design and finessed the new Stuff & Nonsense logo mark. Harry Roberts—in person and with his excellent video course—helped me improve performance. Dave Smyth helped get the website running locally and resolve some sticky Statamic issues.


I really hope you enjoy the new Stuff & Nonsense design. If you haven’t been there yet, start exploring from the home page.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #40 — David King]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-40-david-king https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-40-david-king Sat, 03 Oct 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 40 and my design this week was again inspired by David King.

David King was a British writer, designer and historian of graphic design. He devoted his career to uncovering and chronicling the art of the Soviet and the Constructivist periods, developing posters and graphics for many political groups.

]]> My David King inspired design
My design this week was again inspired by David King.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #39 — Milton Glaser]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-39-milton-glaser https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-39-milton-glaser Mon, 28 Sep 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 39 and my design this week was inspired by Milton Glaser.

Milton Glaser was born in 1929 in The Bronx, New York City and throughout his career, he personally designed and illustrated more than 400 posters including a famous psychedelic poster of Bob Dylan.

]]> My Milton Glaser inspired design
My design this week was inspired by Milton Glaser.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #38 — Saul Bass]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-38-saul-bass https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-38-saul-bass Mon, 21 Sep 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 38 and my design this week was again inspired by Saul Bass.

In a career which spanned over 40 years, Saul Bass not only designed some of America’s most iconic logos, but also designed title sequences and film posters for some of Hollywood’s best filmmakers, including Alfred Hitchcock, Stanley Kubrick, and Martin Scorsese. For Hitchcock, Bass created innovative title sequences for films including North by Northwest, Psycho, and Vertigo. The opening sequence of Mad Men—one of my favourite TV shows—pays homage to Bass who died in 1996 aged 75.

]]> My Saul Bass inspired design
My design this week was again inspired by Saul Bass.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #37 — Paula Scher]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-37-paula-scher https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-37-paula-scher Mon, 14 Sep 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 37 and my design this week was again inspired by Paula Scher.

Paula Scher is an American graphic designer, painter and educator and the first female principal at design firm Pentagram. She is well-known for her distinctive typographic style.

]]> My Paula Scher inspired design
My design this week was again inspired by Paula Scher.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #36 — David King]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-36-david-king https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-36-david-king Mon, 07 Sep 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 36 and my design this week was inspired by David King.

David King was a British writer, designer and historian of graphic design. He devoted his career to uncovering and chronicling the art of the Soviet and the Constructivist periods, developing posters and graphics for many political groups.

]]> My David King inspired design
My design this week was inspired by David King.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #35 — Paula Scher]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-35-paula-scher https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-35-paula-scher Mon, 24 Aug 2020 11:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 35 and my design this week was inspired by Paula Scher.

Paula Scher is an American graphic designer, painter and educator and the first female principal at design firm Pentagram. She is well-known for her distinctive typographic style.

]]> My Paula Scher inspired design
My design this week was inspired by Paula Scher.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #34 — Max Bill]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-34-max-bill https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-34-max-bill Mon, 24 Aug 2020 10:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 34 and my design this week was again inspired by Max Bill.

Born in 1908, Max Bill was a Swiss artist, typeface and graphic designer, and industrial designer. He studied at the Bauhaus under Wassily Kandinsky and Paul Klee.

]]> My Max Bill inspired design
My design this week was inspired by Max Bill.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #33 — Tibor Kalman]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-33-tibor-kalman https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-33-tibor-kalman Mon, 17 Aug 2020 09:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 33 and my design this week was inspired by Tibor Kalman.

Tibor Kalman was a Hungarian American graphic designer best-known for his work as editor-in-chief of Colors magazine. In 1979, Kalman opened his own studio with the goal of challenging mundane design thinking and creating unpredictable work.

]]> My Tibor Kalman inspired design
My design this week was inspired by Tibor Kalman.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #27–32]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-27-32 https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-27-32 Mon, 10 Aug 2020 00:00:00 +0100 Since going on holiday during July, I’ve fallen behind with my commitment to designing 52 designs for a series of Inspired Design Decisions. Now II’m back in the studio and II’ve settled back into work, II’m making up for lost time. Here are six new designs, inspired by Otl Aicher,Saul Bass, Ken Garland, and Armin Hofmann.

]]> My Saul Bass inspired design
My design this week was inspired by Saul Bass.

#27 Inspired by Saul Bass

In a career which spanned over 40 years, Saul Bass not only designed some of America’s most iconic logos, but also designed title sequences and film posters for some of Hollywood’s best filmmakers, including Alfred Hitchcock, Stanley Kubrick, and Martin Scorsese. For Hitchcock, Bass created innovative title sequences for films including North by Northwest, Psycho, and Vertigo. The opening sequence of Mad Men—one of my favourite TV shows—pays homage to Bass who died in 1996 aged 75.

My Ken Garland inspired design
My design this week was inspired by Ken Garland.

#28 Inspired by Ken Garland

With his work on graphic design, logos, photos, and books spanning over sixty years, Ken Garland has made a significant contribution to graphic design since the mid-twentieth century. In 1964, Garland authored his book, First Things First Manifesto, which “which attempted to radicalize designers who were lazily serving the more dubious needs of consumerist culture. (1)”

My Saul Bass inspired design
My design this week was again inspired by Saul Bass.

#29 Inspired by Saul Bass

In a career which spanned over 40 years, Saul Bass not only designed some of America’s most iconic logos, but also designed title sequences and film posters for some of Hollywood’s best filmmakers, including Alfred Hitchcock, Stanley Kubrick, and Martin Scorsese. For Hitchcock, Bass created innovative title sequences for films including North by Northwest, Psycho, and Vertigo. The opening sequence of Mad Men—one of my favourite TV shows—pays homage to Bass who died in 1996 aged 75.

My Otl Aicher inspired design
My design this week was inspired by Otl Aicher.

#30 Inspired by Otl Aicher

After WW2, Otl Aicher studied sculpture at the Academy of Fine Arts Munich and in 1947, he opened his own studio in Ulm, Germany. In 1953, he co-founded the influential Ulm School of Design. Aicher worked on corporate branding for Braun and Lufthansa and he considered a pioneer of corporate design. For the 1972 Summer Olympics in Munich, Aicher created a set of pictograms meant to provide a visual interpretation of each sport. This influential signage helped athletes and visitors find their way around. Aicher died in 1991 and a Munich street is named after him.

My Ken Garlandinspired design
My design this week was inspired by Ken Garland.

#31 Inspired by Ken Garland

With his work on graphic design, logos, photos, and books spanning over sixty years, Ken Garland has made a significant contribution to graphic design since the mid-twentieth century. In 1964, Garland authored his book, First Things First Manifesto, which “which attempted to radicalize designers who were lazily serving the more dubious needs of consumerist culture. (1)”

My Armin Hofmann inspired design
My design this week was inspired by Armin Hofmann.

#32 Inspired by Armin Hofmann

Armin Hofmann is a Swiss graphic designer whose work is known for its abstract shapes and lines. Born in 1920 and now 99 years old, Hofmann first taught, then became head of the Basel School of Design. His work has been widely exhibited in major galleries, including the New York Museum of Modern Art. Throughout his long career, Armin Hofmann designed posters in the Swiss International Style, in particular for the Basel Stadt Theater. He valued visual communication above everything else in design, used techniques including photo-montage, experimental compositions, and primarily sans-serif typography.

]]>
<![CDATA[Naming layout components]]> https://stuffandnonsense.co.uk/blog/naming-layout-components https://stuffandnonsense.co.uk/blog/naming-layout-components Mon, 03 Aug 2020 00:00:00 +0100 I know some people swear by frameworks and I do understand why, although my work rarely needs them. I also appreciate why some people find the grids component in frameworks useful. But, to me, including a framework just for its grid has always seemed excessive. Particularly when there are other ways to develop reusable layout components which are far less generic, but no less flexible than a framework.

]]> The 12 equal-width units in most framework grids are popular because it’s easy to divide them into one, two, three, and four columns. But, I’ve always looked at them just as ways to vertically align content. They’re alignment tools, not design tools, which is one reason why so many framework-based designs look so similar. Instead, I start by designing a grid which better reflects not just my content, but the feeling I want to achieve from a layout.

There are an infinite number of potential arrangements and any number of columns. Which one you choose will depend on the feeling you’re aiming to create.

Take this example from a website I worked on recently. I chose a 3+4 compound grid which is a three-column grid overlapping a four-column grid. This creates six columns and a rhythmic pattern of 3|1|2|2|1|3.

A 3+4 compound grid
Left: 3 columns. Middle: 4 columns. Right: A 3+4 compound grid

To develop this grid using CSS Grid properties involves only turning that pattern into fr units.

Most designs include just a handful of layout compositions arranged on a chosen grid. These might include different numbers of columns and a variety of proportional relationships between them. For example, two symmetrical or asymmetrical columns, three columns of the same width, or three which are all different widths. Three columns where the widest is on the left, in the centre, or on the right*.

Different numbers of columns and a variety of proportional relationships.

There will be fewer or more of these compositions needed depending on the design. Because there are just a handful of these compositions in most designs, I give each one a name. I remember once noticing that the BBC named their component sizes after birds. The bigger the component, the bigger the bird. So a large component might be an “albatross” and a small component might be a “sparrow.” Naming conventions are hard to decide on and even harder to maintain.

It’s been a long time since I worried about semantics for my component names. Now, I name components for the project I’m working on. I chose famous French footballers for a French football magazine. I used Italian city names for a cyber security product because the developers all live in Italy. The components in my own website are all named after Japanese kaiju monsters; “godzilla,” “kong,” “mechagodzilla,” and “rodan.”

Layout components named after Japanese kaiju monsters

To be honest, it doesn’t matter what I name these components, as long as they’re unique and somewhat memorable, so I can say to a developer, “we’re using the godzilla layout for our footer.”


* There’s a good argument that instead of giving a reversed component its own name, it should have a -reverse suffix to its name. (Eg: godzilla-reverse.)

]]>
<![CDATA[52 weeks of Inspired Design Decisions #26 — Lester Beall]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-26-lester-beall https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-26-lester-beall Sun, 28 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 26 and my design this week was inspired by Lester Beall.

Lester Beall was an American modernist graphic designer. Born in Kansas City, Missouri, Beall moved to Chicago to study and from there to New York. From his farm in Connecticut, he worked on covers and posters which often featured his distinctive use of photomontage.

]]> My Lester Beall inspired design
My design this week was inspired by Lester Beall.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #25 — Erik Nitsche]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-25-erik-nitsche https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-25-erik-nitsche Mon, 22 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 25 and my design this week was inspired by Erik Nitsche.

Erik Nitsche was born in Lausanne, Switzerland in 1908 and was a pioneer in the design of books, reports, and other printed materials. In 1955, Nitsche began working as art director at engineering company General Dynamics where he designed a 420-page book on the company’s history entitled Dynamic America.

]]> My Erik Nitsche inspired design
My design this week was inspired by Erik Nitsche.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #24 — Dan Friedman]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-24-dan-friedman https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-24-dan-friedman Mon, 15 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 24 and my design this week was inspired by Dan Friedman.

Friedman was an American graphic and furniture designer. He studied under Armin Hofmann at the Ulm School of Design and became a major contributor to the new wave typography movement. While working at Pentagram until 1984, Friedman designed letterheads, logos, and posters. Sadly, Friedman died of AIDS in 1995 in New York.

]]> My Dan Friedman inspired design
My design this week was inspired by Dan Friedman.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #23 — Herbert Matter]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-23-herbert-matter https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-23-herbert-matter Mon, 08 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 23 and my design this week was inspired by Herbert Matter.

Matter was a Swiss-born American photographer and graphic designer known for his pioneering use of photo-montage in commercial art. His experimental work helped shape the vocabulary of 20th-century graphic design.

]]> My Emmett McBain inspired design
My design this week was inspired by Herbert Matter.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #22 — Emmett McBain]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-22-emmett-mcbain https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-22-emmett-mcbain Fri, 05 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 22 and my design this week was inspired by Emmett McBain.

McBain was an African American Graphic Designer who’s work highlighted themes of the African American community and helped bring a positive image of African Americans to the mainstream. He designed impactful advertising, during the Civil Rights era and a series of iconic album covers throughout the sixties and seventies.

#blacklivesmatter

]]> My Emmett McBain inspired design
My design this week was inspired by Emmett McBain.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #21 — Alexey Brodovitch]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-21-alexey-brodovitch https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-21-alexey-brodovitch Mon, 25 May 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 21 and my design this week was inspired by art director Alexey Brodovitch.

]]> My Alexey Brodovitch inspired design
My design this week was inspired by Alexey Brodovitch.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #20 — Neville Brody]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-20-neville-brody https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-20-neville-brody Mon, 18 May 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week twenty and my design this week was inspired by rebellious British designer Neville Brody.

]]> My Neville Brody inspired design
My design this week was inspired by Neville Brody.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #19 — Giovanni Pintori]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-19-giovanni-pintori https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-19-giovanni-pintori Mon, 04 May 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week nineteen and my design this week was again inspired by Italian graphic designer Giovanni Pintori.

]]> My Giovanni Pintori inspired design
My design this week was inspired by Giovanni Pintori

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #18 — Giovanni Pintori]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-18-giovanni-pintori https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-18-giovanni-pintori Mon, 27 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week eighteen and my design this week was again inspired by Italian graphic designer Giovanni Pintori.

]]> My Giovanni Pintori inspired design
My design this week was inspired by Giovanni Pintori

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[Yours truly on Isolation Station]]> https://stuffandnonsense.co.uk/blog/yours-truly-on-isolation-station https://stuffandnonsense.co.uk/blog/yours-truly-on-isolation-station Mon, 27 Apr 2020 00:00:00 +0100 Dave Letorey has an Isolation Station project where he’s interviewing industry people about their favourite music in a Desert Island Discs style. Last Friday he asked me to join him to talk about some music which is important to me. It was a fun forty minutes.

]]> Here’s the ten songs I chose:

  1. High Voltage–AC/DC
  2. Back in Black–AC/DC
  3. Milkman of Human Kindness–Billy Bragg
  4. No Time To Die–Billie Eilish
  5. Wild West Hero–Electric Light Orchestra
  6. A New England–Kirsty MacColl
  7. Bat Out Of Hell–Meatloaf
  8. Overkill (Live)–Motorhead
  9. Save Me–Queen
  10. The Boys Are Back In Town–Thin Lizzy

Watch the full interview (and apologies for my poor video quality.)

]]>
<![CDATA[52 weeks of Inspired Design Decisions #17 — Bradbury Thompson]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-17-bradbury-thompson https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-17-bradbury-thompson Mon, 20 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week seventeen and my design this week was again inspired by Bradbury Thompson.

]]> My Bradbury Thompson inspired design
My design this week was inspired by Bradbury Thompson

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #16 — Giovanni Pintori]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-16-giovanni-pintori https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-16-giovanni-pintori Sun, 19 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week sixteen and my design this week was inspired by Italian graphic designer Giovanni Pintori.

]]> My Giovanni Pintori inspired design
My design this week was inspired by Giovanni Pintori

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #15 — Herb Lubalin]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-15-herb-lubalin https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-15-herb-lubalin Sun, 12 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week fifteen and my design this week was again inspired by Herb Lubalin.

]]> My Herb Lubalin inspired design
My design this week was inspired by Herb Lubalin

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #14 — Max Huber]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-14-max-huber https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-14-max-huber Mon, 06 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week fourteen and my design this week was again inspired by Max Huber.

]]> My Max Huber inspired design
My design this week was inspired by Max Huber

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #13 — David Carson]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-13-david-carson https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-13-david-carson Sun, 29 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week thirteen and my design this week was inspired by art director and graphic designer David Carson.

]]> My David Carson inspired design
My design this week was inspired by David Carson

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[Buy Inspired Design Decisions magazines]]> https://stuffandnonsense.co.uk/blog/buy-inspired-design-decisions-magazines https://stuffandnonsense.co.uk/blog/buy-inspired-design-decisions-magazines Sun, 29 Mar 2020 00:00:00 +0000 While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through my series of “Inspired design decisions“ magazines, I plan to change that.

]]> Over the past year, I‘ve been writing a series of twelve “Inspired design decisions“ articles for Smashing Magazine. Every month, I choose an art director, designer, or publication, discuss what makes their design distinctive, and how we might learn lessons and make better work for the web. So far, these articles have been about:

  1. Avaunt Magazine
  2. Pressing Matters
  3. Ernest Journal
  4. Alexey Brodovitch
  5. Bea Feitler
  6. Neville Brody
  7. Otto Storch

I design a PDF magazine and develop HTML/CSS examples for each article. These are available for Smashing Members as part of their subscription. Now, you can buy them too.

Inspired design decisions
“Inspired design decisions“ magazines are now available to buy.

Each issue includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. They’re only £3.99 + VAT per issue and #1 is free.


Latest issue: Herb Lubalin

In this eighth issue, I explain how Herb Lubalin—one of my favourite typographers—transformed my approach to typography on the web. In this issue, you’ll learn how to use pre-formatted text for precise formatting, and how to use SVG text, fills, and strokes for intricate typographic designs. You’ll also learn how to make SVG text accessible and how to optimise SVG for maximum performance.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #12 — Armin Hofmann]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-12-armin-hofmann https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-12-armin-hofmann Sun, 22 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week twelve and my design this week was inspired by Swiss born graphic designer Armin Hoffman who is now 99 years old.

]]> My Armin Hoffman inspired design
This design was inspired by Armin Hoffman

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #11 — Max Huber]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-11-max-huber https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-11-max-huber Sun, 15 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was again inspired by Max Huber. Huber taught graphic design in the Swiss town of Lugano, which coincidentally is where I stay when I go to work in Switzerland. He died in Mendrisio—where my Swiss office is—in 1992.

]]> My Max Huber inspired design
This design was inspired by Max Huber

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #10 — Ladislav Sutnar]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-10-ladislav-sutnar https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-10-ladislav-sutnar Mon, 09 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week ten and my design this week was inspired by Czechoslovakian born graphic designer and typographer Ladislav Sutnar.

]]> My Ladislav Sutnar inspired design
This design was inspired by Ladislav Sutnar.

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #9 — Herb Lubalin]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-9-herb-lubalin https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-9-herb-lubalin Sun, 01 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was again inspired by graphic designer and typographer Herb Lubalin.

]]> My Herb Lubalin inspired design
This design was inspired by Herb Lubalin

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #8 — Lester Beall]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-8-lester-beall https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-8-lester-beall Sat, 22 Feb 2020 09:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by American modernist graphic designer, Lester Beall.

]]> My Lester Beall inspired design
This design was inspired by Lester Beall

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #7 — Max Huber]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-7-max-huber https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-7-max-huber Fri, 14 Feb 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Max Huber. Huber taught graphic design in the Swiss town of Lugano, which coincidentally is where I stay when I go to work in Switzerland. He died in Mendrisio—where my Swiss office is—in 1992.

]]> My Max Huber inspired design
This design was inspired by Max Huber

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #6 — Alvin Lustig]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-6-alvin-lustig https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-6-alvin-lustig Sat, 08 Feb 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Alvin Lustig. Lustig’s work as a book, graphic, and typeface designer has been influential long after his death in 1955.

]]> My Alvin Lustig inspired design
This design was inspired by Alvin Lustig

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #5 — Bradbury Thompson]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-5-bradbury-thompson https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-5-bradbury-thompson Sun, 02 Feb 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Bradbury Thompson. Although less well-known than many of his contemporaries, Bradbury Thompson has been called “one of the giants of 20th-century graphic design.”

]]> My Bradbury Thompson inspired design
This design was inspired by Bradbury Thompson

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #4 — Alexey Brodovitch]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-4-alexey-brodovitch https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-4-alexey-brodovitch Sun, 26 Jan 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Alexey Brodovitch. You can read more about him and his work in my article for Smashing Magazine.

]]> My Alexey Brodovitch inspired design
This design was inspired by Alexey Brodovitch

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #3 — Bea Feitler]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-3-bea-feitler https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-3-bea-feitler Sat, 18 Jan 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by “the pioneering female art director you’ve never heard of,” Bea Feitler.

]]> My Bea Feitler inspired design
This design was inspired by Bea Feitler

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people
I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #2 — Herb Lubalin]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-2-herb-lubalin https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-2-herb-lubalin Sat, 11 Jan 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by graphic designer and typographer Herb Lubalin.

]]> My Herb Lubalin inspired design
This design was inspired by Herb Lubalin

Say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

]]>
<![CDATA[52 weeks of Inspired Design Decisions]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions Fri, 03 Jan 2020 00:00:00 +0000 For the past six months, I’ve been designing, writing, and presenting a series of Inspired Design Decisions articles and webinars for Smashing Magazine. These have been brilliantly well received and I’m currently working on more content which will become a book which will be available later on this year. But I wanted a regular project to experiment with new designs.

]]> Last week, my buddy Dan Davies started Print to CSS. During 2020, Dan will publish a new CSS Grid layout inspired by print designs. It’s a fabulous idea and the perfect format for my regular project too.

A weekly series of 52 website designs by Andy Clarke, influenced by the most inspiring art directors and graphic designers of the twentieth century. Learn about the background to each design, the techniques and technologies used to implement it, and how it might inspire more compelling, creative design for the web.

My first design is up today, a layout which uses a simple CSS Grid together with CSS Shapes, and was inspired by art director Otto Storch. Although Storch was an influential member of the New York School of editorial and advertising designers, and was taught by Alexey Brodovitch, there’s been very little published about his work. I’d like to make more web designers familiar with Storch and his work.


Go to Inspired Design Decisions


If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people
I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[Z’s Still Not Dead Baby, Z’s Still Not Dead]]> https://stuffandnonsense.co.uk/blog/zs-still-not-dead-baby-zs-still-not-dead https://stuffandnonsense.co.uk/blog/zs-still-not-dead-baby-zs-still-not-dead Tue, 10 Dec 2019 00:00:00 +0000 Back in 2005, my friend Drew started a Christmas advent calendar website and asked me if I’d write something for it. Of course, I agreed, and my first 24ways article was “Z’s not dead baby, Z’s not dead.” It was a short piece how z-index and positioning in CSS could “be used to create designs which ‘break out of the box.’ This year, I returned that topic in what will be my fifteenth and final article for 24ways.

]]>

A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colours, square corners, and sharp edges.

Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them.

Still, all fashions fade eventually. I’m hopeful that with the styling tools we have today, we’ll move beyond flatness and add an extra dimension. Here are five CSS properties which will bring depth and richness to your designs.

In Z’s Still Not Dead Baby, Z’s Still Not Dead, I cover:

  • Transparency with alpha values
  • Opacity
  • Blend modes
  • CSS Grid
  • Z-index

While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realise the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition.

I made this design for the 1961 Austin Seven 850, the small car which helped define the swinging sixties.

Over the years, I’ve written about many different design and design related topics. My personal favourite is last year’s “Designing Your Site Like It’s 1998” but without doubt the one I’m most proud of is Contract Killer from 2008. My open-source killer contract has been used thousands of times and designers and developers. It’s perhaps the most important thing I’ve ever made.

  1. 2005: Z's not dead baby, Z's not dead
  2. 2006: A Message To You, Rudy - CSS Production Notes
  3. 2007: Underpants Over My Trousers
  4. 2008: Contract Killer
  5. 2009: Ignorance Is Bliss
  6. 2010: Circles of Confusion
  7. 2011: There’s No Formula for Great Designs
  8. 2012: Monkey Business
  9. 2013: The Command Position Principle
  10. 2014: Taglines and Truisms
  11. 2015: Blow Your Own Trumpet
  12. 2016: Designing Imaginative Style Guides
  13. 2017: Getting Hardboiled with CSS Custom Properties
  14. 2018: Designing Your Site Like It’s 1998
  15. 2019: Z’s Still Not Dead Baby, Z’s Still Not Dead

I’m incredibly grateful to Drew and his team of volunteers for inviting me to write for this incredible publication every year for the past fifteen years. I hope you enjoy this fifteenth and final 24ways article as much as I enjoyed writing it.

]]>
<![CDATA[Producing Transcending CSS Revisited]]> https://stuffandnonsense.co.uk/blog/producing-transcending-css-revisited https://stuffandnonsense.co.uk/blog/producing-transcending-css-revisited Tue, 03 Dec 2019 00:00:00 +0000 Earlier this year, New Riders gave me back the publishing rights to my first book, Transcending CSS: The Fine Art of Web Design. I’d originally intended to post a PDF of the original book online, but the terms of my contract meant that I couldn’t simply give away a copy of the book New Riders had produced. I needed a new plan.

]]> Transcending CSS Revisited
Left: 2006 cover. Right: A new cover for 2019.

Sitting with Alex and Sue outside a cafe in Windsor, we hatched a plan. We decided to make an online version of Transcending CSS which would be free for everyone to read. Then, we’d typeset the book into a new format and offer it as an ebook and PDF.

I didn’t intend to make this new book a second edition. In fact, I was keen to retain the original content, almost like a historical record of how we designed and developed websites in 2006. To highlight how things have changed between then and now, I decided to add a written commentary to the ebook and PDF.

Revisiting the content

The first step was to copy the content from the original. I didn’t have a PDF version of Transcending CSS, and the pirated copies I found online were impossible to copy from. Luckily, one of the translators of the original book had clean PDFs which they gave me.

Reading what I’d written in 2006 was painful. I hated my writing style, repetition, and vagueness. I started to rewrite every section, following the original outline, and the end result is a version of Transcending CSS where hardly a sentence is untouched. I changed spelling from American to British English, and switched to an active tense where I and telling you what I think.

I was thrilled when Rachel Andrew agreed to write a new foreword. I can’t think of a single person who’s done more for the web over the last fifteen years than Rachel.

300 new illustrations

Next came the examples and illustrations. I reinstated the full newspaper front pages, and retained the original screenshots of websites from 2006, including the CSS Zen Garden. But, I’d made my example designs and code overlays using Macromedia Fireworks and they were no longer fit for purpose. So I redesigned every example, keeping the Web 2.0 feel from the originals. Just like before, I included in-jokes and the names of my friends. At the end of the process, I’d made almost 300 new images for this edition.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.

In the commentary, I write about how we can implement my designs today. This involved developing new HTML and CSS for at least half the examples. I had most fun replacing the original Advanced Layout CSS examples with CSS Grid Template Areas, and will publish those at some point soon.

Developing the online version

People have published books online before, and I followed the format of Brad Frost’s Atomic Web Design. I wanted my online version to use today’s transcending technologies including CSS Grid, Flexbox, Shapes, and SVG. I also wanted the book to load quickly and be a great reading experience on desktop and mobile.

Transcending CSS Revisited
Left: Original example. Center: Transcending CSS Revisited redesign Right: Transcending CSS Revisited HTML guide.

Typesetting and page layout

Sue transferred my newly edited text into InDesign and over a couple of months of evenings and weekends, we laid out the new book using InDesign. Although I’ve switched almost all of my print work over to Affinity Publisher, that app doesn’t (yet) have the ability to use GREP styles which automatically prevent orphans and widows. That’s an essential feature when typesetting hundreds of pages.

Bethany Andrew converted the HTML from the online version into XHTML and then into ePub for the ebook version. This, and the PDF, are hosted on SendOwl which also provides payment processing.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.

Services and software used

  • Adobe InDesign
  • Grammerly
  • iA Writer
  • SendOwl
  • Sigil
  • Sketch

Producing Transcending CSS Revisited took far longer and involved much more work than I expected, but I’m pleased I took on the job. I hope that people will read it and appreciate how much has changed, but also how many challenges have stayed the same.

Free to read online

Transcending CSS Revisited is now free to read online, and if you’d like a beautiful PDF and ePub version, I’ve made a bundle available for only £9.99+VAT (£4.99 for students.)


Buy ebook from £4.99*
]]>
<![CDATA[Announcing Transcending CSS Revisited]]> https://stuffandnonsense.co.uk/blog/announcing-transcending-css-revisited https://stuffandnonsense.co.uk/blog/announcing-transcending-css-revisited Sun, 01 Dec 2019 00:00:00 +0000 I wrote my first book, Transcending CSS: The Fine Art of Web design, way back in 2006. It became a success and since then I’ve had countless people tell me it was influential in their careers. For example:

]]>

I would be hard-pressed to think of another book that has been as influential on my career as Transcending CSS. The semantically structured code I write every day contains the fingerprints that came from the inspiring examples in this work. I am still quick to embrace the “transcending spirit” to expand the creative possibilities of the sites I build.

Jeff Bridgforth

And:

The breakthroughs in Transcending CSS were pivotal in my early career. The skills I learned at the time put me well ahead of others in the field, and helped kickstart my career. I was able to do things most didn’t see as possible at the time, and now are commonplace.

Chris Lackey
Transcending CSS Revisited
Left: 2006 cover. Right: A new cover for 2019.

When I wrote the acknowledgements in 2006, I said:

Writing this book has been one of the hardest, but at the same time, the most rewarding challenges in my life.

I meant it when I said then writing Transcending CSS was one of my hardest challenges, but I haven’t explained why until today.

Although I’d maintained a positive public profile, the reality was that in 2006, my business and personal life were in tatters. My business partner in a company we’d founded together was doing his level best to undermine me personally and professionally. Two weeks after signing the contract to write Transcending CSS, I walked away from the business I’d co-founded.

At home, my seventeen-year-old marriage was struggling too. My behaviour and mental health were at their worst, so my wife and I separated for a few months. That was a terrible mistake and my biggest regret. It was also the worst time to start writing my first book.

Saying writing Transcending CSS was hard would be an understatement. I had no experience of writing anything longer than a blog post. When a promise of guidance didn’t materialise, the whole project looked like it would fail, adding to the fragility of my already poor mental health.

After moving home—and with only two months before my deadline—I started Transcending CSS from scratch with the help of my editor Karyn Johnson and support from my wife. During the day, Sue helped me structure my thoughts and organise the book’s content. Every evening for two months, Karyn and I worked for hours over video chat, editing the day’s content and planning the next day of writing. By a miracle, we finished the book only a week behind schedule.

Rereading Transcending CSS for the first time in almost fifteen years has been challenging too. This book brings back memories of a period I’d rather forget. But unlike in publishing, there are no second editions in life.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.

Peachpit/New Riders have given me the publishing rights to Transcending CSS, so I felt it was time to revisit this book. Not to update its content or write a second edition, but to examine the approaches we took and the tools we used at the start of the web standards revolution in website design. The content of Transcending CSS Revisited is much the same as it was when published in 2006.

I’ve tightened up my writing, changed the spelling from US to British English, and made minor edits for this new format. I’ve checked every URL and replaced them with Wayback Machine URLs when needed.

It’s important to remember how we worked in the past so we can learn lessons for the future. For historical reasons, I’ve retained all original information and examples of code, even when they’re no longer relevant.

Transcending CSS Revisited is available to read online for free, with a new foreword by none other than Rachel Andrew. I have no hesitation in saying without Rachel, none of the CSS we now use today would’ve been possible.

In the ePub and PDF versions of Transcending CSS Revisited, I’ve also added a commentary where I explain what’s changed since the original Transcending CSS and how we should work today. An ePub and PDF bundle is also available to buy for only £9.99+VAT.


Buy ebook from £4.99*

* Student price. Regular price £9.99 plus VAT. Ebook includes ePub and PDF formats with an exclusive author’s commentary.


I hope you enjoy this version of Transcending CSS Revisited.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Original example. Center: Transcending CSS Revisited redesign: Transcending CSS Revisited HTML guide.
Transcending CSS Revisited
Left: Original example. Center: Transcending CSS Revisited redesign: Transcending CSS Revisited HTML guide.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
]]>