Design and implementation: David Hollis Morgan
Graphics and photography: Kate Morgan
Content: Reva Nelson
Webmaster: David Hollis Morgan
Colours
Shades of teal, turquoise and slate gray with cornsilk background and crimson accents.
LIGHT TEAL
DARK TEAL
GRAY
LIGHT CORNSILK
CRIMSON
Typography
Two slightly curvaceous but readable sans serif fonts are used throughout. It is generally agreed sans serif fonts are easier to read on computer screens. While many are a bit boring, we tried to strike a balance. The two fonts are similar in shape but Montserrat used for headings has greater kerning than Raleway used for body text.
“Montserrat” for Titles and Headings aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ
“Raleway” for body text including bold and italics. aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ
aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ
aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ
Accessibility
Text is high contrast and relatively large providing legibility for all ages on all devices. All pages use semantic HTML, i.e. heading levels are properly nested, lists are coded as lists, images that relate to content have alternative descriptive text. For those using screen readers, there is a skip menu link at the top of every page (invisible except to a screen reader).
A big part of accessibility is mobile usage. This site uses a mobile first approach, a responsive design and several breakpoints to enable a seamless user experience regardless of the device used or its screen resolution. Particular attention was paid to forms. Form labels are above fields with both wrapped in <label> tags for a seamless mobile/touch experience on even the smallest screens. Yes, I’m talking about your old iPhone 4!