Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. In the real world, a significant portion of people rely on pages printed from websites for reference: there’s still something about having a physical sheet of paper in one’s hands, even in this age of digital saturation.

Web developers can take several steps to bridge the gap between the worlds of printers and LCD screens:

• Treat print as an equal partner in adaptive and responsive design.
• Print background images and colors, where appropriate.
• Add visible URLs or scannable links for easy reference from the printed page.
• Use CSS filters to improve the result of printed graphics.

Design For Print, Not Screen

First, let’s cover the basics. Modern print style sheets are typically placed within a media query:

@media print {

}

Recreating the entire CSS for your website is not necessary because the default styles will, on the whole, be inherited by the print query; only the differences need to be defined. Most browsers will automatically reverse colors when printing in order to save toner, but this won’t have the same degree of quality as a handcrafted solution. For best results, make color changes explicit. At the very least, a basic print media query should consist of the following:

@media print {
   body {
      color: #000;
      background: #fff;
   }
}

While display: none has rightly been derided in responsive design, it is entirely appropriate for print style sheets: in most cases, our goal is not to recreate a screenshot of an entire page, but to provide a concise, well-designed print version of it. As a second step, eliminate page elements that are simply irrelevant in print, including navigation bars and background images.

/* Default styles */

h1 {
   color: #fff;
   background: url(banner.jpg);
}

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }
}

Writing a print style sheet is one of the few times when you’ll ever use centimeters or inches in CSS. Largely irrelevant to screens, real-world measuring systems become very useful in print. To ensure that you are using the printed page effectively, write CSS to display your content edge to edge, negating any margins or padding that may be present, and balance this with an @page rule:

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }

   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }

   @page {
      margin: 2cm;
   }
}

For content to which users can be expected to add handwritten notes on the page, such as educational material, you might consider increasing the print margin.

We also need to ensure that content is not broken across pages when printed. One obvious step is to prevent headings from being printed at the bottom of the page:

h2, h3 {
   page-break-after: avoid;
}

Another rule will prevent images from bleeding over the edge of the printed page:

img {
   max-width: 100% !important;
}

A third will ensure that articles always start on a fresh page:

article {
   page-break-before: always;
}

Finally, we can prevent large elements, such as unordered lists and images, from being split across multiple pages.

ul, img {
   page-break-inside: avoid;
}

While these declarations are not exhaustive, they’re a good start.

Force Background Images And Colors

On some websites, such as portfolios, background images and colors are an important visual component. If the user is printing from a WebKit browser (Google’s Chrome or Apple’s Safari), we can force the printer to render the colors as seen on screen (i.e. force any background images and colors to appear on the printed page). Generally speaking, we would do this for color printers, which we can test for in a separate media query:

@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

Sadly, there is (as yet) no immediate equivalent in Firefox, Opera or Internet Explorer.

Expand External Links For Print

We can’t (yet) directly interface with a printed page to explore links, so link URLs should be visible on the printed version of the Web page. To keep the page relatively clean, I prefer to expand only outbound links in articles, and suppress internal ones. If you’ve used relative URLs on your website for local links, you can easily do this through an attribute selector and :after pseudo=classes, thus preventing internal links and links around images from being printed:

@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }

   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

Take the following HTML code and content:

<p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a href="http://www.webplatform.org/">read other Web development documentation</a>.</p>

Here is the printed result:

One issue is that anchor links and links around images will also be expanded on the printed page. We can fix the anchor links fairly readily with a countermanding CSS rule:

article a[href^="#"]:after {
   content: "";
}

Links around images are rather more difficult, because CSS does not currently allow for the selection of an element based on its children. Ideally, links around images would have a class that we could target via CSS. Longer term, CSS4 features a parent selector that will do the job:

$a:after > img {
   content: "";
}

CSS4 will also make expanding external links easier:

a:not(:local-link):after {
   content:" <" attr(href) "> ";
}

All of these approaches assume that users will continue to type in URLs by hand. A better solution is to make the digital version of the page easier to access by providing a matching QR code.

Print QR Codes For Easy URL References

Often regarded as an advertising eyesore, QR codes have their place in certain circumstances. One obvious example is providing an easily-scanned sigil on a printed Web page that enables the user to return to the live version without having to type the URL.

Web page printed with a self-referential QR code. Larger view.

To create the matching QR code, we’ll use Google’s Chart API, which has four required components:

• The kind of chart information we want Google to deliver (qr, in our case);
• The rendered size of the QR sigil, in pixels;
• The URL to encode;
• The form of character encoding to use.

We’d typically associate the URL with a heading element at the top of the page:

<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>

To create the printed result, we’ll provide a margin on the right side of the h1 that is large enough for the heading, and then position a QR code in that area:

header h1 {
   margin-right: 200px;
   margin-bottom: 2rem;
   line-height: 1.5;
}

Because the QR code will be unique to each page, this would be added as an embedded style sheet:

@media print {
   header h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

This approach has the downside of forcing the developer to enter a URL individually for each page into the API code. If your Web host is running PHP, you can provide the URL of the current page automatically:

@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

For WordPress:

@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

Obviously, both of the solutions above will only work on PHP and WordPress pages.

Use CSS3 Filters To Improve Print Quality

Browsers often have issues with printing out banner images, especially if the banners are white against a dark background:

Logo as a solid image	Printed result
Logo as an alpha-masked PNG	Printed result

In theory, you could use a CSS sprite to switch between different versions of the logo for print, but that would mean doubling the file size for potentially little benefit. Instead, I recommend using CSS filters (and their SVG equivalent, for Firefox) to invert the image just before it hits the printed page:

@media print {
   header {
      background: none;
      color: #000;
   }

   header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
   }
}

CSS3 filters do what you’d expect — invert the colors in header images, turning black to white and vice versa — but they only work in Chrome and Safari. To cover Firefox, we need a different approach — the equivalent filter written as a separate SVG file:

<svg xmlns="http://www.w3.org/2000/svg">
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>

The workings of the feColorMatrix SVG filter are a little complex to cover here. Much more information can be found in the article “Applying Color Tints to Web Pages With SVG Filters and JavaScript on Dev.Opera.

The result of printing either form of logo (i.e. alpha-masked PNG or solid-black background) is now this:

Conclusion

Due in part to the fact that printer use is not tracked by website analytics software and, thus, lacks strong metrics (although achieving this is possible, too, which we may discuss in a future article), print tends to be broadly ignored by Web developers. This is somewhat understandable, because most of the time we only read and browse pages online. As a result, developers tend to develop websites for the screens and devices in front of them, rather than for the printer at the other end of the office.

On the other hand, even if people only occasionally need to print something from the Web, it would be ideal if the page design adapted to the printer, just as modern websites adapt to various screen sizes and devices. Print should be considered another aspect of adaptive design, usability and accessibility, and an equally important part of Web development.

By treating print as another aspect of adaptive design, we fulfill the needs of more website users — and at the same time, save ink, paper and other resources, all of which are important aspects of sustainable design.

More Resources

A List Apart has a long and laudable history of supporting print style sheets through its articles and tutorials. While some of the following resources are now fairly old, they remain relevant to anyone who wishes to explore print as an equal partner in Web design.

• CSS Design: Going to Print, Eric Meyer (10 May 2002)
• Improving Link Design for Print, Aaron Gustafson (19 September 2005)
• Building Books With CSS3, Nellie McKesson (12 June 2012)
• How To Set Up A Print Style Sheet, Christian Krammer (24 November 2011)

Source of image on front page: Bottlerocket Creative.

(al)

---

© Dudley Storey for Smashing Magazine, 2013.

Hundreds of tools may be available for interaction designers, but there is still no industry standard for interaction design the way Photoshop and Illustrator are to graphic design. Popular programs are out there, but many of them have considerable drawbacks, which has led me to explore alternative apps.

I eventually chose Adobe InDesign for much of my preliminary interaction design work. Yes, you read that correctly: InDesign, a desktop publishing app originally created for designing books and magazines, is currently my tool of choice for designing low- to medium-fidelity wireframes and interactive prototypes.

Slowly but surely, InDesign has evolved from a print-only tool into an application that can produce interactive media for the iPad and eReaders, too. Surprisingly, it has built-in tools for creating interactivity and animation within your spreads. Though it may sound crazy at first, hundreds of thousands of designers have adopted InDesign as their go-to application for eBooks.

We’ll take InDesign one step further than these authors to produce fully interactive wireframes and prototypes. As you will soon see, InDesign has a unique set of tools and features that are perfectly suited to designing wireframes and interactive prototypes in a more intuitive way than you ever thought possible!

What Makes It A Great Wireframing And Prototyping Tool?

I look for only four categories of features in a wireframing and prototyping app. InDesign has them all in droves.

Wireframing

1. Creation
   Create original artwork in a flexible and robust environment, where any shape or style of object imaginable can be created easily.
2. Modularity
   Design once, and have the changes cascade throughout the whole document.

Prototyping

1. Interactivity
   Create different states of a design in which the user can actively engage with the design and change the states of the prototype.
2. Animation
   Set up transitions between various states of an application.

Set-Up

Set Up InDesign for Interactivity

Before creating a wireframe or interactive prototype, setting up both InDesign and the new document correctly is imperative. After opening InDesign but before creating or opening a document, go to the “Preferences” panel (on a Mac, InDesign Menu → Preferences, and on a PC, Edit → Preferences → General) and change the following preferences.

Global preferences (i.e. when no documents are open):

• “Units & increments”: Set units to pixels
• “Display performance”:
  • “Default view”: High quality
  • “Raster images, vector graphics, transparency”: Higher quality (resolution)

Change InDesign’s application-level settings (“Units and increments”) before creating a wireframe or prototype. Larger view.

After changing the global preferences of InDesign, create a new document (on a Mac or PC, File → New → New Document), and set up the following properties.

• Intent: Web
• Properties
  • Pixels as dimension
  • Common screen sizes
  • Horizontal orientation (for desktop and traditional Web)
  • No facing pages (spreads)

Setting the “New Document” properties to “Intent: Web” enables you to create a new document with pixel dimensions. InDesign provides many presets for common screen sizes.

Note: Documents created with “Intent: Web” will have an RGB color space.

Set Up The Workspace

Make all of the interactive functionality new to InDesign CS5 and CS6 quickly accessible. I like to place them on the left side of the screen, under the tools palette. Larger view.

As stated, InDesign can be used to produce static print-based media as well as fluid, animated interactive media. The type of project you are creating will dictate what features you will need quick access to and, thus, how the user interface should be arranged.

How one sets up their workspace is a matter of personal preference, but after much trial and error, I’ve found a set-up that works for me. What works for you may be different, but I recommend using the information provided in this section as a starting point for your customization of the InDesign interface.

Once you have placed the panels the way you like them, save them as a named workspace. You can switch between workspaces in the upper-right of the InDesign application window.

Two workspace presets are provided with InDesign (found in the upper-right drop-down menu), “Digital Publishing” and “Interactive for PDF.” I have created my own workspace (named “Interactive – Custom” in the screenshot above), based on the other two.

Basically, all of my typographic, layout, color and other design-oriented panels are on the right, and all of the new interactive panels are on the left, under the tools panel. The panels listed just below are docked together on the left of my screen.

Here is a quick introduction to a subset of the interactive panels:

• Links
  Displays all external assets that have been placed in your documents. Link images, relink and update your assets.
• Media
  Manage movies and audio files placed in your document. You can customize how these media files play and are viewed in your document.
• Liquid Layout
  Set up rules for how objects may be repositioned when the document is viewed on various devices and, thus, at various page sizes and orientations.
• Buttons and Forms
  Convert objects to buttons, and control button properties.
• Animation
  Create animations, and determine how objects move.
• Timing
  When multiple animations occur on one page, control their timing so that they are played in the correct order.
• Object States
  Create objects that have multiple states (such as slideshows and drop-down menus). Each state can be shown and hidden using buttons. This is powerful for creating complex interactions.
• Preview
  Preview how an animated and interactive document will look and behave without having to export first.

These panels are where most of InDesign’s interactive functionality can be accessed.

I don’t use the panels for hyperlinks, bookmarks or page transitions much, so I don’t dock them with the others.

Wireframe Creation Features

Drawing Tools

Drawing tools may seem like a commodity in the realm of design software. However, many commonly used interaction design applications rely on the placement of predefined UI controls such as buttons and sliders. Ideally, a wireframing application should have vector-drawing tools. Vector graphics are advantageous because they allow for non-destructive editing; and for the most part, the nature of vectors forces you to maintain low to medium fidelity. Jumping into visual design too early in the design process is easy if you are using a program such as Photoshop.

Although InDesign’s drawing tools are not as sophisticated as Illustrator’s, they are more than enough to get your ideas across. The logic here is that, the more robust the drawing tools in a wireframing or prototyping app are, the less you’ll have to jump in and out of other tools, which would create bottlenecks, extra work and technical hurdles.

The drawing functionality in InDesign is similar to Illustrator’s. Many of the bells and whistles found in Illustrator may be missing, but you get a core set of streamlined and powerful drawing tools to render anything you can imagine.

Layout

InDesign is one of the only design tools that has robust grid support built in, and I find myself designing with grids all the time. (You can find all of the layout functionality by going to Layout → Margins and Columns.) Grids from widely used systems, such as the 960 Grid System, can be easily and quickly created and used throughout a design by using master pages, which we’ll cover later. Horizontal and vertical guides can be used in conjunction with columns to create subgrids for greater complexity and precision in a layout.

Quickly and easily create grids for your document, such as the 12-column grid based on the 960 Grid System, shown here. Larger view.

Tables

Not to be confused with the very old technique of laying out Web content, tables in InDesign are often used to display tabular data, as well as list and grid views, in a user interface. In fact, creating tables is one of the reasons why I started creating wireframes in InDesign in the first place!

I often turn cell borders off (either by setting the stroke to none or to 0 pixels), so that the table can inform my design but not be so literal or distracting in the final wireframe or prototype. Other common reasons why I use tables are to create tabs that evenly distribute the text label in each tab, and to create subgrids for alignment in a design when the main grid just won’t do.

Tabular data can be created in seconds in InDesign. When tables are needed, no better design program than InDesign is out there. Larger view.

Layers

While layers may seem like a no-brainer feature that doesn’t warrant mentioning, plenty of apps simply don’t have them. (InDesign didn’t have the ability to show objects in the Layers panel until CS5.) Layers provide the ability to group, reorganize, selectively show and hide, and selectively lock and unlock objects in a design. The larger and more complex a design is, the more important layers become.

Multi-page documents in InDesign share the same organization of layers: every page has the same number of layers, which are also in the same order. When a layer is created, moved in the stacking order or deleted, or when its visibility has changed on one page, those modifications are reflected on all other pages. While the organization of layers is consistent throughout an InDesign document, the designs on each page may be unique.

In the last several months, I have experimented with various ways to order my layers and have come to the conclusion that only a few layers are needed to adequately organize my files. Typically, I use only four layers: I place a notes layer at the top to add explanatory text about the design; next, I use an input layer, where I show user actions and input; below that, I show modals (dialog boxes, lightboxes and popovers), which appear over the background layer.

This is a common layer structure for my documents:

1. Notes
2. User input
3. Modals
4. Background

The wireframes I create usually have four layers. The background layer contains most of the design. Overlays are above the background. User input, such as from a mouse or hand, sits on top. Finally, notes are placed above everything so that I can annotate detailed interactions. Larger view.

Multiple Pages

By their very nature, interactive documents require multiple pages. Pages in website design (and screens in app design) are a fundamental unit of interaction, because they contain the content that users navigate to throughout the application.

Large and small projects would benefit from the organization that pages provide.

Alternate Layouts

This new feature in CS6 is a game-changer for responsive and mobile design. Alternate layouts allow you to create designs for multiple devices and orientations in the same file. With InDesign CS6, we now have a tool in our arsenal to make designing for dozens of screen variations almost as easy as designing for one. The textual content of each size and orientation is all linked, so updates will automatically propagate to all variations of a design.

Alternate layouts were designed to work with the liquid layout toolset (discussed next), so that if layout rules were set up properly in the original layout, then newly created layouts would automatically update to conform to the different dimensions. Of course, alternate layouts may be used without liquid layout rules, too, so that you can manually control how objects are displayed in each layout.

When working on more than one layout, you might need to refer to other layouts or toggle repeatedly between multiple ones. To see two layouts simultaneously and work back and forth between them, simply click on the split-view icon to the right of the scroll bar at the bottom of the InDesign window.

Alternate layouts are used to manage one design that will be viewed on multiple devices.

Liquid Layout

Liquid layout changes the way content adjusts to the size of the page. (According to Adobe, this feature is HTML5-based.) Liquid layout lets you be more flexible: you can design once and set up some simple rules, and then the design will automatically adapt when the display’s size or orientation changes.

Set up liquid layout rules in one of six ways: off, scale, recenter, object-based, guide-based, and controlled by master. The details of the liquid layout rules are enough to take up an entire article by themselves and are, thus, beyond the scope of this article. I highly recommend reading Pariah Burke’s article “InDesign How To: Using Liquid Layout” to get up to speed on the rules.

Define liquid layout rules before creating an alternate layout, to fully leverage the time-saving benefits of this feature.

As you set up the liquid layout rules for a page, preview and test those rules to see whether they have the desired effect. To test your new liquid layout, select the page tool, and you will see handles at the edges and corners of the page. By dragging these handles, you can temporarily adjust the size of the page. This behavior lets you test how the content adapts when the page changes in size. Holding Option on a Mac or Alt on a PC lets you permanently change the page’s size by hand.

