Side Bar Navigation and Titles

[bcaswelch]

Showed my friend the website and she had a couple recommendations/observations.

Side Bar Navigation

When first pulled up fullscreen, didn't realize it appeared when she scrolled down. Thinking about it, it is cut away from everything else on the page and off in a corner. Might look at making it a bit bigger/noticeable.

Text Title

Felt the titles were too small compared to everything else (brought up that the title of each section was smaller than the 4 square progress bar). Making it bigger would help notify each new section since they all look fairly similar.

I'll throw some images in of specifics once I get done with class

[VillageHubertChen]

Improving Side Bar Navigation & Puzzle Titles

Hi @bcaswelch , we agree. After discussing with Lukas these are our proposed changes:

Improving Side Bar Navigation

1. Place the Side Bar Navigation to top left of the page. We show it always. The eye scan pattern is to begin with top left of page, as such it will find the Side Bar Navigation and no longer overlook it.
2. Add one more entry: "Intro" It is the first entry and refers to the Introduction at the beginning of the page
3. Draw separation line between Intro and the remaining items
4. Move the Off Canvas Sidebar from left to right (to not collide with new Navigation Side Bar position)
5. Put in a footer. Empty. Dark grey. Later we will place the site navigation tree in it. For now we place it so that you can scroll to the last item in the Navigation Bar → #26

Improve Portfolio Titles

1. Choose Bigger Font on big and middle sized screen
2. Keep Font size when using Mobile
3. Increase the top margin a lot. Check with HC during implementation what looks good

Tasks

• [ ] @LukasChen Implement above. Trigger HC for review before you push it

[bcaswelch]

1. My friend and I liked it on the right side because its nearby the page scroller and where people naturally go to move on a website.
2. Would making the navigation bigger work? Having it take up more of the side would make it much more obvious.

[VillageHubertChen]

1. I agree on the your reasoning to to place it to the right to be close to scroll bar. But due to programming limitations we then only can place it to the utmost right, which might give a huge margin between right side of body and left side of Navigation Side Bar. This is exactly the reason why it was overlooked. Lets see how above solution feels when done. It may feel right, it may not.
   1. Side Note: I never use the scroll bar anymore. On the desktop I use the scroll wheel of my mouse. On the tablet I use tab + pan to scroll.
2. If we would make the navigation side bar bigger, it would sooner disappear, as it no longer fits when the browser window width is reduce. Our aim was to keep the Side Navigation Bar available for as much as possible.

[VillageHubertChen]

@LukasChen

Great job! :heart:

Changes in Styling

I increased margins and padding in the file: _portfolio.scss in .portfolio-section {

Before:

    padding-top:50pt;
    padding-bottom:10pt;

After:

    margin-top: 50pt;
    padding-bottom: 10pt;
    padding-top: 50pt;
    margin-bottom: 100pt;

Understanding how gh-pages work

1. I understand it correctly that GitHub:
   1. does not store the finished html and css in the repository?
   2. edits are done in jekyll files and .scss files directly? Once completed GitHub will generate the final html and css files on the fly?
2. If you can confirm my understanding I really like this! It seems easier and more straight forward than Joomla to me

Tasks

• [x] @LukasChen Please advise if I made everything right when applying the change?
• [x] @LukasChen Please advise if my understanding of gh-pages is correct as described above?
• [x] @LukasChen Small tweak: Please update the top Site Navigation Bar to be of identical content as the Side Navigation Bar (minus Introduction).
• [x] @LukasChen Small tweak: Please move the Side Bar 50 pt more down
• [x] @LukasChen You forgot to implement this feature:
  1. Choose Bigger Font for portfolio section title on big and middle sized screen
  2. Keep current Font size for portfolio section title when using Mobile
• [x] @LukasChen Trigger HC for final review.

[VillageHubertChen]

Request for final review

@bcaswelch Please check and advise if all is well now and if I can close this issue?

I just found that we overlooked to make the portfolio section title bigger. Will be done before we close the issue.

[bcaswelch]

Looks good! Having it there when the page opens makes it much more noticeable.

I'm guessing its just a bug but the top navigation bar doesn't appear when on a desktop medium size window.

[VillageHubertChen]

@bcaswelch

Thanks for your feedback. So we will close the issue once Lukas completes the open tasks :-)

Behavior of top Navigation Bar

Top Navigation Bar

The Top Navigation Bar on a window that is just wide enough to show it

Open Menu Icon

The Top Navigation Bar on a window that is just not wide enough to show it. The Top Navigation Bar is turned off and replaced with the "Open Menu Item".

Off Canvas Menu

Once you click or tab that icon, the off canvas menu shows.

Does this answer your question

• @bcaswelch
• [x] Does this answer your question?
• I am a little surprised you have not recognized the function of the Open Menu Icon. It works exactly the same as with the "Open Menu Icon" of FireFox or Chrome or of so many web sites nowadays. Or did I completely misunderstand your question? If so, please be so kind and include a snap shot of what you mean?
• If this was your issue, should we do something to make the "Open Menu Icon" move recognizable?

[bcaswelch]

I wasn't the top navigation bar before (seemed to fix itself though).

Ah I did miss the menu icon! Guess I usually just scroll past the first page without noticing the opening. Like it though.

The issue is resolved as far as I can tell.

[VillageHubertChen]

@bcaswelch

Thanks for your reply. About the behavior of the Main Menu:

1. On big screen is sticky
2. On middle sized width it is not sticky to save screen estate
3. The Page Navigation bar is sticky on middle and small width to assist in page navigation. If you want to use site navigation, you have to scroll to the very top to see the Main Menu again.

I will close this issue once Lukas worked down the remaining open tasks.

[VillageHubertChen]

In the end we removed the Side Bar Navigation. We loved its function, we loved its design. But it clashed with newly introduced wide backgrounds to portfolio titles and it made Navigation too complicated:

1. Side Bar Navigation, that only shows when page width is > 1500 px
2. Top Bar Navigation, that only shows when scrolled down and page is bigger > 600 px
3. Accordion Navigation, always available, but mostly used on mobile < 500 px

We found that Top Bar Navigation and Accordion Navigation is simply enough. By removing the Side Bar Navigation we reduced clutter on the page.