More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (19)
Similar to Put Your Content on Mobile Devices Using Responsive HTML5 (STC New england INterChange 2016)
Similar to Put Your Content on Mobile Devices Using Responsive HTML5 (STC New england INterChange 2016) (20)
Recently uploaded
Recently uploaded (20)
Put Your Content on Mobile Devices Using Responsive HTML5 (STC New england INterChange 2016)
- 1. 1 Put Your Content on Mobile Devices Using Responsive HTML5 InterChange April 1, 2016
- 2. 22Sonos A few hats I wear… • Technical writer • Information architect • Information designer • Consultant • Employee • Trainer • College professor • Mentor
- 3. 3 Why do we have to go mobile?
- 4. 44Sonos You don’t really need me to answer that, but…
- 7. 77Sonos Who are they and how do they connect with the world?
- 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. 99Sonos And it’s not just Generation C…
- 10. 1010Sonos If you use technology as part of your daily routine… It’s YOU!
- 11. 1111Sonos Traditional marketing and service won’t reach you either.
- 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. 1313Sonos This is the era of the “Connected Customer.”
- 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. 1515Sonos Not just connected… create, consume, communicate, and contribute
- 16. 1616Sonos This is why we have to go mobile now (really should have already).
- 17. 1717Sonos Why is understanding Generation C important?
- 18. 1818Sonos Because we don’t just need to go mobile…we need to do it right.
- 19. 19 Cut to the chase!
- 20. 2020Sonos Let’s look at responsive HTML5 output from Framemaker
- 22. 22Sonos 22 • Color scheme (skin) • Title • Exclude Index and/or Glossary • Mapping content styles • Cross references The easy stuff
- 23. 23Sonos 23
- 24. 24Sonos 24
- 25. 25Sonos 25
- 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 • 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 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 • 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 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>
- 32. 32
- 33. 33 Custom Button Actions More editing under the hood… • Settings.sts file • Topic.slp file
- 34. 34 Single-sourcing for HTML5 & PDF
- 35. 35 QUESTIONS?
- 36. 36 Thank you!
Editor's Notes
- FrameMaker product box This is still being done.
- Generation Y (Millennials) Just graduating from college and entering the job market Becoming more important to the economy every day
- This means they don’t respond to traditional marketing…they don’t see an ad on TV or in print and seek it out. Youtube is the top destination for online video content, accounting for nearly half of America’s streaming time. And that’s where they go for music, too.
- Term coined by Brian Solis, author of The End of Business as Usual.
- Traversing demographics…all of them
- All of these
- All of these
- All of these
- All of these
- Current content deliverables: Print PDF Online Help (in app) Webhelp
- PDFs In-app Online Help WebHelp Print books On-demand content assembled from a database
- Some differences between FM 12 and FM 2015: Index and Glossary: edit the main.css file and the index.htm file to disable these buttons. Cross references: map to <$paratext>. Page numbers irrelevant in online content.
- This is where you have to be comfortable going under the hood and doing things like editing html in a text editor (Notepad).
- Purchase license Won’t display correctly…browser defaults to another font…perhaps Times Roman UGH! What does the font string look like?
- This is ours. Yours will be different.
- Sizes index.png: Use an image of 31x23 pixels for best results index_tab.png: Use an image with maximum size of 50x50 pixels for best results. Smaller sizes will always fit. index_mobile.png: Use an image of 31x23 pixels for best results.
- Custom PDF Button: Sizes index.png: Use an image of 31x23 pixels for best results index_tab.png: Use an image with maximum size of 50x50 pixels for best results. Smaller sizes will always fit. index_mobile.png: Use an image of 31x23 pixels for best results.