

Use Google+ to Improve Your UI - blakeperdue
http://pixify.com/blog/use-google-plus-to-improve-your-ui/

======
bretthopper
One interesting difference: Google just uses <div> for their buttons instead
of <a> tags or even <button>. They also don't set cursor: pointer (the hand)
for them.

Any UI people want to comment on the best practice for cursor styles? I always
figured pointer should be used for all buttons or links that have an action
attached.

~~~
flyosity
This is absolutely terrible for accessibility. Screen readers will not handle
these buttons properly leading to a significantly more difficult experience.
James Edwards actually talked about this at The Highland Fling conference a
few weeks back.

~~~
blakeperdue
Good point on accessibility. Anyone have links to making your UI accessible
(including buttons)?

~~~
mdwrigh2
Here's a pretty good introduction on ARIA which is what Google uses to make
their web sites accessible: <http://msdn.microsoft.com/en-
us/scriptjunkie/ff743762>

------
JoshTriplett
These look good to me (apart from the previously mentioned issue of not
actually using <a> tags or similar), but where's the license on these? Neither
the site nor the download includes any license information.

------
shawncplus
almost identical to the particletree buttons from almost 4(!) years ago
[http://particletree.com/features/rediscovering-the-button-
el...](http://particletree.com/features/rediscovering-the-button-element/)

~~~
scooter53080
I like the buttons described there. They were also rolled into blueprint css
as the 'buttons' plugin.

[https://github.com/joshuaclayton/blueprint-
css/tree/master/b...](https://github.com/joshuaclayton/blueprint-
css/tree/master/blueprint/plugins/buttons)

------
netmau5
Well done. Backpacking an existing fad to get visibility from early adopters
on your project. Case study in excellent blog-marketing.

Thanks for the buttons too~

------
yellowbkpk
No, no, no! Please don't let GMail and G+'s new look become a new fad. The
white space around every element is very wasteful and obnoxious. Not everyone
has huge resolutions and those that do don't appreciate having to scroll
several times just to see past the first 4 or 5 entries in a list view.

~~~
Groxx
I like the "flatter" UI design overall, but I agree on the whitespace.
Especially in Gmail. I wouldn't mind a flatter phase going through The
Internets, as I think it's less distracting, but I entirely agree. Less
wasteful display of data, please.

I would be interested in any info people may have as to whether such a large
amount of whitespace does or does not improve user's understanding/use of
sites. I like dense displays, but I'm also willing to learn how to use more
powerful tools, as I value the efficiency.

~~~
samdelagarza
Yes the extra whitespace in gmail is good. Just read TuFte's book on ink-to-
information ratio. Good stuff

------
gizmo
It looks pretty nice but the use of background gradients is inconsistent. The
buttons with a background image have no gradient but the other buttons do.

~~~
blakeperdue
Nice catch. Know of an easy workaround to this?

~~~
bretthopper
You can use multiple backgrounds in CSS3:
[http://snook.ca/archives/html_and_css/multiple-bg-css-
gradie...](http://snook.ca/archives/html_and_css/multiple-bg-css-gradients)

Lots of details here and some catches to look out for (mostly browser
support).

~~~
alanh
Warning: Multiple backgrounds can lead to LOTS of waste in the CSS (defining
gradients over and over) if you aren’t using sprites for those icons (and
setting all of them at once).

------
r00fus
Is it me, or does this theme look similar to jQueryUI?

~~~
solarlion
Reminded me of the aristo theme which I quite like
<https://github.com/banzor/Aristo-jQuery-UI-Theme>

~~~
taitems
C'mon, at least link back to the original ;)

<https://github.com/taitems/Aristo-jQuery-UI-Theme>

------
taitems
For the love of god people, please stop using the Silk icon set. It's had a
good run and it's time to retire it.

------
ajessup
Just wanted to say thanks for providing this - it's already been helpful

