5 ms·

Developing a responsive, Retina-friendly site (Part 1)

191 points by PStamatiou 14y ago

Nikolas0 14y ago
Wow that's a hell of a tutorial, thanks for sharing :)
- jmathai 14y ago
  I thought I'd never quit scrolling! Indeed looks like a great resource.
prezjordan 14y ago
Beautiful website, beautiful tutorial, beautiful code.
crazygringo 14y ago
I'm a bit confused by the concept of using media queries based on em's instead of px, since em's are based on font sizes, and I wouldn't expect the "window" object to have a font size at all. Do media queries based on values like max-width simply assume 1em = 16px universally at default zoom level, or is that something that can be overridden? I mean, em's are not "inherently" 16px at all, that's just what happens to be most browser's default font size. > However, I've learned that when you test your media queries you will need to reload the page each time you change the zoom level. It's just a nitpick where media queries won't get affected by zoom level adjustments after the page load unlike browser resizes. I think that's actually a good thing -- if you're adjusting the browser zoom level while you're looking at a page, that's because you want to inspect something more closely. You don't want the whole layout to change. Browsers also conveniently try to keep you looking at roughly the same thing in the scroll-position, even though the whole height of the page may have drastically changed.
- rhizome 14y ago
  if you're adjusting the browser zoom level while you're looking at a page, that's because you want to inspect something more closely. Not me. HN is a good example where I have to zoom in to get the text at a decent font size on my phone. I absolutely want the page width to change and to reflow the text.
  - crazygringo 14y ago
    That's really a bug with HN not using a viewport meta tag. I agree, it's very difficult to read on a phone. A simple initial-scale:1.0 (or similar) on HN would be a great improvement.
    - rhizome 14y ago
      This instance may be due to a meta tag, but it's something I do with almost every site. Point being, scroll-to-read is lame.
- jimray 14y ago
  Using em instead of px for media queries is definitely a bit of a mindmelter at first. However, if you're truly interested in building a responsive site, not just hitting a few target devices(1), I definitely recommend spending a little bit of time getting comfortable with the idea. Mostly, it forces you to consider the context of your media queries, not just specific resolutions or device capabilities. This helps to future-proof your code for new devices and build for difficult-to-test for contexts, like users who always have a browser zoom level set higher than you expect. This article really helped sell me on the idea and show me the way: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ http://blog.cloudfour.com/the-ems-have-it-proportional-media... (1)I realize this sounds judgmental, I don't mean for it to be. There are plenty of perfectly valid reasons to "just hit a few target devices" using responsive design techniques instead of building a "truly responsive site".
kmfrk 14y ago
Could you please change the prime (') in your header to a curly apostrophe (’, ’)? It drove me mental. :P
- deleted 14y ago
  [deleted]
- remi 14y ago
  Technically, it’s a single quotation mark :) A prime is this: http://en.wikipedia.org/wiki/Prime_(symbol) http://en.wikipedia.org/wiki/Prime_(symbol)
- jamesaguilar 14y ago
  It's pretty standard to use straight apostrophes these days . . . they even have it on the Wikipedia page (http://en.wikipedia.org/wiki/Apostrophe http://en.wikipedia.org/wiki/Apostrophe -- see "typewriter apostrophe").
qrush 14y ago
You don't need Grunt or the jekyll_asset_pipeline to get SCSS or CoffeeScript running working with Jekyll: http://quaran.to/blog/2013/01/09/use-jekyll-scss-coffeescript-without-plugins/ http://quaran.to/blog/2013/01/09/use-jekyll-scss-coffeescrip... That being said, I love it when people build on top of Jekyll - it's awesome to see how many workflows it can fit into.
- PStamatiou 14y ago
  I also use grunt for optimizing pngs, concatenating JS into a single file, and uploading assets to S3.. it can do a ton of things. I may have only mentioned the first scss/cs use case though.
  - qrush 14y ago
    Nice! Mostly just trying to spread the word that it's possible to get SCSS/CS working minimally with Jekyll instead of resorting immediately to complicated plugins and hacks.
