THE PENDING DRAFT

Styling Elements based on their quantity in CSS

March 6, 2015

It’s a situation we all know too good: You have that beautiful design turned up into a living prototype, media queries take care of all those different viewports and everything works just perfectly together. And then the client realizes that he needs two more items in the main navigation and suddenly your nice navigation starts to break apart and you start tweaking everything again and again. At least thats how i did it before. Not very flexible.

Heydon Pickering just wrote a great article on A List Apart about Quantity Queries for CSS which will make all of the above a thing of the past.

The @media query is the darling of responsive web design because it allows us to insert “breakpoints” wherever one layout strategy ceases to be viable and another should succeed it. However, it’s not just viewport dimensions, but the quantity of content that can put pressure on space.

Just as your end users are liable to operate devices with a multitude of different screen sizes, your content editors are liable to add and remove content. That’s what content management systems are for.  This makes Photoshop mockups of web pages doubly obsolete: they are snapshots of just one viewport, with content in just one state.

With a clever combination of of nth-child() and first-child() pseudo-selectors he achieves to count elements in CSS. This makes it possible to apply different styling to navigation elements, when there are equal to or more than what you specify. If you haven’t read this article yet, you seriously should do that right now!

A List Apart – Quantity Queries for CSS

Useful Mac

March 1, 2015

Useful Mac is a new blog by Garret Murray about tools and tricks for mac users. Here’s what he has to say about it:

And so, dear reader, I look forward to sharing some of this experience with you. I fancy myself someone with good taste, a discerning eye for excellent user experience and design, and someone who loves sharing interesting or useful information with others. Let’s take a journey together toward a prettier, more powerful, more Useful Mac.

I just learned about this tool called Bartender to de-clutter my menu bar, which is really cool. Looking forward to more such things.

Useful Mac

Jonathan Ive and the Future of Apple – The New Yorker

February 22, 2015

Finally found some time on this lazy Sunday afternoon to read the New Yorker’s profile of Jonathan Ive by Ian Parker which gives some very inspiring insights into the way the design team at Apple works. Also, i really enjoy the way Ive seems to be obsessed by the geometry of rounded corners. It’s exactly that obsessive attention to detail that separates Apple from most other product companies.

“At the risk of sounding terribly sentimental, I do think one of the things that just compel us is that we have this sense that, in some way, by caring, we’re actually serving humanity,” he said. “People might think it’s a stupid belief, but it’s a goal—it’s a contribution that we can hope we can make, in some small way, to culture.”

One of the things that resonated with me is this idea that good design is first and foremost about respect. Respect for the person that will eventually use what you build. Not about the style and look of something, not about selling something but about deeply caring how to best solve a problem. I honestly never really thought about design that way before reading “Design for the Real World” by Victor Papanek a while ago. Which by the way is one of the best books about design and you should read it right after this article. But i digress.

Won’t spoil you with any more quotes. It’s a very long read, but totally worth it. Grab yourself a cup of coffee, sit back and read the whole thing.

The New Yorker – The Shape of Things to Come

Datedropper

February 21, 2015

Last week this jQuery Plugin popped up a lot on different channels. First: Yes, it looks pretty! But quick and easy? Not really.

I could imagine something like this could work for simple select fields, where you have just a handful of options to choose from. Maybe for the order quantity in a checkout process or something like that. But for a date-picker it doesn’t cut it.

Datedropper jQuery Plugin

Pragmatic Redesign for GitLab

February 12, 2015

I use git and GitLab for pretty much everything i’m working on, from the smallest experiments to large client projects, everything gets pushed to a remote repository on our server. The last update for GitLab brought some small UI changes which i really liked. They’ve done some great work with this and it’s one of those improvements where you look at it and recognize that something has changed, but couldn’t tell what it is. Like when someone you know has slightly changed their haircut and you notice that she/he looks a bit different, a bit better, but you don’t see what exactly has changed. I like those kinds of iterative, small redesigns. And i fully agree with their statement about the importance of having a clear plan and a set of goals before you start redesigning anything.

Changes to the interface are always stressful. So you shouldn’t even start to redesign without a list of issues you intent to solve. This way, your users get compensated for the changes with improved usability.

Well done GitLab!

Pragmatic Redesign for GitLab

Style Guides Podcast

January 22, 2015

Styleguides.io provides a ton of useful resources on Website Style Guides. You find pretty much everything from Articles to Books, Talks, Tools or Examples. If you’re building Style Guides and didn’t know it yet, you should check it out.

Today Brad Frost announced a new Podcast, where he and Anna Debenham will interview folks making Style Guides. In the first episode they talked with Jina Bolton, Senior Product Designer at the Salesforce UX Team and although i’m usually not that much into audio podcasts i gave it a try and really enjoyed it.

Style Guides with Jina Bolton