Hacker News new | ask | show | jobs
by WickyNilliams 4894 days ago
I think you're slightly off with your conclusion of responsive web design. It doesn't aim to cater to people resizing their windows (that's just an added benefit), it aims to cater to all devices regardless of window size.

Assuming we're still considering responsive design, if designed from a mobile-first perspective you'd be surprised how clean the code can be to deal with this. Start with minimal resources and most of your content stacked vertically so that it's lightweight and easy to consume on a touch device. Providing you've used relative units (ems in particular) you can scale up for larger screen with super simple media queries that just bump the font-size on body (e.g. body { font-size: 120%; }). You can find an awesome overview of this approach on Trent Walton's site [1]. Compare this with a hacky approach of doing desktop-first - you're loading assets (probably) unnecessarily, hiding chunks of markup to never be displayed, hammering your CSS to fit your desktop peg into a mobile hole. I know this doesn't cover everything, and any sufficiently complex site will require more than just bumping font-size, but honestly it doesn't have to be super difficult and full of horrible workarounds.

Now with the resposnive vs. separate site debate, the way I've always thought of it is responsive site for web sites, separate sites for web apps. Apps are sufficiently complex, with enough interaction that they require fundamental changes in HTML, CSS and JS to adapt to touch devices. Which leads onto the next point, serve a separate version of a web app based on touch/non-touch not window size, as it is the interaction method that should dictate design choices not how small the window is. It might then be wise to adopt a hybrid approach for your touch-specific app, where you scale up/down for larger/smaller touch-based devices.

Note that some of this may change and become significantly simpler with the advent of the Shadow DOM [2] and Flexbox layouts [3]

[1] http://trentwalton.com/2013/01/07/flexible-foundations/

[2] http://www.html5rocks.com/en/tutorials/webcomponents/shadowd...

[3] http://weblog.bocoup.com/dive-into-flexbox/