danso 14y ago
I know it's prominently linked early in the OP, but I was confused because I kept thinking that it was "Part 1" and the OP was "Part 2"...He did an excellent, very lengthy write-up just on the design aspects of the site: http://paulstamatiou.com/responsive-retina-blog-design http://paulstamatiou.com/responsive-retina-blog-design (the difference in title was "Designing" vs "Developing")
franze 14y ago
as grunt was mentioned in this article: now is the worst time ever to start with grunt. the project is currently in flux between 0.3 and 0.4. doesnt sound so bad? these versions, and the plugins used by these versions, are not compatible with each other. the documenation of 0.4 is not yet done, most of the examples of in the internet use 0.3, the code examples of the gruntjs github plugin repos are already 0.4. most of the community written plugins are still 0.3 only. oh, last but not least, 0.4.0rc7( or was it rc5) breaks compability with the some of the plugins that worked with 0.4.0rc4. said that grunt is great, but still a 0.X.something software. if you want a frustration free time, wait some more until everything settles down.
- WickyNilliams 14y ago
  Well 0.4 is kind of living on the bleeding edge unless I'm mistaken? The npm package for grunt is currently on 0.3.17. The official site also points to the stable 0.3 docs so that should also abate the confusion somewhat. Personally, I've just stuck with 0.3 (despite the constant temptation to check out the latest version!), it's got all the tasks I need for my workflow and it is otherwise flawless.
lucian303 14y ago
I still use chrome on all my Retinas and the display is nothing unusual (I run at 1920x1200 of course, sometimes, even higher). It's up to the OS to make itself retina friendly. This resolution would be great for a 32" or even a 40" monitor, but on a laptop, it's wasted. And optimizing sites for the Retina ... I'm sorry, but that's nowhere near the top of my list as far as front end concerns go. With over 100 different os/browser combinations to test for, Retinas are the last thing anyone will care about. As far as being a better display, I see no difference, and neither does anyone I've ever known who has used a retina than on the air, other than the screen being a bit brighter. It is great technology applied the wrong way. Give me those pixels on a bigger screen. I just want more real estate. (Lack of retina 17" which could have really benefitted from the higher resolutions was dissappointing to say the least). It's Apple though. Everyone will bow down and comply. Just like with the iPod connector. Now probably in millions of cars and other hard to change places. Oh we're changing those too. Yeah, fuck you too Apple. The hardware is the best but the build quality has gone down and will continue to go down. The retina and airs are quite fragile, to say the least. iPad ... I'm on hacker news. I don't care about consumer devices. So they have OS X. Their one great product. And people wonder why they won't license it to OEM's!!! Duh!
100k 14y ago
This is a hell of a tutorial. It must have taken ages to write. I need to re-do my blog to be responsive so I've bookmarked this for later. Thanks for the Swiftype shout out, too!
- PStamatiou 14y ago
  Thanks! Indeed took a good chunk of my time at home over the winter holidays.
dminor 14y ago
One problem with this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> is 'maximum-scale=1' prevents zooming. This property fixes a mobile Safari zoom bug when orientation is changed, but the cure is worse than the disease. Leave it out and let people zoom.
- PStamatiou 14y ago
  Yeah I wasn't sure if I wanted to leave it or remove it on my site. I ended up leaving it but like you mentioned the side effect is rather annoying. I think I'll go ahead and remove it.. I mean how many people will visit my site and change orientation while on it?
  - ibotty 14y ago
    many. at least some will. but that bug will get fixed in safari at one point, so: don't penalize users of other browsers.
  - cytzol 14y ago
    I'd say a significant number - and more will just do it by accident while reading in bed.
joseph_cooney 14y ago
I find the overloading of the term 'breakpoints' confusing and probably un-necessary
timc3 14y ago
Excellent stuff and really helpful

