Mobile compatibility is an inherent requirement for nearly every web development project today. Of course, the effort involved in creating a mobile optimized, responsive website differs from scope to scope – a static website requires significantly less effort to be made responsive than a dynamic website with user interaction features and content in multiple formats – but with the increase in site visits from mobile devices, more and more people are becoming mindful of the fact that a quality mobile experience for their website visitors will result in increased engagement.
If you’re considering a mobile-ready, responsive website, here are a few things you should keep in mind:
1. Screen Resolution
New mobile and tablet devices are being launched all the time, but it doesn’t seem like screen resolutions and aspect ratios are going to be standardized anytime soon. Each manufacturer has their own list of screen sizes & resolutions they believe to be ideal, which in turn increases a developer’s effort. On top of that, both portrait and landscape modes have to be considered. The best way to address this overabundance of viewports is by employing a fluid grid/fluid layout approach. This primarily involves switching from fixed-dimension designing to proportions or percentages based designing. Here’s a great guide by Creative Bloq on creating fluid layouts:
2.‘Graceful degradation’ vs ‘Progressive Enhancement’:
When developing websites or web applications, developers today - knowingly or unknowingly - adopt one of two approaches from a multidevice point of view – ‘graceful degradation’ or ‘progressive enhancement’. In the ‘graceful degradation’ approach, the idea is to develop your site or application with your ideal objectives and feature sets in mind, not allowing browser or device compatibility to limit your scope. You develop your ideal state, and then start building in fallbacks and fault tolerance for older, less powerful and less used browsers, devices and operating systems. This approach is more common in projects that aim to incorporate the latest best practices from both a hardware and firmware point of view, but at the same time need the final product to be somewhat compatible - with compromises - on legacy devices and systems.
‘Progressive enhancement’ on the other hand, approaches web design from a ‘simplicity first’ angle. You design and develop in a layered manner. The first layer is the simplest version of your project, which is accessible universally from every device and browser. This ensures that no segment of your audience finds your project inaccessible. You then build on top of this initial layer, adding design and UI elements, complex functions and features gradually that execute perfectly on more advanced platforms and form factors.
3. Content Management:
The use of ‘space’ is the biggest challenge when arranging content in responsive website layouts. Phone screens don’t provide viewing space like desktops do, so meeting your user’s expectation when he accesses your offering on smaller devices becomes essential.
Guiding the user in a proper manner and serving him the content he requires on the move, i.e. the user's experience, is the crucial factor. For example, for a brick and mortar store, the desktop site might highlight the range of product categories and products. The mobile site, however, might highlight location and contact details, under the calculated assumption that the visitor is trying to physically find the store while on the move.
4. Portrait or Landscape:
Responsive design doesn’t just end with variety in screen sizes. Even the screen orientation with which your visitor uses the device matters. This becomes even more significant in web applications.
Often, portrait mode shows a snapshot of data, while rotating to landscape unhides fields and displays more information for the same items, due to the increased horizontal space afforded. Mobile developers for this reason really need to consider whether their application will run solely on portrait or landscape orientation or will be switchable and offer different layouts and content for both. Smashing Magazine outlined a few examples of how the two modes can change the data displayed:
Source Link
5. Load Speed:
Your fonts, images, CSS transitions, JavaScript libraries, jQuery plugins all affect your mobile website’s load speed. People in general anyway have low patience and short attention spans when it comes to web browsing or application usage, and this gets amplified with mobile devices. Your visitor tends to be on the move, and swiftness of content delivery is key. Even a 1-2 second delay in load speed can result in your user dropping off and navigating away. The assets you use, your libraries and plugins should all be top-notch and updated if you want to deliver a truly seamless experience.
To conclude, a responsive website should be a blend of performance and ease of use. Mobile development is a separate scope in itself oftentimes, so do take care to ensure you develop for it with consideration, instead of adopting a one size fits all approach.
