Interactive HTML Trees with no JavaScript and no CSS

by @edent | # # | 3 comments | Read ~2,685 times.
A Twitter conversation rendered as HTML.

Many text based conversations threads can be visualised as a tree. This is a follow-up to yesterday’s blog post about Twitter conversation trees. Mailing list archives often use nested <ul> to show a conversation. That’s fine, but has the major drawback of not being interactive. There’s no way to collapse a branch of a tree…

Continue reading →

Better Keyboard Buttons in CSS

by @edent | # # # # | 2 comments | Read ~973 times.
A pet cat typing on a computer keyboard.

Here’s a simple scrap of CSS which you can Ctrl+C and Ctrl+V kbd { border: .1em solid #aaa; border-radius: 15%; display: inline-block; padding: .1em .5em; background: linear-gradient(180deg, #fff, #fff, #fff, #ddd); user-select: none; cursor: pointer; color: #000; font-weight: bold; } kbd:hover { background: linear-gradient(0deg, #fff, #fff, #fff, #ddd); } Features Semantic use of the kbd…

Continue reading →

Semantic Dates in Wagtail Blog Posts

by @edent | # # #
The HTML5 Logo.

(Written because I couldn’t find an easy guide online.) Here’s the code (formatted for readability): <time datetime=”{{page.first_published_at|date:”c”}}”> {{page.first_published_at|date:”j F Y”}} </time> You can also use last_published_at if it is a page which has been updated. WHY?!??! Semantics. HTML5 contains the <time> element. The contents of it show up as normal running text, but the metadata…

Continue reading →

Improving WordPress Video Accessibility

by @edent | # # # # # | 2 comments
A video with an easy to see play button.

In order to provide a video playback UI, WordPress uses the excellent MediaElement library. Recently, I discovered a slightly annoying flaw – I couldn’t see the play button! Here’s a screenshot of the video UI. In the middle of this screenshot is a white play button. I have trouble seeing it, because the video’s background…

Continue reading →

Default Ordering Of Title Options

by @edent | # # # # | 11 comments | Read ~143 times.
An extremely long title list which includes Right Honourable, Wing Comander, Dame, etc.

I was signing up to a website the other day, and it wanted to know my title. Here are the options it offered me: Look, I get it. If I’m ever daft enough to undertake a PhD and masochistic enough to complete it – I am going to demand that everyone addresses me as Doctor…

Continue reading →

How not to use the label element

by @edent | # # # | 3 comments | Read ~532 times.
HTML Source Code.

HTML is magic. It comes with all sorts of great usability and accessibility features. But people often ignore them or misuse them. Take a look at these checkboxen: If you click on this label, nothing happens. If you click on this label, the checkbox will toggle This is important. Tapping on tiny squares is hard…

Continue reading →

How to fake Progressive WebP Images

by @edent | # # # # | 9 comments | Read ~130 times.
Extremely fuzzy photo.

WebP is the hip new image format on the scene. It offers unrivalled image compression at superior visual quality. But, in my opinion, it is deficient compared to JPG in one significant aspect. It doesn’t have a progressive mode. Progressive mode is useful because it can quickly load a low resolution preview of an image,…

Continue reading →

This blog strips off for CSS Naked Day

by @edent | # # # # | 2 comments | Read ~172 times.
Firefox menu. Go to View, the Page Style, then No Style.

Half-a-dozen years ago, I proposed that web developers spend one day a year browsing without JavaScript. It’s a great way to see how the web works when things break. Similarly, April 9th is CSS Naked Day. A chance to throw off the shackles of good design, and see the raw beauty of your HTML. Today…

Continue reading →

Should panoramic images be part of the HTML5 specification?

by @edent | # # # # | 8 comments
360 view of the inside of the concert hall.

Noodling thoughts. The humble <img> element is one of the oldest parts of HTML. It allows you to put a static image in a document. Later revisions allowed for animated images – like GIFs. And the <map> element made parts of the image clickable. But what about interactive images? Like panoramas and photospeheres? Here’s a…

Continue reading →

Responsible Disclosure – John Lewis

by @edent | # # # # | 1 comment | Read ~693 times.
John Lewis Website with a big circle drawn on it.

The HTML5 specification is complicated. I’ve been an author on it, and even I couldn’t tell you all the weird little gotchas it contains. Between that and “idiosyncratic” browser engines, it’s a wonder the world wide web works at all. Let’s talk about the humble <meta> element. As its name suggests, it contains metadata about…

Continue reading →