How users understand responsive?
For many years now the world have the chance to see same content on different devices. And unfortunately for most of the people those devices became units of mesure.
Why my Ipad mini gets a better look than my laptop on this website ? My laptop is larger, I don’t understand.
People think about the size of their devices and not their resolution. But the design of a website is not based on device but on resolution!
It’s our fault. Or at least the fault of this pictograms :
Since we create responsive websites big brands use this type of icon to inform their customers that their websites fit their mobile devices (usually you can see it on tv ads under the logotype). People are used to it but it’s not necessarily well understood.
Recently I worked with marketing people and it was hard to explain that I just needed 3 or 4 breakpoints in my code to make website responsive for all devices.
- But the design is different on my tablet in landscape mode!
- Yes ! Because the screen size is wide enough to fit the large breakpoint. It’s responsive !
Website design just need minimum or maximum width to make a breakpoint, under or above it’s a different design. If we design based on resolution (and therefore pixels) we can fit to any devices.
It’s not unusual to see website with just 2 breakpoints, one to seperate small and medium resolution and one to seperate medium and large one. With this type of responsive in medium range we could have laptop and tablet landscape with the same design. And all of this without ever caring device itself.
So our users have no idea of what’s the real responsive, they just want it fits to their device. Because of this misunderstood we continue to create our wireframes and prototypes on this device, but we should do this on different sizes and ratios for better works.
For exemple we have a tool named responsivepx for testing responsive without thinking of devices.
If you like this article you might like graphyzart.fr (articles in french but ressources over the world!)
Thank you for reading !