Tuesday, December 24, 2013

Challenges & Solutions for Your Responsive Navigation

Responsive Navigation

One of the biggest hurdles when creating a responsive website is implementing the navigation – hands down. Not just from a design standpoint, but from a content and development standpoint as well. Debatably the most important element on the page, a user should have no issues as they try to navigate around your website no matter what device they are on.

Tuesday, December 17, 2013

15 Tools to Help You Create Your Next Infographic

Tools to Help You Create Your Next Infographic

Five to six years ago, I believe almost everybody haven't heard about infographic. In the recent year, it's now surfacing the whole web. Internet marketers are now using it as a tool to deliver their message the best way. No matter how eloquent you are as a writer. Sometimes, a single image might speak better more than a thousand words.

Friday, December 13, 2013

SVG Icons FTW

SVG Icons FTW

Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It's time to fill this gap and use SVG as icons in our web projects.

A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But think about your icons. Using raster graphics for icons means that they are not manageable in CSS. What if we need to change a color of an icon for its hover/active/focus state? For each icon state we need to add one more icon image. What about size? For each icon size we need to add yet another icon image. What about a shape? A shadow? Yup, the same thing. Not very convenient, right? So we are ending up with bloated sprites and style sheets that are hard to maintain and scale.

But fortunately we've had icon fonts coming to the rescue. They allow us to manage all these things more easily and we have the following benefits:

  • It's plain text, which means they can be gzipped to up to 95%
  • It's a vector graphic, which means it can be scaled to any size making it Retina ready
  • It's one source file, which means a minimum of HTTP requests
  • It's a font – you can easily change size, color, shape and add a shadow
  • Browser support for older browsers possible (e.g. IE6)

Unfortunately, icon fonts have some limitations like being monochrome (still) and we can only use styles for texts like e.g. a text-shadow. We can't, for example, use an inset text shadow or apply different colors to the details.

So today we will explore the possibilities of using SVG icons instead.

Using SVG Icons

The icon solution I want to share here with you is based on SVG (Scalable Vector Graphics). Extending the benefits of icon fonts, it will give us some additional super powers:

  • The power of consistently crisp rendering across browsers and operating systems.
  • The power of CSS. We will obtain the ability to style our icons with CSS.
  • The power of SVG filter effects.
  • The power of interactivity. We will be able to use animations with SMIL, CSS or JavaScript.
  • The power of the Markup language.

Currently, SVG looks more like a retired super hero. For humanity's sake, let's kick him off the sofa and send him to the gym.

Getting Started

First, we'll need to get some SVGs to work with. I'm assuming you are familiar with vector graphics and know how to create or where to get a SVG file. Check out this article for a good introduction on how to create and work with SVGs. For this tutorial we'll be using this SVG file. All demos you will see here will actually be working pens, so you will have the opportunity to play with them live.

At this point we have a vector graphic to play with, so let's add an empty SVG document just after the opening body tag.

I will refer to this SVG as "SVG source document" throughout this tutorial.

Let's add the "inner" SVG source into the empty SVG declaration and give this shape a unique ID for future reference.

<!doctype html>
<html>
<head>
    <meta charset=utf-8 />
</head>
<body>
  <!-- SVG SOURCE -->
  <svg height="0" width="0" style="position:absolute;margin-left: -100%;">
    <path id="heart-icon" d="M256,465.559c0,0- 239.054-135.345-239.054-291.062c0-159
       .761,224.692-177.574,239.054-7.756 c17.244-169.692,239.054-152.008,239.054,
       7.756C495.054,330.214,256,465.559,256,465.559z"/>
  </svg>
  <!-- SVG SOURCE ends-->
<body>
<html>

Find this code on Codepen

If your shape consist of many small chunks, you'll need to wrap them all with a g tag and add an ID to that group.

Now we can "use" this graphic wherever we want in our HTML document with the help of use. The xlink:href attribute is a reference to our shape by its ID:

<!doctype html>
<html>
<head>
  <meta charset=utf-8 />
</head>
<body>

<!-- SVG SOURCE —>
...
<!-- SVG SOURCE ends —>

<svg class="icon" viewBox="0 0 32 32"
    <use xlink:href="<strong>#heart-icon</strong>">
</svg>

</body>
</html>


Isn't that nice?

The use element takes nodes from within the SVG document and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM and then pasted where the use element is, much like anonymous content and XBL.— Mozilla DN

Thoughtful readers probably noticed the most interesting part of the above pen: we can simply use CSS to style our icons. Take a look:


The set of properties we can work with is pretty large. The most useful and common ones are:

  • width and height
  • icon color by using the fill property
  • stroke by setting stoke or stroke-width

Styling these properties will give us many possibilities. But let's make it even better – let's add our wanted inset shadow.

Adding Filter Effects

Filter effects are the real super powers of SVG and if you are interested in a detailed overview, check out Filter Effects – SVG 1.1 (Second Edition) and SVG Filters by Mike Sierra.