Wireframe Modularity Features

Master Pages

Master pages extend the functionality of pages by allowing a parent page to have objects and to have layers that are shared with its children pages. When content on the master page changes, it also changes on the children. Masters are typically used to contain headers, footers, logos and empty frames that act as placeholders. Surprisingly, very few other applications have master pages. The versatility and saved time that master pages bring cannot be overestimated. They help with consistency, and they help designers use repeatable design patterns throughout a project.

When master pages are applied to other pages, you are able to share the master’s objects to the regular pages.

Note: Objects on a master page layer appear behind objects assigned to the same layer in the document page. If you want a master item to appear in front of objects on the document page, then assign a higher layer to the object on the master. A master item on a higher layer will appear in front of all objects on lower layers. Sometimes I create special layers for masters that are above the “normal” layers.

Masters Based on Other Masters

Masters can be created based on previously created masters. As far as I know, this feature is unique to InDesign. By creating a parent-child relationship between masters with a document, a nesting effect occurs (similar to the cascade in a cascading style sheet), which makes for a powerful way to create constancy and to update documents with ease.

Basing a master on another enables you to create similar variants of a design. Masters may be based on only one other master at a time.

Placing Files

When pixel-perfect styling matters, you can switch to whatever application you want to design in, and place that file in an InDesign document for seamless integration. Placement is especially powerful when using multilayer Photoshop or Illustrator files, because InDesign displays them in full fidelity.

Note: By default, InDesign previews placed images with a low-resolution preview. This does not reflect the quality of the placement or that of the original file — InDesign uses a pixelated proxy image to keep up performance on your computer. With CS5 or CS6 and a decent computer, I have found that a high-quality image preview doesn’t affect performance and is a more accurate way to view your work. I recommend setting the display performance to “high” as the default in InDesign. (This can be done by opening InDesign and going to View → Display Performance → High.) Setting this when no document is open will set the default for all newly created files. Older files will retain the view settings that were selected the last time they were saved.

Each time a document is placed, it references the original file. For instance, if a PSD is altered, one click can update all of the instances of that Photoshop file that appear in an InDesign document. When only a portion of an image is necessary, InDesign offers some of the most intuitive and rapid masking tools available.

Note: Placed items are linked to the containing InDesign document based on their file location. To gather all files into one central folder, use the File → Package command.

You can place most media types in an InDesign document. Larger view.

The placement feature is easy to take for granted, because it is a fundamental tool in InDesign’s arsenal that has been around since the software’s debut. But placement enables you to create a kind of collage whereby you can design the pieces in whatever tool you deem appropriate, and then assemble those pieces in InDesign.

Placing InDesign Documents in Other InDesign Documents

InDesign allows documents to contain other InDesign documents. Think of a placed InDesign file in a master object (rather than a master spread) because it makes it easy to reuse content in a design in a consistent, fast and easy way. If the original InDesign document is edited, all instances of the document will instantly reflect the changes. A placed InDesign file may show up in its container file an infinite number of times.

This feature allows for functionality similar to that of symbols in Flash and Illustrator, but expands on their use by facilitating constancy across multiple documents. This is an extremely useful feature that is not widely known but can save countless hours. For those working on collaborative teams, you can save InDesign documents to be used as reusable components in a shared folder, and any updates made by one person will be available instantly to the rest of the team.

InDesign documents may contain other InDesign documents. This seemingly simple feature allows you to create symbol-like functionality that allows object changes to propagate to an entire document. Larger view.

Snippets and Libraries

Placed InDesign files make it possible to reuse content and to edit the originals. There are other ways to reuse content, such as snippets and libraries; however, these two methods do not allow the originals to be opened or edited after creation. Because of this, they should be used prudently, and only when the content in a library or snippet is finalized and won’t change. Snippets are more flexible and powerful than libraries, but using placed InDesign documents is recommended in most cases.

Styles (Object, Character, Paragraph, Table and Table Cell)

As anyone who has used character and paragraph styles in InDesign would attest, styling is an amazing time-saver and provides a level of precision and consistency that would otherwise be impossible. Object styles enable you to style one object to your heart’s content, and when you are happy with the way it looks, you can save all of the effects and the transparency, stroke and fill of an object to be applied to other objects later on. If the style itself is updated, then all objects that have been assigned that style will be updated as well.

Styles enable you to maintain a consistent look and feel in a document and to update the styles of any and all objects when requirements change or the mood strikes. Larger view.

Interactive Prototyping Features

Buttons

When an object is converted into a button, it becomes clickable and interactive, able to initiate a myriad of actions such as navigating to a particular page, initiating animation or playing a sound. Almost any object can be turned into a button. A button is a special kind of “container frame” that hold the objects that make up the visual appearance of the button.

Buttons panel: details.

Multi-State Objects

When a person uses an application or website, the objects on the screen that they interact with will often change states. For instance, a carousel slideshow might show a featured set of 10 images that rotate through the collection, showing one photo at a time. In this example, the carousel slideshow is one object with 10 states. In other programs, you would have to create a new page or art board for each of the 10 images in the carousel.

Without multi-state objects, the carousel object would have to be duplicated nine times, each state on a different page. This method is inefficient and doesn’t accurately reflect what is actually happening — that the carousel is changing states. State changes are not the same as page changes, and InDesign allows you to differentiate between the two! Multi-state objects are special objects that can change appearance depending on how or when a user interacts with them.

Objects panel: details.

Hyperlinks

Those blue underlined text links we have come to know and love on the Internet are alive and well in InDesign. Hyperlinks turn text into interactive objects that, when clicked, transport the user to a new page or to a different position on the same page. You can also easily turn URLs in text into hyperlinks (be sure to define the character style of hyperlinks first).

A note on named versus unnamed hyperlinks. When making a hyperlink, you need to decide whether it can be used multiple times (which InDesign calls a “shared hyperlink destination”) or will be a one-off link. If you are going to use a hyperlink several times in a document, making it named is great. That way, if you need to edit the link, you can change it once and it will get updated everywhere in the file.

Media

Similar to the Links panel, the Media panel holds all of the movies and audio files that are linked within a document.

Bookmarks (PDF)

Used primarily for print PDFs, bookmarks make it easy for the viewer to find a particular section of the document. Bookmarks may be nested. A table of contents can generate bookmarks without your having to add bookmarks manually, which saves a lot of time. As with HTML, a link can direct you to a whole other page or (if it’s an anchor link) to another spot on the same page. Because there is no way to name pages in InDesign, you can also use bookmarks while designing a document for reference purposes.

Page Transitions

Whole page-transition effects, similar to those in Keynote and PowerPoint, are available in InDesign.

Animated Prototyping Features

Animation

Though they can be thought of as eye candy, transitions provide additional information, context and feedback, and they help people visualize the results of their actions. Objects animate as a result of a user action, such as navigating to a page or clicking a button. The animations in InDesign have the same presets found in Adobe Flash CS5 Professional and above. Common presets, such as bounce, slide in and fade in, come bundled with InDesign, but you can create your own presets, save them and share them with others using InDesign or Flash.

Animation panel: detail 1 of 4. Larger view.

Animation panel: detail 2 of 4. Larger view.

Animation panel: detail 3 of 4. Larger view.

Animation panel: detail 4 of 4. Larger view.

Timing

The timing pane is used for advanced animation sequences in which a user action initiates the animation of two or more objects. The timing pane takes the place of a dedicated timeline found in apps such as Flash, and it resembles panels found in Keynote and PowerPoint (with some powerful additions). Timing is used to control the order in which objects animate, determining whether those objects animate one after another, at the same time or somewhere in between.

Timing panel: details. Larger view.

Previewing And Exporting

Previewing an Interactive Document

With so many options to tweak in an interactive document, periodically testing your interactions will help you to iterate on the design and to experience what you are creating from a user’s perspective. Thankfully, InDesign helps you do this without having to export the whole document, which saves time and lets you stay in InDesign to test the design as you are creating it.

The difference between previewing a document and exporting a document may seem minute, but because previewing is so fast, easy and but one click away, you are more likely to use it to test, evaluate and tinker with a design — and increasing the number of iterations in the design process is a surefire way to increase the quality of your deliverable.

Preview panel: details. Larger view.

Exporting

InDesign’s interactive features work only when you export the file to a format that supports them, such as PDF, SWF, FLA or XHTML. And different formats support different features.

HTML Export

Though InDesign has an “export to HTML” feature, it is so anemic that it is not worth using. Perhaps Adobe wants people to use its digital publishing platform — the resulting HTML files that InDesign produces natively are not useful because they don’t maintain the styling or interactivity of the working document. Adobe has said it wants to move in the direction of supporting Web standards, but as of CS6, I would not recommend exporting to the Web from InDesign.

Luckily, a company named AJAR Productions has a new Kickstarter project that aims to rectify the shortcomings of HTML exporting. Currently, the InDesign to HTML5 project is a work in progress, but it will have a 1.0 release very soon. Please take a look at this new plugin and see what it can do for you. The developers are very responsive to constructive feedback. Hopefully, Adobe will see how useful this functionality is and follow the awesome lead of this Kickstarter project. With the InDesign to HTML5 plugin, you can produce designs with the following features and benefits:

• With the WYSIWYG, no-programming-needed design environment, produce layouts that are faithful to the original InDesign file.
• Embed fonts on your website.
• Produce built-in page navigation.
• Use master page content.

Extending InDesign

The company Eight Shapes has created a toolset called Unify to fully maximize the interactive features of InDesign. Unify is a documentation system to produce wireframes, maps, flows, storyboards, plans, style guides, specifications, usability testing reports and prototypes. I only recently discovered Unify and have found it to be extremely helpful in my work.

Drawbacks And Limitations

Before you start rushing to mock things up in InDesign, I’d like to mention a few caveats. First and foremost, few professionals are using InDesign to create wireframes and prototypes. This means that there are few tutorials and support documents to help you if you get stuck or confused. Learning how to create animated eBooks or iPad magazines might help you approximate what you are trying to do, however. Also, there are almost no native InDesign files that can be used as stencils or pre-made components similar to those found in programs such as OmniGraffle.

There is a way to quickly create your own set of stencils from those already available online, though. You can copy and paste stencils from other programs into Illustrator, clean up the images, and then paste them into InDesign. As mentioned, you can embed InDesign documents in other InDesign documents in such a way that approximates the use of symbols in Fireworks, Illustrator and Flash. Embedded InDesign documents can be treated like stencils. The advantage is that these documents can be accessed by a team from a shared location, and when the source files are updated, every document that contains the embedded InDesign files will also get updated. While getting your InDesign stencil collection up and running might require some leg work, it is well worth the effort.

The interactive features of InDesign were not intended to be used for rapid prototyping or for creating rich complex interactions. While the interactive tools are perfectly suited to eBooks, they are not yet robust. The types of documents InDesign produces are intended to be used with the Adobe Publishing Suite and EPUB — two formats with different but related limitations. Interactive PDFs, SWFs and even HTML can be exported, too, but they don’t produce files with as high a fidelity as Adobe Publishing Suite or EPUB.

In some ways, the interactive toolset makes InDesign feel like a facsimile of PowerPoint or Keynote in terms of how page transitions are handled and animations triggered. The similarity to presentation apps makes it easy to jump in and start producing work quickly. But there are some drawbacks. As anyone who has created an animation-rich prototype in a presentation program can attest, although it looks slick in the end, designing a non-linear flow in the confines of a linear document is a bit of a hack.

Despite these minor limitations, I hope you have discovered the amazing benefits of InDesign. Although not perfect, InDesign offers many perks and features that will transform the way you create wireframes and interactive prototypes.

Conclusion

Many people are familiar with InDesign, but they often overlook it when choosing a wireframing or prototyping tool. This popular application in Adobe’s Creative Suite, once a print-only tool, has become a hybrid program that can produce multimedia content for the Web and eReaders. Though not perfect, the unique combination of its creative workflow, modularity, and toolsets for interaction and animation make InDesign a robust and powerful program that is perfect for creating both wireframes and prototypes.

Other Resources

You might be interested in further articles and resources related to this article.

(al)

---

© Shlomo Goltz for Smashing Magazine, 2013.

Today we are happy to release three more exclusive interviews as well as two Smashing Conference videos featuring Brad Frost, Andy Clarke and Nicole Sullivan. You can check out even more conference interviews and talks by Jeremy Keith, Rachel Andrew and Stephen Hay. In case you are wondering whether Smashing Conference 2013 will take place or not, the answer is a definitive “yes!”, so please make sure to stay tuned to not miss it this year!

The videos of the SmashingConf 2012 were filmed by Frank Sippach, cut by Marc Thiele (the co-organizer of the event) and the interviews were conducted by the Smashing Editorial team members, Esther Arends and Melanie Lang.

The Smashing interviewers, Melanie and Esther, ready and set to go!

Interview With Brad Frost

Brad Frost is a mobile Web strategist and front-end designer in New York City. He is the creator of Mobile Web Best Practices, a resource website aimed at helping people create great mobile and responsive Web experiences. He runs a responsive Web design newsletter and also curates WTF Mobile Web, a website that teaches by example what not to do when working with the mobile Web.

Brad is passionate about mobile and is constantly tweeting and writing about it. He will also give a workshop on responsive design in Freiburg, Germany later this year.

Beyond Media Queries: An Anatomy of an Adaptive Web Experience

Brad was totally busy taking notes and listening to every single talk. Luckily, we still got the chance to ask him a few questions about his work, the conference and his dog Ziggy who does amazing things.

Beyond Media Queries: An Anatomy of an Adaptive Web Experience from beyond tellerrand on Vimeo.

Q: We would like to ask you a few questions about your work. You worked at R/GA in New York. How did you get there and what did you do before?

I started my career in Pittsburgh making websites for real-estate companies and stuff like that. My wife had just gotten a job at R/GA in New York, so I moved up there to be with her. I found a job at an e-commerce Web design company and a few years later moved to R/GA. Even though we worked at the same place, my wife and I (thankfully) didn’t actually work on the same projects together.

The company is huge. When my wife started four years ago, we had an office in New York, San Francisco and London. Now we also have an office in Chicago; Austin, Texas; Buenos Aires, Argentina; Sao Paulo, Brasil; Singapore; Sydney, Australia; Stockholm, Sweden; and Romania. I remember coming back from lunch to find out we opened an office in Stockholm. Pretty crazy.

Q: In terms of Web design, was there ever a topic that you and your wife just couldn’t agree on?

Thankfully, she mostly works on native apps and never dealt too much with the Web world. She does her apps and I do my websites — and that’s a good thing. Because we do different work, we never really had a major disagreement on anything like that, except minor things like “Why are the buttons there, there shouldn’t be so many icons in the navigation,” but that’s about it.

Q: You are very excited about everything that concerns mobile. Can you explain what’s so exciting about it?

Whats not to be excited about? It unlocks so many wonderful things. It’s opening up an entire new world to many people. More people have access to mobile phones now than have access to running water or toilets. We communicate in ways we never communicated before and make payments in ways we’ve never made payments before. And what gets me so excited about the mobile Web specifically is that we have all of these mobile devices — more devices than humans on the planet — combined with the ubiquitous power of the Web. You take mobile, you take the Web, you put both together and suddenly the world has access to all sorts of information and tools wherever they may be. What a beautiful concept.

Q: Responsive Web design has been the huge topic for the last two or three years. What is the next big thing in your opinion?

Right now the Web is incapable of doing everything that native apps can do. You’re not opening augmented reality apps in you browser. But it’s all advancing pretty quickly. When things like accessing the camera, accessing contact lists and more device capabilities make their way into the browser, it will open up a much richer world of what you can actually do on the Web. I think that will significantly change what the Web is, what it can do and who it can reach. In the meantime, we can get Web design into a more flexible place so it can reach any device you throw at it.

Brad Frost at the Smashing Conference. (Image John Davey)

Q: You offer a newsletter on your website. Why should people subscribe to it?

(laughing) I can’t answer this honestly because I’ve been so busy lately that I haven’t had time to send one out. But I really enjoy doing it. It’s a place to collect resources about responsive design. I also try to make it fun and friendly, and I put in horoscopes that are a bit cheeky. Some people like that, some people think that’s stupid. I thinks it’s a good resource if you want to get quick information about what’s new in responsive Web design.

Q: You’re quite new in speaking at conferences compared to people like Jeremy Keith, Paul Boag or Andy Clarke. When, where and how did you start?

I started about a year ago in my hometown Pittsburgh at a great smaller conference called Web Design Day. They try to get speakers which have an affiliation to the area, so they asked me to talk. And I also spoke at the Breaking Development Conference. They’re now on their fourth event, but I went to the first one as an attendee. On the second round they had a call for lightning round speakers, where you’re not a featured speaker but you have 30 minutes to talk. I applied and got accepted. All this speaking stuff, it’s all very new and wonderful, and I love it.

Q: Everyone has their own opinion about Web design. However, we overheard that you called Paul Boag a wanker. Why was that?

(laughing) I actually never called him that. Jeremy Keith set me up. I wanted to talk to Paul before I got on stage, because I use his site as an example of responsive sites that hide things for small screen viewers — which you shouldn’t do. On his site, he hides his comments and the comment form on small screens so you’re not able to read or make comments. I was using that as an example of what you should avoid when designing a responsive site. I didn’t want to upset him, because I love his work and I think he’s a great guy. So I just wanted to check with him beforehand. But then Jeremy called him over and said: “This guy just called you a wanker.” And I felt so embarrassed because I didn’t even know Paul personally at that point and had to explain myself.

