Skip to content

Commit 0b36b55

Browse files
csswizardrycsswizardry
committed
Add ISO.org case study
1 parent 3d77daa commit 0b36b55

File tree

6 files changed

+155
-79
lines changed

6 files changed

+155
-79
lines changed

‎case-studies.md‎

Lines changed: 85 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ lux: "Case Studies"
99
## Good Work for Good People
1010

1111
<div class="layout">
12-
<p class="layout__item lap-and-up-one-half">In no particular order, a
13-
series of case studies covering a selection of recent work for
14-
consultancy, engineering, and workshop clients.</p
12+
<p class="layout__item lap-and-up-one-half">In no particular order, a
13+
series of case studies covering a selection of recent work for
14+
consultancy, engineering, and workshop clients.</p
1515
><p class="layout__item lap-and-up-one-half">Don’t have time to read full case studies?
16-
Feel free to <a href="mailto:csswizardry@gmail.com?subject=Let%E2%80%99s%20work%20together">send
17-
me an email</a> and we can talk directly.</p>
16+
Feel free to <a href="mailto:csswizardry@gmail.com?subject=Let%E2%80%99s%20work%20together">send
17+
me an email</a> and we can talk directly.</p>
1818
</div>
1919
2020
<style>
@@ -24,111 +24,120 @@ lux: "Case Studies"
2424
<ul class="feature-list">
2525

2626
<li class="feature-list__item">
27-
<a href="cloudinary/" class="feature-list__link" style="background-color: #3447c5;">
28-
<h2 class="feature-list__title">
29-
Cloudinary
30-
<span class="feature-list__sub">Consultancy</span>
31-
</h2>
32-
</a>
27+
<a href="iso-org/" class="feature-list__link" style="background-color: #e30010;">
28+
<h2 class="feature-list__title">
29+
ISO.org
30+
<span class="feature-list__sub">Audit</span>
31+
</h2>
32+
</a>
3333
</li>
3434

3535
<li class="feature-list__item">
36-
<a href="raspberry-pi-code-club-workshop/" class="feature-list__link" style="background-image: linear-gradient(to bottom right, #c7053d 0%, #c7053d 50%, #393 50%, #393 100%);">
37-
<h2 class="feature-list__title">
38-
Raspberry Pi &amp; Code Club
39-
<span class="feature-list__sub">Workshop</span>
40-
</h2>
41-
</a>
36+
<a href="cloudinary/" class="feature-list__link" style="background-color: #3447c5;">
37+
<h2 class="feature-list__title">
38+
Cloudinary
39+
<span class="feature-list__sub">Consultancy</span>
40+
</h2>
41+
</a>
4242
</li>
4343

4444
<li class="feature-list__item">
45-
<a href="ocado-workshop/" class="feature-list__link" style="background-color: #a9ae00;">
46-
<h2 class="feature-list__title">
47-
Ocado
48-
<span class="feature-list__sub">Workshop</span>
49-
</h2>
50-
</a>
45+
<a href="raspberry-pi-code-club-workshop/" class="feature-list__link" style="background-image: linear-gradient(to bottom right, #c7053d 0%, #c7053d 50%, #393 50%, #393 100%);">
46+
<h2 class="feature-list__title">
47+
Raspberry Pi &amp; Code Club
48+
<span class="feature-list__sub">Workshop</span>
49+
</h2>
50+
</a>
5151
</li>
5252

5353
<li class="feature-list__item">
54-
<a href="nhs-nhsx-elearning-platform/" class="feature-list__link" style="background-color: #0072c6;">
55-
<h2 class="feature-list__title">
56-
NHS
57-
<span class="feature-list__sub">Development, Product, Performance</span>
58-
</h2>
59-
</a>
54+
<a href="ocado-workshop/" class="feature-list__link" style="background-color: #a9ae00;">
55+
<h2 class="feature-list__title">
56+
Ocado
57+
<span class="feature-list__sub">Workshop</span>
58+
</h2>
59+
</a>
6060
</li>
6161

6262
<li class="feature-list__item">
63-
<a href="better-collective/" class="feature-list__link" style="background-color: #00a767;">
64-
<h2 class="feature-list__title">
65-
Better Collective
66-
<span class="feature-list__sub">Workshop, Consultancy</span>
67-
</h2>
68-
</a>
63+
<a href="nhs-nhsx-elearning-platform/" class="feature-list__link" style="background-color: #0072c6;">
64+
<h2 class="feature-list__title">
65+
NHS
66+
<span class="feature-list__sub">Development, Product, Performance</span>
67+
</h2>
68+
</a>
6969
</li>
7070

