Tip: Using zoom to target images to high density displays

I found this several days ago when I was looking for a way to scale images on an iPhone inside of a fluid layout such that they would display at a 1:1 pixel ratio. If you didn’t already know, the iPhone 4 and 4S displays everything as if the screen was the same size as a normal iPhone when it measures and does the layout. The result is that all the text looks extremely crisp, and any sites already designed for the original iPhone don’t break or look weird. With images this means that a 300 x 300 pixel image displays the correct size in the layout, but is essentially scaled up to fit over 600×600 “physical pixels”. As I was poking around I found an old CSS zoom property here: http://reference.sitepoint.com/css/zoom that for some reason works on mobile safari. Add a media query for 2x density screens, and viola! Your images now display at physical pixel dimensions on the iPhone 4 and 4S.

Here’s what the CSS looks like:

@media screen and (-webkit-min-device-pixel-ratio: 2) {
     img {
          zoom: 50%;

Awesome hacks.

Happy img scaling.

Fluid Grids (Part 2)

As promised, I’ve pulled in scans from the paper diagrams and notes for the layout of the theme I’m working on. Realize that these are raw notes, brain dump on paper. You can read the previous post here.

Layout Snapping

Golden Grid Layout

Designing interaction like this for a site is really similar to the way someone might put keyframes into an animation. The frames you see are the key transition points, even if there may be more in between as the site scales from large to small. As I was brainstorming on paper, I decided the site needed to hit the following key stages:

A) This is the tallest and most minimal your site will ever be. Your user is most likely on a mobile device, a small screen, or is just tinkering with your site. Regardless, these are the key points:

  • Header and footer span the screen. Always.
  • Content has a small horizontal margin. Even on a small screen you don’t want to lose ALL your space and make it feel cramped. Your goal is to make it readable.
  • Ever section, subsection, aside, and floated items are all in order, in line.
  • Navigation is vertical.
  • If the theme were to have ads, this would be the time to hide / remove all but the lightest weight and least intrusive.

B) This is slightly wider. Your content has more whitespace along the sides, the content is wider. You may be on a tablet, or possibly a phone in landscape. You don’t know.

  • Header and footer span
  • Content has a slightly wider margin
  • Most sections and subsections, asides, etc are still in order
  • Navigation is probably still vertical (this will depend on how many items you have)
  • The sidebar, which was stacked vertically in A, is now floated into two columns of items

C) Similar to the same pattern, Your content has slightly more whitespace along the sides, and the content is wider. A good percentage of your desktop browsers will be hitting your site at this stage, along with tablets, smartphones are probably not this wide.

  • The sidebar, is now 4 columns instead of 3
  • Asides are probably floated
  • Navigation is probably horizontal

D) At this point, the sidebar flips up and is now alongside your content. Most of your content is at its largest width and you probably don’t want your paragraphs growing much wider than they are right now since long lines makes reading difficult. This transition from C to D was interesting since originally I had the content area scale until the sidebar had room, and then it snapped down to be narrower than before. To avoid that, Between C and D I fixed and centered the main content area, and when the sidebar could be moved up alongside the content, I made the switch, and allowed the content to grow from then on until C.

E) Finally the width of the site is maxed out and centered. All your content is stretched out as wide as it can be, this’ll usually be someone with a wide-screen monitor with the browser maximized. Usually.

Conclusion: One of the key benefits to designing a fluid theme is the instantly correct look you get when you open the site. Its not something people will or should consciously expect, it should simply BE the correct size the instant it appears, regardless of size, screen, or orientation. (Censored discriminatory jokes about size and orientation here). Its like walking into a store. A well designed store is easy to navigate, spacious, and consistent across all the stores you visit regardless of its size. You don’t ever think about it because you’re not there to analyze the layout of the store. Your there to buy groceries. Anything that gets in the way or makes it hard to find what you’re looking for will stick out, and if it’s bad enough, you’ll go somewhere else. Its the same way with a site or blog. Users are there for a reason: For information, or to read, or to consume whatever content your serving up. They’re not there to analyze your site and how it’s designed, but if there’s any difficulty in getting to what they want in the form they want it, 5 seconds later they’ll be somewhere else.

It’s important to be intentional about the decisions your making and how they will affect the final layout of the site. The more you reduce the complexity of the interactions, and the better defined the interactions are, the better the final end result will be. Use what you design. Do what your users do. You’ll know best what you do and don’t like and what feels right. Go with it, but don’t be afraid to stop, backtrack, or even completely scrap good ideas if they are not up to your standards.