Design Fix Requests - DAI Instance - First Pass

[phoebefrance]

These are suggestions for the max size (fixes for responsive layouts not fully assessed).

Body
• Max width for sections below header = 950px (currently about 1150). Ok for map to super size for big monitors.
• Edge of map should bleed to edge of page, and OC logo and Search edges should respond and resize by moving with the map edge

Header
• OC logo needs to be bigger in proportion to search. Change both Open Context doors vertical height and search box heights to 28px. By my measurement, OC doors are currently 22px tall and search is currently 34 px tall on live DAI instance.
• Also note: I made a new @dai logo where griffin is slightly bigger and looks more proportionate to the OC logo. See OC@dainst_griffin+.svg in Logos folder.

Hero
• Map design was taller in sketchapp comp. Original design may be too big for smaller screens? Pease send me a screenshot of what you see on your new laptop and I’ll figure out what will look good.
• Map scrolling functionality needs to be turned off on homepage so users don’t scroll the map size when they try to scroll down the page
• “Because data... “ should be closer to “Publishing research…” and also gray to appear as a unit (distinct from DAI thanks). “We thank DAI…” should center with their logo to appear as a unit (distinct from OC tag lines). Maybe I should just talk to Chris about getting his DAI setup so I can tweak small spacing issues like this myself…on my todo list

Publish / Explore
• List items text needs to be left aligned
• Small left-aligned icons should all be gray #6D6E71 Can make these if needed, just lemme know :)
• Some icons are too big. How are they being resized - via image attributes or via code on page?

How It Works
• Replace icons with those from the *New drive folder (also forwarded in email) that were sourced from vendor websites (see your email with requests of which ones were missing). I’ve added official versions of the Open Data lock (rounded instead of square lock box), and DOI has the R for copyright (as per my interpretation of their copyright specifications on their homepage).

Why Open Context
• Responsive horizontal boxes should max out at 950px x 400px tall squares (see Sketch). Right now they’re getting to big.
• Text margins and spacing should look like the vertical OC SAA banner at all sizes (currently the space below the paragraph text resizes to be too big)
• Paragraph text should be left-aligned

Pricing
• Text looks too small in pricing headers: Small Project, Med, etc. Please change to 18px.
• There is currently too much space between lines of text in bottom 1/2 of boxes - should be single spaced (refer to homepage comp or postcard back)
• Box outlines too long (boxes extend well beyond the text they surround). Max box extension should only be about 28 px from bottom of longest text (see spacing under list for 5 year project details)

Footer
• Black footer with quicklinks missing. Becoming a Phase 2 to do? Such as once the rest of the site rebuild/ redesign is live and there is something to link to? Choosing links could also be based on user feedback.
• Current Funder footer design does not have all funder logos. See SAA vertical banner and Logos folder for complete set.
• Add funder tag line from SAA OC Vertical Banner above icons (to create footer space without gray box or black footer)
• New white footer not updated on subpages - background still gray, complete set of funder logos also missing here
• “OC Pub Service Maintained…” black bar at the very bottom should full bleed - edges currently chopped off; Add 5-6px of space on top and bottom of text; add 2px gray border to the top; make text gray to match About and Explore in the header; make links hover white and not dark blue (can’t see on black background).

[ekansa]

Excellent! I won't be able to get to this until sometime next week, but
these are really helpful.

On Wed, Apr 22, 2015 at 4:10 PM, phoebefrance [email protected]
wrote:

These are suggestions for the max size (fixes for responsive layouts
not fully assessed).

Body
• Max width for sections below header = 950px (currently about 1150). Ok
for map to super size for big monitors.
• Edge of map should bleed to edge of page, and OC logo and Search edges
should respond and resize by moving with the map edge

Header
• OC logo needs to be bigger in proportion to search. Change both Open
Context doors vertical height and search box heights to 28px. By my
measurement, OC doors are currently 22px tall and search is currently 34 px
tall on live DAI instance.

• Also note: I made a new @dai https://github.com/DAI logo where
griffin is slightly bigger and looks more proportionate to the OC logo. See
OC@dainst_griffin+.svg in Logos folder.

Hero
• Map design was taller in sketchapp comp. Original design may be too big
for smaller screens? Pease send me a screenshot of what you see on your new
laptop and I’ll figure out what will look good.
• Map scrolling functionality needs to be turned off on homepage so users
don’t scroll the map size when they try to scroll down the page
• “Because data... “ should be closer to “Publishing research…” and also
gray to appear as a unit (distinct from DAI thanks). “We thank DAI…” should
center with their logo to appear as a unit (distinct from OC tag lines).
Maybe I should just talk to Chris about getting his DAI setup so I can
tweak small spacing issues like this myself…on my todo list

Publish / Explore
• List items text needs to be left aligned
• Small left-aligned icons should all be gray #6D6E71 Can make these if
needed, just lemme know :)
• Some icons are too big. How are they being resized - via image
attributes or via code on page?

How It Works
• Replace icons with those from the *New drive folder (also forwarded in
email) that were sourced from vendor websites (see your email with requests
of which ones were missing). I’ve added official versions of the Open Data
lock (rounded instead of square lock box), and DOI has the R for copyright
(as per my interpretation of their copyright specifications on their
homepage).

Why Open Context
• Responsive horizontal boxes should max out at 950px x 400px tall squares
(see Sketch). Right now they’re getting to big.
• Text margins and spacing should look like the vertical OC SAA banner at
all sizes (currently the space below the paragraph text resizes to be too
big)
• Paragraph text should be left-aligned

Pricing
• Text looks too small in pricing headers: Small Project, Med, etc. Please
change to 18px.
• There is currently too much space between lines of text in bottom 1/2 of
boxes - should be single spaced (refer to homepage comp or postcard back)
• Box outlines too long (boxes extend well beyond the text they surround).
Max box extension should only be about 28 px from bottom of longest text
(see spacing under list for 5 year project details)

Footer
• Black footer with quicklinks missing. Becoming a Phase 2 to do? Such as
once the rest of the site rebuild/ redesign is live and there is something
to link to? Choosing links could also be based on user feedback.
• Current Funder footer design does not have all funder logos. See SAA
vertical banner and Logos folder for complete set.
• Add funder tag line from SAA OC Vertical Banner above icons (to create
footer space without gray box or black footer)
• New white footer not updated on subpages - background still gray,
complete set of funder logos also missing here
• “OC Pub Service Maintained…” black bar at the very bottom should full
bleed - edges currently chopped off; Add 5-6px of space on top and bottom
of text; add 2px gray border to the top; make text gray to match About and
Explore in the header; make links hover white and not dark blue (can’t see
on black background).

—
Reply to this email directly or view it on GitHub
#141.