3 ms·

Ask HN: Best Way to implement Responsive Design

4 points by jfaucett 14y ago

Hey Hacker extraodinaires, 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 ) Here's my current Responsive Design Implementation: 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. Thanks!

bmelton 14y ago
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/ http://getskeleton.com/
splatcollision 14y ago
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/ 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 http://www.edit-room.com )
- jfaucett 14y ago
  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 14y ago
    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 14y ago
Have you looked at Twitter Bootstrap's Responsive scaffolding? http://twitter.github.com/bootstrap/scaffolding.html#responsive http://twitter.github.com/bootstrap/scaffolding.html#respons...
jboland 14y ago
I recently heard about picturefill, it looks pretty cool to me! https://github.com/scottjehl/picturefill https://github.com/scottjehl/picturefill

4 points by jfaucett 14y ago

bmelton 14y ago

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/ http://getskeleton.com/

splatcollision 14y ago

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/ 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 http://www.edit-room.com )

jfaucett 14y ago
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 14y ago
  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 14y ago

Have you looked at Twitter Bootstrap's Responsive scaffolding? http://twitter.github.com/bootstrap/scaffolding.html#responsive http://twitter.github.com/bootstrap/scaffolding.html#respons...

jboland 14y ago

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