The Best of this month: News, Tutorials, and Freebies

With autumn showers comes a growing list of exciting news and resources from the web design and development community. Not in the mood to scour the Internet to find them all? Don’t worry! We’ve collected the best ones for you below. Have fun reading!

INDUSTRY NEWS

WordPress 4.4 Beta 1

Yes, it’s finally here—the widely anticipated WordPress 4.4 Beta 1! This update features a lot of desirable changes, including taxonomy term metadata; the REST API plugin; and Twenty Sixteen, the new default theme. It’s still in development, however, so we suggest you wait a little while longer before you use it for production. It’ll certainly give you a taste of things to come, though!

MAX 2015

Big news: Adobe released, at their own MAX conference, a design system that could completely change how designers operate over the next few years. With the cool code name ‘Project Comet’, the UX design solution will be flagshipped by both desktop and mobile apps—and it features design, prototyping, wireframing and live previews. Nice!

Sketch 3.4 Released

The latest Sketch update has been launched, and as you might expect, it features plenty of enhancements that will tempt web designers across the globe. Among the new perks are improved panning and zooming, better Boolean operations, and the ability to share Sketch documents in a local network. Check out the complete list of what’s new right here.

sketch

MUST-SEES FOR DEVELOPERS

Never-Ending Background Slider

Sure, as a developer, you probably know how to create a CSS slideshow. However, this handy little guide explains how to create a never-ending moving background, which works very nicely in certain designs. Thanks to CSS-Tricks for this great tutorial!

SVG Favicons

SVG favicons, until recently, weren’t well-supported by browsers. However, recent updates like Firefox 41 suggest that the situation will change, so now is a great time to brush up on your favicons skills! Find out all about it here, at The New Code.

Project Cards

It’s never a bad idea to have few handy templates in your designer’s toolkit. We particularly like this project cards template, courtesy of Codyhouse.

jQuery Tips

These days, it’s a good idea to make sure your knowledge of jQuery is second to none. Here’s a handy list of jQuery tips that every good designer should know. Time to get reading, folks!

Back to the Future

Regardless of whether you celebrated the Back to the Future 30th anniversary day, you should definitely check out this epic 3D poster.

BTTF

WEB DESIGN MIX

The Worst Interaction Design Mistakes

Interaction design can make your site a stellar success. However, it can also render it completely irritating, frustrating, and downright unusable for the browser—and that’s definitely not the effect you want to go for! Here’s some of the worst interaction design mistakes out there, and some tips on how to avoid them.

Annual Reports Inspiration

Annual reports—they’re a bit of a yawn, right? Well, not if you’ve got the right web designer on the job! This list, on OneExtraPixel.com, details the finest annual report website designs out there. Check them out right here.

The New Rules for Scrolling in Web Design

Once upon a time, scrolling was frowned upon in web design. However, these days it’s enjoying something of a resurgence. Before you start including scrolling in all your web designs, make sure you read this article on Designmodo first. It does a great job of outlining just when—and when not—to use it.

Object-Oriented UX

Designing a responsive experience on a site can be a real challenge. Find out how Sophia Voychehovski managed it when she worked with CNN.com—it’s an inspiring story!

ux

FREEBIES

Menu Fields Plugin

Menu Fields is something we’ve been working on, and it’s designed to help you add extra fields to your menu items. It’s free, intuitive, and supports all the necessary field types. Sounds good, right? You can get it here!

Universal Responsive Email Template

Who doesn’t need a high-quality, multipurpose, and easy-to-customize email template in their lives, eh? Grab this responsive, cross-browser compatible newsletter template and delight your subscribers!

Breathe Font

Who doesn’t love to use beautiful fonts on their website? This stunning ‘Breathe’ font is ideal for creative, playful sites, and best of all, it’s completely free to download. Many thanks to PixelBuddha for this great offering!

breathe

Hopefully, you’ve found this month’s round-up informative, helpful, and inspirational! If you think we’ve missed anything important, just let us know in the comments below. To keep up with all our latest news, simply subscribe to our newsletter and follow us on Facebook and Twitter.

Cheers!

Six Reasons Coders Celebrate the Death of Older IE Versions

