Project

General

Profile

Actions

Feature #1867

closed

Homepage redesign join/login/tour space

Added by Matt Gold over 12 years ago. Updated over 12 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
WordPress (misc)
Target version:
Start date:
2012-04-27
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Hi Guys,

I'm wondering if we can do a very minor redeisgn on top right box on the homepage that shows the join/login/take a tour buttons. If we could decrease the size of those three buttons or somehow put them all on a single line, we could decrease the vertical size of the page, thus allowing for longer featured blog/group text that wouldn't push the rest of the content down the page. I think that this is a minor fix that we could make in the short term that would improve the look of the homepage. Please let me know what you think.


Files

Commons-Getting-Started.jpg (253 KB) Commons-Getting-Started.jpg Michael Smith, 2012-07-02 03:27 PM
2012-08-01_144823.png (473 KB) 2012-08-01_144823.png Raymond Hoh, 2012-08-01 05:51 PM
2012-08-01_153934.png (484 KB) 2012-08-01_153934.png Raymond Hoh, 2012-08-01 06:40 PM
Getting-Started-CAC-MBS.png (367 KB) Getting-Started-CAC-MBS.png Michael Smith, 2012-08-01 08:00 PM
2012-08-01_171700.png (504 KB) 2012-08-01_171700.png Raymond Hoh, 2012-08-01 08:24 PM
Gettign-Started3.png (480 KB) Gettign-Started3.png Michael Smith, 2012-08-01 10:19 PM
Getting-Started2.png (480 KB) Getting-Started2.png Michael Smith, 2012-08-01 10:19 PM
Getting-Started1.png (480 KB) Getting-Started1.png Michael Smith, 2012-08-01 10:19 PM
Getting-Started4.png (425 KB) Getting-Started4.png Michael Smith, 2012-08-01 10:44 PM
button-minimal-indent.png (349 KB) button-minimal-indent.png Raymond Hoh, 2012-08-02 02:28 PM
button-skip.png (486 KB) button-skip.png Raymond Hoh, 2012-08-02 02:28 PM
ie6-8_users.png (34.5 KB) ie6-8_users.png Raymond Hoh, 2012-08-03 01:03 PM
Actions #1

Updated by Boone Gorges over 12 years ago

Last call for this milestone. Chris, any chance you can create something by, say, the end of this week? I want to prepare for a 1.4 release.

Actions #2

Updated by Matt Gold over 12 years ago

I'd really love to see us do something with this -- Michael, Chris, it would be great to hear your thoughts. Many thanks.

Actions #3

Updated by Michael Smith over 12 years ago

I took a quick stab at it, but admittedly took a different perspective. I was inspired by Pinterest's prompt when a user isn't logged-in, which gives a quick description of the site. I thought it might make sense to have a single sentence that describes the Commons, so I took the first line from the Commons email, modified it, and added the Take a Tour as hyperlinked text:

"The CUNY Academic Commons is an academic social network created by and for CUNY – Take A Tour."

I also tried out "CREATE ACCOUNT" vs. "JOIN" which seems to be fairly common on many sites and changed the color of that button to create a contrast with the "LOGIN" button. I thought the color difference would allow the elimination of the word "or" between the two buttons.

I was picturing that once logged-in the user would not see the two buttons, but the statement would remain. These changes don't save any space as Chris was suggesting, so they might not be worthwhile presently. These happened to be ideas that made sense as I started tinkering.

- Michael

Actions #4

Updated by Matt Gold over 12 years ago

Thanks for this, Michael. I like the pinterest-inspired idea of including a site blurb there. A few thoughts:

1. I had been thinking we could rethink/redesign those gray boxes, which were originally put together by a developer at the last minute. They should be lighter (in feel) and more Web 3.0-ey.

2. Wondering if you could rework that new button a bit -- looks a bit off to me (maybe the color, maybe just try exploring a different concept)

Thanks for your work on this.

Actions #5

Updated by Boone Gorges over 12 years ago

Where do we stand on this? Time's a-tickin' for this release.

Actions #6

Updated by Raymond Hoh over 12 years ago

What do you guys think about using one of these CSS3 buttons for the "Getting Started" block?
http://hellohappy.org/css3-buttons/

Actions #7

Updated by Dominic Giglio over 12 years ago

I really like the red one, but not red. Maybe the green from our header logo?

