Hire us

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.

What are the Differences between Responsive, Adaptive, and Mobile First Web Design Concepts?

Currently, there are three leading approaches to the adaptation of websites to the screens of mobile devices:

  • responsive;
  • adaptive;
  • mobile-first.

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.

Seven Tips for Creating the 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.

1. Start engineering with the smallest mobiles in mind

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.

2. Aim for the simple intuitive navigation

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.

3. Leave as much free space as possible between the interface elements

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.

4. Ensure fast page loading

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:

  • Reduce the overall size of the images. Reducing the file size of images on the page is an obvious way to make it load faster. This does not mean that you must sacrifice the quality of media content. Currently, there are numerous image compression formats as well as lazy load features, which allow for the fast loading of images, while not inhibiting the display of the rest of the page content. We also recommend using large-scale graphics for your website, but fewer than originally intended. As the saying goes, the fewer the better.
  • Use HTTPS. Web development experts strongly recommend conducting all transfers through the HTTPS protocol. Not only will it have a positive impact on the safety of visitors, but also speed-up the operation.
  • Order the CDN services. Today, absolutely free content delivery networks (CDNs) exist that distribute sensitive data over a network of geographically dispersed servers. The visitor receives the content from a CDN server that is closest to them. This has a very positive effect on page loading time.

5. Use the correct media content scaling

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.

6. Carefully plan the adaptation to larger 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.

7. Conduct extensive testing

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).