Back in 2012, responsive design was all about using CSS3 media queries and creating @media breakpoints. There were standard device dimensions and as a designer, you’d be crafting your design to look flawless on these standard devices. Fast forward to 2018 and you have to ask yourself whether you should consider using media queries at all.

Mobile devices account for about 52% percent of the total internet traffic worldwide according to Statista. Going by that number, you should be more focused on a mobile first approach to building responsive applications. Modern responsive designs are built on top of Flexbox and Grid Layout, along with Multi-column layout. Although these specifications take the complexity away from creating responsive development, there are always challenges that get in your way. So, here are top 5 challenges that you might come across and the best possible solutions to fix them.

Making Images and Icons Responsive

Images and icons are crucial to any application. Images need to be scaled down depending on the device width. You need to also consider retina display on Apple devices so that the image details aren’t lost while scaling. Bad responsive design tends to make images bigger than they supposed to be or blurred — both cases which we would like to avoid. To add to a designer’s woes, images have to be optimized so that the users that have limited data connectivity don’t have to wait ages for them to load.

Solution

An easy solution to responsive images is to use CSS properties such as width and max-width to scale down the image width. Here’s an example that works.

<img src="[image link]" style='width:100%; max-width: 400px' border="0" alt="">

This is one of the easiest way to get it done. Alternatively, you can use a library such as bootstrap that supports fluid images using .img-fluid with max-width: 100%; and height: auto;.

There are couple of new ways to add responsiveness to images. For instance, you can use srcset and sizes attribute for the <img> and the <picture> tags. Here is a demo of how it looks like:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width: auto;">
</picture>

You can use the picture tag to use multiple source images and the browser makes a choice on the image to be displayed based on the device dimension. To know more about srcset, I’d recommend reading the post on CSS-tricks.

Displaying data on smaller screens

When you have large amount of data that needs to be displayed back to the user, developers resort to creating tables. Tables usually make sense on a bigger screen, but it doesn’t work that well on mobile devices, especially when the tables are complex and convoluted. To make the content more readable, you would want to avoid the horizontal scrolling completely wherever possible.

Solution

Responsive tables and libraries that support responsive tables might be of help. However, the table will have a horizontal scrollbar that you should often try to avoid. The other popular methods include: stripping off unessential columns and minimizing the amount of horizontal data, building compact pie charts instead of tables, swipe/scroll through the columns while keeping the first column fixed etc.

Another alternative is to make each row a table of its own. When the window size is narrow, you can use the @media query to reformat the structure of the table to make each row into separate table that you can scroll through vertically.

Adding responsiveness to fixed-width layout

Fixed-width layout used to be a thing in the past, but because of the increased reliance on smartphones, making a transition to responsive layout is crucial if you want to retain your customers. Stats say that 74% of your mobile visitors will leave your application if it’s unresponsive. That’s huge. But from a developer’s perspective, this is also one of the most challenging thing to do.

Solution

There are multiple choices here depending on the complexity of the task involved. If it’s a static website, you should consider a framework to add the fluidity to your fixed-width layout. Popular framework like Bootstrap and Foundation help you transform the fixed-width layout to a responsive one.

On the other hand, if the app has a complex UI, chances are that it’ll break quite easily and won’t easily fit into a responsive design. If that’s the case, you should consider leaving the desktop version as it is. Instead, create a new layout from scratch for the smaller screen. If your client likes it, you might get lucky in persuading him/her to revamp the desktop version too.

Building complex navigation menus

Navigation menus are an integral part of modern UI. Navigation menus are meant to make the user’s navigation easier by having all the relevant links at a single place. On the desktop version, the multi-layer drop-down menu works. But to make it responsive, you’d have to resort to the three bars at the top left corner of the page.

Solution

Responsive libraries automatically make the navigation menus that can accommodate the brand name, navigation links and even drop-down lists. In my opinion, you should keep the navbar fairly simple and aesthetically pleasing.

If you need to list certain categories in a drop down menu, create a dedicated page for that. Abstract away all the unessential details from the navbar.

Supporting older browsers

Older versions of browsers are a cause of headache for the developer. For instance, Internet Explorer version 8 and below do not recognize media queries and most of the other HTML5/CSS3 features. Supporting these browsers while building a responsive layout is synonymous to killing developer’s time and creativity.

Supporting older versions of other popular browsers like Firefox and Chrome is also an issue when the browsers don’t support the specification that you are going to use.

Solution

It’s 2018 and you don’t need to support anything under IE11 unless you have a fairly large audience who use them. It might be a good idea to have a look at the browser usage share of each individual browser version on StatsCounter, This should be a good starting point to decide if you want to support a particular browser or not.

Even if you get IE out of the picture, there are a few challenges posed by older versions that doesn’t support new specifications. In that case, you should consider browser-specific prefixes.

Conclusion

Developing responsive layouts is not challenging on its own, but there are still questions left unanswered. In this article, we’ve covered some of the popular challenges that you might come across while working on responsive design.

Limor Maayan-Wainstein

5 Open Source Security Risks You Should Know About

5 Challenges of Responsive Development and How to Solve Them