Comparing IDEAS-Classic

[bernhold]

Comparing https://ideas-productivity.github.io/activities/ideas-classic/ and http://ideas-productivity.org/ideas-classic/

• [x] media-heroimg.html crops image rather than scaling
• [x] hyperlinks do not stand out enough. Need heavier underline, at least
• [x] media-img2x.html crops images rather than scaling
• [x] media-img.html crops image rather than scaling
• [x] teasers-4x_img.html crops images rather than scaling

Comparing https://ideas-productivity.github.io/activities/ideas-classic/use-cases and http://ideas-productivity.org/ideas-classic/use-cases/

• [ ] We have no control over the size or positioning of images on the page
• [x] media includes crop image rather than scaling

Comparing https://ideas-productivity.github.io/activities/ideas-classic/xsdk and http://ideas-productivity.org/ideas-classic/xsdk/

• [ ] We have no control over the size or positioning of images on the page (wrapping, etc.)
• [x] hyperlinks do not stand out enough. Need heavier underline, at least

Comparing https://ideas-productivity.github.io/activities/ideas-classic/methodologies and http://ideas-productivity.org/ideas-classic/how-to/

• [ ] We have no control over the size or positioning of images on the page

Comparing https://ideas-productivity.github.io/activities/ideas-classic/outreach and http://ideas-productivity.org/ideas-classic/outreach/

• [x] hyperlinks do not stand out enough. Need heavier underline, at least

Comparing https://ideas-productivity.github.io/activities/ideas-classic/team and http://ideas-productivity.org/ideas-classic/team/

• [x] media includes crop image rather than scaling
• [x] hyperlinks do not stand out enough. Need heavier underline, at least
• [ ] teasers-4x_img.html font sizes for group-title and group-blurb seem wrong. Seems like blurb should be no larger than title.
• [ ] teasers-4x_img.html 1-2 line blurbs on items result in a lot of whitespace on the card
• [x] teasers-4x_img.html Do we want to be able to center item titles and blurbs?
• [ ] teasers-4x_img.html hovering results in card turning green and text graying. The contrast is reduced, making it harder to read. Should we do something to boost contrast?
• [ ] teasers-4x_img.html followed by h2 (bottom of page) indentation looks odd. This is because teasers-4x_img.html overhangs the textwidth
• [ ] teasers-4x_img.html group-title is not sized or styled consistently with any of the main heading levels

[bernhold]

Comparing https://ideas-productivity.github.io/activities/ideas-classic/team and http://ideas-productivity.org/ideas-classic/team/

• [x] teasers-4x_img.html If we don't provide links, then clicking on a card should not take you anywhere. Maybe shouldn't change on hover either.

• [x] teasers-4x_img.html width looks strange when used in this context. Maybe this is not the intended use of a teaser? Maybe we need a different element?

• [ ] IMPORTANT: top nav bar doesn't seem to respond well to changes in width. As page narrows, nav items disappear. No horizontal scroll bar appears. This happens in both Chrome on Windows and Safari on Mac.

• [x] Page blurb text should be smaller font

• [x] Page h1 and h2 text seems overly large (and/or many headings are too long)

• [x] We need to be systematic in use of heading levels. Sometimes start with h1, sometimes h2. Sometimes doing h1 then h3, skipping h2.

• [ ] Could we have a way to use small icons/glyphs? Need to find examples of what we want here.

[sbxchicago]

Taken care of the following: media-heroimg.html crops image rather than scaling hyperlinks do not stand out enough. Need heavier underline, at least media-img2x.html crops images rather than scaling media-img.html crops image rather than scaling teasers-4x_img.html crops images rather than scaling Page blurb text should be smaller font Page h1 and h2 text seems overly large (and/or many headings are too long) We need to be systematic in use of heading levels. Sometimes start with h1, sometimes h2. Sometimes doing h1 then h3, skipping h2.

[sbxchicago]

Added the include media-smimg for smaller inline images

[sbxchicago]

Added an include 'list-4x' for grid-like lists without links, like on the team page.

Also, I updated the image scaling/cropping system. Containing all images within a bounding box wasn't working for all images. I've kept 'cover' as the default where the image scales to fit the bounding area and crops the overflow. For items, like logos or charts, where this doesn't work I've included the optional parameter 'contain'. If contain is true the image will be fit so that there is no cropping.

[sbxchicago]

I've added a icons to the contact links in the footer. I included an icon font as well with a handful of common/conventional icons.

[bernhold]

I've added a icons to the contact links in the footer. I included an icon font as well with a handful of common/conventional icons.

@sbxchicago is there some easy way we can see what's available? Maybe on the kitchen sink page, or a link to a display of the icons elsewhere?

[bernhold]

We observed that on https://ideas-productivity.github.io/activities/ideas-classic/team

teasers-4x_img.html followed by h2 (bottom of page) indentation looks odd. This is because teasers-4x_img.html overhangs the textwidth

(subsequently changed to list-4x_img.html)

The sbxchicago solution for this particular situation was to use another (set of) list-4x_img for the list of project alumni. This certainly addresses the width issue, though I am not yet convinced I like this solution.

[bernhold]

This has been overtaken by events. Closing.