This webinar is for our member libraries who have a Drupal website. This webinar covers how to keep with the design, writing for the web, wrestling with Drupal text manipulation, and briefly touches on databases and google analytics.

1. Webinar
Tips & Tricks for Updating Your
Drupal Website
1

2. Presented by:
Kathy O’Leary
- IFLS Public Relations & Communications Coordinator
2

3. Drupal - an open source content management platform
- powers millions of websites
ie. The Whitehouse and the New York Public Lib
3

4. Topics:
1. Design 101 –maintaining your website’s design
2. Writing for the Web
3. Text wrestling
4. Images
5. Databases
6. Google Analytics & Promoting Your Site
7. Quick Review & Closing
4

5. Design
1. Design 101
• Consistency!
• Hierarchy: what does the eye notice first,
second, third on your webpage?
• “Less is more”
5

6. Design
Consistency
• Your site already has a design and fonts and
sizes set.
– Your job is to maintain it – stay consistent!
Make it easy for visitors to read and find information
6

7. Hierarchy: what the eye Design
notices first, second, third
Maintain the Hierarchy with:
• Fonts
• Size
• Colors
• Boldness
• Alignment
• Spacing
Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop
filters, it’s about organizing information in a way that’s usable, accessible, and logical
to the everyday site visitor. – from webdesign.tutsplus.com
7

8. Design
Hierarchy - Fonts
• Rule: Maximum of 2-3 fonts/website.
• Standard web-safe fonts are standard for a reason.
• Different browsers use different fonts.
• Web-safe fonts are fonts that all computers should have
• Fonts options in Drupal:
– Arial
– Times New Roman
– Courier
– Georgia
– Verdana
– Geneva
8

9. Design
more on Fonts…
• DON’T USE CAPS FOR BODY TEXT. IT DECREASES
CONTRAST BETWEEN LETTERS MAKING IT HARDER TO
READ.
• Keep font sizes consistent
headings
sub headings
Paragraph (body text)
• Be consistent with Justification
– All left or all center. Mixing it up is confusing.
See bad sample…. 9

10. Design
Youth Library Day is here!
Come down and have some fun with us.
TEEN TECH WEEK COMING SOON!
PLAN TO JOIN US FOR GEEKY FUN.
EMAIL TO REGISTER.
Summer reading program sign up soon!
Tweet with your library! We are on Twitter so follow us to keep up to
date with the latest Youth Library information.
This purple font is really crazy!
Are your eyes exhausted yet? There are too many fonts, too many colors, sizes and irregular justification going on here!
10

11. Design
Library News
• Youth Library Day is here!
Come down and have some fun with us.
• Teen Tech Week coming soon! Plan to join us for geeky fun. Email
to register.
• Summer Reading Program sign up coming soon!
• Tweet with your library! We are on Twitter so follow us to keep up to
date with the latest Youth Library information.
• These fonts are calmer!
• Is this easier on your eyes? Hopefully consistency feels better.
11

12. Design
Less is More
• Abundant website content can easily confuse or
distract readers from what is truly important.
• More white space allows viewer to zone in on the
text or graphics that you want them to see.
• White space between paragraphs and in left and
right margins can increase comprehension by 20%.
• With an overcrowded design or inefficient layout,
confusion can occur, and you can lose interest fast.
Example of confusing site: 12

13. Before:
13

14. After:
14

15. 15

16. Design Review
• Stay consistent
• Keep Hierarchy in mind
• Less is More
16

17. Writing for Web
2. Writing for the Web
• Less is best
– Remove unnecessary words
– Fragments are okay!
– Bullets are great
• Make pages easy to scan. Break into chunks.
• Use headings, lists and tables
Taken from Save the Time of the Reader in Library
Journal Oct. 2011
17

18. …continued
Writing for Web
Writing for the Web
• Use images judiciously to add visual interest
– Can be distracting or add clutter
– Avoid clip art
• Be friendly, not institutional
– Conversational and welcoming
– Use “I” and “you”
Most Important
– Simple is beautiful
Supporting Info
• Write in inverted pyramid style:
Background Info
18

19. Writing for Web
More on Writing
• People rarely read word-for-word online.
• They scan the page for:
– Headings
– Subheadings Most Important
– Hyperlinks
Supporting Info
– Numbers
– Keywords Background Info
Rule of thumb: Half the word count or less than conventional writing.
19

20. Remember…
• Your site is a point of dialog & interaction
• It will take shape over time. You can control
this by being concise and consistent.
• As you add and edit content:
– Consider how your users are reading your site.
– How can you save them time?
– How to keep them engaged?
– How to keep them interested?
20

