
Developing a responsive, Retina-friendly site (Part 1) - PStamatiou
http://paulstamatiou.com/responsive-retina-blog-development-part-1
======
dminor
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
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?

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

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

------
danso
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")

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

------
100k
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
Thanks! Indeed took a good chunk of my time at home over the winter holidays.

------
qrush
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...](http://quaran.to/blog/2013/01/09/use-jekyll-scss-
coffeescript-without-plugins/)

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

------
prezjordan
Beautiful website, beautiful tutorial, beautiful code.

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

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

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

~~~
remi
Technically, it’s a single quotation mark :)

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

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

------
timc3
Excellent stuff and really helpful

