Thursday, 23 October 2014

Image Sprites VS Web Icon Fonts

There are a bunch of ways to increase the performance of your website. Many today are using image sprites and/or icon fonts. They help add a visual flair to your website, but also help decrease load times. This is all great, but you shouldn’t just jump into using either of these solutions without first knowing what their advantages and disadvantages are.

Image Sprites


Footaction sprite
Recent sprite I worked on from footaction.com

Image sprites let you pack a large number of complex images into one. They can be any color , shape or size, just like the one from Google above.

Advantages

Probably the biggest advantage when using an image sprite is the complexity of the images that you can include. This is where they have a clear advantage over an icon font, as icon fonts are very simple and can only be a single color. Image sprites are just a large collection of individual images, so it doesn’t matter what you put onto them.
An image sprite can also fit as many images as you want. If you wanted, there could be hundreds on one sprite, but I would not recommend that. If you need over 50 images on a sprite you should probably reconsider your design or try to solve some of your problems with HTML and CSS.
Lastly, and this applies to both image sprites and icon fonts, is that sprites reduce the number of HTTP requests required on your web page. Hopefully we all know that less of them will help increase the load time of your website. Fast websites = happy users (unless you have a crappy website :/).
So here is a list of advantages that I came up with for image sprites:
  • Complex shapes and multiple colors
  • Fit a large amount of images
  • Less HTTP requests
  • Cross browser compatible

Disadvantages

With any solution there are a few disadvantages. Image sprites can be larger in size, since they are usually a png, but not by much. You will have to wait a little longer for the sprite to load, which causes a slightly noticeable gap in time before you see them load in fully. This is definitely offset by the savings in load times though and should not be worried about. If you are still worried, you could try hiding your page until the images are loaded.
If you are creating image sprites by hand they are a pain to change. If you make a simple change to the height of one of the images in your sprite, you will have to go in and replace that image, possibly reorganize your sprite, and then possibly add and change your CSS. This can be quite time-consuming if your images change rapidly or you are stuck with an indecisive designer. All of this can be avoided by using tools that generate sprites for you such as Grunt.
Image sprites can add a little to your CSS as well. This is a necessary evil, but has to be done because otherwise we couldn’t position our sprites correctly! I have had some larger sprites add up to 100 lines of CSS, but this is usually minor since raw text is always lighter than an image. The best solution I have come up with is to have one class apply the background-image, and then another class apply the background-position.

Here is my complete list of disadvantages:
  • Slightly larger in size
  • Hard to change (if done manually)
  • Not responsive
  • Cannot tile

Web Icon Fonts


Icomoon app
Here is a screenshot from Icomoon
Icon fonts are a wonderful addition to the tool-set of web developers. Below are some distinct advantages and disadvantages of them.

Advantages

Web icon fonts are very small in size compared to images. They are like any other font file, just a pack of vectors. Smaller is always better when trying to improve the performance of your site.
Since icon fonts are just that, fonts, you can change the color with a few lines of CSS. It is quite pleasing to be able to control an icon just like a font. Hover effects with CSS are a breeze. If you are looking for a nicer effect you could even add text-shadow.
There is no need to worry about web fonts being cross browser compatible. If you have the proper file formats (eot, ttf, woff, and svg) you use them just like any other font with @font-face. If you don’t have all the formats needed, head over to Font-Squirrels font-face generator.
One of the greatest advantages of icon fonts is that they won’t get pixelized on a retina screen. Vectors don’t really care what screen they are on and will look great on any. On high res phones they look especially appetizing.
Check out two of my favorite icon font generators:
Here is my list of advantages:
  • Small in size
  • Pixel density independent
  • Easily change size and color
  • Less HTTP requests
  • Cross browser compatible

Disadvantages

Since icon fonts are just simple vectors, they cannot be very complex. This is why they are used primarily for icons and that is it. If you want multiple colors, effects and gradients, it is best to stick with images.
Here is my complete list of disadvantages:
  • Cannot be very complex, mostly used for icons
  • Only a single color
  • Accessibility (via Eduardo)

Which to choose?