Q: We also heard that your dog Ziggy is the new Tony Hawk?

He still pees in the house. He is very stubborn and won’t walk down the street, but he got really good at skateboarding.

Q: We noticed hat you were taking so many notes and tweeted a lot during the Smashing Conference. Did you enjoy it?

My mind was pretty much exploded. It was phenomenal. It wasn’t that I learned something new at every talk, it was that I learned something significantly new at every talk. Either a new mentality, or a new technique or a deeper understanding of a certain thing. But it wasn’t like “Oh, that’s clever,” it was more like “Oh, wow, that is really, really good.”

Vitaly and Marc: taking a short break.

Q: You have been to a few conferences now. How was the Smashing Conference for you?

It was very sincere and thorough. Everything was really thought through, which shows the care that Marc and Vitaly put into it. But they also did a great job of getting a great group of people together and making an atmosphere that was happy and inclusive, which facilitated a lot of conversation and camaraderie. Also this special venue added a lot to it. I just felt like everybody felt very comfortable, and even during my talk I felt like I was just talking to people and not like I was on stage.

Q: What was your personal highlight on the Smashing Conference?

There were many speakers that I’ve been following since the beginning of my career. For example, I was following Andy Clarke from day one of my career. But I hadn’t met pretty much everyone before. Nicole, Lea and Jonathan, for example, have all shaped the way I write CSS, so it was brilliant to meet them. I’d never met Chris Heilmann before, and I just thought that he has some of the smartest writing about this stuff. Almost everyone has been a big influence on me and just being around them has been amazing. (laughing) I can’t believe I’m just with them — that blows my mind a little bit.

Andy Clarke

Andy Clarke a designer, author and speaker who’s known for design work, books, conference presentations and contributions to the community. Jeffrey Zeldman (the Godfather of Web standards) once called him a “triple talented bastard.” If you know of Jeffrey, you’ll know how happy that made Andy. Over the last fourteen years, he made designs for clients and wrote two books, “Transcending CSS” and “Hardboiled Web Design.” He has given many conference presentations and hosted workshops and training events for other Web professionals all over the world.

Encouraging Better Client Participation In Responsive Design Projects

Andy was the mystery speaker at the Smashing Conference and shared his knowledge in two workshops. In this interview, he reveals a fun story involving scooters, he tells us why he isn’t that fond of Brighton and explains why he didn’t enjoy speaking at conferences for a long time.

Encouraging Better Client Participation In Responsive Design Projects from beyond tellerrand on Vimeo.

Q: You haven’t spoken at conferences much lately. Why have you stopped enjoying speaking?

I have spoken a lot over the last years — I did fifty talks since 2005. They involve a lot of traveling and they cost money unless you can do workshops. You may get paid for speaking, but if you fly to America, for example, you take a week off work and if you work for yourself, like I do, no one is paying for those days you’re not earning.

It’s also really hard to keep coming up with new interesting things to talk about. And I didn’t want to be the guy who is talking about the same topic again and again.

A lot of people don’t realize that there’s lot of pressure on speakers. People mostly talk about how hard it is to do public speaking, but the hardest thing is actually the emotional pressure. When you speak regularly, you have the added pressure of, “Oh, he wasn’t as good as last year.” There’s a risk-to-reward ratio. If you do a good job and you read nice things on Twitter, you get a reward, an ego boost, and that’s great. But the problem is that if you please 99 people, and just one person says something negative, you’ll always focus on that one negative person and that makes speaking really difficult.

Last year I got to the point where I’d done so many talks, I would come off stage and I didn’t feel any of that reward. But I still had the same amount of emotional risk. So I decided that to become enthusiastic again I couldn’t speak for a while. So I said no to everything — except to Jeffery Zeldman for “An Event Apart” because you can’t say no to him. And after that I felt much better, so I also said yes to Vitaly when he asked if I wanted to fill the open spot. And I’m really glad I did it.

Q: You mentioned in your talk that you work for several long-term clients at the moment. Is that different from the work you did before?

In the past I would just do one project and after it was finished I moved on to the next one. Now I’ve got regular contracts. One is with the British government and one is with a Scottish TV channel. They book me for certain number of weeks every month so I go there and see and work with the the same people. That’s nice and something I’ve not had before.

Q: Did you go to university?

Yes I did, I studied Fine Art and wanted to be a painter. But then I turned out to be a terrible painter. I like the process of things, especially the photographic and the printmaking process. So I spent a lot of time in the printmaking room and the dark room doing photography projects.

The fantastic and smashing audience!

Q: How did you start doing Web design?

I used to design for print, so when I was designing on the Web I just used software like FrontPage, Dreamweaver or something horrible like that. I thought that was okay, and I spent a few years designing websites like that. I even did this when I started my business.

Then I went to a seminar down in London, and there was a guy talking about accessibility and code. When I went back home, I looked up his website which was actually CSS-based. At that time, not many CSS-based sites were out there. So I did what I always did and pasted his code into Dreamweaver to see how it was constructed. But it was just text and I thought: “What the hell is this?” — I had no idea. I didn’t even know what the difference between HTML and XHTML was. I had no idea because I couldn’t write HTML. I spent the next six months learning HTML and CSS. There weren’t books about it at that point, just one or two blogs. I basically just learned it for myself, staying up late, trying to figure it out.

That was around 2002 or 2003, before “Designing With Web Standards” by Jeffrey Zeldman came out. I remember how I went to the bookstore in my local town one day, I saw this book, opened it and there was everything I had tried to figure out in the last six months. I thought, “damn!” I bought a copy for myself and hid all the other copies behind other books, so that no Web designer in the area could see it and have a shortcut. I feel really bad about it and I told Jeffrey that I owe him some money — he just laughed.

Q: We really liked your redesign of Stuff & Nonsense with the different responsive scooter illustrations. How did you come up with that idea?

I mostly had a scooter illustration on my page, also in my old designs. When I came to redesign it, I wanted to do something to show off responsive design and I wanted to make people smile. I thought about different things. One idea was that the scooter gets more and more mirrors as the screen gets wider. Another one was that I would have more mods. But when I started thinking about the small screen I just decided to make it an age thing. So on the tiny screen you have the little kid, and after that it transfers to the image of me that I’d like to see. And on the big screen it gets to that slightly fatter midlife-crisis guy that I probably am. [laughing]

I want to do so much more with it. We want to do CSS animation so that the scooter bounces and I want to do more on the background. However, I ran out of money for now so I have to save up a bit.

Q: Do you actually have a scooter?

I actually had a motorcycle. It took me a long time and lot of domestic negotiation [laughing] to get it. I passed my test and had a Yamaha 600 a very short time and then I came off it. This is the story that I don’t tell many people but you can tell it here [laughing].

Listen to Andy Clarke’s bike sstory (wav)

Q: Is there anything else you always wanted to do in your personal life?

I really want to go to Chile. I would like to win the lottery so that I could just continue traveling, all the time. I wouldn’t even have a house, I would just travel — forever.

Q: Apparently there is a story involving you and ferrets? What is that about?

There is my friend Sarah Parmenter who is really beautiful and talented. And I came up with the story that she keeps ferrets, which are quite dirty and smelly creatures. So I started posting on twitter that she keeps them and other people believed it. Sometimes they would send her links to new things about ferrets. And I even created a “Sarah loves Ferrets” Twitter feed and kept it going for three months. It had her picture and also photos of ferrets. She tried really hard to kill them but my friends and I had whole fun thing lined out. You know how there are people in the world who dress ferrets in little costumes? So we had them ordered and delivered to her house and things like that. So that was me and Sarah, who is one of my best friends.

Andy Clarke, giving his speech.

Q: You live in Wales, but you’re not Welsh. Was there any special reason why you moved there?

That is a long story. My son Alex was ill when he was a kid and spent some time in the hospital. We were living in South England and I was working in London, so I left early in the morning and came home very late. I realized that I didn’t have enough time to be around Alex in this difficult time, so when he got better we decided to move somewhere else. We visited the area where I live now and liked it, and someone we know said that we should move up there. So we did within four weeks, sold the house and I left the job and went up there with no plans or any job. Then I started my business and nothing has changed since then.

Q: Apparently you hate Brighton even though as a creative person you would fit in there quite well. Why don’t you like it?

It’s not that that I hate Brighton, I just hate people in Brighton who think that Brighton is the center of the universe. That anything good has to be in Brighton. When my friends come over from America to a conference in London or something, they always go to Brighton, it always has to be Brighton. I just think there are so many beautiful parts in Britain which people should visit. The Cotswolds are really nice and not far from London. It takes you three hours to get to North Wales. Scotland is also really nice, or Cornwall. Lots of great places, so why does everybody just go to Brighton just because it’s a trendy-poncy place to go to?

Q: You have been to many conferences. Is there anything that makes the Smashing Conference different from the others?

What I like here is how everybody is so enthusiastic. There are a few conferences that stand out. The An Event Apart conferences are always excellent and brilliantly organized. Web Directions in Australia is always great, and there are a few smaller conferences which are great. I hate when conferences are run by conference businesses, where it’s just about making money from the people sitting there. What I love about this one is how enthusiastic Marc and Vitaly are about the whole thing. I’ve seen how much speakers and attendees have enjoyed it. I would want to come back next year just as an attendee if I wasn’t working.

Q: What was your highlight of the Smashing Conference?

In terms of other speakers, I thought Lea Verou was excellent and it’s a shame that she’s not doing more workshops in the future. And Jeremy Keith is always great. I just had a great time overall. At first I thought it was silly to be the mystery speaker, but to be honest I really quite enjoyed it.

Actually… do you know what my personal highlight was? Feeling good about doing conferences again which I haven’t for a long time.

Nicole Sullivan

Nicole is a front-end performance consultant, CSS aficionado and author. She started the Object-Oriented CSS open source project, which answers the question: how do you scale CSS for millions of visitors or thousands of pages? She also consulted with many companies including Facebook, Salesforce, the W3C, Adobe, Paypal, and Box. She is the co-creator of Smush.it, an image optimization service in the cloud, and CSS Lint, a tool that helps correct common CSS errors before they are pushed to production.

About Working Together With Big Companies

Editor’s note: Nicole’s conference talk will be available in a couple of days.

Q: You have worked together with companies like Facebook. In what areas do they consult you and ask for your expertise?

I think what I like best about working with big companies, or startups that are really starting to be successful, is that when you make a change for them, there is a really big impact on how much they can get done. It’s exciting to see them go from being really stuck in a big pile of CSS and unable to get themselves out, pushing features out too quickly. The teams really want to build cool new stuff, but often their CSS is such a mess, that it actually prevents them from building the things that they can imagine. The liberation that a team goes through, when finally they can quickly release features, and when they have a CSS that is sane and lean and makes sense to work with, is really fun. So I really like that part of working with big companies.

Nicole Sullivan at the Smashing Conference.

Q: How did you develop your passion for coding and CSS?

I guess that I have always done whatever I felt passionate about. If you look at my career path, it looks crazy. I studied economics in college. Then I became a carpenter. After that, I moved to France, couldn’t speak the language, and was an illegal immigrant. I had nothing to do with my time there so I started reading W3C specifications and I thought, this looks interesting, maybe I’ll learn about this. Then I enrolled in an engineering school and did a couple of years of that. I then took jobs because they seemed interesting to me and I wanted to work on the code that they had.

I feel like by following your passion, and always doing what in your thought level feels right, then even if it doesn’t work out, even if your project isn’t successful, or the company stops working on the thing that you wanted to work on, you still got to spend that time working on the thing that is closest to your heart. And I guess that’s where the passion comes from. I’ve never been able to spend very long doing something I didn’t really want to be doing.

Q: So passion is what has paved the way for you?

That’s the case. Say you started something and built something you were passionate about. Even if it fails, in the end you still spent this time on something you felt really strongly about. I think that’s where my passion comes from.

Stay Tuned!

We hope that you enjoyed the interviews — more will follow soon! Please make sure to remember the 9th and 10th of September 2013 — the second Smashing Conference is just around the corner! Make sure to subscribe to our events newsletter to not miss the launch of the ticket sale as well as announcements about our workshops and meet-ups!

---

© Smashing Editorial for Smashing Magazine, 2013.

Earlier this year, I was in the beginning stages of a redesign for our company’s website. We had already been planning to use a straightforward responsive approach to Web design, which is our preferred solution for multi-device support. After hearing some frank discussions at An Event Apart conference in Boston about the limitations and challenges of responsive Web design, I realized that our solution needed a bit of adjustment.

Thankfully, the project before us was the ideal opportunity to experiment and push ourselves to improve our responsive workflow. In this article, I will detail the process we took, including some of the changes we made along the way, as we worked to build a better responsive website.

The variety of devices being used to access our websites is more diverse than ever. (Image: Blake Patterson)

Defining Our Goals

The first step in our project was to make a list of the benefits and drawbacks to the responsive approach we had been using. Our list looked like this:

Benefits

1. A single website to build, maintain and promote.
2. Support for a variety of screen sizes, not just the extreme cases of large desktop monitors and small handheld devices.
3. Future-friendly, because the layout will reflow based on screen size and not just the size of today’s popular devices.

Drawbacks

1. Content meant only for large-screen devices is often delivered to small screens and simply “turned off” with CSS media queries, creating unnecessary downloads.
2. Because the markup is a one-size-fits-all solution, we are unable to change the source order of that markup (or eliminate unnecessary elements from the markup completely) based on the device or screen size.

What you will likely notice here is that the drawbacks we identified with a responsive approach are areas where a mobile-only solution excels. We wanted the best of both worlds for our new website — the advantages that a responsive approach and a mobile-specific solution have to offer.

Starting With Content

One of the common differences between a responsive design and a dedicated or mobile-only design is in the content or features that are delivered to the browser. A mobile-specific website often features only a subset of content found on the “normal” version of the website. This is one of the ongoing debates about the two approaches, and proponents of mobile-only websites often argue that mobile users want access only to content that is “important” to them.

The problem with this line of thinking is that what is “important” to a user — any user — changes according to their situation. Eliminating access to content based solely on the device someone is using is sure to alienate and frustrate anyone who doesn’t fit into the ideal scenario that you envisioned when you decided what to include in and what to eliminate from your mobile website.

Our belief has always been that all users should have access to all of the content that the website has to offer, but we wanted to make sure this was indeed the right answer for our website and our users. To help us determine the right approach, we turned to our analytics and found no discernible difference between the type of content requested by our mobile visitors and by our visitors on non-mobile devices. Content that was popular for desktop users was similarly popular for mobile visitors.

Additionally, we sat down and spoke with some of our current clients, who represent a large part of our website’s audience, and asked them some questions, including “What content are you coming to our website for when on a desktop computer?” and “How about on a tablet or a phone?” The interviews were obviously more in depth than this, but you can see what we were asking. Once again, we found that the content they were seeking was the same, regardless of the device they were using.

Data Dictates Direction

The findings from our research reinforced our belief that a responsive approach, which provides access to the same content across all devices, was the right choice for our website. This research also enabled us to determine what content on our website was not being accessed at all. When we discovered pages that were not being used by our audience, we cut them from our site map. Similarly, content that was most popular was treated appropriately in our content hierarchy and our layout plans for the redesign.

By starting the project by looking at our content and gathering data on what was important to our audience and what was not, we were able to move into the design phase with an informed plan for what content our website’s design needed to support.

Designing To The Extremes

I have heard the arguments for designing in the browser, and I appreciate many of the benefits this approach brings. That being said, having tried designing in the browser on a number of occasions, I have found that my own design workflow is simply better suited to starting in Photoshop. In no way do I think this is the right decision for everyone, but it is the right decision for me, and it is how I began this design.

For responsive designs, I use a method that I refer to as “designing to the extremes.” I start by designing the desktop version of the website. In this version, I work out the design’s typography, tone and overall visual direction — as well as the layout for the large screen view of the website. Once I am happy with this version of the design, I work on the small screen or “mobile” version of the website, using the same visual direction, but adjusting the layout as appropriate for the smaller screen.

At the end of this process, I have visual examples of the two layouts of the website that will vary the greatest — the biggest and the smallest screen versions of the design. These two examples will guide me as I begin the website’s front-end development.

The “extreme” versions of the new website design

Mobile First

The “mobile-first” approach to responsive design is not a new idea. This method, whereby you build the mobile experience and layout of a website first and then use media queries to adjust and add to that layout as the screen size grows, has been considered a best practice in responsive Web design for some time now. While not a new approach, it is still an important one, and coupled with our plan to “start with the content,” it helped us to address one of the shortcomings that we identified in our responsive projects — the problem of delivering unnecessary content.

By starting with content, we ensured that all of our website’s content was relevant and appropriate to all users, mobile or otherwise. This meant that we didn’t have to worry about delivering large amounts of content in the markup only to have to hide it visually with CSS. The mobile-first approach meant that images would be delivered only to devices they are intended for. For instance, our new design called for a background graphic of a watercolor texture.

The image, which is quite large, is intended to be a part of the design only on larger screens (660 pixels and up). Because our CSS starts with the mobile design first, this large graphic is never sent to small-screen devices because the media query that loads the image is activated only by larger screens. That media query, which applies the background to our html element, looks like this:

@media only screen and (min-width: 660px) {
   html {
   background: url(/images/bg-watercolor.jpg) no-repeat fixed center top;
   }
}

In addition to adding that background image, this media query that is triggered at 660 pixels also introduces a number of other layout changes to the website, transitioning from what we consider the small-screen layout to what will become the various larger-screen versions.

