Stc 2015 preparing legacy projects for responsive design - design issues
Download as PPTX, PDF1 like419 views
A continuation of the "technical issues" presentation. Reviews the technology of responsive design, then focuses on writing and design issues including how to shorten text, the "mobile first" design philosophy, and more. Also presents a way to automatically switch between "click" and "tap" in instructions.
Ad
More Related Content
What's hot (11)
Viewers also liked (7)
Ad
Similar to Stc 2015 preparing legacy projects for responsive design - design issues (20)
Ad
More from Neil Perlin (11)
Recently uploaded (20)
Stc 2015 preparing legacy projects for responsive design - design issues
- 2. Who Am I? Neil Perlin - Hyper/Word Services. – Internationally recognized content consultant. – Help clients create effective, efficient, flexible content in anything from hard-copy to mobile. – Certified – RoboHelp, Flare, Mimic, Viziapps. – Working in CSS since 1999-ish. – Train, consult, and troubleshoot on CSS for Flare and RoboHelp.
- 4. What Is Responsive Design? Creating one web site/help output that can detect a display device’s properties and automatically reformat itself accordingly. – Vs creating one site/output for each device. Developed by Ethan Marcotte in 2010. – See http://alistapart.com/article/responsive- web-design/ For example, online help with…
- 5. Flare…
- 6. RoboHelp…
- 7. Why It’s Important Lets us create content to run on any device (within reason) readers may have. – IMO, the biggest change in tech comm since HTML. But: – Redesigning and rewriting legacy projects can be messy. – Adds new design and wording issues.
- 9. Relative Size Units We’re used to point-based sizes – 72pt = 1” – from our print experience – familiar and simple. But points are fixed, OK for print but can’t be resized by a browser user or a browser. Instead, use: – % – Uses the default normal on a browser – 100%. – Em – The height of the capital M in each browser’s font set. – Rem – See http://snook.ca/archives/html_and_css/font-size- with-rem
- 10. Media Queries Formulas that test for certain parameters and run different CSS settings at designated change points – “breakpoints” – based on the result. – Testable parameters include device screen size, resolution, orientation, color vs. monochrome, etc. – Don’t define device-specific breakpoints – too many to keep track of. – Instead, find “places” where the design suddenly doesn’t work and use those place as breakpoints.
- 11. Media Query Examples @media screen and (min-width: 320px) { } – Tests whether the device is a screen (a testable property) and whether its width is 320x or more. @media screen and (min-width: 800px) { } – Tests to see if the screen’s width exceeds 800px. – At each breakpoint, here based on width, different CSS settings take effect that reformat the screen or show or hide different elements.
- 12. Fluid Grids Basically involves creating layouts that can go from this to this Based on the CSS “float” property rather than hidden tables. Good intro at: http://www.1stwebdesigner.com/tutorials/fluid- grids-in-responsive-design/
- 14. Too Much Content We create lots of content because we always have. And we’ve always had large screens to show it. We can write separate content for each device. But that undercuts the rationales for single sourcing and responsive design. What do we do when one set of content has to work on devices with different screen sizes?
- 15. Edit Like Crazy? Yes, but it’s hard to cut existing content beyond a certain mental point. May be easier to throw out the existing content and redo it from scratch from a new perspective. For example…
- 16. How much can you cut this text in 2 minutes? “One if by land and two if by sea,” “And I on the opposite shore will be.” “Ready to ride and spread the alarm” “Through every Middlesex village and farm.” – “Midnight Ride of Paul Revere”, Henry Wadsworth Longfellow
- 17. I Got This… If 1, land. If 2, sea. Ride. Spread alarm.
- 18. Now Try This… Cut this site down to tablet size, then phone size.
- 19. Gatwick Got This… For the tablet.
- 20. And This… For the smartphone.
- 21. Consider “Mobile First” “More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete. Here's three reasons why Web applications should be designed for mobile first instead.” – 1. Mobile is exploding – 2. Mobile forces you to focus – 3. Mobile extends your capabilities » Mobile First, Luke Wroblewski » http://www.lukew.com/ff/entry.asp?933
- 22. Thoughts on “Mobile First” …exploding – Is your company going mobile? – Do you want to risk being left behind? …focus – Limited screen space makes us define what’s really important. – Less important material can be displayed as the screen expands, or left out entirely, shortening all the doc. …capabilities – We can build device location or orientation-based content, with built-in camera, RSS feeds, transaction processing, and more.
- 23. Information Presentation Information now presented in static tables may have to be re-thought and presented via search.
- 24. Navigation Presentation Site navigation may have to be re-thought to fit the tight quarters. – Flare 11’s topnav layout is a change from the standard tri-pane but won’t work for all projects. Alternatives are to stick with the tri-pane or revise the project to fit topnav.
- 26. Writing Keep it short and to the point; this time fer sure. – Not new but vital if users may see the same content in different sized “viewports” on different occasions. – Write tight(ly). – Minimize words. – Use short words – “buy” rather than “purchase”. – Use short phrases – ‘“buy”, not “purchase”’. – Action text only, no concepts – depending on the case. – If the output may be rotatable, check the effect on your design.
- 27. Image Issues Images can resize but may become unreadable. – Can set img’s display to none at a breakpoint in order to hide the image, but: » Setting img display to none hides all the images. » To hide selected images, create a sub-class of img and apply it to those images. » May have to work in unfamiliar areas of the CSS. – But hiding an image affects text that refers to it – e.g. “…as shown in the image below” no longer works. – Or consider cropping images, like the Gatwick site.
- 28. Still More Image Issues Image map hot spots don’t move as the image scales – preview. And output, here in HTML5.
- 29. “Movie” Issues Movies created in Captivate, Camtasia, etc. – If your movies scale and contain text caption boxes, make sure the caption boxes scale. – If the caption boxes scale, does the text become too small to read? – If so, do you have to replace the text captions with voice-over narration? – And control what type gets used – text or voice-over? – Also increases the movie creation workload since you have to create two versions of each movie – voice- over and text captions.
- 30. Wording Customization Issues Wording can vary by output format – “click” for desktop vs. “tap” for mobile. How to deal with this in responsive design? Use an intermediate word like “select” but that’s often unsatisfactory. Or automate the customization between formats. Which I’m pleased to say is now possible. Demo…
- 31. Summary Lots of new design, writing, and technical challenges. It sounds daunting, but so did the move by tech comm to online help and the web in the ‘90s. We met those challenges – time to do so again.
- 32. Hyper/Word Services Offers… Training • Consulting • Development Flare • Flare CSS • Flare Single Sourcing RoboHelp • RoboHelp CSS • RoboHelp HTML5 ViziApps Single sourcing • Structured authoring