Developing a responsive, Retina-friendly site (Part 1) | Hacker News Reader

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

paulstamatiou.com

191 pointsPStamatiou25 comments

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.

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?

many. at least some will. but that bug will get fixed in safari at one point, so: don't penalize users of other browsers.

I'd say a significant number - and more will just do it by accident while reading in bed.

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.

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.

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

(the difference in title was "Designing" vs "Developing")

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.

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.

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.

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.

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...

(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".

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!

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

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-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.

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.

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.

Beautiful website, beautiful tutorial, beautiful code.

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

I thought I'd never quit scrolling! Indeed looks like a great resource.

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

Technically, it’s a single quotation mark :)

A prime is this: http://en.wikipedia.org/wiki/Prime_(symbol)

It's pretty standard to use straight apostrophes these days . . . they even have it on the Wikipedia page (http://en.wikipedia.org/wiki/Apostrophe -- see "typewriter apostrophe").

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

Excellent stuff and really helpful

Reply on news.ycombinator.com