Why Mobile Performance Matters in Singapore
In Singapore, which is considered one of the most connected places in the globe, the vast majority of the population is connected to the internet with over 96% of the population surfing the internet using mobile devices, as shown in the DataReportal report on the digital landscape in Singapore based on the Digital 2024 Singapore report.
Currently, the most likely user of your website is likely on the move, whether on the MRT, in the CBD, or in a hawker center. This single fact influences the way in which the Singaporean business website is considered, built, and maintained. The absence of mobile responsiveness is not simply an optional feature, as it is an essential part of the Singaporean business website.
The absence of mobile responsiveness is tangible, as users leave the site in seconds, and the desired outcome is not achieved. The absence of mobile responsiveness will cause the Singaporean business website to sink further in the search engine rankings as Google now follows mobile-first indexing, as announced in 2019. The following is a list of mobile performance checks for Singaporean businesses and their web teams, which you can go through systematically and understand where you stand.
Layout and Visual Display
The most prominent feature of a mobile-responsive website is how well the Singaporean business website performs on smaller screens. The following are the checks for the layout and visual display of the Singaporean business website.
Viewport Meta Tag Properly Configured: The viewport meta tag is required on all pages of the Singaporean business website. The viewport meta tag is used to instruct the web browser on how the webpage should be scaled in accordance with the screen size of the mobile device. If the viewport is not configured properly, the mobile web browser will scale the webpage based on the desktop screen size and then scale it down, making the text extremely small and requiring the user to zoom in constantly.
No Horizontal Scrolling on Any Page: If the user is able to scroll horizontally on the webpage, the content of the webpage will spill over the edges of the container. This is the most common and damaging mobile layout mistake. The webpage should fit within the screen width of the mobile device without requiring the user to scroll horizontally.
Make sure the text can be read without having to zoom in. On mobile, text should be at least 16 pixels to avoid having to pinch to zoom to read it. Most visitors won’t tolerate this experience, especially not on the second or third page.
Make sure images scale properly. An image sticking out from the edges of the screen or awkwardly positioned with respect to its layout friends means that CSS hasn’t been properly configured for mobile.
Columns should stack properly. Desktop layouts with two or three columns should stack to a single column on mobile. If columns don’t stack properly, then text and images will be squished to the point where they are not legible.
Headings should not break awkwardly. A heading that looks good with a single line of text on the desktop may break to an unbalanced two-line heading on mobile. Check your important headings to make sure they don’t do this.
Navigation and Interaction
This section is where many Singapore websites that work well on the desktop fail on mobile. These tests will make sure that users can actually use the website to navigate it.
Does the mobile menu open and close properly? The mobile menu toggle should work reliably without lag, errors, or the user having to tap it multiple times to get it to work.
Are the navigation links easy to tap? Apple’s Human Interface Guidelines suggest that tap targets should be at least 44×44 pixels. When users are trying to tap small targets, they often tap the wrong one by accident. It gets frustrating after the third or fourth time.
Does the dropdown work properly? Dropdowns that only work with hover are not going to work with mobile users. Make sure that dropdowns work properly with touch screens.
Search features should be accessible. If your site has a search feature, the search bar should be visible, the input field should be visible on mobile, tapping the field should bring up the keyboard, and search results should look good on mobile.
Sticky navigation should not cover the screen. A sticky navigation menu that looks good on a 1440px screen may look too large on a 375px screen. Make sure your mobile sticky navigation is compact.
Forms and Conversion Elements
For service businesses in Singapore, one of the key conversion goals is to receive leads from contact forms. Therefore, mobile forms should work.
Make sure that all fields work on mobile. Test each form on a real mobile device. If any fields do not bring up the keyboard, or if they are difficult to tap or difficult to submit without knowing what the error is, you will kill your conversions.
Input types should be used. Use type=’email’ to bring up the email keyboard, and type=’tel’ to bring up the numeric keypad. These small details will greatly improve your mobile form conversions.
Error messages should be clear and not obscure the fields. Validation messages that hide the form off the screen or use text that’s too small on mobile devices can be confusing for users on what to do.
The call-to-action buttons should be prominent and large enough to be tapped. The call-to-action, whether it’s “Submit Enquiry,” “Book a Consultation,” or “Get a Quote,” should be large enough to be tapped on mobile devices, with a minimum height of 44 pixels and enough padding to avoid accidental clicks.
Phone numbers should be clickable. A clickable phone number will reduce friction for the visitor when they are ready to call.
Page Speed and Performance
Page speed will naturally influence the visitor’s experience. Page speed has been a confirmed Google ranking factor since 2021 with the introduction of Core Web Vitals. When it comes to Singapore-based sites competing for local searches, mobile page speed is a non-negotiable.
The mobile page speed score on Google PageSpeed Insights is over 70. To check this, use Google’s PageSpeed Insights to check your key pages. Select the mobile option. A score under 70 on the mobile page speed indicates a problem with performance. A score over 90 on mobile page speed indicates good performance.
The page’s Largest Contentful Paint (LCP) is under 2.5 seconds. LCP refers to the time it takes for the content to be loaded on the page. LCP should be under 2.5 seconds for mobile devices, which Google considers a “good” LCP.
The page’s images are compressed and are the correct size for mobile. Desktop images on mobile are one of the major causes for a slow mobile page. Compress the images with no quality degradation and use the correct size for the mobile screen.
The web fonts are loaded efficiently without layout shift. Slow-loading fonts or fonts that shift the layout can cause a negative effect on the cumulative layout shift, another Core Web Vitals score.
Third-party scripts should not hinder rendering. Live chat, analytics, ads, and social media widgets have the ability to greatly impact mobile load times if not managed correctly. It is recommended that third-party script performance be regularly monitored, especially when new tools have been added.
Content and Readability
The technical and visual performance of a website is not the only factor that impacts the mobile user interface. Content readability is also an important factor.
Paragraphs should ideally be short. Long paragraphs, as used in desktop versions, can be overwhelming for mobile users. A recommended guideline for professional website design in Singapore is that, for mobile users, paragraphs should ideally consist of three to four lines at most.
Line height and letter spacing should also be comfortable for mobile users. While the content may look okay on a desktop, it may look too cramped on a 375px screen. Ensure that your CSS has a body line-height of at least 1.5.
Videos should ideally be embedded responsively. YouTube and Vimeo video embeds should ideally scale to the screen width, as opposed to fixed pixel sizes. Fixed dimension video embeds have horizontal scrolling problems.
Tables work well on mobile. Data tables with many columns are one of the more complex items to make mobile-friendly. If your site includes data tables, make sure they work on mobile or include horizontal scrolling within the table container, not the whole page.
Popups and interstitials should not block content on mobile. Google’s mobile intrusive interstitial penalty, which started in 2017 and remains active today, targets popups on mobile sites. Popups on mobile sites should be sized and positioned to comply with Google’s guidelines if your site uses them, especially on pages receiving organic traffic.
Accessibility and Standards Compliance
The Singaporean government’s IMDA has increasingly emphasized the importance of digital accessibility as part of the broader concept of quality digital experiences. These tests are intended to ensure that your site is accessible to the widest possible mobile audience.
– Colour contrast ratios comply with the minimum standards set by WCAG 2.1. Colour contrast for text and other interactive elements should be at least 4.5:1 over the background for all screen types. This is an important consideration for mobile use outdoors in Singapore’s sunshine, which can reduce screen visibility.
– Touch targets are not too close together or overlapping. When interactive elements are too close together, it can be frustrating for users if they accidentally click on the wrong thing. Be sure to leave enough space between all links, buttons, and other form elements.
– The content order on your site makes sense for screen readers. Users with screen readers on mobile should be presented with content in a logical order. Changes to the layout on mobile should not interfere with the logical order of content on your site.
More: Footer design for a sound website
Using This Checklist Effectively
The best way to use this checklist to improve your site’s mobile usability is to go through these tests on real mobile devices, not just developer tools. Try to use both iOS and Android, and a least one older mobile device with a smaller screen.
Google’s Search Console has a Mobile Usability report that will identify the exact mobile problems with your pages. It’s a natural extension of this checklist.
For Singapore businesses that have invested in quality website design services, mobile responsiveness is not a one-time process. It’s a process that needs to be ongoing. It’s the only way your site will remain successful as more content, plugins, and integrations are added over time. As the face of your site that Singapore visitors see the most, make sure it inspires their trust.