Choosing which of these to use depends upon the situation you are in. If you want highly detailed images, and not just simple icons, then you better create an image sprite. Otherwise for simple icons, a web icon font has a lot of distinct advantages. They are especially useful for mobile devices where icons play a much larger role in most designs. Sometimes the best solution is not just to choose one, but to integrate both into your website.

If this post interested you, check out my other one on increasing the performance of your website. Let me know if this post helped you in the comments below.

How to keep up to date on Front-End Technologies


The web is a rapidly evolving universe. An important part of our job as front-end developers is keeping up to date and staying close to new tools, trends and workflows.
Hundreds of blog posts and articles are published every day, but there is no way you can read all of them. We think you should have a strategy to keep up to date, so we have created this recipe.

Follow cool people

Front-end leaders help you to stay on top of relevant news and trends. They are in-the-know and they work on a specific topic.
Twitter can be a great place to find people who are in-the-know.

Find the best sources

Around the web there is lots of useful information about front-end news and trends, but sometimes it's too hard to find and read all of them. It's a mess and you will go crazy!
Therefore, we have put together the best sources about news and trends in the front-end world.

Blogs

  • DailyJS
    A JavaScript Blog.
  • The Morning Brew
    A Daily .NET Software Development Link Blog.
  • Treehouse Blog
    The Treehouse blog provides valuable content on web development, web design, and startup tips.
  • EchoJS
    A HackerNews-like site dedicated to JavaScript and Front-end News.
  • .net Magazine
    .net is the world’s best-selling magazine for web designers and developers.
  • Web Platform
    An open community of developers building resources for a better web.
  • HTML5 ROCKS
    Posts, tutorials, case study & demos.
  • HTML5 Doctor
    A blog to help you learn more about HTML5.
  • Nettuts+
    Tutorials, articles, tips, and community for web developers.
  • QuirksMode
    It is the prime source for browser compatibility information on the Internet.
  • CSS-TRICKS
    A web design community.
  • CSS Wizardry
    A specialised blog in writing and scaling CSS for large apps and websites.
  • Smashing Magazine
    An online magazine for professional Web designers and developers.
  • 24 ways
    Geeks publish a daily dose of web design and development.
  • A List Apart
    Design, development, and web content, focused on standards and best practices.
  • JSCentral
    JavaScript news and links.
  • JSGoodies
    Mainly web-focused; in particular, most are JS-focused.
  • SitePoint
    An online media company providing cutting-edge content for web professionals.

Weekly News

Podcasts

  • Shoptalk
    Shoptalk A podcast about front end web design, development and UX.
  • The Hanselminutes
    The Hanselminutes Hanselminutes Podcast is "Fresh Air" for developers.
  • The Big Web Show
    The Big Web Show The award winning Big Web Show features special guests and topics. It's everything web that matters.
  • JavaScript Jabber
    JavaScript Jabber A weekly podcast discussing the superb language JavaScript.
  • The Web Ahead
    The Web Ahead A weekly podcast about changing technologies and the future of the web.
  • Google Developers
    Google Developers Talks, screencasts, interviews, and more relevant to Google's developer products.

Attend conferences

Thousands of developers attend conferences to promote the latest technologies, share ideas, thoughts or experiences and learn from others. They discuss the best practices, standards and trends. You should participate in order to meet awesome people and organizations who do what you do.
  • Fronteers conference
    Fronteers conference Conference of the Dutch non-profit trade organisation for front-end developers.
  • Front Trends
    Front Trends A gathering where front-end lovers and tech entrepreneurs discover the latest trends.
  • HTML5DevConf
    HTML5DevConf Has become the largest JavaScript and HTML5 developers conference in the world.
  • Fluent Conf JavaScript & Beyond
    Fluent Conf JavaScript & Beyond Featuring the best in JavaScript and progressive Web development.
  • Front End Ops Conf
    Front End Ops Conf A 2-day conference in San Francisco dedicated to the emerging discipline of front end operations.
  • ColdFront
    ColdFront ColdFront is a one-day front-end conference in Copenhagen.


Get Your Own Sources

