FE: State-specific design customizations

[mcchilders]

Goal: Add some lightweight visual customization options to the site design, so that each state can easily make the site look like "theirs" without requiring any developer interventions.

Background: Most templated election tools that are used across multiple states offer some light customization options for look & feel of the site, so that the design can be made to blend easily with the state's existing website. This can include things like background images, header images, and custom colors that can be matched to an existing palette. (In general this does not tend to include layout changes, since those are more fundamental to the site's design.)

Ideas for how this might look (just ideas, open to changes!): https://balsamiq.cloud/sacw0cz/p3agmkl

Deliverable: Visuals of the state-level homepage design with a couple of different header images/color combos, to illustrate how the customizations would function.

Requirements: A design that can support at minimum:

• a custom header image (space for at least a logo/seal, or an entire header image) that the state admin user can upload as an image file
• a couple (2 or 3 max) custom colors, likely a background color and highlight color, that the state admin user can set as

Assumptions:

• Whatever images/colors are set at the state level are inherited on all pages for that client (e.g. both state-level homepage and any jurisdiction-specific sub-pages)
• Images/colors are set as part of the admin setup of the site (e.g. no need for pretty placeholder/default states - the state will have to create these before the site is ready for usage.

Data inputs:

• image in whatever format we specify (supporting any of JPEG/GIF/PNG would be ideal, but happy to specify if there's a preference), at whatever size we specify (in pixels)
• Hex color codes for the custom colors

Open questions:

• Do we need a separate size image for desktop/mobile versions, so that scaling doesn't become an issue, or can we just let people know that - if using a full header image - the right edge will get cut off in mobile?)

[beausmith]

Addressing open question: Do we need a separate size image for desktop/mobile versions, so that scaling doesn't become an issue, or can we just let people know that - if using a full header image - the right edge will get cut off in mobile?)

Who is the intended audience(s) and what device(s) will they use to view this site? For many people their only computer is their smartphone. I'd guess that most visitors will be using mobile screens.

If a mobile site is most desirable, then there will need to be an upload of multiple assets for different screen sizes, or potentially SVG assets which will scale to all screens.

Design customizations might be something which we want to keep in mind, but that we leave flexible until later in the project.

[mcchilders]

Basic customization options are an important feature and impact things like layout, so I'd like to have a first pass to get feedback on it in this initial design - of course that can change an evolve over time, but we are going to need some version of it even in the initial versions of the front end, too, so we can't really put it off.

The site needs to be fully responsive - I'd say you're probably looking at 60/40 mobile/desktop usage. It's definitely not as skewed towards mobile as some of the rest of the web, partly just because voters skew older than the general pop.

On Mon, Aug 2, 2021 at 6:32 PM Beau Smith @.***> wrote:

Addressing open question: Do we need a separate size image for desktop/mobile versions, so that scaling doesn't become an issue, or can we just let people know that - if using a full header image - the right edge will get cut off in mobile?)

Who is the intended audience(s) and what device(s) will they use to view this site? For many people their only computer is their smartphone. I'd guess that most visitors will be using mobile screens.

If a mobile site is most desirable, then there will need to be an upload of multiple assets for different screen sizes, or potentially SVG assets which will scale to all screens.

Design customizations might be something which we want to keep in mind, but that we leave flexible until later in the project.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/votingworks/election-results-reporting/issues/6#issuecomment-891377560, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL6NEJFL6LFAXR6SQE5H4VDT24MGVANCNFSM5BNS5NVA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

-- Monica Childers Product Manager, VotingWorks (316) 680-3789 @.***

[beausmith]

A data point: This is from 5 years ago, I'd bet smartphone and tablet usage among Americans 50+ has certainly increased since them. Full PDF