Going Atomic for better #highered responsive websites?

Did you miss my May 2014 column about Atomic Design for University Business?
Today’s post is a slightly longer version of what you missed with some added visuals to grab your attention ;-).

Responsive Design Worflow: A Monster

It’s a fact: responsive websites have become the solution of choice to address the challenge created by a world of multiple connected devices – from the latest smartphones to the newest tablets and the largest screens of desktop computers or TVs.

The responsive web design approach relies on a set of adaptive CSS rules to mold a single HTML code base to work with the constraints and context of different devices. Not surprisingly, more and more web teams in higher education, faced with increasing demands on their resources and time, have welcomed this new way of building websites.

Since the principles of responsive web design were first introduced in 2010 by Ethan Marcotte, early adopters inside and outside of our industry have tried to rely on a traditional web workflow. Following a discovery phase and information architecture work, wireframes are created before Photoshop design comps to show stakeholders how their responsive website is supposed to look like – but not perform – in phone-, tablet- and desktop-browsers.

Same workflow, 3 times the deliverables and 3 times the headaches when the resulting responsive website doesn’t keep, pixel-for-pixel, its static Photoshop promise.

While the responsive web design approach is supposed to make websites easier to maintain, an already complex web design workflow has morphed into a confusing monster for everybody – stakeholders and content creators included – to make it a reality.

In this context, many web teams have look for a better, faster way to develop the multiple iterations of the deliverables required for a responsive project.

There’s Got to Be a Better Way, Right?

Frameworks, like Bootstrap or Foundation, fit that bill according to Stewart Foss, eduStyle founder who has taught responsive web design for higher education at Higher Ed Experts since 2012. “Frameworks have well-tested solutions to many common design problems and, by just including a few lines of code, you can integrate those into your designs or templates.”

It cuts many steps out of the process.

“CSS frameworks have advanced to the point where it seems silly not to use them,” agrees Nick DeNardis, Director of Digital Communications at Wayne State University. However, DeNardis warns that success depends a lot on having staff familiar with such frameworks. Familiarity with popular frameworks has also been key at UC San Diego. It was the main reason to adopt Bootstrap and Foundation in lieu of the framework developed in-house in the early years of responsive web design. “We’re moving towards supporting these frameworks with a UC San Diego branding twist to maximize adoption by developers on campus,” explains Brett Pollak, Director of UCSD Campus Web Office.

Frameworks can help, but they also have their limitations.

“Integrating a framework and making it look native to your site can be a larger challenge than just creating your own solutions,” adds Foss.

Atomic Design: Beyond and Better than Frameworks?

If only you could develop easily your own solutions or use the ones offered by frameworks depending on the design problem you’re trying to solve…

You can if you let go off the page as your focal unit and embrace web design systems instead.

“It’s increasingly important to break down interfaces into their building blocks,” says Brad Frost, the leading voice of the future-friendly web movement. For Frost, it makes sense to break the “herculean” task of creating an institutional website into smaller problems to solve in order to create a system of reusable components and establish a common vocabulary across an entire organization.

“Atomic design is a methodology for creating a robust design system that’s custom-made for your organization,” says Frost. Atomic Design allows designers and developers to break things down into their atomic units and assemble the building blocks into larger components until a complete design system is created.

This isn’t wishful thinking. The methodology has already been used for 2 high-profile responsive redesigned websites: TechCrunch’s and Entertainment Weekly’s.

When you follow the Atomic Design methodology, your web developer doesn’t have to wait for your designer and your information architect to complete wireframes and Photoshop comps.

Right from the beginning, it is easy and quick to code all the building blocks (header, search box or headlines, etc.) for your institution or your unit, using Pattern Lab, an online application developed by Brad Frost and Dave Olsen, Programmer and Project Manager at West Virginia University.

At Wayne State University, DeNardis has followed this open-source project with great interest. “Pattern Lab can help institutions inventory and plan for consistent user interface elements.”

Pattern Lab: A Feedback Game Changer?

As any member of a web team knows, the trickiest part of a web project has to do with feedback from stakeholders.

The bigger the project, the worse it gets, since it usually means the involvement of a campus committee.

Add to this the static nature of the traditional deliverables (wireframes or design comps) and it can become mission impossible to get a responsive website done within a reasonable timeframe.

“The old waterfall model has to change to a more iterative and collaborative process around the place where we’re delivering the final product: the browser,” says Dave Olsen, Programmer and Project Manager at West Virginia University. That’s why Pattern Lab could become the perfect prototyping environment for responsive websites.

Providing a code view, annotations for explaining to clients how features work and a slider to show how elements perform responsively, Pattern Lab has what it takes to dramatically improve communications with stakeholders at every stage of a project.

By “taking the discussion outside of the subjective superficial design feedback often associated with getting management approval for Web reviews,” says Nick DeNardis from Wayne State University, this tool can help stakeholders and web teams focus on the building blocks, combinations and strategy behind crucial user interface decisions.

So, What do YOU think?

Do you use Frameworks, Atomic Design or anything else to help you with the design of responsive websites?

Why not share with your higher ed community by posting a comment – your experience and expertise will be useful to your colleagues searching for solutions when they find this post in a Google search!