Some startup’s and enterprises are spending a lot of money on web app development projects only to find out after the project is finished that their digital babies are not showing well on smaller screens (smartphones).
You could have for instance a product edit form that shows on a laptop/desktop browser like:
If the designers & developers didn’t pay attention to other screen sizes (smartphones, tablets), the result might look like:
A much better design for smaller screens could be:
And that is exactly what responsive design is all about: thinking upfront how a design should adapt to different screen sizes or to the orientation of the screen (portrait/landscape).
We can’t stress it enough: if you have an upcoming web app project, then demand from your app development company that it’s done in a responsive way. Be sure that you know exactly how it will look on big and on small screens…
In the past year, we regularly had to make quotes for projects that were developed without any responsiveness in mind. In many cases it was easier and cheaper to redevelop the complete front-end, than to try to adapt code from other development companies. So, these are costly mistakes you can avoid by adding this to your project requirements.
For one of our clients we created a demo to show them how their (current non-responsive) web app would behave in a responsive way. In order to not violate our NDA (Non Disclosure Agreement) with them, we adapted the demo to not reveal their specific domain.
The demo contained a responsive card grid where the number of card columns decreases as the screen size decreases. (from 4 to 1 columns).
The app shows 4 columns on a large screen:
On smaller screens (or when a user makes the browser window smaller), we gradually go from 4 to 1 column.
2 columns are shown for instance on a medium sized screen:
Also notice that the menu on the left disappears automatically when there’s not enough space, it is replaced by a slide-in menu. This menu slides in after pressing on the 3 horizontal lines in the upper left corner:
Finally we just show 1 column of cards on small screens (typically smartphones):
Another example of responsive design is the product edit screen from the beginning of this post.
This edit screen will adapt itself on smaller screens:
- The tab strip will contain icons instead of text
- The form will go from 2 columns of input to 1 column
Bigger screens:
Smaller screens:
These are all small tricks that we implement in our web app projects in order to have real responsive applications that adjusts themselves to the different devices (screen sizes) from where the app is used. The point is: Responsive Design shouldn’t be an afterthought, but should be taken care of from the start of your web app project!