How to Develop and Test a Mobile-First Design in 2021

This content originally appeared on CSS-Tricks and was authored by Geoff Graham

The internet has connected 4.66 billion people with each other as of October 2020. A total of 59% of the world’s total population. Amazingly, this is not even the surprising part. The stat to look out for is mobile users and their rise in the internet world. Out of 4.66 billion people connected to the internet, 4.28 billion are mobile internet users. A number that reminds us of how vital mobile users are and why we need to keep them on priority. As surprising as these numbers are, everyone saw this coming with the sudden rise in mobile users and mobile sales all around the world. As a web developer, we have been prepared in shifting our design methodologies and development tactics according to mobile users for some time now. One such design paradigm is the mobile-first design which is a witness to our commitment to mobile internet users all around the world. A design strategy that starts with mobile users and works around their interest. This post takes the mobile-first design into the centre and explores the complexities of mobile-first design development and testing and how it affects our business in a positive way.

What is a Mobile-First Design?

Mobile-first design is the process of planning and developing a website keeping in mind the mobile-users first. This methodology of development changed from desktop-first, which has always been the way, reacting to the surge in mobile internet users around the world. Mobile-first design is a part of progressive advancement method in which we progress towards more advance design slowly.

Progressive advancement starts from a basic design fulfilling the requirements of the mobile device. This basic design consists of minimal elements on the webpage eliminating everything that a mobile user is not interested in. From here, we take another step and add a few more elements increasing the complexity of our design while sticking to the modern web design techniques and mobile-friendliness. This goes on until we are satisfied and have implemented all the necessary modules in our application.

Mobile-first design is a practice of starting the development with respect to the mobile user or a mobile device first. Contributing 52% of the internet traffic today, a mobile-first website can help us lift the overall engagement and make us visible on the internet (on Google). With the start of mobile-first indexing, Google has also twisted their algorithm to show that mobile users are the priority today. Mobile-first design is not a complex task but a series of small development changes that can help your website render perfectly on the mobile with a happy user. To develop a mobile-first design website, we need to absorb some habits and remember a few tips to test the application efficiently.

How To Develop a Mobile-First Design

The journey of developing a mobile-first design can be roughly divided into the following stages:

Wireframing

Wireframe’s importance in a mobile-first design is similar to a map when we construct a new building. Wireframe provides an architectural way of how things are going to be. With wireframes in hand, not only technical teams, everyone related to the project can understand the high-level view of the application or in user’s terms: how will my application look?

While clients and analysts can tick mark their checklist of requirements, developers can understand how the elements will be laid down on to the application.

A research paper published by KPMG, determining “Unsuccessful Information Technology Projects” revealed poor project planning as one of the reasons for project failure. The other good reason to use wireframes is that they increase the efficiency of the developers because of the clearer objectives. A similar result can be seen with TDD and BDD approach in testing.

Use Responsiveness and A Responsive Framework

A responsive framework is a crucial step in mobile-first design development. A responsive website adjusts itself with the environment it is rendered on such as screen size, platform or orientation. Mobile devices do not have a fixed size in the market. An overwhelming list on Screensiz will make you believe that applying media queries and meta tag will not work for all the devices and a generic approach is the only solution. Responsiveness is not only adjusting to the screen of the device, but also to the user’s experience. For example, images are an important part of a web page. Even though a user may skim the content, they will glance at an image at least once. It needs to be perfect! But while shrinking the aspect ratio of the webpage, we unknowingly focus out the image subject from the image. In the following image, the comparison speaks this point as the family becomes out of focus on a smaller screen device:

Simply resizing is a risky business as an image may lose its importance altogether. A good responsive website takes care of this aspect and render a different lower quality but cropped image on a smaller screen as below:

Or if I just show the mobile image, it has been cropped to as follows:

Since the focus is not the tree but the family, we need the users to see our subject with clarity. This is a responsive nature according to the user experience which is a part of a responsive website.

A responsive framework keeps the responsive needs in mind and has built-in capabilities to enhance the responsiveness of the website. With a responsive framework, the developers need not take care of every little thing and can focus on major issues such as the image resizing shown above. Responsive frameworks are more successful and popular in a mobile-first design strategy.

Follow the thumb rule

Before placing our content on the web page, we have to decide the location of each element with respect to the interaction habits of mobile users. A simple reason for this thought is the generic way most people use their phone; with one hand.

75% of people use their thumb to operate the mobile device which when painted as a red-green zone looks as follows:

The green zone in the above image shows the easily accessible area on a mobile screen. Our most important elements, such as CTAs, should reside in the green zone for a mobile-user to access easily. Remember that the user is not using a mouse to operate a mobile device. Reaching the red zone will take efforts and repeated actions of which, voluntarily or involuntarily, a user always notices.

