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.
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
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
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
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
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>
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.