Actions #8

Updated by Raymond Hoh over 12 years ago

Based on Dominic's comments, I've used the red button from here and changed it to green. See the attached screenshot.

Note: I know that Matt wanted to decrease the vertical size of the "Getting Started" block, but the attached screenshot is about the same size as it is now.

Actions #9

Updated by Dominic Giglio over 12 years ago

I LOVE IT! :-)

Actions #10

Updated by Matt Gold over 12 years ago

  • Assignee changed from Chris Stein to Raymond Hoh

Thanks so much for picking this up, Ray.

I like the idea of using these buttons but I'm not a fan of the one Dom mentioned -- I think it looks a little garish (sorry, Dom). Ray, can you show us what the "clean gray" would look like?

Actions #11

Updated by Dominic Giglio over 12 years ago

I guess with nothing else jumping off the page the "web 2.0" buttons are a little outa place. The clean grey will prob look a lot better.

Actions #12

Updated by Raymond Hoh over 12 years ago

Clean gray button screenshot is up!

Actions #13

Updated by Dominic Giglio over 12 years ago

Dammit, that does look better. :-)

Actions #14

Updated by Matt Gold over 12 years ago

Thanks so much, Ray. If you don't mind playing with this a bit more, can you please put together screenshots showing the following buttons in gray?

Skip
Minimal Indent

many thanks.

Actions #15

Updated by Michael Smith over 12 years ago

I took another stab at this one as well. Hopefully there's something that will work between the various ideas presented.

Actions #16

Updated by Raymond Hoh over 12 years ago

In this screenshot, I use the already-existing BuddyPress button styles; this might actually gel better with the existing site.

I can incorporate aspects of Michael's screenshot as well by removing the gray background boxes, etc. Let me know!

Actions #17

Updated by Matt Gold over 12 years ago

Thanks, guys. One question before we move forward/comment: should we consider embedding the login/password fields directly onto the page? You can see an example of that on the OpenLab

Actions #18

Updated by Matt Gold over 12 years ago

Somehow, we didn't have Chris as a watcher on this. Just added him. Chris, please let us know your thoughts.

Actions #19

Updated by Boone Gorges over 12 years ago

should we consider embedding the login/password fields directly onto the page?

Out of scope for 1.4. It's too late to be making big functionality changes to the front page. If we want to change something functional, let's move it out of this milestone.

Actions #20

Updated by Matt Gold over 12 years ago

If we want to change something functional, let's move it out of this milestone.

Fair enough.

It looks to me like Michael's proposal would change the look of the page significantly. Michael, can you do a quick mock-up showing what the entire page would look like with the section changed as you've proposed here? Thanks.

Actions #21

Updated by Sarah Morgano over 12 years ago

What about incorporating Micheal's buttons into Ray's screenshot? I like the idea of keeping the grey boxes, I think it helps breaks up the white space.

I also on board with Matt's suggestion to incorporate the login/password fields in this area, perhaps in a later release.

Actions #22

Updated by Michael Smith over 12 years ago

Here are three versions incorporating the entire homepage.

Actions #23

Updated by Michael Smith over 12 years ago

Here's one more using Raymond's buttons with some additional font styling work. I looked to me in the context of the full page that links needed to be bold, as are the active users just below. I also was a bit worried that the lighter grey text wasn't readable, so I used the darker gray of the header to match.

Actions #24

Updated by Sarah Morgano over 12 years ago

I like 2 the best.

Actions #25

Updated by Matt Gold over 12 years ago

Michael -- I agree that the text needs to be darker to be readable (thus, only Getting-Started4.png is a realistic alternative). I'll give these another look tomorrow with fresh eyes, but I have to say that right now, the all-white background isn't working for me. As much as I think the gray boxes are a bit leaden, they are effective in delineating sections of the page pretty cleanly. The versions you've done with a white background make the page as a whole look a bit jumbled -- and we have to remember that with the featured widget being revamped, we'll be using photos more in that space, too., which will only add to the visual cacophony. I'm still open to alternatives, but for now, I'm thinking that we should keep at least some version of the gray boxes.

Ray, if you show prototypes of the page with the Skip & Minimal Indent buttons, I'd appreciate it. Many thanks.

Actions #26

Updated by Chris Stein over 12 years ago