191 points by PStamatiou 14y ago

Nikolas0 14y ago

Wow that's a hell of a tutorial, thanks for sharing :)

jmathai 14y ago
I thought I'd never quit scrolling! Indeed looks like a great resource.

prezjordan 14y ago

Beautiful website, beautiful tutorial, beautiful code.

crazygringo 14y ago

I'm a bit confused by the concept of using media queries based on em's instead of px, since em's are based on font sizes, and I wouldn't expect the "window" object to have a font size at all. Do media queries based on values like max-width simply assume 1em = 16px universally at default zoom level, or is that something that can be overridden? I mean, em's are not "inherently" 16px at all, that's just what happens to be most browser's default font size. > However, I've learned that when you test your media queries you will need to reload the page each time you change the zoom level. It's just a nitpick where media queries won't get affected by zoom level adjustments after the page load unlike browser resizes. I think that's actually a good thing -- if you're adjusting the browser zoom level while you're looking at a page, that's because you want to inspect something more closely. You don't want the whole layout to change. Browsers also conveniently try to keep you looking at roughly the same thing in the scroll-position, even though the whole height of the page may have drastically changed.

rhizome 14y ago
if you're adjusting the browser zoom level while you're looking at a page, that's because you want to inspect something more closely. Not me. HN is a good example where I have to zoom in to get the text at a decent font size on my phone. I absolutely want the page width to change and to reflow the text.
- crazygringo 14y ago
  That's really a bug with HN not using a viewport meta tag. I agree, it's very difficult to read on a phone. A simple initial-scale:1.0 (or similar) on HN would be a great improvement.
  - rhizome 14y ago
    This instance may be due to a meta tag, but it's something I do with almost every site. Point being, scroll-to-read is lame.
jimray 14y ago
Using em instead of px for media queries is definitely a bit of a mindmelter at first. However, if you're truly interested in building a responsive site, not just hitting a few target devices(1), I definitely recommend spending a little bit of time getting comfortable with the idea. Mostly, it forces you to consider the context of your media queries, not just specific resolutions or device capabilities. This helps to future-proof your code for new devices and build for difficult-to-test for contexts, like users who always have a browser zoom level set higher than you expect. This article really helped sell me on the idea and show me the way: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ http://blog.cloudfour.com/the-ems-have-it-proportional-media... (1)I realize this sounds judgmental, I don't mean for it to be. There are plenty of perfectly valid reasons to "just hit a few target devices" using responsive design techniques instead of building a "truly responsive site".

kmfrk 14y ago

Could you please change the prime (') in your header to a curly apostrophe (’, ’)? It drove me mental. :P

deleted 14y ago
[deleted]
remi 14y ago
Technically, it’s a single quotation mark :) A prime is this: http://en.wikipedia.org/wiki/Prime_(symbol) http://en.wikipedia.org/wiki/Prime_(symbol)
jamesaguilar 14y ago
It's pretty standard to use straight apostrophes these days . . . they even have it on the Wikipedia page (http://en.wikipedia.org/wiki/Apostrophe http://en.wikipedia.org/wiki/Apostrophe -- see "typewriter apostrophe").

qrush 14y ago

You don't need Grunt or the jekyll_asset_pipeline to get SCSS or CoffeeScript running working with Jekyll: http://quaran.to/blog/2013/01/09/use-jekyll-scss-coffeescript-without-plugins/ http://quaran.to/blog/2013/01/09/use-jekyll-scss-coffeescrip... That being said, I love it when people build on top of Jekyll - it's awesome to see how many workflows it can fit into.

PStamatiou 14y ago
I also use grunt for optimizing pngs, concatenating JS into a single file, and uploading assets to S3.. it can do a ton of things. I may have only mentioned the first scss/cs use case though.
- qrush 14y ago
  Nice! Mostly just trying to spread the word that it's possible to get SCSS/CS working minimally with Jekyll instead of resorting immediately to complicated plugins and hacks.