Building To The Design, Not To Devices

When we began using responsive design in our Web projects, we focused on known devices and screen sizes, and our media queries often reflected those known devices (iPhones, iPads in both portrait and landscape orientation, laptops, widescreen desktops, etc.). Over time, we found that this was not the best approach because it only addressed the devices and screen sizes that were popular today and not those that may come in future. One of the strengths of responsive Web design is its future-friendly aspect. So, to fully realize that strength, we moved away from building to devices, instead allowing the design to dictate our media query breakpoints.

The mobile-first method established the baseline for our website’s CSS. With that in place, we launched the website in a browser and scaled it to the smallest size of our layout (we set a minimum width of 320 pixels in the CSS). Slowly, we increased the size of our browser window to see how the layout responded. As the browser window widened, we noticed that the layout began to feel strained. It was at these points that we would need to establish a new media query to adjust the layout.

To help us with this approach, we created a graphic and set it as the background of our desktop. With vertical lines showing us a width of 320 pixels (our smallest size) and then a break at every hundred pixels starting with 400, we used this as a guide as we scaled the browser window to determine where the design started to break down, and then used those approximate pixel values in the resulting media queries that we added to the CSS.

This desktop background can be used to help determine the breakpoints needed for a responsive design.

This approach of adding media queries based on the needs of the design, rather than on known device sizes, enables a website to better respond to a wider range of screen sizes. It does, however, end up filling the CSS file with more media queries than if you were using device-specific breakpoints. Still, while the number of media queries is higher, the queries themselves tend to be very small because you are making few changes with each one, rather than making the sweeping changes normally needed for device-specific media queries.

One area of our website where this increase in media queries is evident is the navigation.

Responsive Navigation

Handling navigation is one of the most challenging aspects of responsive design. For our website, we essentially have four main areas of navigation.

1. Primary navigation;
2. What we call the “help navigation,” which links to various portals and services that our clients use;
3. Footer navigation;
4. Section-specific navigation, which is presented on subpages of the website (for the larger-screen layouts) in the left-hand column.

Because our CSS is mobile-first, one of the first things we did was to establish the navigation for our small-screen layout. This meant turning off the display of all of the navigation sections expect for the primary navigation.

#helpNav, .subNav, footer nav {
   display: none;
}

Now, I said earlier that our goal was not to deliver content to devices only then to “turn it off.” That was indeed the goal, but with our navigation, we had to accept that this was how we needed to do it. We weren’t able to find another, simple yet maintainable, solution. Luckily, the content we are delivering and not displaying turns out to be only a few lists, so the impact on downloading for visitors is minimal.

The help navigation is the one area of the website that has been considered to be not relevant to most users, because these links and portals are intended only for desktop users. Now that’s a big assumption and a bold statement. The rationale behind this was that the portals themselves, which are all third-party applications over which we have no control, are not optimized for very small-screen mobile devices, and the services they offer are geared to supporting corporate clients with large screens on desktops.

This situation informed our decision to remove that section from the small-screen version and in the months that the site has been live we received no comments or complaints from our user base regarding that decision. For the other two navigation areas, our subpage section navigation and our footer navigation, this content is presented as part of the primary navigation for small-screen devices. This is why we turn off these three areas by default.

Later, as the screen size increases and we get past the 660-pixel point where the larger-screen design begins to show, we will style these navigation areas as needed.

Here is the CSS for our help navigation:

#helpNav {
   display: block;
   position: absolute;
   top: 1px;
   right: 0px;
   width: 100%;
   text-align: right;
}

#helpNav ul {
   padding-left: 10px;
}

#helpNav li {
   display: inline;
   padding-right: 6px;
   padding-left: 6px;
   background-color: #2f6a98;
}

#helpNav a {
   font-size: 12px;
   padding: 0 6px;
   color: #FFF;
   border-radius: 20px;
}

#helpNav a:hover {
   background-color: #f66606;
}

And our subpage navigation areas:

.subNav {
   display: block;
   width: 25%;
   float: left;
}	

.subNav h4 {
   padding-bottom: 8px
}

.subNav ul {
   list-style: disc;
   color: #c65204;
   padding: 0 0 20px 20px;
}

.subNav li {
   padding-bottom: 14px;
}

.subNav a {
   color: #186483;
   font-size: 21px;
   font-family: 'RokkittRegular', Times, "Times New Roman", serif;
   line-height: 1;
}

Finally, our footer navigation:

footer nav {
   display: block;
   margin-top: 40px;
}

footer nav ul {
   list-style: none;
}

footer nav li {
   padding-bottom: 24px;
   width: 19%;
   padding: 0 5% 20px 0;
   float: left;
}

.innerNav li {
   width: 100%;
   float: none;
   padding-bottom: 4px;
}

footer nav a {
   color: #575454;
   font-size: 12px;
}

.innerNav a {
   font-weight: normal;
}

Pixels Vs. Ems

You will notice that we have used pixel values in our media queries. Using pixel-based media queries is how we, like many front-end developers, began implementing responsive design, and we have maintained the practice as part of our responsive workflow. In the spirit of “building a better responsive website,” though, I’ll point out an article on proportional media queries using ems that was brought to our attention during the editing of this piece. Essentially, to improve the appearance of the site when zoomed in, it’s highly recommended to convert px-media queries into em-media queries by dividing all pixel values by the body font-size.

This wonderful article has caused us to rethink our pixel-based approach to media queries, and it is another example of how we continue to refine our responsive approach. While we did not use ems in our media queries in this particular project, we are experimenting with them now, and the approach is worth mentioning here.

Primary Navigation

Our primary navigation is presented on wide screens as a horizontal row across the top of the layout. On small screens, this primary navigation structure changes so that there is a large “Menu” button at the top of each page that links to the navigation at the bottom of the page. To accomplish this, we added a link with an ID of menuLink and a class of tabButton in the header, which is near the start of the markup. We then placed a division with an ID of mainNav at the very end of the markup. Inside that division is our main navigation, which is simply an unordered list with a number of other unordered lists inside it for the subpage section menus. We also have another anchor with an ID of toTop, which acts as a link back to the top of the page.

The small-screen layout presents a “Menu” button at the very top of the layout.

Continuing our mobile-first approach, we styled the menu link at the top of the small-screen layout to look like a button.

#menuLink a {
   float: right;
   margin: -56px 8px 0 0;
}

.tabButton a {
   color: #FFF;
   font-family: 'RokkittRegular', Times, "Times New Roman", serif;
   font-size: 20px;
   background-color: #45829b;
   padding: 10px 12px;
   border-radius: 10px;
}

.tabButton a:hover {
   background-color: #f66606;
}

Our main navigation menu is set to its small-screen display:

#mainNav {
   margin-top: 30px;
   width: 100%;
}

#mainNav #toTop a {
   float: right;
   margin: 0 8px 0 0;
   font-size: 20px;
}	

#mainNav nav {
   padding-top: 80px;
}

#mainNav ul {
   list-style: none;
}

#mainNav li {
   background: #45829b;
   border-bottom: 1px solid #abc7d2;
   padding: 4px 10px 4px 15px;
}

#mainNav li:hover {
   background-color: #f66606;
}

#mainNav a {
   font-size: 24px;
   color: #FFF;
   font-family: 'RokkittRegular', Times, "Times New Roman", serif;
}

Our website’s primary navigation as presented for small-screen layouts

Our submenus, which are set not to display initially, we can now display as the page requires. Each of these submenus has a unique ID, such as servicesTab, and each section of the website has a class applied to the body tag. The class for the “Company” section is companyPage. We use this class to set styles for that entire section of the website. We use the class of the submenu sections to turn on the submenus as needed when a section is active.

.companyPage #companyTab ul,
.newsPage #newsTab ul,
.contactPage #contactTab ul,
.servicesPage #servicesTab ul {
   display: block;
}

The subpage navigation displayed for the small-screen layout

Getting Larger

As the larger-screen layouts kick in — once again with the media query for 660 pixels and above — we dramatically change the primary navigation’s layout. First, we turn off the display of the menuLink and toTop buttons because they are no longer needed:

#menuLink a, #toTop a {
   display: none;
}

Next, we style the mainNav horizontally across the top of the page to achieve the larger-screen design:

#mainNav {
   position: absolute;
   top: 92px;
   margin: 18px 2% 0 2%;
   width: 96%;
   text-align: center;
}

#mainNav nav {
   padding: 5px 0;
   border-top: 1px solid #bacfd7;
   border-bottom: 1px solid #bacfd7;
}

#mainNav li {
   background: none;
   display: inline;
   border-bottom: 0;
   border-right: 1px solid #bebebe;
   padding: 0 6px 0 8px;
   margin: 4px 0;
}

#mainNav a {
   font-size: 16px;
   color: #45829b;
}

#mainNav a:hover {
   color: #f66606;
}

These styles set the look of our primary navigation. But to build to the design, instead of to the device, we will need to make small adjustments as the screen size grows. Our primary navigation’s font has eight different sizes in total for the larger-screen layouts, changing as the screen grows and as we have more room to work with. Figuring out how best to display this navigation so that it is both easy to use and visually attractive was one of the challenges we faced while working with this responsive design.

Initially, our font size is set to 16 pixels. Once we hit 767 pixels in width, we bump that to 18 pixels.

@media only screen and (min-width : 767px) {
   #mainNav a {
      font-size: 18px;
   }
}

We continue this pattern a number of times, increasing the font size finally to 27 pixels as the website reaches its largest size. In this way, the website’s navigation truly responds best to the design and to the screen being used to view that design.

Getting Help From The CMS

Our preferred CMS is ExpressionEngine, and the specifics of this next portion of the article refer to that platform, but the general idea of what we accomplished with ExpressionEngine could undoubtedly be applied to other popular CMS platforms as well.

One of the biggest drawbacks to the responsive approach is that you cannot deliver different markup or a different source order to different devices. This drawback is what we wanted to overcome with our CMS. During our experimentation and research, we stumbled upon an article titled “Going Truly Adaptive With ExpressionEngine.” Using the approach detailed in this article, we were able to use a device-detection script to set a variable in the system of either mobile or full. We could then conditionally load markup into our website based on which of these variables was met.

By going further and using the device detection, we were able to make other very small changes to
further improve the mobile experience. To us, this was kind of like progressive enhancement, where we created a quality solution and then tried to take it further to deliver a slightly more optimized experience.

Make sure to read Chris Coyier’s similar view on combining RWD and mobile templates in which he argues about mixing and matching a variety of techniques for your mobile strategy.

Starting Small

You could certainly use these variables to deliver completely different markup and source orders to different devices, but our initial approach was a little less extreme. Because we had already decided that all versions of our website would have access to all content, we initially used this variable method to make slight adjustments to how much of that content would be delivered. For instance, on our website’s home page, we show teasers for a variety of content found within the website. For the “Culture” and “Project Spotlight” sections, an image accompanies each post.

The images are a nice-to-have addition but certainly not critical, so we do not deliver these images to mobile users at all.  Now, I do not mean that we use CSS to turn off their display, which would cause the data to get delivered to the browser anyway; instead, we use the variables we have established to omit the images from the markup unless they need to be shown.

The teaser images are nice to have, but not critical to the content or layout.

The syntax is quite easy. Once you have established your variables — which the aforementioned article explains how to do easily by adding a little script to the system’s config.php file — you can use those variables like an if statement.

{if global:site_version=='full'}<img src="{teaser-image}" alt="{title}" />{/if}{if global:site_version=='mobile'} {title}{/if}

This is ExpressionEngine syntax, but you should be able to read this and easily see what is happening. If the full variable is met, then we deliver the teaser-image from that article’s entry in the database. If the mobile variable is met instead, then we deliver the title of the article.

We use this same approach for the home page’s “News” and “Blog” sections, delivering three short teasers if the full variable is met and only one if the mobile one is. That syntax looks like this:

{exp:channel:entries channel="news" {if global:site_version=='full'}limit="3"{/if}{if global:site_version=='mobile'}limit="1"{/if}}

Here you see that we are accessing the ExpressionEngine channel named news. We use our variable to determine how many recent entries will be displayed from that channel, using the limit parameter.

Taking It A Step Further

In the website’s “Culture” section, we publish articles that are often accompanied by a number of images. Unlike the teaser images on the website’s home page, the images in the articles themselves are critical to that content, because they help to carry or reinforce the article’s point. Now, while the images are important, they are also quite large — each one is 650 pixels wide, and most articles include at least three images and as many as ten. Because mobile devices will show the images at about half their original size, the downloads for the full-sized images would be quite substantial. To address this, we once again turned to our device detection and variables.

For each article, we produce two sets of images: one full sized at 650 pixels wide and a second set at almost half that size. We then use the variables in our article (but first we need to allow ExpressionEngine code in our page’s template), and we include the markup for both sets of images — but only one set is ever delivered to the browser. Mobile devices get the smaller images, while everything else gets the normal set.

We take a similar approach with the home page’s large billboard area. These rotating banner messages and images are used to promote important items, such as upcoming events, new services and announcements, in a bigger way than we do in the other areas of the home page. The billboard is another nice-to-have element that is intended for large displays only. Once again, we use the variables to deliver the main billboard division, as well as the JavaScript that runs it, to appropriate devices — effectively enabling us to send different markup to different devices and eliminating yet another of the drawbacks that we identified at the start of this project.

Through a mobile-first approach and with our CMS’ help, we are able to deliver our home page to desktop users at 738.3 KB and dramatically reduce that to only 174.4 KB for mobile users.

Fallback Plans

One of the questions that has always bothered me about a mobile-only approach and device detection is, What happens if that detection fails? Is the “normal” version of the website delivered to the mobile device, thereby rendering your carefully designed mobile experience null and void? This possibility is one of the main reasons why I have avoided a mobile-only solution that uses device detection in the past.

For our new responsive workflow, we are using device detection, but our process has equipped us with excellent fallbacks in case that detection fails for some reason. Because we are using a responsive approach, even if the full version get delivered to a mobile browser, the layout will be suited to that device because our CSS will adjust the website’s layout accordingly.

Additionally, because we went with a mobile-first build, items not intended for small screens, such as the giant background graphic mentioned above, do not get delivered either. The only thing that will fail is what we have done with our device detection-generated variables. If the worst-case scenario happens and our detection fails, then the mobile version would simply get a few extra images or a little markup or JavaScript that it does not need. The experience would still be suited to mobile. Not bad at all for a “worst-case scenario.”

Progress, Not Perfection

A few years ago, a client said something to me that has stuck with me to this day. Talking about his website, he said:

“Don’t worry about making my website perfect. Just work on making it better. If we’re constantly making it better, we’re going in the right direction.”

This idea has guided me over the years and reminded me never to dismiss a better solution simply because it is not perfect.

I know this is not a perfect solution, and I am OK with that because it is an improvement to our previous responsive workflow. It has helped us overcome some obstacles that we identified, and we can now bring those improvements to other projects we are working on. Yes, there are still many issues that we have yet to effectively address, such as the delivery of higher-quality images to HD displays as well as the use of em-based media queries referred to earlier in this piece, but we are moving in the right for this project and for others.

Who knows? Maybe someday someone will build a “perfect website.” In the meantime, we will focus on progress, not perfection, as we continue to make small improvements along the way, working to build a better responsive website.

(al)

---

© Jeremy Girard for Smashing Magazine, 2013.

Everyone likes stuff that moves about on the Web, right? Remember how you cried joyful tears when you first used <marquee>? I do. I nearly sobbed all the water out of my body as I gazed upon “JAKE’S COOL WEBSITE” bobbing back and forth in uppercase serif. Of course, we’re more mature as an industry these days.

We’ve learned that users don’t want websites to look like a CSI console having a personal crisis; instead, we go for smooth transitions that enhance the experience, rather than being the experience themselves. In terms of animation APIs, we’ve been poorly catered to, leaving us to hack around with timers that weren’t really built for animation. Things have been steadily improving in that area, but the new Web Animation specification looks set to shake things up a lot.

So, why do we need a new animation spec? Don’t we have enough ways to animate things already?

Optimizing the way to makes things move.

Let’s Animate A Thing!

Imagine we wanted to animate something horizontally from one left position to another, over three seconds, and then do something on completion. We can do this without JavaScript, using CSS animations, but if the start and end positions are programmatically determined, then we’ll need something that we can control from script.

Using requestAnimationFrame

If you’re performing visual updates with JavaScript, then you should be using requestAnimationFrame. It synchronizes itself to real screen updates, giving you as much time as possible to get everything ready for rendering. If the browser is on a 60 Hz screen (most are) and your frames can be constructed in less than a 60th of a second, then you’ll get 60 frames per second (FPS). requestAnimationFrame prevents you creating frames that don’t have time to display. Synchronizing to the screen’s rate is important; 30 FPS looks smoother than 40 FPS because 40 doesn’t divide into the screen’s native 60 Hz. HTML5 Rocks has a great article on syncing to the screen.

Unfortunately, jQuery uses setInterval, which isn’t as smooth as requestAnimationFrame. requestAnimationFrame doesn’t trigger while the tab or window isn’t visible, which is A Good Thing. Unfortunately, this has created backwards incompatibility with websites that rely on setInterval’s less optimal behavior of continuing to run in the background. You can opt into requestAnimationFrame via a plugin. Go and add that to all of your pages using jQuery animation now — I promise to wait for you — just make sure that switching tabs doesn’t break your animations.

