website tips & tricks

Download Website tips & tricks

Post on 03-Dec-2014

217 views

Category:

Design

0 download

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.

TRANSCRIPT

  • 1. WebinarTips & Tricks for Updating YourDrupal Website 1

2. Presented by: Kathy OLeary - IFLS Public Relations & Communications Coordinator2 3. Drupal - an open source content management platform - powers millions of websitesie. The Whitehouse and the New York Public Lib3 4. Topics:1. Design 101 maintaining your websites design2. Writing for the Web3. Text wrestling4. Images5. Databases6. Google Analytics & Promoting Your Site7. Quick Review & Closing 4 5. Design1. Design 101 Consistency! Hierarchy: what does the eye notice first,second, third on your webpage? Less is more5 6. DesignConsistency Your site already has a design and fonts andsizes 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 Designnotices first, second, thirdMaintain the Hierarchy with: Fonts Size Colors Boldness Alignment SpacingGood visual hierarchy isnt about wild and crazy graphics or the newest photoshopfilters, its about organizing information in a way thats usable, accessible, and logicalto 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 DONT USE CAPS FOR BODY TEXT. IT DECREASESCONTRAST BETWEEN LETTERS MAKING IT HARDER TOREAD. Keep font sizes consistentheadingssub headingsParagraph (body text) Be consistent with Justification All left or all center. Mixing it up is confusing.See bad sample.9 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 todate 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. 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. Emailto register. Summer Reading Program sign up coming soon! Tweet with your library! We are on Twitter so follow us to keep up todate with the latest Youth Library information. These fonts are calmer! Is this easier on your eyes? Hopefully consistency feels better. 11 12. DesignLess is More Abundant website content can easily confuse ordistract readers from what is truly important. More white space allows viewer to zone in on thetext or graphics that you want them to see. White space between paragraphs and in left andright 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 More16 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. 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 youMost Important Simple is beautifulSupporting Info Write in inverted pyramid style:Background Info 18 19. Writing for WebMore on Writing People rarely read word-for-word online. They scan the page for: Headings Subheadings Most Important HyperlinksSupporting Info Numbers KeywordsBackground InfoRule 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 controlthis 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 dont add interest. 21 22. Before:22 23. After: 23 24. Text Wrestling3. Text Wrestling Formatting type in Drupal can sometimes feellike a wrestling match! Tips to help you come out winning 24 25. Text WrestlingTools in Edit mode Dont use the Font size dropdown.Use the Format dropdown instead. Use the Paste from Word tool whencopying/pasting from a Word file. Paste as Plain Text tool when copying/pastingfrom other programs Remove formatting tool on existing text25 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. Example: in Safari and Firefox Looks fine.Can see all the info.27 28. In IE, all the Word-formattedtext is not visible.Cant see the info. 28 29. The HTML code showing a bunch of Word formatting. Bad! 29 30. Text WrestlingRemove Words formattingPaste 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 button30 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. Text Wrestling Remove Formatting toolRemove Formatting1. In Edit mode: highlight the text(eraser)2. Click Eraser icon in toolbar (above)3. This will remove formatting on the highlighted text32 33. Text Wrestling Site is pre-formatted When your site was built, fonts and sizes andcolors were set in the code. These will beapparent if you remove all formatting fromtext. 33 34. Text WrestlingChanging Font Size Use Format dropdown tool NOT Font size. Click and see this window: Remember to SAVE Best way to maintain consistency If you dont like it, use the eraser tool to remove. SAVE.34 35. Text WrestlingChanging font continued Another way to change font and style is with theEdit 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 WrestlingHelp, this is not working!There may be times when the eraser tool doesnot seem to help If you or someone you work with knowsHTML, then click Edit HTML Source on thetoolbar and remove the span or spacing inthe 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 siteand are using Internet Explorer, try Firefox orGoogle 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 imageshows. (dpi=Dots per inch) High Res - 300dpi. Good for printing Web or Low Res - 72dpi. Quicker loading Drupal asks for Dimensions in pixels whenyou 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.comwww.shrinkpictures.comwww.picnik.com Your website is ~1000 pixels wide, so mostimages will be about 400 pixels wide or less. 72 dpi (dots per inch) is great for the web.40 41. Resize Photo using picnik.comhttp://screencast.com/t/oBcvDNX4OeGt 41 42. Adding an image to your website: http://screencast.com/t/FMs8ZqTVxql 42 43. ImagesEditing the Image View the image and if you need to edit it, goto Edit mode, click on the image then click oninsert/edit image icon 43 44. Step by Steps for adding image: This is the same information for yourreference.44 45. 1. Choose Edit mode2. Place cursor where 3. Click the Tree iconyou want the image. Insert/Edit Image 45 46. 4. Pop-up Window appears. Click the Browse icon.5. Click Upload to add anew 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 Tinymce8. Type in a brief Image descriptionand Title.This is what will be seen if the imagedoes not load. 47Click the Appearance tab 48. Appearance tab:9. Click on Alignment for a dropdownof 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 border2 for a two pixels wide3 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.48 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 Saveyour changes!49 50. Image is now on your site50 51. ImagesImage Descriptions When you place an image on your site youshould always give it a short Imagedescription. People who cant view your images will seethe image description - 51 52. Mark Your Calendars September 21, 2012 IFLS Workshop on Images & Photo Editing52 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 touse for these links. welch@ifls.lib.wi.us 53 54. Supported databases available for you to link to from your website:Research DatabasesBusiness Databases MasterFILE Business Source Premier Academic Search P