10 best new web design tools for October 2016


These days many of us are working on sites that involve a complex tangle of dependencies; if that’s you, this month there are a few tools that might help you out - whether that’s in the form of a dependency manager to keep everything organised, or resources that help you avoid them altogether. 

There’s also a tiny Flexbox-based grid system that’s only 93 bytes minified, a website downloader, SVG patterns and a new font family from Google. 

01. You Might Not Need JavaScript

JavaScript isn't the only way

Why create an additional dependency for yourself when you don’t need it? This site shows you how to make things that you might be tempted to build with JavaScript using HTML, CSS or Sass. Examples include an image slider, view switcher, colour picker, forms, file upload and more. 

02. HTML Email

Good HTML email templates

If you’ve ever tried to build HTML emails you’ll know how hard it is to get everything displaying correctly in every client. Bring mobile into the picture, which is where half of your emails will be opened these days, and it’s a horrible job. These email templates have been tested across all major email clients to save you the hassle of doing it yourself. If you’d like to try a free alternative, try the Litmus Community templates. 

03. Yarn

Yarn, an efficient dependency wrangler

Yarn is a fast, reliable and secure dependency manager. It caches packages so they’re only downloaded once; verifies each one before executing any code; and installs dependencies in a deterministic manner, so if in an install works on one system it will work on another. 

04. Open Color

A colour scheme that works for colour blind people

Open Color is a colour scheme that’s been tested for two types of colour blindness and found to be suitable for use in UIs. There are twelve colours and one grey, and it’s provided as CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.

05. FramerJS Club

FramerJS inspiration

Take a look at what everyone’s been doing with FramerJS at FramerJS Club, a showcase of prototypes. Many of them link through to blog posts by the creators explaining what they did and why. 

06. Hugo

Hugo, a static website engine

Hugo is a fast and modern static website engine. But why would you use this instead of Jekyll? One advantage is that there’s just a single binary, so you don’t have to maintain a full Ruby stack. It’s also said to be much faster than Jekyll at generating your site, so that alone may be a reason to switch. Here’s a blog post about one user’s experience.

07. Fukol

Fukol, a tiny grid system

This impressively tiny Flexbox-based grid system is just 93 bytes minified! It degrades to a single column layout in places where Flexbox isn’t supported, and instead of using breakpoints it uses an element query technique so that items grow to fill the available space. You can play around with it on CodePen here. 

08. Website Downloader

Website Downloader, a great way to backup or migrate your site

This browser-based site ripper grabs every asset and all the source code from the target site and recreates the folder structure on your hard drive. All the links are converted so they point at the relevant local files instead of the online versions. 

09. Hero Patterns

SVG patterns

As the popularity of SVG increases we’re starting to see a few more resources emerge. These repeatable, customisable SVG background patterns look handy to us, and they’re completely free. 

10. Google Noto Fonts

No more tofu

When a device doesn’t have the font to display certain characters, they appear as squiggly boxes known as tofu. Noto means "no more tofu", and is a font family designed to support all languages and hopefully bring an end to tofu.