Responsive layouts, adaptive layouts, media queries and viewports are terms that are no longer new to the tech savvy generation of today. There exists a burgeoning trend where websites are creating mobile friendly versions to adapt to the relatively smaller mobile screens. Responsive web design (RWD), thus proves to be an emerging user interface design approach which may play an important role in the coming years.
RWD increases the adaptability of applications enabling them to run on various platforms (smartphone, a tablet or a laptop/desktop). It maintains code base and automatically re-engineers the layouts to suit the device used. This helps reduce duplication of efforts and maximizes productivity and operational efficiency.
Responsive Web Design Implementation – Best Practices
Fulfilling the user expectations is a big challenge given the diverse mobile devices which have come up in recent times. During implementation of one of our apps, we found the challenge affected not only the development team but also the QA team in terms of certification of the application.
Based on our experience, we came up with 6 best practices for RWD implementation:
1. Create multiple versions per image
Consider creating multiple versions of images for all graphic assets. This will help enhance the app display to fit smaller screens. In iOS world, we call them low res and high res; also called as Retina display.
2. Assign images to HTML elements
Since many small screen devices have higher screen resolutions, assigning images to HTML elements would help since the extra compression is then unnoticeable and file size is significantly smaller.
3. Reposition the global navigation on hand held devices
When viewing web pages on larger screens, the expected location of the navigation is at the top or left side of the screen. On hand-held devices, the navigation can take up all the screen real estate if it appears at the top. This can lead the user to believe they must make another navigation choice instead of realizing the content is further below on the page.
For hand-held devices, global navigation typically appears after the content. So a user can swipe upward through the content, and then be presented with additional navigation options. The challenge here is to reposition the navigation with CSS without needing to alter the HTML.
4. Restyle anchor tags
In addition to changing the position of the navigation, we can also change the style as well. Standard anchor tags are restyled on small screens to reflect the look of mobile buttons commonly used on hand-held devices.
5. Use large screen CSS as default for browsers
In order to keep backwards compatibility with older browsers, keep the large screen rules outside of any media queries. This will ensure earlier versions of browsers, that lack support for media queries, can still ‘see’ a set of CSS rules.
6. Use hybrid apps for hand held devices
Increase the approach of using hybrid apps for hand held devices, in which case you would use majority of UI functionality in HTML5, CSS3 related components and only use the native code when needed.
On the other hand, RWD approach also has some loopholes that have to be addressed to harness its true potential. A major challenge to the trend has been the fluid base layout of the devices. Fluids at times fail to get filled appropriately in the pixels to suit the display screen size. This takes a toll on user expectation. Also, the huge CPU and memory usage that results from resizing of images to best fit device screens has been another persistent cause of concern with RWD applications.
Despite the odds, there remain bright chances of the technology getting adopted largely by the web design fraternity, since the technology holds the potential of saving the effort of developing different forms of a single app for different display devices. To start out, organizations can implement RWD for simple websites. Meanwhile, there are many issues around RWD that needs to be addressed before the market accepts it with open arms.