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
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!
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
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.
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.
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.
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.
TheLifestyler
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.
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.
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…
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.
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.
Copy & paste the code below to embed this comment.
u982744
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.
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?
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
– 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?
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?
26 Reader Comments
Back to the Articleshapingthepage
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!
jenniferlynparsons
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.
Jonathan Smiley
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!
Scott Kellum
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
Jonathan Smiley
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.
justinavery
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
IrishChieftain
Simple question: why would I want to use Foundation over Html5Boilerplate?
Jonathan Smiley
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.
CheapWebDesignSEO
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
fornace
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!
TheLifestyler
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!
RichardRazo
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.
webhipster
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…
webhipster
one more inaccessible thing put onto the web.
markopaju
Not the best support for IE7 in Foundation. Box model, positioning and content before are buggy.
jollibee
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.
webmeist
Am I the first to notice that “Dive Into” is Mark Pilgrim’s domain, if not actual domain?
>;)
Good article though.
Dan
Hot Lemon
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.
lockandneck
Foundation is a good tool
Looking forward to Foundation 3.0!
juan20
venta de departamentos
u982744
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/
smartah
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?
sachendra
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
mattlohkamp
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?webdesign_cologne
We are allways hunting for best-practice solutions. Foundation seems to be one of the most promising solutions. We’ll check it out.
Gour-Gadadhara Dasa
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?