Embed Size (px)
DESCRIPTION
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.
Citation preview
1
Tips & Tricks for Updating Your
Drupal Website
Webinar
2
Kathy O’Leary- IFLS Public Relations & Communications Coordinator
Presented by:
3
Drupal - an open source content management platform - powers millions of websites
ie. The Whitehouse and the New York Public Lib
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
5
1. Design 101
• Consistency!
• Hierarchy: what does the eye notice first, second, third on your webpage?
• “Less is more”
Design
6
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
Design
7
Hierarchy: what the eye notices first, second, third
• Fonts• Size• Colors• Boldness• Alignment• SpacingGood 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
Design
Maintain the Hierarchy with:
8
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
Design
9
more on Fonts…
• DON’T USE CAPS FOR BODY TEXT. IT DECREASES CONTRAST BETWEEN LETTERS MAKING IT HARDER TO READ.
• Keep font sizes consistentheadingssub headingsParagraph (body text)
• Be consistent with Justification– All left or all center. Mixing it up is confusing.
Design
See bad sample….
10
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!
Design
11
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.
Design
12
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.
Design
Example of confusing site:
13
Before:
14
After:
15
16
Design Review
• Stay consistent
• Keep Hierarchy in mind
• Less is More
17
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
Writing for Web
Taken from Save the Time of the Reader in Library Journal Oct. 2011
18
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”
– Simple is beautiful
• Write in inverted pyramid style:
Most Important
Supporting Info
Background Info
Writing for Web…continued
19
More on Writing
• People rarely read word-for-word online.• They scan the page for:– Headings – Subheadings– Hyperlinks– Numbers– Keywords
Rule of thumb: Half the word count or less than conventional writing.
Writing for Web
Most Important
Supporting Info
Background Info
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?
21
Bad Example
• Too much text
• Not easy to scan
• Small headings
• Images don’t add interest.
22
Before:
23
After:
24
3. Text Wrestling
• Formatting type in Drupal can sometimes feel like a wrestling match!
• Tips to help you come out winning…
Text Wrestling
25
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
Text Wrestling
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!
27
Example: in Safari and FirefoxLooks fine.
Can see all the info.
28
In IE, all the Word-formatted text is not visible.
Can’t see the info.
29
The HTML code showing a bunch of Word formatting. Bad!
30
Remove Word’s formatting
Paste from Word
Text Wrestling
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
31
Pasting as Plain Text
Paste as Plain Text
Text Wrestling
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.
32
Remove Formatting tool
Remove Formatting(eraser)
1. In Edit mode: highlight the text
2. Click Eraser icon in toolbar (above)
3. This will remove formatting on the highlighted text
Text Wrestling
33
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.
Text Wrestling
34
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.
Text Wrestling
35
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.
Text Wrestling
36
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.
Text Wrestling
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.
38
4. Images
• Image Size & Resolution
• Resizing images
• Placing an image on your site
• Image Description – why is this important?
Images
39
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.
Images
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.
41
Resize Photo using picnik.com
http://screencast.com/t/oBcvDNX4OeGt
42
http://screencast.com/t/FMs8ZqTVxql
Adding an image to your website:
43
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
Images
44
Step by Steps for adding image:
• This is the same information for your reference.
45
1. Choose Edit mode
2. Place cursor where you want the image.
3. Click the Tree icon Insert/Edit Image
46
4. Pop-up Window appears. Click the Browse icon.
5. Click Upload to add a new image.
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.
Click the Appearance tab
48
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 wideLeave blank for no added border to the image.14. Remember to hit the Insert button
to save your image settings.
Appearance tab:
49
15. If you realize the image is not the right size….
16. Click on the image in Edit mode 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!
50
Image is now on your site
51
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 -
Images
52
Mark Your Calendars
• September 21, 2012 – IFLS Workshop on
Images & Photo Editing
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. [email protected]
54
Research Databases• MasterFILE
• Academic Search Premier
• History Reference Center
• Science Reference Center
• Encyclopedia Britannica
• Education Research Complete
Health & Wellness Databases• Consumer Health Complete
• Health Source – Consumer Edition
• Health Source – Nursing/Academic Edition
• Alt HealthWatch
• MEDLINE
Genealogy Databases• HeritageQuest Online
• Ancestry Library Edition (In Library Use Only)
Business Databases• Business Source Premier
• GreenFILE
• Military & Government Collection
• Newspaper Source Plus
• Regional Business News
• Wisconsin Newspapers Digital Research Site
• Learning Express Library
Do-It-Yourself Databases • Auto Repair Reference Center
• Small Engine Repair Reference Center
• Home Improvement Reference Center
• Hobbies & Crafts Reference Center
Literature Databases• NoveListPlus & NoveList K-8
• Book Collection Nonfiction – Elementary, Middle,
& High School Editions
• Literary Reference Center
• LitFinderThe 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.
Supported databases available for you to link to from your website:
55
For Buttons, Logos and Ads or Tutorials
www.badgerlink.net on right click How To Use Badgerlink
Scroll to EBSCO Training 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.
56
These links will be “retired” by the end of 2011:
Also should go to MORE Research Page
Replace with new logo linked to the MORE Research Pagewww.more.lib.wi.us/screens/research.html
57
• Contact Maureen Welch with any questions on databases at [email protected] or 715-839-5082 ext 120
?
58
6. Who is using your site?
• Use Google Analytics
• Ways To Promote Your Website
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
60
Google Analytics
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
62
Results?
• Watch your google analytics to see how each promotion affects the visits to your site.
63
Questions
Contact Lori Roholt with any questions about google analytics:
715-839-5082 ext. 123 ?
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.
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