The below-given image shows the efforts a user would have to take with a very small design change (which in my way, is not a mobile-first design):

This small change can lead to increased user engagement demanding no efforts from our user.

Untangle Your Mobile-First Content and Design

Designing a web page desktop-style demands no extra attention towards the content. The screen is big and can accommodate whatever content you wish to add. The same attitude does not work in a mobile-first way. When the screen is smaller and we have only less than 3 seconds to impress a user, the content needs to be concise and to the point. A good solution to replace a lot of content from your screen is to use images, a hierarchical method of design or through a better user interface.

The content thoughts are to be replicated when we work with elements in a mobile-first design for the same reason of lesser screen space. Providing a congested screen with too many elements spread throughout confuses a user and slides him away from the CTA conversion goal. This is also called a minimalistic approach (or minimalism) in web design. A minimalistic approach distributes too few elements on to the screen leaving out a considerable white space for the user. The following image shows the minimalistic design:

But a mobile design is different from a mobile-first design. Eventually, we would have to extend this web page for the desktop users too. Minimalism on the desktop is also a good approach given that the font-size and hero images are equally proportionate.

Decluttering our design and content reminds us why it is important to move from basic to advanced and not vice-versa (also called graceful degradation). Had it been the desktop design at the start, the team has to conduct the brainstorm sessions first to fill a large screen and then removing them one by one for the mobile device. By that time, management becomes too complex, hard to confine our elements and takes too much time and efforts. Therefore, start basic with a minimal design and then move forward which is the initial step in a mobile-first design strategy.

Prioritize UI and UX

A mobile-first design needs to revolve around mobile users to increase engagements and conversions on our web application. While animations and transitions are as fancy to look as to touch, the user experience is much more than explicit elements. Our user experience need not be too ostentatious but should engage the users without them realising our intentions. For example, elements should be extremely easy to find on a web page. A mobile user should never struggle to find the search button Conventional locations of the elements work in this case such as a navigation bar is always expected to be in the corner (left or right).

Another aspect in prioritizing the user experience is to enlarge the touch targets for comfortable interaction. Unlike a desktop with a small pointed arrow, we touch our screens with our thumbs which require a considerable large area. A mobile-first design encourages large clickable elements with white space between them to avoid unwanted clicks.

It is not a bad idea to keep these parameters intact while progressing towards the desktop side. Businesses have started to keep a better UI including large boxes to touch on desktops as well which shows their mobile-first design approach clearly. Enlarging elements also include determining the best font-size for your web page considering the smaller screen size. Font-size are easier to switch through media queries and you can follow the following chart to decide which size to go for in which scenario:

Remember that font-type also affects the font-size visibility and readability on a mobile device. Therefore, it is better to test and find your perfect size taking the above chart for reference.

Tip: A small thing to remember in developing a mobile-first design is to avoid hover-only elements on your web page. Hovering is a great tool on desktops but mobiles do not have any support for hover. They work on touch interaction. You can keep the hover design along with the touch facility but constructing elements only with hover property is not a good idea.

CTA Placement

CTA is an important button. It helps in conversion goals and every business wants its users to click that button and increase their conversion rate. Therefore it demands special attention from the team members. The location of the CTA is the first thing that should be finalised carefully reminding yourself not to let our user work too hard.

CTAs should always be in the reach of the thumb (remember the green zone?) and on the first presented screen (above the fold) as well.

Apart from CTA placement, the message and presentation of a CTA is also an art in itself but let’s leave that for mobile-friendliness discussions.

Navigation Bar

The navigation bar on a mobile-first design needs simplification more than the desktop ones. While the desktop design has also transformed navigation bars into different unique designs, mobile-first is still enjoying the conventional hamburger menu style. People expect that today! If a user cannot find an option on the landing screen, he looks for those three horizontal lines that he knows will take him to what he is looking for.

The following image shows LambdaTest transformation of the navigation bar on two different devices:

The mobile-first approach helps us in shrinking down the available links on the navigation menu as long lists of links are not appreciated well. For those who cannot sacrifice, a nested layout seems a better choice than intimidating the user with a long list of links. In addition, it also keeps our presentation clean and encourages minimal design with decluttered content approach.

Say No To Heavy Elements

A web page’s loading speed has become a make or breaks parameter in website designing. An Unbounce survey shows that 70% of the customers are influenced by a website’s speed. Their decisions are affected by the FCP or full page load. Rendering the FCP (the first thing visible on your website) is a better choice as the user has something to get engaged in.

