Last year I wrote an article discussing all the coming web design trends for 2014. Everything was set this month to produce a sequel article discussing all the brand new trends for 2015. But during my research, it became clear that the majority of the trends that were to be focused on were all a part of a larger trend; a movement, even.
That movement? Mobile first design, and it’s trying to turn your PC into a mobile device.
Mobile First Design
With the dawning of mobile web the need to make websites accessible to mobile users brought about the era of graceful degradation, more commonly known as responsive design. This concept is built on the foundation that larger screens got all the goodies while smaller screens had them stripped away, making many mobile sites merely a shell of their computer counterparts.
Mobile web traffic continues to increase and a revision to the web design process is needed. Mobile users can no longer be an afterthought. Smartphones and tablets are being chosen for web consumption over computers more and more frequently, which means mobile websites can no longer play second fiddle to their larger desktop versions.
Enter Mobile first design, waving the banner of progressive enhancement. The concept is nearly the exact opposite of responsive design: a site is initially designed for smaller screens and then grown to accommodate larger viewports. This could mean adding additional features as the device size increases or merely modifying the size and layout of the same elements that are seen on the smaller version.
Consider this: what is a mobile device? We can’t use size as the defining factor as we now have tablets the size of small laptops. Touch-screen, you say? Go ahead and toss that one off a cliff as well because we now have touch-screens on devices ranging from phones to large-screen televisions!
Mobile first design ensures that even the most limited device will still provide a great user experience. Smartphones hold that title for websites, although the technological advancements in recent years put their processing power on par with some laptops and leaving screen size as their main limitation. No longer do designers have to decide which elements and features are headed to the chopping block as with graceful degradation; instead they are allowed to add to their creation as needed when working on a platform with fewer restraints.
Enough about the why. Let’s check out how designers are using the mobile first movement to turn computers into tablets.
Scalable Content To Fit Any Space
A typical website will have some sort of identifiable bounding box that keeps the content within a certain area of the page, but we can expect to see fewer of these in the future. Content is starting to be designed to utilize however much space is allowed so that it covers the entire browser.
The concept of changing based on screen size might be old news, but what is interesting about how mobile first designs are handling the larger screens is that we are not seeing the drastic layout changes that typically are accustomed to graceful degradation. Images and text are scaling up for larger screens, so when the same site is viewed on a tablet they are almost identical.
Navigation Through Scrolling
Get your mouse wheels greased up as the prohibition on scrolling has been lifted. Scrolling is a necessity on mobile devices which has helped make users more accustomed to the idea that what they’re looking for might be a few swipes away. This is especially true for home pages as users are more likely to scroll through a page to find content rather than try multiple links.
The freedom to scroll is sure to have brought much joy to designers everywhere as they are no longer bound by the requirement to stuff as much as possible above the fold. This allows for more unique and outside-the-box designs to be utilized and could mean the end for certain methods of displaying groups of content such as slideshows.
App-like Menus
Simplicity has been a trend for quite some time, and one of the most common practices for achieving this is to remove all of the non-essential elements from the user’s view. Even though the navigation menu certainly cannot fit into this category designers are beginning apply mobile practices to it across all devices and screen sizes to achieve simplicity nirvana.
Whether referred to as the 3-bars, the navicon, or the pancakes, anyone who has browsed the web on their smartphone knows how to find the navigation menu. This icon has been a great asset for the web on touchscreen devices. By allowing the menu visibility to be toggled on and off, valuable screen space can be made available for other elements without sacrificing site usability.
Thanks to user familiarity with this navicon we have began to see its use outside of smaller screens. Rather than displaying the menu at all times, the once mobile-only icon resides in its place and toggles a slide-out menu akin to mobile and web apps.
Over the short life of the World Wide Web we have seen standard practices change and evolve as technology advances and its audience changes. As the line between computers and mobile continues to grey mobile first design is set to be the next big standard, rising out of necessity on the back of responsive design. This brings about change both for the users and how they interact with the web, but also with designers and developers as their thought process must change to achieve their goals.
Has your design team adopted a mobile first approach to your web projects? Have you found clients open or resistant to this approach? Leave a reply below. I’d love to hear your thoughts.
More helpful articles on web design by Edge’s resident code whisperer, Gavin Heslop: