Lavacon 2014 responsive design in your hat
-
Upload
neil-perlin -
Category
Software
-
view
338 -
download
2
description
Transcript of Lavacon 2014 responsive design in your hat
![Page 1: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/1.jpg)
![Page 2: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/2.jpg)
Responsive Design In Your HAT
![Page 3: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/3.jpg)
Who Am I? Neil Perlin - Hyper/Word Services.
– Internationally recognized content consultant.– Helps clients create effective, efficient, flexible
content in anything from hard-copy to mobile.– MadCap-certified Flare trainer/consultant since
pre-alpha in 2005.– Using/training/consulting on RoboHelp since
1991, eHelp/Macromedia/Adobe-certified since 1997.
![Page 4: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/4.jpg)
The Issues
What is responsive design? Why is it important? How does it work? How to create it in a HAT if you’re not a coder.
– Using two major HATs, Flare and RoboHelp
![Page 5: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/5.jpg)
Responsive Design Overview
![Page 6: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/6.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 7: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/7.jpg)
Gatwick Airport Site
![Page 8: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/8.jpg)
And Online Help? Flare…
![Page 9: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/9.jpg)
RoboHelp…
![Page 10: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/10.jpg)
Why It’s Important In general – Makes it easier for web pages to
address the growing universe of display devices. In tech comm – Lets us create content to run on
any display device (within reason) readers may have.– IMO, the biggest thing to hit the output side of
tech comm since HTML in 1997.
![Page 11: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/11.jpg)
Why It’s Important Why not just
develop a separate site/output for each device out there?
» 99designs.com
![Page 12: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/12.jpg)
Why It’s Important And if you’re not dizzy yet…
» quartsoft.com
![Page 13: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/13.jpg)
How It Works – Uses… Relative formatting for text, images, and tables.
– Use % or ems (or the newer but less supported rem) rather than points.
– Lets the browser dynamically resize elements.
![Page 14: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/14.jpg)
How It Works – Uses… “Fluid grids” to reformat blocks of content as
device size (or another property) changes. From this – To this –
Controlled through the CSS “float” style – no more table-based layouts.
![Page 15: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/15.jpg)
How It Works – Uses… “Media queries” – formulas that test whether a
device meets certain property values and reformats the content if it does, such as:– @media screen and (min: width) 320px– Tests whether the device is a screen and is at
least 320px wide – “320px” is a “breakpoint”.
![Page 16: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/16.jpg)
Conceptual Summary So doing this calls for some knowledge of CSS,
HTML, and good coding practice. What if you’re not a coder? HATs let you create responsive design now with
no coding but with some early limitations and oddities.– Should be fixed in future releases.– Should be okay now for typical, simple help
systems.
![Page 17: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/17.jpg)
Responsive Design via HAT
![Page 18: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/18.jpg)
The Tasks Use relative size units via the CSS. Create a fluid grid using “float” styles from the
CSS, depending on your content layout complexity.
Invoke your HAT’s responsive design feature. Specify the breakpoints. Design the layouts for each breakpoint. Generate, view, and test the output.
![Page 19: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/19.jpg)
Flare
![Page 20: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/20.jpg)
Use Relative Size Units All formatting via the Stylesheet Editor using
relative size units.
![Page 21: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/21.jpg)
“Float” Your Graphics In the img tag via the Stylesheet Editor using the
float style in the Box functional group.
![Page 22: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/22.jpg)
Invoke Responsive Design Set the breakpoints
on the Skin Editor’s Setup tab.– Note that there’s
just one tablet breakpoint.
![Page 23: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/23.jpg)
Set the Breakpoints Don’t try to set the
breakpoint values for specific devices.– You’ll go crazy trying to decide which devices
to base the decision on and only have two options anyway.
Instead, test your output to find sizes where the design gets iffy and set your breakpoints there.
![Page 24: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/24.jpg)
Set the Breakpoints To find generic breakpoints, simply resize the
browser window containing the output. Demo…
![Page 25: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/25.jpg)
Define the Mediums (Layouts) Define the properties for each medium on the
Skin Editor Styles tab. Note the three output type mediums on the Skin
Editor toolbar.
– Use the UI Text tab to change the wording of any UI element.
![Page 26: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/26.jpg)
Define the Mediums (Layouts) Click the Highlight option on the Skin Editor
toolbar to highlight the setting for a selected item on the preview or vice versa.
Demo…
![Page 27: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/27.jpg)
Watch Out For… Local formatting in legacy projects. Can only define one tablet breakpoint in v. 10.
– May be important if you need to distinguish between 10” and 7” tablets.
– Hopefully multiple tablet breakpoints in v. 11. Some skin editor settings are hard-coded – e.g.
logo always left-justified for Web but centered for Tablet and Mobile.
![Page 28: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/28.jpg)
Watch Out For… Settings hierarchies – ex. Background priority
hierarchy is Image > Gradient > Color.– Must set image field to None and Gradient to
Transparent for a Color setting to work.
![Page 29: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/29.jpg)
RoboHelp
![Page 30: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/30.jpg)
Use Relative Size Units All formatting
via the Styles pod using relative size units.
RH doesn’t offer % and em options but supports them if you type them.
![Page 31: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/31.jpg)
“Float” Your Graphics In the img tag via the Styles pod.
![Page 32: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/32.jpg)
Set the Breakpoints Can’t change the default breakpoints through
the GUI. Must do so through a schema file and the CSS.
– Not difficult but you should be comfortable working in code.
– If you are and want the instructions, email me.– Hope to see this changed in RH12.
![Page 33: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/33.jpg)
You Can Now Either… Design the layout, then invoke responsive
design and call the layout, or Invoke responsive design, then call the/a layout
(and modify it if necessary).– I’ll show option 1 because I think its workflow
is simpler but the choice is yours.
![Page 34: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/34.jpg)
Design the Layout Add your new layout under Screen Layouts on
the Project Set-Up pod.
Then right-click on your layout and select Edit – opens the Layout Editor.
![Page 35: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/35.jpg)
Design the Layouts Select a layout component. Then modify
it using the preview to identify it on the Properties list.
Demo…
![Page 36: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/36.jpg)
Invoke Responsive Design Select Responsive HTML5 in the SSL folder,
click the Select button to pick a layout.– Or the
Customize… button to open and customize an existing layout in the Layout Editor.
![Page 37: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/37.jpg)
Watch Out For… Local formatting in legacy projects. Need to edit a schema file and a CSS file to
change the breakpoints. Some skin editor settings are hard-coded, such
as placement of navigation options strip. Can’t modify TOC, index, glossary, or general
navigation differently for mobile and tablet – settings are “mobile/tablet”.
![Page 38: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/38.jpg)
What’s MultiScreen HTML5? Responsive design creates one output that
adapts itself automatically based on the device.– With only one set of content, variables, etc.,
since there’s only one output. Multiscreen supports different output settings
and different content, etc. for each device.– More device-granular content and design but
takes more work since you must define the multiple devices individually.
![Page 39: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/39.jpg)
Summary – Best Practices Design your content for “undesktop-first” via
fluid layout grids, relative sizes, etc. Eliminate local formatting, period. Images:
– Insert sequential images using the CSS “float” style – no more table-based insertion.
– Size images dynamically using % or em units.» But are images legible at smaller sizes. Can you
conditionalize them out? Effect on content?
![Page 40: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/40.jpg)
Summary – Best Practices Use “autofit to window” option for tables. Define “device class” or “category” breakpoints
rather than device-specific ones. Consider effects of using
low-res pointers on the interface and interactivity.
![Page 41: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/41.jpg)
Summary Lots of new technical, design, and output
challenges.– Define your terms and platforms.
It sounds daunting, but so did the move by tech comm to online help and the web in the ‘90s and still today.
We met those challenges – time to do so again.
![Page 42: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/42.jpg)
Hyper/Word Services Offers…
Training • Consulting • DevelopmentFlare • Flare CSS • Flare Single SourcingRoboHelp • RoboHelp CSS • RoboHelp
HTML5ViziAppsSingle sourcing • Structured authoring
![Page 43: Lavacon 2014 responsive design in your hat](https://reader034.fdocuments.net/reader034/viewer/2022052619/555cf4bdd8b42a08668b4df5/html5/thumbnails/43.jpg)
Thank you... Questions?
www.hyperword.comTwitter: NeilEric