Responsive design + Icon fonts = Adaptive icons

31/01/14
Share

Today, I will tell you about several trends in the world of web-development and a couple of tricks that are to be used in 2014. Namely, as you can see from the title of this article, we will speak about responsive icons and font icons.

See also: TicketEasy: Prototyping User-Friendly Ticket POS.

Talking about trends

Recently, a trend named "responsive design” started to gain traction, becoming more and more popular. Personally I am not a fan of trends. But in the professional sphere trends rule the roost and you can’t just simply ignore them. In any case, the web design trends of 2014 seem awesome to me and they are worth having a closer look. So I will tell you a bit about several of them.

Trend No1. Continued “Responsive design” expansion

Adaptive and responsive design continues to grab the virtual space and our screens. . The main concept of it is that it allows the main idea of the product to be modified, supplemented and to acquire new functions in real-time. It provides opportunities that can possibly make separate mobile version of a website wither away in the coming year, even among such “mobile version fans” as Facebook and Twitter - more and more patterns and solutions for maintaining the various functional and display aspects through media queries and scripts are currently being developed.

Trend No2. Flat design

This one was born at the very beginning of 2013 and by now has totally captivated the minds of web developers. What caused the popularity of flat-design (apart from the unsuccessful farce that is iOS 7)?

  • Ease of perception. Minimalism - the right type of it, of course - is always about light textures and freedom of overall design, content and structure.
  • Space and ease of development. Flat design is simple as having flat squares and in most cases you do not need to have gigabytes worth of graphic storage.
  • Lightness. This is especially valuable in the era of the mobile Internet. Flat design tends to not use images at all, or has pictures with a minimum of colors. Plus, with SVG that is now supported and becoming more popular in browsers, it is possible to use vector graphics.

These are the main advantages of flat-design which drive its’ increasing popularity.

Trend No3. Icon Fonts

The idea behind this trend is simple: you create a set of SVG-images, and then bring them together with a special program which produces a set of multiple CSS-files for different purposes, namely a set of fonts in various formats such as EOT, SVG, WOFF, and even TTF, which can be installed and used, for example, in a graphical editor. Unfortunately, the font s are lacking some of the nicer options of SVG, such as the colorization of individual elements of one icon, but these in most cases this is a fair price for the benefits we gain.

Adaptive icons

So, to the main subject of this article is a pattern that brings together all the aforementioned trends and features and Joe Harrison's idea of Responsive Icons, and the essence of this idea is simple - when you resize a window, the detail level on the icons changes as well in order to fit to the window.

So let’s go. Let’s say, we have the following design in three different scales:

As we see, the icons are of different size in each screen. How do we achieve this without putting undue load on the client’s browser?

The first approach to creating adaptive icons