Google recommends a loading time of 2 seconds and under. Currently, the majority of these websites do not follow this criteria. As much as 57% of peopleleave a website that takes more than three seconds to load. The conversion rates also take a toll when the page speed is higher than expected affecting business directly. So, how can we save ourselves from this?

Using lighter elements on a web page crafted for mobile users is the first step to go for. If images exist, they probably should be in a lossless algorithm format such as JPEG and of lower size. Resizing them to a lower ratio helps too since the mobile user is rarely concerned about high-quality images apart from the product images. Using CDNs can also help in decreasing the page load time. For a WordPress website, plugins should be as minimal and light-weight as possible. Static plugins are a good start but eventually, the elements on a web page should be lighter, using asynchronous algorithms for FCP and should make fewer requests to the server.

How to test a mobile-first design?

The above points assist us during the development of a mobile-first design that starts with a basic minimal design for the mobile user and increases the complexities without hindering the user experience. But an equally important aspect of a web application is testing it. Testing an application can point out hidden bugs and functionalities that either is not liked by the people or behave inappropriately. Let’s check out how we can go ahead and polish our mobile-first website by testing it.

Use Tools

Similar to using responsive frameworks in the development which gives us in-built functionality and takes care of common code, tools do the same in testing. A mobile web testing tool not only creates an environment for the website to render as, on a mobile device, but it also provides certain features that are extremely important for a mobile-first design.

Consider one such tool LT browser I recently discovered on ProductHunt.

LT Browser is a browser made specifically for mobile web testing and responsive testing of the website. It provides 45+ screen sizes for the testers to render their website on. With such a tool, you can easily find bugs using in-built debuggers and leverage hot reload features to help you in development as well. With built-in integrations and performance reports, you can analyze the performance and share it with your teammates easily.

Test & Debug on the go – Using LT Browser users can test and debug their websites on the go, its in-built developer’s tool really comes in handy to make a website seamless across devices.

Network Throttling: This is an amazing and unique feature offered by LT Browser utilizing which a user can check how the website performs under high and low network bandwidth.

Local Testing: Local testing allows the developer to test their website even before pushing their website online. With the local tunnel, they can view the website on any of the 45+ devices from their local system.

Performance Report: To analyse the final website performance, developers and testers can view the google lighthouse based performance report that will help them change certain website aspect in order to score more both on mobile and desktop devices.

Tools help you increase productivity and keep you efficient during the process. The choice of tools is the personal choice of the tester but they definitely should play a part in the overall testing.

Cross-Browser Testing

Cross-browser testing is the process of analyzing your website on different target browsers, operating systems and resolutions. For a mobile-friendly website to be successful, it should render as intended on a mobile screen without worrying about the platform and browser used. This can be tested through cross-browser tools like LambdaTest

As a tester and a developer, it is definitely not a good idea to take these efforts manually. There is an overwhelming number of OS, browser and resolution combinations that will take too much efforts to install and test. A better way is to go for online cross-browser testing tools with mobile browser and OS support or a mobile-specific browser like LT Browser discussed above.

So, what are we looking for in a cross-browser testing process?

Cross-browser testing looks for issues with the elements of a web page and whether they are supported or not. While functionality testing is another segment of testing, cross-browser testing points out the cross-browser compatibility issues. For example, if you have used CSS subgrids on the web page, they might not render on Google Chrome version 62. The same goes for Javascript libraries and other code. With a browser matrix in our hand, we can rest assured after performing the testing that our user will not be confused as he would when an element crashes on the webpage.

Validate HTML and CSS code

Every mishap on the web page is not the browser’s fault, sometimes programmers commit mistakes too! Since a web page is rendered or parsed by the browser and not compiled, errors and warnings do not stop a web page from loading. Now we have performed cross-browser testing but still cannot find an issue with a missing element is generally a wrong syntax fault. Such syntax errors and not following the W3C web standards can land us in trouble when we progress from mobile-first to complete desktop designs.

HTML and CSS code is very easy to validate. There are a lot of tools available which can do this job for us. Some of them are Validator.nu, W3CMarkup Validator and W3C CSS Validator.

Network Performance

In our efforts to test the page load speed of the web page, a major hurdle is a network. A slower network means slower downloading of web pages and more page load time. For a mobile-first design, it is extremely important to cover all types of users while performing the testing. One such section is the users with slower networks such as 3G network constituting 12% of North American internet users. Only 4% of people use the 5G network in North America now. Imagine this number for countries with poor network infrastructures!!

Network performance can be tested on a real device by switching the connections or through an online tool that provides such features. LT Browser has a network throttling feature to test the website on different connections which helps while performing responsive or cross-browser testing.

A/B Testing