Anyway, enough chatting. Here’s a simple animation using raf, moving a box horizontally from 250px to 500px. Note that the box starts at 0px, so there’s a jump to 250px when the animation starts; this proves we can start the animation from a point other than its current rendered position.

Here’s the code:

// On button press…
animateLeft(elm, '250px', '500px', function() {
  console.log("Done!");
});

// The implementation
function animateLeft(elm, from, to, done) {
  // Turn our CSS values into numbers
  // We're being lazy and assuming they're in px
  from = parseInt(from, 10);
  to = parseInt(to, 10);
  // Work out the amount we need to move the box
  var diff = to - from;

  var duration = 3000;
  var startTime = performance.now();

  // Set initial position
  elm.style.transform = 'translate(' + from + 'px, 0)';

  function frame(time) {
    // How long has the animation been running?
    var animTime = time - startTime;
    // Are we done?
    if (animTime >= duration) {
      // It's likely that the last rendered position wasn't the
      // final position, so we set it here.
      elm.style.transform = 'translate(' + to + 'px, 0)';

      done();
    }
    else {
      // What position should the box be in?
      var position = from + (animTime / duration * diff);
      elm.style.transform = 'translate(' + position + 'px, 0)';
      // Request our next frame
      requestAnimationFrame(frame);
    }
  }
  // request our first frame
  requestAnimationFrame(frame);
}

The above is the ideal according-to-specification code. In the working example, I had to deal with vendor prefixes on requestAnimationFrame and transform. We’re animating using transform and translate, rather than left, because they allow for subpixel positioning and, therefore, smoother animation, one of the advantages that Flash had over HTML for so long.

This is a pretty large and stinky chunk of code to simply animate a thing, and it would get a lot larger if we handled differing CSS units and easing. Of course, you could stick all of the complicated bits in a library and give yourself a simpler API. Here’s the frame-by-frame breakdown:

This is the timeline view of Chrome Developer Tools while the animation is running. Each frame executes some JavaScript, recalculates the style and layout, paints the box, and then sends that to the GPU, which composites it to the page. The draw time spikes a few times, resulting in a jolt in the animation. This is caused by delays in interacting with the GPU (the gray spikes) or delays caused by other JavaScript (the yellow spikes).

This highlights a performance bottleneck of JavaScript-driven animation:

Here, another bit of JavaScript does some stuff and takes 250 milliseconds to do it. While this is happening, our animation can’t move. In the real world, this could be a social-media button waking up and doing something slow, or it could be some of your own script triggered by a user interaction. In the example above, I made a button that performs a while loop for 250 milliseconds (I’m pretty sure this code is in every social-media button). If you press it during the animation, it will block the animation and look nasty.

I recently sung the praises of requestAnimationFrame for animating canvas, so why am I hatin’ on it now? JavaScript-driven animations aren’t a bad practice — they give you full control frame by frame and pixel by pixel when combined with <canvas> — but returning to JavaScript land 60 times a second is overkill for DOM animations that have a defined start and end. Ideally, we want to tell the browser all about our animation and leave it to do its thing, while we get on with something else.

Of course, we kinda have this already.

Using CSS Transitions

.whatever {
   transform: translate(250px, 0);
   transition: transform 3s linear;
}
.whatever:hover {
   transform: translate(500px, 0);
}

CSS transitions and animations let the browser make all kinds of optimizations because it knows the end point of the animation. They’re not blocked by JavaScript on some platforms, such as Chrome for Android and desktop Chrome with threaded compositing enabled in about:flags (expect threaded compositing to arrive in more browsers).

Let’s script it!

function animateLeft(elm, from, to, done) {
  // Set initial position
  elm.style.transform = 'translate(' + from + ', 0)';
  // Define the transition type
  elm.style.transition = 'all 3s linear';

  function transitionEnd(event) {
    // Beware of bubbled events
    if (event.target != elm) { return; }
    // Clear the transition
    elm.style.transition = '';
    // We don't want that listener firing for future anims
    elm.removeEventListener('transitionend', transitionEnd);

    done();
  }

  // Listen for end of transition
  elm.addEventListener('transitionend', transitionEnd);
  // start the transition
  elm.style.transform = 'translate(' + to + ', 0)';
}

Here’s a live example. It’s much simpler than our raf example, but a bug has crept in. The from is ignored; the animation starts from the element’s current position, even though we’ve explicitly set it to something else. Why?

// Set initial position
elm.style.transform = 'translate(' + from + ', 0)';
// Define the transition type
elm.style.transition = 'all 3s linear';
// …and later…
// Start the transition
elm.style.transform = 'translate(' + to + ', 0)';

Changing properties in the style object doesn’t change the element’s computed style. The style is computed only when the browser needs to know the impact that those styles will have on the page (for example, when the element needs to be drawn). The element doesn’t need to be drawn between the two assignments to elm.style.transform, so the first assignment is ignored.

Of course, we can hack it:

// Set initial position
elm.style.transform = 'translate(' + from + ', 0)';
// Abracadabra!
elm.offsetWidth;
// Define the transition type
elm.style.transition = 'all 3s linear';
// …and later…
// start the transition
elm.style.transform = 'translate(' + to + ', 0)';

offsetWidth returns the rendered width of an element, including padding. To calculate this, the browser needs to take into account all of the styles on the page, including the transform that we set for the initial position. That works. Check out the live example.

Performance is steady at 60 FPS. And we can see that each frame is a simple composite; all of the heavy lifting is farmed out to the GPU.

However, relying on offsetWidth to force the element into its starting position is hacky, and it’s conceivable that a future browser release will find a way to optimize out the reflow, breaking our hack.

Reflows are not without cost either:

The Developer Tools warn us about this use of offsetWidth, because the browser calculates a layout that it never draws. The test page is very basic, so the layout cost is cheap, but things can be very different in the real world.

So, is there a less hacky, more reliable way?

Enter CSS Animations

CSS animations have explicit keyframe values. Let’s script them:

function animateLeft(elm, from, to, done) {
  // Create a style element for our animation
  var style = document.createElement('style');
  // Generate a unique name
  var animName = 'anim' + Date.now() + Math.floor(Math.random() * 10000);

  // Build the CSS
  style.textContent = '' +
    '@keyframes ' + animName + ' { ' +
      'from { ' +
        'transform: translate(' + from + ', 0);' +
      '}' +
      'to {'
        'transform: translate(' + to + ', 0);' +
      '}' +
    '}';

  // Add it to the page
  document.head.appendChild(style);

  function transitionEnd(event) {
    // Beware of bubbled events
    if (event.target != elm) { return; }
    // Clear the animation
    elm.style.animation = '';
    // Clean up the DOM
    document.head.removeChild(style);
    // Retain the final position
    elm.style.transform = 'translate(' + to + ', 0)';
    // We don't want that listener firing for future anims
    elm.removeEventListener('animationend', transitionEnd);

    done();
  }

  // Listen for end of transition
  elm.addEventListener('animationend', transitionEnd);

  // Start the animation
  elm.style.animation = animName + ' 3s linear forwards';
}

Ugh! All of that just to move a thing? It works, but all of that DOM work is heavy-handed for what we’re trying to achieve. Also, if an animation is cancelled halfway through (for example, if the animation style is changed), then animationend will not fire — meaning that our done callback won’t fire or, worse, it’ll fire at the end of some future unrelated animation. There is no animationcancel event.

Web Animations, Save Us From This Mess!

It’s early days for the Web Animations specification, but it’s pretty exciting. It brings a boatload of animation performance and synchronization features natively to the DOM that JavaScript libraries currently have to hack their way through.

The specification itself is kinda terrifying. My heart sank as I opened the page and watched the scrollbar get smaller and smaller. But, thankfully, most of it is implementation detail.

Here’s how we’d script our animation in the brave new world of Web Animation:

// Set our start position
elm.style.transform = 'translate(250px, 0)';
// Animate to the end position
var anim = elm.animate({
  transform: 'translate(500px, 0)'
}, 3);
// Do something on completion
anim.onend = function() {
  console.log('Done!');
};

Here, elm is an HTMLElement. The API is intuitive, especially if you’ve created animations with something like jQuery.

Like CSS animations and transitions, it gives the browser the full story up front, so we get all of the same optimizations without having to dynamically build CSS. Web Animations solves this by allowing us to tell the browser the full story of what we’re going to do. Then, the browser can go off and animate things itself.

Web Animations give us the scripting API to browser-driven animation that’s sorely missing. Above is the “Hello world” example. The specification includes advanced easing, path-based animation, parallelization, synchronization, interrupting and adapting, all in a way that the browser can take away from JavaScript land and optimize accordingly.

It’s still very early days, so don’t throw out your animation libraries yet. But if you want to experiment with the new API and provide feedback, a polyfill is tracking the rapidly evolving spec. Exciting times!

(al)

---

© Jake Archibald for Smashing Magazine, 2013.

There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn’t scale well. There are no “common” screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks.

This sounds much better. But it still leaves us with the question, How do you determine whether the layout is broken? One logical answer is to look at classic readability theory and to define our breakpoints based on that.

What Do The Books Say?

According to Robert Bringhurst, “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size.” And Josef Müller-Brockmann writes that, “A column is easy to read if it’s wide enough to accommodate an average of 10 words per line.” A few variables determine the exact number of characters or words, but this is the basic theory: If you start with a small screen and you grow it, every time the width of the main content grows wider than either 75 characters or 10 words, something should happen. Simply said, these are your breakpoints.

Variables That Define The Ideal Measure

Many variables define an ideal measure. For instance, the German language has longer words than English, which could very well result in a wider column. Yes, you read that correctly: you could have different grids based on the languages for international websites. Font, font size, contrast ratio with the background, leading, kerning, type of text, etc. — all of these could result in different lengths of line.

Most importantly, the insights and experience of the designer are a major influence on the measure. You might very well decide that a measure between 75 and 90 characters is ideal. But I am not a designer, and I’m not a typographer, so I’ll just stick to the theory that I find in the books I read. Talented people who know what they’re doing are, of course, invited to play with the theory.

I created this simple international measure slider to give you an idea of how wide a measure can be. (Yes, I know, it’s weird.) This little tool looks only at language and font family, but you’ll see that these two variables alone can lead to some extreme results. Just compare German or Polish with English or, even better, German set in Verdana with English set in Georgia. The difference is huge: 10 German words set in Verdana can be 38.5 ems wide, while 10 English words set in Georgia are just 22 ems wide. In most default browser settings, that would be 616 pixels versus 352 pixels. You see, these two simple factors should have a major impact on the grid.

A good measure is essential for articles. I know that the Web is not just articles. You could very well be working on a Web app with very little text to read. But even then, starting with the measure when defining breakpoints might be a good idea.

Our Example

As an example, I’ll be using a simple blog post. It’s a structured but simple article, with some common semantic elements in it. These elements are not necessary to define the breakpoints, but I think they might help; typography can be a logical starting point. I’ve left out the header and logo — let’s concentrate on the content first.

Of course, if you open this unstyled article in a browser, it will look ugly. There is no styling except for the default styling that the browser uses for the elements in the article. The text is as wide as the browser, which is probably too wide on a desktop. This could very well be what someone on IE 6 sees — a somewhat accessible article with rudimentary styling.

By adding just some basic typographic styling and a max-width attribute, the article immediately looks much better. This page can now serve as a starting point to define all of the different responsive grids. This single column probably needs some adjustment for small screens, and on wider screens we should probably add some columns, either to make things prettier or to show more information such as navigation or asides.

Logical Breakpoints

I never paid attention in maths class before dropping out of high school a long time ago, so I’ll stick to a very simple grid that even I understand. Smarter people could probably use these same ideas for more complex grid systems. This article is about defining breakpoints; what you do with them is entirely up to you.

Small Screens

I’ll start with the small screen. One theory of Oliver Reichenstein, a theory I really like, is that font size doesn’t depend on screen size; it depends on the distance between our eyes and the device we’re using. We tend to hold our phones closer to our head than our laptops, so this might warrant smaller fonts. The other theory of Robert Bringhurst, as explained above, is that an ideal measure should probably not be smaller than 45 characters. In our case, where we use a 16-pixel Georgia as the default font size, this would result in a slightly smaller font size. Both theories are fine, and they both tell us to reduce the font size on small screens. So, all of the code we’d need for small screens is this:

@media (max-width: 22em) {
   body {
      font-size: .9em;
      padding: 0 1.5em;
    }
}

This says that whenever the measure is smaller than 45 characters (according to our tool), show a smaller font size. I also reduced the padding on the body to create a bit more space for the content. See the example right here.

Big Screens

Sometimes, a single column is enough. Content-focused websites, such as blogs, could very well do with a one-column layout. But multiple columns on big screens are actually a good idea in many situations. You might want to show some navigation, or perhaps you’ve found some widgets that actually make sense. You could very well choose to show these next to the main content.

But you could do other things as well. For instance, right at the point where there is room for an extra column, we could play with the layout of our article. I added a 33%-wide column to the left, filled with the heading and the first paragraph of the article. Other elements, such as block quotes and images, could fill this gap as well.

The code gets a bit more complex here. And this is definitely not the only way, or the most maintainable way, to create a layout like this. But this is how I did it.

@media (min-width: 34em) {
   body {
      max-width: 51em;
   }

   article {
      width: 66.66666%;
      margin: 0 0 0 33.333333%;
   }

   h1, h1 + p {
      margin: 1em 0 1em -50%;
   }

/* And some font-size adjustments */
}

When the screen is wider than 34 ems (30 ems for the content and 4 ems for the margin), the maximum width of the body is increased to 51 ems: 34 + (34 ÷ 2). The article should now be two thirds of the total width, and the new column on the left should be one third. The h1 and p right after it should have a negative margin of one half the width of the content. This is where I really cursed myself for not paying attention in maths class!

Even Bigger Screens

We could add a third column, and a fourth and a fifth. We could also decide that we’re done. It all depends on the content. We could use that space to show some images or some relevant content. It’s really up to you and depends on the thing you’re creating. In our case, we could show the footnote to the right of the content. Now, stop laughing! I told you, I am not a designer! Here is the code for that work of art:

@media (min-width: 51em) {
   body {
      max-width: 68em;
   }

   article {
      width: 50%;
      margin: 0 25%;
      position: relative;
   }

   h1, h1 + p {
      margin: 1em 0 1em -50%;
   }

   .sidenote {
      position: absolute;
      right: -50%;
      width: calc(50% - 2em);
      font-size: .9em;
   }
}

The article is now 50% wide and has 25% of margin to the left and to the right. The side note is placed 50% to the right, outside of the content. It is 50% wide, minus 2 ems for good looks. The code for the h1 and p did not change. Note that calc does not yet work in all browsers, so a fallback is needed. The real code for the width bit looks like this:

width: 45%;
width: -webkit-calc(50% - 2em);
width: -moz-calc(50% - 2em);
width: -ms-calc(50% - 2em);
width: -o-calc(50% - 2em);
width: calc(50% - 2em);

Yes, I know that not all of these prefixes are necessary, but I prefer to use them all, always. The other option is to remember by heart which CSS feature is supported by which browser, with or without prefixes. If I understand the cascade correctly, this is perfectly harmless. And besides, it looks good. I can clearly see that cool stuff is going on in this part of my style sheet by the pattern that it generates.

So, this is it. Here we have a responsive website, based on font size and measure. The breakpoints are based on a logical unit, not on some random units like the screen sizes of devices that are in vogue right now. This scales — into the future and in the browsers of your users. Because everything is based on font size, it all responds to the preferences of the person visiting your website. The layout does not break when the font size of the browser is increased. On the contrary.

Breakpoints are not based on some random units like the screen sizes of devices.

Technically

When we started with responsive design a few years ago, we created a desktop website first and then added media queries for smaller screens, overwriting the styles for the desktop version. We found out that that’s not the right way to work. We all know by now that the best way to set up CSS is by starting with a small screen first. After all, growing is easy — trees grow, babies grow — and shrinking is hard. Ever tried to compress a car? It’s possible to a certain extent, but also very hard.

In most cases, starting with a small screen is a logical thing to do. As we make things bigger, we only need to add some media queries every now and then to adjust the layout for bigger screens. But I think it’s not really about small screens — it’s about defaults.

Defaults First

The first thing we need to define is not necessarily the styles for a small screen, but the defaults: the styles that are used throughout the website, regardless of screen size. These are things like the relationships between font sizes, white space and brand-related styles like borders and backgrounds. These styles should not be inside a media query because they are used everywhere. What we want to define in media queries are the exceptions (like a smaller font size) or additions (like grids) to these basic styles.

This could very well mean that we have to use a media query for small screens only if a certain element behaves differently. When you think about it, this happens a lot: page headers, navigation and other complex components are often radically different on small screens. It makes sense to put the code for these components in a @media (max-width) query, as I did in the example, because it’s an exception to the default.

Some Final Details

The example I showed you is very basic, and I did not explain many details. Two of them are rather important, so I’ll add them here. One is about using ems for media queries, and the other is about breakpoints.

Break Ranges

There has been some discussion lately about the term “breakpoints.” Mark Boulton and Ben Callahan think we should call them “optimization points,” and Jeremy Keith distinguishes between breakpoints and “tweakpoints.” In this article, I’ve been focusing on breakpoints — i.e. major changes in the layout when the content asks for more or less space. And now I introduce yet another term: break ranges.

