SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A css "template" for responsive design?

    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:

    Code:
    /* #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) {}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'm with Ralph and I've never been keen on grids because you end up with masses of css like this:

    Code:
     /* 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

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  7. #7
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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 960640?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    Isn't the iphone "retina" display actually 960640?
    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:

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

  9. #9
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    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.
    ictus==""


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •