I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.


The New Defaults: A Sass Color Thesaurus

css / color

Estimated reading time: 2 minutes

The CSS named color system is notoriously bad: keywords are often difficult to remember (navajowhite), illogical (darkgrey actually displays lighter than dimgray) and/or visually questionable (lime and fuchsia verge on the bilious).

Until CSS custom named hues and variables are widely supported, preprocessors remain the best way to create your own custom color names. Defining site colors in Sass creates a cohesive color library that can be used to style content quickly and easily, with named colors that are significantly easier to remember and type than their hex equivalents. However, it can be burdensome to build a decent color library with a logical naming system.

Love Bike, Burning Man 2014
Truth is Beauty, Burning Man 2013
Believe, Burning Man 2014
Truth is Beauty, Burning Man 2013
Embrace, Burning Man 2014

Refresh page to randomize; mouseover or touch images for more info. Photographs by Trey Ratcliff.

Random Images With Flexbox & JavaScript

javascript / galleries

Estimated reading time: 2 minutes, 30 seconds

Human cognition is excited by small but distinct differences in experience, making randomized web page elements a simple and effective method for increasing user engagement on a site. It’s also an effect that is achieved very easily, with just a few lines of .

We need to be a little careful when we use the term “random”, however. Random site content really comes at three distinct levels:

Timelapse photograph of an ornate spiral staircase in the Vatican from above, showing visitors blurring and shrinking as they descend

Web Developer Reading List: Responsive Design

reading lists

Estimated reading time: 2 minutes

Like HTML, CSS, and design itself, responsive design is an ever-expanding set of technologies, techniques and best practices. This reading list is intended to provide an overview and introduction to RWD, while understanding that the field is constantly evolving and changing. Checking back frequently for new links and content and resources is strongly recommended. (You can also follow me on Twitter to be notified of any new resource updates).

This reading list is a little different from the others in that it is sub-divided into several parts. First, we explore the mobile and handheld world in general, and look at its attendant technological and design challenges, followed by the fundamentals of responsive design. Finally, I turn to specific problem areas in RWD, including videos, tables, and SVG, before concluding with a round-up of different techniques, technologies and use-cases.

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.