06 Nov 10 essential responsive Web design tools
These days, every new site I visit is responsive. 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. This article helps you to know 10 essential responsive Web design tools
Content priority guide: 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.
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.
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.
Sketch: 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.
SASS: 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. 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.
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.
NetWork Simulator: 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.
Screen Emulator: 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!
Divshot: Earlier this year, we at Sparkbox ran a “How to Create a Website” workshop for a group of 35 Girl Scouts. In about five hours, each team had published their own fan site to the internet – something I had serious doubts we’d be able to accomplish. One of our secret weapons was an amazing service called Divshot.
The hosting and deployment features Divshot provides are reliable and simple. We have migrated many of our development and QA environments to Divshot and it’s been a pure joy to work with. In this industry, we need ways to invite our clients into our workflow. Being able to easily and dependably publish our work to a staging environment encourages this kind of collaboration.
BrowserSync: 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.
Skitch: 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.
RICG: My final tool is not actually a tool at all. The folks that participate in this group are largely responsible for the new<picture> element, along with the new srcset, and sizessyntax. What has me really excited, is that the next project they intend to tackle is a solution for element queries. 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!