WebinarTips & Tricks for Updating Your        Drupal Website                             1
Presented by:   Kathy O’Leary   - IFLS Public Relations & Communications Coordinator                                      ...
Drupal - an open source content management platform       - powers millions of websitesie. The Whitehouse and the New York...
Topics:1. Design 101 –maintaining your website’s design2. Writing for the Web3. Text wrestling4. Images5. Databases6. Goog...
Design              1. Design 101• Consistency!• Hierarchy: what does the eye notice first,  second, third on your webpage...
Design                  Consistency• Your site already has a design and fonts and  sizes set.  – Your job is to maintain i...
Hierarchy: what the eye                                                   Design            notices first, second, thirdMa...
Design                 Hierarchy - Fonts• Rule: Maximum of 2-3 fonts/website.• Standard web-safe fonts are standard for a ...
Design                         more on Fonts…• DON’T USE CAPS FOR BODY TEXT. IT DECREASES  CONTRAST BETWEEN LETTERS MAKING...
DesignYouth Library Day is here!Come down and have some fun with us.                                             TEEN TECH...
DesignLibrary News•   Youth Library Day is here!    Come down and have some fun with us.•   Teen Tech Week coming soon! Pl...
Design                              Less is More• Abundant website content can easily confuse or  distract readers from wh...
Before:          13
After:         14
15
Design Review• Stay consistent• Keep Hierarchy in mind• Less is More                              16
Writing for Web               2. Writing for the Web• Less is best    – Remove unnecessary words    – Fragments are okay! ...
…continued                                               Writing for Web               Writing for the Web  • Use images j...
Writing for Web                      More on Writing• People rarely read word-for-word online.• They scan the page for:   ...
Remember…• Your site is a point of dialog & interaction• It will take shape over time. You can control  this by being conc...
Bad Example• Too much text• Not easy to scan• Small headings• Images don’t add interest.                               21
Before:          22
After:         23
Text Wrestling            3. Text Wrestling• Formatting type in Drupal can sometimes feel  like a wrestling match!• Tips t...
Text Wrestling          Tools in Edit mode…• Don’t use the Font size dropdown.  Use the Format dropdown instead.• Use the ...
Pasting from WordWhy Do I Need to Remove Word Formatting?• It looks fine on my computer!• It may not be fine in IE or othe...
Example: in Safari and Firefox                   Looks fine.Can see all the info.                                         ...
In IE, all the Word-formatted                text is not visible.Can’t see the info.                                      ...
The HTML code showing a bunch of     Word formatting. Bad!                                   29
Text Wrestling          Remove Word’s formatting                    Paste from Word1. Copy desired text from a Word doc2. ...
Text Wrestling                 Pasting as Plain Text               Paste as Plain Text1. Copy the desired text   from anot...
Text Wrestling             Remove Formatting toolRemove Formatting                    1. In Edit mode: highlight the text ...
Text Wrestling         Site is pre-formatted• When your site was built, fonts and sizes and  colors were set in the code. ...
Text Wrestling                      Changing Font Size• Use Format dropdown tool NOT Font size.• Click and see this window...
Text Wrestling            Changing font continued• Another way to change font and style is with the  Edit CSS Style tool• ...
Text Wrestling      Help, this is not working!There may be times when the eraser tool does  not seem to help…• If you or s...
Firefox or Google Chrome for editing• If you are having problems editing your site  and are using Internet Explorer, try F...
Images                 4. Images• Image Size & Resolution• Resizing images• Placing an image on your site• Image Descripti...
Images       Image Size & Resolution• Resolution - the amount of detail an image  shows. (dpi=Dots per inch)• High Res - 3...
How to Resize and Image• Photoshop, Paint, Picasa …• Many free resizing sites online such as:www.webresizer.comwww.shrinkp...
Resize Photo using picnik.comhttp://screencast.com/t/oBcvDNX4OeGt                                       41
Adding an image to your website:         http://screencast.com/t/FMs8ZqTVxql                                              ...
Images            Editing the Image• View the image and if you need to edit it, go  to Edit mode, click on the image then ...
Step by Steps for adding image:• This is the same information for your  reference.                                        ...
1. Choose Edit mode2. Place cursor where     3. Click the Tree iconyou want the image.       Insert/Edit Image            ...
4. Pop-up Window                           appears. Click the                           Browse icon.5. Click Upload to add...
6.• Click the Choose File button.• Choose your file from dropdown menu.• Click Upload button 7. • Click on the image filen...
Appearance tab:                                      9. Click on Alignment for a dropdown                                 ...
15. If you realize the image is not the     16. Click on the image in Edit moderight size….                               ...
Image is now on your site                            50
Images          Image Descriptions• When you place an image on your site you  should always give it a short Image  descrip...
Mark Your Calendars• September 21, 2012 – IFLS Workshop on         Images & Photo Editing                                 ...
5. Database Links• Choose Databases• Do you want to feature with   – Flash Tutorials?   – Searches?   – Find buttons, logo...
Supported databases available for you to link to from your website:      Research Databases                               ...
For Buttons, Logos and Ads or Tutorialswww.badgerlink.net      on right click How To Use Badgerlink      Scroll to EBSCO...
These links will be “retired”   by the end of 2011:     Replace with new logo linked to the     MORE Research Page     www...
• Contact Maureen Welch with any questions  on databases at welch@ifls.lib.wi.us or 715-  839-5082 ext 120                ...
6. Who is using your site?• Use Google Analytics• Ways To Promote Your Website                                  58
Accessing your site statisticso Go to www.google.com/analyticso Select “Access Analytics” to view your reporto If you’re n...
Google Analytics                   60
Promote Your Website• Link from other sites – city, county, schools …• Link from your Facebook page• Set your Public Compu...
Results?• Watch your google analytics to see how each  promotion affects the visits to your site.                         ...
Questions  Contact Lori Roholt with any questions  about google analytics:roholt@Ifls.lib.wi.us715-839-5082 ext. 123      ...
Review:• Stay consistent with the design & hierarchy.• Less is more. Keep it short and simple.• Keep your site up-to-date....
Closing• Your site is Live – treat it as such and keep  it up to date and keep it interesting• Promote your site and watch...
Contact me if you have questionsKathy O’Learyoleary@ifls.lib.wi.us or 715-839-5082 ext 18   66
Upcoming SlideShare
Loading in …5
×