7171
<li class="feature-list__item">
72-
<a href="madgex-consultancy-workshop/" class="feature-list__link" style="background-color: #009ddc;">
73-
<h2 class="feature-list__title">
74-
Madgex
75-
<span class="feature-list__sub">Workshop, Consultancy</span>
76-
</h2>
77-
</a>
72+
<a href="better-collective/" class="feature-list__link" style="background-color: #00a767;">
73+
<h2 class="feature-list__title">
74+
Better Collective
75+
<span class="feature-list__sub">Workshop, Consultancy</span>
76+
</h2>
77+
</a>
7878
</li>
7979

8080
<li class="feature-list__item">
81-
<a href="bbc-workshop/" class="feature-list__link" style="background-color: #ffdf43;">
82-
<h2 class="feature-list__title" style="color: #000;">
83-
BBC
84-
<span class="feature-list__sub">Workshop, Consultancy</span>
85-
</h2>
86-
</a>
81+
<a href="madgex-consultancy-workshop/" class="feature-list__link" style="background-color: #009ddc;">
82+
<h2 class="feature-list__title">
83+
Madgex
84+
<span class="feature-list__sub">Workshop, Consultancy</span>
85+
</h2>
86+
</a>
8787
</li>
8888

8989
<li class="feature-list__item">
90-
<a href="bskyb/" class="feature-list__link" style="background-color: #01519c;">
91-
<h2 class="feature-list__title">
92-
BSkyB
93-
<span class="feature-list__sub">Development, Product, Workshop</span>
94-
</h2>
95-
</a>
90+
<a href="bbc-workshop/" class="feature-list__link" style="background-color: #ffdf43;">
91+
<h2 class="feature-list__title" style="color: #000;">
92+
BBC
93+
<span class="feature-list__sub">Workshop, Consultancy</span>
94+
</h2>
95+
</a>
9696
</li>
9797

9898
<li class="feature-list__item">
99-
<a href="css-wizardry/" class="feature-list__link" style="background-color: #f43059;">
100-
<h2 class="feature-list__title">
101-
CSS Wizardry
102-
<span class="feature-list__sub">Development, Product</span>
103-
</h2>
104-
</a>
99+
<a href="bskyb/" class="feature-list__link" style="background-color: #01519c;">
100+
<h2 class="feature-list__title">
101+
BSkyB
102+
<span class="feature-list__sub">Development, Product, Workshop</span>
103+
</h2>
104+
</a>
105105
</li>
106106

107107
<li class="feature-list__item">
108-
<a href="financial-times/" class="feature-list__link" style="background-color: #fff1e0;">
109-
<h2 class="feature-list__title" style="color: #010b13;">
110-
Financial Times
111-
<span class="feature-list__sub">Workshop, Consultancy</span>
112-
</h2>
113-
</a>
108+
<a href="css-wizardry/" class="feature-list__link" style="background-color: #f43059;">
109+
<h2 class="feature-list__title">
110+
CSS Wizardry
111+
<span class="feature-list__sub">Development, Product</span>
112+
</h2>
113+
</a>
114+
</li>
115+
116+
<li class="feature-list__item">
117+
<a href="financial-times/" class="feature-list__link" style="background-color: #fff1e0;">
118+
<h2 class="feature-list__title" style="color: #010b13;">
119+
Financial Times
120+
<span class="feature-list__sub">Workshop, Consultancy</span>
121+
</h2>
122+
</a>
114123
</li>
115124

116125
{% comment %}
117126
<li class="feature-list__item">
118-
<a href="fasetto/" class="feature-list__link" style="background-color: #f2774a;">
119-
<h2 class="feature-list__title">
120-
Fasetto
121-
<span class="feature-list__sub">Development, Product, Performance</span>
122-
</h2>
123-
</a>
127+
<a href="fasetto/" class="feature-list__link" style="background-color: #f2774a;">
128+
<h2 class="feature-list__title">
129+
Fasetto
130+
<span class="feature-list__sub">Development, Product, Performance</span>
131+
</h2>
132+
</a>
124133
</li>
125134

126135
<li class="feature-list__item">
127-
<a href="joinin.com/" class="feature-list__link" style="background-color: #3fd5af;">
128-
<h2 class="feature-list__title">
129-
Joinin.com
130-
</h2>
131-
</a>
136+
<a href="joinin.com/" class="feature-list__link" style="background-color: #3fd5af;">
137+
<h2 class="feature-list__title">
138+
Joinin.com
139+
</h2>
140+
</a>
132141
</li>
133142
{% endcomment %}
134143

‎case-studies/financial-times.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ layout: post
33
title: "Financial Times: Workshop and Consultancy"
44
meta: "An intense day of workshop-style Q&A with the Financial Times"
55
permalink: /case-studies/financial-times/
6-
next-case-study-title: "Cache in the cloud—fixing caching at Cloudinary"
7-
next-case-study-url: /case-studies/cloudinary/
6+
next-case-study-title: "Setting a New Standard for ISO.org"
7+
next-case-study-url: /case-studies/iso-org/
88
hide-hire-me-link: true
99
case-study: true
1010
lux: "Case Study"