It's really important that you find your own, unique way to be up to date. Take a look at how these great developers are doing it!
  • These days I find myself heavily relying on Twitter lists and G+ circles to keep up to date with what's happening on the front-end.
    If there are tools or libraries I regularly use, I try to keep an eye on what the developers working on them might have to say because that's how you find out insights, tips/tricks and information about what's coming next.
    It's also a great idea to follow those kind souls working on our behalf in the web standards space. More often these days drafts of potential specs are posted early on social networks meaning you have a chance to both review and if you're interested, contribute to what the web platform might look like in a few years.

  • The only way that I've found that I'm able to stay up to date is by creating. I follow a well-curated list of people on twitter, and read blogs and programming news sites, but when it comes down to it, the only time I'm ever really learning is when I'm doing.
    When I want to learn something, I'll just start a project with it, and along the way I'll figure out the other tools I need to be successful. After a few failed attempts, normally I can create something meaningful (that I usually throw away anyways) that allows me to understand core concepts and/or make quick uninformed jabs about things that I don't like or understand.

  • I follow people on Twitter who produce new things. Some people like to follow just blogs, but I like to see what the people who make things recommend. My Twitter feed has sort of replaced my old RSS feed to some extent - I am way more likely to read an article recommended by someone who I see posting their repos alongside it. That kind of behavior tells me that the person is both an active developer and someone who thinks about their craft in most cases.
    I'm trying to spend more time on various W3C working group and specification mailing lists. There is a lot that goes over my head about the specific implementations of features that as a web developer I would take for granted every day. Sometimes keeping up is challenging, but I like a good challenge and as I stick around I learn more and more so I can ideally contribute more to the discussion in the future.
    There is a saying that goes around: "If you feel like you are the smartest person in the room, you're in the wrong room." Surround yourself with people who are intelligent but not cocky about it.

  • I recommend three resources for staying up to date on front end technologies.
    First, Twitter is invaluable. Start with famous JavaScript people you know (e.g. the creator of your framework of choice) and continue from there – sooner or later you will come across interesting retweets, recommendations on who to follow, etc.
    Second, Echo JS is a JavaScript news site in the tradition of Hacker News.
    Third, the Cooper Press email newsletters are a convenient weekly source of information (disclaimer: I edit JavaScript Weekly).

  • I live on Twitter. I depend on it to give me an idea of what's popular and upcoming, and also what problems people are dealing with. This influences the way I think and the projects I take on.
    I also still read web-related RSS feeds, books, magazines and more when I travel.
    The other big thing that I find essential for keeping up to date on new technology is to experiment. Find some time outside of your normal job to tinker with a project, contribute to someone else's, or play around with a new bit of technology. Play, fail, succeed, share, repeat.

  • I keep up with front-end technologies religiously. As part of my daily activities, I spend 20 to 30 minutes reviewing twitter and RSS feeds, investigating anything that sparks my interest.
    I am also regularly reading (books), watching (videos), or writing about my practice. From time to time I pick a coding, or writing, project and focus all of my spare time in this area. When I tire of writing words or code I simply spend time reading code.
    When I'm feeling burnt out I'll attend a conference so that I can be inspired by ideas and people. And when I am really bored I start looking into practices that cross over into my area of expertise.
    The secret to keeping up is not to view it as an extra chore, but instead as part of the job I've chosen.

    1. I have several feeds I read almost daily
    2. I follow lots of people involved in web standards or browser development or are just very good developers
    3. I actually read specifications from time to time, some of them are easy to understand and they are first-hand sources. W3C mailing lists also help: You learn about web technologies at the moment of their creation and can even influence them!
    4. Conferences, both for the discussions and the sessions

  • Everybody knows that Twitter is the best place to find information such as tutorials or blog posts about a new technology. But who writes them? Where do they get their information from?
    At some point you need to go right to the core... the mailing lists, specifications and even source code. By getting used to reading the specifications and participating in some mailing list conversations and understanding some of the source code, you will naturally become a better developer and understand it all much more.

  • and knowing the people behind all significant projects :)

Alternative content