Goto Copenhagen

HTML: How to Make
Loveliness
Bruce Lawson

View Slide

View Slide

@brucel

View Slide

@brucel
§

View Slide

@brucel

View Slide

@brucel
Treasure!
• More performant

• More accessible

• More robust

• Less code to write

• Less code to test

• More time in the pub

View Slide

@brucel

View Slide

@brucel
The treasure map:
• Use HTML properly

• Write more HTML

• Use CSS properly

• Built-in beats Bolt-on. Bigly.

View Slide

@brucel

View Slide

@brucel
https://almanac.httparchive.org/en/2019/javascript

View Slide

@brucel
Weary of jQuery?
jQuery, the most popular JavaScript library
ever created, is used in 85.03% of desktop
pages and 83.46% of mobile pages.

View Slide

@brucel
Since its ﬁrst publication in 1970 The
Technique of Furniture Making has
established itself as the bible for all
woodworkers.

View Slide

@brucel
Introduction
Any textbook concerned with the techniques of furniture-
making must deal primarily with the basic handcrafts for
it is upon this groundwork that machine production is built,
and in fact all the machine can ever do is to translate
the essential hand operations into rotary movements of
the cutting tool.

View Slide

@brucel
anyone who has only been shown how to force a piece of
wood against a mechanised saw will have learnt very little,
but if he has had to saw that piece of wood by hand he
will be more likely to know that much more about it, he
will have greater respect for it and will understand in
greater depth the problems that will have to be faced in
its manipulation.

View Slide

View Slide

@brucel

View Slide

@brucel
職⼈人気質
The Japanese word shokunin is deﬁned by both
Japanese and Japanese-English dictionaries as
‘craftsman’ or ‘artisan,’ but such a literal
description does not fully express the deeper
meaning.

Tashio Odate - “Japanese Woodworking Tools: Their Tradition, Spirit and Use”

View Slide

@brucel
職⼈人気質
Shokunin means not only having technical skill, but
also implies an attitude and social
consciousness... a social obligation to work his
best for the general welfare of the people, [an]
obligation both material and spiritual.

Tashio Odate - “Japanese Woodworking Tools: Their Tradition, Spirit and Use”

View Slide

@brucel
• Picture of TBL “web developer”

View Slide

Seren

View Slide

@brucel
http://info.cern.ch/hypertext/WWW/TheProject.html

View Slide

@brucel

View Slide

@brucel
We broke it
• ﬁxed width

• bad contrast, fonts, colours

• pixel-perfect layout

• lack of captions for videos

• lack of keyboard accessibility

• removing focus indicator

View Slide

@brucel

View Slide

@brucel
The Raw Materials

View Slide

@brucel
b
• web comping

View Slide

@brucel

View Slide

@brucel
Top four
1. Have a fundamental understanding of JavaScript

“Of course you can’t do full-stack JavaScript development (or
full-stack any web development for that matter), without
learning JavaScript itself.”

2. Front-End framework

3. Bootstrap 4

4. HTML/CSS

View Slide

@brucel
As for HTML, there’s not much to learn right away
and you can kind of learn as you go, but before
making your first templates, know the difference
between in-line elements like and how they
differ from block ones like . This will save you a
huge amount of headache when fiddling with your
CSS code.

View Slide

@brucel

View Slide

@brucel
HTML is declarative
Click Me!

View Slide

@brucel
HTML is fault-tolerant
OMG you’re having a seizure

View Slide

@brucel
so is backwards compatible

Can’t play it.
Download it.

View Slide

@brucel
Paving a cowpath

type=“image/webp”>

View Slide

@brucel

View Slide

@brucel
HTML is interoperable.
I’m badly nested

View Slide

@brucel
Ninja by Efe Palavan
from the Noun Project

View Slide

@brucel
JavaScript is NOT declarative
Imperative programming focuses on describing how a
program operates.

The term is often used in contrast to declarative
programming, which focuses on what the program should
accomplish without specifying how the program should
achieve the result.

View Slide

@brucel
Principle of Least Power
The choice of language is a common design choice.

The low power end of the scale is typically simpler to
design, implement and use, but the high power end of
the scale has all the attraction of being an open-ended
hook into which anything can be placed: a door to
uses bounded only by the imagination of the
programmer.

