Responsive mode in Firefox 15

At 1:57 Chris Heilmann shows the upcoming responsive mode for Firefox 15. It looks really good and will really help developing responsive layouts. At the moment it’s often really a pain in the a** debugging a responsive layout because the whole browser and therefore the developer tools get very small while resizing. I hope this feature will also make it’s way to Safari and Chrome.

Interview with CSS wizard Harry Roberts

You can find the interview on TheAmazingWeb.net.

Building with content choreography

Jordan Moore:

We want to make the most of the confined space and let key content and components flourish, but sometimes our hierarchy of elements can prevent that from happening. Say for example we want to present an article in the narrow single column view, but before the article appears in the stacking order we have: a header (containing site name etc), navigation, maybe even a banner advertisement, then the article. The heart of the page is buried beneath items that may be less important in this context. Rather than brutally hiding these items with a display:none property we can reorder them using another CSS property – flexbox.

Everybody who has some experience with building responsive layouts will love flexbox. Head over to Jordan’s article and learn how it works. Then view his demo. I love it.

I was asked about base64 vs a sprite image in CSS

Jake Archibald:

With base64 the image data is in the css file, meaning it gets downloaded even if it isn’t needed. Eg, if you’re using media queries to optimise image usage for mobile, base64 doesn’t help.

Jake Archibald makes some good points against Data URIs.

Data URIs make CSS sprites obsolete

Nicholas C. Zakas:

CSS sprites were a solution to the problem of multiple HTTP requests to download multiple images. Data URIs allow you to embed images directly into your CSS files, solving the same problem in a much more elegant and maintainable way.

I hate working with sprites, but I do it because it is or should I say, was, the best way to increase the loading speed of images.
Since a few minutes ago I never heard of Data URIs, but it is great and I think I will try it out very soon. You should, too.

Ethan Marcotte answers your responsive web design questions

Ethan Marcotte:

Nelson Rodrigues: What framework do you recommend for a designer and developer duo starting in RWD?

EM: There are a number of great responsive frameworks out there: Foundation by ZURB, Josh Hopkins‘ Fluid Baseline Grid, and Twitter’s 2.0 release of Bootstrap has an optional responsive grid.

Each looks pretty damned promising to me, but I should probably mention I don’t use CSS frameworks for production code. I find them invaluable for prototyping, for getting ideas on the screen as quickly as possible, and seeing how they shake out in a responsive layout. But for final, client-ready deliverables, I like tailoring the code to the design, and finishing up with a responsive design that’s optimised for small screens by default, but progressively enhances up to wider displays.

Agreed. That’s exactly what I think of frameworks like Twitter Bootstrap. I never could imagine using one of these for an actual, real project.
There are also some more bits of knowledge in the Q&A.

Animate.css – a bunch of plug-and-play CSS animations

Dan Eden:

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Dan Eden put together a stylesheet with some fancy CSS animations which are really easy to use. Simply add the classes animated and the animation name to an element and you are good to go.
I wouldn’t include the whole file just for one animation, but it is a good library for picking the animations you like and including them in your own stylesheet or vars.less.

Working as a team

Bastian Allgeier wrote an article for .net magazine saying, every designer should learn to code and every programmer should learn to design.

For an interface designer, handing over your designs to the developer means losing control of the creative process. Of course, you will be working together on the project and communicating back-and-forth, but it will never result in a creation that is all of your own. In other words, you will never be independent in your creativity.

Bastian is the creator of Zootool and kirby, the awesome file based CMS. He studied Design and then learned how to code. The reason for him to do everything was to be independent. He can do whatever he wants because he can do everything by himself. That certainly has value, but beeing a generalist also has some downsides.

I think as a webdesigner for example it is important to know the basics of HTML and CSS, but that’s pretty much it. You don’t have to know every little detail or be able to code some fancy Javascript or PHP to make a great website design. The problem is that, if you know to much about the other craft it can stand in your way. Imagine you are the designer and developer of a project and you have a cool looking idea and you know that this will be hard to do in CSS & HTML and will probably take a lot of time. There is a good chance you will simply go with the easier version. That might be good if you try to work as little as you can for the most amount of money, but that certainly isn’t the right way if you want to build the best product possible.

At QUOTE.fm we work as a team of experts. Okay, we are fairly young and years away of being experts, but everybody has his core strength.
Marcel for example does all the design work and almost everyday we discuss his latest creations. He does the best design he can dream up without thinking too much about the other parts of the process. Then it is up to me to analyse if it’s possible to do. My standard answer is: „Everything is possible.“ And if I don’t know how to do it yet, I will figure it out. It is all about doing the best work possible, not the easiest. I can’t stand people who say that something is impossible without really trying first. In my experience everything is feasible, the question is how long does it take do find the solution and are you willing to go the long way instead of the easy one.

In my opinion it is much easier to achieve this if you work in a team with experts, who also know the basics of the other crafts, so that you can discuss every decision and motivate each other. That’s a very important part which you loose if you work alone.

I can see that not everybody is in the position to have a great team and that it is good if you can do a project on your own, but it is not the best possible way.
In the end it all comes down to loving your work and trying to build the best product no matter what.