stc 2015 preparing legacy projects for responsive design - technical issues
TRANSCRIPT
![Page 1: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/1.jpg)
Taking Legacy Projects Responsive:
Technical Issues
![Page 2: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/2.jpg)
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.
![Page 3: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/3.jpg)
What is responsive design? How does it work? Legacy project issues New issues
![Page 4: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/4.jpg)
What is Responsive Design?
![Page 5: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/5.jpg)
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…
![Page 6: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/6.jpg)
Pittsburgh Children’s Museum
![Page 7: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/7.jpg)
And Online Help? Flare…
![Page 8: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/8.jpg)
RoboHelp…
![Page 9: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/9.jpg)
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.
![Page 10: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/10.jpg)
How It Works
![Page 11: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/11.jpg)
Responsive Design “Drivers” Three CSS-related elements.
– Relative size units.– Media queries.– Fluid grids.
![Page 12: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/12.jpg)
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.
![Page 13: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/13.jpg)
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?
![Page 14: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/14.jpg)
About That Rem Unit
» http://snook.ca/archives/html_and_css/font-size-with-rem
![Page 15: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/15.jpg)
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.
![Page 16: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/16.jpg)
HAT Support – Relative Sizes Flare RoboHelp
![Page 17: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/17.jpg)
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.
![Page 18: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/18.jpg)
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.
![Page 19: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/19.jpg)
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+.
![Page 20: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/20.jpg)
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/
![Page 21: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/21.jpg)
For Example (1)…
![Page 22: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/22.jpg)
For Example (2)…
![Page 23: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/23.jpg)
For Example (3)…
![Page 24: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/24.jpg)
All controlled by this code.
![Page 25: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/25.jpg)
HAT Support – Fluid Grids Flare RoboHelp
![Page 26: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/26.jpg)
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…
![Page 27: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/27.jpg)
Legacy Project Issues
![Page 28: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/28.jpg)
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.
![Page 29: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/29.jpg)
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.
![Page 30: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/30.jpg)
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.
![Page 31: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/31.jpg)
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…
![Page 32: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/32.jpg)
New Issues
![Page 33: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/33.jpg)
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/
![Page 34: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/34.jpg)
“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.
![Page 35: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/35.jpg)
Network Issues Effect on
download times?
– Courtesy of Adobe.
![Page 36: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/36.jpg)
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”
![Page 37: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/37.jpg)
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.
![Page 38: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/38.jpg)
Hyper/Word Services Offers…
Training • Consulting • DevelopmentFlare • Flare CSS • Flare Single SourcingRoboHelp • RoboHelp CSS • RoboHelp
HTML5ViziAppsSingle sourcing • Structured authoring
![Page 39: Stc 2015 preparing legacy projects for responsive design - technical issues](https://reader034.vdocument.in/reader034/viewer/2022042716/55c52044bb61ebb17d8b4818/html5/thumbnails/39.jpg)
Thank you... Questions?
www.hyperword.comTwitter: NeilEric