Website tips & tricks

292 views
205 views

Published on

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.

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
292
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Website tips & tricks

  1. 1. WebinarTips & Tricks for Updating Your Drupal Website 1
  2. 2. Presented by: Kathy O’Leary - IFLS Public Relations & Communications Coordinator 2
  3. 3. Drupal - an open source content management platform - powers millions of websitesie. The Whitehouse and the New York Public Lib 3
  4. 4. Topics:1. Design 101 –maintaining your website’s design2. Writing for the Web3. Text wrestling4. Images5. Databases6. Google Analytics & Promoting Your Site7. Quick Review & Closing 4
  5. 5. Design 1. Design 101• Consistency!• Hierarchy: what does the eye notice first, second, third on your webpage?• “Less is more” 5
  6. 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. 7. Hierarchy: what the eye Design notices first, second, thirdMaintain 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. 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. 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. 10. DesignYouth 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. 11. DesignLibrary 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. 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. 13. Before: 13
  14. 14. After: 14
  15. 15. 15
  16. 16. Design Review• Stay consistent• Keep Hierarchy in mind• Less is More 16
  17. 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 tablesTaken from Save the Time of the Reader in LibraryJournal Oct. 2011 17
  18. 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. 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 InfoRule of thumb: Half the word count or less than conventional writing. 19
  20. 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. 21. Bad Example• Too much text• Not easy to scan• Small headings• Images don’t add interest. 21
  22. 22. Before: 22
  23. 23. After: 23
  24. 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. 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. 26. Pasting from WordWhy 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. 27. Example: in Safari and Firefox Looks fine.Can see all the info. 27
  28. 28. In IE, all the Word-formatted text is not visible.Can’t see the info. 28
  29. 29. The HTML code showing a bunch of Word formatting. Bad! 29
  30. 30. Text Wrestling Remove Word’s formatting Paste from Word1. Copy desired text from a Word doc2. Click the “W” Icon in Drupal toolbar (above)3. Paste from Word pop-up appears (right)4. Paste the text here5. Click the Insert button 30
  31. 31. Text Wrestling Pasting as Plain Text Paste as Plain Text1. 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. 32. Text Wrestling Remove Formatting toolRemove 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. 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. 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. 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. 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. 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. 38. Images 4. Images• Image Size & Resolution• Resizing images• Placing an image on your site• Image Description – why is this important? 38
  39. 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. 40. How to Resize and Image• Photoshop, Paint, Picasa …• Many free resizing sites online such as:www.webresizer.comwww.shrinkpictures.comwww.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. 41. Resize Photo using picnik.comhttp://screencast.com/t/oBcvDNX4OeGt 41
  42. 42. Adding an image to your website: http://screencast.com/t/FMs8ZqTVxql 42
  43. 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. 44. Step by Steps for adding image:• This is the same information for your reference. 44
  45. 45. 1. Choose Edit mode2. Place cursor where 3. Click the Tree iconyou want the image. Insert/Edit Image 45
  46. 46. 4. Pop-up Window appears. Click the Browse icon.5. Click Upload to add anew image. 46
  47. 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 Tinymce8. Type in a brief Image descriptionand Title.This is what will be seen if the imagedoes not load. 47Click the Appearance tab
  48. 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. 49. 15. If you realize the image is not the 16. Click on the image in Edit moderight 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. 50. Image is now on your site 50
  51. 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. 52. Mark Your Calendars• September 21, 2012 – IFLS Workshop on Images & Photo Editing 52
  53. 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. 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. 55. For Buttons, Logos and Ads or Tutorialswww.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. 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. 57. • Contact Maureen Welch with any questions on databases at welch@ifls.lib.wi.us or 715- 839-5082 ext 120 57
  58. 58. 6. Who is using your site?• Use Google Analytics• Ways To Promote Your Website 58
  59. 59. Accessing your site statisticso Go to www.google.com/analyticso Select “Access Analytics” to view your reporto If you’re not already, you’ll have to log in with your Google Apps infoo Select "View Report" next to your community name 59
  60. 60. Google Analytics 60
  61. 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. 62. Results?• Watch your google analytics to see how each promotion affects the visits to your site. 62
  63. 63. Questions Contact Lori Roholt with any questions about google analytics:roholt@Ifls.lib.wi.us715-839-5082 ext. 123 63
  64. 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. 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. 66. Contact me if you have questionsKathy O’Learyoleary@ifls.lib.wi.us or 715-839-5082 ext 18 66

×