Category: Links
Check browser support for CSS, HTML, JS and SVG with this site.
Dieter Bohn and Ellis Hamburger writing for The Verge:
When Page took office, his first directive was clear. “Larry said ‘hey everyone, we’re going to redesign all of our products,’” recalls Jon Wiley, lead designer on Google Search. Wiley and co had just two months to give Google a fresh coat of paint, and to start thinking holistically about how Google as a whole was perceived. “We had a mandate to make this all look good,” Wiley says.
I would just add that, as Steve Jobs said:
Design is not just what it looks like and feels like. Design is how it works.
And there is a lot of emphasis on the “looks” of things in the article and video. That said, the new Google Maps on iOS are great, better than Apple’s.
Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields.
Jason Fried writing for the Inc.
You don’t have to analyze the bottle like I just did to understand that it is well designed. You know it, because you can see the bottle, feel it, and use all of its features immediately. You can see where it starts and ends. It is not complicated. It is in balance with its purpose. Imagine a bottle without a spout or a bottle that was burning hot or a bottle that was as slippery as ice. Every reasonable person would know that wouldn’t work.Contrast that with software. What are the criteria for evaluating software? Software doesn’t have mass. It doesn’t have shape. It doesn’t cast shadows. It has no edges. It has no size. You can’t pick it up. You can’t feel it. It doesn’t obey the laws of physics. It’s not really even there. Nothing is pushing back, saying, “That’s a bad idea; that won’t work; that’s going to burn someone or hurt someone or make someone drop it or…” Almost none of the tools we’ve developed to evaluate physical objects apply to software.
This is why most software goes bad over time.
I can still remember some of those early meetings, with 3 or 4 of us in a locked room somewhere on Apple campus, with a lot of whiteboards, talking about what iMovie should be (and should not be). It was as pure as pure gets, in terms of building software. Steve would draw a quick vision on the whiteboard, we’d go work on it for a while, bring it back, find out the ways in which it sucked, and we’d iterate, again and again and again. That’s how it always went. Iteration. It’s the key to design, really. Just keep improving it until you have to ship it.
[…]
One of the things about designing products that can come up is Ego, or Being Right, or whatever that is called. I’m not sure how this evolved, but when I worked with Steve on product design, there was kind of an approach we took, unconsciously, which I characterize in my mind as a “cauldron”. There might be 3 or 4 or even 10 of us in the room, looking at, say, an iteration of iPhoto. Ideas would come forth, suggestions, observations, whatever. We would “throw them into the cauldron”, and stir it, and soon nobody remembered exactly whose ideas were which. This let us make a great soup, a great potion, without worrying about who had what idea. This was critically important, in retrospect, to decouple the CEO from the ideas.
Via @daringfireball
Benedict Evans has an interesting view of Google’s strategy:
In other words, Android, like Plus, allows Google to tie searches and advertising to individual people and places. In the long term, the data that Google gets from Android users is probably just as important as Pagerank in understanding intent and relevance in search.Hence, the real structural benefit to Google from Android now comes from the understanding it gives of actual users, and the threat comes from devices that do not provide this data – even if, like the iPhone, they do provide plenty of search traffic.
Via Daring Fireball
John Moran on strategy (P&L is Profit&Loss):
For a coherent strategy to work, then, the organization executing it must be measured as a whole, rather than as parts. In other words, if a company is to have a single strategy, it must be driven by a single P&L.
Via Daring Fireball
The trend away from skeuomorphic special effects in UI design is the beginning of the retina-resolution design era. Our designs no longer need to accommodate for crude pixels. Glossy/glassy surfaces, heavy-handed transparency, glaring drop shadows, embossed text, textured material surfaces — these hallmarks of modern UI graphic design style are (almost) never used in good print graphic design. They’re unnecessary in print, and, the higher the quality of the output and more heavy-handed the effect, the sillier such techniques look. They’re the aesthetic equivalent of screen-optimized typefaces like Lucida Grande and Verdana. They work on sub-retina displays because sub-retina displays are so crude. On retina displays, as with high quality print output, these techniques are revealed for what they truly are: an assortment of parlor tricks that fool our eyes into thinking we see something that looks good on a display that is technically incapable of rendering graphic design that truly looks good.
…
If you want to see the future of software UI design, look to the history of print design.
I mostly agree, but I would be carefull with relying on the print for guidence to future software UI designs. For one thing, print is not interactive, neither is used to get the job done in the same way software is.
I agree we are at the beginning of the swing in the opposite direction from skeuomorphism and I think we will overdo it, as we always do.
The evolution of design is sort of tacking against the wind.
Another example of what I call primary research in HTML5, CSS & JavaScript:
FFF is a collection of interactive experiences. Each experience has its own unique design and functionality. All the experiences are created in HTML5, the site works beatifully on both desktop and tablet.
A fully responsive and lightweight jQuery dateinput picker
Via @Zraly
Collie is a high performance animation library for javascript.
jQuery plugin for simple but powerful sprite based animations and panning
Inspiration on font combinations used on real web sites.
Via @agilek
This pure javascript library allows you to do simple A/B testing working only on your client-side code. All data is registered as custom variables in your website Google Analytics profile, so you don’t need to configure anything server side.
Shapeshift is like Masonry but with drag & drop. Touch support included.
Good article by Alex MacCaw.
Thorough tutorial for this new CSS layouting by Greg Smith.
Nice overview of the possibilities of using CSS3, SVG, Canvas and WebGL for animation today.
Primary research in the field of CSS by Hugo Giraudel over at Codrops. It may have no direct implications for your work now but someday it may resurface as uniquely useful.