21. Bad Example
• Too much text
• Not easy to scan
• Small headings
• Images don’t add interest.
21

22. Before:
22

23. After:
23

24. Text Wrestling
3. Text Wrestling
• Formatting type in Drupal can sometimes feel
like a wrestling match!
• Tips to help you come out winning…
24

25. Text Wrestling
Tools in Edit mode…
• Don’t use the Font size dropdown.
Use the Format dropdown instead.
• Use the Paste from Word tool when
copying/pasting from a Word file.
• Paste as Plain Text tool when copying/pasting
from other programs
• Remove formatting tool on existing text
25

26. Pasting from Word
Why Do I Need to Remove Word Formatting?
• It looks fine on my computer!
• It may not be fine in IE or other browsers!
26

27. Example: in Safari and Firefox
Looks fine.
Can see all the info.
27

28. In IE, all the Word-formatted
text is not visible.
Can’t see the info.
28

29. The HTML code showing a bunch of
Word formatting. Bad!
29

30. Text Wrestling
Remove Word’s formatting
Paste from Word
1. Copy desired text from a Word doc
2. Click the “W” Icon in Drupal toolbar (above)
3. Paste from Word pop-up appears (right)
4. Paste the text here
5. Click the Insert button
30

31. Text Wrestling
Pasting as Plain Text
Paste as Plain Text
1. Copy the desired text
from another site.
2. Click the “T” icon in
Drupal toolbar (above)
3. The pop up box
appears (right)
4. Click the ok button.
5. Paste your text.
31

32. Text Wrestling
Remove Formatting tool
Remove Formatting
1. In Edit mode: highlight the text
(eraser)
2. Click Eraser icon in toolbar (above)
3. This will remove formatting on the
highlighted text
32

33. Text Wrestling
Site is pre-formatted
• When your site was built, fonts and sizes and
colors were set in the code. These will be
apparent if you remove all formatting from
text.
33

34. Text Wrestling
Changing Font Size
• Use Format dropdown tool NOT Font size.
• Click and see this window:
• Remember to SAVE
• Best way to maintain consistency
If you don’t like it, use the eraser tool to remove. SAVE.
34

35. Text Wrestling
Changing font continued
• Another way to change font and style is with the
Edit CSS Style tool
• Be careful with this, it can change the font, color,
size to work against the website design.
• Better to use Format dropdown tool.
35

36. Text Wrestling
Help, this is not working!
There may be times when the eraser tool does
not seem to help…
• If you or someone you work with knows
HTML, then click Edit HTML Source on the
toolbar and remove the span or spacing in
the code that is causing the problem.
• Contact Lori or me at IFLS to help.
36

37. Firefox or Google Chrome for editing
• If you are having problems editing your site
and are using Internet Explorer, try Firefox or
Google Chrome as your browser instead.
37

38. Images
4. Images
• Image Size & Resolution
• Resizing images
• Placing an image on your site
• Image Description – why is this important?
38

39. Images
Image Size & Resolution
• Resolution - the amount of detail an image
shows. (dpi=Dots per inch)
• High Res - 300dpi. Good for printing
• Web or Low Res - 72dpi. Quicker loading
• Drupal asks for “Dimensions” in pixels when
you add an image. Usually 100-300 pixels.
39

40. How to Resize and Image
• Photoshop, Paint, Picasa …
• Many free resizing sites online such as:
www.webresizer.com
www.shrinkpictures.com
www.picnik.com
• Your website is ~1000 pixels wide, so most
images will be about 400 pixels wide or less.
• 72 dpi (dots per inch) is great for the web.
40

41. Resize Photo using picnik.com
http://screencast.com/t/oBcvDNX4OeGt
41

42. Adding an image to your website:
http://screencast.com/t/FMs8ZqTVxql
42

43. Images
Editing the Image
• View the image and if you need to edit it, go
to Edit mode, click on the image then click on
“insert/edit image” icon
43

44. Step by Steps for adding image:
• This is the same information for your
reference.
44

45. 1. Choose Edit mode
2. Place cursor where 3. Click the Tree icon
you want the image. Insert/Edit Image
45

46. 4. Pop-up Window
appears. Click the
Browse icon.
5. Click Upload to add a
new image.
46

47. 6.
• Click the Choose File button.
• Choose your file from dropdown menu.
• Click Upload button
7.
• Click on the image filename. It
will be highlighted in yellow.
• Click Return or Send to Tinymce
8. Type in a brief Image description
and Title.
This is what will be seen if the image
does not load.
47
Click the Appearance tab

