04 Mar Web Design Tools for Responsive Website Developers
One of the newest tools in our arsenal that helps us to more easily see the challenges that our website designs have as they change from one device to the other. Google has recently introduced Resizer as an aid for website designers, and it is helping our teams to see issues more quickly and come up with solutions more efficiently.
As designers and developers of digital products, one of our greatest challenges is figuring out how to serve the right UI to our users at the right time. No matter how they’re using an application, be it a phone or through VR, manipulating it with gesture or a mouse, on the latest and greatest tech or a hand-me-down 2G, it is our responsibility to make our products accessible to everyone—and that’s a pretty tall order. There’s no simple design solution to fit every need.
We’ve started to offer Material Design guidance around breakpoints, responsive grids, surface behaviors, and user interface patterns. Now with Resizer, we have a dynamic way to test out that guidance and help spur meaningful conversations between designers, developers, and stakeholders about responsive UI.
In the past, we have always begun our testing processes with the inevitable window resizing in our browsers. While this is a good start, it often leaves a lot to be desired once you get to the behavior of a device. They may or may not expect code in the same order, and they often define areas of the website design in ways that were unexpected. It’s great to have a new tool that reduces time to market for these websites
We use Browserstack as a final testing service and have used it for several years. This product launches virtual machines of many different devices so you can see actual behavior.
The Darkstar responsive website as displayed on an iPhone 6 through BrowserStack
Google’s Resizer gives us a mid step that saves us time so there are many fewer issues with the responsive breakpoints once we get to our final testing environments.
Here is Google’s announcement, be sure to take a look.