A/B Testing is a type of variation testing or split testing that shows different variations of a web page to different segments of users. Website owners then analyze the performance of both versions and choose the better performing one. For a mobile-first design application, we may develop everything perfectly following every rule in the textbook but the final verdict is up to the user. If the user is not pressing that shiny CTA button, we need to fix that by knowing what the user wants.

A popular question in A/B testing is, where do we create the variation? We cannot jumble up every element on the web page and create fifty variations for the users. This can have an adverse impact on the business. To understand where we are going wrong and which elements need adjustments we can choose the Heatmap features. Heatmap allows the web app owners to see the user’s engagement with the web page and which part are they ignoring.

A famous case study of A/B testing includes the 40% improved sales on a varying page of EA Sports’ SimCity 5 from this:

To this:

Buyers were least interested in the pre-order offer I guess!!

Usability Testing

The final step in completing our mobile-first web design is to present it to real-users and take their feedback. A/B testing is good, but even if you see the Heatmap of the web page, you cannot talk to a real user and ask them why are they not pressing the CTA button? Usability testing covers this hole.

Usability testing is performed with the real users who should be the target audience of the application. For example, you cannot ask a poet to check out a coding website right? Once these users are selected, we ask them to either record their session, their screens and speak their thoughts out loud. Sometimes, the testers can sit with the users too and make their notes by asking the questions. Sometimes, we can just ask them to fill a form with various options. Whatever way you do, usability testing is important and uncovers hidden bugs that are hard to find in a mobile-first design which is a tricky business in itself.

Why does mobile presence matter?

Our analysis of mobile-first design and its development techniques will make you wonder, why should I do mobile-first design? Does mobile presence matter that much?

A few days ago, I was going through my website on Google Search Console and the popped up message was the following:

Mobile-first design is so important today that Google considers mobile-first indexing as the primary search index technique and increasing the visibility on mobile searches which constitutes 52% of the internet traffic!! But this is from Google’s side, what do we have in the box for us?

Better Google Ranking

A mobile-first design is mobile-friendly. It is for mobile users. Therefore, Google realizes that we have a website that is perfect for a mobile user and makes us more visible on queries generated from a smartphone. As a result, our rankings improve. Better Google ranking attracts other businesses as we are more visible and can advertise for them on our website if we want. Since users generally do not remember the web site’s name, a Google search will help us generate traffic and conversions.

Higher Conversion Rates

A mobile-first design will ensure a decrease in the bounce rate. When bounce rates are low and people are actually interested in your website, they will stick to it and will also return back often. Given that the CTA is positioned right with all the eligibility criteria satisfied, a mobile-first design will push your conversion rates higher directly generating a better engagement and goal establishments. As a result, you will get a steady business from your application.

Large Audience Coverage

Businesses also generate a large audience base when they are visible on the Google rankings and have built a mobile-first design. A large audience base is the strength of any business. They require lesser efforts to be engaged as the trust has been established. On the other hand, seeing a larger involvement with your application, you can also introduce other features and services. Such a strong base is a marketing bonus for businesses.

Better Market Presence

Satisfying all the three requirements discussed above directly results in a better market presence. Even though mobile-first designs are recommended for every business, they are currently rare. Mobile-first design is yet to become a standard in web development and choosing it will keep you ahead in the race. A Google search keyword that shows your link in the query results increases your market presence among the competitors. They not only have to work harder to overtake you, but they might also need to restructure their designs if they are still working on desktop ones.

A better market presence means better word of mouth about your happenings, features and upcoming highlights. Such a presence is a direct cause for better revenues and a better future.

Is Mobile-First similar to Mobile-Responsive?

A short answer; no! Mobile-first is a design method. With the mobile-first design, we develop our web application for mobile users first. This starts from a very basic design and gradually advances towards a more complex design structure while keeping in view the mobile-friendliness and mobile users on priority. Mobile-first design is not a development technique but a design strategy that works as a catalyst in development. The developers can get a clear objective and work faster with the defined design.

Mobile-responsive is the ability of the website to adjust itself according to the mobile screen size. A mobile-responsive design need not start with the mobile version of the website and neither takes the thumb area or content relevance into account. Mobile-responsiveness is just concerned with rendering the website on a smaller device.

A mobile-responsive design strategy can be considered a part of the mobile-first design since to produce a mobile-first design, the application needs to be responsive in nature. The mobile-responsive design strategy was a good call when the mobile users had just started to increase. Today, there have been extensive researches on mobile designs in which a mobile-responsive design strategy is hard to survive. To cater to the needs of 4.2 billion mobile internet users, we need a mobile-first design.

---

The post How to Develop and Test a Mobile-First Design in 2021 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

This content originally appeared on CSS-Tricks and was authored by Geoff Graham