

Ask HN: Best Way to implement Responsive Design - jfaucett

Hey Hacker extraodinaires,<p>I'm looking for advice/input/critique from anyone on my following implentation for a fairly high trafficed site (50k + monthly), that's going responsive (ie. mobile design (images/videos/css) for Phones and Tablets )<p>Here's my current Responsive Design Implementation:<p>1. On a the HTTP request I get the device ( Tablet, Phone, or Desktop ).
2. Based on the device type I make general assumptions about a relative screen size. ( for instance, 320x480 for Phone) and send the HTTP response with a basic template for videos,images,css,js, etc.
3. Now inside my css using media queries I handle for divergences on screen size.
4. Also currently I have no really good way to optimize images - I'm especially interested in any ideas/links/articles related to this for responsive design.<p>Thanks!
======
splatcollision
First, how are you getting the device? Second, don't assume screen size = low
bandwidth, and DON'T assume that just because someone is using a small screen,
that means they are only interested in 'mobile' content. You should be using
one set of HTML markup for one URL. The Media Queries should determine the
styling and layout differences.

Also, don't feel like you have to have media queries for every major screen
width(320,480,768, etc...). Start out with a linear, 'mobile/small screen'
first layout, and then increase width and see where the design or layout could
use refinement, or breaks totally, and then add a media query and adjust for
that resolution.

Good luck!

For articles/links, follow @RWD and read the book he wrote, if you haven't
already.

For images, look at <picture> polyfills and keep an eye on what's going on
with the Responsive Images community group. -
<http://www.w3.org/community/respimg/>

(by the way, my web design app, Edit Room will handle all of this gracefully
for you very soon, and gives you visual layout, design and content
organization tools to build finished designs without initial coding.
<http://www.edit-room.com> )

~~~
jfaucett
I'm getting the device by the User-Agent Header with a regex, but I'm curious,
why shouldn't we go with small screen == mobile, the largest mobile width I
know of is 800px, and occording to most stats I've seen, that seems to account
for less than 2% of all desktop users.

Thanks for the links - also good luck with edit-room.com!

~~~
splatcollision
Thanks :)

Basically, people use their phones/devices from home, not just on cell
networks, and can have plenty of bandwidth on wifi. If a site is designed well
and the type is readable, people use them lots more. With a small screen, you
can only assume one thing - a small screen :)

------
hansy
Have you looked at Twitter Bootstrap's Responsive scaffolding?

[http://twitter.github.com/bootstrap/scaffolding.html#respons...](http://twitter.github.com/bootstrap/scaffolding.html#responsive)

------
jboland
I recently heard about picturefill, it looks pretty cool to me!
<https://github.com/scottjehl/picturefill>

------
bmelton
splatcollision's answer is double-triple good, so I won't try to revisit any
of what he said, except to say that having done it once (fairly painfully,
though that was before Sass and Less were as pervasive), I've found
'Skeleton'[1] to be a great head start (if you're willing to use its grid
system, which I like a ton more than any other grid system I've seen.)

[1] - <http://getskeleton.com/>

