Taking into account the fact that the number of unique mobile users grows year by year, it becomes clear why web designers increasingly turn to plan the mobile adaptation of a site design right from the start.
Mobile-First web design is a concept quite unusual for someone whose work is not related to web design (it was first used by Luke Wroblewski back in 2009). Nevertheless, web developers very often mention such concepts as adaptive and responsive web design along with mobile-first. The first two concepts are time-tested, and thus known to the much wider audience.
In this article, we will discuss seven tips for creating a mobile-first responsive web design. Additionally, we’ll provide some examples of sites that clearly demonstrate the basic mobile-first design principles.
Currently, there are three leading approaches to the adaptation of websites to the screens of mobile devices:
To provide a better understanding of the differences, let’s define them.
What is a mobile-first design? This is a web design built with a focus on mobiles from the beginning (that is, its interface is arranged in such a way that it would be convenient to use even on the smallest smartphone display) and only then adapted to larger viewports (tablets, laptops, PCs).
In turn, adaptive and responsive web designs are somewhat different.
When building responsive platforms, developers base their efforts on the fluid grid – a special kind of layout in which, instead of fixed block sizes and distances between them, all the parameters are set in relative values. Thus, the site is automatically scaled depending on the size and resolution of the display. Among the disadvantages of such a strategy is the inability to accurately guess how the site will behave on devices with non-standard screens.
The principles of adaptive web design are almost identical to the responsive.; However, in this case, developers create several sets of fluid grid wireframes with different markups, one of which will be chosen depending on the user device screen format as soon as its characteristics are established. This approach allows achieving a much more positive user experience (UX) compared to the one offered by the responsive web design.
Among these three, the most universal, and the least resource-consuming, is the subject of our article – mobile-first web design.
So, how to design for mobile from ground up? Below we offer a brief tutorial containing some basic, but nevertheless important, recommendations for creating a mobile-first design.
The first thing you need to do to start creating your version of the mobile-first responsive design is to drop all ideas about how your solution would look on desktops. Focus on trying to fit everything into the small screen of a typical smartphone to make the user interface elements visible and accessible without zooming and scrolling.
If you start by creating templates oriented to the smallest mobile display, further scaling for larger formats would be much easier. Moreover, this technique will allow getting rid of unnecessary excess optional components of web pages, as well as develop a universal approach to using free space on the page.
To implement this, we recommend using an HTML/CSS framework, suitable for creating mobile-first adapted web pages. Preferably, in a development environment using templates that are compatible with mobile devices. Examples include Bootstrap, Foundation, Skeleton, SemanticUI, Pure, UIkit, etc.
Currently, the most convenient navigation format in mobile development is a drop-down list with menu items located vertically. Make sure that the user does not have to strain their eyes trying to read the text indicating the specific menu item. Also, using interactive buttons instead of the usual text strings will further simplify the navigation on your website.
As the web design sphere developed, the popularity of the layouts, which involve a maximum of free space, steadily increased. The latest trends include informative minimalistic icons, which reveal their function when clicked (or tapped). Due to this, all the interactive elements are represented compactly and the template itself is not overloaded with unnecessary details. Generally speaking, this approach usually applies to the desktop version of the website also, thus requiring minimal effort from the designer.
On the other hand, blind adherence to the principles of clean layouts can create obstacles for the conversion of your website. After all, excessive infatuation with icons and neglect of textual button labels may not be as effective for your visitors as it would be in the case of more traditional menu types. Therefore, before “cleaning” the design to the maximum, consider how rational it will be from the point of view of internet marketing.
When you develop a design adapted for use on mobile devices, it is very important to make sure that the pages of your website load quickly. Here are a few bites of universal advice that will help you in this:
One of the main problems in designing for mobile-first is forgetting the exact setting of video and picture aspect ratios. If these characteristics are not preset (4:3, 16:9, 16:10, etc.) or no mechanics to recalculate them is provided, the system of a particular device can change them independently. Potentially, this can result in broken layouts on some devices.
When the basics of your design are ready, you can start thinking of how the markup of your mobile-first website will look when seen on larger screens. In spite of the fact that the overwhelming majority of the elements will retain their original, mobile-centered appearance, there will be a couple that you will have to change. Otherwise, you risk getting a half-empty page with offset blocks.
Try to test how your solution looks on as many mobile devices as possible; especially Android-based, as there are a lot of manufacturers and screen formats. This will help you make your solution accessible to most users (for example, even for those who still use Internet Explorer).