It should come as no surprise that people love to pass the time in waiting rooms by fiddling on their smartphones. These little devices have become a technological gateway to a library of applications and a sprawling metropolis of websites. This means a whole lot of people are visiting websites on the smallest screen imaginable – and it’s a touch-only screen to boot.
As more people are latching onto touchscreens web designers need to craft new solutions for mobile Internet browsing. In this post I want to cover a few guidelines for helpful touch-based web design trends. The design process will always be improving as designers innovate with new concepts and UI techniques. But starting with the fundamentals will make touchable web design more approachable and easier to accomplish.
Larger Page Elements
When planning a general website layout it’s important to consider the size of elements on the page. Each element should be fitted appropriately for the context based on relevance. But for touch devices you really need to ensure that elements are interactive and easy to tap on any screen.
This may not be such an issue when it comes to a fullsize website. But since most websites are responsive you need to consider which elements should be restyled for smaller screens. Notable elements that require interaction should be resized large enough that human fingers won’t be fumbling around.
The ever-popular iOS Interface guidelines recommend minimum button sizes of 44×44 which equate to the average finger tap. Obviously responsive design means that buttons could shift or adjust their width/height values according to the window, so try to keep all touchable items just above that limit.
The smallest iPhone screen is 320×480 which should always be enough room to design tappable areas. When it comes to organization think about which items should be most prominently displayed or require the most attention from visitors. These items should be sized much larger and still appear in proportion related to other elements.
Accessible Navigation
While a navigation should always be interactive there is more to it than just big links. Responsive design forces a slew of new ideas related to common interface guidelines. Accessible navigation most certainly does include links that are tappable and interactive to the average-sized finger. But accessible navigation also describes menus which are easy to find and easy to use.
Touchscreens have much less physical space but more interactivity. It’s common for UI designers to build cleaner responsive layouts that completely rearrange a navigation. For example hamburger menus are a big topic amongst designers who are either in support or opposition to the idea.
But you don’t always need to hide a navigation offscreen to accomplish accessibility. There are plenty of responsive navigations which drop links into a large vertical block right near the header. As long as there is plenty of space to browse the website you can try solution to get a clean-looking responsive navigation.
Remember that beyond just the design and interaction there’s also a little issue of readability. Navigation links should be large enough to skim on a mobile screen but not so large as to gobble up the entire viewport. I find it can help to bold text or give some extra spacing between links. Most of the time responsive nav items will be listed vertically which requires a careful balance of whitespace to appear helpful without overcompensating.
Reduce Excess Clutter
It cannot be overstated how annoying it is to roam through a deeply-cluttered website. The annoyance factor is three-fold when browsing on a super small touchscreen device. If there’s little room for tappable surfaces or readable content then you’ve got quite a problem.
It should be noted that a fully-sized website layout that can utilize 3 or 4 columns is A-okay to me. But when that site is resized down smaller to a touchscreen there’s probably no need to keep all of that content – especially in the same order.
Do not be afraid to completely remove certain page elements when it comes to smaller viewports. Not everything is required or even needed to improve usability. Stick to what really matters and specifically focus on why they’re even visiting the page. Smartphones are not the best device for Internet browsing so you shouldn’t be offering the best browsing experience.
Elements which don’t add to the overall content should be pushed toward the very bottom or completely removed from the page. Reduce the number of elements on-screen at any given time to allow visitors a greater depth of focus. When it comes to responsive design minimalism is a very powerful tool in your toolbox.
Swipe Space
While reading about this concept it may be difficult to visualize the idea of “swipe space”. But rest assured this is crucial to the usability of every mobile-responsive website. Since the page height is much smaller on mobile devices you need to consider how much content will be filling the viewport. Similarly there is no mouse or scroll wheel which forces users to scroll down with the swipe of a finger.
Open swipeable space is just a chunk of the page between interactive elements where users can touch and swipe without activating a link or button. One great way to accomplish this feat is using a wider line-height value. This way lots of space is available between lines of text to allow visitors the ability to swipe around the page with ease. Also consider the size of margins between paragraphs to see how they fit into the overall composition.
This isn’t a subject that you can regularly plan for each project but it’s something you should keep in mind. Nothing drums up some mild anxiety like glancing around a webpage for any place to rest your finger for a swipe movement. If you don’t know where to start just make something and then test it on a smartphone or tablet.
It will require some practice to get accustomed to building & rearranging responsive web design. Browsing related websites on your smartphone is one way to get acquainted with the many different solutions. This guide offers a few bullet points to get you thinking in the right direction. Touch-based devices have no mice or peripherals other than the interactive screen. Keep this in mind while designing and you’ll come up with some noteworthy solutions.