It’s official. Support for the older versions of Internet Explorer ends January 12th, 2016. From this date on, only the most up-to-date versions of IE will receive tech support and security updates.

Should we be mourning this event and dabbing our eyes whilst thinking fondly of old Internet Explorer versions? Hell, no! In fact, is anyone still using it? Not if these statistics are anything to go by.

Here’s why we see the announcement as welcome news.

Reasons Why It’s Good to See the Back of Old IE Versions

Less hacking, crashing, and security breaches

ie-crashed

Sure, for a while IE was the search engine of choice. But let’s face it – we all knew it was the least safe browser in existence. In fact, its poor reputation is so widely known, that the US government even had to issue official warnings in the past, highlighting its vulnerability to attack.

Bugs and glitches galore

ie-keep-calm

True, Internet Explorer fixes bugs on a fixed schedule. However, as Michael Horowitz from Computer World so succinctly points out, “Bugs are not discovered on a schedule, which means IE users remain vulnerable to known bugs until the next scheduled bug fix.” We don’t know about you, but we don’t relish the prospect of being at the mercy of bugs until IE chooses to resolve the problem.

And while we’re on the topic, IE is the only browser we know of that has a habit of inserting nonsensical text characters in the middle of JavaScript strings. Why, IE? Why?

Time to keep up with other browsers?

None of the other browsers support earlier versions. Nah, they prefer to keep it simple – self-updating and ensuring that we can only support the latest versions. However, with IE, half the stuff that works in the latest version is bust in the earlier versions. Likewise, a tiny percentage of the stuff that did work in old IE versions is now completely messed up in the later IE updates.

In fact, each and every version comes complete with its own unique bugs and irksome limitations. In a desperate bid to deal with the problems, developers are forced to write erratic, lengthy code, and come up with time-consuming, creative workarounds, just to get IE to behave itself. This is a hassle we can do without.

Weak features

ie-desktop

We’re not a fan of IE’s “Developer Tools” interface. But even for simple, everyday tasks, good old IE lacks many features. You can forget about syncing your bookmarks, passwords, preferences, and other data to other computers or a worthwhile extension library. You can give up hope of life being easy. Instead, IE opens every new browser tab in a new taskbar window – and tries to force you to use other inferior Microsoft offerings, such as the dreaded Bing. Our word on the matter? Thanks… but no thanks, Bing. We’ll go with Google every time.

Delayed updates

what-are-we

When it comes to system updates, IE is often well behind the pack. It took five long years for Microsoft to finally release IE7. The result? The added tabs made the browser slightly more tolerable. That’s it. And let’s face it, this benefit was counteracted by the annoyance of having to make the pages render correctly in two lousy browsers instead of just one.

As if this wasn’t bad enough, Microsoft then made us wait another two and a half years for IE8. We quite liked this version. It offered better CSS support, plus some excellent new features like private browsing and tab isolation. However, this worthwhile update simply came too late. By this point, most designers had hot-footed it to Firefox, with a firm eye on moving to Google Chrome. Internet Explorer? Remind us, what was that again?

Restricted coding

Internet Explorer doesn’t really do compatibility – a fact which has been driving developers mad for years. This is mainly because the browser is so lacking in features, not to mention irritatingly delayed in updating the few features that it does have. By failing to keep up with the times, IE has simply managed to transform itself into a difficult-to-use, self-contained monster.

Think we’re being harsh here? Well, here’s some evidence. IE8 didn’t support CSS3 or SVG. IE9 didn’t support CSS3 gradients, text shadows, or flexbox. And even IE10, a fairly recent update, still failed to support flexbox and text shadows.

Internet Explorer – What Do You Think?

What are your thoughts about saying goodbye to old versions of IE? Are you a fan of the browser, or do you prefer working with Firefox or Chrome?

Image Optimization Guide

The Internet is all about speed. People will wait 3 seconds for a website to load on their desktop. On a mobile device, it’s 5 seconds. Fast-loading web pages keep users engaged, on the page, and converts casual browsers into buyers. Plus, Google’s ranking algorithm considers page load time and time on page; so site speed is crucial.

