Your PDFs Need Some Love Too

523 views

Published on

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.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
523
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Your PDFs Need Some Love Too

  1. 1. Gaurav Gupta edUi 2012 | Sep 24, 2012 www.FreshlyBakedPixels.com
  2. 2. A little background IT Analyst for Office of the Vice Provost for Instruction & Student Success at Virginia Commonwealth University
  3. 3. A little background IT Analyst for Office of the Vice Provost for Instruction & Student Success at Virginia Commonwealth University
  4. 4. A little background IT Analyst for Office of the Vice Provost for Instruction & Student Success at Virginia Commonwealth University
  5. 5. A little background IT Analyst for Office of the Vice Provost for Instruction & Student Success at Virginia Commonwealth University
  6. 6. A little background IT Analyst for Office of the Vice Provost for Instruction & Student Success at Virginia Commonwealth University
  7. 7. 5% of all web content
  8. 8. We spend a lot of time and resources building our websites…
  9. 9. http://go.vcu.edu/CourseEval
  10. 10. http://www.online.vcu.edu/resources/
  11. 11. http://uc.vcu.edu/learning-support/writing-center/our-philosophy/
  12. 12. http://www.summer.vcu.edu/currentstudents/
  13. 13. … but ignore the PDF documents
  14. 14. Source: Faculty Handbook 2005
  15. 15. Source: Honor System Policy
  16. 16. To paraphrase Apple… Hello, I’m a web page… … and I’m a PDF
  17. 17. Why PDFs lag behind?
  18. 18. Why PDFs lag behind: designed by committee…
  19. 19. …and sent to you Sounds familiar?
  20. 20. Why PDFs lag behind: lack of guidelines
  21. 21. good Why PDFs lag behind: making PDFs is cumbersome and time consuming
  22. 22. Why should you care? Users read PDFs on their screen
  23. 23. Users read PDFs on their screen: Mobile Devices
  24. 24. Users read PDFs on their screen: Reference Guides
  25. 25. Users read PDFs on their screen: It’s Green
  26. 26. Give your users the same high-quality experience they get on a web page
  27. 27. Today’s task
  28. 28. The quick and easy solution: Treat them like web pages
  29. 29. Treat them like web pages Branding Typography Ease of Use Accessibility Contact Info
  30. 30. Treat them like web pages: Headers & Footers ≈ Cover Page
  31. 31. Treat them like web pages: Navigation ≈ Table of Contents
  32. 32. Treat them like web pages: Navigation ≈ Bookmarks
  33. 33. Bookmarks work on mobile too
  34. 34. Typography: Use fonts with multiple weights and styles http://www.fontsquirrel.com/fonts/alegreya
  35. 35. Use colors
  36. 36. Common PDF creation tools Microsoft Office Applications • Word  Adobe Applications Server Side applications • InDesign • ColdFusion • Illustrator • iTextSharp • PowerPoint • Publisher • Excel Complexity/Time
  37. 37. Let’s start building
  38. 38. Build it like a web page: use semantic markup 20pt Bold Blue vs Heading 1
  39. 39. Build it like a web page: building blocks <h2> <h1> <p> <strong> <blockquote> <li> <em> All other styles ≈ CSS classes
  40. 40. Styles toolbar: easier access to all the styles
  41. 41. Modify Styles
  42. 42. Text Box: the <div> tag of Microsoft Office Position: Absolute Relative/Inline Float
  43. 43. I also do fun stuff like spreadsheets, tables and pie charts
  44. 44. Styling tables: use built-in styles or create your own
  45. 45. Add a cover page
  46. 46. Add Header and Footer
  47. 47. Create your own Building blocks: Cover Page Headers Footers
  48. 48. Add Table of Contents Semantic markup = One click Table of Contents
  49. 49. Save document as PDF Semantic markup = One click Bookmarks Uncheck PDF/A
  50. 50. Finishing touches: Initial View Nudge users to use bookmarks as navigation
  51. 51. Finishing touches: PDF optimizer
  52. 52. Microsoft Word style template: .dotx file Save template Apply template to another document
  53. 53. Linking PDFs to your web pages
  54. 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. 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. 56. Linking PDFs to your web pages: Final Result
  57. 57. Some more examples
  58. 58. Before After
  59. 59. Before After
  60. 60. Before
  61. 61. After
  62. 62. For documents “designed by committee”: Share the template
  63. 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. 64. Final Thoughts: Standards & Guidelines
  65. 65. Questions? Email: guptag@vcu.edu www.FreshlyBakedPixels.com

×