[Patternfly] FYI - Latest API Management UI

Sarahjane Clark sclark at redhat.com
Wed Mar 26 14:37:40 UTC 2014


For what it's worth, one of the first tweets that came up about Patternfly was about the type size being too small.

https://twitter.com/envygeeks/status/435548547396538368






----- Original Message -----
From: "Gabriel Cardoso" <gcardoso at redhat.com>
To: "Liz Clayton" <lclayton at redhat.com>
Cc: patternfly at redhat.com
Sent: Wednesday, March 26, 2014 9:57:26 AM
Subject: Re: [Patternfly] FYI - Latest API Management UI

+1 

I also find 11px too small, we are using 13px in LiveOak, 12px as a smaller size. 

Gabriel 

On Mar 25, 2014, at 4:28 PM, Liz Clayton < lclayton at redhat.com > wrote: 




Hi, 

----- Original Message ----- 


From: "Emily Dirsh" < edirsh at redhat.com > 
To: patternfly at redhat.com 
Sent: Tuesday, March 25, 2014 2:36:03 PM 
Subject: Re: [Patternfly] FYI - Latest API Management UI 

+1 

+1 



While there are differences in resolution/system rendering/context/etc, 11px 
is a very small default body text. (Much smaller than _11pt_.) 

I don't have examples, but here are some interesting articles on the topic: 

- in case you are worried that 12 is too big: 
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/ 

- general accessibility info: 
https://www.webaccessibility.com/best_practices.php?best_practice_id=1822 
http://accessibility.psu.edu/fontsizehtml 
http://www.w3.org/TR/2008/REC-WCAG20-20081211/#guidelines 

-Liz C. 





Just some real-world examples - OpenShift console body text defaults to 14px, 
the Patternfly site has 13px body text, the default Bootstrap body text size 
is 14px. 

----- Original Message ----- 


From: "Jeremy Perry" < jeperry at redhat.com > 
To: "Matt Carrano" < mcarrano at redhat.com > 
Cc: patternfly at redhat.com , "Catherine Robson" < crobson at redhat.com > 
Sent: Tuesday, March 25, 2014 1:53:10 PM 
Subject: Re: [Patternfly] FYI - Latest API Management UI 

I know I’m coming out of nowhere with this, but I think looking seriously 
at 
12px as a default is worth exploration. Aside from increased legibility, 
the 
number 12 has many benefits for creating a typographic rhythm on line 
heights like 1.25, 1.5 etc. 


On Mar 25, 2014, at 12:08 PM, Matt Carrano < mcarrano at redhat.com > wrote: 



Catherine/Eric, 

Thanks for passing along the feedback. It is great to see these screens 
and to know that Overload is now using PatternFly styling. Also, good 
tip 
about the Rawgithub tool. I can see where this can be a really helpful 
thing. 

Regarding the font sizing, I can see what you mean about the 11pt text. 
This is a tricky issue because I find that readability depends a lot on 
monitor resolution and context. There's probably not one right answer 
for 
all cases, and this also varies a lot from person to person. That said, 
it's something for us to keep in mind and I appreciate getting the 
feedback. I'm copying in the PF list as others may also have thoughts 
who 
are more knowledgeable in this area than I. 

-Matt 

----- Original Message ----- 
From: "Catherine Robson" < crobson at redhat.com > 
To: "Matt Carrano" < mcarrano at redhat.com > 
Cc: "Eric Wittmann" < eric.wittmann at redhat.com > 
Sent: Tuesday, March 25, 2014 11:08:02 AM 
Subject: Fwd: Re: FYI - Latest API Management UI 

Matt, 

Eric is using the PatternFly font recommendations, but we both felt the 
font was too small to read easily. He noted that it was 11px by default 
(and is what he currently has implemented), but 12px seems to be much 
easier to look at. You can click on the link he provided below to see 
his application (without the top header area at this point). 

Thought I would forward this to you for feedback on PatternFly. 

Thanks! 
Catherine 

-------- Original Message -------- 
Subject: Re: FYI - Latest API Management UI 
Date: Tue, 25 Mar 2014 11:04:26 -0400 
From: Eric Wittmann < eric.wittmann at redhat.com > 
To: Catherine Robson < crobson at redhat.com > 



Thanks for the feedback. 

Regarding font size - it's funny, I thought it was too small as well, 
but the font size is coming from PatternFly (I think) so I assumed that 
was the recommended size. I'll def. change it. 

I may book an hour with you - would love some functional feedback. 

-Eric 

On 3/25/2014 10:48 AM, Catherine Robson wrote: 




Eric Wittmann wrote: 


Just wanted to let you know that I have applied the PatternFly styles 
to my most recent project UI. I also discovered a web site called 
" rawgithub.com " which is amazing and allows me to view the UI 
templates as webpages directly from the github source! That's a super 
nerdy thing to be excited about, but I'm not ashamed. :P 
This is very cool! I hate having to check stuff out and figure out how 
to build it. 



In any case, it means you can view the UI here (if interested) without 
downloading or checking anything out: 

http://rawgithub.com/Governance/apiman/master/apiman-dt/apiman-dt-ui/apiman-dt-ui-war/src/main/java/org/overlord/apiman/dt/ui/client/local/site/user-orgs.html 


What you *won't* see is the header, which (like all overlord apps) 
gets added later via javascript. So it looks a little bare without 
that, but hopefully you'll get the idea. :) 

Also note that I tried to ensure that every page looks good in a 
browser but also in a phone - so that aspect of things should be 
working well. 
Looking great! 



Any feedback welcome. 

The only feedback I have is that font is a bit small. You might want to 
bump the body font size up to 12px instead of 11px. It makes it much 
easier to read I think, and doesn't seem to ruin the design in any way 
to me. 

Otherwise, from a design standpoint, I think this looks good. I have no 
idea what it is supposed to be or do from a functional standpoint, so I 
don't think I can comment on the usability or workflow really at this 
point. If you want to review this level of stuff, maybe book an hour 
with me and we can do a walkthrough of it together. 




-Eric 

_______________________________________________ 
Patternfly mailing list 
Patternfly at redhat.com 
https://www.redhat.com/mailman/listinfo/patternfly 


_______________________________________________ 
Patternfly mailing list 
Patternfly at redhat.com 
https://www.redhat.com/mailman/listinfo/patternfly 


_______________________________________________ 
Patternfly mailing list 
Patternfly at redhat.com 
https://www.redhat.com/mailman/listinfo/patternfly 


_______________________________________________ 
Patternfly mailing list 
Patternfly at redhat.com 
https://www.redhat.com/mailman/listinfo/patternfly 

--- 
Gabriel Cardoso 
User Experience Designer @ Red Hat 


_______________________________________________
Patternfly mailing list
Patternfly at redhat.com
https://www.redhat.com/mailman/listinfo/patternfly
-------------- next part --------------
A non-text attachment was scrubbed...
Name: patternfly_tweet.png
Type: image/png
Size: 30880 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20140326/f6e92dd7/attachment.png>


More information about the PatternFly mailing list