Let's work with some pre-made filters. Fortunately, there are a lot of ready-to-use SVG filters around.

To use a filter effect with our icon we need to declare it in our "SVG source document" with a unique ID for referencing, just like the we did with the icon but now we'll have a filter tag.

<filter id='inset-shadow'>
    <!-- Shadow offset -->
    <feOffset
    dx='0'
    dy='0'
    />

    <!-- Shadow blur -->
    <feGaussianBlur
    stdDeviation='1'
    result='offset-blur'
    />

    <!-- Invert drop shadow to make an inset shadow -->
    <feComposite
    operator='out'
    in='SourceGraphic'
    in2='offset-blur'
    result='inverse'
    />

    <!-- Cut color inside shadow -->
    <feFlood
    flood-color='black'
    flood-opacity='.95'
    result='color'
    />

    <feComposite
    operator='in'
    in='color'
    in2='inverse'
    result='shadow'
    />

    <!-- Placing shadow over element -->
    <feComposite
    operator='over'
    in='shadow'
    in2='SourceGraphic'
/>

Now, let's add the reference to the filter to a new group wrapper:

<svg viewBox="0 0 32 32">
  <g filter="url(#inset-shadow)">
    <use xlink:href="#heart-icon"></use>
  </g>
</svg>

Check out the following examples of SVG filters:

Inset shadow


Drop shadow


More examples


Isn't this awesome?

Adding Interactivity

As I've mentioned at the beginning of this tutorial, we can use SMIL, CSS or JavaScript for animating icons.

So let's bring some life to our icons! We'll create a working animated clock which will be great for showing the possibilities of what we can do.

We will start with an alarm clock icon as the "SVG source document". It consists of different shapes wrapped in a group with the ID #clock-icon for reference.


Icon credits go to visualpharm. License: CC by-nd 3.0.

I've also added some other IDs like #hour-hand, #minute-hand and #second-hand where appropriate for referring to the paths in the animation we will create.

Now, let's declare a rotation 2D transform for each of the clock hands.

For that we'll add a transform value of rotate(0 16 17) where

  • 0 is the amount of degrees the clock hand is rotated
  • 16 17 simply the center of our rotation on the X and Y axis.

So, using this rotation value

<rect id="hour-hand" transform="rotate(320 16 17)" x="15.386" y="10.291" width="1.227" height="7.626"/>

will rotate hour clock hand 320 degrees.

Take a look at the demo:


The next step is to add an animation of the rotation we made above. For this purpose we will use some JavaScript and set a new rotate value every full second:

<script>
    var setTime = function(){
      var date = new Date(),
      MINUTE = 60, HOUR   = 60*MINUTE,
      seconds = date.getSeconds(),
      minutes = (date.getMinutes()*MINUTE) + seconds,
      hours = (date.getHours()*HOUR)+minutes;

      document.getElementById('second-hand').setAttribute('transform', 'rotate('+360*(seconds/MINUTE)+',16,17)');
      document.getElementById('minute-hand').setAttribute('transform', 'rotate('+360*(minutes/HOUR)+',16,17)');
      document.getElementById('hour-hand').setAttribute('transform', 'rotate('+360*(hours/(12*HOUR))+',16,17)');
    }
    setTime();
    var interval = setInterval(setTime,1000);
</script>


Isn't this awesome?

If you are interested in seeing a version using SMIL animation, you can take a look at this demo. Also, check out the CSS version (both demos best viewed in Chrome). Note that SMIL animation support is limited.

Using Media Queries

We can use isolated CSS and especially media queries inside of our SVG icon. That means that we have the ability to change, for instance, a shape of an icon depending on screen size and more. We'll use this kind of inline style for this purpose:

<style>
   <![CDATA[ 
    @media screen and (max-width:810px){
      .hide{
        display: none;
      }
    }
   ]] >
</style>

Try to resize the browser when viewing this pen in a new window to less or more than 810 pixel.


Isn't this... SVG?

More Fun With SVG Icons

SVG Icons FTW

Let's do something fun with all these things we've just gone over. The demo below shows differently sized and filled icons, with some JS animations:


View this demo in full page

In the next demo we'll add some filter effects:


View this demo in full page

Having all these superpowers, the only limit is your imagination.

Browser Support

What we have done so far should work well in all popular modern browsers:

  • IE 9+ (filter effects since IE10)
  • Mozilla 4+
  • Opera 11.6+ (filter effects since Opera 12)
  • Safari 5.1+ (filters since Safari 6)
  • Chrome 14+ (at least)

Performance

After running a couple of tests, it shows that SVG icons are about two times slower compared to using a .wof icon font in Chrome. The time cost of the first paint operation is about 0.05 millisecond per icon or about 1.453ms for an average of 30 icons per user's view.

Conclusion

SVG Icons FTW

Let's look back and analyze what we've done.

