Skip to content

Commit d13a6f0

Browse files
csswizardrycsswizardry
committed
Optimise Case Study format
1 parent 3b4de28 commit d13a6f0

1 file changed

Lines changed: 84 additions & 116 deletions

File tree

‎case-studies.md‎

Lines changed: 84 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,57 @@
11
---
22
layout: feature
3-
title: Case Studies
3+
title: Web Performance Case Studies
44
page-class: page--case-studies
55
permalink: /case-studies/
6+
meta: "Real-world performance wins: how I drove gains for ISO.org, Cloudinary, the BBC, and more."
67
lux: "Case Studies"
8+
case_studies:
9+
- title: "ISO.org"
10+
url: "/case-studies/iso-org/"
11+
bg_color: "#e30010"
12+
description: "Performance Audit"
13+
- title: "Cloudinary"
14+
url: "/case-studies/cloudinary/"
15+
bg_color: "#3447c5"
16+
description: "Consultancy"
17+
- title: "Raspberry Pi & Code Club"
18+
url: "/case-studies/raspberry-pi-code-club-workshop/"
19+
bg_gradient: "linear-gradient(to bottom right, #c7053d 0%, #c7053d 50%, #393 50%, #393 100%)"
20+
description: "Workshop"
21+
- title: "Ocado"
22+
url: "/case-studies/ocado-workshop/"
23+
bg_color: "#a9ae00"
24+
description: "Workshop"
25+
- title: "NHS"
26+
url: "/case-studies/nhs-nhsx-elearning-platform/"
27+
bg_color: "#0072c6"
28+
description: "Development, Product, Performance"
29+
- title: "Better Collective"
30+
url: "/case-studies/better-collective/"
31+
bg_color: "#00a767"
32+
description: "Workshop, Consultancy"
33+
- title: "Madgex"
34+
url: "/case-studies/madgex-consultancy-workshop/"
35+
bg_color: "#009ddc"
36+
description: "Workshop, Consultancy"
37+
- title: "BBC"
38+
url: "/case-studies/bbc-workshop/"
39+
bg_color: "#ffdf43"
40+
title_color: "#000"
41+
description: "Workshop, Consultancy"
42+
- title: "BSkyB"
43+
url: "/case-studies/bskyb/"
44+
bg_color: "#01519c"
45+
description: "Development, Product, Workshop"
46+
- title: "CSS Wizardry"
47+
url: "/case-studies/css-wizardry/"
48+
bg_color: "#f43059"
49+
description: "Development, Product"
50+
- title: "Financial Times"
51+
url: "/case-studies/financial-times/"
52+
bg_color: "#fff1e0"
53+
title_color: "#010b13"
54+
description: "Workshop, Consultancy"
755
---
856

957
## Good Work for Good People
@@ -22,125 +70,28 @@ lux: "Case Studies"
2270
</style>
2371

2472
<ul class="feature-list" id="jsCaseStudiesList">
25-
26-
<li class="feature-list__item">
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>
33-
</li>
34-
35-
<li class="feature-list__item">
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>
42-
</li>
43-
44-
<li class="feature-list__item">
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>
51-
</li>
52-
53-
<li class="feature-list__item">
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>
60-
</li>
61-
62-
<li class="feature-list__item">
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>
69-
</li>
70-
71-
<li class="feature-list__item">
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>
78-
</li>
79-
80-
<li class="feature-list__item">
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>
87-
</li>
88-
89-
<li class="feature-list__item">
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>
96-
</li>
97-
98-
<li class="feature-list__item">
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>
105-
</li>
106-
107-
<li class="feature-list__item">
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>
123-
</li>
124-
125-
{% comment %}
73+
{% for case_study in page.case_studies %}
12674
<li class="feature-list__item">
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>
75+
<a
76+
href="{{ case_study.url }}"
77+
class="feature-list__link"
78+
style="
79+
{% if case_study.bg_color %}background-color: {{ case_study.bg_color }};{% endif %}
80+
{% if case_study.bg_gradient %}background-image: {{ case_study.bg_gradient }};{% endif %}
81+
"
82+
>
83+
<h2
84+
class="feature-list__title"
85+
{% if case_study.title_color %}
86+
style="color: {{ case_study.title_color }};"
87+
{% endif %}
88+
>
89+
{{ case_study.title }}
90+
<span class="feature-list__sub">{{ case_study.description }}</span>
13191
</h2>
13292
</a>
13393
</li>
134-
135-
<li class="feature-list__item">
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>
141-
</li>
142-
{% endcomment %}
143-
94+
{% endfor %}
14495
</ul>
14596

14697
<script>
@@ -157,3 +108,20 @@ lux: "Case Studies"
157108
list.append(...listItems);
158109
})();
159110
</script>
111+
112+
<script type="application/ld+json">
113+
{
114+
"@context": "https://schema.org",
115+
"@type": "ItemList",
116+
"itemListElement": [
117+
{% for case_study in page.case_studies %}
118+
{
119+
"@type": "ListItem",
120+
"position": {{ forloop.index }},
121+
"url": "{{ case_study.url | absolute_url }}",
122+
"name": "{{ case_study.title }}"
123+
}{% if forloop.last == false %},{% endif %}
124+
{% endfor %}
125+
]
126+
}
127+
</script>

0 commit comments

Comments
 (0)