Jim Nielsen currently lives in NYC working as the lead designer for an enterprise software startup. As much as he loves the city, he misses the red rocks of his boyhood home and the beauty of the desert southwest.
He loves to ski, golf, fish, read, eat street tacos, learn new things (currently he's into calligraphy), and take road trips immersed in the music of Bob Dylan. However, his true passion is to analyze complexity and transform it into simplicity.

HTML is at the core of the web. Sometimes, in the pursuit to make things look beautiful using CSS, we forget that. If you’ve ever used Sass (or a CSS compiler in general) , you’ve probably seen your site’s styles break due to a compile error. But before you rush to fix the error you just introduced, take this as an opportunity to analyze and enhance the core of your site: the HTML.

HTML is at the core of the web. Sometimes, in the pursuit to make things look beautiful using CSS, we forget that. If you’ve ever used Sass (or a CSS compiler in general) , you’ve probably seen your site’s styles break due to a compile error. But before you rush to fix the error you just introduced, take this as an opportunity to analyze and enhance the core of your site: the HTML.Read More…

Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.

Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.Read More…

When working with CSS preprocessors like Sass, Less (or any other programming language for that matter) you're going be leveraging the power of variables. However, if you spontaneously create your variable names as you code, the odds are your naming convention will lack cohesiveness. You should think about organizing your variable names (and project for that matter) modularly. This will bring structure and unity to your project as a whole, making it easier to understand and navigate the whole thing.

When working with CSS preprocessors like Sass, Less (or any other programming language for that matter) you're going be leveraging the power of variables. However, if you spontaneously create your variable names as you code, the odds are your naming convention will lack cohesiveness. You should think about organizing your variable names (and project for that matter) modularly. This will bring structure and unity to your project as a whole, making it easier to understand and navigate the whole thing.Read More…

As designing in the browser becomes more popular (and convenient), the need for helpful design tools is increasing. One set of tools that is becoming quite helpful revolves around filler content. Currently, a variety of resources exist to aid designers who need filler content, whether it be text or images.
Because a lot of website design used to take place in Photoshop, manually copying/pasting text from the web was the best method for 'filling in' a design with dummy content. However, now that a lot of website design takes place in the browser, why not have the computer do all 'filling in' work for you?
We'll cover your options for filler content in this tutorial. Everything from copying/pasting static text and images to dynamically generating them.

As designing in the browser becomes more popular (and convenient), the need for helpful design tools is increasing. One set of tools that is becoming quite helpful revolves around filler content. Currently, a variety of resources exist to aid designers who need filler content, whether it be text or images.
Because a lot of website design used to take place in Photoshop, manually copying/pasting text from the web was the best method for 'filling in' a design with dummy content. However, now that a lot of website design takes place in the browser, why not have the computer do all 'filling in' work for you?
We'll cover your options for filler content in this tutorial. Everything from copying/pasting static text and images to dynamically generating them.Read More…

There's a lot that goes into creating a web site these days. We're now building websites using HTML5, CSS preprocessors, APIs, custom typography and more. Our design challenges include responsive architecture, resolution independence and multi-device interaction support. In this article, we'll build a single page portfolio that covers aspects of all these techniques.

There's a lot that goes into creating a web site these days. We're now building websites using HTML5, CSS preprocessors, APIs, custom typography and more. Our design challenges include responsive architecture, resolution independence and multi-device interaction support. In this article, we'll build a single page portfolio that covers aspects of all these techniques.Read More…

One popular navigation design pattern for the responsive web is collapsing your website's navigation into a select menu. However, representing hierarchy or categorical distinctions in select elements often leads to butchered HTML with manual hyphens and lots of &amp;nbsp; spaces. In this tutorial we'll introduce you to a somehwat obscure HTML tag called optgroup which will provide you with an easy (and semantic) way of grouping related content in select menus.

One popular navigation design pattern for the responsive web is collapsing your website's navigation into a select menu. However, representing hierarchy or categorical distinctions in select elements often leads to butchered HTML with manual hyphens and lots of &nbsp; spaces. In this tutorial we'll introduce you to a somehwat obscure HTML tag called optgroup which will provide you with an easy (and semantic) way of grouping related content in select menus.Read More…

While the world's going bonkers for touch-controlled interfaces, this article will focus on the more traditional input method of the mouse. I'll suggest an approach of progressive enhancement for handling interaction design; more specifically, an overview of the CSS cursor rule.

While the world's going bonkers for touch-controlled interfaces, this article will focus on the more traditional input method of the mouse. I'll suggest an approach of progressive enhancement for handling interaction design; more specifically, an overview of the CSS cursor rule.Read More…

Achieving pixel perfection when designing UI elements can be simple thanks to Photoshop's "snap to pixels" feature. Unfortunately, this feature is not available for the ellipse tool - creating crisp, pixel-perfect circles can therefore require additional attention to detail. I'm going to let you in on a little secret which will make "snap to pixels" available when creating circles..

Achieving pixel perfection when designing UI elements can be simple thanks to Photoshop's "snap to pixels" feature. Unfortunately, this feature is not available for the ellipse tool - creating crisp, pixel-perfect circles can therefore require additional attention to detail. I'm going to let you in on a little secret which will make "snap to pixels" available when creating circles..Read More…

Building and debugging websites and web applications for mobile devices can be a hassle. On the desktop we have powerful debugging tools; most browsers have a web inspector of some kind. But we don't have those tools for devices like the iPhone and iPad … that is, until now!

Building and debugging websites and web applications for mobile devices can be a hassle. On the desktop we have powerful debugging tools; most browsers have a web inspector of some kind. But we don't have those tools for devices like the iPhone and iPad … that is, until now!Read More…

As effective as an icon's metaphor may be, truly powerful icons get strength from their universal recognizability and conventional usage — a standardization of sorts. We'll discuss icon standardization more in this article and then provide suggestions to a few current icon standardization movements which you can explore and incorporate into your own projects.

As effective as an icon's metaphor may be, truly powerful icons get strength from their universal recognizability and conventional usage — a standardization of sorts. We'll discuss icon standardization more in this article and then provide suggestions to a few current icon standardization movements which you can explore and incorporate into your own projects.Read More…