crew
Nick Haskins

Website Updates - April 4th - Layout Changes

Today we released a new update that introduces some redesigns across various pieces of the application (mainly dealing with logged out views like the index page). In this same update, we simplified the navigation across the entire application for those who are logged in. Most notably the side navigation was relocated to the top of the page. 

Lesson Page: Before & After

Our goals were to increase usability on mobile, while also reducing distractions on the video learning pages. This update was the first of many that will be introduced in the coming weeks. For the most part, things are still the same, with some notable exceptions. For example, previously the "Blog" and "Shop" links were in the side navigation. However, data showed that these links weren't clicked very often, so we moved them to the footer. 

We've done our best to make sure that we cleaned up after the renovation, however if you have any questions, concerns, or find the redesign confusing, please let us know!

  • Most notably the side navigation was relocated to the top of the page.
    This is a great improvement, keeping all navigation items visible at all times in 1 single place,
    and thereby freeing up more screen space for content.

    Our goals were to increase usability on mobile,
    - If is do-able to make the layout customable per user account?
    - Is it wise to develop a separate Pc/Laptop vrs Mobile website layout ?

    since the CGCOOKIE experience looks very different on a PC, Laptop, Netbook with a (normal) big screen, then on a mobile / tablet / smartphone device with a postage-stap size display-screen?


    EDIT:
    "Blog" .... showed that these links weren't clicked very often, so we moved them to  the footer.
    Nielsen's Website usability studies (<- see the articles on the Sun MicroSystem homepage) show that:
    - Headers get all the attention, since they are the first thing people see
    - Footers are mostly ignored, since almost no-one is actively looking for it.

    May I suggest to re-locate the [Blog] back to the top, since this is filled with very interesting articles, content?
    - A Blog is what can be used to attract new customers to the CGCOOKIE website
    - A Blog can be used as a community-binding-agent / interaction place where CGCOOKIE staff community members (virtually) meet and get inspired to exchange their ideas.

    Good example of this inspirational blogging-principle are:
    - Kent's Getting Started with Blender
    - Pavla's - How to create an Art Portfolio
    - Wes's - Personal Roadmap article
    These blog articles are (to my opinion) real GEMS, the authors have put much time and effort into it and (new) users should not have to dig / excavate / scrap the entire website in order to find them (back).

    [ARCHIVE]
    Is a button which I should to see place (back) in the top menu bar, since it too contains CGCOOKIE historical legacy and an awful lot of very usable materials for everyone here.


    This update was the first of many that will be introduced in the coming weeks.
    Do you have some sort of road-map for the upcoming changes?

  • May I suggest the following changes to the new horizontal full-size menubar.


    1. In this example, I have restored the topic category color coding so that it is visible all the time. Not only when the button is hovered.

    2. I have added "separator" borders around the topical menu items, so that they stand out more from the rest of the menu items.

    3. I have added a new entry for the "Dashboard". Although you can get to the dashboard by clicking the LOGO in the new layout, it's quite a ways off of the other items, so it will require large mouse movements to reach. This new "Dashboard" entry would still fit very nicely into the new horizontal layout, as you can see.

    So, here are the comparison images:

    Figure - Original

    Figure - Modified

    I -REALLY- hope you would implement this change, because it will make the new horizontal menu a lot easier to use.


    Cheers!

  • This please! This update made me realize that I wasn't reading what the buttons said 😛

    The icons were really nice, made it feel like an app instead of another webpage. But I don't think they would work on the new layout.

    EDIT: The colors are back! Yay!

  • Note: Screenshots taken on a Windows 7 PC, Firefox 52 ESR browser, resolution 1920x1052 pixelz

    Here are some screenshots to illustrate my point regarding the argument
    - for which target platform is the CGCOOKIE website designed?
    - what is the optimal screen height width on every platform?

    Gallery section experience on various screensizes (1920, 1920/2 and 1920/4)


    Forum section experience


    Courses section - Note the difference in upper lower half page width usage (red sections)
    (resolution 1920 x 1052 on a PC platform)

  • @Ronald Vermeij:


    Quote: "Is it wise to develop a separate Pc/Laptop vrs Mobile website layout ?"

    I'm not a CGCOOKIE dev, but in my opinion, it is wise to develop multiple layout break-points (also known as media-queries).

    CSS3 nowadays has extremely powerful Media Query rules, which allow for very easy Responsive Web Design -- eg. multiple layouts for different screen sizes and orientations across different devices.

    Media queries, coupled with the flex-box elements, make responsive design a breeze to implement.

    So, Ronald Vermeij, I feel like it's a very good idea. Why do you believe it might not be? (Or did I misunderstand what you ment, perhaps you ment that you would like to see different layouts... But -- it's already different for PC vs Mobile. So you couldn't have ment that, right?)

    Cheers!

  • @Ronald Vermeij:

    Ah, yes, now I can see exactly what you mean.

    Luckily I happen to be a very experienced web-developer, so I can fix all of those in a jiffy (for client-side only, so somewhat difficult to share, but there are tools that can help, such as "Stylus" for Chrome or "Stylish" for Firefox).

    (Did you also know, that the latest version of Chrome has permanent client-side overrides without third party extensions, so any changes made to CSS can be made to persist across page loads. If you know how to edit pages with Chrome (CTRL+SHIFT+I), then I can help you customize the layout any way you want it to be.)

    Also, I think most of the layout problems you showed are still being worked on, and will soon be sorted out -- so perhaps we shouldn't really jump the gun and start customizing everything for ourselves.

    But I've already played around with the site enough to get rid of those HUGE thumbnail images, which I too found extremely annoying, and a complete waste of space.

    Cheers!

  • Not really a fan of the new layout. now when scrolling down a thread the menu disappears. and when you reach end of the thread, there is only "add Reply" button. no easy way of gettin back up on the page unless you want to torture your mouse wheel. atleast before you could click on the menu community link to get back into main topics.
  • @Kaj Suominen:

    Quote: "when scrolling down a thread the menu disappears."

    This is a valid concern.

    Perhaps they intend to make the menu position fixed in the future updates (ie. always at the top, even while scrolling) ?

    But then, that would eat away a portion of our vertical screen-space, which is quite valuable, especially when reading!

    I agree with you, that this new layout doesn't appear to cater to the widescreen users out here. I can only HOPE that they have really thought this through! And I'm not entirely enjoying all of these changes either.

    Didn't we previously already have the ability to minimize the sidebars on video player screens, or maximize the video player, and hide the playlist too. (So I don't really understand what was to be gained, by removing the left-sidebar-menu, on "PC"-layouts.)

    I'm afraid it's going to take the CGCOOKIE devs a LONG time to tweak all of this "back to perfection".

    Cheers, and happy coding.

  • I feel like I went out to get an ice-cream and when I returned my wife had move all the furniture. 

    Can the menu up top always stick and stay visible even when I scroll all the way down? I have to scroll all the way back up, to get to the menus again. 

  • @Omar Domenech:

    Do you know how to apply custom "user-css"?

    If you do, just copy/paste the following code to your preferred user-CSS manager as a new rule:

    /* STICKY MENU */
    
    #site-wrapper {
      overflow: unset !important;
    }
    
    #header {
      position: sticky;
      top: 0px;
      z-index: 100;
    }
    
    .action-nav, .action-nav.fixed-top, 
    .dashboard-nav, .dashboard-nav.fixed-top {
      position: sticky;
      top: 53px !important;
      z-index: 99;
    }

    FIGURE: Proof of concept

    Cheers!

    UPDATE: Updated the CSS-fix to keep both menu levels visible.

  • I wish I was fluent on coding. It looks like the world is needing coders more and more. Also they'll be our soldiers when Skynet comes online. We're counting on you guys. 

  • @Omar Domenech:

    Well, if you're a Chrome user, just install this little extension:
    https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en

    Or, if you're a Firefox user, here's a version for Firefox:
    https://addons.mozilla.org/en-US/firefox/addon/styl-us/

    If you're not familiar with CSS3/HTML5/Javascript, don't worry -- applying new rules to a website requires no coding with these tools. (It's only when you start creating CSS overrides of your own, that you need to start learning more.)

    TamperMonkey is another wonderful tool, which allows changing not only the appearance and layout of a website, but also it's content and functionality, by injecting custom Javascript-code. (In any case, that's way beyond the scope of this post.)

    Although, it must be pointed out that I can't really provide a lot of user support for using any of these tools, as they are intended for people who know what they're doing.

    Perhaps, if I just keep posting layout fixes here, some of them will even get implemented sitewide by the CGCOOKIE devs, eh? (Although, a note to devs - my fixes have not been exhaustively tested for cross-browser compatibility.)

    Cheers!

  • crew

    Thank you everyone for your feedback. We pushed another update to address a small few frustrations, with another update planned for tomorrow. Stay tuned, and keep the ideas coming. 

  • Good stuff, having the back button already stayin on top is huge thing from me. :)

  • This may be silly, but I kind off miss having my level and exp visible at all times. I know those numbers don't really mean anything, but they gave me this feeling of progress being done.

    I like some of the changes, it feels more clean and efficient, but can I recommend for next time using an optional beta instead? I think some users may find more frustrating having the website change little by little every day for a week or two.

  • To save your scroll finger, the "Home" key will shoot you to the very top. The "End" key will send you back to the bottom. Work smarter not harder guys, come on. ;)
  • @Jack:

    Quote: "I think some users may find more frustrating having the website change little by little every day for a week or two."

    I agree. I'm definitely in this camp. But, then again, realistically, I do not think the site will ever be 100% complete - it will always be undergoing changes and updates, trying to meet the users demands and expectations, or a reasonable compromise thereof.

    Even when we consider that this site is not built around a single framework (although the back-end appears to be Ruby on Rails), but instead uses multiple component pieces from third parties, it's obvious that changes will always happen.

  • @Nick Haskins:

    FIRST:

    When I click the magnification glass -icon on the menubar, to search for something, it would be awesome if the "Search for"-input field was automatically selected, so I could just do -- click, type what to search for.

    Currently I have to click the icon first, then move the cursor over the text-entry field, click to select it, and only then type something like "Python" to get all the lessons about Blender Python Scripting.

    If you just added the "autofocus" attribute to the search input-field, on the following page:
    https://cgcookie.com/search

    That would be great.

    SECOND:

    While writing the above section, I also discovered that I can't add an HTML-code snippet for you, using the "CODE BLOCK"-feature of this message editor.

    It happily interprets HTML tags as HTML. This could be a possible security vulnerability issue.

    UPDATE: HTML demonstration removed.

    Is the editor really supposed to allow us to add any HTML freely? I could think of a few cases where this can't be good, because it can be a vector for an HTML injection attack to pull in external resources to a forum page like this.

  • I agree about sticking the menu to the top

    I'd also like to see Blog in the top bar

    At least on desktop, I know mobile is probably different size constraints, but yeah having to scroll to the top to get to the menu is not ideal and I fear the Blog will die in the footer.

    Eek and I just realized especially with the little bitty ass scroll bar on this page, scrolling to the top is a pain in the booty! I have to flick my mouse wheel like 10000 times on long forum threads to get back to the menu or try and fail a bunch of times to use the tiny scroll bar on the side of the window.

  • @Jack:

    Quote: "The colors are back! Yay!"

    Yea, but they're aligned to the top. I don't like it, I'm going to have to override those. ;)