From forms to policies to reports, PDFs are ubiquitous on higher-ed websites. Mostly created by administrators and committee members, these documents usually lag behind your web pages in styling, layout, and branding and lack any functional navigation. In this session, watch the transformation of one such document as we give it a sophisticated and professional look using nothing more than Microsoft Office. Learn how to quickly apply styles that match your website, automatically generate bookmarks and navigation, and create workflows to accomplish this task quickly and consistently every time.

1. Gaurav Gupta
edUi 2012 | Sep 24, 2012
www.FreshlyBakedPixels.com

2. A little
background
IT Analyst
for
Office of the Vice Provost for
Instruction & Student Success
at
Virginia Commonwealth
University

3. A little
background
IT Analyst
for
Office of the Vice Provost for
Instruction & Student Success
at
Virginia Commonwealth
University

4. A little
background
IT Analyst
for
Office of the Vice Provost for
Instruction & Student Success
at
Virginia Commonwealth
University

5. A little
background
IT Analyst
for
Office of the Vice Provost for
Instruction & Student Success
at
Virginia Commonwealth
University

6. A little
background
IT Analyst
for
Office of the Vice Provost for
Instruction & Student Success
at
Virginia Commonwealth
University

7. 5% of
all web
content

8. We spend a lot of time and
resources building our
websites…

9. http://go.vcu.edu/CourseEval

10. http://www.online.vcu.edu/resources/

11. http://uc.vcu.edu/learning-support/writing-center/our-philosophy/

12. http://www.summer.vcu.edu/currentstudents/

13. … but ignore the PDF
documents

14. Source: Faculty Handbook 2005

15. Source: Honor System Policy

16. To paraphrase Apple…
Hello,
I’m a web
page…
… and I’m a
PDF

17. Why PDFs lag behind?

18. Why PDFs lag behind: designed by committee…

19. …and sent to you
Sounds familiar?

20. Why PDFs lag behind: lack of guidelines

21. good
Why PDFs lag behind: making PDFs
is cumbersome and time consuming

22. Why should you care?
Users read PDFs on their screen

23. Users read PDFs on their screen: Mobile Devices

24. Users read PDFs on their screen: Reference Guides

25. Users read PDFs on their screen: It’s Green

26. Give your users the same
high-quality experience
they get on a web page

27. Today’s task

28. The quick and easy solution:
Treat them like web pages

29. Treat them like web pages
Branding
Typography
Ease of Use
Accessibility
Contact Info

30. Treat them like web pages:
Headers & Footers ≈ Cover Page

31. Treat them like web pages:
Navigation ≈ Table of Contents

32. Treat them like web pages:
Navigation ≈ Bookmarks

33. Bookmarks work on mobile too

34. Typography:
Use fonts with
multiple weights
and styles
http://www.fontsquirrel.com/fonts/alegreya

35. Use colors

36. Common PDF creation tools
Microsoft Office
Applications
• Word

Adobe Applications
Server Side applications
• InDesign
• ColdFusion
• Illustrator
• iTextSharp
• PowerPoint
• Publisher
• Excel
Complexity/Time

37. Let’s start building

38. Build it like a web page: use semantic markup
20pt
Bold
Blue
vs
Heading 1

39. Build it like a web page: building blocks
<h2>
<h1>
<p>
<strong>
<blockquote>
<li>
<em>
All other styles ≈ CSS classes

40. Styles toolbar: easier access to all the styles

41. Modify Styles

42. Text Box: the <div> tag of Microsoft Office
Position: Absolute
Relative/Inline
Float

43. I also do fun stuff like
spreadsheets, tables and
pie charts

44. Styling tables: use built-in styles or create your own

45. Add a
cover page

46. Add Header
and Footer

47. Create your own
Building blocks:
Cover Page
Headers
Footers

48. Add Table
of Contents
Semantic markup =
One click Table of
Contents

49. Save document as PDF
Semantic markup =
One click Bookmarks
Uncheck PDF/A

50. Finishing touches: Initial View
Nudge users to use bookmarks as navigation

51. Finishing touches: PDF optimizer

52. Microsoft Word style template: .dotx file
Save template
Apply template to another document

53. Linking PDFs to your
web pages

54. Linking PDFs to your web pages: the HTML code
<div class=“entry”>
<ul>
<li><a href="file.pdf">Link to PDF Document</a></li>
<li><a href="file.docx">Link to Word Document</a></li>
<li><a href="file.xlsx">Link to Excel Spreadsheet</a></li>
<li><a href="file.pptx">Link PowerPoint Slideshow</a></li>
</ul>
</div>

55. Linking PDFs to your web pages: JS(jQuery) and CSS
$('.entry a').each(function(){
if($(this).is('[href*=".doc"]')) {$(this).attr('target', '_blank').addClass("docLink")};
if($(this).is('[href*=".xls"]')) {$(this).attr('target', '_blank').addClass("xlsLink")};
if($(this).is('[href*=".ppt"]')) {$(this).attr('target', '_blank').addClass("pptLink")};
if($(this).is('[href*=".pdf"]')) {$(this).attr('target', '_blank').addClass("pdfLink")};
});
.pdfLink { padding-right: 20px; background: url(icon_PDF.png) no-repeat 100% 0em; }
.docLink { padding-right: 20px; background: url(icon_Word.png) no-repeat 100% 0em; }
.pptLink { padding-right: 20px; background: url(icon_PPT.png) no-repeat 100% 0em; }
.xlsLink { padding-right: 20px; background: url(icon_Excel.png) no-repeat 100% 0em; }

56. Linking PDFs to your web pages: Final Result

57. Some more examples

58. Before
After

59. Before
After

60. Before

61. After

62. For documents “designed by committee”:
Share the template

63. Final Thoughts: Make a checklist
Semantic markup
Cover page
Headers and Footers
Table of Contents (if needed)
PDF Optimizer (for PDFs with images)
PDF Initial View (display bookmarks panel)

64. Final Thoughts: Standards & Guidelines

65. Questions?
Email: guptag@vcu.edu
www.FreshlyBakedPixels.com