Documentation › Designing for Mobile First

Designing for Mobile First

Headway offers great responsive capabilities at your fingertips—most of the work from a development standpoint is done. Responsive websites aren’t just about responsive development; your design needs to be responsive-friendly as well.

How to Design for Mobile Devices with Headway

Since Headway handles most of the development, it’s good to understand what it is that Headway offers in terms of responsive design. Here’s the quick list:

  • Mobile-friendly navigation menus in the form of drop-downs (default, but optional)
  • Automatic image resizing in the form of setting a max-width on images to 100% of the browser window
  • Automatic video resizing (default, but optional)
  • Automatic grid resizing and alignment as the screen width reduces, ultimately stacking elements in a single vertical column
  • Optional block hiding based on device breakpoints (iPhone/mobile, iPad/tablet landscape, iPad/tablet portrait, desktop)

Organizing Your Layouts

Your site will be “read” from left to right, top to bottom, when it’s resized for mobile. This means that if you drop your sidebar on the left of your content, keep in mind that on mobile that sidebar will appear on top of your content by default. It also means that your logo and navigation, typically the top-most blocks in your layout, will also remain the top-most blocks on mobile.

Test, test, test!:
When you’re designing your site, try to think mobile-first; test often and nearly incessantly to see how your site looks at a smaller size. You’ll spot issues faster and prevent a domino effect later on if you discover an issue from the first half hour of your work.

Plan ahead when placing blocks:
Try to keep the order of the blocks in mind! You have the option to hide any block on any breakpoint (even desktop, though that’s not strongly recommended), but you don’t want to find yourself in a situation where you have duplicates of all the blocks on your site for mobile users.

Mobile users are visitors too: You’re better off hiding just one or two blocks on mobile and leaving everything else up. Your mobile visitors are visitors interested in the same content your desktop users are looking for – don’t leave them out in the cold!

Slider blocks: Slider blocks work fine on mobile, but keep in mind that large sliders scaled down often aren’t very readable, especially those with text! You may want to hide these blocks for mobile users.

Navigation menus:
Headway will duplicate all items in your navigation into a mobile-friendly select box. This is great, unless you have a lot of “empty” parent menu items. If you’re using Custom Links and a “#” as the href when structuring the parent menu items in your navigation, you’ll frustrate mobile users who don’t understand why choosing that option from the select drop-down doesn’t change the page. Try to prevent duplicating menu items or using fake parents when structuring your navigation as a best practice. This will also improve the experience for tablet users, as the drop-down menu experience on tablets still varies in accuracy and ease of use.

This article was last updated for Headway version 3.8.3

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress