DEV Community

Cover image for PWA and website responsiveness are not the same

PWA and website responsiveness are not the same

mvoloskov profile image Miloslav Voloskov ・2 min read

TL;DR: Websites should be device-agnostic while PWA should provide different UX based on whether your users would use touchscreen or mouse.

Have you ever wondered why there’s no such thing as @media ios or @media chrome? You’re right – that’s because your content and design should always be accessible no matter what browser does your client use. Of course there are media queries for width and etc, but the purpose is obvious – to adapt your design whenever it’s needed.

But let’s dive deeper. Are there websites which aren’t all about the content? Yes, and you probably already use them on daily basis. They call them PWA. PWAs, just like any other apps, are made not for displaying content but for enhancing your device’s functionality. Your camera or calculator apps are not for the content, right?

Websites are like newspapers, while apps are like distinct devices for different purposes.

This is confusing because there are just the same technologies involved. This is just like confusing SVG and PNG sprites. While both are just the image formats, their purposes and uses are entirely different.

Mobile devices have no hover. I mean, there are Galaxy Note devices with styluses and they does have a hover, but if your user pull out his regular smartphone, it comes with no hover possible. And this is just the most obvious thing to come to mind while the list of such things is really long.
Touch- and mouse-oriented interfaces are entirely different. Just try turning your Windows 10 to Touch UI mode and use it with a mouse – not that great, right?

Making PWAs, we should provide entirely different UX for either touch or mouse.

But what about functionality? My advice here is short and strict – never cut out functionality for mobile devices. Mobile functionality should be entirely the same while presented in a different manner.

Make apps responsively.

Discussion (1)

Editor guide
iskin profile image
Andrey Sitnik

You are right that functionality should never be cut, but your mobile check is very bar practice

What if desktop browsers will start to support window.orientation? What about “Use desktop version” checkbox in mobile browsers.

Screen size media query is much better way for the future. It has less false positive mistakes (only if you resize desktop browser to small window, but maybe mobile view is a great option in this case).