We use the term “breakpoints” for media queries that make the layout completely different. We tend to use them as direct changes: when a layout reaches its maximum width, we immediately switch to the next layout. Waiting a while and adding some white space first before switching is often better. For instance, the switch between the one- and two-column layouts results in a rather small main column. Instead of switching at the exact moment that the content reaches its maximum width, we could just wait a while, as I did here. This is a very simple trick to never break the layout.

Ems in Media Queries

Using ems in media queries can be weird. You might assume that they respond to the font size specified in the CSS, but they don’t. They react to the font size of the browser that the visitor is using. This is actually logical when you think about it. If they reacted to the font size in the CSS, you could actually disable a media query from within a media query by increasing the font size. This piece of code would create an endless loop:

html {
   font-size: 100%;
}

@media (min-width: 20em) {
   html {
      font-size: 200%;
   }
}

If the media query reacted to the font size defined in the style sheet, then what would happen as we slowly increased the width of the browser? As soon as the screen got wider than 20 ems, the font size would grow twice as big. This means that the width of the page would now be 10 ems, which would mean that the browser should now ignore the media query. This would result in the smaller font size, which would immediately trigger the media query again. That’s an endless loop.

But it’s logical not only from a technical perspective, but from the user’s perspective: If the user prefers a bigger font, then the layout would always be optimized in a way that’s relative to the font size. And that’s what we’ve been doing here all along. At the same time, it can also become a pretty big mess for people like me who should have paid attention in high school: The ems that the media query uses could have a completely different size than the ems inside it. This is complex. If you want to learn more about this, definitely read Lyza Gardner’s classic article on the subject, “The Ems Have It: Proportional Media Queries FTW!.”

One thing that really bugs me is that we need a silly tool to estimate the number of characters on a line. WebKit has only now implemented the “ch” unit into its nightly builds; it will probably take some time before we can actively use it. One ch is the actual width of the 0 (zero) of the font in use. It sounds like an incredibly useful unit for responsive design, but I’m not sure how it will work with media queries. We’ll see.

Conclusion

In an ideal situation, the different grids for the various screen sizes would be defined by the content alone. There are, of course, situations in which other elements, such as banners, would more heavily define the width of the content. Even in these situations, readability theory might help; you could increase or decrease the font size of the body copy in order to stay within the margins of an ideal line width. Just don’t make the text too small — people want to read it.

Fortunately, in most other situations, classic typographic theory can help you determine the right breakpoints for your responsive website. You could even go so far as to create different layouts for different languages. When you’re working on large international websites, this might actually be a good idea. Most importantly, use the theory in this article to better design your content for all different screen sizes, on both current and future gadgets. The example I’ve shown uses a very simple grid, but in combination with more complex grids, this theory can help to create wonderful, and logical, websites.

(al)

---

© Vasilis van Gemert for Smashing Magazine, 2013.

One of the most famous interfaces in sci-fi is gestural — the precog scrubber interface used by the Precrime police force in Minority Report. Using this interface, Detective John Anderton uses gestures to “scrub” through the video-like precognitive visions of psychic triplets. After observing a future crime, Anderton rushes to the scene to prevent it and arrest the would-be perpetrator.

This interface is one of the most memorable things in a movie that is crowded with future technologies, and it is one of the most referenced interfaces in cinematic history. (In a quick and highly unscientific test, at the time of writing, we typed [sci-fi movie title] + “interface” into Google for each of the movies in the survey and compared the number of results. “Minority Report interface” returned 459,000 hits on Google, more than six times as many as the runner-up, which was “Star Trek interface” at 68,800.)

It’s fair to say that, to the layperson, the Minority Report interface is synonymous with “gestural interface.” The primary consultant to the filmmakers, John Underkoffler, had developed these ideas of gestural control and spatial interfaces through his company, Oblong, even before he consulted on the film. The real-world version is a general-purpose platform for multiuser collaboration. It’s available commercially through his company at nearly the same state of the art as portrayed in the film.

Though this article references Minority Report a number of times, two lessons are worth mentioning up front.

Figures 5.6a–b: Minority Report (2002)

Lesson: A Great Demo Can Hide Many Flaws.

Hollywood rumor has it that Tom Cruise, the actor playing John Anderton, needed continual breaks while shooting the scenes with the interface because it was exhausting. Few people can hold their hands above the level of their heart and move them around for any extended period. But these rests don’t appear in the film — a misleading omission for anyone who wants to use a similar interface for real tasks.

Although a film is not trying to be exhaustively detailed or to accurately portray a technology for sale, demos of real technologies often suffer the same challenge. The usability of the interface, and in this example its gestural language, can be a misleading though highly effective tool to sell a solution, because it doesn’t need to demonstrate every use exhaustively.

Lesson: A Gestural Interface Should Understand Intent.

The second lesson comes from a scene in which Agent Danny Witwer enters the scrubbing room where Anderton is working and introduces himself while extending his hand. Being polite, Anderton reaches out to shake Witwer’s hand. The computer interprets Anderton’s change of hand position as a command, and Anderton watches as his work slides off of the screen and is nearly lost. He then disregards the handshake to take control of the interface again and continue his work.

Figures 5.7a–d: Minority Report (2002)

One of the main problems with gestural interfaces is that the user’s body is the control mechanism, but the user intends to control the interface only part of the time. At other times, the user might be reaching out to shake someone’s hand, answer the phone or scratch an itch. The system must accommodate different modes: when the user’s gestures have meaning and when they don’t. This could be as simple as an on/off toggle switch somewhere, but the user would still have to reach to flip it.

Perhaps a pause command could be spoken, or a specific gesture reserved for such a command. Perhaps the system could watch the direction of the user’s eyes and regard the gestures made only when he or she is looking at the screen. Whatever the solution, the signal would be best in some other “channel” so that this shift of intentional modality can happen smoothly and quickly without the risk of issuing an unintended command.

Gesture Is a Concept That Is Still Maturing.

What about other gestural interfaces? What do we see when we look at them? A handful of other examples of gestural interfaces are in the survey, dating as far back as 1951, but the bulk of them appear after 1998 (Figure 5.8).

Figure 5.8a–d: Chrysalis (2007); Lost in Space (1998); The Matrix Reloaded (2003); Sleep Dealer (2008)

Looking at this group, we see an input technology whose role is still maturing in sci-fi. A lot of variation is apparent, with only a few core similarities among them. Of course, these systems are used for a variety of purposes, including security, telesurgery, telecombat, hardware design, military intelligence operations and even offshored manual labor.

Most of the interfaces let their users interact with no additional hardware, but the Minority Report interface requires its users to don gloves with lights at the fingertips, as does the telesurgical interface in Chrysalis (see Figure 5.8a). We imagine that this was partially for visual appeal, but it certainly would make tracking the exact positions of the fingers easier for the computer.

Hollywood’s Pidgin

Although none of the properties in the survey takes pains to explain exactly what each gesture in a complex chain of gestural commands means, we can look at the cause and effect of what is shown on screen and piece together a basic gestural vocabulary. Only seven gestures are common across properties in the survey.

1. Wave to Activate

The first gesture is waving to activate a technology, as if to wake it up or gain its attention. To activate his spaceship’s interfaces in The Day the Earth Stood Still, Klaatu passes a flat hand above their translucent controls. In another example, Johnny Mnemonic waves to turn on a faucet in a bathroom, years before it became common in the real world (Figure 5.9).

Figure 5.9a–c: Johnny Mnemonic (1995)

2. Push to Move

To move an object, you interact with it in much the same way as you would in the physical world: fingers manipulate; palms and arms push. Virtual objects tend to have the resistance and stiffness of their real-world counterparts for these actions. Virtual gravity and momentum may be “turned on” for the duration of these gestures, even when they’re normally absent. Anderton does this in Minority Report as discussed above, and we see it again in Iron Man 2 as Tony moves a projection of his father’s theme park design (Figure 5.10).

Figure 5.10a–b: Iron Man 2 (2010)

3. Turn to Rotate

To turn objects, the user also interacts with the virtual thing as one would in the real world. Hands push opposite sides of an object in different directions around an axis and the object rotates. Dr. Simon Tam uses this gesture to examine the volumetric scan of his sister’s brain in an episode of Firefly (Figure 5.11).

Figure 5.11a–b: Firefly, “Ariel” (Episode 9, 2002)

4. Swipe to Dismiss

Dismissing objects involves swiping the hands away from the body, either forcefully or without looking in the direction of the push. In Johnny Mnemonic, Takahashi dismisses the videophone on his desk with an angry backhanded swipe of his hand (Figure 5.12). In Iron Man 2, Tony Stark also dismisses uninteresting designs from his workspace with a forehanded swipe.

Figure 5.12a–c: Johnny Mnemonic (1995)

5. Point or Touch to Select

Users indicate options or objects with which they want to work by pointing a fingertip or touching them. District 9 shows the alien Christopher Johnson touching items in a volumetric display to select them (Figure 5.13a). In Chrysalis, Dr. Brügen must touch the organ to select it in her telesurgery interface (Figure 5.13b).

Figure 5.13a–b: District 9 (2009), Chrysalis (2007)

6. Extend the Hand to Shoot

Anyone who played cowboys and Indians as a child will recognize this gesture. To shoot with a gestural interface, one extends the fingers, hand and/or arm toward the target. (Making the pow-pow sound is optional.) Examples of this gesture include Will’s telecombat interface in Lost in Space (see Figure 5.8c), Syndrome’s zero-point energy beam in The Incredibles (Figure 5.14a) and Tony Stark’s repulsor beams in Iron Man (Figure 5.14b).

Figures 5.14a–b: The Incredibles (2004), Iron Man (2008)

7. Pinch and Spread to Scale

Given that there is no physical analogue to this action, its consistency across movies comes from the physical semantics: to make a thing bigger, indicate the opposite edges of the thing and drag the hands apart. Likewise, pinching the fingers together or bringing the hands together shrinks virtual objects. Tony Stark uses both of these gestures when examining models of molecules in Iron Man 2 (Figure 5.15).

Though there are other gestures, the survey revealed no other strong patterns of similarity across properties. This will change if the technology continues to mature in the real world and in sci-fi. More examples of it may reveal a more robust language forming within sci-fi, or reflect conventions emerging in the real world.

Figures 5.15a–b: Iron Man 2 (2010)

Opportunity: Complete the Set of Gestures Required.

In the real world, users have some fundamental interface controls that movies never show but for which there are natural gestures. An example is volume control. Cupping or covering an ear with a hand is a natural gesture for lowering the volume, but because volume controls are rarely seen in sci-fi, the actual gesture for this control hasn’t been strongly defined or modeled for audiences. The first gestural interfaces to address these controls will have an opportunity to round out the vocabulary for the real world.

Lesson: Deviate Cautiously From the Gestural Vocabulary.

If these seven gestures are already established, it is because they make intuitive sense to different sci-fi makers and/or because the creators are beginning to repeat controls seen in other properties. In either case, the meaning of these gestures is beginning to solidify, and a designer who deviates from them should do so only with good reason or else risk confusing the user.

Direct Manipulation

An important thing to note about these seven gestures is that most are transliterations of physical interactions. This brings us to a discussion of direct manipulation. When used to describe an interface, direct manipulation refers to a user interacting directly with the thing being controlled — that is, with no intermediary input devices or screen controls.

For example, to scroll through a long document in an “indirect” interface, such as the Mac OS, a user might grasp a mouse and move a cursor on the screen to a scroll button. Then, when the cursor is correctly positioned, the user clicks and holds the mouse on the button to scroll the page. This long description seems silly only because it describes something that happens so fast and that computer users have performed for so long that they forget that they once had to learn each of these conventions in turn. But they are conventions, and each step in this complex chain is a little bit of extra work to do.

But to scroll a long document in a direct interface such as the iPad, for example, users put their fingers on the “page” and push up or down. There is no mouse, no cursor and no scroll button. In total, scrolling with the gesture takes less physical and cognitive work. The main promise of these interfaces is that they are easier to learn and use. But because they require sophisticated and expensive technologies, they haven’t been widely available until the past few years.

In sci-fi, gestural interfaces and direct manipulation strategies are tightly coupled. That is, it’s rare to see a gestural interface that isn’t direct manipulation. Tony Stark wants to move the volumetric projection of his father’s park, so he sticks his hands under it, lifts it and walks it to its new position in his lab. In Firefly, when Dr. Tam wants to turn the projection of his sister’s brain, he grabs the “plane” that it’s resting on and pushes one corner and pulls the other as if it were a real thing. Minority Report is a rare but understandable exception because the objects Anderton manipulates are video clips, and video is a more abstract medium.

This coupling isn’t a given. It’s conceptually possible to run Microsoft Windows 7 entirely with gestures, and it is not a direct interface. But the fact that gestural interfaces erase the intermediaries on the physical side of things fits well with erasing the intermediaries on the virtual side of things, too. So, gesture is often direct. But this coupling doesn’t work for every need a user has. As we’ve seen above, direct manipulation does work for gestures that involve physical actions that correspond closely in the real world. But, moving, scaling and rotating aren’t the only things one might want to do with virtual objects. What about more abstract control?

As we would expect, this is where gestural interfaces need additional support. Abstractions by definition don’t have easy physical analogues, and so they require some other solution. As seen in the survey, one solution is to add a layer of graphical user interface (GUI), as we see when Anderton needs to scrub back and forth over a particular segment of video to understand what he’s seeing, or when Tony Stark drags a part of the Iron Man exosuit design to a volumetric trash can (Figure 5.16). These elements are controlled gesturally, but they are not direct manipulation.

Figure: 5.16a–c Minority Report (2002), Iron Man (2008)

Invoking and selecting from among a large set of these GUI tools can become quite complicated and place a DOS-like burden on memory. Extrapolating this chain of needs might very well lead to a complete GUI to interact with any fully featured gestural interfaces, unlike the clean, sparse gestural interfaces that sci-fi likes to present. The other solution seen in the survey for handling these abstractions is the use of another channel altogether: voice.

In one scene from Iron Man 2, Tony says to the computer, “JARVIS, can you kindly vacuform a digital wireframe? I need a manipulable projection.” Immediately JARVIS begins the scan. Such a command would be much more complex to issue gesturally. Language handles abstractions very well, and humans are pretty good at using language, so this makes language a strong choice.

Other channels might also be employed: GUI, finger positions and combinations, expressions, breath, gaze and blink, and even brain interfaces that read intention and brainwave patterns. Any of these might conceptually work but may not take advantage of the one human medium especially evolved to handle abstraction — language.

Lesson: Use Gesture for Simple, Physical Manipulations, and Use Language for Abstractions.

Gestural interfaces are engaging and quick for interacting in “physical” ways, but outside of a core set of manipulations, gestures are complicated, inefficient and difficult to remember. For less concrete abstractions, designers should offer some alternative means, ideally linguistic input.

Gestural Interfaces: An Emerging Language

Gestural interfaces have enjoyed a great deal of commercial success over the last several years with the popularity of gaming platforms such as Nintendo’s Wii and Microsoft’s Kinect, as well as with gestural touch devices like Apple’s iPhone and iPad. The term “natural user interface” has even been bandied about as a way to try to describe these. But the examples from sci-fi have shown us that gesturing is “natural” for only a small subset of possible actions on the computer. More complex actions require additional layers of other types of interfaces.

Gestural interfaces are highly cinemagenic, rich with action and graphical possibilities. Additionally, they fit the stories of remote interactions that are becoming more and more relevant in the real world as remote technologies proliferate. So, despite their limitations, we can expect sci-fi makers to continue to include gestural interfaces in their stories for some time, which will help to drive the adoption and evolution of these systems in the real world.

This post is an excerpt of Make It So: Interaction Design Lessons From Science Fiction by Nathan Shedroff and Christopher Noessel (Rosenfeld Media, 2012). You can read more analysis on the book’s website.

(al)

---

© Chris Noessel for Smashing Magazine, 2013.

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over five years now, and we are very thankful to all the designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for March 2013. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

• All images can be clicked on and lead to the preview of the wallpaper,
• you can download the wallpapers pack for Windows 7/8,
• You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Oooops!

Designed by Elise Vanoorbeek from Belgium.

• preview
• with calendar: 1280×800, 1366×768, 1440×900, 1680×1050, 1920×1200
• without calendar: 1280×800, 1366×768, 1440×900, 1680×1050, 1920×1200

School Night

Designed by Hilda Rytteke from Sweden.

• preview
• with calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Happy Easter

Designed by Christina Mokry from Germany.

• preview
• with calendar: 320×480, 1280×800, 1280×1024, 1920×1080, 1920×1200, 2560×1440
• without calendar: 320×480, 1280×800, 1280×1024, 1920×1080, 1920×1200, 2560×1440

Good Morning Spring!

Designed by Ricardo Gimenes.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1600×1050, 1680×1200, 1920×1200, 1920×1440, 2560×1440

St Patrick’s Day

Designed by Cheloveche.ru from Russia.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 395×512, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Cheese It

Designed by Katerina Bobkova from Ukraine.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080
• without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080

Pi Day

Designed by Thomas Bormans from Belgium.

• preview
• with calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440
• without calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440

Jam Session

Designed by Oxana Kostromina from Germany / Russia.

• preview
• with calendar: 1024×1024, 1280×800, 1366×768, 1280×1024, 1366×768, 1440×900, 1536×2048, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 320×480, 640×1136, 1024×1024, 1280×800, 1366×768, 1280×1024, 1366×768, 1440×900, 1536×2048, 1680×1050, 1920×1080, 1920×1200, 2560×1440

The Crow

