Mobile Must-Have: Maximized Real Estate

Maximized Real Estate

On a small mobile screen, every pixel is valuable.  Real estate is limited and must be used efficiently in order to keep important elements ‘above the fold’.  No one likes endless scrolling and the further down the page something is placed, the less likely it is that it will be seen.  A good mobile solution delivers essential information to users quickly, effectively and with minimal scrolling.

Maximizing screen real estate when you convert a site to mobile is a balancing act.  Decreasing the size of an element ensures it consumes less space, but also makes it less effective. Deciding how large to make each element and how to prioritize them can be tricky.  When making difficult calls about mobile layout, there are a few key ways to maximize available space and make these decisions easier.  Allow users to expand or reveal content as they need it and use common symbols to convey information with the following features:

 Touch Friendly Accordions.  Accordions for content and menus are a great way to minimize page length and maximize real estate.  On a small screen, the ability to see all your options and then choose to view only the data you need is essential.  Accordions work great for sub-navigation options, FAQs, and peripheral forms and functions like requests for quotes and search forms.  Halo Headbands uses an accordion menu to maximize their homepage real estate.

JQuery’s slideToggle() function is a smooth, attractive way to reveal content.

Slide-In Navigation.  Slide-in or fly-in menus keep information literally at users’ fingertips. Site-wide slide-in menus keep all navigation options constantly available while consuming almost no real-estate.

Use multiple slide-in menus if necessary.  For example, offer a main menu slider on the right and a sub-menu or advanced search refinement menu on the left.  Most people are right handed, so keeping the main menu within reach of the right thumb is ideal.

Hint and Reveal.  Like accordions, hint and reveal designs keep a user’s options clearly available while only revealing necessary information.  Give users hints that more content is available, and they will find it.  This is especially effective with image sliders.  Tejuri, uses a hint and reveal image slider on their homepage which features one image to save space but shows users there are more images to each side, inviting them to use the touch friendly image slider to view each image.

Hint and reveal can also refer to helpful signposts, like down arrows on accordion buttons that will drop-down information when touched rather than taking the user to a new page.

Icons and Symbols.  Common icons and signals can replace text to save space and increase usability when you convert a site to mobile.  Click-to-call buttons are more useful for mobile users than listing a number they must enter manually.  It’s also a great way to maximize real estate as a phone icon is much smaller than a number with an area code.

Combine for Maximum Results. uses almost all of these strategies (at bottom).  The site-wide header features icon-based click-to-call and menu buttons which keep users engaged with the site and company while saving valuable real estate for product details and images.  The icon menu button activates a slide-in menu which uses an accordion to reveal peripheral features including a search option and a quote request form.


If you liked this read, check out these: