[x] Relationship of "Tandem" to the "Logo" should be the same in all breakpoints.
[ ] Consider a small animation from logo to mobile menu tree are a wide variety over at jonshu
Homepage Section — .fp-section
[x] These should be article tags, maybe sections, but not divs
[ ] Hover states are not a11y - consider using the pink, and making sure the contrast is adequate, is there any sort of formalized secondary palette? If not, consider establishing one to ensure consistency / a11y.
[x] Consider using verbs in ctas "View our recent wordpress work" have it be part of your brand voice "Acquaint yourself with wordpress work we've done" maybe a bit long, but it should feel like reading dialogue, rather than a technical manual.
Big title, for people with big monitors, and imacs, lets go bold with some 96px titles (we can play with how dramatic we make it, but do look at the screenshot linked above. With a little tweaking, we can maybe have that work everywhere, or come up with a type scale that works.
Last bit of emphasized text, feels like it should maybe link to something, and that cue is reinforced on the homepage. Maybe just vertical space between it and the previous paragraph, but keeping the font-weight constant, may help alleviate this?
| See Screenshot » |
Custom Block Title — .custom-block-title
[x] Still set in Poppins, fix
letter-spacing: -0.0265em;
line-height: 1.265;
Work Grid — .work-grid
Same recommendations re: heading leading / letter spacing as everywhere else, beware a11y color combos and hover states.
margin-bottom: 1em;
(on logo) padding-right: 2em // instead of one but better logos from clients
Footer — #footer
Copyright line, use good ol sans-serif at smaller than 1rem? Right now it looks "designed" because Galaxie Copernicus is kinda nice, but then writing TANDEM in it, is kinda off-brand. Should be aligned to the baseline of the secondary nav, rather than vertically centered in this space. Remove bracket hover state (keep mikes unique creation)
[x] The nav is still set in poppins, also waaaay too tight. Finished product
Site Header — #header
Final copy should look like this.
Mobile Breakpoints
Homepage Section — .fp-section
consider getting rid of the HR's they are nice, but they are not "minimal essentialism"
Hero CTA — .hero-type
Homepage Intro — .fp-section:first-oftype
This is what is should look like.
[x] “Better together” headline (also applies to: .content-wrapper-tandem .content-wrapper-about .custom-block.important p.custom-block-title)
[ ] The heading of this section, should use a heading tag with embedded spans
[ ] I'm not personally a fan of centered type, but working out a centeredish align left maybe more trouble than it’s worth.
[x] No periods at the end of sentence fragments.
[x] Maybe shrink the galaxy copernicus type
Page Title — .section-header-left h1
Section Header — .section-header
Big title, for people with big monitors, and imacs, lets go bold with some 96px titles (we can play with how dramatic we make it, but do look at the screenshot linked above. With a little tweaking, we can maybe have that work everywhere, or come up with a type scale that works. Last bit of emphasized text, feels like it should maybe link to something, and that cue is reinforced on the homepage. Maybe just vertical space between it and the previous paragraph, but keeping the font-weight constant, may help alleviate this? | See Screenshot » |
Custom Block Title — .custom-block-title
Work Grid — .work-grid
Same recommendations re: heading leading / letter spacing as everywhere else, beware a11y color combos and hover states.
Footer — #footer
Copyright line, use good ol sans-serif at smaller than 1rem? Right now it looks "designed" because Galaxie Copernicus is kinda nice, but then writing TANDEM in it, is kinda off-brand. Should be aligned to the baseline of the secondary nav, rather than vertically centered in this space. Remove bracket hover state (keep mikes unique creation)