Sir Uncle Timbo https://www.w3.org/DesignIssues/Principles.html#PLP
“

View Slide

@brucel

View Slide

View Slide

https://kryogenix.org/code/browser/everyonehasjs.html

View Slide

View Slide

@brucel
Oooh demo

View Slide

@brucel
Wooooh code
blah blah blah
blah blah blah

View Slide

@brucel
https://wicg.github.io/aom/explainer.html

View Slide

@brucel

Click me (if you can!)
• Remember to set ARIA role (in HTML or JS)

• Remember to manage focusability

• Remember to listen for the correct keypresses

View Slide

@brucel
“Perhaps we could research why we need 92 variants of
button related elements that aren't a native button, for
example, and try to ﬁll the native gap.”

https://almanac.httparchive.org/en/2019/markup

View Slide

@brucel

View Slide

@brucel
div
“The div element has no special meaning at all.

Authors are strongly encouraged to view the div element as
an element of last resort, for when no other element is
suitable. Use of more appropriate elements instead of
the div element leads to better accessibility for readers and
easier maintainability for authors.”

View Slide

@brucel

View Slide

@brucel
Screen reader users
webaim.org/projects/screenreadersurvey5/ - used by kind permission

View Slide

@brucel
• Leonie vid clip
https://www.smashingmagazine.com/2019/02/accessibility-webinar/

View Slide

@brucel
11 tags are used on > 90% of pages

<br/><img><br/><span><br/>•<br/>

View Slide

@brucel
15 other elements occur on > 50% of pages:

<br/><input><br/><br><br/><form><br/><h2><br/><h1><br/><iframe><br/><h3><br/><button><br/><footer><br/><header><br/><nav><br/>

View Slide

@brucel
“Structured data”
When you add markup to your content, you help search
engines understand the diﬀerent components of a page.
When Google's systems understand your page more clearly,
Google Search can surface content through the cool features
discussed in this post, which can enhance the user
experience and get you more traﬃc.

https://webmasters.googleblog.com/2019/04/enriching-search-results-structured-data.html

View Slide

@brucel
ooooh $$$$
• Eventbrite leveraged event structured data and saw 100%
increase in the typical YOY growth of traffic from
search.

• Jobrapido integrated with the job experience on Google
Search and saw 115% increase in organic traffic, 270%
increase of new user registrations from organic traffic,
and 15% lower bounce rate for Google visitors to job
pages.

• Rakuten used the recipe search experience and saw a 2.7X
increase in traffic from search engines and a 1.5X
increase in session duration.

View Slide

@brucel

The HTML Treasure Hunt
datetime="2019-05-20">Monday 20 May 2019

...

View Slide

@brucel

View Slide

@brucel
Accessibility is part of Usability
“high conformance with web
accessibility guidelines may
provide beneﬁts to users
without disabilities.” 

View Slide

@brucel
Schmutz, Sonderegger and Sauer 
• Sixty-one participants without disabilities used one of three
websites diﬀering in levels of accessibility

• A high level of web accessibility led to better performance (i.e.,
task completion time and task completion rate) than low or very
low accessibility.

• Likewise, high web accessibility improved user ratings (i.e.,
perceived usability, aesthetics, workload and trustworthiness)
compared to low or very low web accessibility.

Department of Psychology, University of Fribourg, Fribourg, Switzerland
www.unifr.ch/psycho/assets/files/KogErg/SchmutzSondereggerSauer2016.pdf

View Slide

@brucel

View Slide

@brucel
https://twitter.com/goodwitch/status/1106231135443410944

View Slide

@brucel

View Slide

@brucel
• Picture of TBL “web developer”

View Slide

@brucel
Sir Uncle Timbo:
The web is for everyone and collectively we
hold the power to change it. It won’t be easy.
But if we dream a little and work a lot, we
can get the web we want.

https://webfoundation.org/2019/03/web-birthday-30/

View Slide

@brucel
What can you do?
Learn the semantics of HTML. There are 120(ish) elements, that’s all!

View Slide

@brucel
Most 2-year-olds can say about 100 words.

View Slide

@brucel
By the time your toddler is 2 1/2, she'll probably know close to 300

