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
...
A little
background
IT Analyst
for

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

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

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

Office of the Vice Provost for
Instruction & Student Success
at
Virginia Commonwealth
...
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

• InDesig...
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...
Linking PDFs to your web pages: JS(jQuery) and CSS
$('.entry a').each(function(){
if($(this).is('[href*=".doc"]')) {$(this...
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 Optimiz...
Final Thoughts: Standards & Guidelines
Questions?
Email: guptag@vcu.edu
www.FreshlyBakedPixels.com
Upcoming SlideShare
Loading in...5
×

Your PDFs Need Some Love Too

362

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
362
On Slideshare
0
From Embeds
0
Number of Embeds
0
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

×