Build responsive sites using the 320 and up framework

You may also like...

15 responses to “Build responsive sites using the 320 and up framework”

  1. This overview was helpful in terms of a tool for implementation. Thanks.

    However, it would be helpful to see more discussion of the step prior and that decision making process. For example, it was said, “Let’s say that we don’t want to show the complimentary column’s content if the screen width is smaller than 480 pixels.” That’s a great idea but then what? Just leave the extra column out?

    Don’t get me wrong, I understand context (read: device) impacts experience. None the less, if content is going to hit the editing room floor at 480 and below, perhaps it’s not worth of 480 and above either? Would it really be a sin to do a single site in 480? At least then the UX would be 100% consistent? In a multi-device world is it really fair to expect someone to relearn a site over and over?

  2. […] Continue Reading on Web Designer Share this nice post: This entry was posted on Tuesday, January 3rd, 2012 at 7:40 pm and is filed under Mobile Applications, Web Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

  3. Sean says:

    Good article, only thing that would make it better is if the download link worked. For those looking go to the project homepage @


  4. Iggy says:

    to expand on your bit here….

    I have added colors to each of the h1 tags for each of the ‘media queries’ for the different screen sizes…

    so as to see exactly how the h1 element will load at each page size

    later also added h1 font size – it seems ff only sees the initial media query?? and loads the font color and size for 480 – then nothing regardless of the screen resizings

    ie8 works ok…

    the how do we get this to actually work?

    seems like a great tool…

    huge thanks


  5. Iggy says:

    been working on this most of the day… now have colors working on h1 tag…

    but not showing 2 columns…

    i see this: div.content-main container left.

    and this:
    001 /* 11.MAIN */
    002 div.maincontent {
    003 float: left;
    004 width: 65%;
    005 }

    i changed oo2 to div.content-main and down the line… div.complimentarycontent to div.complimentary-content which is what is in current index file — and am unable to get the page to show columns with this:

    /*768px ___________ */
    @media only screen and (min-width: 768px) and (max-width : 991px){
    /* TYPOGRAPHY */
    div.content-complementary p {
    font-size: 0.9em;
    color: #666;
    /* MAIN */
    div.content-main {
    float: left;
    width: 65%;
    div.content-complementary {
    float: right;
    width: 30%;
    /* HEADINGS */
    h1 {
    font-size: 55px;
    color: red;
    padding-bottom: .1em;
    border-bottom: 1px solid #bbb;

    any idea what is wrong?

  6. Mena says:

    this was very easy to learn and adapt to. i had a bad luck understating it until now.
    is there more tutorials about responsive designs ?

  7. Paul says:

    Very cool stuff!, i have built a responsive design site from scratch and ahhhhhh, i cant believe i didnt see this sooner. Its like a really big reset.css with a very well thought out index for css, this is gonna save so much time.

    I have followed the tutorial exactly but just wondered if anyone has had the issue of showing the image in ie9, ie8, ie7, the outline of the image is there with the broken icon and the alt tag?.

    Is it just me?, ill find a fix and share here if anyone beats me please share.

    Thanks for the great article!.

  8. Simon says:

    320 and up is a very nice package, very clearly written and comes with everything that you would need to build a responsive site, Including icons and graphics for subscribed websites.

    I personally found it very easy to use, images are still an issue but I cant see this being developed around in the near future.

  9. Daryl says:

    This really answered my problem, thank you!

  10. whoah this blog is great i love reading your posts. Keep up the good work! You know, many people are searching around for this info, you can help them greatly.

  11. I keep listening to the reports talk about getting boundless online grant applications so I have been looking around for the most excellent site to get one. Could you advise me please, where could i acquire some?

  12. buy property says:

    My brother recommended I might like this blog. He was entirely right. This post truly made my day. You cann’t imagine simply how much time I had spent for this information! Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *