moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 1 - Posted on 7/12/2015 13:23:23

I mentioned this in another thread, but I wanted to shed some additional light on my current development effort. As you may have noticed, we haven't had a new release in a few weeks. That's because I'm currently knee-deep in upgrading the site to the latest version of the Bootstrap CSS framework. The main driver for this is to (eventually) gain much better mobile and tablet support, but there are also some other advantages.

The site right now works "okay" on touch devices. Some of the screens are pretty solid, but others are borderline unusable. Although there are a couple of things that don't work because of the older version of Bootstrap I'm currently using, most of it has to do with the way I originally propped up the pages. So I figured if I'm going to try and address this issue, I may as well go all out. That means I'm revamping EVERY page on the site. I was kinda forced to do this since the latest version of Bootstrap is quite different than the one the site is on right now.

Since I was going to be going through this process, I decided to re-evaluate my theme options and opted to purchase a new layout for the site. I tried to keep it pretty similar to the current one, but there were a few annoyances I wanted to address. I've never been a big fan of the larger icons on the left menu, mainly because the "sub" menu support is kinda weak (you basically get a little pop up thing). I wanted a menu that could collapse / expand much more naturally. I don't plan on changing up the menu items themselves (same ones, same order), but this provides a lot of flexibility moving forward. Another thing I wanted was to keep the header and side menu fixed, so as you scroll, they're always visible.

At this point, I'm about 60% of the way through the upgrade...I think. Many thanks to [cSS]butthouse for helping out on this as well! This upgrade is purely an upgrade, I'm not tweaking layouts (like the shelf view feedback in another thread) or anything. I just want to get us on the new platform so I can get back to addressing feedback you guys have submitted. There's definitely going to need to be some color / spacing tweaks throughout the site, so bear with me when I launch this thing...

Speaking of which, as of right now I'm HOPING I can wrap everything up for a release next weekend. I have basically no room for error if I'm going to reach that goal, so we'll see how things go. If not next weekend, it should be the following one.

And finally, I wanted to share a screenshot of the new layout to see if you guys have any immediate feedback. This is the Browse Games page:

Post Edited on 7/12/2015 16:23:17
dhobo Curator Backer Posts: 1965 Registered: 1/5/2015
darwinsocialism
# 2 - Posted on 7/12/2015 13:31:49

Link doesn't work, unless that's your not-so-subtle way of telling us in advance that the new site will be broken haha :)

moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 3 - Posted on 7/12/2015 16:22:58

Well that's weird! I uploaded it to my AWS account, which is where all of the box art is hosted and marked it as public. Nonetheless, I've uploaded it again to a different location and this one SHOULD work!

dhobo Curator Backer Posts: 1965 Registered: 1/5/2015
darwinsocialism
# 4 - Posted on 7/13/2015 0:07:16

There we go, looks much cleaner for the side menu layout, I am definitely a fan.

I know it's far from a finalized design, but with the new "lighter" scheme you have going on, the various coloured "Add" buttons next to the game kind of stick out like a sore thumb with those solid colours.

Marcelloz Curator Backer Posts: 277 Registered: 9/14/2014
Marcelloz071
# 5 - Posted on 7/13/2015 20:40:03

Looks great! Keep up the great work! And looking forward to test it on mobile :D

moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 6 - Posted on 7/22/2015 0:07:26

I made some great progress on the upgrade this past weekend, but there are still a few pages that need to be fixed. At this point, I'm down to the following:

  • Collection Search (shelf view only, everything is done)
  • Collection Game Details
  • Community Game Details
  • Overview

Aside from those pages, there are a few minor things I want to knock out before the initial release. After that, it should just be optimizing things even further for mobile and cleaning up padding / colors / etc based you the feedback you guys provide :) In general, the site seems to perform much better in lower resolutions, though it won't quite be 100% mobile-ready on day one. But it'll get there!

I'm hoping to wrap it up this weekend, but we'll see how things go.

Post Edited on 7/22/2015 0:07:43
jwcooley Curator Posts: 983 Registered: 2/28/2014
jwcooley
# 7 - Posted on 7/23/2015 3:07:20

I'm excited for the eventual mobile....I use this site a lot now but I know I'll use it way more if I can get the website to do the right stuff on my phone.

moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 8 - Posted on 7/25/2015 13:20:53

Just a quick update here this morning...

I've completed the upgrade for 3 of the 4 pages listed above. The only straggler is the Overview page, which I plan to work on next. I would've had it done already, but I ended up fixing a bunch of smaller things along the way and that slowed me down a bit (though it all needed to be done before I can release this sucker). That being said, I plan on rolling the new site out TODAY sometime! I just wanted to give a heads-up in case you guys run into any issues while it's updating. It shouldn't take very long (as in a few seconds), but this is by far the most impactful release we've ever had, so here's your warning :)

moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 9 - Posted on 7/25/2015 17:54:01

The new layout is LIVE! There are definitely some quirks and issues that need to be addressed in the next release, but everything should be functional at this point. Like I said before, this version isn't 100% mobile-ready, but it should be a step in the right direction and provides the framework to make mobile work really well. I'll try to post the list of things I plan to address in the next release(s) later on, but definitely let me know if you run into any issues or just don't like how something looks now.

Oh and if you do happen to use the site on a phone or tablet, let me know what you think of the menu that shows up. I had issues with the one that came with the template, so I had to prop my own up and I was running out of time, so this was a quick 'n dirty menu. That's actually what held up the release and prevented me from getting to other things, such as toning down button colors, fixing buttons on mobile, etc (more on all that later).

dhobo Curator Backer Posts: 1965 Registered: 1/5/2015
darwinsocialism
# 10 - Posted on 7/26/2015 3:18:13

Checking it out both on pc and my tablet. So far looks and works really well on tablet for the most part.

Few things I've run into so far just browsing stuff:

Android Tablet (Chrome):
- My Collection screen has the "import/import/settings/whatshouldIplay" buttons top right displaying oddly due to running out of space to render them on a single line. The buttons pushed down to a new line overlap a bit on the ones above.
- Viewing the site in anything but landscape mode renders a lot of buttons nearly unusable due to resizing problems.
- Clicking on a game's name in your collection list opens up the edit details page where the game art, game name, platform and ratings stars are weirdly overlapping with each other. Happens regardless of what size/shape the game art is.

PC (Chrome):
- Browse games screen has the quick add / add completion / add to wish list buttons cut off (this page looks fine on the tablet however)
- Shelf view buttons on either side of the game art are not rendering completely and look like they're being cut off. (again, not happening on tablet version)

moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 11 - Posted on 7/27/2015 2:04:30

@dhobo - I'll add those items to my list of things to work on for the next release. With the text / fields overlapping the box art, I thought for sure that was fixed. It works properly on mobile, I must've missed tablet somehow.

Here's what I have on my list (some of which is on yours)

  • Action buttons (Quick Edit, Remove, etc) on pretty much all screens do not scale down properly. The new template did not provide a wide range of button styles like the old one, so I had to improvise in the short term by porting over some of the old styles. A side-effect of this was the buttons no longer had the supporting styles to where they would scale properly :P I tried to fix up the Collection page enough to where it's somewhat useable since that's the most heavily used page on the site.
  • The "search" box in the header needs to be a little wider and it actually changes sizes for some reason on different pages
  • The footer is kinda bare and the Steam logo isn't inline with the other stuff
  • Some of the modals aren't doing things they should when they first appear. This is a side-effect of upgrading jQuery, which was a requirement for Bootstrap 3. I thought I fixed them all, but I know the Add Completion modal doesn't pre-populate the Date Completed field like it should. I'll sweep through the whole site and catch all of 'em at once.
  • I did a few optimizations for tablet and mobile along the way, but I'm going to optimize them further by hiding columns / buttons / text as you enter lower resolutions. This already happens with some stuff today, but I'm going to really try to optimize the screens to make them look and perform well on these devices.
  • The box art that shows up on the home page doesn't scale gracefully like it did before, so I'm going to make it so they "pop" in like the used to. I'll probably lower the size back down too.
  • I tested on my iPad and some of the modals don't actually work. They show up, but fields run off the modal and you can't actually click on any of the buttons or close the modal, so you have to refresh the page. I'm not sure what the deal is because I tested them on my PC beforehand. It might be a Safari issue, but we'll see.
  • The Private Profile view was missed (forgot about it actually)
Post Edited on 7/27/2015 12:50:42
Marcelloz Curator Backer Posts: 277 Registered: 9/14/2014
Marcelloz071
# 12 - Posted on 7/28/2015 11:49:52

Didn't look at the site / announcements due to a re-install of my main PC so big surprise. And I like it! Really a good visual clean-up of the site, everything looks a bit fresher and it feels more modern. Tonight I'll give it a swing on my mobile devices (iPad and Nexus 5) and give some feedback about those.

Great work!

Definitely for some later date but with the new cleaner look the collection page looks a bit overcrowded to me. When loaded almost half the page is filled with bars, buttons and filters:
- navigation buttons just below the 'XXX Collection' bar are a bit redundant now is my feeling as they are all easily available elsewhere.
- The import and settings buttons could perhaps be put elsewhere in a menu to make space.
- Add games and export button could also be (re-)moved and put somewhere else.
- (some part of) the filter block could be folded to make some space.
- the number of visible pages should be made dynamic I think so they won't wrap around. I think you always see 15 right now.
- input controls are of different heights; the search box and combo boxes have different heights. Just a silly thing but it catches my eye immediately :D

One last minor thing: it's 2015 for quite a while now, so you may change the year at the bottom ;-)

Post Edited on 7/28/2015 11:50:31
moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 13 - Posted on 8/1/2015 1:51:21

I made some fixes in today's release that should help a bit. The main thing is getting the action buttons to work better on lower resolutions. I'm still not completely satisfied with them and I still need to adjust the colors, but hopefully they at least look decent on tablet and mobile now.

I modified the pager so it scales down to tablets better, let me know how it looks on your end. Oh and good catch on the copyright in the footer, I didn't even notice it ;) It should be fixed now though.

I'm definitely looking to clean up the Collection Search page and you have some great feedback there. I'll try to roll this stuff in with the upcoming shelf view modification. Let me know if you guys have any additional feedback on the new layout!

Marcelloz Curator Backer Posts: 277 Registered: 9/14/2014
Marcelloz071
# 14 - Posted on 8/2/2015 18:52:20

OK, right now typing this on my iPad while the top bar ( about, etc) has stuck somehow in the middle of the page : http://imgur.com/vkpGkG5 . This doesn't always occur but just reporting.

First impression: looks good and works alright. I can do everything on my iPad so impressive :) I know and see this is still work in progress so just giving some feedback about things i see.

One of the first things I would suggest is folding or reducing the size of the menu bar to the right. It takes a lot of screen space.

I often see the use of different font types, sizes and colors : http://m.imgur.com/7o88Uy7

The collection page works but navigating it is hard work. The filters take up the first 2 screens. ( or 1 when in portrait mode http://m.imgur.com/rrnqdpz) The collection view pretty basic still ( http://m.imgur.com/JEmdnNG ) and I would suggest reducing and harmonizing the buttons, more room for the title and image ( reduce top and bottom margins of the image so they 'stack' . Right now they are floating ( if you get what I mean).

Also the page buttons at the bottom are not rendered completely, they are missing the lower part.

The detail page looks like it is still 'work in progress' with various parts where the layout is still broken.

But all in all I like it so far and will definitely start using it on my mobile devices :-)

