Jumping the Hoops of Different Screen Sizes
We all know it — there are more types of gadgets in our house nowadays than there are family members sometimes. And with that, a screen on everything — phone, laptop, tv, tablet, and even watch.
But what happens when we want a seamless well-connected experience on everything we work with? The same app or website, at the same point, showing us the same information on an almost-same screen across 5 or 6 different screen sizes? Well, that requires consistency in design — and therein comes in Responsive Web Design.
What is it?
Now, most of us here don’t need to be told what RWD is but for the ones in the back — here’s a quick recap.
“Responsive Web design is design and development that responds to the user’s behaviour and environment based on screen size, platform and orientation. It consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.”
— Smashing Magazine, 2011
And now that we have that out of the way — let’s move to the juicy stuff. How do we create really good designs across screen sizes? Increasingly, editors are using CSS responsive web design to make it much easier — by doing the heavy lifting for us, making our designs responsive straight from the CSS.
But despite the editor revolution, here are some angles that make responsive design relevant today and for years to come…
Responsive web design benefits you probably didn’t know about
1. Mobile-first is your UX cheat code
When we start designing for responsive screen sizes, one of the tried and tested UX secrets is that of mobile-first design — where we design the smallest screen first and add details as it gets bigger.
This is counter-intuitive to many, as we are used to designing for the largest real estate first, but there’s a secret to this process — it forces you to make the tough decisions about which aspects on your screen are absolutely useful.
Making these tough decisions for smaller real estate early on make it a much smoother experience with the least possible noise, and overall better UX.
2. Google will thank you for it
Google applauds this and rewards it with better SEO rankings — some reasons for this are cleaner code, lower likeliness of repeated content, and better overall metrics of time spent, load time, etc. because of overall better UX.
Another reason for this is that when Google crawls your site, it only needs to crawl it once if it’s designed responsively — and this saves resources and improves efficiency, so your site’s index is always fresh.
3. Designer mindset is important
The way we think about our design systems and assets are what makes us designers, and cultivating the right mindset is a very important thing to do.
Thinking in a fluid way is very important for a designer. When it comes to the creative process, nothing should be set in stone — believing every barrier can be toyed with is what helps us innovate. Fluidity is an important part of responsive design. Certain grids that are used are fluid and movable, and that induces the right kind of creativity in the mindset.
4. The user journey is more than you think
Thinking end-to-end about the user experience is important. When we map a user journey, thinking about one particular device is a common mistake. The user might use Spotify on their laptop at work — mobile phone on their car ride home — and switch to their home theatre when home. But if a product team is only designing for the mobile app, it becomes difficult to account for all these different legs of the journey.
In addition to that, there are different ways to interact between screens. Sometimes screens can be used simultaneously by way of screen share or mirroring — or even in a complementary way, as a controller. All these different use cases can only be considered and catered to properly with a responsive approach.
5. RWD has other unexpected benefits
In addition to all of this, there are some unforeseen benefits to all stakeholders to designing responsively -
- Responsive sites make it easier for users to share and link to your content with a single URL.
- It helps engineering teams utilise less engineering time to maintain multiple pages for the same content.
- It helps product teams manage content and reduce the likelihood of repeated / clashing content on two separate sites.
The future right now looks like easier and easier RWD. But apart from that, it’s clear now that we haven’t seen the last of responsive web design yet — given that there is so much more to it than just cross-screen design — and we will continue to see more and more responsive tips and tricks as the number of screens go on increasing in our lives.
