At Zoosk we have a UI component called a tooltip. It resembles a speech bubble and provides helpful information to our users. It appears when you either click on, tap on, or hover over another element.

We have many tooltips on our desktop and mobile websites, and they come in several variations. I discovered that each time I created a new one, I duplicated CSS properties that had been used for older tooltips. This inspired me to write some Sass mixins to speed up development and make it easier to customize our tooltip designs.

First iteration

Initially I came up with the…

I spent a few days watching Udacity’s accessibility course by Google to get a handle on basic accessibility techniques. It turns out that accessibility isn’t as daunting as it might sound. This article summarizes what I learned from this course. The goal is to teach web developers accessibility techniques when creating a new feature or product.

FYI Udacity’s course uses the following assistive technologies for its demos:

• ChromeVox
• Mac OS VoiceOver

Both of these tools are screen readers for users with sight impairments.

For additional reading on accessibility you can check out the following resources:

• W3C’s Web Content Accessibility Guidelines…

There’s a lot of debate on whether to use em or px for breakpoint units in media queries. A few years ago Luke Wroblewski demoed his site at An Event Apart using em breakpoints. When he increased the browser’s font size, the page morphed into a layout that better accommodated the larger text. The audience oohhed and ahhed, and I was sold on em-based breakpoints.

In Luke’s demo the page actually switched to its mobile design. If the breakpoints had been pixel based, the layout would not have changed to its mobile design. However, the text size, which was defined…

In the last 16 years I’ve never had a project that required custom styles for disabled inputs. I know this because when I worked on such a project last week I was pulling my hair out. Most of us in the business know that browsers like to render inputs in their own ways. My cross-browser testing showed that when you throw the disabled state into the mix, you can get a really big headache.

I created a CodePen demo of plain inputs to get screenshots of these cross-browser differences. …

Update: As of 11/18/19 I found that Chrome 78 and Firefox 70 no longer render the padding-right: 100% on the interstitial__line pseudo elements. This caused the pseudo elements to have no width, but changing the percent unit to vw works. The code in this article and the CodePen demo have been updated.

At Zoosk we often use a pattern we call an interstitial. It’s a word or short phrase flanked on the left and right by a line, and it vertically separates two sections or options on a page. …

As a CSS author I’ve typed many property-value pairs over and over again in different declaration blocks, and it gets really tedious. Our CSS developers here will tell you the same thing. Luckily we use Sass (and more specifically the SCSS syntax) so we’re able to group repeated properties together and call them in any block we want. These groups are called mixins.

One simple example is setting an element’s width and centering it on the page:

header {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
}

This is something we do a lot, so to make this implementation a bit…

As a CSS author I’ve typed many property-value pairs over and over again in different declaration blocks, and it gets really tedious. Our CSS developers here will tell you the same thing. Luckily we use Sass (and more specifically the SCSS syntax) so we’re able to group repeated properties together and call them in any block we want. These groups are called mixins.

One simple example is setting an element’s width and centering it on the page:

header {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
}

This is something we do a lot, so to make this implementation a bit…

Our Zoosk products support 27 languages, so as one can imagine, the variety of translated text lengths can impact the user interface. Consider the following text in four languages:

• Want more views? Get 75 Boost!
• ¿Quieres recibir más vistas? ¡Obtén 75 Destacados!
• Vous voulez plus de consultations ? Recevez 75 coups de boost !
• Хотите больше просмотров? Поднимите свой профиль 75 раз!

When we build the UI with HTML and CSS, we must ensure the page elements flow and resize appropriately with strings in other languages. This requirement can be challenging for the following reasons:

• Oftentimes while we’re working on…