Responsive Web Design is all the rage these days. It offers flexibility and efficiency, and provides value to the user regardless of their device screen size. There are problems which may come up, and Photoshop won’t be able to solve them. In the ever-changing world of web, the time of fixed website designs and resolutions is past. With the rapid influx of mobile devices in the market, web designers need to stay on their toes and adapt their designs to accommodate varying screen sizes and resolutions. Most online players are now prioritizing performance over aesthetics owing to the need to reach an ever widening audience and provide them with the most dynamic experience possible.
There are other obstacles too, and I have listed the most common here, along with their possible fixes.
Visual Design:
With Fixed design, client approved static images and screenshots basically spell out most of the visual part of website design process. Now, the designing focuses on elements and their arrangement and rearrangement based on varying dimensions and resolutions. When you are designing on browser and using HTML and CSS prototypes, it can be a nightmare trying to talk to the clients about how their website would actually look.
Fix: There are two ways to deal with it, often based on site’s complexity. One: Creating sketches for all website pages and adapting them for the dimensions and resolutions used by most. Two: Instead of creating wire-frames for all the different pages, create a system of components and work on adapting them to various configurations. Communicate with the clients and show them the potential design layouts on paper.
Navigation:
Every user is familiar with old school norm of site ‘navigation’ buttons – the three bars at top left corner of the page. Today, many users find it difficult to navigate beyond the menu, due largely to responsive designing. The magnitude of this problem increases with structural complexity of the website.
Fix: Good responsive designs make navigation self-explanatory. Designers should test navigation on different products to do it right. Furthermore, an inherent understanding of the audience, coupled with understanding of site content and architecture can help create unique-and-user-friendly navigation structures.
Graphics and Data Tables:
The web wouldn’t have been half as popular if it were all text and no images, which is why images are important for all great online experiences. For RWD, that means accommodating variations in pixel density and their movement on different devices. There’s also the issue of data tables, which are great to present information to the users, if only the designers are prepared for intricate work to accommodate rows and columns on various screen sizes. Designers hit this snag trying to make everything fit and still look sharp.
Fix: The lazy-load_images filter can speed up the loading process, allowing images to load only when they’re visible on the users’ screens. Using SVG format for icons will make them scalable, light, and high quality. For smaller data tables, go responsive. Other methods include abandoning large grids in favor of smaller tables (with link to the full version), building pie charts instead of tables, hiding less significant rows/columns (with drop-down menus for access to those), etc. Sometimes, simply flipping the table on its side could work too.
Speed vs. Experience:
Responsive websites constantly get considerably more traffic than their fixed counterparts. This sounds theoretically ideal, but huge traffic coupled with heavyweight responsive sites will drastically slow down loading times. In the age of instant gratification, that’s slow, agonizing suicide for online side of business.
Fix: Prioritize loading, from most important to least. In the order, load content, followed by enhancements, finishing with leftover elements. This approach will affect experience, especially on heavy traffic hours. This is where you need to stick to what’s necessary, meaning only those elements which convey the site’s purpose/message. Conditional loading has another bonus: it contains automation tools which take care of scaling and caching images. This saves time and effort if you make any alterations in future. You’re going to need all the time you can get, because as it happens, another problem tends to be…
Hiding and Removing Content:
Responsive designing takes time because of all the different elements that need to be included: UI elements, advanced search features, data tables and images, calculators and multi-step forms, third-party scripts on dashboards, and so on. It becomes something like a pointless hidden objects game, trying to decide which information is important enough to be shown and which isn’t. Designers sometimes compensate with a more compact mobile version of the website with lesser content. And on other times, the site looks like a jumble of thoughts.
Fix: Planning and preparation. That is the only way to arrange content so that developers need not hide anything from the site. Remove frilly, insignificant elements in early draft stage and focus on the site’s core structure. You can spend time dressing up your website later. It’s also good to give the users access to full-version of the website.
Conversion:
This is another predicament for developers since conversion process is challenging, perhaps marginally less difficult than creating an entirely new (and responsive) design. Should we change the code of fixed-layout websites to make them more flexible? Could they still perform if left as it is?
Fix: For light-weight, simple websites, conversion is both possible and profitable. Complicated websites are harder to convert to responsive. Designers can use reverse style sheets and templates or start rebuilding with Greenfield (which is a more viable option than leaving the site in its fixed layout state).
Compatibility:
Internet Explorer can create some compatibility issues (to the surprise of no one). Older versions of IE don’t support CSS3 Media Queries. Developers need to consider IE users and offer them an alternative solution without messing up the original layout. Tricky.
Fix: Polyfill solves the problem. It fills the gap between the developer’s expectation and browser’s capability, so to speak. Basically it’s a portion of code which provides tech that a browser should be able to provide originally. Another option is to use conditional IE style sheet with elementary styling. The problem can also be ignored if it doesn’t affect a significant part of user base.
Client Contentment:
Since methods of responsive web design are still undergoing changes, explaining its benefits to clients can be difficult. RWD methodologies are still being tested, polished, and refined; challenges and their solutions anything but foolproof. This can create uncertainty and confusion on clients’ part.
Fix: Demonstrating the benefits of responsive designing in action will most certainly garner positive feedback and approval. Designers need to explain that despite the time consuming process, responsive web design is worth it for their adaptability, ability to work on varied platforms, and steady but lasting advancement.
Responsive web design is becoming more popular, and will probably continue to do so in the foreseeable future. While the trend is here to stay a while, problems will arise and more often than not, there won’t be any official, go-to solutions to save the day. So it’s necessary to keep the end goal in mind: creating great user experience. The challenge will then be for the designer.
To move out of comfort zone and evolve.
About The Author