‎case-studies/iso.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: post
3+
title: "Setting a New Standard for ISO.org"
4+
meta: ""
5+
permalink: /case-studies/iso-org/
6+
next-case-study-title: "Cache in the cloud—fixing caching at Cloudinary"
7+
next-case-study-url: /case-studies/cloudinary/
8+
hide-hire-me-link: true
9+
case-study: true
10+
lux: "Case Study"
11+
---
12+
13+
<img src="/img/content/case-studies/iso-org/iso-logo.png" alt="" width="128" height="106"
14+
class="u-outdent"
15+
style="float: left;
16+
margin-right: 24px;
17+
shape-outside: url(/img/content/case-studies/iso-org/iso-logo.png);">
18+
19+
Imagine my delight when ISO got in touch. I love a spec, I love a standard, so
20+
working with _the_ [International Organization for
21+
Standardization](https://www.iso.org/) is a bit of a dream come true! As a Brit,
22+
[ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) and [ISO
23+
3103:2019](https://www.iso.org/standard/73224.html) are particularly close to my
24+
heart, so to work with the folk that write them…? It’s a yes from me.
25+
26+
Conversations stared in October 2024 with a view to kicking off the project in
27+
early 2025. This gave us ample time to [design the perfect
28+
engagement](/services/) and be very well prepared into the run-up. The brief was
29+
simple: improve the user experience. The focus wasn’t on
30+
[SEO](/2023/07/core-web-vitals-for-search-engine-optimisation/) or revenue, but
31+
simply on improving the user experience. After all, improve UX, and all else
32+
follows. It’s a wise move!
33+
34+
We decided to benchmark on [Core Web Vitals](/workshops/core-web-vitals-on-ios/)
35+
as they’re arguably the most sensible place to start for a fledgling project.
36+
Their biggest sticking points were Largest Contentful Paint and Cumulative
37+
Layout Shift. Interaction to Next Paint wasn’t much of a concern for them as
38+
they’d made smart decisions in the past and not gone all-in on JavaScript.
39+
40+
The project was to be incredibly tactical—a quick-fire round of specific
41+
improvements built out into a backlog that the team could pick up as and when
42+
they were ready. What was nice about this approach, and not running a big
43+
reveal-style project, is that we were able to realise performance improvements
44+
while the project was in flight. Not only was this highly motivating, it
45+
demonstrated immediate value in the project. It was the right thing to do!
46+
47+
And how did it go? It went very well:
48+
49+
<figure>
50+
<img src="/img/content/case-studies/iso-org/crux.png" alt="Graphs showing significant and sustained improvements in all three Core Web Vitals since the project started" width="1500" height="348" loading="lazy">
51+
<figcaption>I think the numbers speak for themselves…</figcaption>
52+
</figure>
53+
54+
As is customary, I handed over a full Trello backlog (half of which were already
55+
live), and an Executive Summary document for the non-technical stakeholders and
56+
sponsors.
57+
58+
It was about as targeted as a [web performance audit](/performance-audits/) can
59+
get: in and out, job done.
60+
61+
If you need some of the same, [get in touch](/contact/).
62+
63+
---
64+
65+
{% include promo-next.html %}

‎case-studies/raspberry-pi-code-club-workshop.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ lux: "Case Study"
1111
---
1212

1313
<img src="{{ site.cloudinary }}/img/content/case-studies/raspberry-pi/logo-pi.png" alt="" width="128" height="165"
14+
class="u-outdent"
1415
style="float: left;
1516
margin-right: 24px;
16-
shape-outside: url(/img/content/case-studies/raspberry-pi/logo-pi.png);" />
17+
shape-outside: url({{ site.cloudinary }}/img/content/case-studies/raspberry-pi/logo-pi.png);" />
1718

1819
I was approached by my friend [Jonic](https://twitter.com/Jonic), Senior
1920
Developer at the Raspberry Pi Foundation, about running a workshop with him and
@@ -50,6 +51,7 @@ and discussing how ITCSS might fit their specific requirements (that’s a core
5051
part of the architecture’s design: it can be moulded to fit almost any project).
5152

5253
<img src="{{ site.cloudinary }}/img/content/case-studies/raspberry-pi/logo-cc.png" alt="" width="128" height="128"
54+
class="u-outdent-alt"
5355
style="float: right;
5456
margin-left: 12px;
5557
shape-outside: circle();" />

‎img/content/case-studies/iso-org/crux.png‎

27.7 KB
Loading

‎img/content/case-studies/iso-org/iso-logo.png‎

11.1 KB
Loading

0 commit comments

Comments
 (0)