bbi-logo-icon bbi-logo-twitter close-menu facebooklinked-in google-plushiring-badgelogo-1st-central logo-adam logo-ajilon clientlogo-beaglestreet logo-gh-construction logo-hotel-direct logo-key-recruitment logo-kwik-fit-insurance logo-pulsant logo-smurfit-kappa logo-telereal logo-urban-botanist rar-recommended scroll-upscrolltwitter ukwda google-partner logo-adecco logo-superbike-loans close-skillslogo-new-forest service-animation service-games service-interactive service-video service-video logo-unibet logo-flymo logo-orchard-pig logo-phoenix logo-bafta logo-arden logo-nextbase drupal-development brand-positioning content-creation social-media pr service-video strategy-and-insight brand-identity creative design ppc cro inbound-marketing

Responsive UI for Mobile Devices

Posted by
Tim Butler

Categories
Development

With a huge variety of devices now available, it’s important that a website is usable across all variations of different screen sizes and resolutions. Total traffic from mobile devices makes up as much as 50% on some of the sites we have built, and this number is rising consistently. That’s why we always take measures to ensure that sites load quickly, are easy to use and are accessible on all current and future devices providing a better user experience for everyone.

Key Considerations

There are many important aspects to consider when designing a responsive website, and a site’s UI (user interface) can vary greatly between a 27 inch desktop screen and a 3 inch mobile device. The most significant difference which needs to be accounted for is the method of interacting with the device. Whilst touch-screen monitors are becoming more common, the vast majority of desktop users still rely on a mouse and keyboard for browsing on large screens. Using a mouse allows far greater accuracy when clicking on links and buttons, whereas small targets can become frustrating and unusable for visitors who only have a touch screen to interact with. To counter this, it’s important that touch screen users have large, well-positioned elements to tap – this can either be achieved by using larger font sizes or adding extra spacing around these items.

Mobile Website Design

Site navigation on mobile devices can be tricky. Drop-down menus which are commonplace on many sites cause problems for touch screen users – as it’s not possible to hover a cursor over a menu item to reveal the hidden dropdown menu. Sites with many pages need to consider how they can be organised for mobile devices, ensuring all content can be found without making navigating the site a chore. A site map can be essential, as well as developing a well-defined, consistent site structure to make navigation as intuitive as possible.

A responsive website’s layout will change depending on the device being used, but it’s vital that important information isn’t buried or removed altogether. By carefully planning a site’s layout for all devices you can ensure that key information is always accessible. If we consider a site with a contact form in a sidebar on the page – on a mobile device there won’t be enough available space for this extra content so it often gets moved to the foot of the page on smaller screens. We can avoid this situation by linking directly to the form at various other points on the page, so the user can always find what they need quickly and easily.

As well as the size of the screen, it’s also crucial to consider the resolution of a device to ensure the best possible user experience. Most modern smartphones and tablets feature a high resolution screen, often referred to as a retina display. Images that haven’t been optimised for these screens appear blurry and pixelated, so it’s important to detect when a user is browsing from a high-resolution screen and display a more suitable image that has been prepared correctly.

One of the most frustrating experiences for mobile users is filling out details in website forms. Touch screen keyboards are often inconsistent, and typing phone numbers, email addresses and other data can be overly time-consuming and inaccurate. At BBI we analyse a user’s journey through a website, removing unnecessary fields that could create barriers leading to incomplete entries and lost leads. It’s also possible to define various input types that tell the device which keyboard is most appropriate. These include specific keyboard layouts for inputting phone numbers, email addresses and dates, some examples of which can be seen below.

iPhone Keyboard Layouts

New Opportunities

As well as dealing with the restrictions imposed by small screens and slower data connections, there are also a number of new opportunities that we can take advantage of when designing websites for new devices. Touch gestures such as pinching and swiping offer new interactions, and these gestures can be used to enhance a site and make it more engaging.

Sites can also make use of a device’s in-built hardware  – for example using GPS location data to calculate directions or locating nearby stores. It’s also possible to create links that will initiate a phone call directly from the website, making it even easier for customers to get in touch.

Conclusion

Mobiles and tablets make up a huge percentage of all web traffic, and it’s continually growing. It’s not a viable option to ignore these users’ needs, so by building a responsive site you can make sure these visitors have the best possible experience whilst browsing the site. At BBI, we build sites that work on all current devices, but we also future-proof our projects to make sure they will work on all future devices as well. That’s why we don’t just design 3 versions of a site; instead we develop a fluid, device agnostic system that works at any size, resolution or orientation.

Go Back