Sorry, I wasn't getting the updates on this before. Overall, I do think that buttons are something we need to address overall on the Commons (http://teachingmultimedia.com/commons/buttons/buttons.html) but that will need to wait for the redesign. In the meantime I agree that the grey buttons fit in more with what we currently have and also having some kind of lines or darker areas to separate the 'Getting Started' and 'Featured Post' as their own sections. I would hesitate to use any kind of 3d effect or heavy gradient as it would be inconsistent with the rest of the design.

Actions #27

Updated by Raymond Hoh over 12 years ago

Matt: Here are the screenshots you requested.

Buttons are unaltered, so if you want me to adjust the font-size let me know. Also I have taken the liberty of making the "Getting Started" and "Featured Post" headers slightly smaller and using less padding.

Actions #28

Updated by Matt Gold over 12 years ago

Thanks very much, Ray. The minimal indent implementation looks good to me, and I like having less padding on the gray headers -- good idea. Chris, the minimal header does contain a bit of a 3D effect; do you think it's incongruous?

Actions #29

Updated by Chris Stein over 12 years ago

The small 3d is fine, as I look at my button page we do some things like that elsewhere in the site. For now I think it's fine to use the good work that's been done and worry about a more general plan for buttons later (and at that point we can look into 3d, gradients etc).

Also, I'm assuming that if you're logged in then it would just show the tour information and link?

Actions #30

Updated by Matt Gold over 12 years ago

Ray, our goal is to finish up this ticket today, so can you implement the minimal indent button and reduced header padding as soon as you can? Many thanks.

Actions #31

Updated by Raymond Hoh over 12 years ago

Check out cdev for the implementation.

Just to note that IE6-8 users will not see the proper button because those browsers do not have good CSS support (see screenshot).

If you want me to add IE support, I can add some javascript that will give IE the proper CSS capability.

Actions #32

Updated by Matt Gold over 12 years ago

Thanks, Ray. Brian, can you tell us how many people visit the Commons with IE6-8? Thanks.

Actions #33

Updated by Chris Stein over 12 years ago

It might not be a bad idea to use the CSS3 Pie anyway. There are probably still a few IE 6/7/8 users out there and as we incorporate more things into the site we'll need that kind of solution anyway. Ray, did you have any thought on the .htc vs the .js implementation? I haven't really looked at it but I'm guessing the .js will be simpler at first but the .htc would be more seamlessly integrated. If they have the .js hosted on one of the Google or Microsoft CDNs then that might help with the download.

Actions #34

Updated by Raymond Hoh over 12 years ago

Ray, did you have any thought on the .htc vs the .js implementation? I haven't really looked at it but I'm guessing the .js will be simpler at first but the .htc would be more seamlessly integrated.

The advantages and disadvantages for using the JS version are listed here.

If we wanted to use a CDN-hosted version, we would have to go with JS since the .htc method requires the file to be located on the same server.

Actions #35

Updated by Chris Stein over 12 years ago

Thanks for the link. It seems like the .htc solution is better if we can meet the requirements. I didn't realize that you had to reference the behavior in each rule you needed it used. It seems like that would be a good place to use something like SASS as well so you could define the styling for a button with the CSSPie as a mixin and then use it where you needed it without worrying about remembering the behavior reference. Maybe not for now but something to remember when we do an overall redesign.

If we have problems with the .htc then yes a CDN .js version.

Actions #36

Updated by Raymond Hoh over 12 years ago

Good to hear you prefer the .htc version, Chris, as that was my preferred choice as well!

I've implemented the .htc version on cdev. The great thing about using the .htc version is we can add the IE-specific references n the already-existing ie.css stylesheet! No unnecessary markup in the main stylesheet.

I've tested in IE7 and IE8 and it works.

As for SASS, SASS sounds great but it requires Ruby and I don't believe we should be using such a script. Better to stick to CSS3 conventions when possible.

If there are no problems with the implementation, I will commit these changes.

Actions #37

Updated by Chris Stein over 12 years ago

Great, doing it in the ie style sheet is the way to go. I probably shouldn't have mentioned sass. There are some programs you. An run that will compile it for you and you can have a local terminal run the ruby so that all the server sees is the compiled CSS. But in general I think that is something we can tackle later as part of an overall redesign and reconfiguring of the CSS.

Everything sounds fine onmy end I haven't had a chance to test in ie <9 but I trust you're right.

Actions

Also available in: Atom PDF