The concept of responsive design has been around for a while. Responsive design helps you create applications that render well on all devices irrespective of the screen size and orientation.
Traditionally, you would create a website that looks flawless on a desktop, and then try to make it fit into a 4 inch screen using media queries. However, the current generation of applications have adopted a mobile first approach because more than half of the web traffic originates from mobile devices.
Talking about modern mobile designs, they are required to be responsive, sleeker and more intuitive than its desktop counterpart. Responsive design isn’t about media queries anymore, it’s about keeping the design simple.
This article talks about the top challenges presented by responsive design and the strategic considerations that will help you overcome them.
Let’s get started!
Implement a Visual Design Stage
Designers require a different mindset compared to that of developers. The challenges faced by a designer might not be obvious to the client or the development team. It used to be common practice that the client and designer would settle for a web design for for desktop screen first. It would then be up to the designer to create a responsive mobile view that matches the desktop view.
Although that works, visual changes are easier to implement on a graphical editor than on an actual application. If for some reason, the client disagrees with your design choices, you will have rewrite a lot of code from scratch which is expensive.
So, it’s better to create a visualization for all standard dimensions and move to the next logical stage only after client’s approval. There are tools such as Sketch and Zeplin that help the designer, developer and client collaborate and create application mockups without much hassle.
Mobile-First = Content-First
If you’re starting something from scratch, design your mobile version first. While building for mobile phones, you will have to consider all the limitations such as the screen size, bandwidth, pixel density etc.
On top of that, you need to prioritize the content without stripping off any essential data. This leads to a design that is content oriented and ultimately focused on what the user wants.
Once you are done with the mobile design, you can work your way up without much hassle.If you follow this pattern, you encounter all the major limitations upfront and you can settle for a design that works on all platforms. When prototyping, you should use the responsive breakpoint menu and start with the smallest screen size and work your way up.
Appearance of Images and Icons
Most of the devices in use today have high pixel density and small screen size. Scaling the width of the image to the full width of its parent container is a popular practice for creating responsive images.
However, scaled images tend to lose details. Furthermore they will appear pixelated on devices with retina display. So, instead of hardcoding images into your application, you should consider fetching the image on the fly and rendering it back to the user.
Popular cloud services like AWS S3 and Cloudinary help you store images and fetch them dynamically. You can also dynamically optimize images which is particularly useful in the following scenario.
Imagine that the app is taking longer than usual to load because the user is on a limited network. The application will detect that the application is taking longer than usual and fetch compressed images so that the user experience isn’t compromised.
Longer Design and Development Cycles
Responsive applications need to work flawlessly on all devices. Creating a flawless design for a fixed screen size is hard, flexible designs are even harder. While working with modern front-end libraries like React and Vue, you might have to work closely with the developer because the design part and the development part is closely tied.
As a designer, always keep in mind that the design cycles are longer and you will have an active role in development and testing cycles also. Usually, it takes twice as longer to design a responsive design compared to that of a normal web design.
Showing Data on Smaller Screens
Displaying too much data on a smaller screen is problematic. Data tables, for instance, don’t do that well with responsive design. When your table is narrower than the minimum width of the table, you will have to either zoom out to see the whole table or zoom in to see the exact text.
But that’s far from ideal because you will be introducing both horizontal and vertical scrolling. Mobile users are okay with scrolling down, or scrolling sideways — but not both.
There are a few way that you could fix this. I would personally recommend getting rid of everything unessential and displaying only what the user needs to see. The other popular techniques are: displaying pie graph using the data in the table, showing a stripped down version of the table with a link to download the entire table as a pdf etc.
Alternatively, you can also reformat the whole and build a table out of each row. This will take up more vertical space, but the width of the table will be limited to two columns.
Migrating a Fixed Width Project to Responsive One
Converting a fixed width web application and turning it into a responsive one is hard as far as a designer is concerned. If it’s a static website, you can either start from scratch or use a design library to add the responsiveness. But most often than not, the website at hand is usually dynamic and more complex than your everyday project.
In that case, it’s better to rebuild the application without giving much consideration to prior work. This approach is known as greenfield rebuild.
The greenfield rebuild is a technique take an incremental pattern where you make incremental changes and add it to the original design. Once you are done with it, you can then further enhance the mobile view by adding interactions specific to that platform.
Responsive design is about keeping things simple without sacrificing the content. However, there are many roadblocks that you might usually come across. In this article, we’ve discussed some of the popular challenges while building a responsive application. If you have any thoughts that you would like share, let us know in the comments section.
Gilad David Maayan is a technology writer and developer community advisor at Cloudinary. Gilad is a 3-time winner of international technical communication awards, including the STC Trans-European Merit Award and the STC Silicon Valley Award of Excellence. Over the past two decades he has written over 70 technical books, white papers and guides spanning over 5,000 pages, in numerous technology sectors from network equipment to CRM software to chip manufacturing. Gilad holds a B.Sc. in Economics from Tel Aviv University, and has a keen interest in psychology, Jewish spirituality, practical philosophy and their connection to business, innovation and technology.Visit Website