• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Your PDFs Need Some Love Too
 

Your PDFs Need Some Love Too

on

  • 298 views

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, ...

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.

Statistics

Views

Total Views
298
Views on SlideShare
298
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Your PDFs Need Some Love Too Your PDFs Need Some Love Too Presentation Transcript

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