Design & UX

Rethinking Icon and Logo Design for the Responsive Web

Annarita Tranfici
Share

It’s been a while since I last discussed Responsive Web Design (RWD). My first article about this topic dates back to the 15th of January 2013 and was the first of a long series. During the series I defined RWD basic features. Fluid and grid layouts, fonts, images and how to start implementing a responsive approach with real examples. I suggest you to take a look at these articles to refresh your memory before continuing with this one. This article will look in detail at one aspect of RWD, rethinking icons and logos responsively and how to approach their design.

A new challenge

How we experience the Internet has changed rapidly. Over the past few years, its transformation from desktop to mobile has resulted in developers and designers having to constantly stay ahead of the curve and on top of new demands.

The number of devices users are using has increased exponentially, which in turn has increased the variety of browser specifications and screen resolutions that we must accommodate.

RWD has helped us by providing mobile developers with a method to accommodate the vast and ever-growing variety of screens and devices pragmatically and efficiently. As you may know, the approach takes into account important factors such as user behavior, screen size, and operating system. Responsive design should respond automatically and optimally to the preferences of the user, regardless of their screen or software.

A common oversimplification of RWD is to define it as nothing more than a design that takes into account the size of the screen and automatically makes adjustments to the content.

It is much more than that. It’s an approach that takes many other design aspects and methodologies into consideration. Responsive design is about context, just adapting content on a page isn’t enough. The same contextual principles should be applied to design details, such as icons and logos in order to create a complete responsive system.

Logos and icons are page elements whose importance should not be underestimated. They are able to convey a direct message in a small amount of space, they go beyond text and language and succeed in communicating to large audiences. That’s why it’s crucial that they evolve and change with time, progressively with technologies and design trends.

The ideal icon for your design has to look great across a range of sizes. This means that you have to think first about its quality and be sure that it is scalable and above all legible. With the multitude of devices available, we no longer have complete control over how icons will look. In fact, each device has a different screen size and resolution and designing an icon that will be a good fit for all of these can be a challenge, especially if it is scaled to a very small size. In fact, in this case, it can lose both its impact and legibility.

There are some solutions to try and tackle this challenge.

Let’s discover them.

Icon Fonts

Icon Fonts are awesome.

Chris Coyier says.

Icon fonts are a technique of using web fonts to display symbols. Chris Coyier and Steven Bradley have drawn up a list of reasons why they think they are so amazing. In particular, icon fonts:

  • Scale, change color and include shadows easily
  • Can have transparent knockouts
  • Generally have good browser support
  • Can use text based css (still needs better support)
  • Can be designed on the fly (by making changes on :hover, etc.)
  • Can do anything image icons can (change opacity, rotate, etc.)
  • Have smaller file sizes since they contain fewer characters than full typefaces

In his article, Steven Bradley points out some (not all relevant) downsides that bring us to the conclusion that this solution is probably not appropriate for all scenarios. However, the major issues are not too bad and we should consider icon fonts as a valid alternative for our purposes.

CSS to display icons

The second solution is using only CSS to display icons. With this choice, icons will be rendered without pixelation. The issue with this technique is that the icon style is limited to what can be created in code, and this can be annoying to update.

A Responsive Solution

The consequence of both these alternatives is a sense of restriction for designers which often influences the style of the icon (color or level of detail, for instance). The best solution appears to be a combination of RWD principles with the potential of iconography. As a result of this choice, we could find a balance between simplicity and devices’ screen size. Can you imagine if an icon’s accuracy changed proportionately in relation to the screen width of the device in use? Or if the same icon could be responsive and adapt to the size of that device?

If you want an idea of how a responsive icon could be displayed according to the change in device, take a look at responsiveicons.co.uk. By creating icons in the SVG image format (Scalable Vector Graphic) and using media queries, different icons can be displayed at different screen sizes without loss of quality. The result is a dynamically changing responsive icon, perfectly optimized for the size and context in which it is shown.

Amongst the pros, icons are more readable at small sizes without being subjected to minimal style when displayed at a larger size. Depending on screen size, varieties of detail can be displayed, and this is particularly useful for the problem mentioned earlier, the existence of a large range of screen sizes. Moreover, the fluid nature of responsive icons means that icons are already optimized for new devices.

However, at the same time there are some cons to consider. Firstly, responsive icons will take longer to design. You’ll probably end up choosing something available over creating icons yourself. If you don’t, creating them will take extra time.

The second problem is recognition and user experience. Time is needed to make your users feel accustomed to particular icons on different devices within a particular brand. If you are successful at this, the issue will disappear over time. The change of icons may attract your customers’ attention and even create more engaged users.

Conclusions

RWD is not all about context. Icons and logos should be considered equally as important as images, text and compatibility. For this reason, developers should study new techniques, allowing web fonts to fit well for various displays and devices.

Creating flexible and scalable solutions that are optimized for today and considered for tomorrow cannot only benefit users but also your products and services.