Getting Into Responsive Web Design

shutterstock_295217774

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.”

Image Credit: scyther5/Shutterstock.com

Comments

2 Responses to “Getting Into Responsive Web Design”

January 20, 2016 at 12:18 pm, RobS said:

There was a bug focus on UX concepts in the 80s rolling into the 90s when Windows ruled. Many designs were nabbed from Apple designs. However when phones came along Apple must have lost its designers because the UX is non intuitive but by then everyone trusted Apple to do wonderful things so everyone copied a weak design for the phones that still exists today. I can’t wait for UX designers to make phones work for me instead of against me.
Case in point: on iPhone in mail if you accidentally click a link while trying to scroll a page it takes three clicks to get back to where you were.
And who’s idea was it to make a set of tools on s virtual screen that requires a non virtual home butto to exit an app? Bad design and I keep finding more. Since android seems to have copied these bad designs there’s not much hope for now

Reply

March 28, 2017 at 2:29 pm, William Melton said:

Skilled designers have to work to design a logo and this takes work. To design a logo, you need to invest time and effort. It is not equivalent to just playing on the computer for a few hours. https://www.google.com/

Reply

Post a Comment

Your email address will not be published.