Posts About ZURB
Well, it's that time again. We're pretty excited.
After hundreds of hours of discussions, experiments, hackathons, pull requests, visual explorations and decisions, we're thrilled to announce that Foundation 4 — the largest update to the Foundation Framework yet — is available right now.
Like its predecessor, Foundation 4 wouldn't be possible without the support of the entire ZURB team and our advisors. We also need to thank all of you who submitted issues, made feature requests, wrote pull requests and just generally drove the community effort around Foundation. Your support (or in some cases, relentless pursuit of better code) is a big part of the success of Foundation.
Foundation 4 is a bit of a different animal. Ready to dive in?
ZURB advisor Luke Wroblewski has been beating the drum on Mobile First for a while now. And in large part because of his insights here, we've retooled Foundation from the ground up to be Mobile First. This is no hack job; we didn't just flip some media queries and call it a day. We went through the framework and rethought how grids should work, how components should work in a mobile-first paradigm, so we could be sure the solution we deliver in Foundation 4 is smart and sturdy.
Now when you use Foundation, the layout you write by default will be built for a small device — something that may not even support more complex layouts or grids or media queries. While smartphones are getting bigger each day, there's an enormous group of people out there using older devices, who want to see your site. With Foundation 4 you can let them — the basic layout construct in Foundation 4 will work all the way back to feature phones.
Foundation has always prided itself (Can a framework pride itself? Why not.) on the Grid, the responsive layout engine that now drives thousands of sites. In Foundation 4, the grid has become even more flexible and even more powerful, with built in tools for different device sizes and a new, simpler syntax that better reflects how the grid works and how it should be used.
That's just some of it — dig into Foundation 4 and see some of the extensive work we've done to make it the best implementation of a Mobile First philosophy ever. If you're used to Foundation 3, we've also written a migration guide so you can better understand the changes.
Frameworks up until now have had one a major Achilles' heel — they required presentational classes all over your markup. Rows, columns, tabs — all kinds of classes that dictated not just what something was, but how it looked. Well, no more. In Foundation 4, with the magic of Scss, you can now remove almost all of the presentational classes from your markup.
We've built Sass mixins and extensions for almost every component of Foundation. Now you can write whatever markup is most semantic, most representative of what your content really is. Then, simply attach Foundation components to it in your Scss. For example, you might have a main content section and a sidebar: on a large screen you could attach eight columns to the main content, and four columns to the sidebar. If you ever want to change it later you simply change your Scss, and your markup stays the same. Pretty rad, right?
We've been building plugins for Foundation for some time now, starting with Orbit and Reveal and then adding in Joyride, Clearing and Magellan. With Foundation 4, we wanted to make sure that not only were those plugins the best they could possibly be, but also that we were setting Foundation up for even greater plugins in the future. So, we rewrote them all.
Foundation plugins should now conflict less with other libraries, work better with AJAX, be easier to turn on or off and, on top of all of that, be faster and lighter.
We're also using Zepto.js, a jQuery API compatible library. This dramatically reduces how much your users will need to load (especially on mobile devices) and provides the added benefit of using CSS for animations, taking advantage of hardware acceleration where possible. And if you need jQuery, just swap it in — everything will work just fine.
Foundation 4 is available right now from foundation.zurb.com, and just like Foundation 3 you can use the Sassified version to take advantage of the new semantic options or you can grab the default / custom CSS downloads. We even rewrote the customizer to be more reliable. We love you guys that much.
We're having a great time working on Foundation and making it available to all of you, but we also need your help. If you see issues or have questions please let us know through our Github page or our Twitter account.
We hope you love Foundation 4 as much as we do (or at least almost as much — we're quite fond of it) and that it'll help you make more semantic, mobile-first and responsive sites. And just like last time, we need a beer. Want to get one with us at the launch party?
The other day, our friend and advisor Luke Wroblewski stopped by for a chat with Jonathan, Chris and myself. We're in the midst of working on the finishing touches to Foundation 4, polishing the chrome and making her seaworthy. And Luke's visit was a pleasant distraction.
Luke turned us on to Mobile First and his work has greatly influenced how we're approaching Foundation 4, which we talked about during our conversation with him. While we talked, Chris was furiously pounding away on the code — he can pat his head and rub his tummy at the same time.
Some good stuff was said and we didn't want you to feel left out. Here are a few snippets from our conversation:
Luke: Step out to any street corner and people have their face in a smartphone. That trend doesn't show any signs of letting up. In fact, it's constantly growing. I think the whole idea of Mobile First is reaching all these audiences anywhere and everywhere. 'Cause you can pull out your mobile device anywhere and everywhere. All the kinds of things people are doing are all the kinds of things we used to make websites about — buying things, looking up information, talking to their friends, killing some downtime, anything and everything is now mobile.
Mobile First, in a responsive paradigm, for me, forces you to focus on the stuff that matters, front and center. So what you see is people designing things desktop site down. What you end up is that they cram everything and the kitchen sink into the site. They make it huge and bloated in terms of performance, in terms of content, in terms of features. What they end up doing to get down to a mobile view, they stack everything into one long list. It's huge and it takes forever. It basically creates a crappy mobile experience.
Jonathan: We're doing something different with 4 than we did with 3. When we did 3, we said "2 is dead." With 4, 3 is still there. Because even with our clients, it's going to be another year of us beating the drum as much as we can to get our clients to sign up doing things Mobile First.
The nice thing about Foundation is we've always built Foundation so that it's probably six months to a year ahead of where we are.
Luke: That's an interesting philosophy. Sorta building ahead of where your clients are and bring them there over time and learn the lessons.
Jonathan: We have to drag them kicking and screaming. On the way, we get there ourselves.
Luke: I talk with a lot of companies around this sort of stuff. All of them know the terms. They know responsive web design. They know Mobile First. They know that they should be acting on it. But what's really holding them back is their existing properties and processes. To be clear, what makes people uncomfortable is that it's a different way of working. It's different than what we've been doing for 20-plus years.
My counter argument to that is that it's a pretty different web, pretty different world than it was 20 years ago. If you're expecting things that worked for you 20 years ago work today, I don't think that's a viable way to run a business.
The other argument that I hear is that it costs more, takes more time. My response is: OK, so you can keep making a desktop and laptop site and just not have all these new audiences on tablets, on smartphones and all that stuff. If you want more usage on these more devices, more online time, you have to invest a little more. It's not going to come for free. Nobody just comes hands you a pile of money or customers if you do nothing.
Jonathan: At some point, it's just going to be the cost of doing business.
Jonathan: Luke got us turned on to the whole thing. We had lunch ... how long ago?
Chris: Back in November ... maybe September ...
Jonathan: About six months ago, we had lunch with Luke. And Luke was like beating us over the head with "Foundation ought to go Mobile First". And we talked about it before but that was the first conversation where we got to the end of it and was "like OK that makes some sense."
Chris: He made us look at Zepto too.
Jonathan: He turned us on to Zepto. So that was a good conversation. I think it was a confluence of — he made a pretty good case for it. Honestly, I think, at last to me, the best case so far. Since we're doing things mobile first, technically, we have the capability with Foundation to build experiences that don't suck for like really old phones and feature phones. We're not going to inherit all the styles we try to cram in there. It will actually be a mobile site.
So we can broaden our appeal by simplifying what we present for devices like that or older browsers like IE6 or 7. You could reasonably say you can build a site for IE6 using Foundation 4, which wasn't the case with Foundation 3. That was a win.
Luke: To build on that. The promise of tomorrow, for me, is more and more multi-device web. There's no shortage of devices.
Luke: I think that it's encouraging to see that more and more people are understanding this opportunity and jumping on it. You guys, potential working with clients, using Foundation — it's a great vehicle understanding kind of what they're inevitably going to have to do on the Web. I appreciate that you guys are moving it forward and pushing it past where the clients are right now. In the end, I think it's going to be good for you and for them. It's not a negative thing for me. I do agree that change is hard. It's inevitable to deny that the mobile thing is here. And you're going to have to deal with it. And eventually deal with it in a good way.
Jonathan: Pretty stoked to where Foundation is going. We wouldn't have taken the direction we did if you hadn't badger us for the last year and a half.
We want to thank Luke for dropping in and chatting with us!
The Yeti heard grumblings on Github about how Foundation wasn't exactly getting along with jQuery 1.9. Well, he thought that wasn't possible and decided to check in on it. After all, it was jQuery 1.6 that he'd said good-bye too.
What the Yeti discovered is that he needed to spend more time with 1.9 and really bond. Which is why he's released from the Tundra an update to Foundation, 3.2.5 to be exact, that strengthens the compatibility with jQuery 1.9. This update includes:
There's a lot of stuff on the Internet.
Think about it — how many mouseclicks do you make on any given weekday? If you work in any business with an Internet presence, it's likely that you click through hundreds of pages on a daily basis.
Delicious is a site that helps bring a method to the madness. If you come across an interesting or useful link, it's easy to store it in Delicious to find and reference it later.
We were intrigued when the Avos team launched the fresh redesign, but it naturally got us wondering — does the design help people effectively save and edit their bookmarks?
This past Tuesday, we released an initial test with a very basic question: does a user know where to go to add a link to Delicious? Given that it was the core function, it was very important for people to understand how to do this.
The Delicious team has updated the interface since this test — but the correct answer was a mouseover on the section defined "A" above.
Out of 76 responses, only 4% of responses clicked on the correct part of the design.
This was STAGGERING to us — how could 96% of testers manage to miss where to go to add a link?
Luckily, Delicious flagged this as a problem and updated their "Remember" page with the text "Add A Link" in the upper-right hand side of the design. We dove back in with another test to see if this made a difference:
The results were incredibly improved: 77% of testers (35 responses) correctly selected the "Add A Link" text in the upper-right hand corner.
We're glad to see that Delicious made the shift, as it appears to have clarified a major point of confusion among their users.
With more than five million users currently on Delicious, there's a tremendous amount of value in crowdsourced links. So do users know where to go to find the most popular content on Delicious today?
The results here weren't perfect. 64% of responses correctly selected the right link for the popular content — the Delicious logo next to the search bar or the 'Discover' link in the top navigation.
The right expanded story seems to generate minor confusion — potentially, the expanded story could pose as a headline, rather than more information on a specific link.
As far as popular content goes, Delicious seems to be well-positioned to share the best content on their network with their users. However, this is an area of improvement for them in their next design iteration.
Given that some users have a lot of saved links within Delicious, we also wanted to see if it was easy for a user to edit a previously-added link within the "Remember" tab.
For the purposes of this test, we identified The Next Web's Yammer story as the bookmark to edit.
Delicious' editing capability passed with flying colors — 83% of responses were correct (43 responses). Each saved Delicious link has an attached pencil button, used to edit the specific bookmark it is attached to.
Delicious is a great option for those looking to save their interesting links found all around the Internet. Delicious' new redesign adds a pleasant interface to an already-solid service, and it passed all of our tests successfully.
The biggest opportunity for future design iterations is found in the Discover (or popular) content page. If Delicious can find a way to clarify where a user clicks through to find the best content on the site, it could turn Delicious into a powerhouse for the freshest and most relevant content on the Internet.
We're excited to see where Delicious goes in future design iterations.
Since the New Year began, we've had a flurry of activity here at ZURB HQ. You might've heard yesterday that we've taken Forrst within our fold. But that's not all.
We got our year started off right with the arrival of a new designer. He was just what we needed to get the year rocking like Dick Clark's Rocking New Year's Eve. Without further ado, let's give a warm welcome to Alok Jethanandani.
Alok was born in Vancouver, but grew up in a small town close to New Delhi in India. He fondly remembers learning to use a Cricket bat and spending summers with his grandparents in the scenic north Indian town of Dehardun. Eventually, his family settled in sunny California.
Alok decided that he wanted to be a Bruin and headed to UCLA, earning a BA in Design and Computer Science. He's always had his sights set on big ideas that change the world. But he's believes in seizing the opportunities of today.
Before joining our ongoing quest for world domination, he co-founded a mobile startup and worked for many other startups in the hustle and bustle of the consumer web. We're all glad, however, that he's become one of us!
Everyone give a warm welcome to Alok!
It's with great excitement that we announce our big news today: we've acquired Forrst!
In case you haven't heard of it, Forrst is a community for designers and developers to share work, give and receive detailed feedback and become better at their craft.
Here at ZURB, we've prided ourselves on building out and defining the future of product design. We've developed awesome product design apps, created and iterated on a top-20 GitHub most watched front-end framework and provided design services to emerging Silicon Valley startups for over 15 years. Our next step is a bold one into the design community world, and we can't wait to get started.
We were initially drawn to Forrst for several reasons. Primarily, we believe the Forrst community is full of talented designers and developers who have exciting work (and feedback!) to share with others. From Day 1, we plan on taking an active role in growing the community into what we know it can be.
A big part of great product design thinking is learning how to give and receive great feedback, and apply it to whatever you are working on. Instead of the simple, "Nice work!" or "Great job!," we believe our community has so much more to offer, especially when it comes to delivering feedback on designs, side projects or a weekend hack.
We want all community members to share their best work on Forrst, and gather insights to make every single visit a worthwhile one. When you sign into Forrst, you'll be greeted with a design community that will embrace not only you, but your work as well. With time, you may just become a better designer, too.
Forrst is an established design and development community, and we believe we can make it even better. We're committed to listening, participating and fostering a healthy design community.
In addition, we'll actively participate, providing relevant feedback where necessary and sharing designs, inspiration and ideas.
Over time, we'll introduce tools and apps which will help our community members deliver increasingly-concise and detailed design feedback.
We're excited to welcome Forrst into the ZURB fold, and we hope you are too.
We believe that in time, Forrst can be a defining force within the design community, and we're all excited to embark on the journey together. Onward!
Yesterday, we finally announced our release of our brand-spanking new Responsive site. And the response has been great! We're already getting a ton of folks who want to submit their site for the new gallery. So what do you do if you've got a responsive site and want to submit it to us?
Fear not. It's pretty simple. You can e-mail us directly at email@example.com. Be sure to include the following:
You can also submit your site by clicking on the link in the footer of the under "Got A Sweet Responsive Site?" Or tweet @ZURB with your site.
As much as we love Foundation, we also want to see other responsive sites that are built on other frameworks as well. Looking forward to seeing your submissions!
When we launched Foundation just over a year ago, we envisioned building a front-end responsive framework that would empower designers around the world to build great responsive sites from an incredible starting point. Since then, we've released several new iterations of the framework, to the delight of the worldwide design community.
As we continue to move into a mobile-driven world, we continuously improved upon our framework to ensure that designs would look great on every device.
Today, we're excited to announce a new ZURB site: Responsive. It consists of three distinct sub-categories:
We hope that this new site empowers designers to understand further the world of responsive design and approach it with great confidence and excitement.
With more and more designers adopting responsive design for their personal and professional projects, we felt there was a huge opportunity to showcase some of the best work built with responsive design as the core.
Upon visiting the page, you simply select a framework, style or search for a specific site. Each site features a screenshot of the desktop and mobile view. In addition, you can get an inside perspective from the designer — click through on "Take A Closer Look" to learn the story behind the visuals.
We're confident that whether you're browsing for sites to inspire you or looking for a specific example of a well-done responsive site, you'll find something that can help you push forward on your project. We'll feature sites on an ongoing basis, so make sure to check back frequently for the latest updates.
You can't visit a design website these days and not come across at least one mention of responsive design. Back in late August, we saw a lot of writers writing on all sorts of things related to responsive design — new responsive site announcements, tips and tricks— the whole gamut.
Understanding the need for a single resource to highlight the best content, we put together our first edition of "Responsive Reading," and it was a hit from the start. Since then, we've released two newsletters, and are looking forward to sending our fourth edition out soon to round out the year.
No matter your job profession — designer, developer or business minded — responsive design impacts all of us, and the business needs of having an optimized mobile presence is significant. Stay up-to-date with all of the trends and important posts with our newsletter — now available on our new Responsive site. If you're interested in subscribing, simply submit your email address in the footer of the page.
Finally, our Responsive site would not be complete without a one-pager emphasizing all of the key principles of responsive design. Whether you're a responsive veteran or just starting out, browse the page and strengthen your understanding of the fundamentals.
By understanding the key principles, you'll be empowered to advocate responsive design with your network, as well as sell the value of responsive design to those still trying to find a place for responsive design in their workflow or budget.
We're excited to share our newest property with you, especially as we move into a year bound to be full of new developments in responsive design and mobile. Take a look at our new responsive site today and let us know what you think!
We've been working furiously on writing articles on design concepts that everyone should know, but with our own unique spin. We like to call these pieces ZURBwords. With the year coming to an end, we thought we'd do a wrap up of our most recent words so that you can have an excuse to avoid the after Christmas shopping hordes at the mall.
Earlier this year, we declared that are dead, long live wireframes. In that post, which sparked some healthy debate inside and outside the office, we advocated for coded wireframes. We delve even deeper into the ins and outs of wireframes in this ZURBword.
As you know, we believe in not letting friends design in 960px. We're strong advocates for responsive web design, which is why we continue to improve Foundation. We've talked about designing responsively a lot on this blog, including a recent year in review, but now we've also written a one-stop resource for learning all about responsive design.
Our friend and advisor Luke Wrobleski coined the term Mobile First a few years ago. But what does it really mean to design with a mobile-first mentality? Here's where we examine how you can design with mobile at the top of your mind.
When it came to the typography of Foundation, we turned to modular scale. We examine how this musical concept actually helps designers.
You don't have to be Ensign Chekov from "Star Trek" to navigate a web page. We chart a course to help you figure out the best navigation for your products.
Iteration is crucial to any product. We have to iterate, iterate and iterate some more. We take you through our own iterative process and show you how it can help take a product to the next level.
User testing helps validate concepts and ensures our products work out in the wild. But some forms of user testing are more costly than others. Unmoderated user testing is one way to get the results we need without too much overhead.
A crucial aspect of unmoderated user testing is confidence intervals. That's why we broke out the concept and wrote an article centered solely around it.
These are just a few of our most recent words. As we head into the New Year, there will be plenty more to come! Stay tuned. Same ZURB channel. Same ZURB time.
There's been a lot going on this holiday season at ZURB HQ. Our office is packed with boxes and more boxes. We're stuffing them with good tidings for all our friends. But we're not only giving gifts, we're receiving them. Sort of.
A new ZURBian arrived on our doorstep this week and we couldn't be more thrilled. It's exactly what we wanted from Santa this year. So without further ado, let us introduce you to Elysse, our newest Designer.
Even though Elysse is a huge "Star Wars" fan, she didn't originate in a galaxy far, far away. She grew up a stone's throw away from our Campbell headquarters in Los Gatos, CA. She lived around the Bay Area until she made the light speed jump to Chico, where she went to college.
She majored in Communication Design with an option in Graphic Design, eventually getting a BA. With diploma in hand, she jumped back to the Bay, working for a design firm. It was there that Elysse really got into web design, honing her Jedi skills.
But Chico beckoned and she made her return for another job. That is until she found ZURB and decided to join our quest of world domination. Or as she puts it:
When I first got to meet all of the ZURBians during my interview process, [and] they all started talking about cats, "Star Wars" and "The Lord Of The Rings," I knew ZURB was the place for me.
Everyone please give a warm welcome to Elysse!