Post Edited on 8/2/2015 18:53:39
moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 15 - Posted on 8/7/2015 19:30:04

@Marcelloz - Are you using Safari or Chrome on your iPad? I've still been having some issues with Safari, but those are going to be tough to debug since I'm developing on Windows :P

When you say menu bar, do you mean the one on the left? If so, I agree, it should be collapsed for tablets, much like it is on mobile. Speaking of which, have you had a chance to look at the menu on mobile? Does it seem to work okay for you? I threw it in at the last minute, so hopefully it at least functions!

I've been fighting with the ever-growing list of filters on the Collection page for a while now :P And just FYI, I made it even worse today because I added a new filter (but it's a nice one if you're trying to find short games!) I'm going to try and get them to collapse a little better and if that doesn't work, I might start hiding some once you hit iPad size. It'd be nice to have a button to toggle advanced filters, but that's more of a long-term fix (more on that later).

The page buttons being cut-off has been fixed and will go out with this week's release.

Regarding the details page, I've made some changes to help clean that page up a bit. Apparently I didn't test it in iPad resolution because it was working much better on mobile. Anyways, that page should be pretty solid at this point, but let me know if you still see anything weird.

Now, back to the filters and buttons that are running rampant on the Collection page. I'm planning on overhauling all of that stuff when I do the shelf view tweaks to hopefully reduce a lot of clutter on the page. I have some mockups from @dhobo for the shelf view changes (thanks!) and I do plan on fixing that stuff up very soon. I'll post more about this later, but I will not be able to work on the site for a few weeks after next week. I'm trying to clean up and knock out smaller items so when I pick the site back up, I can have my plate cleared and work on fixing up the Collection page. I want to approach it that way since cleaning it up is going to be a bit of work :P

Post Edited on 8/7/2015 19:31:54
NovaNapoleon Posts: 12 Registered: 1/15/2015
# 16 - Posted on 8/9/2015 8:45:19

Love the new look of the site! Looks way better! :)

Just wondering if a person's username will still appear on individual game pages even if their profile is set to private?

Post Edited on 8/9/2015 8:45:48
Marcelloz Curator Backer Posts: 277 Registered: 9/14/2014
Marcelloz071
# 17 - Posted on 8/9/2015 20:12:01

I am using Chrome on my iPad, don't use Safari that often. I indeed mean the menu on the left of the screen.
I've used the site on my Nexus 5 phone and it works pretty ok. Didn't sink too much time in that one yet but it hold up pretty well.

Keep up the great work!

moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 18 - Posted on 8/9/2015 23:11:10

@NovaNapoleon - As of right now, usernames are still displayed, even if the profile is marked as private. That's something I've had on my list for a while, so I'll try to knock it out with the next round of small updates next weekend. I think I'm going to add a new checkbox that lets you opt in / out of having your name displayed, if you mark your profile as private. You'll still be displayed everywhere, but the word "Private" will be displayed and will not be hyperlinked to anything. That rule should apply pretty much everywhere on the site, with the exception of the forums, of course :)

Post Edited on 8/9/2015 23:11:41
NovaNapoleon Posts: 12 Registered: 1/15/2015
# 19 - Posted on 8/10/2015 0:53:11

Cool! Thanks! :)

moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 20 - Posted on 8/10/2015 14:04:54

You guys may have seen this, but I made the filters section even more cluttered the other day by adding the Quick Filters button. Given that the page will be modified soon, I just kinda stuck it on there. I really wanted to be able to quickly filter and I thought that would be a nice (and easy) way to tide us over until I build the option for saving your own filter sets. All that being said, if there's any quick filters you guys would like to see, let me know!

moho_00 Curator Backer Posts: 6846 Registered: 6/10/2011
moho_00
# 21 - Posted on 8/14/2015 22:28:35

@NovaNapoleon - The private option has been added, let me know if you have any issues with it!