Using SVG as icons in our web projects gives us the following advantages:

  • Only one HTTP request
  • Scalable vector and hence intrinsically Retina ready
  • Easy styling of color/size/effects in CSS
  • SVG icons are "light-weight" (the heart icon from my examples has only 189 bytes not gzipped)
  • It's text so it can be gzipped up to 95%
  • Power of SVG filter effects
  • XML like structure
  • We can have multi-colored icons
  • We can make use of isolated styles and media queries
  • We can make use of isolated animations with SMIL, CSS or JS
  • Supported by all major modern browsers

The IconMelon Project

SVG Icons FTW

As you have seen, using SVGs in your web project gives you a lot of possibilities but it would be great to have some kind of boilerplate for the icons itself, the filters and the CSS. So, I've been working on a free and open project called Iconmelon which aims to collect free SVG icon sets and provide a filter and CSS boilerplate. You can create your icon sets and download all the needed files and also submit your own graphics.

SVG Icons FTW

It's a brand new project so if you see any issues or have any feedback please let me know. Please also check out the support us page to see how you can help it grow.

Friday, December 13, 2013

Colorpeek, Part 2: Building Your First Chrome Extension

Building Your First Chrome Extension

The following is a guest post by Tyler Sticka. Tyler created a tool called Colorpeek. Yesterday we looked at the what and why of things. Today we'll look at how he built the Chrome Extension, which will serve as a great tutorial on how you can get started building your own Chrome Extensions.

Thursday, December 12, 2013

5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before

5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before

Until recently, creating mobile web designs that look and feel like native apps has pretty much been an impossible dream. There are plenty of creative workarounds to try and bring that native "feel" to mobile web browsing, but so far we've struggled to bridge the gap between native and the web.

Thursday, December 12, 2013

How to Decide on a Color Scheme for Your Website

How to Decide on a Color Scheme for Your Website
Your website's color scheme says a lot about you and/or your company. Color goes beyond aesthetics and has possible effects on the behaviors of your website's viewers. Deciding on a color scheme can be a difficult choice, with so many combinations and choices it can be hard to choose something that represents you. However, there is a method to the madness and there are color tools which can help narrow down the search for the perfect color scheme.

Saturday, December 07, 2013

Device State Detection with CSS Media Queries and JavaScript

Device State Detection with CSS Media Queries and JavaScript

Being able to detect device state at any given moment is important for any number of reasons and so it's important that web app CSS and JavaScript are in sync with each other. In working on the Mozilla Developer Networks' redesign, I found that our many media queries, although helpful, sometimes left JavaScript in the dark about the device state. Is the user viewing the site in desktop, tablet, or phone screen size? Easy from a CSS perspective but CSS doesn't directly speak with JavaScript. I've created a system based on media queries and z-index which can tell me which media query the user is viewing the site in at any given time, so that I can make adjustments to dynamic functionality whenever I want!

Saturday, December 07, 2013

7 Critical Mistakes You're (almost certainly) Making On Social Media

7 Critical Mistakes You're Making On Social Media
If you are marketing on social media (and you should be), you are probably making some of these mistakes. Here's how to recognize and fix them (from the Gospel of Gary Vaynerchuk).

Social media is just like... boxing?

That's the latest gospel out of Gary Vaynerchuk, the two-time bestselling author and the man known to many as the king of social media.

In his latest book, he breaks down social media strategy into five simple words: Jab, Jab, Jab, Right Hook.

Or in other words: Give Value, Give Value, Give Value, Make Your Ask.

The book goes into detail on how to navigate the often confusing and overwhelming world of social media and Vaynerchuk sheds much-needed light on the mistakes many of us make every day. Here are seven of them:

Thursday, December 05, 2013

8 HTML Elements You’re Not Using (and Should Be)

8 HTML Elements You’re Not Using
In today's web, the word semantic gets thrown around a lot. But what does semantic mean? Why is it important?

Semantic HTML expresses the meaning of the document. It's less about how the text looks and more about what it is. Good semantic markup helps both people and machines understand the content and its context.

Semantic markup is much more accessible and easier for screen readers to interpret. It's SEO friendly. It works better with modern browsers. It reduces the amount of code needed to express the content and increases the clarity of the code for other people that have to read it.

Wednesday, December 04, 2013

CSS Alignment and Sizing Snippets

CSS Alignment and Sizing Snippets
* This article was originally published at http://timseverien.nl/2013/10/css-alignment-and-sizing/

CSS can be tricky sometimes, especially when aligning and setting sizes. This article contains a bunch of helpful snippets that I've gathered. They make my life easier and hopefully yours as well.

Note: beneath each snippet is a table indicating browser support.

Wednesday, December 04, 2013

Javascript Hacks for Hipsters

Javascript Hacks for Hipsters
Javascript is so much fun, except when it's not.

There's always the fear of runtime errors that keeps us thinking all the time while writing code. It makes us better coders - we have no other option than to visualize every line of code as if it's running as we write it.

That's why it's so important to have tidy code. Small code. Pretty code. Code you just fall in love with. Otherwise, Javascript will scare you away.