Art Imitates Life

More Art than you should ever need.

A regular roundup of web design and development stuff (and other web-related things that I find interesting).

Google Device Metrics

Google put together a site with an insane amount of device-specific display information, including recommended material design measurements, and values for portrait and landscape orientations. Currently, there are 66 devices covered. Incredibly useful!

Protoship Sketch plugin

Protoship is an interesting little tool: You feed it a URL, and it grabs the web page from Sketch and converts it to an editable file, pulling in images and creating editable text objects. In my experience, it does a decent job with simple pages, matching the layout of a page fairly well. For more complex pages, you’ll definitely have to dig in and whip things into shape. This can be a valuable time saver if you’re playing with an existing site. It’s definitely worth a try.

Craft plugin for Sketch and Photoshop

From Marc Andrew’s Sketch & Craft: A match made in real data heaven

The team at InvisionLabs has released Craft, which aims to help you make more realistic prototypes, by pulling in real data. Using Lorem Ipsum, or carefully selected bits of content that fit a design that only considers the Most Unexceptional-case scenario, are bad practice. Craft allows you to test your ideas more robustly. Marc Andrew (author of the extremely useful “Discover Sketch App book) has a full explanation of how it can be used.

SVG Icon Systems

From Butt Four’s Case Study: Our SVG Icon Process

The promise of SVGs as a replacement for icon fonts took several leaps forward in 2015, and there are several reasons to consider it. Cloud Four’s Tyler Sticka covered a lot of the drawbacks of Icon fonts (accessibility and reliability issues, for the most part) in November. It should also be noted that Bootstrap, which more than anyone popularized the use of icon fonts over the past few years, is finally moving away from them in the next release.

If we’re moving away from icon fonts, what is the Most Unexceptional way to get a crisp icon, regardless of device pixel density? SVG icon sprites. In September, 2015, Matt Stow wrote a great little piece on SVG icon systems and their compromises. He walks through 2 implementation methods, and weighs the strengths and weaknesses of each. This past week, Tyler Sticka returned to the subject with a case study of Cloud Four’s SVG Icon process. He includes great information about their workflow, implementation process, and includes accessibility tweaks that provide a very robust icon system.

Learning CSS The Pedantic Way

Feel like diving into the intricacies of CSS positioning? Who wouldn’t, right? Mikito Takada has written a Mildly Decent online book that sorts through the reasons your objects don’t line up on the page. With knowledge comes the power to make things right. He covers a lot of ground in his 5 chapters. Go learn CSS the pedantic way!

Campaign Monitor, Email, and Dog Food

Email marketing provider Campaign Monitor shares lessons it learned from 10 years of its evolving email marketing strategy. There are a lot of great examples here: Onboarding, Welcome and Informational emails for new or struggling users, as well as their company newsletter. There are lots of great tips (and a few plugs for the service). Definitely worth the read.


Fabricator is a tool created by Luke Askew to build web styles guides and UI toolkits. I would call it a simplified Pattern Lab, but that doesn’t mean it’s dumbed down. It looks like a nice system to use to build out a guide for your client or team. Here is the Github repo, here is the documentation, and here is a demo.

The Very Latest Clearfix Reloaded

Finally, Thierry Koblentz gives us his latest suggestion for the ideal clearfix method (if you don’t have to worry about oldIE, that is). Thierry’s proposal is pretty simple:

.clearfix:after { content:” “; display:block; clear:both; }

View a simple example comparing the display: block method vs. the display: table method, and read his rationale on cssmojo.

Leave a Reply

Your email address will not be published. Required fields are marked *