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 [email protected]@stackelberg
Thank you!
Myplanet Digitalmyplanetdigital.com@myplanetdigital
Credits & ThanksSteph BrownKatie McCoyJenna Kellner
Top Related