Skip to content. Adrian Roselli Consultant, Writer, Speaker

All Posts Tagged: pattern

Tweaked ‘Better Method’ YouTube Embed

Last week Amit Agarwal posted a great tutorial on making YouTube embeds less of a burden for users, A Better Method for Embedding YouTube Videos on your Website. The abstract: Learn how to embed YouTube videos responsively and without increasing the page load time. The embeds are light and mobile…

Posted:

Tags: css, html, JavaScript, pattern, usability, UX, YouTube

Punch-Out Avatar

I built this on a whim after seeing some terrible examples on Stack Overflow, so unlike other demos I build there was no immediate application. That means it may or may not be useful as-is. Variation For this post I have forked each variation of the original and added a…

Posted:

Tags: accessibility, css, html, pattern, print, standards, WHCM

Chromatic Web Fonts, Redux

In 2012 I wrote about how to use chromatic type with pseudo-elements. My objective back then was to minimize the hassle of a content author using a WYSIWYG while also not overwhelming a screen reader user with triplicate content. Pseudo-elements achieved that, though support for pseduo-elements in screen readers is…

Posted:

Tags: accessibility, ARIA, css, design, fonts, html, pattern

Keyboard and Overflow

Imagine that as a user you regularly use the keyboard for non-data-entry tasks. Think about how frustrating it is to have to grab the mouse to hover over something on the screen just to see it. Now imagine that you are a keyboard-only user. That problem can be addressed somewhat…

Posted:

Tags: accessibility, ARIA, css, html, JavaScript, pattern, tables, usability, UX

Responsive Progressive Accessible Vanilla Search

I received a design for a project recently that called for a search field hidden behind a single icon — no visible label text, no visible field, no submit button. While I’ve seen this pattern on sites repeatedly, I feel they generally get it wrong. Relying on bloated HTML and…

Posted:

Tags: accessibility, pattern, standards, touch, usability, UX

Where to Put Your Search Role

I really spent far too much time re-thinking that title. Please note that the HTML, ARIA, and WCAG specifications are changing, as well as the HTML validator. Please see the update below to get the latest as of December 16, 2015. If you have a search form on your site…

Posted:

Tags: accessibility, ARIA, html, pattern, standards, W3C, WAI, WCAG

Show/Hide Script-Free (Which Means CSS Only)

There are many ways to hide and show content with a click (or tap or poke or key-press or …). Many of them have JavaScript under the hood and nearly all of them have dependencies on third-party libraries and/or CDNs. This may be fine when you already have to load…

Posted:

Tags: accessibility, css, JavaScript, pattern, usability, UX

Announcing My Ring Warmer App

Animation showing the Ring Warmer in action. If you have to wear a ring, then perhaps you have experienced the discomfort of putting a cold ring on your finger (maybe in the morning in a cold house). I decided that I could do something about that using the only tool…

Posted:

Tags: apps, css, html, JavaScript, mobile, pattern, touch

Make Getty Embeds Responsive

In my post What to Consider before Using Free Getty Images one of the many caveats I outlined was the lack of responsive support in Getty’s iframe code. Of all the issues I raised, this one is actually pretty easy to get around. Background While the other points still preclude…

Posted:

Tags: css, html, JavaScript, mobile, pattern, usability, UX

Tracking When Users Print Pages

A few months ago I had the pleasure of writing a piece for .net Magazine about print styles (Make your website printable with CSS). It was posted to .net’s web site last month and received an overwhelming one comment. That comment, however, summed up something I hear all the time:…

Posted:

Tags: analytics, css, pattern, print, standards

Calling QR in Print CSS Only When Needed

For those of us who put together print styles for our sites, we’ve probably tossed around the idea of embedding QR codes so that users can quickly get back to a page they have printed. In the hardcopy version of my article for .net Magazine, “Make your website printable with…

Posted:

Tags: css, design, pattern, print, QR, standards, usability

ARIA Tabs

Last week I spent my Friday afternoon trying to get my head around how to apply ARIA properly to a tabbed interface. I even got so far as to map it out on my whiteboard and snap a photo so I could mull it over during the weekend. And then…

Posted:

Tags: accessibility, ARIA, css, html, JavaScript, pattern, standards, W3C, WAI

Search icon Used in the search form as a button. Search icon Used in the search form as a button. Information icon Lower-case 'i' in a circle. Checkmark icon Symbol showing a checkmark. Alert icon Exclamation mark within a triangle.