Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)
•Télécharger en tant que PPTX, PDF•
0 j'aime•587 vues
Slides from Erik von Stackelberg, Creative Director at Myplanet Digital. Presented at the 2012 Drupal Business Summits in Toronto, Chicago & NYC.
Recommandé
Recommandé
Contenu connexe
Similaire à Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)
Similaire à Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital) (20)
Plus de Myplanet Digital
Plus de Myplanet Digital (19)
Dernier
Dernier (20)
Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)
- 5. – User research, analysis, interaction design, user interface design, content strategy. – Open platforms like Drupal. Open source, interoperable. – Holistic approach to UX.
- 6. 8/21/2012 An Introduction for the Enterprise 6
- 7. – Is not yet responsive. We’re “priming.” – Is an interactive designer and user experience person by trade, not a hardcore developer. – Should be tasty and design-oriented for the enterprise (a codeless journey) at the intersection of UX and the device ecosystem.
- 8. —— and then ——
- 13. Know your users.
- 14. across
- 15. – High performing, custom UX, device- specific. – Tailored, admin overhead, device-class specific.
- 29. – Cost-effective scaling – Multiple classes/use cases – UX enhancements (e.g. navigation) – Minimal admin overhead (one src) —— but ——
- 32. – Unified experience across devices; speaks to your identity. – Embracing and rethinking alternative methods of content display, content strategy, and interaction. (There is no fold!)
- 33. – (Opening your design up for a responsive retrofit is also a great time to seek WCAG Level A compliancy.) – Improves flexibility of the system beyond responsive needs.
- 36. – Various input models for various classes of devices.
- 37. — © Luke Wroblewski
- 38. – Stakeholder harmony? Actual use cases. – Responsive design begets designing responsively.
- 40. x
- 52. Know your users.
- 53. – If the goal includes a particular device, cool! – Choose your approach based on their needs. – Think of business goals in terms of user needs.
- 54. 8/21/2012 Thank you! 54
Notes de l'éditeur
- 50people. Self-organizing teams. Bottom-up structure. Awesome time and geek grants.Nerf gun battles, ping pong, mini-golf, etc.Staff-defined roles.
- Creative dir at MPD, Runs approximately 50 minutes.
- Myplanetdigital.com priming. Explain priming in a bit.I spend most of my time engrossed in figuring out Lean UX and Agile processes, examining user flows and producing user interface visuals. Systems/cross-media user experience perspective.Purpose of today’s talk: not a technical talk. There are about a thousand blog articles, books, etc. Instead, consideration of the design factors involved and value to the enterprise. A discussion at the intersection of user experience and the ecosystem of networked devices.There will be pop quiz questions throughout the presentation: correct answers will net you some limited edition stickers that you can take back with you to make colleagues jealous (aspiring graffiti artists, please don’t stickerbomb the ING Café, it’s our first time here.)
- Assume that at work I’m working on my desktop. I’m served a desktop-version with functionality that supports entering a postal code through RESS. But what if I’m looking for the nearest kiosk to my current location so that I can stop by on my way home?
- Assume that at home I’d like to enter a postal code to find the kiosk nearest my work for the next day. I may be on my laptop, but what if I’m on my mobile phone with a website that serves me only “nearest to you” functionality?
- Assume that while on the go I’d like to get ‘nearest to me’ functionality. But what if I’m on my tablet? If the website thinks I’m on my couch at home it serves me postal code functionality.
- Going to give away the moral of the story and underlying message (so if you need to leave early to get back to the office you’ll have the most important : be user-centered.Responsive vs. mobile vs. native: which makes most sense for your users? Benefits and drawbacks to each approach to serving networked devices.Responsive design is not a silver bullet solution, BUT what makes it really exciting is the clarity and philosophy it can introduce into digital design as well as the potential scalability.
- Let’s take a look at the ways an enterprise organization can serve content and online tools to its user base.
- Native apps:Popular on iOS/AndroidVisibility and promotion via app storesOptimization and performanceTime-consuming to build, require separate attention.Not always a natural skillset extension for development shops, variable admin control. App for every device.Facebook, Twitter, Epicurious, etc.Unique URLCustomized experienceAll content always availableLimited access to device inputs and data collection methodsAdministrative overhead (modules or separate sites)Serves only a particular device class & use caseFacebook, Gmail, The Whitehouse, etc.
- Mobile is currently a hot topic, but responsive design is about a much broader philosophy that surrounds the ecosystem of networked devices.
- Wildly varying form factors exist, even within device classes.New devices every day: Android, Palm, Windows, Apple, Blackberry, etc. with different resolutions.This is a DX Chogokin GE-46 Phone Braver, a Japanese telephone which transforms into a robot. If there ever were a phone that epitomized the fragmentation of form factors...http://www.collectiondx.com/node/3345
- Mobile is currently a hot topic, but responsive design is about a much broader philosophy that surrounds the ecosystem of networked devices.
- TV, video game, media player, phone, tablet, desktop, refrigerator…The central question is: how can we serve content to so many different devices while maintaining a unified and optimal user experience?
- Mobile use is on the rise.
- Mobile use is on the rise.
- Mobile use is on the rise.
- Mobile use is on the rise.
- A collection of web standards that permits:Onesite, multiple adaptations: Customized experienceServes multiple devices and use cases; cost-effective scaling; can use the same CSS you already useMultiple devices now, multiple devices in the future.No administrative overhead (modules or separate sites)Supported by most major mobile browsersLimited access to device inputs and data collection methodsThe Boston Globe etcBuilding to specific devices (even if multiple) does not produce great value for an organization. New devices may differ slightly. How do we accommodate? Flexible grids, type, images & media provide granular solution: Every adaptation is responsive.Flexible grids, type, images & media provide granular solution: Every adaptation is responsive.Designing “content-out:” Content layout breakpoints determine adaptation points.Why that matters:Hypothetically we should be device class agnostic and content-out. But in reality:1) What if we want to serve a different navigation layout for a mobile touchscreen vs. a small window on a desktop? (Progressively enhancing the experience based on device class).2) Pushing the boundary: What if we want to serve different media to mobile to conserve bandwidth, or different functionality for a class of devices?
- user: myplanet password: testingNo one actually sits down and plays around with viewport size, but it illustrates the granularity.
- I mentioned earlier that responsive design can be read as a design philosophy or even a goal-centered workflow rather than a purely technical approach. We’ve seen what responsive design means technically and we’ve had a taste of the way responsive design requires us to take a user-oriented and informed perspective in digital design. How else might a responsive design mentality benefit an enterprise organization?
- App store restrictions or user expectations about graphical features of their particular device OS are less likely to be a concern in the realm of the web. Thinking responsively means thinking about user needs and brand goals, not arbitrary UI expectations.Blur the boundary between identity and user experience.Exciting catalyst for design: Encourages us as designers to question existing structures, userflows, layouts which can create better, more innovative end products. Goodbye 960. Luke Wrobelewski who wrote Mobile First emphasizes the benefits that our desktop experiences gain from thinking critically about content and composition in a mobile context.
- Accessible thinking: Already thinking in terms of different devices and usage contexts. Natural extension to think of different consumption methods.2015 and 2016:Accessibility Standard for Information and Communications: Accessibility for Ontarians with DisabilityUpon request large (and small) public sector organizations will provide or arrange for the provision of accessible formats and communication supports for persons with disabilities (in a timely manner and at no extra cost) Web Content Accessibility GuidelinesEncourages “system” design thinking. You’re already thinking in terms of adaptation. Improves flexibility of the system: the UI, interaction design, content strategy beyond responsive needs, readies it for future digital application.Consider slices and samples: stems of the overall system.
- Stimulates creative thinking surrounding various input modes which can feedback into decisions about userflow and functionality, more novel solutions. Examples in hardware: Apple changing scrolling direction. Webforms.
- http://www.lukew.com/ff/entry.asp?1370
- How many times has a discussion at a large organization degraded into debate about departmental debate or emphasis on “real estate?”Variable real estate = talk about utility. With such limited space on a mobile device and the variability of resolutions, user needs and utility are the only clear way to discuss goals for a system that will actually be used. Fortunately, fold is not an issue.Surplus of variations = talk about goals, not execution. Because its impossible to frame the problem in terms of a particular layout or device, a responsive approach encourages us to think responsively: user and business goals become the centerpiece for debate.
- Short answer: Yes.Responsive design is built around the front-end.Efficient answer: Yes.Using appropriate base themes for Drupal: omega, Zen, fusion; Twitter bootstrapcan expedite the process, but nothing is a match for a custom solution built on top of these frameworks.
- Build with flexible grids and flexible media in a fixed-width wrapper.
- Linearizing your content purely through media queries does not truly “respond” to the needs of users on multiple devices. How is navigation handled on a different device? How is ad space handled uniquely?Adaptations at particular resolutions are arbitrary and not connected to the way your content actually shifts (not a content-out philosophy.) Won’t see the benefits of granular/flexible resizing for a variety of devices.
- A mobile site may require fewer design adaptations than fully responsive.But greater overhead cost for administration and good luck accommodating new devices with wildly different configurations. No benefits of serving the full device ecosystem.We could hide content and serve different navigation to simulate a mobile site through responsive design. Problem: hiding content is not best practice; also, we’re sending content that isn’t being displayed (bandwidth overhead…maybe server-side solutions..complexity of serving different use case functionality). Greater problem: poor user experience: you have one website. Users are used to finding a particular type of content on that site. If suddenly it isn’t available, user has nowhere to go. Good mobile sites always allow access to the full version of the site. Would require an option for reloading CSS to view a virtual ‘full site.’
- This is a similar conundrum to combining a mobile and responsive site. Here there is a greater problem: All content is visible, but its location and configuration may change wildly from page to page. Terrible user experience.
- Selective responsiveness: A site that remains in a particular static configuration until a key breakpoint, at which time the proportions become flexible and granular. If you know which device classes your users are *actually* using to access your content (for example, all mobile), then this can work.
- Going to give away the moral of the story and underlying message (so if you need to leave early to get back to the office you’ll have the most important : be user-centered.Responsive vs. mobile vs. native: which makes most sense for your users? Benefits and drawbacks to each approach to serving networked devices.Responsive design is not a silver bullet solution, BUT what makes it really exciting is the clarity and philosophy it can introduce into digital design as well as the potential scalability.
- Design for user goals, not devices.If the goal includes a particular device, cool! Don’t pigeon hole users into a particular device simply because of business goals (unless you’re in the business of supporting a particular device).
- If you’re at this summit, you probably already recognize that mobile is critical to the future of computing.Social networking overtaking app games. Appropriate for our theme today.
- In the US, smartphones are overtaking feature phones rapidlyGood news for organizations who want to reach out to a mobile audience; support for more complex interactive systems: solicit donations, stream media, provide online learning…http://www.bgr.com/2012/03/02/pew-smartphones-overtake-feature-phones-among-adults-in-the-u-s/
- Mobile use is on the rise: By 2014 the number of mobile internet users is expected to surpass desktop users.Of course this doesn’t tell us the whole picture: are these smart phones? Feature phones? What is “global” access really about in the context of the digital divide?
- In the US, smartphones are overtaking feature phones rapidlyGood news for organizations who want to reach out to a mobile audience; support for more complex interactive systems: solicit donations, stream media, provide online learning…http://www.bgr.com/2012/03/02/pew-smartphones-overtake-feature-phones-among-adults-in-the-u-s/
- The data for American apps and web consumption shows that both browsing and native experiences are comparable, even though values are shifting.