Here’s a short guide to help you build better websites with nicely optimized, crisp, and fast-loading images.

1. Use Images Wisely

Websites get littered with background images, buttons, and borders. If it’s not product-related, it’s decorative. Eliminate unnecessary images. Decorative images pack a punch of aesthetic appeal, but KO load time.

Once you identify mission-critical images, consider using more effective technologies:

  • Use PNG-8 or GIFs for borders or simple pattern images. Get awesome images for just a few hundred bytes.
  • Use CSS effects like gradients and shadows, and CSS animations to produce resolution-independent assets that look sharp and utilize a fraction of the bytes.

2. Use the Right File Type

Use the right file type for your image. There are two options to choose from:

Vector Graphics. These files use lines, points, and polygons to represent an image. Use them for geographic shapes like logos, icons, and backgrounds. The images are generated by programming so the files are small. Vector graphics are:

  • Easily scaled up and down without distortion or loss of detail.
  • Easily editable

Don’t use SVG files for complicated images such as photos. For a more photorealistic effect, use raster images.

Raster Images. Raster images excel with rich visual assets. Formats such as GIF, PNG, JPEG, or JPEG-XR and WebP are best for photorealistic images. Keep in mind that raster images are not resolution or zoom independent. When you scale up a raster file, the image might get jagged and blurred. Save multiple versions at various resolutions for the best look.
3. Adapt the Image Size to Fit Your Content

3
Image file size = Number of Pixels x Number of bytes to encode each pixel

So, reduce file sizes by minimizing the pixels and the number of coding bytes used for each pixel. Sounds simple, right? Most pages send larger assets than necessary and rely on the browser to scale them. This consumes extra CPU resources and results in a lower resolution display. Keep pixels to a minimum, and deliver assets close to their display size.

4. Get Ready for Retina

High DPI screens produce exquisite creative assets and make your product look even more appealing. However, they also require high-resolution images. Here’s how to handle this:

  • Use vector images whenever possible. They always look sharp and don’t depend on resolution;
  • Use raster images if necessary, but remember that they encode image data on a per-pixel basis. More pixels equal a larger file size. The solution is to deliver and optimize multiple variants of the image with the help of srcset and picture. Output two versions of your images: one at the base pixel size requirement and one at a 2x version for retina. So a 350px x 350px JPEG would also be output at 700px x 700px.


5. Use Progressive Loading

If you have an image gallery or many images on a page, use progressive lazy loading. It defers loading an object until it is needed. A lot of websites (like Ember, Medium, etc.) are using this technique. There are many plugins to choose from (e.g. Lazyload 2.0, Lazy Load plugin for jQuery), so you can easily improve the UX of your web page with a lazy loading effect you need.

6. Balance Visual Impact and File Size

61

If you build a website from a Photoshop design, finding the best format and compression to apply on images is critical. You must balance weight and quality. Photoshop applies a global compression to images so find the sweet spot between quality and size.

7. Compress Images

Image compression is vital to optimization. Compression removes image information that the human eye can’t see. It decreases image sizes dramatically.

There are two types of image compression:

  • Lossless compression allows for recovery of all original data when file is uncompressed.
  • Lossy compression means that some data is lost during compression.

Lossy compression is far more effective for web use. Compare the images below before and after Lossy compression. The quality is similar and the file shrinks from 254KB to 39KB. Lossless compression results in a 180KB file. In most cases, Lossy is better.

8. Use Image Optimization Tools

8

Use one of the many image file optimization tools available. Here are just a few:

  • ImageRecycle offers a large range of CMS integrations (WordPress, Joomla, Shopify, Magento) with Lossy and Lossless compression, resizing, and PDF compression.
  • Kraken was the first tool on the market to compress and resize images. It is also available as a WordPress plugin.
  • TinyPNG is a WordPress and Magento plugin.
  • Grunt is a fantastic task runner. Use it to optimize images on the fly.
  • Gulp-smushit is a free plugin to optimize PNG and JPG using reSmush.it.

Conclusion

Image optimization is critical to website speed and website speed is critical to website success. Be sure to include image optimization in your website creation workflow.