A Guide To The New TXBA Look

Jun 22nd, 2016

Today I published some changes to the TXBA Site that affect how you navigate around the site. I feel these changes make everything look more neat and clean, and definitely improve usability on mobile devices.

To help you get used to the changes, I've annotated a series of screenshots in this post to illustrate how to use the new design.

For Computers & Tablets

The TXBA Logo is always located in the top left hand corner, and will always return you to the homepage.

The primary navigation bar is located directly under the logo. All of the main "places" in Texas Blues Alley are shown here.

A row of secondary navigation links are shown in the upper right hand corner.

When you hover over any item in the primary navigation menu, you'll see a rich dropdown with information about what you'll find in that area of the site.

Once you've entered any main area of the site, you'll see that area highlighted in the primary navigation menu, reminding you of which place you're currently in.

A breadcrumb trail will show you which section and which sub-section of the site you're in.

The cart button is located in the secondary navigation menu. If you have any items added to your cart, a tiny number will appear over this button.

The account button has a dropdown menu that prompts you to sign in, or shows you a list of account links if you're already signed in.

On Mobile Devices

One of the highlights of this design is the improved navigation on smaller phones (like the iPhone 5s or SE). Here are some of the features you'll see on smaller devices.

The primary mobile menu can be accessed by tapping on the menu toggle shown in the upper left hand corner.

This menu will show you a list of all the major places on TXBA.

Places that have sub-sections will have a Plus icon beside them. Clicking on this icon will expand a list of sub-sections.

When you're inside any section of the site, the name of that section will appear beside the menu button, reminding you of which part of the site you are currently in.

If you're inside a place with sub-sections, an arrow will appear beside the name. Tapping on the name will show you a list of sub-sections available for the place you're in. This is helpful for times when you want to quickly switch sub-sections without navigating the full menu.

The account menu toggle button is located in the upper right hand corner. Tapping it will show you the account menu.

This icon will be blue whenever you are signed into the site.

When you're signed in, the items in the account menu will change, linking to the different areas of your account

More and more people are browsing this site on mobile devices, and improving that experience was a primary goal of this design change. Let me know if you see anything weird by contacting me via the Support Page.