Why design in the browser?

Web design began as an extension to print design — the history of tables and image maps show how we’ve evolved. In the infancy of the web the tools created for print design were utilized heavily and that legacy still survives today. But the web is not print. It has different constraints and is mutable in ways print has never been. As the web has become more mature and grown in its ubiquitousness, the tools that are used to develop it have changed as well.

Content on the web

The first reason that always comes to mind for needing to design in the browser is the content that we use on the web. As mediums shift, the content produced is constantly changing to adapt to an ever moving industry. As video, audio and full-featured experience become more powerful so do the tools used to create these experiences. On the web it isn’t about designing a pretty picture anymore; it is about creating experiences to drive users in.

Variety of mediums

“The Web” is such a vast space with so many windows to the world. We are well past the point where a content creator knows how their content will be accessed. In a world of smartphones, tablets, smart watches, Google Glass and reading tablets, the idea that we can fully account for all of these devices and mediums through print design tools is foolish. The only way all of a site’s users can be accounted for is by building the site to be mobile-first and device-agnostic. Building a site with custom grids made for the site’s content, ensuring we use progressive enhancement to build experiences and considering the future-friendliness of a site’s design are all important pieces to creating a better web. The only way to take into account all of these pieces is by designing within the medium that the design is built for.

Design is not just design

Great web design is not just about painting content to create a pretty site, it also has its own constraints unique to the web. First and foremost, great web design requires performance. A site may look great within Photoshop but if it is built to be 23mb and spread amongst many files, then a 3G connection would take over a minute to download it. A pretty picture does not mean much if a user cannot access it quickly and easily. By building within a browser these issues can more easily be discovered and nipped in the bud before they become too large to easily manage. The web also has other constraints, not least of which is the limitation of the DOM and what we can do with CSS. Even with the progress made in modern browsers, some designs are not easy to pull off without using new techniques (such as flexbox) that are not compatible with older browsers. These limitations must be taken into account during design and not as an afterthought later on.

But my process is to _______!

That’s great! I have worked with many designers whose creative process involves Photoshop, paper, stenciling or even cutting up magazine images. But just like print design will be delivered to the client printed out, so should the web be delivered in the web. Designing in the browser is not meant to limit creative process, it is instead meant to ensure we are designing for the web. It gives a better view into the constraints the web puts on design.

Where can I lea\r\n \to design in the browser?

This fall, at DrupalCon Amsterdam, Chris Ruppel and I will be giving a training on content strategy and designing in the browser. We will delve deep into the tools that can be used to create the very best designs in the browser, and how to transfer that to the next Drupal project in your shop. It can also be applied to non-Drupal sites as the techniques we use can be pulled into any project. If you are looking to take your design chops to the next level it is a must for all projects. We look forward to seeing you all there!

Read about the training or Register for training