1 / 32

Designing a Website for Your Target Audience

Learn how to design a website that appeals to your target audience and attracts new and younger members. Understand their habits and interests to create an engaging website.

francesgarrett
Download Presentation

Designing a Website for Your Target Audience

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Traversing the Internet with a Gnarly Club Website and Utilizing the District and International Websites to Navigate the SurfLeslie JohnsonLeslie.johnson2@roadrunner.com(714)686-1934

  2. Design for Your Target Audience • Design your website or page to appeal to your target audience • Intended audience should be specific: college students, young couples, young professionals, retirees or seniors • The purpose and goals of your visitors will vary – seeking places to volunteer, want to help in their community, casually seeking information, etc. • Design of a website or page should appeal to and meet the needs of your target audience.

  3. Attracting New and Younger Members • Understand your target audience for potential members and supporters. • Where do these potential members “hang out” and what time of day do they surf the internet. • Start out with your own club – do a quick survey to find out their habits. • What would attract them to join the club • The kinds of service or events that interest them • What would attract them to a website (keywords)

  4. Notice how these two different websites look and feel so different

  5. Different Look

  6. Consider your Target Audience • The first site engages you, draws you in and invites exploration. • The second site provides you with text-based information so you can quickly get down to work. • The layout, navigation and use of color and test can work together to appeal to your target audience.

  7. Hierarchical Organization • Most websites are hierarchical organizations • Characterized by a clearly defined home page with links to major site sections • Web pages within sections are placed as needed • Home page and the first level page indicate hyperlinks on the main navigation bar of each webpage

  8. Hierarchical Site Organization

  9. HTML Overview • HTML (Hypertext Markup Language) is the set of markup symbols or codes placed in a file that is intended for display on a web page. • Their markup symbols and codes identify structural elements such as paragraphs, headings and lists. • HTML can also be used to place media (graphics, video and audio) on a webpage • HTML permits the platform-independent display of information across a network • Any browser running on any operating system can display a HTML page

  10. FAQ • No special software is needed to create a web page document • Need to test web pages in most popular browsers: Mozilla Firefox, Apple Safari and Google Chrome • http://www.mozilla.org/mozilla/firefox • http://www.google.com/chrome • Text Editor is needed • TextEdit – Mac OS X operating system • Notepad++ for Windows

  11. Web Page Template • HTML markup language tells browsers how to display information on a web page • Every web page you create include the DTD and the html, head, title, meta and body elements • Coding style uses lowercase letters and places quotes around attribute values...

  12. Web Page Template • Many Templates are available for free on the Internet • Give the company a shout out on your page • District Website uses a template from www.w3layouts.com • International Website uses a template the template: Nonprofit Website by Giving Press

  13. Example Webpage • <!DOCTYPE html> • <html lang="en"> • <head> • <title>Page Title Goes Here</title> • <meta charset="utf-8"> • </head> • <body> • ... body text and more HTML tags go here ... • </body> • </html>

  14. Value attribute is an ordered list: • <ol>  <li value="100">Coffee</li>  <li>Tea</li>  <li>Milk</li>  <li>Water</li>  <li>Juice</li>  <li>Beer</li></ol>

  15. Your First Web Page • Create a Folder under your desktop • Helps you organize your work • Websites are organized on servers with folders • Store HTML code in top folder and use directories for pictures, newsletters, resources, officers, etc.

  16. Your First Web Page

  17. Breaking Down the Webpage • First line contains the DOCTYPE • HTML code begins with an opening <html> and ends with </html> tag • The purpose of these tags indicates the content between them makes up a web page. • The head section is delimited by <head> and </head> tags and contains a pair of title tags “MY First HTML5 Web Page” in between along with a <meta> tag to indicate the character encoding (utf-8 means an format 8 bits that contain any unicode character (letters, numbers

  18. Body Section • Body Section is delimited by <body> and </body> tags • The words “Hello World” are typed on a line between the body. • This is the source code for a web page document

  19. Save Your File • Save your file with the name index.html. A common file name for the home page of a website • Index.html or index.htm are accepted extensions • When doing “save as” for the type save as All Files (*.*) not as Text Document (*.txt)

  20. Test Your Page • Launch File Explorer or Finder (Mac) • Navigate to your index.html file. • Double-click index.html • Your default browser will launch and display your page

  21. Hands-On Practice • Launch Notepad and type in this code: • <!DOCTYPE html> • <html lang="en"> • <head> • <title>Heading Example</title> • <meta charset="utf-8"> • </head> • <body> • <h1>Heading Level 1</h1> • <h2>Heading Level 2</h2> • <h3>Heading Level 3</h3> • <h4>Heading Level 4</h4> • <h5>Heading Level 5</h5> • <h6>Heading Level 6</h6> • </body> • </html>

  22. Save and Launch • Save it as heading.html on your hard drive and double click to launch

  23. Accessibility and Headings • Heading tags can make your pages more accessible and usable. • To indicate areas within a page hierarchically, code heading tags numerically (h1, h2, h3, etc) • Include page content in block display elements such as paragraphs and lists.

  24. Heading Tags Outline this Page

  25. Paragraph Element • Example Paragraph Section • <!DOCTYPE html> • <html lang="en"> • <head> • <title>Paragraph Example</title> • <meta charset="utf-8"> • </head> • <body> • <h1>Heading Level 1</h1> • <p>This is a sample paragraph. Heading tags can help to make your pages more accessible and usable. It is good coding practice to use heading tags to outline the structure of your web page content. • </p> • <h2>Heading Level 2</h2> • <h3>Heading Level 3</h3> • <h4>Heading Level 4</h4> • <h5>Heading Level 5</h5> • <h6>Heading Level 6</h6> • </body> • </html>

  26. Paragraph Example – Save and Test • Save it on your hard drive as paragraph.html • Double click to launch it

  27. How to Modify Club Web Page Template • Look at Club Web Page for West Valley Handout. • Let’s match the code to what we see on the website

  28. District Conference Hashtags • #Altrusa • #DistElevenConf2019 • #SurfIntoService • #Volunteer • #Volunteer is a very popular hashtag which could attract interested users to our posts • #Altrusa – attracts other members • #DistElevenConf2019 – attract our club members to see what is going on

  29. Just Do It • Don’t be intimidated • Make a Plan • Get Started!!!! • Organize your pictures and content • Reach out for club page template code • Save it and try displaying it in browser • Change pictures and text • Save it • Will work together to get it out on District Website

  30. Have Webmaster Build Your General Information Web Page • Suggestions of what to send: • List of Officers • Picture of Current Officers • Day, time and location of meetings • Club Welcome or Invitation • Pictures and captions • Introduction Video • Club pages belong to your club so whatever you want goes on your page

  31. Club News or Club Event Page(or all three) • Club News • Club Projects, Descriptions of Project, Pictures, captions • How to contact the Club • Club Events • Upcoming Events • Corresponding flyers • How to RSVP

  32. Collect Money Through Your Page • District Website uses www.regfox.com • Design the form and collect costs • Provide bank account info for direct deposit • They use webconnect on credit cards • Webconnect charges 0.99 per registration • Charges 2.99% for total credit card charge

More Related