Responsive Navigation: relative widths and breakpoints
Responsive web design is a technique used to build websites and website components (like a web form or navigation menu) that are easily view-able and usable, independent of screen size or device. Using a fluid layout — relative widths— and media queries, responsive page elements respond to the screen size by shifting, scaling and swapping, making sure the design looks and works perfect every time.
Responsive Design Roots: The combination of techniques used to make a website responsive was first described by Ethan Marcotte. Following the rapid increase of mobile web browsing, using the internet from for example a phone or tablet, this approach to making websites has rapidly gained popularity over the last months. With the projected continued growth of these mobile devices with varying screen sizes, responsive web design is set to become the defacto standard for developing web sites. More can be read about responsive web design in our (upcoming) book.
In short, responsive design means that regardless of how a visitor accesses a website (from a tablet like an iPad, or a smartphone, or a large desktop monitor, or a small notebook, or, or, or...), the site remains usable, clickable and readable. For the purpose of Menu Builder, please keep in mind that your site needs to be responsive itself for the menu to be responsive. If your site is not responsive yet, and many sites are not at this stage, the menu will still work great on your site when you use Menu Builder for creating it. If you are interested in responsive design, here's a really important (as can be seen from all the bold and italics) paragraph.
Important paragraph: Menu Builder uses a fluid layout structure and has a unique duo of sliders that help you build responsive menus. These sliders are essential for making your navigation responsive. You see, responsive design is not having 3 variations — one for mobile, one for tablet, and one for desktop — of a website or a website component. Simply because there is no specific mobile or tablet screen size. Depending on the brand and version, there's a wide spectrum of sizes for each device type. Responsive design means that your site, content and components look good and are usable at every display or device width.
The sliders, we named them Sizer and Breaker, work closely together in guaranteeing maximum usability at every pixel of the way. Sizer helps you vary the width of the display area, so you can see what your menu looks like across the entire range of devices. As soon as design or usability issues come up, you can use Breaker to tweak or even radically change your menu design and layout. For example, your menu text does not fit on the button at a smaller screen size. Then simply change the button width or font size for that width range. Yep, the unparalleled Breaker gives you the ability to change the layout and design of your menu at any width of your choice.
Figure 16: Introducing Sizer & Breaker.
We also casually threw in yet another design in the above image to show the amazing menu design powers of this cool app!
Breaker uses media queries to perform his magic, allowing for a new set of styles to be used wherever Breaker puts a point. You can add points by:
- Clicking anywhere on Breaker
- Clicking on the plus button, a new point will be added at the position Sizer is at.
You can also grab these points with your mouse and drag them to a different position. Dragging them off the slider bar will delete the (break)point.
The points at which different styles are applied are often called ‘Breakpoints’. If the buttons become too small or huddle close together to be easily clicked, a breakpoint can be used to change the style and repair the anomaly. Increase: font size, line-height, adjust margins, or even contrast to battle glare, everything is possible at a breakpoint.
Breakpoint defined:The definition of the word breakpoint often contains words as change, interruption, and discontinuity. They all make sense in the context of intervening to solve a design, readability or usability issue. Breakpoints get inserted right where content, e.g. your menu, breaks and becomes difficult to use. They can be used to change a layout and for navigation menus often even swap the entire layout out for a more usable one.
Most likely though they are called breakpoints because our own Breaker is the only one in the world that makes adding, deleting and moving these points this easy!.
Making your Menu responsive
When you’re happy with your menu, or even if you’re still in the middle of tweaking it, you can grab Sizer to see what your menu looks like at any screen size. If you feel your menu could use some altering, use one of the two methods mentioned above to add a breakpoint. The exact same design controls that we discussed in Chapter 6 are available to make any change you deem necessary. Could it be easier?
When you resize the display width and consider changes while looking carefully at your menu, keep the following in mind:
- Make sure your menu remains usable. A small button can be clicked with a mouse, yet it’s not as easy with a thumb.
- The menu should not be in the way of your main content, more about this below.
- In general, try to make sure the menu remains intact, readable and usable from any screen size on any device.
People come to your site for your content, not for your menu (although they might come over for a peak as soon as you incorporate a snazzy Menu Builder designed navigation system). Yet, the menu is instrumental for navigating your content. How to create the right balance?
For desktop size sites, this is usually not a problem. The most important pages are represented by the main buttons, and there is plenty of room for somewhere between 5 and 10 buttons. The slightly less important pages make it into the submenus. Even less important pages can be linked to from the footer or a sitemap.
But having even 5 buttons may present problems on a small screen like a phone. Often the buttons become too small to be read and clicked. In other cases they push the other content away. Sometimes both things happen. All these, as well as some potential other problems, can be addressed by using breakpoints to change the layout of your menu. If you have an even amount of buttons, the 'double row' layout as shown in Figure 9 is a good option. These layouts are easy to make by allowing half of the buttons to take up 100% of the space of the first row, and the other half to take up 100% of the second row (which is automatically created). This is what the Subtle Grey theme looks like at small screen sizes.
All buttons have a 50% width, making the first 2 buttons take up 100% of the first row, 'pushing' button 3 and 4 down to the next row. If you are using any margins, they will need to be deducted from the width setting.
Most of the the themes and resource files incorporate a predefined breakpoint that changes the menu into a menu toggle. The 'button swap' is the most common, widely recognized, and user friendly approach. The menu buttons are out of the way of the other content, but readily available by clicking, or ‘toggling’, the menu button.
Depending on your exact needs, like number of buttons, and button text length, you may want to change the position of the Breakpoint. Maybe you want to have ‘the layout swap’ already to happen at wider screens. In that case, simply drag the Breakpoint indicator on Breaker to the right. You can also make changes to the menu for that Breakpoint. Increase or decrease font size, color, line height or anything else that is available on the design panes on the right. This can be done for every element in the menu — if you want a specific button to stand out more for mobile users, that’s totally possible!
You can also opt for another layout, design your own using the margin, padding and width controls as we did in Chapter 3, or remove the Breakpoint altogether. With Menu Builder, the options are endless—can you believe we only just started!?
There’s one more thing we need to talk about before you can impress your visitors, friends or clients with an uber cool menu: exporting your freshly built menu.