48. Appearance tab:
9. Click on Alignment for a dropdown
of choices.
10. Image Dimensions can be changed here.
11. You can add space around the image.
12. Border – type in 1 for a 1-pixel black border
2 for a two pixels wide
3 for a 3-pixel wide
Leave blank for no added border to the image.
14. Remember to hit the Insert button
to save your image settings.
48

49. 15. If you realize the image is not the 16. Click on the image in Edit mode
right size…. then click the Insert/Edit Image icon
17. Now, change the dimensions here.
If you change one the other will
adjust (make sure Constrain
proportions is checked)
18. Remember to Update then Save
your changes!
49

50. Image is now on your site
50

51. Images
Image Descriptions
• When you place an image on your site you
should always give it a short Image
description.
• People who can’t view your images will see
the image description -
51

52. Mark Your Calendars
• September 21, 2012 – IFLS Workshop on
Images & Photo Editing
52

53. 5. Database Links
• Choose Databases
• Do you want to feature with
– Flash Tutorials?
– Searches?
– Find buttons, logos and ads to use?
• Contact Maureen Welch at IFLS for the exact url to
use for these links. welch@ifls.lib.wi.us
53

54. Supported databases available for you to link to from your website:
Research Databases Business Databases
• MasterFILE • Business Source Premier
• Academic Search Premier • GreenFILE
• History Reference Center • Military & Government Collection
• Science Reference Center • Newspaper Source Plus
• Encyclopedia Britannica • Regional Business News
• Education Research Complete • Wisconsin Newspapers Digital Research Site
• Learning Express Library
Health & Wellness Databases
• Consumer Health Complete Do-It-Yourself Databases
• Health Source – Consumer Edition • Auto Repair Reference Center
• Health Source – Nursing/Academic Edition • Small Engine Repair Reference Center
• Alt HealthWatch • Home Improvement Reference Center
• MEDLINE • Hobbies & Crafts Reference Center
Genealogy Databases Literature Databases
• HeritageQuest Online • NoveListPlus&NoveList K-8
• Ancestry Library Edition (In Library Use Only) • Book Collection Nonfiction – Elementary, Middle,
& High School Editions
• Literary Reference Center
• LitFinder
The listed databases are funded through the Wisconsin Department of Public Instruction (DPI), Division for Libraries, Technology, and Community
Learning as well as Indianhead Federated Library System. 54

55. For Buttons, Logos and Ads or Tutorials
www.badgerlink.net
 on right click How To Use Badgerlink
 Scroll to EBSCOTraining and Documentation
 View Web-based Tutorials* or
 Visit EBSCO Support Homepage
• Under Promotion you can choose:
o Product Buttons*
o Product Logos*
o Try It Now! Ads*
*Note that not all of these databases are available for your library. 55

56. These links will be “retired”
by the end of 2011:
Replace with new logo linked to the
MORE Research Page
www.more.lib.wi.us/screens/research.html
Also should go to MORE Research Page
56

57. • Contact Maureen Welch with any questions
on databases at welch@ifls.lib.wi.us or 715-
839-5082 ext 120
57

58. 6. Who is using your site?
• Use Google Analytics
• Ways To Promote Your Website
58

59. Accessing your site statistics
o Go to www.google.com/analytics
o Select “Access Analytics” to view your report
o If you’re not already, you’ll have to log in with
your Google Apps info
o Select "View Report" next to your community name
59

60. Google Analytics
60

61. Promote Your Website
• Link from other sites – city, county, schools …
• Link from your Facebook page
• Set your Public Computers to your website
• Put the web address on all printed materials
• Make a bookmark, banner, sign, t-shirts …
• Remind people about your website, refer to
it and keep it up to date
• Contact local media
61

62. Results?
• Watch your google analytics to see how each
promotion affects the visits to your site.
62

63. Questions
Contact Lori Roholt with any questions
about google analytics:
roholt@Ifls.lib.wi.us
715-839-5082 ext. 123
63

64. Review:
• Stay consistent with the design & hierarchy.
• Less is more. Keep it short and simple.
• Keep your site up-to-date.
• Monitor activity with google analytics.
64

65. Closing
• Your site is Live – treat it as such and keep
it up to date and keep it interesting
• Promote your site and watch your google
analytics to see what works
• Remember that you have support staff at
IFLS that can help you
65

66. Contact me if you have questions
Kathy O’Leary
oleary@ifls.lib.wi.us or 715-839-5082 ext 18 66