Mobile has finally surpassed desktop in terms of time spent on browsing the web. Parallel to this, we see an increase in the demand for better user experience particularly in mobile which has been lagging for the past years compared to its desktop counterpart. Mobile responsive web development is a key consideration when developing websites or applications.
Creating better user experience for mobile does not necessarily translate to duplicating the UX design blueprint of its desktop version. As users tend to behave and expect differently when accessing a website via mobile, several web components are designed and developed distinctively to cater to specific mobile user requirements.
Here are three key components that influence design distinction between a desktop and a mobile version of a website:
Screen Orientation
Obviously one of the key factors that affect how a desktop and a mobile version of a website is designed is screen orientation. Desktop with its wider screen favours landscape-oriented content design while its mobile counterpart requires portrait orientation in order to fit contents within its narrow screen. This means that desktop users are in better position to digest web contents that are arranged horizontally across a wide screen. In contrast, mobile users find it frustrating to navigate mobile website horizontally. Mobile users favour vertical flow of content which suits well with the direction of how they scroll the screen, which is up and down.
Shown below are screenshots of Qantas Airline’s homepage viewed in desktop and mobile. The glaring difference shows how Qantas rearranges its web content from horizontal format for desktop to vertical for mobile.
Mobile Responsive Touch Interaction
Interaction with websites via desktop is made easy and comfortable by a cursor or a mouse. The cursor enables users to easily navigate the whole site. Even small buttons can be easily clicked by this hardworking tool. However, this is not the case with mobile websites. Mobile devices require tapping on its small screen and input keys in order to move around the site. Several instances that a user could mistakenly tap the wrong link or button just because the buttons are too small for one’s finger.
Considering this unique challenge for mobile users, UX design experts have to make critical web interface elements such as call-to-action buttons, menu buttons, and other navigational links large enough to be easily tapped on.
Shown below is the screenshot of the homepage of El Nido Resorts viewed in desktop and mobile. While the desktop version presents menu buttons horizontally, the mobile version makes use of a menu icon which when tapped will show all the menu buttons largely displayed in a vertical format for the users to easily tap.
Content Requirement
While content is king regardless of the device used by the user, which specific content element to prioritise is not the same. For the desktop version of a website, there is ample provision to present more contents per page. However, a mobile website does not have the luxury to do so. Mobile web design requires efficient organisation and prioritisation of content elements.
Taking into account screen limitation, user mobile behaviour, and the mobility of users who may not have consistent access to fast internet, the web design team may need to shorten word count to fit the screen, remove certain web graphics, or defer some elements to the next pages of the website.
In Trip Advisor’s homepage, we see how content elements were organise and prioritise when viewed via mobile.
In its mobile version, tripadvisor.com has removed its marketing description and brand tagline, simplified its search fields, and deferred the menu links of Hotel, Flights, Restaurants, Things To Do, Vacation Rentals, and Review to the lower part of the mobile homepage. This results to a clear-cut and actionable content elements that mobile users can easily navigate.
While there are several components that UX web experts have to take into account, these three components are what we consider as glaring and crucial. Ultimately, the examples here show how efforts on web design and development are focused on delivering better user experience across devices as more people become multi-device users than anytime in the past.
