Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
Put Your Content on Mobile Devices Using Responsive HTML5
InterChange April 1, 2016
22Sonos
A few hats I wear…
• Technical writer
• Information architect
• Information designer
• Consultant
• Employee
• Tra...
3
Why do we have to go mobile?
44Sonos
You don’t really need me to answer that, but…
55Sonos
Here’s why…
66Sonos
Generation C
77Sonos
Who are they and how do they connect with the world?
88Sonos
• 59% update their status on social media in class/at work
• Watch video on electronic devices, not traditional TV...
99Sonos
And it’s not just Generation C…
1010Sonos
If you use technology as part of your daily routine…
It’s YOU!
1111Sonos
Traditional marketing and service won’t reach you either.
1212Sonos
“Gen C isn’t a quirk of when or where you were born;
it’s a way of life.”
Meet Gen C: The YouTube Generation – g...
1313Sonos
This is the era of the “Connected Customer.”
1414Sonos
“The connected customer is the stranger you must get to know as in
comparison to the customers of the past, this...
1515Sonos
Not just connected…
create, consume, communicate, and contribute
1616Sonos
This is why we have to go mobile now (really should
have already).
1717Sonos
Why is understanding Generation C important?
1818Sonos
Because we don’t just need to go mobile…we need to
do it right.
19
Cut to the chase!
2020Sonos
Let’s look at responsive HTML5 output from Framemaker
2121Sonos
Customizing HTML5 output
22Sonos 22
• Color scheme (skin)
• Title
• Exclude Index and/or Glossary
• Mapping content styles
• Cross references
The e...
23Sonos 23
24Sonos 24
25Sonos 25
26Sonos 26
• Custom fonts
• Google Analytics
• Custom button images
• Custom button actions
• Single sourcing for both PDF...
27
• Purchased license to use a font
• Won’t display correctly on devices that don’t have it
• The <head> area of each htm...
28
What does the string look like?
<link rel="stylesheet" href="//fast.fonts.net/cssapi/f0598f02-6b8c-
4ebc-8e0b-da6157323...
29
• Data tracking how often content is accessed
• Decide what content you want to track
• The last line in the <head> are...
30
What does the string look like?
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(...
31
Custom Button Images
32
33
Custom Button Actions
More editing under the hood…
• Settings.sts file
• Topic.slp file
34
Single-sourcing for HTML5 & PDF
35
QUESTIONS?
36
Thank you!
Upcoming SlideShare
Loading in …5
×

Put Your Content on Mobile Devices Using Responsive HTML5 (STC New england INterChange 2016)

247 views

Published on

The reality: Information is available instantly… on our phone, tablet, and computer. Have a question? Look it up using your phone. Expectations have been set. Our users want to be able to access our information with equal ease. How do we meet this need? Delivering information in responsive HTML5 format allows you to make your content available to your users on multiple platforms. Using the responsive HTML5 output functionality built into FrameMaker, you can quickly and easily create output that users can access from a phone, tablet, or computer. Output is easily updateable so you can deliver the latest information without having to wait until the next software release. Responsive HTML5 is frameless, facilitating search engine optimization. And, you can customize the output to reflect your corporate identity. In this session, we’ll explore creating responsive HTML5 output, improving search engine optimization, and customizing the output.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Put Your Content on Mobile Devices Using Responsive HTML5 (STC New england INterChange 2016)

  1. 1. 1 Put Your Content on Mobile Devices Using Responsive HTML5 InterChange April 1, 2016
  2. 2. 22Sonos A few hats I wear… • Technical writer • Information architect • Information designer • Consultant • Employee • Trainer • College professor • Mentor
  3. 3. 3 Why do we have to go mobile?
  4. 4. 44Sonos You don’t really need me to answer that, but…
  5. 5. 55Sonos Here’s why…
  6. 6. 66Sonos Generation C
  7. 7. 77Sonos Who are they and how do they connect with the world?
  8. 8. 88Sonos • 59% update their status on social media in class/at work • Watch video on electronic devices, not traditional TVs • Don’t define success as having money • By 2025, will constitute 75% of the work force • Actively shaping corporate culture and expectations • Rely on user generated content when making purchasing decisions…they read reviews on Yelp, Amazon, etc. • Follow trends that their friends follow…go to online stores their friends visit, etc. Generation C
  9. 9. 99Sonos And it’s not just Generation C…
  10. 10. 1010Sonos If you use technology as part of your daily routine… It’s YOU!
  11. 11. 1111Sonos Traditional marketing and service won’t reach you either.
  12. 12. 1212Sonos “Gen C isn’t a quirk of when or where you were born; it’s a way of life.” Meet Gen C: The YouTube Generation – google.com/think
  13. 13. 1313Sonos This is the era of the “Connected Customer.”
  14. 14. 1414Sonos “The connected customer is the stranger you must get to know as in comparison to the customers of the past, this group is only growing and it’s traversing demographics.” - Brian Solis
  15. 15. 1515Sonos Not just connected… create, consume, communicate, and contribute
  16. 16. 1616Sonos This is why we have to go mobile now (really should have already).
  17. 17. 1717Sonos Why is understanding Generation C important?
  18. 18. 1818Sonos Because we don’t just need to go mobile…we need to do it right.
  19. 19. 19 Cut to the chase!
  20. 20. 2020Sonos Let’s look at responsive HTML5 output from Framemaker
  21. 21. 2121Sonos Customizing HTML5 output
  22. 22. 22Sonos 22 • Color scheme (skin) • Title • Exclude Index and/or Glossary • Mapping content styles • Cross references The easy stuff
  23. 23. 23Sonos 23
  24. 24. 24Sonos 24
  25. 25. 25Sonos 25
  26. 26. 26Sonos 26 • Custom fonts • Google Analytics • Custom button images • Custom button actions • Single sourcing for both PDF and HTML5 output The not-so-easy stuff
  27. 27. 27 • Purchased license to use a font • Won’t display correctly on devices that don’t have it • The <head> area of each htm file has to include the string for serving the custom font • How to put the string in every topic Custom fonts
  28. 28. 28 What does the string look like? <link rel="stylesheet" href="//fast.fonts.net/cssapi/f0598f02-6b8c- 4ebc-8e0b-da61573232cf.css"> This is ours. Yours will be unique to your content.
  29. 29. 29 • Data tracking how often content is accessed • Decide what content you want to track • The last line in the <head> area of each htm file has to include the GA string • How to put the string in every topic Google Analytics
  30. 30. 30 What does the string look like? <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-4124725-1', 'auto'); ga('send', 'pageview'); </script>
  31. 31. 31 Custom Button Images
  32. 32. 32
  33. 33. 33 Custom Button Actions More editing under the hood… • Settings.sts file • Topic.slp file
  34. 34. 34 Single-sourcing for HTML5 & PDF
  35. 35. 35 QUESTIONS?
  36. 36. 36 Thank you!

×