“This photo is taking with my camera Canon 60D and 70-200 f4.0 lens. After taking this photo I edit with photoshop and I use one command. That one is Inverse Color. After I use this command I got like this photo. Thanks!” Designed by Han Htut Zaw from Myanmar.

• preview
• with calendar: 1280×800, 1280×1024, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1280×800, 1280×1024, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Old Desktop

Designed by Laurent Constant from Belgium.

• preview
• with calendar: 1280×1024, 1440×900, 1680×1050, 1920×1080, 2560×1440
• without calendar: 1280×1024, 1440×900, 1680×1050, 1920×1080, 2560×1440

HTML5 March

“My concept for this wallpaper is the march to HTML5. Since HTML5 is not yet a standard. I have used the HTML5 logo and a few handdrawn people (cartoon style).These people stand for the webdesigners which are marching for HTML5 to become a new standard. I hope you like it!” Designed by Joeri Claes from Belgium.

• preview
• with calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Paper Style

Designed by Wallpaperfx from Romania.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Landscape

“A really simple wallpaper done with Inkscape and GIMP.” Designed by Rahul from India.

• preview
• with calendar: 1024×768, 1280×720, 1280×1024, 1366×768, 1920×1080, 1920×1200
• without calendar: 1024×768, 1280×720, 1280×1024, 1366×768, 1920×1080, 1920×1200

Geometric March

Designed by John Patrick Buenaobra.

• preview
• with calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 1920×1440
• without calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 1920×1440

Commonspring

Designed by Jens Van Huychem from Belgium.

• preview
• with calendar: 320×480, 1024×1024, 1440×900, 1920×1080, 1920×1200, 2560×1440
• without calendar: 320×480, 1024×1024, 1440×900, 1920×1080, 1920×1200, 2560×1440

Abstract Retro

“An abstract pattern of geometrical cubes with a retro color scheme. Because it’s awesome!” Designed by Wannes De Roy from Belgium.

• preview
• with calendar: 1280×800, 1440×900, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1280×800, 1440×900, 1920×1080, 1920×1200, 2560×1440

Hot March

“Hot March! Just waiting for summer.” Designed by Roman Volkov from Russia.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Splat

“A classic paint splat, workable in any office environment.” Designed by Mcr Web Design from United Kingdom.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 1024×768, 1024×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Spring Is Here!

“March is here bringing the blooming spring!” Designed by Webolution from Greece.

• preview
• with calendar: 320×480, 1024×1024, 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1080, 1920×1200, 2560×1440, 2560×1600
• without calendar: 320×480, 1024×1024, 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1080, 1920×1200, 2560×1440, 2560×1600

Sunrise

“Sunrise is a picture I took on my way to work.” Designed by Nlsjns from Belgium.

• preview
• with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Marsscape

Designed by Dangerbrain from USA.

• preview
• with calendar: 1280×800, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 1280×800, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Extinction Is Not An Option

“I designed this wallpaper to raise awareness regarding the highly needed protection of sharks and rays.” Designed by Claudia Schmitt from Germany.

• preview
• with calendar: 1024×1024, 1280×800, 1280×1024, 1440×900, 1650×1050, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2048×2048, 2560×1440
• without calendar: 1024×1024, 1280×800, 1280×1024, 1440×900, 1650×1050, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2048×2048, 2560×1440

Smokin’ Hues

Designed by Everton Vnm from Brazil.

• preview
• with calendar: 1200×800, 1280×1024, 1366×768, 1920×1080, 1920×1200
• without calendar: 1200×800, 1280×1024, 1366×768, 1920×1080, 1920×1200

Spring

“This image describes the indescribable feeling I have looking outside: After all those cold dark winter nights, the day slowly grows longer, the sun awakens and we finally absorb the beautiful colors of SPRING!” Designed by Maurice De Haas, Haasmans from Netherlands.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
• without calendar: 1024×768, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200

March

“Frederique is a satiric webcomic series about the day-to-day adventures of three friends: going to school, getting rejected by hot chicks and enjoying life with full blown optimism.” Designed by Richard Dancsi from Hungary / Germany.

• preview
• with calendar: 1280×800, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 1280×800, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Mygento

“My curious workspace.” Designed by Artemka Tarik from Russia.

• preview
• with calendar: 1280×800, 1440×900, 1680×1050, 1920&tim
  

A Web developer is never through with learning new skills. So many new techniques crop up over a year, that keeping up to date can be quite challenging, especially with the usual workload Web developers have on their plates. An enjoyable, speedy way to find out about all the new developments of the year, is to visit Web design and development conferences and workshops. These events not only deliver a huge load of information in a short period of time, they’re also great for networking with like-minded professionals.

This post covers events taking place in about a eight-month timeframe up to late October 2013. These conferences take us through a good part of the year, so keep a lookout for our next issue toward the end of the year.

There is no way for us to include every possible event, so you are more than welcome to help us out and provide a comment to an upcoming event that you feel would be of interest to Smashing Magazine’s readers. The list is quite lengthy, so let’s dive in.

• March 2013
• April 2013
• May 2013
• June 2013
• July 2013
• August 2013
• September 2013
• October 2013

March 2013

Lean Day: UX
“A one-day, single track event focused on case studies and best practices implementing lean startup and lean UX in the enterprise.”

• When: Mar. 1, 2013
• Where: New York, USA

Responsive Day Out
“An affordable, enjoyable gathering of UK designers and developers sharing their workflow strategies, techniques, and experiences with responsive Web design.”

• When: Mar. 1, 2013
• Where: The Corn Exchange, Brighton, UK

Designing For Mobility 2013
“Designing for mobility 2013 is a single day, single track conference, about designing for all things mobile. It’s about how we design for all the things we do when we’re not in front of a computer – whether that’s finding out things when you’re lost in the middle of a strange city; or using your phone, tablet and TV on the couch all at once. It will include interesting case studies, new methods & new approaches to old techniques.”

• When: Mar. 1, 2013
• Where: Melbourne, Australia

BeagaJS
At BeagasJS Web professionals will have the opportunity to interact and exchange experiences with big names in the community and discuss current questions centered around JavaScript and HTML5.”

• When: Mar. 2, 2013
• Where: Belo Horizont, Brazil

Midwest PHP Conference 2013
This PHP conference “will include two days of fantastic sessions for all skill levels”.

• When: Mar. 2-3, 2013
• Where: St. Paul, Minnesota, USA

jQueryTO
“The 2013 jQueryTO conference will feature a 2 day schedule with over 30 speakers. Local & foriegn talent has been amassed to provide insight into the future of development, design, user experience & mobile using JavaScript, HTML & CSS.”

• When: Mar. 2-3, 2013
• Where: Toronto, Canada

ConveyUX
“ConveyUX is about making software easier and more enjoyable to use through the use of the latest techniques in user research and design.”

• When: Mar. 4-6, 2013
• Where: Seattle, Washington, USA

NSConference 5
“NSConf isn’t just about super speakers, awesome networking and loads of learning. It’s about taking on the world – one app at a time.”

• When: Mar. 4-6, 2013
• Where: Leicester, UK

CocoaConf Chicago 2013
“CocoaConf Chicago is a developer conference focused on all things Cocoa and Cocoa Touch. Featuring three tracks and over thirty breakout and general sessions, it will have something for every iPhone, iPad, and Mac developer.”

• When: Mar. 7-9, 2013
• Where: Elk Grove, Illinois, USA

SXSW Interactive 2013
“The 2013 SXSW® Interactive Festival will feature five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the SXSW Trade Show and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer.”

• When: Mar. 8-12, 2013
• Where: Austin, TX

MobileTech Conference 2013
A four day conference about mobile development and trends, where you can get up-to-date on mobile strategies with experts in the field.

• When: Mar. 11-14, 2013
• Where: Munich, Germany

Booster 2013
“Booster is a software conference aimed at developers, project managers/scrum masters, architects, UX people, testers, test managers and security professionals.”

• When: Mar. 13-15, 2013
• Where: Bergen, Norway

Edge Of The Web
“Edge of the Web is a loosely structured conference for web devs, ethicists, creatives, entrepreneurs and futurists with a focus on outsourcing, design thinking, ethics and profitable collaboration.”

• When: Mar. 14-15, 2013
• Where: Perth, Australia

UX Munich
A conference “about designing and implementing great user experiences” with a great lineup.

• When: Mar. 14-15, 2013
• Where: Munich, Germany

mdevcon 2013
“The conference is by mobile developers, for mobile developers. We have two days with multiple tracks, designed in such a way that whether you’re an android, iOS or other mobile platform developer, there’s always at least one session that should be of interest.”

• When: Mar. 14-15, 2013
• Where: Amsterdam, Netherlands

onGameStart US
A Web and games conference: “We support the web as a space for open game development and collaboration. Come learn from our experience and share what you know!”

• When: Mar. 15, 2013
• Where: New York, USA

WebCoast 2013
“A physical meeting place for those of us who work, play and socialise on the web. A market place where we can exchange ideas and opinions, knowledge and inspiration.”

• When: Mar. 15-17, 2013
• Where: Gothenburg, Sweden

CSS For The Soul
“An intensive 2 day workshop on the language, the tools and ecosystem, and best practices.”

• When: Mar. 16-17, 2013
• Where: Bangalore, India

CocoaConf DC 2013
“CocoaConf DC is a two-day, three-track conference filled with awesome technical content for iPhone, iPad, and Mac developers. Our sessions are taught by leading iOS / OS X authors, trainers, and consultants and cover topics ranging from XCode and Objective-C, to Core Data, Core Audio, Open GL.”

• When: Mar. 21-23, 2013
• Where: Herndon, Virginia, USA

Digpen VI
“The one-day, multi-disciplinary “nicest little web conference in the West”. Digpen is the grassroots conference for web designers and developers from across the South West and beyond.”

• When: Mar. 23, 2013
• Where: Cornwall, UK

Confab London 2013
“The Content Strategy Conference brings together professionals everywhere who realize the value of content. User experience. Marketing. IT. Business management. This is one big party for content-loving folks who value smart thinking, voracious learning, and constant improvement in the workplace and beyond.”

• When: Mar. 25-27, 2013
• Where: London, UK

#Inspect 2013 — RubyMotion Conference
“RubyMotion is the hot new toolchain that lets you write iPhone and iPad apps in Ruby, and the community around it has grown so fast it’s time we had a conference. Come see where RubyMotion was born and find out how to enjoy programming for iOS again!”

• When: Mar. 25-29, 2013
• Where: Brussels, Belgium

MEX
“MEX is 2 days where 100 of the brightest minds in mobile user experience learn techniques, define best practice and create new ideas.”

• When: Mar. 26-27, 2013
• Where: London, UK

Devoxx UK
Devoxx is the conference for developers run by the developers in the Java community, especially the London Java Community (LJC). The conference consists of several types of events; from a packed schedule of presentations by international speakers and the best of UK talent; Hands On Labs where attendees can get practical experience guided by experts in the field; and Birds Of A Feather sessions (BOFs) which are open-table discussions.”

• When: Mar. 26-27, 2013
• Where: London, UK

Devoxx France 2013
Devoxx France is a conference centered around the Java platform. It is focused on developers, businesses, startups and the future, i.e. robotics.

• When: Mar. 27-29, 2013
• Where: Paris, France

April 2013

An Event Apart Seattle 2013
“An Event Apart Seattle is an intensely educational learning session for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for. Join us for twelve great speakers and sessions, plus an optional day-long workshop on multi-device web design.”

• When: Apr. 1-3, 2013
• Where: Seattle, USA

HTML5DevConf Spring 2013
“The HTML5 Developer Conference has become the largest JavaScript and HTML5 developers conference in the world. We provide sessions on Javascript, HTML5, Apps & Games, client, cloud, server, mobile, and more.”

• When: Apr. 1-3, 2013
• Where: San Francisco, California, USA

ConFESS 2013
“The annual Conference For Enterprise Software Solutions will be held in Vienna/Austria in Spring 2013. This is the sixth conference organized by IRIAN and the EJUG Austria and the third one under the new brandname “CONFESS”.”

• When: Apr. 3-5, 2013
• Where: Vienna, Austria

IA Summit 2013
“The IA Summit is the premiere, community-curated, and volunteer-run gathering on the ever-evolving disciplines of information architecture and experience design. It provides students, practitioners, and anyone interested with great tactical skills, amazing inspiring ideas, and an opportunity to collaborate and celebrate the great things happening in our communities of practice.”

• When: Apr. 3-7, 2013
• Where: Baltimore, Maryland, USA

BED-Con 2013
BED-Con is a technology oriented conference all around the world of Java.

• When: Apr. 4-5, 2013
• Where: Berlin, Germany

CocoaConf Dallas 2013
“CocoaConf Dallas brings a 10-gallon hat full of Cocoa awesomeness to the Big D. With top-notch keynotes (including one by Daniel Steinberg) and technical sessions.”

• When: Apr. 4-6, 2013
• Where: Dallas, Texas, USA

WordCamp Miami 2013
“WordCamp Miami 2013 is a three-day event that covers topics relating to WordPress, front-end development, and much more. 2012 brought more than 400 students, bloggers, and coders together for two days of education and fun. Expect big things for the 4th Annual WordCamp in Miami for 2013.”

• When: Apr. 5-7, 2013
• Where: Miami, Florida, USA

MadWorld 2013
“MadWorld is a two-day conference with a fresh take on technical communication, featuring industry thought leaders and fellow peers from companies such as Caradigm (a Microsoft | GE Healthcare company), Blackbaud, N-able Technologies, Advanced Language Translation and more!”

• When: Apr. 7-9, 2013
• Where: San Diego, California, USA

droidcon 2013
“droidcon is all about Android, meeting the Android community, learning about the latest develops and giving you a stage to talk about your apps and solutions or just discuss a problem you are facing. What’s more, droidcon is about how businesses are increasingly utilizing Android and how companies and freelance developers can make money out of this.”

• When: Apr. 7-10, 2013
• Where: Berlin, Germany

Breaking Developments 2013: Orlando
“Breaking Development focuses on new, emerging techniques for web development and design for mobile devices. Our speakers are hand-picked to make sure you get challenging, well-delivered talks from a variety of different perspectives.”

• When: Apr. 8-10, 2013
• Where: Orlando, Florida, USA

UX London 2013
“3 days of inspiration, education and skills development for user experience designers. We’re offering inspirational talks in the morning, followed by hands-on workshops in the afternoon, so each day will have a different theme covering product design, behaviour design and strategic design.”

• When: Apr. 10-12, 2013
• Where: London, UK

TYPO San Francisco 2013
“When you think “contrast,” what comes to mind? Contrasting viewpoints; compare and contrast; the difference between tonal levels in a design? Whatever your vantage point, whether you’re thinking about the graphics on your own screen or the differences between cultures that inform our industry, we’ve invited our speakers and audience members to reflect on any variation of the idea of “contrast” in the design world”.

• When: Apr. 11-12, 2013
• Where: San Francisco, California, USA

LeanUX NYC
“LeanUX NYC is three days of cutting-edge learning and inspiration for designers, developers, product managers, and entrepreneurs.”

• When: Apr. 11-13, 2013
• Where: New York, USA

Codemania
“Developers have to know what’s happening outside their own world. Some of the best talks you can hear are deep, technical talks about platforms that you don’t use and maybe will never use.”

• When: Apr. 12, 2013
• Where: Auckland, New Zealand

Whisky Web II
“A web conference created for the web community, by the web community, Whisky Web will have something to offer everyone who works with the web, be they a designer, a developer or something inbetween. Get your geek on in Scotland’s inspiring capital.”

• When: Apr. 12-13, 2013
• Where: Edinburgh, UK

Bacon 2013
“We bring experts from around the world together for one simple aim, we want to show you ideas that will motivate you. BACON is made for devs, by devs, and includes a wide range of interesting topics. In 2012, BACON included talks on functional programming, beer, citizen journalism and much more.”

• When: Apr. 12-13, 2013
• Where: London, UK

Ull 2013
“Peepcode has redefined online screencasting, and we’re betting that it will redefine how much you can learn during an interactive session at a conference. The combination of experience, presentation skill and design talent has us drooling at the prospect of seeing” Geoffrey Grosenbach and Neven Mrgan live.

• When: Apr. 12-14, 2013
• Where: Dublin, Ireland

#iOSOnRailsConf 2013
“Ruby developers tend to be technology-curious. We love to explore. We also, often, find ourselves writing back ends to iPhone/iOS front ends. However, Rails and iOS have more in common than we may know.”

• When: Apr. 13-14, 2013
• Where: Alushta, Ukraine

Xamarin Evolve 2013
“Join hundreds of fellow mobile developers for Xamarin’s first worldwide developer conference.”

• When: Apr. 14-17, 2013
• Where: Austin, Texas, USA

MinneWebCon 2013
“MinneWebCon’s roots are in people coming together to solve problems and make things easier, and we are entering our sixth year with a big-time commitment to grassroots knowledge-sharing. You might hear from folks who are working in your field, or are in a position you consider light-years from the everyday.”

• When: Apr. 15-16, 2013
• Where: Minneapolis, Minnesota, USA

HCID2013
“FREE talks and workshops around the ideas of creativity, usability, user experience, web accessibility, mobile design, multitouch technologies, service design, tours of our state of the art interaction lab and more!”

• When: Apr. 17, 2013
• Where: London, UK

Gel 2013 Conference
“A conference for leaders, designers, and thinkers who care about creating a good experience – in tech, business, and the world. Since its first event in 2003, Gel has always introduced attendees to influential ideas – first. Gel was the first major stage for Wikipedia, Marissa Mayer, Khan Academy, Improv Everywhere, Ze Frank, and many others.”