View Slide

@brucel

View Slide

@brucel
What can you do?
• Learn the semantics of HTML. There are 120(ish) elements, that’s all!

• Run automated tests and go for low-hanging fruit, e.g. colour contrast

View Slide

@brucel
98% of top million pages have errors
https://webaim.org/projects/million/

View Slide

@brucel
https://ada.is/contrast-widget/

View Slide

@brucel
What can you do?
• Learn the semantics of HTML. There are 120(ish) elements, that’s all!

• Run automated tests and go for low-hanging fruit, e.g. colour contrast

• Use HTML (and CSS) wherever possible.

• Make sites that work without JavaScript, then enhance with JS.

• Choose your libraries carefully.

View Slide

@brucel
tenon-ui.info
Bruce Approved!

View Slide

@brucel
react-bootstrap
https://react-bootstrap.github.io/components/navs/

View Slide

@brucel
What no ?
Bruce rejected.

View Slide

@brucel
http://marcosmoura.com/angular-material-sidemenu/

View Slide

@brucel
What no ?
Bruce rejected.

View Slide

@brucel
Share where possible

View Slide

@brucel

View Slide

@brucel
“The word jaywalk is not
historically neutral.

It is a compound word derived
from the word “jay”, an
inexperienced person and a
curse word that originated in
the early 1900s, and “walk”

https://en.wikipedia.org/wiki/
Jaywalking

View Slide

@brucel
http://www.commitstrip.com/en/2019/04/19/its-better-with-javascript/

View Slide

@brucel

View Slide

@brucel
“Developer Experience” Bait-and-Switch
We cannot continue to use as much JavaScript as is
now “normal” and expect the web to ﬂourish.

To get this ﬁxed, we need to confront the “developer
experience” bait-and-switch. Tools that cost the
poorest users to pay wealthy developers are bunk.

Alex Russell https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/
“

View Slide

@brucel
500MB data: hours worked
https://360.here.com/2015/06/03/oﬄine-navigation-really-matters-500mb-data-costs-week-wages/

View Slide

@brucel
How To Make Internet Affordable
Even with more phones than ever before, the cost of
Internet is a major obstacle. In Nigeria, the data
needed to watch just 2 minutes of online video a
day can cost more than sending a child to school
for a month.
https://webwewant.org/news/how-to-make-internet-aﬀordable/
“

View Slide

@brucel
The Baseline Costs of JavaScript Frameworks
Your React application will never load faster than about 1.1
seconds on an average phone in India, no matter how much
you optimize it. Your Angular app will always take at least
2.7 seconds to boot up.
Ankur Sethi, Nov 2018

https://blog.uncommon.is/the-baseline-costs-of-javascript-frameworks-f768e2865d4a

“

View Slide

ICT access by population
Total  
global population
~7.4 billion
High-speed 
internet
1.1 billion
Total  
internet users
3.2 billion
Mobile phones
5.2 billion
Within
mobile coverage
7 billion
World Bank: Digital Dividends 2016

View Slide

View Slide

Developing countries are home to 94% of the
global offline population.
“
- State of Connectivity 2014, internet.org

View Slide

Making the internet universally accessible
and affordable should be a global priority.
“
World Bank

View Slide

Courtesy of Hesperian

View Slide

View Slide

If you want to liberate a country, give them
the internet.
“
- Wael Ghonim, Egyptian internet activist

View Slide

View Slide

an increase in Internet maturity similar to the
one experienced in mature countries over the
past 5 years creates an increase in real GDP
per capita of $500 on average during this
period.
“
Internet matters
- The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)

View Slide

It took the Industrial Revolution of the 19th
century 50 years to produce the same result.
“
Internet matters
- The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)

View Slide

View Slide

@brucel
• [image of a crowd of people - terrible stock
photo?]

View Slide

@brucel

View Slide

View Slide

THANKS ’N’ SNOGS!
brucelawson.co.uk
@brucel
* Other Bruce Lawsons are available.
** known to cause nausea in some jurisdictions.

View Slide

View Slide

Goto Copenhagen

Goto Copenhagen

bruce lawson

More Decks by bruce lawson

Other Decks in Technology

Featured

Transcript