![Page 1: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/1.jpg)
![Page 2: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/2.jpg)
![Page 3: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/3.jpg)
![Page 4: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/4.jpg)
![Page 5: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/5.jpg)
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.
![Page 6: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/6.jpg)
6
04/10/2023
Responsive Web Design:An Introduction for the Enterprise
![Page 7: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/7.jpg)
• 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
![Page 8: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/8.jpg)
The Agenda
• Multi-Device Options• Responsive Design
—— and then ——• The Responsive Mentality• Scenarios
![Page 9: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/9.jpg)
Thought experiment: Find the ATM nearest your office.
![Page 10: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/10.jpg)
At Work
![Page 11: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/11.jpg)
At Home
![Page 12: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/12.jpg)
On the Go
![Page 13: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/13.jpg)
The Moral of the Story:
Know your users.
![Page 14: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/14.jpg)
Serving ze content across devices.
![Page 15: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/15.jpg)
Other Mobile Options
• Device Experiences & Native Apps– High performing, custom UX,
device-specific.
• Mobile Sites & Web Apps– Tailored, admin overhead, device-
class specific.
![Page 16: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/16.jpg)
![Page 17: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/17.jpg)
![Page 18: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/18.jpg)
![Page 19: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/19.jpg)
Live Demonstrations
• mobileawesomeness.com/
![Page 20: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/20.jpg)
How do we account for fragmenting form factors?
![Page 21: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/21.jpg)
![Page 22: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/22.jpg)
How do we account for fragmenting device classes? (Networked devices.)
![Page 23: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/23.jpg)
![Page 24: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/24.jpg)
Responsive design inbrief.
![Page 25: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/25.jpg)
![Page 26: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/26.jpg)
![Page 27: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/27.jpg)
![Page 28: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/28.jpg)
![Page 29: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/29.jpg)
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
![Page 30: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/30.jpg)
A Live Demonstration
• creative.devcloud.acquia-sites.com/
• mediaqueri.es/• drupalbusinesssummit.com/
![Page 31: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/31.jpg)
Responsive:Design mentality.
![Page 32: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/32.jpg)
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!)
![Page 33: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/33.jpg)
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.
![Page 34: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/34.jpg)
![Page 35: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/35.jpg)
![Page 36: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/36.jpg)
A Responsive Design Mentality
• Supports variable input (& more accessible thinking).– Various input models for various
classes of devices.
![Page 37: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/37.jpg)
— © Luke Wroblewski
![Page 38: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/38.jpg)
A Responsive Design Mentality
• Prioritizes utility & content.– Stakeholder harmony? Actual use
cases.
• Focuses discussions on goals.– Responsive design begets
designing responsively.
![Page 39: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/39.jpg)
Scenarios.
![Page 40: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/40.jpg)
We plan to use x open platform CMS (Drupal, perhaps?) Can we go responsive?
![Page 41: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/41.jpg)
Yes sir.
![Page 42: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/42.jpg)
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?
![Page 43: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/43.jpg)
Prime the site.
![Page 44: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/44.jpg)
We already have a website. Can we retrofit for responsive with a few lines of code?
![Page 45: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/45.jpg)
You could, but…
![Page 46: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/46.jpg)
We have a budget for a mobile site. Will responsive design cost more or less? Can we combine the two?
![Page 47: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/47.jpg)
It varies.
![Page 48: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/48.jpg)
We have a limited budget and only a few popular pages out of hundreds. Can we make only those pages responsive?
![Page 49: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/49.jpg)
Wouldn’t recommend it.(Where was that thing?)
![Page 50: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/50.jpg)
Ok, we’ll make all pages responsive. But we’re only concerned about responding to mobile devices. Thoughts?
![Page 51: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/51.jpg)
If you trust your research, yes.
![Page 52: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/52.jpg)
The Moral of the Story:
Know your users.
![Page 53: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/53.jpg)
• 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:
![Page 54: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/54.jpg)
54
04/10/2023
Erik von [email protected]@stackelberg
Thank you!
Myplanet Digitalmyplanetdigital.com@myplanetdigital
Credits & ThanksSteph BrownKatie McCoyJenna Kellner
![Page 55: Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)](https://reader033.vdocuments.mx/reader033/viewer/2022061220/5486db21b4af9f5c7a8b4660/html5/thumbnails/55.jpg)