• When: Apr. 17-19, 2013
• Where: New York, USA

CocoaConf San Jose 2013
“For those who are just entering the Cocoa world, we’re bringing our all-day pre-conference iOS tutorial as an optional registration package: come and spend a day getting up to speed with Xcode, Objective-C, and iPhone development.”

• When: Apr. 18-20, 2013
• Where: San Jose, USA

Mobile Mobile Conf
“Mobile Mobile Conf is a fun little event for developers and creatives brought to you by Applicake, the team behind the legendary European Rails Conference Railsberry.”

• When: Apr. 18-19, 2013
• Where: Krakow, Poland

State Of The Browser 2013
“Like every year, London Web Standards bring you State of the Browser, a conference where browser representatives are on hand to show us how their technologies are being used to bring the web to tablets, smartphones, games consoles and television. Keynote talks, Q&As, breakout sessions and socialising will give you a better understanding of the modern, cross-platform web.”

• When: Apr. 20, 2013
• Where: London, UK

Frontend DEV Conf ’13
“Belarus’s largest frontend conference.”

• When: Apr. 20, 2013
• Where: Minsk, Belarus

FITC Toronto 2013
“With more than 70 renowned digital creators from around the globe, FITC Toronto attendees will be given the opportunity to learn from some of the most influential names in the digital space. Covering everything from user experience to the awe-inspiring world of Film Holographic VFX, this three day festival will leave attendees stimulated and eager to create in new and innovative ways.”

• When: Apr. 21-23, 2013
• Where: Toronto, Canada

Realtime Conference Europe 2013
This conference is “melting pot conference for realtime technologies. We asked ourselves, ‘What would an ideal realtime conference look like? Let’s do that.’”

• When: Apr. 22-23, 2013
• Where: Lyon, France

UX Immersion Conference 2013 – Mobile
“Whether you’re new to designing for mobile or already a pro, you’ll learn tons of practical techniques during 2 glorious days of hands-on workshops and 1 day of superb talks.”

• When: Apr. 22-24, 2013
• Where: Seattle, Washington, USA

JAX 2013
JAX is the leading conference in Germany for pragmatic knowledge in the Java and the enterprise environments.

• When: Apr. 22-26, 2013
• Where: Mainz, Germany

railsberry 2013
“We want to experiment with a new formula and challenge Rails developers to focus on everything BUT Rails. We want to mix flavors and technologies and try things we never played with.”

• When: Apr. 22-23, 2013
• Where: Krakow, Poland

GOTO Chicago 2013
“The GOTO Chicago program is created “by developers, for developers” where the emphasis is placed on presenting latest developments as they become relevant and interesting for the software development community. Some of the industry’s best speakers, practioners and trainers will be at GOTO Chicago to present and train on a variety of topic areas.”

• When: Apr. 23-24, 2013
• Where: Chicago, USA

NEXT Berlin 2013
“Today, NEXT Berlin leads the way as a meeting place for the European digital industry and is a vital driving force across borders. At the conference, marketing decision-makers and business developers meet technical experts and creative minds to discuss what will be important in the next 12 months – a mix that is totally unique among European conferences.”

• When: Apr. 23-24, 2013
• Where: Berlin, Germany

Front Trends 2013
Front Trends is an affordable, popular European web technology conference for industry frontrunners. It it again featuring some of the biggest names in the business.

• When: Apr. 24-26, 2013
• Where: Warsaw, Poland

Df|Experience Cologne 2013
“The Df Conference Series started as Design for Conversion conference back in the days in Amsterdam. After many succesful DfC we decided that we didn’t want to stick forever to “Conversion” and here we go with “Experience” for this conference. We still openly invite experts and professionals from all disciplines, to engage in challenge, broaden our collective knowledge and share our ideas.”

• When: Apr. 25, 2013
• Where: Cologne, Germany

ConvergeSE 2013
“ConvergeSE takes place in beautiful springtime in Columbia, South Carolina. Over the course of three days you can dive into intense half and full day sessions, hop from venue to venue downtown taking in sessions on topics from design and development to business and marketing, and finally experience a full day of inspirational talks from an impressive array of speakers.”

• When: Apr. 25-27, 2013
• Where: Columbia, South Carolina, USA

Creative South Design Conference 2013
“Columbus Creative, a Co-op of artists from all disciplines of digital and traditional media whose goal is to bring artists together to bring quality art to our community, will present its annual Creative South conference. Creative South will expose creative and marketing professionals, business people, and students to key speakers on the subject of branding and design in the digital era.”

• When: Apr. 27-28, 2013
• Where: Columbia, Georgia, USA

Re:Design/UXD 2013
“Our theme for 2013 is “James Bond is an Experience Designer: What UXD Can Learn from How Others Think” — As we hurtle into the future and the concept of “experiences” changes dramatically by the day, what it means to be an “experience designer” is changing, too. At RE:DESIGN/UXD we’ll dive in and see what we can learn about crafting the future of experience by thinking like a British spy, a journalist, a genome-code cracker and beyond.”

• When: Apr. 29-30, 2013
• Where: Menlo Park, California, USA

Future Insights Live – Las Vegas, 2013
“Full-day workshops on HTML5 & CSS3, UX, entrepreneurship, Node.js, and real-time event handling. Three days of sessions grouped into five tracks: Pure Design, Front-end Dev, Back-end Dev, Business, and Mobile. World-class speakers delivering future-focused sessions. Hands-on labs so you can apply your learning right away!” And More.

• When: Apr. 29-Mai 2, 2013
• Where: Las Vegas, Nevada, USA

 

May 2013

Ready To Inspire 2013
“Ready to Inspire is a brand new conference about the craft of web design, type and code. It has workshops, live music, meetups and parties, but above all an exciting lineup of today’s craftspeople and mind blowing new faces.”

• When: May 1-3, 2013
• Where: Chicago, Illinois, USA

Web Directions Code 2013
“JavaScript, HTML5, CSS3: it’s a changing landscape. Web Directions brings together practitioners and big thinkers at the leading edge to educate and inspire at a “festival of code”.”

• When: May 1-3, 2013
• Where: Melbourne, Australia

Point Conference 2013
“POINT is self-funded and is brought to you by a collective of designers who passionately believe that London needs a forum to discover, exemplify and discuss the issues that design, in its many forms, creates on a day-to-day basis.”

• When: May 2-3, 2013
• Where: London, UK

Kerning 2013
“Kerning is the first international conference in Italy dedicated solely to typography and web typography.”

• When: May 2-3, 2013
• Where: Faenza, Italy

Rustbelt Refresh 2013
“A single day dedicated to web design and front-end development.”

• When: May 3, 2013
• Where: Cleveland, Ohio, USA

Made By Few 2013
“A Tech Conference featuring talks from leading entrepreneurs, designers, developers, and creatives. It’s part showcase, part education, and part inspiration.”

• When: May 4, 2013
• Where: Little Rock, Arkansas, USA

PHP Unconference Europe 2013
“The mission of PHP Unconference Europe is to bring together an international group, who have detailed knowledge of PHP and related web technologies.”

• When: May 4-5, 2013
• Where: Berlin, Germany

Adobe MAX 2013
“Adobe MAX is all about creativity and expressiveness. If you create, you won’t want to miss MAX. Designers, developers, strategists, video professionals, photographers, and more all come to MAX to exchange ideas and inspiration. Together with industry pros and visionaries, you’ll learn about the latest technologies, techniques, and strategies for delivering your best creative work.”

• When: May 4-8, 2013
• Where: Los Angeles, California, USA

La Conf Paris 2013
“La Conf is a two-day single-track conference for Ruby & Rails developers – in the heart of Paris, France.”

• When: May 9-10, 2013
• Where: Paris, France

MoDevUX 2013
MoDevUX is “a conference about mastering mobile UX and design.”

• When: May 9-11, 2013
• Where: McLean, Virginia, USA

Port80 2013
“An all day web fest with 8 great speakers including: Andy Davies, Jack Franklin, Robin Christopherson, Paul Lloyd, Rachel Shillcock, Sophie Dennis, Benjy Stanton & Matt Andrews.”

• When: May 10, 2013
• Where: Newport, UK

Artifact Conference 2013
“ARTIFACT is a two-day, single-track conference for DESIGNERS adapting to the challenge of designing for a MULTI-DEVICE world. See real world examples of responsive workflows, prototyping strategies, new tools, and deliverables and decide which ones will help YOU adapt.”

• When: May 13-15, 2013
• Where: Austin, Texas, USA

Future Of Web Design London 2013
“The 7th annual Future of Web Design proudly presents three days of cutting edge learning and inspiration. Join us for a day of in-depth workshops, followed by two action-packed conference days in the heart of London!”

• When: May 13-15, 2013
• Where: London, UK

UX Lx: User Experience Lisbon 2013
“UXLx is the premier User Experience event in Europe. Each year, 500 participants from dozens of countries all over the globe flock to sunny Lisbon to learn from world renowned speakers and to mingle and share their knowledge with fellow UX Pros. It’s 3 lovely days of workshops and talks and we do party every night. It’s an unforgettable experience.”

• When: May 15-17, 2013
• Where: Lisbon, Portugal

Google I/O 2013
“Learn the tech world’s latest web, mobile and social breakthroughs and meet the developers who are turning them into tomorrow’s startups. Keep yourself and your team driving innovation at Google I/O.”

• When: May 15-17, 2013
• Where: San Francisco, California, USA

Mobilism 2013
“Mobile is becoming increasingly important to web designers and developers because users expect a site to work on their phones. Simultaneously, the web is becoming increasingly important to the mobile world because it is the only way to deploy an application to any phone.”

• When: May 15-17, 2013
• Where: Amsterdam, Netherlands

jsDay 2013
“From case studies to project management, from new technologies to established ones, from development environments to best practices and mobile development, everything a javascript ninja should know will be covered during the jsDay 2013.”

• When: May 15-16, 2013
• Where: Verona, Italy

ExpressionEngine Conference 2013
“The stunning Bridgewater Hall will host a great mix of regular and new speakers, covering topics like add–on development, optimisation and performance, bootstrapping, and much more. ”

• When: May 16-17, 2013
• Where: Manchester, UK

TYPO Berlin 2013
“Design should make objects and graphics attractive, make people feel they would like to touch them, make people want to have them around. TYPO Touch is dedicated to the touching aspects of design.”

• When: May 16-18, 2013
• Where: Berlin, Germany

Stir Trek 2013
“Stir Trek is a one-day conference focused on teaching software developers, and others in the industry, the latest and greatest in technologies, techniques, and tools.”

• When: May 17, 2013
• Where: Columbus, Ohio, USA

Sud Web 2013
In olden times knights went in search of the Holy Grail: the perfect site. Due to the immensity and difficulty of this task, a handful of them decided to join their peers to share knowledge and experiences. This year, the magnificent Papal Palace will host a conference in the legendary Hall of Conclave.

• When: May 17-18, 2013
• Where: Avignon, France

An Event Apart San Diego 2013
“An Event Apart San Diego is an intensely educational learning session for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

• When: May 20-22, 2013
• Where: San Diego, California, USA

WebVisions Portland 2013
“WebVisions explores the future of design, content creation, user experience and business strategy in an event that inspires learning, collaboration and entrepreneurism.”

• When: May 22-24, 2013
• Where: Portland, Oregon, USA

Gluecon 2013
“Cloud, Mobile, APIs, Big Data — all of the converging, important trends in technology today share one thing in common: developers. Developers are the vanguard. Gluecon covers topics like NoSQL, API’s, Node.js, HTML5, Backend-as-a-Service, cloud management and security, cloud storage, Hadoop, DevOps, Mobile App development, cloud platforms, and many, many others.”

• When: May 22-23, 2013
• Where: Broomfield, Colorado, USA

Webshaped 2013
“Webshaped conference is a one-day event that’ll have two separate tracks, bringing together design and development. It’ll be the first big frontend conference in Finland. We aim to have visitors from all around northern Europe for a great day together. ”

• When: May 23, 2013
• Where: Helsinki, Finnland

Web Rebels 2013
“We are non-profit community driven conference for everyone who loves programming applications and services using web technology. Whether it is the corner stones of the web today like JavaScript, or potential new languages such as ClojureScript or Dart. If it is potentially disruptive technology such as PhoneGap or WebGL. Or if it is talks the tools we use to create amazing experiences.”

• When: May 23-24, 2013
• Where: Oslo, Norway

beyond tellerrand // Web 2013
“After a very short break and we are already back to hit you with the third edition of beyond tellerrand. The affordable event for a friendly and inspiring community.”

• When: May 27-29, 2013
• Where: Düsseldorf, Germany

AnDevCon Boston 2013
“AnDevCon, the technical conference for software developers building Android apps, is the biggest, most info-packed, most practical Android developer conference in the world – and now it’s coming to Boston!”

• When: May 28-31, 2013
• Where: Boston, Massachusetts, USA

O’Reilly Fluent Conference 2013
“The O’Reilly Fluent Conference is the key event for web and mobile developers, software engineers, and others to gather and learn from each other – drawing a thousand of the best coders in the industry. This year, Fluent will bring together an even broader range of individuals and organizations and drill even deeper into the essential technologies and tools that power the Web.”

• When: May 28-30, 2013
• Where: San Francisco, California, USA

jsConf US 2013
“The JSConf team is constantly working to make the best technology event possible. We have been a launching point for an incredible number of the most revolutionary products, services, and technologies on the web.”

• When: May 29-31, 2013
• Where: Amelia Island, Florida, USA

Converge 2013
“The goal of the conference is to bring together the various aspects of our technology community, from user and customer experience all the way through to development and everything in between.”

• When: May 31, 2013
• Where: Edinburgh, UK

 

June 2013

International PHP Conference 2013
“The International PHP Conference is a globally recognized event for PHP developers, webworkers, IT managers and everyone interested in web-technology.”

• When: Jun. 2-5, 2013
• Where: Berlin, Germany

Webinale 2013
The Webinale conference shines through the web holistically and doesn’t focus only on fragments. The conference bridges the gap between designers, web developers, managers and entrepreneurs, providing an immensely lively forum for inspiration, networking and practical know-how.

• When: Jun. 3-5, 2013
• Where: Berlin, Germany

Confab Minneapolis 2013
“As the leading conference of its kind, Confab: The Content Strategy Conference brings together professionals everywhere who realize the value of content. User experience. Marketing. IT. Business management. Thi

As of today we’re pleased to announce Typeplate, a free-range and open-source typographic starter kit that will hopefully help you build beautiful, text-rich websites. The word on the street is that the Web Is 95% Typography, so as we hurtle towards the future, we think there’s still a lot we can learn from five centuries of history. Typeplate is the result of this exploration of our typographic heritage.

“Another Framework?”

We made Typeplate because we weren’t satisfied with existing Web frameworks. The problem with most frameworks is that they make too many assumptions about how you’re going to work. This can be helpful, but you’re often forced to code their way or find another framework — there’s a lot of ‘framework fatigue’ out there.

Pattern libraries are helpful but they rarely separate structure from aesthetics, which leads to projects looking generic unless you sink a lot of time into re-working all the patterns. We’re building websites in 2013! There is no reason we have to sacrifice customization and modularity in order to achieve beautiful, powerful results.

With Typeplate, you can combine solid typographic conventions of the past with flexible styles of the presence. Larger view.

How It Works

So what does Typeplate do? As a “starter kit”, the library makes no assumptions about how you write code — at all. We went way back to basics, inspired by Harry Roberts’ inuit.css and other OOCSS projects. Typeplate lets you set solid base styles and include conventional typographic features (e.g. block quotes and drop capitals) built with good markup and flexible styling.

Typeplate isn’t the next Bootstrap or Foundation; we’re building a toolkit for Web type that’s meant to be extended and customized. There’s no reason we have to sacrifice customization and modularity in order to achieve beautiful, powerful results.

Typeplate is built with Sass and borrows heavily from Object-Oriented CSS techniques. A key feature is that Typeplate is 100% à la carte: it takes just 3 Kb of CSS to integrate the entire project, but you can cherry-pick only the elements you need and just delete the rest. There is a plain CSS version of Typeplate available (and actively being improved), but if you want to take advantage of all the heavy lifting, you probably will want to work with Sass: Typeplate generates CSS with lots of variables and functions, letting you concentrate on implementing features, not typing them out. For example, our Typographic Scale loop generates 53 lines of code to create a full double-stranded heading hierarchy from just three variables and some font sizes.

Demo And Downloads

• Live demo page
• Examples and Documentation
• Download the source files (in both Sass and CSS flavors, 3 Kb compressed, 17 Kb raw)
• Github Repo
• Available also on Bower (Sass only; if you have Bower installed, just run bower install typeplate from your terminal)

How To Use It

Easy. To use Typeplate, simply @import "_typeplate.scss" in your project’s main Sass file, preferably after a reset like Normalize. By default, Typeplate sets base styles on the html, body, h1–h6, pre, code, and abbr elements — you’ll want to start tweaking the variables before adding new styles. Don’t forget that you can always delete those sections and use the mixins in your own stylesheet instead.

As the project matures, we’ll most certainly be updating the page and blogging about what we’ve learned during development as well as posting better demos and documentation. We would appreciate your help in making Typeplate better, so please fork, pull-request and submit issues on GitHub.

We sincerely thank @TommyCreenan (dribbble) for designing the Typeplate logo.

---

© Zachary Kain and Dennis Gaebel for Smashing Magazine, 2013.