100 points to know about...
Eco-Design Web Development

Regardless of the benefits to sustainability and overall user-friendliness that mobile-first design can bring, you might come across certain constraints in the process of creating mobile-first. Below, we'll list those constraints, as well as helpful tips for minimising them so that your design doesn't suffer.

Constraint 1: Screen size

Because of the mobile phone's smaller screen, making room for all of the elements you've envisioned would result in crowding the screen and cluttering design.

Tip: Prioritise elements

As previously discussed, you can optimise the space on a smaller screen by determining which elements are most important for your clients and organisation's purpose.

Tip: Make your buttons big enough

As buttons are some of the most common interactive elements, you need to make sure that design for a smaller screen adapts to users' fingers. According to Microsoft, the ideal size for touch targets is between 7mm-9mm with a minimum spacing between elements of 2mm to enhance precision and avoid errors.

Constraint 2: Intuitive navigation

When prioritising your design, you may be faced with the dilemma of how you can adapt design and navigational elements to a smaller screen and still ensure that the online experience is smooth and user-friendly.

Tip: Add familiar 'shortcut' features

For design to be intuitive to users and still contain your less-prioritised elements, include 'shortcut' elements that users recognise. Two examples of such features are hamburger menus and floating action buttons. A hamburger menu contains navigational options, but they only appear when the icon is clicked (three horizontal lines), and thus, do not crowd the design. Similarly, the floating action button promotes a primary user action. It stays present on the screen throughout the user's online experience.

Below, image 1 shows the desktop version of a food packaging service's website.

Image 1:

Image 2 shows the leaner yet still intuitive, mobile-first design. The navigational options are condensed within a hamburger menu, and the most common action (contacting the service) is displayed with a floating action button (…).

Image 2:

Tip: Test on real devices

As mentioned before, if still in doubt, you or someone else should test your design to determine whether users can navigate easily and predictably regardless of the more condensed design.

Constraint 3: Performance

Using a mobile phone may be more unreliable because of slower connections and stricter data plans compared to local area networks.

Tip: Minify code

Improving the performance of your mobile-first website starts at the base level of development: your code. Minifying your code means removing the 'junk' aspects and, thus, improving site speed. For a list of free online tools that minify code, you can refer to Unit 13: Point 93 from Module 5.

Tip: Optimise media

Media elements like images and videos eat away at website performance. To ensure faster load times:

• resize images (image size should not exceed 600-700px for mobile devices; you can always provide the full-size image as an alternative link)
• compress files (for more on media compression, refer to Unit 8 of this module)
• save files in alternative formats (instead of JPEG/PNG formats save files in the more sustainable SVG format, which scales the size of an image to the screen)

Constraint 4: Time-crunched and on-the-go users

Location and time are constraints for mobile-first design because many of us, when using our phones, multitask, pay partial attention, or use them with one hand.

Tip: Choose content over navigation

Your design should prominently feature the content users are looking for without accentuating navigation options. This is because mobile users look for immediate answers, and therefore, certain navigational elements (such as a site map) are less time-efficient.

Tip: Remove unnecessary features

Adapting to compromised user engagement also means removing certain features to avoid distracting users further. Such is the case for pop-ups and advertisements, which only take up space in already constrained mobile screens without adding to the content. Another unnecessary and even redundant feature is a 'back' button on web pages since mobile phones already have physical back buttons.

For more design tips on working around mobile-first constraints, check out Luke Wroblewski's book, "Mobile first" (2011).