Following the Progressive enhancement methodology, we should begin with creating a simple layout for our file (let's do the bottom icons first and leave the logo for later):

 <!DOCTYPE html>  < html >  < head >  < link  rel  =  "stylesheet"  type  =  "text/css"  href  =  "style-320.css"  media  =  "screen and (max-width:320px)" >  < /  head >  < body >  <header  class  =  "logo-container" >  < div  class  =  "logo" > Logo < /  div >  < / header>  < div  class  =  "content" >  < a  href  =  "#"  class  =  "icon icon-announces" > Announces < /  a >  < a  href  =  "#"  class  =  "icon icon-partners" > Partners < /  a >  < a  href  =  "#"  class  =  "icon icon-news" > News < /  a >  < /  div >  < /  body >  < /  html > 

Let’s proceed with styles. I will skip the story about setting up reset.css, it's too trivial. Following the practice of Mobile first, we’ll start with creating a style for the smallest size:

body  {  background-color  :  #f0f0f0  ;  } 
 
a  {  text-decoration  :  none  ;  } 
 
 .icon  {  width  :  33%  ;  height  :  50px  ;  text-indent  :  -9999px  ;  /* Get rid of the text in the link */  color  :  #919191  ;  font-size  :  32px  ;  } 

As we don’t have icons yet, let’s make our SVG out of mobile icon designs and name them in accordance with our classes: announcements, partners and news. Please note that any SVG icon should be a single Compound Path. Then go to a service (I use fontello.com), create the font and name it, let’s say - ittalk-font-small:

On the second tab (Customize Names) you can change the default name, which will be used in the generated css. Since we named our files by class, we have nothing to do there. On the third tab, you can change the Unicode of each icon in the font by attaching it to certain letters on your keyboard or beyond it. But we do not plan to use this font in the operating system, so we also skip this page. Click on the "Download webfont" button and save the complete archive to your computer.

In the archive, we are mainly interested in the “font” folder and the file named “ittalk-font-small.css” from the “css” folder. Copy this to “fonts” folder of the project and add the following line to “style-320.css” at the very beginning of the file:

 @import "fonts/ittalk-font-small.css"; 
 
body  { 
    ...

In the “ittalk-font-small.css” file we change all '../font/...' paths in @font-face to 'small/'.

So, our links now have symbols. Not bad! Add a bit of code to the CSS:

 @import "fonts/ittalk-font-small.css"; 
 
body  {  background-color  :  #f0f0f0  ;  text-align  :  center  ;  } 
 
a  {  text-decoration  :  none  ;  } 
 
 .icon  {  display  :  inline-block ;  color  :  #919191  ;  margin-bottom  :  20px  ;  width  :  100%  ;  height  :  80px  ;  /*  Little magic aimed at                */  line-height  :  80px  ;  /*  deleting text from the link          */  overflow  :  hidden  ;  /*  leaving an icon alone.               */  } 
 
 .icon  :before   {  width  :  100%  ;  font-size  :  50px  ;  } 

Yay! Now only icons are left. Do the same for the middle and large size categories:

 <!DOCTYPE html>  < html >  < head >  < link  rel  =  "stylesheet"  type  =  "text/css"  href  =  "style-480.css"  media  =  "screen and (max-width:480px)" >  < link  rel  =  "stylesheet"  type  =  "text/css"  href  =  "style-720.css"  media  =  "screen and (min-width:481px) and (max-width:720px)" >  < link  rel  =  "stylesheet"  type  =  "text/css"  href  =  "style-big.css"  media  =  "screen and (min-width:721px)" >  < /  head >  < body > 
...

Style-720.css:

 @import "fonts/ittalk-font-medium.css"; 
 
body  {  background-color  :  #f0f0f0  ;  text-align  :  center  ;  } 
 
a  {  text-decoration  :  none  ;  } 
 
 .icon  {  display  :  inline-block ;  color  :  #919191  ;  width  :  32%  ;  height  :  130px  ;  line-height  :  130px  ;  overflow  :  hidden  ;  } 
 
 .icon  :before   {  width  :  100%  ;  font-size  :  72px  ;  } 

Style-big.css:

 @import "fonts/ittalk-font-big.css"; 
 
body  {  background-color  :  #f0f0f0  ;  text-align  :  center  ;  } 
 
a  {  text-decoration  :  none  ;  } 
 
 .icon  {  display  :  inline-block ;  color  :  #919191  ;  width  :  30%  ;  height  :  210px  ;  line-height  :  210px  ;  overflow  :  hidden  ;  } 
 
 .icon  :before   {  width  :  100%  ;  font-size  :  128px  ;  } 

Demo of this part of the process. Best viewed in Chrome or Firefox.

Pros:

  • Vector scalability
  • Small amount of code
  • Ease in use and update
  • Flexibility
  • No JavaScript

Contros:

  • One color per icon maximum
  • Additional files such as fonts to upload
  • Troubles with old browsers support

The second approach to creating adaptive icons

Now, let’s decide what to do with the logo and with the one-color-icon problem. As we see, the logo contains of four elements that disappear one by one depending on the level of detail:

Now, let’s prepare four SVGs (make sure that source files have identical height and width), where each element takes its own spot in terms of general composition and let’s compose a font out of them. To do that, let’s go to fontello, add the SVG and change the matching charts to “L”,”o”,”g” and dot of the third tab, for example.

Let’s name this font “ittalk-logo” and download the file. Transfer the fonts to the “logo” folder and copy the @font-face from “ittalk-logo.css” folder (don’t forget to change the paths).

Add a couple of lines to each style.

Style-480.css:

 @import "fonts/ittalk-font-small.css"; 
 
 @font-face {  font-family  :  'ittalk-logo'  ; 
        src :  url  (  'fonts/logo/ittalk-logo.eot?39703710'  )  ; 
        src :  url  (  'fonts/logo/ittalk-logo.eot?39703710#iefix'  )  format (  'embedded-opentype'  )  ,  url  (  'fonts/logo/ittalk-logo.woff?39703710'  )  format (  'woff'  )  ,  url  (  'fonts/logo/ittalk-logo.ttf?39703710'  )  format (  'truetype'  )  ,  url  (  'fonts/logo/ittalk-logo.svg?39703710#ittalk-logo'  )  format (  'svg'  )  ;  font-weight  :  normal  ;  font-style  :  normal  ;  } 
 
body  {  background-color  :  #f0f0f0  ;  text-align  :  center  ;  } 
 
a  {  text-decoration  :  none  ;  } 
 
 .icon  {  display  :  inline-block ;  color  :  #919191  ;  margin-bottom  :  20px  ;  width  :  100%  ;  height  :  80px  ;  /*  Little magic aimed at                */  line-height  :  80px  ;  /*  deleting text from the link          */  overflow  :  hidden  ;  /*  leaving an icon alone.               */ 
 
 } 
 
 .icon  :before   {  width  :  100%  ;  font-size  :  50px  ;  } 
 
 .icon-logo  {  font-family  :  'ittalk-logo'  ;  display  :  inline-block ; 
    word-wrap :  break-word ;  width  :  1px  ;  line-height  :  0px  ;  font-size  :  180px  ;  padding-top  :  100px  ;  height  :  60px  ;  margin-left  :  -0.7em  ;  } 

Style-720.css:

 @import "fonts/ittalk-font-medium.css"; 
 
 @font-face {  font-family  :  'ittalk-logo'  ; 
        src :  url  (  'fonts/logo/ittalk-logo.eot?39703710'  )  ; 
        src :  url  (  'fonts/logo/ittalk-logo.eot?39703710#iefix'  )  format (  'embedded-opentype'  )  ,  url  (  'fonts/logo/ittalk-logo.woff?39703710'  )  format (  'woff'  )  ,  url  (  'fonts/logo/ittalk-logo.ttf?39703710'  )  format (  'truetype'  )  ,  url  (  'fonts/logo/ittalk-logo.svg?39703710#ittalk-logo'  )  format (  'svg'  )  ;  font-weight  :  normal  ;  font-style  :  normal  ;  } 
 
body  {  background-color  :  #f0f0f0  ;  text-align  :  center  ;  } 
 
a  {  text-decoration  :  none  ;  } 
 
 .icon  {  display  :  inline-block ;  color  :  #919191  ;  width  :  32%  ;  height  :  130px  ;  line-height  :  130px  ;  overflow  :  hidden  ;  } 
 
 .icon  :before   {  width  :  100%  ;  font-size  :  72px  ;  } 
 
 .icon-logo  {  font-family  :  'ittalk-logo'  ;  display  :  inline-block ; 
    word-wrap :  break-word ;  width  :  1px  ;  line-height  :  0px  ;  font-size  :  320px  ;  padding-top  :  200px  ;  height  :  60px  ;  margin-left  :  -0.75em  ;  } 

Style-big.css

 @import "fonts/ittalk-font-big.css"; 
 
 @font-face {  font-family  :  'ittalk-logo'  ; 
        src :  url  (  'fonts/logo/ittalk-logo.eot?39703710'  )  ; 
        src :  url  (  'fonts/logo/ittalk-logo.eot?39703710#iefix'  )  format (  'embedded-opentype'  )  ,  url  (  'fonts/logo/ittalk-logo.woff?39703710'  )  format (  'woff'  )  ,  url  (  'fonts/logo/ittalk-logo.ttf?39703710'  )  format (  'truetype'  )  ,  url  (  'fonts/logo/ittalk-logo.svg?39703710#ittalk-logo'  )  format (  'svg'  )  ;  font-weight  :  normal  ;  font-style  :  normal  ;  } 
 
body  {  background-color  :  #f0f0f0  ;  text-align  :  center  ;  } 
 
a  {  text-decoration  :  none  ;  } 
 
 .icon  {  display  :  inline-block ;  color  :  #919191  ;  width  :  30%  ;  height  :  210px  ;  line-height  :  210px  ;  overflow  :  hidden  ;  } 
 
 .icon  :before   {  width  :  100%  ;  font-size  :  128px  ;  } 
 
 .icon-logo  {  font-family  :  'ittalk-logo'  ;  display  :  inline-block ; 
    word-wrap :  break-word ;  width  :  1px  ;  line-height  :  0px  ;  font-size  :  640px  ;  padding-top  :  300px  ;  height  :  120px  ;  margin-left  :  -0.75em  ;  } 

NB: there is the possibility you will have to search for a particular value of font size, and for the padding-top, height and margin-left values.

We have a one-color logo, so we can’t see the elements. The easiest way to deal with it is changing the semantic of the html-file a bit by adding some “useless” tags.

 <!DOCTYPE html>  < html >  < head >  < link  rel  =  "stylesheet"  type  =  "text/css"  href  =  "style-480.css"  media  =  "screen and (max-width:480px)" >  < /  head >  < body >  <header  class  =  "logo-container" >  < div  class  =  "logo" >  < span  class  =  "icon-logo" > 
                    L < b > o < /  b >< i > g < /  i >< s > . < /  s >  < /  span >  < /  div >  < / header>  < div  class  =  "content" >  < a  href  =  "#"  class  =  "icon icon-announces" > Announces < /  a >  < a  href  =  "#"  class  =  "icon icon-partners" > Partners < /  a >  < a  href  =  "#"  class  =  "icon icon-news" > News < /  a >  < /  div >  < /  body >  < /  html > 

That looks horrible, but let me remind you: we are just looking at an interesting and yet fast solution.

Now, let’s add some rules to the styles:

Style-big.css

 .icon-logo  {  color  :  #1c82c4  ;  } 
 
 .icon-logo  b  {  color  :  #acd03c  ;  font-weight  :  normal  ;  } 
 
 .icon-logo  i  {  color  :  #fff  ;  font-style  :  normal  ;  } 
 
 .icon-logo  s  {  color  :  #fff  ;  text-decoration  :  none  ;  } 

Style-720.css

 .icon-logo  {  color  :  #1c82c4  ;  } 
 
 .icon-logo  b  {  color  :  #acd03c  ;  font-weight  :  normal  ;  } 
 
 .icon-logo  i  {  color  :  #fff  ;  font-style  :  normal  ;  } 
 
 .icon-logo  s  {  display  :  none  ;  } 

Style-480.css

 .icon-logo  {  color  :  #1c82c4  ;  } 
 
 .icon-logo  b  {  color  :  #acd03c  ;  font-weight  :  normal  ;  } 
 
 .icon-logo  i  {  display  :  none  ;  } 
 
 .icon-logo  s  {  display  :  none  ;  } 

Voila! Now we have responsive icons without using SVG and high resolution bitmap images. Icons that may change their detail level depending on the width of a screen.

You can view the demo here. You can change the size of the window and see what happens, or open it on a mobile phone and rotate the device. It is better to view it in Chrome or Firefox.

Conclusion

In conclusion, I’d like to remind you that all the code and illustrations presented here are only meant to show you what can be done using Adaptive icons. Of course, the icons are not that fancy and the structure of the project can be improved, but this article is aimed at telling you about new ways of looking at trends in web-design, the ways they interact and creating of a solution that does work in certain situations.

I hope you enjoyed this article and learned some new stuff that will be useful in your website creation endeavors.

Sign Up for Updates!

Subscribe now to receive industry-related articles and updates

Choose industries of interest
Thank You for Joining!

You will receive regular updates based on your interests. No spam guaranteed

Add another email address
Read more
Sign Up for Updates!
Choose industries of interest
Thank You for Joining!

You will receive regular updates based on your interests. No spam guaranteed

Add another email address
Welcome
We are glad you found us
Please explore our services and find out how we can support your business goals.
Get in Touch