danso 14y ago

I know it's prominently linked early in the OP, but I was confused because I kept thinking that it was "Part 1" and the OP was "Part 2"...He did an excellent, very lengthy write-up just on the design aspects of the site: http://paulstamatiou.com/responsive-retina-blog-design http://paulstamatiou.com/responsive-retina-blog-design (the difference in title was "Designing" vs "Developing")

franze 14y ago

as grunt was mentioned in this article: now is the worst time ever to start with grunt. the project is currently in flux between 0.3 and 0.4. doesnt sound so bad? these versions, and the plugins used by these versions, are not compatible with each other. the documenation of 0.4 is not yet done, most of the examples of in the internet use 0.3, the code examples of the gruntjs github plugin repos are already 0.4. most of the community written plugins are still 0.3 only. oh, last but not least, 0.4.0rc7( or was it rc5) breaks compability with the some of the plugins that worked with 0.4.0rc4. said that grunt is great, but still a 0.X.something software. if you want a frustration free time, wait some more until everything settles down.

WickyNilliams 14y ago
Well 0.4 is kind of living on the bleeding edge unless I'm mistaken? The npm package for grunt is currently on 0.3.17. The official site also points to the stable 0.3 docs so that should also abate the confusion somewhat. Personally, I've just stuck with 0.3 (despite the constant temptation to check out the latest version!), it's got all the tasks I need for my workflow and it is otherwise flawless.

lucian303 14y ago

I still use chrome on all my Retinas and the display is nothing unusual (I run at 1920x1200 of course, sometimes, even higher). It's up to the OS to make itself retina friendly. This resolution would be great for a 32" or even a 40" monitor, but on a laptop, it's wasted. And optimizing sites for the Retina ... I'm sorry, but that's nowhere near the top of my list as far as front end concerns go. With over 100 different os/browser combinations to test for, Retinas are the last thing anyone will care about. As far as being a better display, I see no difference, and neither does anyone I've ever known who has used a retina than on the air, other than the screen being a bit brighter. It is great technology applied the wrong way. Give me those pixels on a bigger screen. I just want more real estate. (Lack of retina 17" which could have really benefitted from the higher resolutions was dissappointing to say the least). It's Apple though. Everyone will bow down and comply. Just like with the iPod connector. Now probably in millions of cars and other hard to change places. Oh we're changing those too. Yeah, fuck you too Apple. The hardware is the best but the build quality has gone down and will continue to go down. The retina and airs are quite fragile, to say the least. iPad ... I'm on hacker news. I don't care about consumer devices. So they have OS X. Their one great product. And people wonder why they won't license it to OEM's!!! Duh!

100k 14y ago

This is a hell of a tutorial. It must have taken ages to write. I need to re-do my blog to be responsive so I've bookmarked this for later. Thanks for the Swiftype shout out, too!

PStamatiou 14y ago
Thanks! Indeed took a good chunk of my time at home over the winter holidays.

dminor 14y ago

One problem with this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> is 'maximum-scale=1' prevents zooming. This property fixes a mobile Safari zoom bug when orientation is changed, but the cure is worse than the disease. Leave it out and let people zoom.

PStamatiou 14y ago
Yeah I wasn't sure if I wanted to leave it or remove it on my site. I ended up leaving it but like you mentioned the side effect is rather annoying. I think I'll go ahead and remove it.. I mean how many people will visit my site and change orientation while on it?
- ibotty 14y ago
  many. at least some will. but that bug will get fixed in safari at one point, so: don't penalize users of other browsers.
- cytzol 14y ago
  I'd say a significant number - and more will just do it by accident while reading in bed.

joseph_cooney 14y ago

I find the overloading of the term 'breakpoints' confusing and probably un-necessary

timc3 14y ago

Excellent stuff and really helpful