In the last couple of years, we, the web community, have tried hard to distill the basics of responsive design into an easily consumable framework, making it easy for everyone to use and adapt. I say we’ve been successful here. Many large consumer websites have refactored and adopted responsive design in 2015 and beyond.
But unfortunately, there’s a catch. We’ve oversimplified responsive to a point where most just create three breakpoints based on the width of the page: one for mobile, one for phablet, and one for tablet/desktop.
What we conveniently ignored when dropping tablet and desktop into the same bucket is the fact that resolution is pretty much the only thing they have in common. Literally everything else is different. The context. The input method. The screen density. The viewing distance!
“So what!” we all collectively say, “I’ll just make my buttons and UI bigger and less dense so they work on tablet and desktop, and look at my amazing PageSpeed Insights score now!”. And so we’ve arrived where we are today: A web full of airy, “beautiful” and minimalistic tablet versions of websites on our laptops. Full with ultra low density text cards, skinny fonts, huge material action buttons, and 10-step funnels that could all easily fit onto the same page. 50-item, endlessly scrolling lists with perfect filtering and sorting transformed into 10-item paginated ones.
Unfortunately, it’s very hard to programmatically tell people through a tool like PageSpeed Insights that their comically large sausage-finger-optimized buttons aren’t required for a Desktop viewing experience, which is why I had to write this blog instead. If you want to go fully responsive, focus on touch capabilities and screen density in addition to resolution. But if that’s too difficult, don’t be afraid to create two versions of your site. If Google.com can do it without looking stupid, you can, too.
Contrary to popular opinion, the Desktop web is very much alive and growing (albeit not at the same pace as mobile). Its users deserve high quality, high information density websites that are optimized for mouse usage.
Create Desktop websites for Desktop users.