Businesses have yet to fully embrace the‘mobile first’ approach to web design.
“Mobile first web design” means that we start the web design process with the mobile experience first, which has more restrictions, then expand the experience and features to create a tablet or desktop version for bigger screens.
It involves the process of planning and developing a website, keeping in mind mobile-users first. This methodology of development changed from desktop-first, which has previously been the way of reacting to the surge in mobile internet users around the world.
Why does mobile first web design matter?
Recently, the global use of mobile devices to access the internet overtook desktop devices. This is directly linked to the sales of mobile devices overtaking PC/laptop sales.
Another way to look at this is that people are more likely to visit websites from their mobile phones today.
With the start of mobile-first indexing, Google has also changed their algorithms 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 mobile with a satisfying mobile experience for the user.
Tips to get started on a mobile first design?
Tip 1: Wireframing
A wireframe is the quickest way to visualise a draft concept of your website. It provides everyone involved in the project with a way to understand the high-level view of the website without getting stuck on colours, and finer details or content etc.
As a client, you can provide feedback in the early stages and if it meets your checklist of requirements, and we, as developers and designers, can understand how the elements will be laid out on your website, making our jobs easier when we move to the detailed design stage.
A simple and useful wireframing tool is available online for free at wireframe.cc
Tip 2: Use the thumb rule
75% of people use their thumb to operate the mobile device which when painted as a red-green zone looks as follows:
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 phones; with one hand. 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 mobile-users 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 which, voluntarily or involuntarily, a user always notices.
Tip 3: Separate mobile first content & design
Designing a web page for a big desktop screen doesn’t need too much though with regards to the content. The screen is big and can fit whatever content you wish to incorporate. The same approach, however, does not work in a mobile-first design. When the screen is smaller and we have only less than 3 seconds to capture the attention of a user, the content needs to be succinct. A good solution to replacing a lot of content on your screen is to use images, a hierarchical method of design, or through a better user interface.
Decluttering our design and content is important to move from the absolutely essential features of your website to the more advanced, nice-to-have features.
An example would be, for an e-commerce website selling products, the product page on mobile would at the bare minimum, need to show the product name, image, price and a button to add it to the cart. You could have additional information, shipping information etc. further down the page or as links that reveal that in a pop-up or accordion.
On a desktop you could have all of the above information readily available and using the bigger screen space.
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.
Tip 4: Prioritize mobile UX and UI
A mobile-first design needs to revolve around mobile users to increase engagement and conversions on our web application. While animations and transitions are as fancy to look at as they are 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 the navigation bar, which is always expected to be in the corner (left or right).
Another aspect of prioritizing the user experience is enlarging the touch targets for comfortable interaction. Unlike a desktop with a small pointed arrow, we touch our screens with our thumbs, which requires 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. 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 is easier to switch through media queries and you can follow the following chart to decide which size to go for in which scenario:
Tip 5: Call-to-Action button placement
Call-to-Action (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.
Hey, It’s Mahmud here. Recently your website caught my attention while searching, So I thought I should try to contact you by leaving a comment on your website.
Great post !