Preface: this post isn’t against responsive design, far from it. It’s about fixing the glaring User experience issues faced on most responsive sites.
Lets face it responsive sites can be really, really, really shitty. How many times have you been on your phone, clicked through a link on twitter only to see a smashed bullshit responsive design? It’s hard to read, it’s unfamiliar, it’s a pain to scroll, and it’s might be hellaciously ugly. It doesn’t need to be this way. Why not give visitors the choice of what type of mobile experience they would like with your site?
- Users might be used to the desktop experience & the responsive layout is frustrating to re-learn
- Text is harder to read because there are like 4 words per line
- Scroll hell - Touch scrolling over and over and over to get to where you want to go
- Design limitations - typically desktop views of marketing sites look far superior
- New unfamiliar mobile navigation
- No one knows what a hamburger menu is… still…
Not all responsive sites are created equally, some are great and do a fantastic job of addressing these issues. The other 99% of the internet with shit responsive sites is what we are addressing. Why not solve all of these issues with responsive sites with one simple trick?
People deserve the ability to choose how they wish to consume your website. If they want to view the mobile responsive version, let them. (it’s the default behavior) If they want to view the desktop version of the site, let them. Some folks don’t mind pinching and zooming to have a desktop like mobile experience. The ones that do care, they simply use the default mobile view.
Open demo on mobile device or emulate mobile on devtools.
Aha, there is one catch! To get this working, you will need to separate your responsive CSS into a separate file. So any mediaQuery targeting a mobile device, you would place into a new css file (responsive.css) This might require some additional build steps for ya, but the UX gain is crazy awesome.
I open sourced the library on Github. Feel free to fork and contribute.