Stc 2015 preparing legacy projects for responsive design - technical issues
Download as PPTX, PDF2 likes444 views
The document discusses the transition to responsive design for legacy projects, highlighting its definition, importance, and the technical issues involved. It outlines key components like relative size units, media queries, and fluid grids, while also addressing challenges with legacy code and new requirements for modern displays. The author emphasizes best practices for cleaning up old code and utilizing new CSS features to optimize content for various devices.
Stc 2015 preparing legacy projects for responsive design - technical 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 – Flare, RoboHelp, Mimic, Viziapps. – Working in CSS since 1999-ish. – Train, consult, and troubleshoot on CSS for Flare and RoboHelp.
- 3. What is responsive design? How does it work? Legacy project issues New issues
- 5. 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…
- 7. And Online Help? Flare…
- 8. RoboHelp…
- 9. 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 Help in ‘97. But: – Converting legacy projects can be messy. – Adds complex new issues to projects. – Downloads may be slower, raising questions about responsive vs. mobile-specific outputs.
- 10. How It Works
- 11. Responsive Design “Drivers” Three CSS-related elements. – Relative size units. – Media queries. – Fluid grids.
- 12. 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 inflexible online. Instead, use: – % – Based on the default size of normal on a given browser – 100%. – Em – The height of the capital M in each browser font set, now a computed font-size property for the style it’s based on – aka it varies.
- 13. Relative Size Units Or, if you’re prepared to go into the code: – Rem – Avoids the em compounding problem by setting the em unit relative to the font size of the root element, html. – What?
- 14. About That Rem Unit » http://snook.ca/archives/html_and_css/font-size-with-rem
- 15. Why Relative Sizes? An image at an absolute width in a too-narrow space. – Note the horizontal scroll bar. And at a relative width in that same space. – No horizontal scroll bar; the 50% width makes a browser show the image at 50% of the available space – “relative”. – In effect, each browser handles that formatting for you.
- 16. HAT Support – Relative Sizes Flare RoboHelp
- 17. 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 gets iffy and use those place as breakpoints.
- 18. 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.
- 19. HAT Support – Media Queries Flare RoboHelp To change the default breakpoints in RH11, must use via a schema file and the CSS. • Not hard but you must be able to work in code. • If you are and want the instructions, email me. • Hope this changes in RH12+.
- 20. 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/
- 21. For Example (1)…
- 22. For Example (2)…
- 23. For Example (3)…
- 24. All controlled by this code.
- 25. HAT Support – Fluid Grids Flare RoboHelp
- 26. Doing this calls for some knowledge of CSS, HTML, and good coding practice. What if you’re not a coder? Modern HATs let you create responsive design w/o coding but with some early release limits and peculiarities, some noted previously. In the meantime, the issues…
- 28. Local Formatting Issues This: <p class=“abc” style=“margin-left: 12px; text- align: left;”> vs. this: <p> Inefficient and overrides the styles in your CSS. – Not a responsive design issue per se, although it does bulk up files and may slow downloading. – But also just bad coding practice. Replace old local formatting code with styles. – May mean cleaning up the CSS. Switch from points to a relative size unit for text sizing.
- 29. Image Issues Images sized in inches or pixels, positioned via hidden tables. – Can’t resize. – Can’t dynamically wrap, forces horizontal scrolling. Change to a relative size unit. Remove images from tables and position using img “float” property instead.
- 30. More Image Issues Images styled locally/individually. – Must change each image’s properties individually. Set desired properties for img tag, or create multiple img sub-classes, and apply them to the images. – Note – Flare does not offer the % option when setting image sizes individually, only through the img style on the CSS.
- 31. More Issues Tables – As with images, fixed table sizes won’t resize and will force a horizontal scroll bar. Use any “auto-size to screen width” option you have. – Note – RH11 can auto-convert images and tables to relative units when outputting responsive design. Using hidden tables for layout control. – Adds a horizontal scroll bar as the window shrinks. More legacy issues, no doubt…
- 32. New Issues
- 33. More Image Issues We now have to worry about showing images on different resolutions up to retina displays. – Retina displays – Apple’s term for devices with a higher pixel density than “standard” devices. – See http://en.wikipedia.org/wiki/Retina_Display How to make the browser use the best of several images for a given resolution? – srcset tells a browser what images are available and lets the browser decide which one to use. – http://html5hub.com/srcset-attribute-solving- responsive-image-dilemma/
- 34. “Movie” Issues Movies created in Captivate, Camtasia, etc. – Must convert SWFs to HTML5 to run under iOS. – Create movies using a tool that supports responsive design or they won’t scale as the screen narrows and you’ll get horizontal scrolling.
- 35. Network Issues Effect on download times? – Courtesy of Adobe.
- 36. CSS Optimization Issues Optimizing your CSS can reduce load times. A quick example: – Use CSS shorthand to combine values for related properties, such as replacing this: – p {margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-bottom: 20px;} – With this: p {margin: 10px 20px 10px 20px;} Google “CSS optimization”
- 37. Summary – Best Practices Clean up all that bad old legacy code. Learn about useful new CSS features like rem, srcset, and optimization. Follow proper coding syntax. Remember that good coding is portable, hacks are not.
- 38. Hyper/Word Services Offers… Training • Consulting • Development Flare • Flare CSS • Flare Single Sourcing RoboHelp • RoboHelp CSS • RoboHelp HTML5 ViziApps Single sourcing • Structured authoring