Embed Size (px)
Citation preview
Cayce Dalton, FB EnvironmentalJune 23, 2012Congress of Lake Associations Conference
A Practical Look at
Websites for Lakes Associations
Overview of Presentation
• About me
• Anatomy of a website
• Costs
• Preparation for an effective site
• Intro to web editing
• Maintaining your site
About Me
• Scientist at FB Environmental
• Work extensively with lakes and streams
• Web workshops, reading, and experience
• Not a full-time webmaster
About Me
• I’ll talk about building & maintaining a simple website.
• Here are some examples…
My first site
• Site for three-year project at Maine Sea Grant
• Maintained and expanded over the three years, then retired
• Technologically simple, but served outreach & education purpose well
• FBE site
• Built by IT consultant
• Updated in-house
• Provides: marketing, reference, report distribution
Template-Based Site
• Open-source template
• Added text, logo, images
• Can be updated by website owner
What is a Website?
• You know what a website is, right?
• It’s one of those things that people look at a hundred times a day…
News
Weather
Business
…and of course lakes
But really, what is a website?
• Domain nameYour address.
• HostDisk space on a remote computer.
• ContentTextPicturesLinksMaybe videos, databases, shopping cart
Poll
• Does your association have a website?
• Do you want to improve an existing website?
• What are the barriers:
–Money?
– Technical Expertise?
–Consensus?
Cost
• Domain name: $12 per year
• Hosting: about $100 per year
• Software to make websites
– Adobe Dreamweaver: about $350 (ask around)
– WordPress: included in hosting cost
– Image editing software: free
• Design: hundreds to thousands of $
• Annual maintenance: $100 and up
Estimates from a Non-Profit Director
• Multiple non-profit associations with hundreds of members
• Includes advanced search and database function by Avectra (web consultant)
• $2000 start-up
• $700 annually
• Probably exceeds lake associations needs
Typical Template-Based Site
• Website owner provides text, pictures, and had clear layout in mind
• Graphic artist creates the logo
• $500 for web-posting assistance
• $100-500 annually, depending on level of edits, but excluding in-house updates
Building Consensus
• The foundation of a good site:
• What’s the purpose?
• Who is responsible for building site?
• Who will maintain the site?
…spell it out up front.
Technical Expertise
• Building a web site takes multiple skills:
–Writing and proofreading
–Photography and image editing
– Layout and design
–Web page editing and uploading
• Cover as many as possible
Designing an Effective Website
• What makes an effective website…?
Designing an Effective Website
• Up-to-date and accurate
• Appealing to target audience
• Immediately provide frequently requested info: phone, address, brief summary
• Navigation is clear and intuitive
• Provides “news” of some kind
Under the Hood of Effective Websites
• All links work
• Owner maintains full control of site
• Files are well organized
• Adding content is quick and orderly
• Design is as simple as possible
Effective Website Design
• Let’s look at a simple website design…my first site
Banner image from Photoshop
Horizontal list for navigation
Table with two columns formatting
Font size and paragraph structure helps formatting
Logos with links at the bottom
Top parts stay the same
Content is single-column, and variable
Bottom parts stay the same
Effective Website Design
• Let’s look at common elements in website design…
Banner Title
Large, descriptive picture, AKA “hero”
Horizontal navigation bar
Two column content section
Brief description
Name, address, phone, e-mail at bottom
Quick Look at How Sites are Made
Not quite as messy as making sausage…
• This brief peek might help you decide if you want to attempt a site in-house
Vocabulary
HTML
• The “computer language” with which websites are written
• Mandatory*
• Dreamweaver will write it for you, BUT…
• Very helpful to learn the basics
• Show Dreamweaver example…
Vocabulary
FTP
• “File Transfer Protocol”
• Mandatory
• You create files, then use FTP to send to host
• Dreamweaver has built-in FTP
• Free FTP programs available
• Show Dreamweaver example…
Vocabulary
CSS
• “Cascading Style Sheets”
• Optional
• Consists of formatting definitions
• You can probably figure it out
• Show Dreamweaver example…
Vocabulary
Flash
• A form of animation used on websites
• Optional
• Often used for slideshows or fancy front pages
• iPhones can’t see it
• You probably can’t edit it
Preparing Content
• Well-prepared content makes updating easy!
• Text can be written in Word, and be very
simple in formatting (bold, italics, size)
• Insert links in Word, or use [brackets]
• Images should be re-sized to fit their destination (bad example)
• Use a new Word doc for each page
Other Quick Tips
• Use text (not images of text) when possible.
– This page has images in left navigation bar
– This page has images across top, text on left
• Add a Google Map
– Link on how to add a Google Map
• Add a Google Calendar
– Link on how to add a Google Calendar
Optional: Google Analytics
• Free service from Google.
• Provides data on
– Number of site visits
– Country of origin
– What pages they look at
– How long they visit
A Peek at Google Analytics
Additional Resources
• Google Maps: http://www.askdavetaylor.com/how_to_embed_google_map_on_web_page.html
• Google Docs:http://www.googletutor.com/how-to-publish-google-docs-to-your-website/
• Google Calendar: https://eralokpandey.wordpress.com/2010/06/26/add-google-calendar-on-website/
• Weather Underground:http://www.wunderground.com/about/faq/weathersticker.asp
• GIMP (open-source alternative to Photoshop): http://www.gimp.org/
• FastStone image viewer (photo software): http://www.faststone.org/FSViewerDetail.htm
Building a Website
You need:
• Clear goals and organizational backing
• Money for domain name & host (recurring)
• A “design-eye” person
• A “computer” person, plus software
• Some great text and pictures
• Time, mostly to organize your information
Cayce Dalton, FB EnvironmentalJune 23, 2012Congress of Lake Associations Conference
www.fbenvironmental.com
Questions?
