Brands adaptable: trend or needed resource ? by David Ocampo | Quaxar´s Interactive Designer The...
Over the last decade, everything related to mobile design has been considered with the same level of importance. According to research by Statista, just over half of all website traffic now occurs on a mobile device and that includes roughly 45% of all online shopping. Considering that the rise of smartphones has been over the last ten years, these numbers are expected to increase as mobile web browsing becomes more established and designs become more intuitive.
Mobile browsing is a reality that can no longer be denied and much less discarded when designing web pages, since this design can be the determining factor for the user to decide to stay and browse the web or leave almost immediately, hence the importance of working on it and not leave it for last.
We could say that mobile web design is the creation of a modified version of a web page from a horizontal format to a vertical format, which contributes to facilitating the user’s navigation in a more comfortable way in terms of visualization and usability.
As you may have noticed, it is important to pay attention to mobile and not treat it as a late upgrade to the desktop version. Websites that do not make a sincere and strategic effort to offer a quality mobile experience run the risk of falling behind their competitors and above all losing users.
To help you design mobile-friendly websites, here are some tips:
1-Use the mobile-first approach
This approach refers to designing the mobile website before the desktop version, thus encouraging designers to create it under restrictions. The restrictions are not only in size also in interaction since when using the mobile with one hand the actions are limited to touches and swipes. For example, let’s suppose that scrolling animations depend directly on mouse actions, this implies a problem for mobile devices as they cannot trigger the action due to the lack of the element.
As a result, mobile-first design tends to emphasize simplicity and ease of use from the start. This approach doesn’t condemn desktop versions to minimalist sparseness; on the contrary, it is easier to extend a simple design than to simplify a complex one.
Likewise, it’s important to test multimedia content first on mobile devices, because horizontal format photos or videos may not always fit properly in a portrait format.
2-Use recommended size dimensions for mobile
On a handheld device, space can feel more limited than in any other design context. But taking size constraints into consideration at the start of your project is the best way to avoid conflicts later.
Mobile screen resolutions will vary according to the device in question, now the most used measure is 360 x 640 (9:16 aspect ratio). With the support of Google Analytics, it’s possible to identify specifically the devices that users prefer to use to browse the website, thus ensuring that the design created is responsive enough to adapt to variations.
Regarding text, a font size of 16px is recommended for body text, but this may vary depending on the typeface, as some fonts are less legible at that size than others. In the case of headings, there isn’t a standard size that should be used, but the objective will always be to create a clear typographic hierarchy through the contrast of size, weight, and style. It’s recommended that font sizes be tested directly on a physical mobile device.
Multimedia content should also be adapted to the width of the device to avoid conflict, but it’s not a matter of adjusting the whole image, there can be cropping to non-main objects in the background, as well as zooming in to show only the main thing.
Finally, the size of each button to be placed must be considered, as the touch screen of a device is less dependable for capturing user input than a mouse and keyboard. According to a study focused on elderly users, it’s recommended that touchscreen buttons be sized between 42 and 72px for optimal accessibility.
3- Optimize for portrait orientation
Most users prefer to use the cellphone vertically, although they have the possibility of horizontal format, hence the importance of optimization.
The vertical format is ideal for single-column layouts, in which elements are placed sequentially from top to bottom and centered alignment for content is common, however, alternating left and right justifying can create visual interest and the illusion of a two-column layout. In addition, smaller elements such as icons and photos can be presented in a grid, while image carousels can split vertical scrolling with horizontal scrolling.
Web designers can layout content with white space and padding. This keeps content clean and readable while encouraging engagement through continuous scrolling.
Designing sections are also useful for grouping similar information so that the user understands the general purpose of each section without having to read deeply. Colorful backgrounds help differentiate these sections and creative section borders break up the boxy feel that these sections promote.
4- Minimize the menu
On mobile devices, the standard way to contain the main menus and submenus is through the “burger” icon, which is simple and recognizable. As a result, most mobile website headers tend to be reduced to that icon and logo.
For the display of this menu, the common approach is a sliding sidebar that is superimposed on a part of the screen with navigation options. This allows the menu to operate in a separate dimension from the rest of the page content while leaving space for the user to exit the menu and return to the previous screen.
When one or more parts of the menu contain submenus, they can be contained in nested options. It is advisable that when the new list of options is displayed, it can replace the existing menu, thus keeping the list short.
Fixing the navigation bar on the screen so that the user doesn’t have to scroll back to the top is a good idea, but you can also hide this bar when the user is scrolling down, to allow the content to have its proper focus, then you can show the bar again when the user starts scrolling up.
5- Collapse secondary content
Expandable sections are useful for eliminating or shortening content that is not essential so that the content presented is accurate. By resorting to this type of action, the explanatory information is optional and can be accessed only if you want it, you can use an inverted triangle icon or the “plus” icon for this purpose.
While hiding content seems like a bad idea, the results demonstrated by simplified navigation supported by persuasive headlines have far outweighed the possibility of information loss. This also contributes to the user interacting with the page and not just passively reading it.
The contents that should be avoided on mobile devices are interstitial ads and pop-up windows because although they allow saving space by overlapping content, they not only damage the user experience, but also Google penalizes these types of sites.
6- Limit form fields and text input
The more text input the user is asked to provide, the more damage is generated to the user experience, since it is not always comfortable to fill out forms by navigating through the mobile keyboard that requires scrolling through menus with one hand until the right character is found.
The option to auto-complete by predicting an address from a zip code or providing pre-populated selections for common email suffixes goes a long way in facilitating these interactions. Personal and login information for a user can be simplified through a few clicks with Apple, Google, or Facebook account-based integrations.
Third-party integrations with payment providers such as PayPal can also be useful on shopping website pages, where searching for credit card details can be a cumbersome task even on the desktop. If this option is not available, you can also allow users to quickly pay as a guest and repeat their shipping information in their billing information.
7- Mobile-friendly means thumb-friendly
According to research by Josh Clark, in his book Designing for Touch, users make use of the thumb in at least 75% of mobile interactions, including scrolling, clicking, swiping, and text input. It’s important to consider that users navigate with the less dominant hand while performing some other activity, therefore, it is equally important to prioritize thumb reach for all mobile interactions.
The thumb is the one that has a larger size compared to the rest, so for important interactions, it is necessary to generate designs on a large area, likewise, it is equally important to the location of the interactive elements on the page. Mobile devices are usually held from the lower end with the thumb resting on the middle, so studies have shown that the ideal interaction zone is around the lower middle area; other elements placed outside this area may generate access and interaction conflicts.
The tips presented in this article provide basic support to start facing the challenges of designing websites optimized for mobile devices, but it takes a lot of care and practice to master them.
To have a mobile website that is helpful and not an obstacle for users, it is advisable to contact a designer or agency specializing in web to get the most out of it and a great result. At Quaxar we can put you in contact with the team you need for this task, do not hesitate to ask for advice.
Information source: 99designs.com.mx/blog/
