As a designer one of my jobs is to recognise patterns. Small design- and code-patterns that get used again and again on every project. Every time I get to a new pattern I stop and ponder how to mark it up. Accessibility is important for me, but I often find it unclear what’s best practice for these patterns.
This is a short list of some elements I wish existed in HTML. By officially becoming HTML elements, these patterns would then be more likely to be marked up for accessibility. They would also be marked up more consistently — and frankly they’d also be easier to talk about, since we’d all use the same names for them.
Filter
The first pattern I think of is an element that filters or sort the rest of the content. You’ve probably used this on a webshop sorting from cheapest to most expensive. Or most popular to least popular. Or to filter by brand. Or color. I think you get the gist. Usually these filters are just marked up with a simple div around them. My proposal is something along the lines of the snippet below, just to make it clearer that some content is filtering another block of content. I guess there should also be some kind of indication if it is filtered or not, but I’m not sure how this is best solved.
<filterfor="product-list">
However you would like to filter the content. Select, radio-buttons etc.
</filter><ulid="product-list"><li>The content you are filtering</li></ul>
Select
“But we already have the <select>-element”. Fair point. I often find myself wishing the Select element was more flexible. Maybe I want to add a flag to a list of countries, or maybe two lines on top of each other like an account-name or an account-number. My proposal here would be that you could actually use spans, images and divs inside the select-element. I guess this could cause headaches for creators of mobile browsers. But they are really smart people. They have created a browser. I guess they will find a way.
Imagine that you have a list of contacts with information about their names, addresses, telephone-numbers, and e-mails. Now place everything in a regular table and try to make it responsive. Yeah? Struggling, right? One solution is one of these fancy responsive tables, but what I want is to hide the columns that don’t fit on the screen and when you click each row it expands and show the rest. My hack for now is to use a <tbody> for each row and then place two rows inside that. One is the regular row and one is a row with just one column that is hidden but which appears when you click the first row in the <tbody>.
<!-- how I am doing it now --><table><tbody><tr><td>Visible</td></tr><tr><td>Hidden until you click on the row above</td></tr></tbody>
...
</table><!-- how expanding tables could work --><!-- thr = TableHiddenRow --><table><tbody><trfor="example"><td>Visible</td></tr><thrid="example"><td>Hidden until you click on the row above</td></thr>
...
</tbody></table>
Step-indicator
You are applying for a loan, or maybe you are filling out your tax report or answering a questionnaire. Each page has a lot of fields you need to fill out and every time you click ‘Next’ you hope you are done, but you just get more boxes to tick and fields to type in. Wouldn’t it be nice if there were some kind of common navigation that told you how far in the process you were? My proposal for this is something like <step current="2" of="6"></step>. The idea is that you can place what you want inside of it and style it however you like. The nice thing about this feature is that browsers could indicate subtly that you now are in a flow and how far through you are. Screen readers could for example say “step 2 of 6 of car loan“ reading the steps before the title of the page.
Carousel
Ahh. Carousel. Much hated. Much used. Much badly implemented. I guess there are as many people who know html as there are ways to code up a carousel. You have a wrapper, some content, some arrows maybe, and a navigation showing where you are. Imagine using a screenreader to browse a website and suddenly your screenreader stops midway through reading a description and starts on a new one, and a new one. If we just had some consistent markup this could have been avoided. I have no suggestions for how it would work, but it would be useful.
Expand
One pattern that comes up again and again is expand. An element that when you click it, shows more content. I thought quite a bit about how, in a perfect world, this should be marked up. Then I asked around, and it seems the world is perfect, after all. There actually is an ‘expand’ element being implemented in browsers today. Internet Explorer hasn’t caught up yet, nothing new there, but almost all the newest browser have implemented it:
<details><summary>Read more</summary>
Text that is hidden and appears when you click read more.
</details>
Do you have any ‘HTML elements’ that you lie awake at night, wishing existed?
Let’s talk about how you store your photos. Since you probably don’t use film anymore you need to store them somewhere digitally, and probably not just on your computer. You don’t want to risk all your images if your computer crashes or gets stolen.
I’ve gone through a couple of the cloud-storage solutions out there and compared them with each other.
iCloud and Google Photos have the best search. iCloud is probably a bit better because it has face-recognition
Google Photos has an amazing Assistant that creates albums, animations and adds filters etc. to your images automatically. It’s actually pretty good!
The Norwegian Jottacloud is a good competitor to the rest and the only solution that stores it’s files in Norway
My current setup
I sync my iPhone images with iCloud. I store the RAW-images from my camera on a Synology NAS that syncs the images to Amazon Cloud. This way I don’t have to store them on my computer, but has fast access to them at home. I use Adobe Lightroom as my image-organizer and Amazon Cloud more as just file-storage. Since all my pictures are RAW-files I sadly miss out on a lot of the great search-functionality that’s out there.
My dream setup
If Google Photos supported RAW-files and had a regular filesystem (so I could use it with Lightroom) I would pick that. Mostly because I love the Google Photos assistant.
What should I do if I just have images on my mobile phone?
Do you have an iPhone? Sync it with iCloud. It works great, is simple to use and works out of the box. It is however a bit more lock-in solution than Google Photos (and doesn’t have the assistant). Do you have an Android-device? Sync it with Google Photos. Are you switching between iPhone, Android or similar? Use Google Photos.
A last little tip
There is a clever app for macOS called Expandrive that can mount a lot of these cloud-solutions as a Network Drive. This way you don’t have to store the files on your computer, but they are accessible in the filesystem. It works great with Amazon Cloud Drive, Google Drive, Dropbox ++.
You can use fill: currentColor as a property in your svg-icons. That way they’ll inherit the color property of their parent. Especially useful for inline-icons.
Blend modes could get really useful for making a consistent image-style across images for clients that don’t have much photography-experience. Much like an instagram-filter. You could for example do like this to get a more washed out dark color on an image.
For performance you can use a black/white image with a colored gradient with blend-mode on top to make a nice effect.
By always writing just 0 instead of 0px, 0em or similar, Facebooks saves a lot of energy (and I guess money). This is something a preprocessor should do, but a nice reminder non the less. Facebook also detects which browser you are browsing from and sends just the correct browser-prefix for each browser.
You can save yourself a lot of trouble by using background-images instead of the <img> tag in certain situations. The <img> tag is nice to have as a fallback, but hidden via CSS.
You can use max-width: max-content; to specify the size of a figure element where you want the width of the figure to be defined by image-width.
You can specify language in HTML with the lang-tag and target this with CSS to get quotes-marks for different languages.
Eks: <HTML lang="no">
HTML[lang="no"]q{Quotes:'«''»';}
@media: print has support for orphans and widows with the syntax orphans: 3; and widows:3;. It is sadly not supported in regular CSS, but I guess it will come. Would be especially handy if we could use this on layout-elements.
Flexbox can be used as a kind of element-query. You can use it to break up blocks when there isn’t enough space instead of @media-queries.
Margin(left|right|top|bottom): auto; is used a lot for calculating distances in flexbox.
Flex overwrites width and float, so they can be used as fallbacks.
To get an evenly distributed spacing between menu-elements add display: inline-block; to the li and display: flex; and justify-content: space-between; on the ul.
You should think of flexbox as an addition. First do as you normally would, then add the extra perfection in form of flexbox.
As a fallback for browsers that don’t support flexbox you can use modernizr or wrap you flexbox-code in this:
@supports(flex-wrap:wrap){// instead of modernizr
}
order is used to specify the order of the elements when they break to smaller sizes. Default is 0, but you could also use minus-values.
I have added *-ck.js because that’s the default output from CodeKit for minified files. I’ve also added all CSS files since I just want to search through my SCSS.
You can write todos to yourself in your scss by adding this line where you need to remind yourself of something:
@warn"Add breakpoint here";
This way you get a nice warning each time you compile, listing out all your warnings. You could also use @debug instead of @warn. The difference is basically that you can turn warnings off with the --quiet command-line option or the :quiet Sass option, and that the warnings look a bit different:
This is how warnings and debug-notifications look in CodeKit
The first pattern I think of is an element that filters or sort the rest of the content. You’ve probably used this on a webshop sorting from cheapest to most expensive. Or most popular to least popular. Or to filter by brand. Or color. I think you get the gist. Usually these filters are just marked up with a simple div around them. My proposal is something along the lines of the snippet below, just to make it clearer that some content is filtering another block of content. I guess there should also be some kind of indication if it is filtered or not, but I’m not sure how this is best solved.
“But we already have the 
Imagine that you have a list of contacts with information about their names, addresses, telephone-numbers, and e-mails. Now place everything in a regular table and try to make it responsive. Yeah? Struggling, right? One solution is one of these fancy responsive tables, but what I want is to hide the columns that don’t fit on the screen and when you click each row it expands and show the rest. My hack for now is to use a 
You are applying for a loan, or maybe you are filling out your tax report or answering a questionnaire. Each page has a lot of fields you need to fill out and every time you click ‘Next’ you hope you are done, but you just get more boxes to tick and fields to type in. Wouldn’t it be nice if there were some kind of common navigation that told you how far in the process you were? My proposal for this is something like 
Ahh. Carousel. Much hated. Much used. Much badly implemented. I guess there are as many people who know html as there are ways to code up a carousel. You have a wrapper, some content, some arrows maybe, and a navigation showing where you are. Imagine using a screenreader to browse a website and suddenly your screenreader stops midway through reading a description and starts on a new one, and a new one. If we just had some consistent markup this could have been avoided. I have no suggestions for how it would work, but it would be useful.
One pattern that comes up again and again is expand. An element that when you click it, shows more content. I thought quite a bit about how, in a perfect world, this should be marked up. Then I asked around, and it seems the world is perfect, after all. There actually is an ‘expand’ element being implemented in browsers today. Internet Explorer hasn’t caught up yet, nothing new there, but almost all the newest browser have implemented it:
