David Leggett (TheLeggett)

New Post: 4 Tips and Tricks for more Legible Content

Today I published a new article over on the UX Booth. If you’re interested in a few interesting ways for creating more readable copy, go check out Tips and Tricks for more Legible Content.

Readability & legibility are both areas of interest in accessibility and typographic design, and many resources exist that attempt to define what constitutes well designed copy. In this post, we go over a few commonly overlooked and newer ways to implement more legible type on the web.

This post includes a very handy trick that I believe should be used more at this point in time by many web designers, where a 1px (or greater) text-shadow is used on custom fonts to make type render more consistently in browsers like Google Chrome on the Windows Operating System.

I am your enemy.

I am your enemy, the first one you’ve ever had who was smarter than you. There is no teacher but the enemy. No one but the enemy will tell you what the enemy is going to do. no one but the enemy will ever teach you how to destroy and conquer. Only the enemy tells you where he is strong. And the rules of the game are what you can do to him and what you can stop him from doing to you. I am your enemy from now on. From now on I am your teacher.

Orson Scott Card, Ender’s Game

Considerations for Mobile Design, Parts 1-3

I recently completed my series on the UX Booth, “Considerations for Mobile Design“. Ultimately, this is a topic of great interest to me, and this series was a great way to submerge myself in different facets of mobile web design.

The three parts of the series were split into the following segments:

  1. Part 1: Speed

    The introduction to the series identified constraints in mobile design imposed by bandwidth, download and upload speeds.

  2. Part 2: Dimensions

    This section attempts to establish common limitations across groups of devices based on resolution and physical size. In addition, solutions for serving specific styles to groups of devices are offered, and analyzed.

  3. Part 3: Behavior

    Perhaps the least complete of the sections, this article attempts to show how users behave differently on handheld devices compared to desktops. At the same time, this area probably interests me most, but I believe much more testing will need to be done in regard to how gesture-based interfaces can be used in an acceptable way before the ideas explored here become more relevant.

Despite my interest in the subject, I’ll admit that the most fun part of the series was creating the artwork for it :)

Here are some of my favorite designs created for the series:

I even made a wallpaper from the Part 3 Artwork (1920×1200):

Wallpaper created from artwork for the Considerations for Mobile Design series on UX Booth

I hope that you’ll share your thoughts on the series over at the UX Booth if it’s a topic that interests you. We’re also looking for contributors to come guest post on the subject of mobile design. If you want to voice your thoughts on the matter, please visit our contribution page on the Booth!

CSS & jQuery Animated Parallax Bokeh Effect

Parallax Bokeh Animated Effect with CSS and jQuery

I’ve been spending a lot of my free time lately practicing motion design on the web. It’s a very interesting subject :)

This is a quick demo I put together the other day of an animated parallax effect being used as a website background. It is a little resource intensive, so probably not an elegant solution for sites that value performance on a wide variety of computers and devices.

I may return to this demo soon—I believe that by adding some opacity animations to the bokeh to make them glitter, I can make the overall presentation feel much more complete.