These days, every new site I visit features responsive web design. It feels like this flexible approach to building for a multi-device web has become the norm rather than the exception. To this end, if you consider it your job to build a more future-friendly web, then all of these tools will help you accomplish that goal. Some of them are more specific to the kinds of challenges we face in responsive work. Some are less directly related, but still quite relevant.
Finally, these tools are not ordered by priority. Instead, I’ve tried to select tools that span all the tasks we face, from design to development. So comparing them is difficult and, frankly, not very useful. Right, let’s jump in …
When I first started making websites, I was happily oblivious to the importance of content in building for the web. I quickly learned that I was missing a critical part of the process – I was like a sculptor with no clay. If you find yourself struggling to incorporate content strategy techniques into your process, this simple tool is the perfect way to introduce some content-first thinking into your workflow.
The Content Priority Guide was created by Emily Gray as a kind of hybrid tool to use in situations where it’s not possible to get all the content in, but you need to begin some form of UX design.
“As a project manager, I needed a solid place to start UX design. But as a content strategist, I didn’t have all the content, only the ideas behind the content. I developed the guide to fill in those gaps, ” explains Gray. The concept mixes ideas from content modelling with simple wireframing.
In order to use this guide, you need to walk through each unique page in your system, identifying the applicable content types and breaking them down to their smallest parts. Additionally, Gray creates these as a Google Doc and shares them with her clients. This encourages a more collaborative approach when it comes to establishing content types, as well as starting the process of prioritisation. In responsive work, understanding the hierarchy of content and functionality, independent of viewport width, is critical. This tool helps you establish that early on in the process.
Content priority guides help you identify reusable content types, which leads to a solid understanding of how to structure your CMS. And, if you’re using modern frontend development techniques (see tool 2), it also gives you a framework for how to modularise your markup.
02. Pattern Lab
Dave Olsen and Brad Frost have developed a beautiful tool for facilitating pattern-driven design. Pattern Lab is based on the idea that you should break your design down to the smallest parts (‘atoms’) and then use those to construct larger, reusable components (‘molecules’ and ‘organisms’). These three core building blocks can then be used to create templates, and injected with real content to create pages.
At its core, Pattern Lab is a static site generator. In practice, it’s much more. The structure that this way of building provides results in a much more modular system – one that’s easier to integrate with any content management system.
When it comes to design, a lot of folks are talking about Sketch. Where tools like Photoshop and InDesign have their roots in design for other mediums, Sketch was built from the ground up with the web in mind.
Allowing for multiple pages per file and multiple artboards per page makes the task of organising your design significantly simpler. Features such as mirroring allow you to easily view your work on connected iOS devices, taking the element of guesswork out of designing for small screens.
Sketch has tools for both vector and raster editing, but seems to be set up in favour of vectors. Couple this with its simple and powerful exporting features and you’re ready to support the variety of high-pixel-density screens out there now, and (fingers crossed) whatever tomorrow brings.
I remember being sceptical of CSS preprocessing when it first started to show up. I’m a bit old school – I’ve been writing CSS for a long time now – so the idea that my CSS was going to be generated by some ‘preprocessing event’ made the hairs on the back of my neck stand up. It also didn’t help that I was fairly disappointed with the generated CSS from the first few iterations of Less and Sass.
But, like most of you, I’ve since seen the light. Sass has given us things we’ve always dreamed of: variables, nesting and maths to name a few. But it’s also opened up whole new ways to work with features like mixins, media query bubbling and the ability to create partial and aggregate files (find out more about all these at here). I can honestly say that Sass has completely changed the way that I work with style on the web. I create more modular and maintainable code and much of that is possible (or at least, much easier) because of Sass.
What I love about the concept of PostCSS is that we can polyfill any of the coming CSS features based on their not-yet-implemented specifications. This is incredibly exciting and you can do it today using cssnext – another PostCSS plugin.
06. Chrome DevTools
I will never forget the first time I used FireBug to debug my CSS. The ability to modify, in real time, the HTML and CSS on my page completely blew my mind. It also revolutionised how I worked on the web. Since those days, I’ve made the shift to Chrome and the Chrome DevTools.
Just as most modern browsers are constantly being developed, so are the developer tools that ship with them. Recently, Chrome has added a few features which I’ve found very useful in responsive web design. Here, I want to highlight three specific features which I think are worth looking at.
These are most easily accessed by toggling ‘device mode’ in the Chrome DevTools. You get there by inspecting the page and clicking the little ‘phone’ icon in the top-left of the inspector, next to the search icon.
Poor performance has been a huge criticism of responsive web design over the past few years. Some of the reasons for this are outlined in a post by Guy Podjarny. While I find myself more aligned with Tim Kadlec, who suggests the real fault is in the implementation, not the technique, our implementations obviously need some work (see ‘Performance Budgets’ boxout). Part of the conversation needs to be around tooling that helps bring performance into the conversation earlier. Chrome’s network simulator does just this.
With the network simulator, you can – you guessed it – simulate various network speeds. The idea itself isn’t new; we’ve been able to do this for a while now with other tools. However, having this ability right in Chrome DevTools brings it immediately to the forefront of the development process – where it should be.
The screen emulator does more than just change the size of the viewport to match the size of a specific device – it also specifies the user agent string and pixel ratio. There are a handful of very useful presets, and you can also create your own and save them for later use. For more information on how Chrome’s device mode works, check the Chrome developer site.
Media Query Inspector
Much of our work in responsive web design involves the serving of style adjustments to specific subsets of media types and features. You and I call those media queries, and the media query inspector in Chrome’s DevTools makes it very easy to dig into those queries.
You can bring this feature on-screen by clicking the ‘media query’ icon. Assuming the site you’re inspecting has media queries, you’ll see a series of coloured lines across the top of the inspector. Blue represents max-width queries and orange represents min-width queries, while green represents query widths within a range.
Clicking these coloured bars resizes the mock-viewport and shows you the width at which those styles apply. You can also right-click the coloured bars to reveal where the queries they represent live in the source. All quite useful!
One big challenge these days is how we accommodate the growing population of devices on the market. Even if you only focus on the top six or eight devices, testing and debugging can feel like a serious hindrance to your productivity.
Enter BrowserSync; a free, open source tool for testing and debugging sites across all the devices in your testing lab. Not only does it sync the URL of any browser, it also syncs scroll position, clicks, form inputs, toggles and submits, and refreshes or injects CSS as you make changes. It comes with a slick UI (available by default at localhost:3001) and includes the open source project weinre which enables you to remote debug any of the devices connected to your localhost.
BrowserSync has an official Grunt plugin and works seamlessly with Gulp. It’s also got an API for those looking to develop other integrations. When you’re dealing with today’s web, BrowserSync is seriously useful. [For more on BrowserSync, check out our tutorial in the next issue].
Skitch is a native app for Mac, iPad and iPhone (sorry, all you non-Mac users), which makes grabbing and annotating screenshots amazingly simple. It’s built by the folks at Evernote, but you can use it even if you’re not an Evernote user.
I’ve included it here because of how easily it allows you to provide feedback on a prototype. Plus, you can drag straight from Skitch into GitHub issues to attach your annotated screen capture. We use Skitch relentlessly when we’re testing. Providing helpful, detailed feedback has never been easier.
My final tool is not actually a tool at all. The folks that participate in this group are largely responsible for the new
Element queries will enable us to selectively apply styles based on the width of the containing element, not just the width of the viewport or device. Combine this with the ideas of pattern-driven design and new specs like Web Components and the future is looking pretty bright!
Wrapping it up
It’s a great time to be working on the web. The landscape is challenging, but we’re finding good solutions. Our tooling is evolving as fast as the problems we’re trying to solve.
In the end, though, tools alone are not enough. Remember that most of the reasons projects fail are not for technical reasons, but because of the people involved. Now, go make the web!
This article originally appeared in issue 268 of net magazine.