Dive into Responsive Prototyping with Foundation

by Jonathan Smiley

28 Reader Comments

Back to the Article
  1. We’ve enjoyed using Foundation for months now. Love it. Shameless plug, but ironically, like in Jonathan’s article, we recently launched our own book swap site using Foundation: “Share the Shelf”:http://sharetheshelf.com

    Looking forward to Foundation 3.0!

    Copy & paste the code below to embed this comment.
  2. I’ve been using Foundation for a couple months now as well. First framework that not only made responsive make sense, but actually a viable option.

    Copy & paste the code below to embed this comment.
  3. That’s amazing! Clearly that service concept was floating in the ether and we both picked it up. Yours has the marked advantage of being a real thing. Nice work!

    Copy & paste the code below to embed this comment.
  4. This article is fantastic and I really like the approach you are taking with Foundation. This can really enhance the workflow for responsive web design and conceptualizing breakpoints is the hardest part not just for designers but clients as well.

    Also, semantic grid system looks really cool. I am working on a framework that does something similar but totally agree preprocessor output can get messy. Sass 3.2 with silent selectors and @extend makes things “much cleaner”:https://gist.github.com/2184518

    Copy & paste the code below to embed this comment.
  5. We’re actually planning to move Foundation’s core into an SCSS development environment. We’ve been talking to the guys behind Sass and we’re pretty confident we can implement this in a way that doesn’t have the mess. Foundation will always be available by default as vanilla CSS< but we should have new options soon for those who want a more customizable experience.

    Copy & paste the code below to embed this comment.
  6. I’ve been using Foundation for quite a few months now.

    I find it extremely easy to pick up quickly and be able to produce some clickable functional prototypes and only with a little more effort than drawing up the wireframes themselves.

    It’s currently powering a Facebook RWD Bookstore

    Copy & paste the code below to embed this comment.
  7. Simple question: why would I want to use Foundation over Html5Boilerplate?

    Copy & paste the code below to embed this comment.
  8. Foundation actually includes a number of elements of H5BP, as well as other open source tools and code like Eric Myer’s reset and Modernizr. Foundation builds on top of those to include a responsive grid system, common elements and objects to help build faster, and a lot of best practices code. H5BP is a great starting point to write everything yourself, while Foundation creates a framework in which much of the base code is taken care of.

    Copy & paste the code below to embed this comment.
  9. Mobile web design is quite different from the usual design for computers.
    Today, almost every site need a mobile version,
    Mobile version – is primarily a lightweight version of the most important information. You have to provide a link to the main site if the visitor would like more or all of your information

    Copy & paste the code below to embed this comment.
  10. I’m using this, for sure. What I’d like for future releases would be a few more mobile first helpers. But for now: great work!

    Copy & paste the code below to embed this comment.
  11. This seems like a great, easy to understand grid system. But am I the only one concerned about the seeming disregard for HTML5 semantic standards?

    I’ve been working hard on maintaining semantic discipline, and could probably incorporate it into the foundation framework, but worry it would get lost in all the divs. Semantic.gs almost has me, but LESS is a bigger commitment than I want to make right now.

    Will need to experiment with Foundation a bit more before moving to real life clients.

    Great, thought-provoker. Thanks!

    Copy & paste the code below to embed this comment.
  12. I’m slacking with updating my skills to the latest web standards including mobile and retina image considerations etc. This is the first article I read on responsive web design & it was easy to follow along. Thanks.

    I have a newbie question: Do you recommend using this for production as well, or just for prototyping? From what I can tell the downside is the extra HTML markup right, but the upside it is more intuitive to use. Someone please advise.

    Copy & paste the code below to embed this comment.
  13. Yes, this framework looks cool. However, accessibility was not really considered.  And by not really considered, I mean this framework is inaccessible.  As a front-end developer, ALA reader, etc. I don’t find this acceptable and don’t think you should either if you care about the web, the web’s content, and the web’s audience.  Yes, that audience includes everyone.  Accessibility inclusion within this framework would’ve been simple (nothing too complicated), but now, one more accessible thing put onto the web. We’re better than this…

    Copy & paste the code below to embed this comment.
  14. one more inaccessible thing put onto the web.

    Copy & paste the code below to embed this comment.
  15. Not the best support for IE7 in Foundation. Box model, positioning and content before are buggy.

    Copy & paste the code below to embed this comment.
  16. I always try to find a great prototyping tools for my job. I tried some apps before, it works but not perfect.  Hope Foundation will boost my productivity. thank you for sharing.

    Copy & paste the code below to embed this comment.
  17. Am I the first to notice that “Dive Into” is Mark Pilgrim’s domain, if not actual domain?
    >;)
    Good article though.
    Dan

    Copy & paste the code below to embed this comment.
  18. Good article, and nice to see a framework explored in greater depth rather than the usual, we have these features and off you go.

    Most clients, even though they use their mobiles extensively, still don’t really get the need to have there content available for the mobile platform, and it’s structures like this which will allow mobile friendly content to be introduced easily and effectively.

    Good article.

    Copy & paste the code below to embed this comment.
  19. Foundation is a good tool
    Looking forward to Foundation 3.0!

    Copy & paste the code below to embed this comment.
  20. Copy & paste the code below to embed this comment.
  21. It’s great to see people finally getting the idea of using a fluid grid. I have been using one for about 4 years and never looked back. I occasionally came across a peer developer that refused to use it because it was “bloat” in CSS, or “class-itis”, or “not semantic HTML”. Then I would show them how it worked and they would be hooked as well.

    I actually think that the original developer of the fluid grid needs some credit. The first decent fluid grid was gold leaf fluid grid. This has been copied by all the current frameworks out there. I’m not sure what happened to that recently as I notice their site seems to be down at the moment.

    http://fluid.newgoldleaf.com/

    Copy & paste the code below to embed this comment.
  22. You said it as it’s been said before, don’t abuse the hover.  Too many sites still depend on user awareness based on hover.  A bias towards builders working on desktops and the luxury of having a mouse/hover.  Ought we all disable hover behavior in our browsers?

    Copy & paste the code below to embed this comment.
  23. Very interesting how you managed one of the main issues in responsive design when you shift devices (Fig 8, Fig 9)

    I wanted to check if you’ve figured out a way to change the IA when you shift devices based on needs of users in different contexts. Please check out this Google News example for reference http://uxmag.com/uploads/yadavdesignformultiple/googlenews.png

    Copy & paste the code below to embed this comment.
  24. couple of questions:

    – the tabs are a definition list with <dd>s, but no <dt>s – I haven’t seen that before, what’s the story? – similar question on the popup swap modal window: <h5> for the generic title, and <h3> for the more conversational explanation of what the user is seeing. what’s the semantic / seo implication of weighting the headers that way?
    Copy & paste the code below to embed this comment.
  25. We are allways hunting for best-practice solutions. Foundation seems to be one of the most promising solutions. We’ll check it out.

    Copy & paste the code below to embed this comment.
  26. Very nice and instructive article!!

    I’m brushing my HTML5/CSS3 skills to start with responsive design and wonder how would this article look today (one year later) when there is Foundation 4 advertised as:

    Mobile First – Now you can build for small devices first. Then, as devices get larger and larger, layer in more complexity.

    and

    Semantic – Everything is now semantic. Now you can have the cleanest markup without sacrificing the utility and speed of Foundation.

    Any hint?

    Another point: considering that Foundation-4 is now Sass/Compass-ready, how it compares with e.g. Susy (http://susy.oddbird.net/) semantically-wise?

    Copy & paste the code below to embed this comment.
  27. We added Responsive and Adaptive design simulation in Justinmind 5.5: http://blog.justinmind.com/new-version-justinmind-5-5/

    Copy & paste the code below to embed this comment.
  28. It would be extremely useful to see an updated version of this article using Mobile First in Foundation 5.

    While useful in itself, I’ve not been able to find a walk-though of sketching and initial development thoughts for a Mobile First site.

    Copy & paste the code below to embed this comment.