A css "template" for responsive design?

[Scott Blanchard]

After a bit more research and testing, I'll likely come up with one on my own, but here goes...

I'm looking for a css template (just the basic @ media portion) that gives me a framework for conditional css for tablets and smartphones. I'd like to provide 3 views of my website:

Desktop

Tablet (iPad)

Smartphone (iPhone)

For example: Your thoughts on this framework:

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media  only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media  only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media  only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media  only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media  only screen and (max-width: 479px) {}

[ralph.m]

I don't know that framework, but another to look at is 320 and Up. There is also this.

I'm not too comfortable with frameworks, as I'd rather build the site from scratch so that I know what's going on ... but perhaps that's just me.

[Paul O'B]

I'm with Ralph and I've never been keen on grids because you end up with masses of css like this:

 /* Base Grid */
    .container .one.column                      { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }
    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

When in effect you only need the one rule and not rules for every occurrence that you will never need.

Of course you could pick and choose what you need form the rules but then you may have well done it yourself to start with. It's useful to look at the code and see how things are laid out and how the media queries work and what limits work best but do you really need all that code for every site? I doubt it.

Some people love grids of course so make your own mind up

[Scott Blanchard]

Thanks guys, I think that link probably confused the real question I'm asking. I'm not keen on grids. Never have used them and never will. I just provided the link in order to credit the source for the media query example I posted. It works regardless of whether the site is grid based or not.

So, my real question is about the media queries i posted above.

Do you have any comments or suggestions on using those queries as a baseline for achieving the goal of deploying one site, with a single "responsive" CSS file capable of gracefully accomodating multiple devices?

[Paul O'B]

I haven't really looked into mobile in depth but aren't you missing the 320px (iphones) (and smaller) from your queries as per the other templates Ralph linked to.

Of course a good approach is to cater for mobile first and then enhance for more capable devices.

Some smartphone users actually don't like one column sites and get annoyed when the site they visit becomes a one column site with a half a dozen big links at the top so you will never please everyone They would rather scroll and zoom around a normal site.

[Scott Blanchard]

Some smartphone users actually don't like one column sites and get annoyed when the site they visit becomes a one column site with a half a dozen big links at the top so you will never please everyone They would rather scroll and zoom around a normal site.

Good point. I suppose the inclusion of a "View full site" link that resets the stylesheet may also be helpful in that case.

[Scott Blanchard]

I haven't really looked into mobile in depth but aren't you missing the 320px (iphones) (and smaller) from your queries as per the other templates Ralph linked to[

Isn't the iphone "retina" display actually 960×640?

[ralph.m]

Isn't the iphone "retina" display actually 960×640?

Yes and no. Well, in terms of media queries, it acts like it's 320px wide:

Similarly, the iPhone 4’s Retina display has a far larger physical pixel density than previous iPhones, and its formal pixel density is 960. Still, it reports 320px for the device-width media query

Source

The above is a handy article (though there are many others). It's worth using the meta viewport along with media queries:

<meta name="viewport" content="width=device-width">

[ServerStorm]

Hi Scott,

For a Wordpress template I just finished up on I use the following:

CSS Flow:

1. Set Wrapper, Header, Nav, Sidebar and full size h1 - h5, p, ul, div ... first
2. Set specific behaviour for screen sizes larger than 1200px using media queries:
   
   • @media screen and (min-width: 1200px)
   • set 3 column layout with fixed nav.
   
   
3. Set specific behaviour for screen sizes below 760px and larger than 550px (sombody resizes the page not full screen, wanting to flow all content within their view with no scroll bars.
   
   • @media screen and (max-width: 760px)
   
   
4. Set specific behoviour for screen sizes below 550px and 400px;
   
   • Reduce logo, header images, scale containers, increase font size for better readibility.
   • @media screen and (max-width: 550px)
   
   
5. Set specific behaviour for screen sized below 400px.
   
   • If I had a graphic header I would remove it or scale it here,
   • reduce picture sizes
   • vertically stack navigation.
   • @media screen and (max-width: 400px)
   
   
6. Set specific behaviour for webkit and devices or screen sizes below 480px
   
   • @media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px)
   
   

You can look at firebug or the CSS files in their entirety at http://www.paletta.ca . This site works well on modern Android, iPhone, WebOs based phones. We were able to test it on about 40 different brands.

Please don't be over critical as this is my first media queries project and the particular site in question had very little content to work with. Plus I normally leave comments on this forums to the experts. However this may help you as they are rather basic web pages.