Friday, May 1, 2015

Update on Templates in Project Squishy (Responsive Web Design)

From a programming perspective, we have been receiving a number of requests for an update on our progress on Project Squishy, and I'd like to speak on that for everyone instead of responding to these requests individually to keep our progress transparent to our community.

As we mentioned in January, programming in SASS has been a major learning curve. As we try to keep the new CSS file small enough that loading time doesn't deteriorate your experience, we are combining functionality to make the user experience, in general, more intuitive. We are also making some improvements to the accessibility of different modules which is a constant work in progress as technology changes.

First of all, there will be two primary templates used across the Tarleton website. The first one you have already seen on the main Tarleton homepage is called "Stacked" due to the way the modules stack up on top of each other like pancakes, cake layers, sandwich layers, or any other delicious food product you can think of (we love food). The second template will have the same functionality, the same modules, as the "Stacked" template, but it will also include the navigation you need in order to provide all your departmental content, called "Right Navigation."

Right Navigation template screenshot
Screenshot of the sandbox (no factual information) version of "Right Navigation"
We set up user testing on this sandbox page to determine the usefulness and appropriateness of our new content and navigation modules. This test page was built with fake information in order to determine content placement. For example, users found the breadcrumbs very helpful on this page to navigate back up through our hierarchy, even though they knew nothing about the fake academic degree program.

Some of the most exciting news, though, came from testing the content we have placed on the right hand side instead of the left. The location of the navigation menu was a big question in the Digital Media Advisory Committee, so we wanted to get it right. Right hand side navigation assisted users to read the content on the left first and then look to the navigation for more information if they couldn't find it. This will increase the importance of content on pages and help us strategically build navigation menus that are clean and concise.

We also found out that placing the contact information on the right side, below the navigation menu, was very intuitive for our users. They targeted it immediately when asked who to contact for more information about our fake degree program.

Obviously, the right navigation would take up a great deal of real estate on a mobile phone's screen, so it will be located under the same menu button as our Main Menu navigation on mobile phones - just above the Main Menu. This is a common practice among commercial and educational websites, and it keeps our web pages clean and open for our main focus: your content!

Academic degree program page featuring new modules
Screenshot of an academic degree program page
With the addition of our new academic degree pages highlighted on the Tarleton homepage, we have a few more modules premiering, including:
  • Tall Aside: provides a location for main textual content and an option to provide text, images and videos on an aside box
  • Rotating News: scrolling bucket layout of images and content
  • Button: basic module to post button looking links for significant information
As we collect information from all the academic departments on their degrees and place them on these new pages, we are working on implementing a degree search feature that will be highlighted on the Tarleton homepage as well as available in the functionality of the search box, similar to our Web Site Directory search (customized to display content based on the keywords you want your degree to focus on), on every page.

What is our time table for all of this? Each staff member and student intern is focusing on a different aspect of this conversion process. We have a goal to highlight a new degree page once a week. We are also aiming to start creating pages in the "Right Navigation" template this summer. As we receive programming requests and other design/development requests, this timeline gets shifted, but we are very excited to be moving to a more responsive website and working with you to put your best foot forward on your departmental websites!