Browser as design tool

---

The graphical browser turned 20 years old last year. NCSA Mosaic supported 256 colors images in gif format using the newly minted img tag. Designed as a project to structure and share academic content, The World Wide Web quickly evolved into a distribution hub for designs intended for the printed page. Static designs and image assets were downsampled and placed online as additional output.

The web browser of this decade has reversed this workflow — the web now pulls larger audiences and elicits greater design attention. As a rendering engine, the browser itself can display live type and shapes with output almost indistinguishable from print-based tools. APIsApplication Programming Interface, animation and user input are a few reasons why the browser has become a more satisfying place to site projects — even for non-browser consumption. As a design tool, the browser allows for direct engagement with its display through the web socket and Web Inspector. As Dan Michaelson states in our conversation, “cars don’t let you change their design while they’re running, but web browsers do.”

The recent advances in the web browser are so robust, that it has become my go-to tool in developing almost any project. Working within an IDEIntegrated Development Environment or the Web Inspector allows for both loose and measured adjustments with several taps of an arrow key. I first discovered this in 2011 while teaching students HTML and CSS. I had them design patterns in the browser. By altering numbers in the Web Inspector, whole layouts shifted, causing reflows and unexpected crops. Each tap of the keyboard producing a radically different outcome.

And as it turns out, this pleasure and discovery translates to more everyday design problems: flyers, posters, and books. Creating designs through the manipulation of text and numbers provides real-time feedback in the browser — leading to many unexpected visual and programmatic outcomes found in this bookon this website.

— John Caserta