Great design from Apple on this interaction with Siri. It was a bit after midnight (which was technically October 21), but since it was so close to the previous day, Siri wanted me to clarify which “tomorrow” 9am I really meant… 9am on the 21st (which was technically wrong, but it was what I wanted), or 9am on the 22nd (which would have been technically correct but not what I wanted).
Most artists and designers I know would rather work all night than turn in a sub-standard job. It is a universal truth that all artists think they a [sic] frauds and charlatans, and live in constant fear of being exposed. We believe by working harder than anyone else we can evaded [sic] detection. The bean-counters rumbled this centuries ago and have been profitably exploiting this weakness ever since. You don’t have to drive creative folk like most workers. They drive themselves. Just wind ‘em up and let ‘em go.
It didn’t take long before design-focused classes made their way into the curriculum. In Carolyn’s class, people learn how to research and shape great user experiences. Shay’s class takes those experiences and turns them into something tangible for the web. Now we’re thinking there’s room for even more. Today, we’re excited to announce the next addition to the growing list of design offerings at The Starter League.
If you’re in Chicago any time before Jan 20, 2013, spend a few hours walking through the Ronan and Erwan Bouroullec exhibition at the MCA.
This is one of the few times the MCA has opened up its exhibition space to furniture/object design. I hope the success of this show encourages them to continue the trend.
The Bouroullec brothers are really on to something. They somehow manage to combine high-tech with organic with comfort. A cool mix of simple and complex, sharp angles and slow curves, and an explosion of multiples. Wonderful colors and mastery of materials. Their work with textiles is something to behold.
They are inspiring.
Check it out if you have the chance. You won’t be disappointed.
So I decided to tackle a much-needed redesign. In planning the overhaul, I wanted to focus on creating a beautiful, clear, focused reading experience.
“Blog” has such a temporary, read-and-forget tone to it. On SvN, we take our time writing and editing every article. So rather than treating this like a “blog,” I shifted the mindset to that of a tenured publication. So, the entire redesign process started with typesetting the post, and designing outward.
Instead of poring over other blogs, I spent a week studying books, magazines, and of course, Bringhurst. Capturing the right feel for body text was step one—it sets the tone from here on out.
Perhaps it’s me, but there’s something about 13px sans-serif faces on the web that feels like “my Rails app just spit this out of a database.” I want you to read articles, not text rendered on a screen. Kepler, set at a comfortable size, wound up being a beautiful serif that added the touch of humanity I was looking for. Setting the headlines in Acta added to the look I was going for, and Freight Sans wound up being a great sans-serif pairing.
Basecamp, the world’s #1 project management app, gets better every single day. Have you seen the newest features?
Love this desk by Warren Platner. Bronze base, rosewood millwork, leather top. It’s so heavy, but with a chair in front it looks like it’s floating.
If you’re interested in adding retina image support to your website or app and you happen to be using SCSS, here’s a handy shortcut that makes it dead simple.
Just include this SCSS mixin in any rule and specify the high resolution image’s path and device independent pixel dimensions. Here’s an example:
div.logo {
background: url("logo.png") no-repeat;
@include image-2x("logo2x.png", 100px, 25px);
}
Putting the high resolution alternative in the same rule as the normal image instead of putting it in a separate @media query rule or in different stylesheet altogether is a big win in terms of clarity in our CSS. It’s easier to read, easier to understand and easier to maintain.
The image-2x mixin detects high resolution displays like this:
@mixin image-2x($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */
background-image: url($image);
background-size: $width $height;
}
}
The mixin not only makes development easier, but it centralizes the definition of high resolution displays so it can easily be changed globally as more devices come to market. The @media query is based on the one in Thomas Fuchs’ Retinafy book but, for example, we’ve already modified it to define the Google Nexus 7 with it’s 1.3 pixel ratio as a retina-capable device.
A key insight here is that with SCSS, @media queries can be nested inside other rules. Such that these both work the same:
@media print {
body {
// print styles
}
}
body {
@media print {
// print styles
}
}
Purists of hand-crafted CSS may rail that this method results in the rule being repeated in the compiled CSS each time we use this mixin and that’s true. Basecamp is light on images so we’re talking about a handful of repetitions, not dozens or hundreds. It also seems likely that as SCSS continues to improve, these rules will be smartly combined. For now that trade-off is worth the improved clarity and convenience in our code.
Speed is a core value for 37signals and it’s easily Basecamp’s most important feature. When you have the luxury of that kind of focus, decisions about the product are easier to make because you have something to measure against. Will this feature make Basecamp slower? Is it worth that trade-off? So when we designed the mobile web version of Basecamp we knew that speed would be just as important as it was in the full desktop version. What was different was how we got there.
On the desktop, Basecamp’s speed is the result of some nifty tech that minimizes network requests, reduces page rendering and aggressively caches content. Moving through a Basecamp project is nearly instant as new content appears in real-time without re-loading the page. It’s great! I typically keep Basecamp open in my browser all day long as my co-workers’ activity streams in on the Progress screen.
When it came to the mobile version the goal that Basecamp should be super-fast was the same, but there were new forces at work: low cellular bandwidth, small touch-enabled screens, slow JavaScript performance, and context considerations (what’s useful and functional on mobile). It was tempting to turn to responsive design techniques on this project. Basecamp was already functioning fine on mobile browsers, but it required a lot of pinching, swiping, and zooming. CSS media queries would have let us craft a mobile layout for all kinds of devices with a limitless array of screen configurations. We’d be on the exact same codebase with all the same features – and new features would automatically be available on mobile when they launch as long as we remembered to test and optimize them.
Only using responsive design for Basecamp mobile would have been like fitting a Prius body to a Hummer… under-the-hood it would have been all wrong.
On the surface it sounded great, but there were some big problems. The JavaScript that powers the real-time feel of Basecamp is heavy both in terms of file size and resource usage. This is no problem on the desktop where bandwidth is abundant and CPUs are excessively fast, but mobile browsers aren’t nearly as capable of processing JavaScript and the initial download would have been oppressive.
Not only would the browser have to download and process all that code, but much of it would have gone unused. Making a design responsive generally means taking things away. You hide features, menu items, sidebars – anything that isn’t needed in the mobile context. They’re still present in the document and the mobile browser still has to download and load into memory all the CSS and JavaScript that defines them. Not to mention the additional CSS overrides that you added to the stack in order to define the responsive layout in the first place. Only using responsive design for Basecamp mobile would have been like fitting a Prius body to a Hummer. It might have looked like a mobile web app, but under-the-hood it would have been all wrong.
Continued…Don’t worry about a style. It will creep up on you and eventually you will have to undo it in order to go further. Be like a river and accept everything.
Some of my most beloved products are those that make ME amazing at something that matters to me, even if I am kicking and screaming and swearing at the product while using it. Of course if I am kicking and screaming and swearing, I’m obviously having a compromised experience… One that might prevent me from producing something wonderful. But I’ll still take a poor UX that makes me truly better at something I care about, than the beautiful, artful, exquisite “Who Cares” product.
Last week, a small crew of 37signals folk headed to Portland for the XOXO festival. It was a high-speed joyride of creative spirit, and it might have permanently changed my outlook on making stuff. Here are a few of the morsels that will stick with me for a while.
The Internet appears to run on cynicism. Twitter is a complaint delivery protocol, and comment threads are polluted with meaningless grammar fights and nitpicky personal attacks. It’s hard not to be distracted and consumed by the blustering.
But somehow, at XOXO, everyone was cheerful. They showed beautiful things. They had fun. They were friendly. No judgement. It was a breath of fresh, caffeinated air.
The talks blurred into a DIY instruction manual for following your bliss. Every speaker shared the same recurring tale of overcoming self-doubt, failure, financial obstacles, and technical challenges to do something they could believe in (and you can do it, too!)
It was a much-needed reminder that the lifeblood of the Internet is still made up of respectful people who are wide-eyed and fiercely passionate about their work.
I’m so fortunate to work with great people. But we’re busy, we don’t all live close to each other, and we don’t have a lot of time to hang out.
XOXO had so much fringe social time that even a bunch of introverts like us couldn’t avoid talking to each other. The social events were invaluable — I kept wishing more of our company was there too. It was team-building, fun-style. When your job is to make things together, your work will be better when you have fun together. Make time for it.
Andy Baio and Andy McMillan could teach a course in throwing a good event. In short: allow your attendees plenty of room to breathe. Don’t pack in tons of simultaneous sessions in a generic hotel. Give people an experience. Give them free time. Give them good food and loads of coffee in a weird place.
Web design has a bad reputation for being stylistically trendy and same-looking. Some guy does a parallax scrolling site, and now your boss wants you to add that to your corporate PR website for some reason. Glossy buttons, Gaussian Noise, linen texture, new things that look fake-old, then back to minimalism and flat colors as a reaction to the glossy noisy textured fake-old stuff.
Turns out, there is a ton of inspiring work being done…in every other genre that isn’t web design! XOXO highlighted so much good work, and almost none of it was on the web. Movies, games, illustration, industrial design, comics, it was all diverse and interesting. Time and again, the web was just a way to deliver or sell it — the means, not the end.
So, get out of your chair and look at the world for a while. Then go make something new.
