A presentation at CSS Day + UX Special in in Amsterdam, Netherlands by Ire Aderinokun
CSSDay.NL 2018
Ire Aderinokun
E + Rey
!
Who are the
“Next Billion Users” ?
Until now, developing for the web = developing for users like you
Until now, developing for the web = developing for users like you
"
In 1995,
The average cost of computers
was
~
USD 10,000
In 1995, Only 0. 4% of the global population had access to the internet
$
In 1995, Access to assistive technologies was essentially non-existent
Techno W1 Android 7.0 Nougat NGN 16,000 ~ USD 45 Lenovo Ideapad Windows 10 NGN 90,000 ~ USD 250
% of Global Population with
Access to Internet
0%
15%
30%
45%
60%
1995
2017
51.7%0.4%
Assistive Technologies
Next Billion Users
Building for the NBU Accessibility Internationalisation Performance … … … …
Performance
–
2014 report by McKinsey & Company
“In Nigeria, the average person has to
work
28 hours
to earn enough to use
500 MB of data.
In Germany, it’s only
1 hour
”
Internationalisation
Accessibility
CSS for the Next Billion Users
4 things • Is CSS the right tool? • Selecting HTML • CSS Declarations • CSS Delivery
1
Is CSS the right tool?
– A Wise Carpenter “If you only have a hammer, you tend to see every problem as a nail”
“CSS-Only” Functionality
Use the Right Tool Content Presentation Functionality
When to use HTML input[type=“password”] !" after { content: “Enter your password” }
When to use HTML < label for=“password”>Enter your password</ label> <input type=“password” id=“password”>
When to use JavaScript
When to use JavaScript
2
Selecting HTML
. element { color: #bae; }
Use globally-aware
naming conventions
Naming Conventions .text- left { text-align: left; }
Naming Conventions [dir=“ltr”] .text- start { text-align: left; } [dir=“rtl”] .text- start { text-align: right; }
margin-block-start : 10px ; flex-direction: row | row- reverse | column | column-reverse ; flex-wrap: nowrap | wrap | wrap-reverse ; justify-content: flex-start | flex-end | center | space-between | space-around |space- evenly ; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex- end | center | space-between | space-around | stretch ; display: grid | inline-grid ; text-align: start ; align- content: center | start | end | space-between | space- around | space-evenly ; justify-items: center | start | end | stretch ; align-items: center | start | end | stretch ; justify-self: center | start | end | stretch ; align-self: center | start | end | stretch ;
Beware of
expensive
selectors
a[href=“https://bitsofco.de”] a:not[href*=“cssday.nl”] ul li:nth-child(3) a ul li:last-child a #boc
Selector Efficiency 1. ID, e.g. #foo
Class, e.g. .foo 3. Tag, e.g. div
Adjacent Sibling, e.g. header + main 5. Child Combinator, e.g. ul > li 6. Descendant, e.g ul li 7. Universal, e.g. *
Attribute, e.g. a[href=“https://bitsofco.de”] 9. Pseudo-classes & pseudo-elements, e.g. a:visited Fastest Slowest
#boc ul li:nth-child(3) a ul li:last-child a a[href=“https://bitsofco.de”] a:not[href*=“cssday.nl”] Fastest Slowest
Use Performant Naming Conventions
<div class=“button icon primary”> <div class=“button primary”> button:not(.icon).primary { … }Use Performant Naming Conventions
<div class=“button button--icon button--primary”> <div class=“button button--primary”> .button { … } .button--primary { … }3 CSS Declarations
.element {
color: #bae;
}
Can I Use
[insert-awesome-thing] ?
Do I need to
use
[insert-awesome-thing] ?
Float-Based Layout
.row {
margin: 0px (-$small-space);
}
.row:after {
display: block;
clear: both;
content: "";
}
.column {
position: relative;
width: 100%;
min-height: 1px;
padding: 0px $small-space;
}
.column,
[dir="rtl"] .reverse .column {
float: left;
}
Float-Based Layout
.row {
margin: 0px (-$small-space);
}
.row:after {
display: block;
clear: both;
content: "";
}
.column {
position: relative;
width: 100%;
min-height: 1px;
padding: 0px $small-space;
}
.column,
[dir="rtl"] .reverse .column {
float: left;
}
It just works
™
Do I need to use
[insert-awesome-thing] ?
Actually, yes.
Grid-Based Layout .group.cards { display: grid; grid-template-columns: repeat(1, 1fr); @media (min-width: $card-min-width) { grid-template-columns: repeat(auto-fit, minmax($card-min-width, 1fr)); } }
Use feature queries! %
.group.cards {
!" Fallback styles here #$
} @supports (display: grid) { .group.cards {
!" grid-based layout #$
} }
Choosing performant
CSS properties
The “Cr ! cal Rendering Path”
Changes to CSS can
re-
trigger
stages of the
cr
!
cal rendering path
Animating the “top” property
Animating the “transform” property
Respect end-user preferences
Reduced-motion .animated { animation-name :
3 s infinite alternate slideIn ;
} @media ( prefers-reduced-motion: reduce ) { .animated { animation: none; } }
!important
body {
font-size: 8px
!important
;
}
Our !important declarations will override everything except user- defined !important declarations
Progressive Enhancement div { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5); }
4 CSS Delivery
CSS is a
render-blocking
resource
Solu tions Modularising CSS Preloading CSS
Modularising CSS 1. Loading CSS based on media types 2. Inlining Cr ! cal CSS 3. Styles in the <body>
src=“mobile.css”>
<link rel=“stylesheet” media=“(min-width: 600px)” src=“desktop.css”> 1. Loading CSS based on media types 2. Inlining Cr ! cal CSS 3. Styles in the <body>loadCSS(“full.css”);
</script> </head> 1. Loading CSS based on media types 2. Inlining Cr ! cal CSS 3. Styles in the <body>Preloading CSS 1. Preload Link 2. HTTP/2 Push
<FilesMatch ".html$"> Header set Link “</css/styles.css>; rel=preload; as=style" <FilesMatch> 1. Preload Link 2. HTTP/2 Push
Let’s Review ✅ Is CSS the right tool? ✅ Selecting HTML ✅ CSS Declarations ✅ CSS Delivery
Next Billion Users
Your Billion Users
Thank you! ireaderinokun.com
bitsofco.de
@IreAderinokun
There’s been a lot of talk lately about developing for the “next billion users”, which essentially means targeting users who are coming online for the first time in developing countries. This talk will be about different ways we can write CSS for the “next billion users”. I will talk about my experience developing websites for users in Nigeria and cover areas such as performance, accessibility, and progressive enhancement.
Here’s what was said about this presentation on social media.
I've been following @ireaderinokun's blog for the longest time and now i get to see her talk in person 💃#cssday pic.twitter.com/foWTLQQdlu
— HJ Chen @ CSS Day 🇳🇱 (@hj_chen) June 15, 2018
👉 Developing for the web used to = developing for yourself and people who look like you. 👈
— Jenny Shen @ #cssday 🇳🇱 (@jennyshen) June 15, 2018
Now, technology and assisting technologies are becoming more affordable and accessible.
Let's design and develop for the next billion users! — @ireaderinokun#cssday pic.twitter.com/SW6wleXkin
Wow. "In Nigeria, the average person has to work 28 hours to earn enough to use 500MB of data. In Germany, it's only 1 hour." - 2014 Report by McKinsey & Co. via @ireaderinokun #cssday pic.twitter.com/inaH0ZYtLP
— Greg Whitworth (@gregwhitworth) June 15, 2018
CSS for the “next billion users” by @ireaderinokun at #cssday. #sketchnotes pic.twitter.com/c7LqZv7Kb6
— Stephanie Nemeth (@stephaniecodes) June 15, 2018
Slides from my talk today at @cssdayconf : "CSS for the Next Billion Users" are now available on @benotist !https://t.co/dGvrdL19WG
— Ire Aderinokun (@ireaderinokun) June 15, 2018