responsive design: drupal business summit (erik von stackelberg, myplanet digital)

Our Areas of Focus

• Front-end user experience:– User research, analysis, interaction

design, user interface design, content strategy.

• Back-end user experience:– Open platforms like Drupal. Open

source, interoperable.

• Not an agency, not a dev shop.– Holistic approach to UX.

6

04/10/2023

Responsive Web Design:An Introduction for the Enterprise

• Myplanetdigital.com– Is not yet responsive. We’re “priming.”

• Erik von Stackelberg– Is an interactive designer and user

experience person by trade, not a hardcore developer.

• This Discussion– Should be tasty and design-oriented for

the enterprise (a codeless journey) at the intersection of UX and the device ecosystem.

The Fine Print

The Agenda

• Multi-Device Options• Responsive Design

—— and then ——• The Responsive Mentality• Scenarios

Thought experiment: Find the ATM nearest your office.

At Work

At Home

On the Go

The Moral of the Story:

Know your users.

Serving ze content across devices.

Other Mobile Options

• Device Experiences & Native Apps– High performing, custom UX,

device-specific.

• Mobile Sites & Web Apps– Tailored, admin overhead, device-

class specific.

Live Demonstrations

• mobileawesomeness.com/

How do we account for fragmenting form factors?

How do we account for fragmenting device classes? (Networked devices.)

Responsive design inbrief.

Responsive Web Design

• Flexible layout adaptations– Cost-effective scaling– Multiple classes/use cases– UX enhancements (e.g.

navigation)– Minimal admin overhead (one src)

—— but ——• Limited inputs• Imperfect detection

A Live Demonstration

• creative.devcloud.acquia-sites.com/

• mediaqueri.es/• drupalbusinesssummit.com/

Responsive:Design mentality.

A Responsive Design Mentality

• Frees your brand from UI trend.– Unified experience across devices;

speaks to your identity.

• Questions structure.– Embracing and rethinking

alternative methods of content display, content strategy, and interaction. (There is no fold!)

A Responsive Design Mentality

• Encourages accessible thinking.– (Opening your design up for a

responsive retrofit is also a great time to seek WCAG Level A compliancy.)

• Encourages “system” thinking. – Improves flexibility of the system

beyond responsive needs.

A Responsive Design Mentality

• Supports variable input (& more accessible thinking).– Various input models for various

classes of devices.

— © Luke Wroblewski

A Responsive Design Mentality

• Prioritizes utility & content.– Stakeholder harmony? Actual use

cases.

• Focuses discussions on goals.– Responsive design begets

designing responsively.

Scenarios.

We plan to use x open platform CMS (Drupal, perhaps?) Can we go responsive?

Yes sir.

We want to make our soon-to-be-launched site responsive in the future, but don’t have a budget at the moment. What can we do?

Prime the site.

We already have a website. Can we retrofit for responsive with a few lines of code?

You could, but…

We have a budget for a mobile site. Will responsive design cost more or less? Can we combine the two?

It varies.

We have a limited budget and only a few popular pages out of hundreds. Can we make only those pages responsive?

Wouldn’t recommend it.(Where was that thing?)

Ok, we’ll make all pages responsive. But we’re only concerned about responding to mobile devices. Thoughts?

If you trust your research, yes.

The Moral of the Story:

Know your users.

• Design for user goals, not devices.– If the goal includes a particular device,

cool!

• Know your users.– Choose your approach based on their

needs.

• Encourage a responsive mentality.– Think of business goals in terms of user

needs.

In summary:

54

04/10/2023

Erik von Stackelbergerik@myplanetdigital.com@stackelberg

Thank you!

Myplanet Digitalmyplanetdigital.com@myplanetdigital

Credits & ThanksSteph BrownKatie McCoyJenna Kellner