March 4, 2018 Web Team Meeting

From MCDP Tech Wiki
Jump to navigation Jump to search


Introduction

The Web Team met on Sunday, March 4, 2018, from 1-3 PM, to discuss front page design and menu organization.

Persons present

Mike Smith (Technology Officer), Brooke Hazard, Chris Greiveldinger, Marty Griffin, Leon Barrett, Stephenie Fredrick, George Yolland, Cynthia Yolland

Agenda

  • Menu Design We will consider different examples of menu design and mix-and-match what we like from each.
  • Front Page Design We will complete a first draft of the front page.

Page Examples

Brooke Hazard collected a number of URLs for consideration. These are:

  1. https://cadem.org/ - Link farm at bottom is an excellent nav tool. Icons for many columns. Carousel images.
  2. http://www.clarkcountydems.com/ - Landing page, but blah home page.
  3. https://sdcdp.ngpvanhost.com/ - Donate button in a bold, different color. PCP focus.
  4. http://www.washcodems.org/ - Important info scattered.
  5. https://nydems.org/ - Consistent banner, menu, and tabs on each page. Downside: long time for mobile uploads.
  6. https://nydems.org/counties/new-york/ - County page, example of what a subpage looks like on above site.
  7. http://www.floridadems.org/ - Top and bottom asks for volunteers and money. Tagline is front-and-center. Great logo example. Good use of images
  8. http://www.miamidadedems.org/

General page design

  • There shall be a static front page; static pages for each committee and house district; static pages for important information such as volunteer opportunities and contacts; and blog pages (by post category)
  • All pages will have:
    • A top banner with:
      • Logo (links to home)
      • Menu (see below)
      • Donate button with different color
    • Main content in a 12-column framework, preferably with each item having an icon and some copy.
    • A bottom section with a 6-column link farm similar to cadem.org
    • Footer: acknowledgements, copyright, contact us

The intention is that each committee, HD, work group, etc., can have a static page. If they want something more sophisticated, then we should have a separate application (e.g. Wordpress or Drupal or Wiki). We should link to it from the static page, and it should have the same look-and-feel.

(TODO: embed rough sketch of what this looks like)

Front page design

  • Front page shall have:
    • Same top banner as above
    • Big ask - VOLUNTEER - with an image or image carousel, tagline, and button or small form (email/zip/submit).
      • On submit, sends to a volunteer info collection page. This can be a Google Sheet or a VAN form.
      • On volunteer info collection page submit, sends to a static page full of "welcome to multdems" and "volunteer opportunities" info.
        • This should be available in multiple languages.
    • Followed by the most time-sensitive asks right now, in one-to-four column format, preferably with icons and copy, possibly with photos and copy.
    • Followed, possibly, by static asks
    • Followed by link farm
    • Footer: acknowledgements, copyright, contact us

Things to note:

  1. One of the downsides of the NYS Dems site was that the big banner photos took too long to load. We should address this by using media metas to load smaller images for mobile vs tablet vs monitor.
  2. We agreed that the focus of the front page should be on voters and not PCPs.
  3. No sidebar.
  4. There will be a question about where PCPs will find information about the next CC. The answer is that the next CC should be one of the time-sensitive items. People will need to scroll to find it. This is a trade-off for having more voter focus.

(TODO: embed rough sketch of what this looks like)

Menu Design

The menu - basically the top banner - shall have the following items:

  • Logo/Home
  • Voter Resources Drop-Down Menu - see current page
  • News (goes to news blog)
  • Events (goes to events blog)
  • Candidates (only when we have a list of candidates - otherwise absent)
  • Get Involved Drop-Down Menu - links to volunteer opportunities and volunteer sign-up
  • About Us Drop-Down Menu, with mission statement, bylaws, platform, resolutions, agendae, minutes, contacts, committees, etc.
  • Donate button in striking color

This shall be a proper menu that renders as a hamburger on mobile. The easiest way to do this is to just use a wordpress menu.

Icon resources

Leon and George shared the following links for CC-by icons:

Next Steps

All participants:

  • All of us to review these websites, and others, and think about look and feel elements, such as font and color scheme.

Next Meeting

The next Web team Meeting will be at the March 25, 2018 Tech Team Meeting.