10 web design tools for August 2018

[Rss Bot 1]

If you’ve ever worked at a large company, you'll have probably encountered a situation where crucial information about how something works has gone missing – so this month we take a look at Slab, a new tool that provides a home for all your important info so it doesn’t get lost. 

There’s also a resource from Google engineering manager Addy Osmani, which provides great advice on improving mobile performance by doing smarter things with JavaScript, a really fun creative coding tool and much more. 

01. Slab

Keep track of important information about your team's working processes

Slab’s purpose is to solve the problem of information-recording within organisations. In this Medium post the founder describes a scenario in which his company was acquired, and his team was tasked with integrating their product into the existing infrastructure of the parent organisation, but they struggled to find anyone who could tell them how. Eventually they tracked down the engineer who built it, who pointed them to a long-lost Google Doc that everyone had forgotten about. 

Without a proper home for the crucial information about how things work, this happens a lot, especially when staff move on and companies grow rapidly. Slab is designed to organise information about your company's working processes efficiently and keep everyone up-to-date, and it integrates with all your other tools such as Slack and GitHub. 

02. The Cost of JavaScript

JavaScript is the heaviest thing we send to phones - here's how to lighten the load

This must-see resource from Google Chrome engineering manager Addy Osmani has some important data about how much JavaScript slows down your site on mobiles, as well as some techniques for reducing the bloat. He tells us that JavaScript is the most expensive resource we send to phones because it has the most potential to delay interactivity. And he says we should all be seeking to minimise its use by auditing and trimming JavaScript bundles, only loading code needed for the current page, embracing performance budgets, and looking for other ways to get the job done where possible. 

03. Lighthouse

Audit any live site to get an assessment of its performance and accessibility

How well is your site doing in terms of performance, accessibility and best practices? This Google tool will tell you. It runs audits on any URL you feed into it and generates a report that explains why each audit is important, and what you can do to improve any aspects that are failing. As well as performance and accessibility, it can audit for SEO and Progressive Web App best practices. You can run it from Chrome DevTools, from the command line or as a Node module. 

04. Pts

A JavaScript library that will help you get started with creative coding

If you’ve ever been tempted to try your hand at creative coding, this could be a great place to start – Pts is a JavaScript library that makes it easy to code animations, data visualisations and fun web-based toys. With a single line of code you can draw something that follows the mouse pointer around the canvas, and from there you rapidly progress to creating more complex interactions. There are plenty of guides and documentation to teach you how to use it, so you won’t be flying solo. Check out the demos at the bottom of the homepage to see what’s possible. 

05. My Browser

Get detailed information about users' browsers for debugging purposes

Getting browser information from users for bug-fixing purposes can be slow and frustrating, so front-end developer and designer Andy Bell built this great tool to make it easy to get all the pertinent data. Instead of dealing with vague bug reports, you can send the user the URL of this tool, and a report on their system is automatically generated when they visit the site. They can then share the report URL with you so you can see their exact browser version, viewport size, operating system and other useful info. The creator has made sure that data is properly anonymised so users don’t have to worry about their privacy. You can read more about it here.

06. Dyslexie font

A font that's easier for dyslexic people to read

The designers of this font disregarded the principles of type design, and instead used the characteristics of dyslexia to create a font that is easier for dyslexic people to read. It's designed to minimise the effects of common reading errors – for example, letters are heavier at the bottom  to help prevent them from being perceived as being upside-down; the openings of letters are enlarged so that they are more easily recognised; and capital letters and punctuation marks are bold to emphasise breaks and endings of phrases. It's received great feedback from users, so it’s a good option if you want to make your site more accessible.

07. Notist

An online repository for your public speaking profile

The team behind Perch CMS have created Notist, a place to create a public speaking portfolio so you can display slides, links, feedback, tweets, photos and everything connected to your talks. You can add a future schedule so that people can see where your next talk is, and have a resources section for conference organisers so they can download your headshots and other materials without needing to contact you. It’s free for casual use, and there’s a Pro account for regular speakers. It’s also a great place to browse and discover interesting talks. 

08. StyleURL

Try out CSS changes on any live site

StyleURL generates a URL that you can use to preview CSS changes on a live site – it automatically loads your CSS changes into the existing site, so you can see what your changes look like and also share them with others. StyleURLs are saved in a Gist in GitHub so that you and others can easily update them later. 

09. Flexible Typesetting by Tim Brown

How to do typesetting when you don't know exactly how your text will appear

Tim Brown is head of typography at Adobe and in this book, which Ethan Marcotte describes as “an absolute delight to read”, he explores how we can seek to set online type successfully, while navigating the difficulties that arise when we don't know exactly how our text will appear. Rather than choosing parameters for text, we design our websites to do that for us depending on the conditions in which our work is being consumed – this book guides you through that thorny process.

10. Moceen

Create an image of your site displayed on different devices

This simple app makes it easy to create an image of your app or site being displayed on a device of your choice. There's a selection of several mobile and desktop devices – pick one, and then upload the screenshot of your site to immediately create an image of it on the device that you can share with clients or use on your website. 

Related articles:

• Beware the cutting edge of web design
• 5 techniques to help you find your ‘flow state’
• Agile development: why and how to use it in your web and app workflow

View the full article