The web has an ability to shed its skin and emerge anew every couple of years. It should not be news to you that the future of web browsing is mobile. Mobile has already overtaken desktop browsing in parts of the world and is projected to do so in the US before the end of 2013. The technique that most proactive studios and shops have coalesced around is ‘Responsive design’
It is a term I believe was coined by Ethan Marcotte, the author of Responsive Web Design and a leading voice on the topic. For the uninformed it attempts to address the ever-expanding array of device sizes and orientations by developing sites that use fluid grids and responsive style sheets. This chameleon-like strategy is an improvement over the previous approach of creating a unique version of a site for each and every application.
While developers themselves have clearly embraced this approach, content creators are somewhat late to the table. Mark Boulton recently wrote an interesting post about the challenges it creates for advertisers here. It got me thinking, perhaps there is a similar need to address branding considerations as well.
That said, I thought I would offer my two cents on writing flexible branding guidelines for the progressively enhanced, responsive web.
Size is now relative.
It is not a good idea to issue a stern size requirement for your logo’s use online. This is not to say that we want a free for all, but at least take into consideration the standard breakpoints. For example, the optimal logo size for a mobile phone held vertically may need to be much smaller than what you might use on a horizontal tablet or desktop application.
A truly responsive way to approach this problem would be to think of the size in terms of percentages rather than addressing specific browser widths, which vary wildly. I think that will work to an extent, however, the latter approach might be more practical because size can be a function of logo orientation.
Have multiple orientations.
Yes, ideally you should think about having multiple orientations of your logo for the responsive web. The urgency of your need really depends upon how radically tall or wide your mark is. If it is tall and slender you will probably want a horizontal version and vice versa.
This is not to say that you do not clearly define a preferred orientation within your standard. However, if it doesn’t fit the screen of a mobile phone held vertically or horizontally in a legible fashion you need to create an alternative for that breakpoint.
I suspect there may be a school of thought that would pursue a design with live typography which can scale and justify using CSS media queries based on the application. While it is not lost on me that such a move might enhance SEO, it would undermine your brand's keystone element on many levels.
Logo design is an exacting process that involves the artful arrangement of proprietary type and imagery. This is done with precise vector points, lots of caffeine and painstaking self criticism. In my opinion it is folly to think a typeface positioned mathematically by Internet Explorer could ever measure up by contrast.
Flexible positioning.
Many brand standards may specify the location of their logo within a site – especially if the logo may be used in an endorsing capacity. A standard rule might require size equality or a horizontal lockup with the primary logo.
Here again, I’m not advocating for lawlessness, but rather a cascading approach that takes into consideration the standard breakpoints of the web. This flexibility should create room for designs where the logos may be stacked, reduced in size or even relocated entirely.
Web typography first.
Gone are the days when a brand standard might have specified a font family for use in print applications with the concession that system font equivalents must be selected for the web. Today the increasingly bullet proof use of @fontface solutions have created the need for progressive enhancement within our guidelines. In other words, maintain that system font as your fallback, but also specify your @fontface.
Furthermore, if you want your brand experience to be consistent across mediums you should implement a mobile first strategy for type. That is to say you should only choose typefaces that are available in @fontface kits as well as traditional formats. There is a growing library of free fonts available on sites like Font Squirrel. One can also go the subscription route and choose from the selection at Type Kit.
Be flexible. Be present.
The bottom line with all these pointers is to be flexible about the application of your brand's assets. The best guidelines outline a loose enough set of principals to allow designers the latitude to think on their feet. Nothing will be more frustrating for them, or unproductive for you as a brand manager than having to rewrite and overly restrictive standard.
The other key is to be present because a guideline is not a substitute for human reason. Rather it is a backstop to prevent abuses before they begin. In a world where your brand must flex to occupy and increasingly dynamic web experience this has never been more true. Adaptive and responsive grids require adaptive and responsive thinking.
