Getting Into Responsive Web Design
The rise of responsive design—which aims to create an optimized Website experience across a broad range of devices, with the least possible amount of scrolling and zooming—has created some interesting professional challenges for developers. Not only has responsive design required those designers to expand their working knowledge of UX, but also the technology that undergirds the Web itself. Responsive design’s reliance on flexible grids for Websites contrasts with adaptive design, which depends largely on predefined screen sizes. Providing a truly seamless experience via those flexible grids, however, usually requires a good deal more coding on designers’ part than with adaptive design. ”The big shift is coming from the technology,” said developer and designer Thom Meredith, founder of a multidisciplinary design firm, when discussing the rapid changes in the art of Web design. “The communication is actually implemented by the technologists, who are saying 'Hey, this is possible.’ The designers then push the envelope on what is possible and then, the technologists push it even further to adhere to what the designers conceived of. New tools are always being introduced and then honed.” For those who want to play around with responsive Web design, there are some tools to learn: HTML, the cornerstone of the front-end, along with JavaScript and CSS. Familiarity with AngularJS and Node are essential for building a Website’s interactive elements, while PHP, Python/Django, and Node.js/Express are necessary on the backend. According to Meredith, Google Chrome is pretty much the industry standard for browsers. “The parameters have become smarter and smarter and [Chrome has] a developer screen that most users don't even know exists, but it allows you to inspect on the page. It shows you all of the HTML code, but not just the code that has been presented to the browser from the text file of an HTML file, but also of the code that's been compiled through JavaScript.” One of Google Chrome’s great strengths is that it can mimic the screen resolutions of nearly every device on the market. You can open different browser windows to represent different screen experiences; when you save a change, all of those windows will reload in one orchestrated swoop. On the backend, developers have been using a variety of different text editors to visualize display differentials. There's Sublime Text and Atom, and Meredith is fond of Panic’s Coda. Some of these applications are open-source, and developers are creating seamless extensions for them. (These apps are also built on top of HTML, which could help with adoption, even for relatively new Web designers.) But it’s not just a matter of knowing the technology; when it comes to responsive design, soft skills are also critical, as a designer often ends up as part of a Web-development team. According to Maggie Hendrie, the chairperson of the Art Center College of Design’s Interaction Design program, professionals who succeed understand the workflow of everyone involved in the build, allowing everyone to collaborate more effectively. As a professional, you’ll also need to stay aware of new developments in Web technology and design, and communicate those changes to all stakeholders. And as always, it’s important for any developer to keep in mind that it’s ultimately the end-user who must benefit from the design. That means communicating effectively with clients. “That user experience strategy and how it ties to the tech stack is something they have to be conversant with,” Hendrie said, “and they have to be able to communicate the user needs to everyone involved.”