Responsive Web Design Implementation – 6 Best Practices

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.

Vinod Kumar Bhan

Architect - Technology, Virtusa. Vinod has around 13 years of experience in IT industry, including several years spent in consulting and deploying complex solutions. He started his career in technology in airline domain, and went on to focus on Enterprise Content Management (ECM) as a specialization. Vinod has worked, in the Middle east and US, with Fortune 500 companies in consulting model in the ECM space. Vinod has also implemented Web CMS solutions for clients across diverse industry verticals. Vinod is currently spending his time in Document Management and Record Management space. Vinod loves to travel and explore new geographies, by doing so appreciate nature and its creation.

More Posts

14 Comments

  • Pratik joshi April 6, 2012

    Excellent information shared by you related to user experiences based on web design. Thanks.

  • Website Marketing April 30, 2012

    Great post Vinod- informative and useful topic. Thanks for sharing!

  • Manas Swain May 14, 2012

    Great insight Vinod.

    With more and more fragmentation in the phone/tablet/desktop form factors, RWD is here to stay. “Graceful degradation” and “progressive enhancements” are the key.

    I personally think, CSS will evolve to another programming language altogether rather than being a styling instruction set.

    As the Chinese saying/curse goes – we live in exciting times 🙂

  • Sahil Azim May 14, 2012

    Great initiative to share this important information with us. I would like to add some more things

    1. Always use compressed and minified JS and CSS in application that will save bytes and lead fast rendering.
    2. Rendering of graphics through CSS as much as possible. that will lead to fast rendering the data

    Thanks

  • Website designers July 12, 2012

    Its really a nice informative web design post and I know this post will be very useful to many people.

  • 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

  • Arjun Nayak September 29, 2012

    The most useful article about the web development. It speak so many thing and unfolded looks similar to a bible regarding web design ethics.

    It describes trends, tactics and technology at the same time. Keep it up Vinod and keep sharing.

  • Nice article covers all aspects. Thanks.

  • Hardware & Networking October 21, 2014

    I actually added your blog to my favorites list and look forward to get the same quality content every time I visit your blog. Thanks a lot.

  • I’m happy to capture your article and I am looking forward to more of your article. Superb! Generally I never read whole articles but the way you wrote this information is simply amazing and this kept my interest in reading and I enjoyed it.

  • Tharushi Anna November 18, 2014

    Hi I just want to say that very nice post about web designing truthful and knowledgeable thanks for this

  • Designsolv (Pvt) Ltd January 9, 2015

    Valued insights on the UI/UX facets when creating responsive websites. Thanks Vinod, this post has been very helpful.

  • Lucio Santagata March 4, 2016

    Thanks for another great article. Where else can someone get that kind of information? I am currenty conducting some research on this subject, and I’m on the search for such info.

  • Akalya May 19, 2016

    Simple understanding of implementing responsive design onto our websites! Thanks for such a great article.

Comments are closed.