demosthenes.info

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.

Photograph of the Coachella main stage at night, taken in 2014

Preflight Your Video For Delivery in HTML5

html / multimedia

Estimated reading time: 5 minutes

Since my fullscreen video web page background article was published, some readers have commented that video content does not appear on their pages when they use the code in their own projects. When I’ve had the opportunity to test the pages, the issues have been due to poor encoding or delivery of the video, not the CSS code.

To address this, I thought it might be useful to have a list to test video content during site production. Think of this as a web video quality control process, one that attempts to guarantee that HTML5 video will be delivered smoothly to modern browsers.

I’d suggest the following steps:

Track24 Ghosts III
AlbumGhosts III
ArtistNine Inch Nails
Time00:00

Making An Audio Player With HTML5, Part 2: Prototyping

html / multimedia

Estimated reading time: 5 minutes

There are two approaches to making almost anything. The first is to dive in head-first, building from the top down, squirrelling into problems as they are found and hoping you’ll get everything right. The second is to create a series of simple test cases: building upwards, proving each step before using the work to generate a final, complete piece.

There are advantages to both methods, but the second tends to yield better results. I’ll demonstrate that approach here, in building the initial prototype of the web audio player I introduced in part 1 of this series.

The Humble Button Element

html / elements

Estimated reading time: 3 minutes, 30 seconds

Web developers will often use <button> elements interchangeably with or <div> and <span> tags styled to look like buttons, but the reality is that each element has its own specialized function and role.

While there are always exceptions, current best practices could be defined as:

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.