NetChecklist.com Video - Navigating on Devices with Smaller Screens

This video explains how to navigate in the NetChecklist.com task management application on devices with smaller screens.

Video Transcript - Navigating in the Checklist Management Application NetChecklist.com on devices with smaller screens.

Hi, welcome to another video tutorial on the web application NetChecklist.com. In this video I'm going to talk about navigating within the application on the menu system that's designed for smaller screens.

In the basic navigation video for this application, we touched on the fact that the page layout is based on a responsive design which means that it can change based on the size of the screen it's being displayed on. Specifically, the menu system will change so it's easy to touch the menu buttons with your fingers on a mobile phone screen. In this video, I'm going to go over the specifics of the differences in the two menu systems.

The first difference involves the two split menu buttons on the main menu because there isn't really a way to implement that functionality on this type menu that's designed for the smaller screens. If you remember, on the menu designed for larger screens, clicking the main part of either of these buttons, takes you to an actual page in the application but if you click the down arrow adjacent to the main button you'll open a menu with a few other options.

This first one takes you to the main page of this organization and under it we have menu two items, both dealing with single tasks, one to add a new single task and to work with recurring single tasks. On the version of the menu designed for smaller screens however, we have a single button to go to the main screen for this organization and a separate button labeled "Single Task Menu" which opens an accordion menu containing those other two items to add a new single task and to work with recurring single tasks.

The other split menu button on the menu designed for larger screens is the "Checklist Menu" button where the main part of the button takes us to the main page to manage checklists and clicking the down arrow beside it gives us the links where we can do all of the other things we can do with checklists like copy them, create new ones, add new items to them, etc. On the menu for smaller screens, all of that is rolled into this "Checklists Menu" button that opens and closes an accordion menu when you click on it. The first item inside that menu is the one that takes us the main page to edit checklists just like the main part of the split menu button does and below it are buttons to do all of the same things you can do under the drop down arrow on the other menu.

The last button on the main menu is the Org Setup button which as you know is not a split menu button and clicking the button does not take you to an Org Setup page - there is no Org Setup page. Clicking this button only opens a menu of items below it. When we narrow our browser window down to a smaller size you see that we still have our Org Setup button and it's still located right after the checklists button and clicking it now opens another accordion menu that contains the exact same items that it does on the main menu on the larger screen layout.

The second difference in the two menu systems involves the buttons that are located in the sidebar of many of the pages in the application. The buttons that are displayed in the sidebar are page specific, so they're going to vary depending on which page you're on. When we go to the page layout and menu system for smaller screens, we no longer have a sidebar, so you'll still have these same page specific options but instead of being displayed in a sidebar, they'll be displayed just below the buttons for the main menu.

Again, the main page for an organization is the one you're taken to whenever you first go into any organization and that you can also get to by clicking this organization home button. On this page, there are 3 buttons in the side bar. The first two open accordion menus, one for task sort and filter options and one to select a checklist to copy to the task list. The third is the button to take you to the "Checklists Copied" page.

Before we reduce the size of our screen to switch over to the smaller screen menu, notice that the last button on the main menu is the "Org Setup" menu button. Once we switch to the small screen layout, notice that, here's the "Org Setup" button that opens an accordion menu and just below it we still still now have those other three options down here. The same two accordion menus to sort and filter the task list, the one to select a checklist to copy to the task list and the button to take us to the "Checklists Copied" page.

Next, let's go to the main "Checklists" page where we manage the checklists for this organization. Over here in the sidebar we see all of the checklists that belong to this organization and we can select one to edit it or any of the items that belong to it and once one is selected, it's background is slightly darken than the others to indicate which one is selected.

So, again, let's make our screen smaller until we get the smaller screen layout and here we see that below the "Org Setup" button which is the last button on the main menu, we have the button that opens an accordion menu to copy a checklist to the task list and below it, another button that opens an accordion menu where we can select a checklist to edit. Notice that here that even though the screen layout changed, we still have the same checklist selected and it still shows up slightly darker to indicate that it's the one that's currently selected.

I think you probably get the idea so I won't go through all of them.