Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven’t yet. The concept is inspired by Jeremy Keith’s links and CSS-Tricks, among other things. Enjoy.

Accessibility: Allow users to control their environment

Opening links in a new window [or tab] allows users to explore related materials without losing contact with the originating site; removing link underlines makes pages cleaner and easier to read because underlines are distracting and interfere with letterforms; and creating fixed-width pages restricts line length so users are not forced to read long lines of text. However, each decision has the potential of causing usability problems for some users: When links open in a new window, users who rely on the back button to navigate the Web will not have access to that functionality; when links are not underlined, users who cannot distinguish colors may not be able to identify links; and when pages are set to a fixed width, users who need to enlarge text will be forced to read narrow text columns.

Tags: 

CSS Writing Modes

You can use a little-known, yet important and powerful CSS property to make text run vertically.

A screenshot of a page featuring a photo of Octavia Butler, with the text "Octavia Butler" running down the right edge, starting at the top and going down the page.

Or instead of running text vertically, you can layout a set of icons or interface buttons in this way. Or, of course, with anything on your page.

[…]

If you do want a bit more of a taste, look at this example that adds text-orientation: upright; to the mix — turning the individual letters of the latin font to be upright instead of sideways.

A collage of photos of a dog on the right, with the text "winter" running down the left side, with letters stacked one on top of another.

CSS

h1 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: -25px;
}

Tags: 

Don't Re-Create Browser Features (Text resize widgets, etc.)

I built text sizing widgets for years, every damn site. I was so proud of them too. It was a way of showing I care about users. It was all ego. As soon as I could start tracking clicks on those widgets I found they were not used. Even on sites I built for low vision communities.

Instead, a good design with non-hardcoded typefaces that is responsive and does not disable zoom was all I needed. In short, good development techniques and best practices. That handled most of my edge cases just fine. For the remainder, a little documentation in the form of simple, contextual help text.

Notice I am not referencing assistive technology. For the most part, those users don’t need your widgets, they have already obtained tools to work around a non-inclusive web.

[…]

Instead of custom widget, maybe help educate users on how to use their own web browser. Perhaps link to, or offer as pop-up help, quick instructions on how to scale text in the user’s current browser.

Now you will have educated a user. You will have armed a user to have a better experience across the whole of the web. You will have stopped selfishly building a widget for just your users and contributed to empowering all users.

What could be more inclusive than that?

Tags: 

Fun with Staggered Transitions - Cloud Four

I was prototyping a sliding view transition between nested levels of navigation:

While this sort of transition had worked well for past projects, it didn’t feel quite right for this one. I wanted it to have a little more personality, to feel like it was organically reacting to the item you selected.

I thought it might be cool to stagger the animation, so the selected item began moving first, with its siblings following as if tethered together:

Tags: 

Fluid Type on CodePen Blogs

It became more popular to “go fully responsive” with layouts, where widths were largely in percentages, so that you get to use as much room is available at any given screen size. To a point, anyway.

You can also “go fully responsive” with typography, in a sense. There are a number of Pens by Mike Riethmuller that tackle things like fluid type size, fluid modular scale, and even fluid vertical rhythm.

It’s worth reading up on Mike’s technique here, but a distilled Sass version is like:

Sass

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}
 
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);
 
  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
 
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }
 
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}
 
$min_width: 320px;
$max_width: 1200px;
$min_font: 16px;
$max_font: 24px;
 
$mod_1: 1.2; // mobile
$mod_2: 1.5; // desktop
 
html {
  @include fluid-type($min_width, $max_width, $min_font, $max_font);
}
 
h1 {  
  font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h2 {  
  font-size: $mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h3 { 
  font-size: $mod_1*$mod_1 *1rem;
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font);
}

Tags: 

Jessica's Client Email Helper

Negotiating incoming project terms over email is difficult for even the well-seasoned professional. I’ve created this handy tool to help you say “no” to free and low-budget work and to help ask for more favorable contract terms before the start of a project. I tried to make it as comprehensive and flexible as possible, but every creative industry is a bit different so feel free to adapt my words to best suit your personal situation.

A screenshot of Jessica’s Client Email Helper, showing the different options for client and budget, along with the resulting email template.

Tags: 

Pages