philli-m
commented
5 years ago @rittermo thanks for the feedback, this is covering a lot for one issue though, if it could be broken up a bit in future that would be great, I have started going through things so far and may add more question but for now:
- h1 at 1.25 will equal around 35 chars per line which is not recommended, in our meeting I wrote that we decided on 20 per line but current size actually is closer to 18, I would maybe go for around 25 so 1.5rem would that be acceptable?
- buttons, we need a minimum clickable area a11y guidelines suggest 44*44, 1 rem would take it slightly below this suggested height, what is your priority here?
- serif we use only on h1 and h2's as discussed would you prefer it to only be applied to h2 or to extend it to h3s? we can also change the h3 to 2s but i'm not sure it makes sense, I need to look at the structure of the page
Sorry that's quite a bit of stuff!
rittermo
I’ve tested the current version on my iPhone and on the Safari simulator for iPhone 8 (414px width/ 375px width). Here are the issues I’ve found for fonts. There will be a separate issue for margins + scaling in general.
The logo is too small on mobile and the h1 should be smaller (1.25 rem), so that it can be read more easily. Accordingly, I would set h2 to the same size as h1 (1.25) or smaller (1 rem).
The organisation name should have more margin/space below (1rem) and it should be fat – that would also improve the logos position. The org logo is too small compared to the name. Can we reduce the padding inside the white frame, so that the actual logo image scales bigger?
The font size for the item titles is too high. It should be 1.25rem(I think that should be the max font size we use for screens smaller than 600px width). The line-height for headlines is a little high. It should be 1.1 instead of 1.2. The font size for labels is too high on small screens. It should be 0.75rem max here, so that the labels fit better and do not overshadow the headline.
The font size for buttons and dropdowns on small screens is too high. It should be 1rem. Also the placing is problematic. Until we come up with a better solution, the sorting should have a margin-top from the filter buttons to differentiate the two groups. The sorting also should be left-aligned on small screens, were the filters and sorting can’t be displayed in the same row.
A more general font thing: We use a serif font for projects in the dashboard and a sans-serif for the project list on the organisation landing page. We should use the font/headline style of the organisation landing page in the dashboard too.