07.18.12 |
Web/UI Design |
∞
Like many web developers, rapid CSS development is an integral part of my office workflow. I spend a large part of my day in “CSS tweak mode” where the focus is on smaller changes: alignment, IE bugs, consistency. Yet, as any developer can tell you, little CSS problems can drive you crazy and become a major time sink. You’re staring at a page and can’t figure out why that one element keeps dropping down in IE8. Or you’ve got a nested navigation that on mouse over pushes one element out of alignment by a few pixels.
As I’ve matured as a web developer over the years, I’ve moved faster through the tweak period thanks to my growing CSS experience. Yet often the right technique can be just as important.
I call one of my favorite techniques the magenta test. I open up the web inspector and add a custom CSS property of background: #f0f to adjacent misaligned CSS elements. Magenta blocks pop up on screen and in many cases, the root problem jumps out right away. I’ll usually make a quick edit on one of the elements until the magenta blocks line up. Problem solved. In more complex issues I’ll find the parent container of the magenta block elements and set its custom background as well, albeit to a different color.
This approach is often much faster than your usual use of the web inspector, where mouse clicking and scrolling predominate. Inspectors place the basic metrics (e.g. width, padding, margin) in one area, with the raw CSS attributes usually far away; either you’re forced to scroll to the top (Chrome, Safari) or flip to another inspector tab (Firefox) multiple times. This problem is compounded when comparing multiple elements; an inspector places a highlight box around only one element at a time.
Compare this with the magenta test. Adding custom properties so that they are in one place in the web inspector. You select an element, add the attribute (for even faster results, copy and paste the background: #f0f snippet), and repeat for all remaining elements. There’s no thought process, no scrolling and no tabbing–it’s just drawing a few magenta boxes. It’s also cross browser friendly. Web inspectors in Chrome, Safari and Firefox have a slightly different layouts, but since adding a magenta background is so quick, a context switch between browsers is pretty painless.
Bonus technique: Buy a measurement tool, assign to keyboard
The magenta test is slick for big, fairly obvious alignment problems. But when you are making that last pass for polish, it’s hard to pinpoint elements off by a pixel or some other tiny amount. Go to the Mac App Store, and buy a measurement tool like SnapRuler or xScope (which is a suite of web design tools; you’ll be using the dimensions tool.) Assign a keyboard shortcut to toggle the tool on and off. Draw a measurement between items–I like going from edge to edge of boxes or the baseline of two text elements. You’ll see a misalignment immediately.
07.18.12 |
∞
Jolie O’ Dell, Venture Beat:
Mayer told press that the title didn’t matter to her and that she really only cared about the products she was working on; however, Google stopped showing off Mayer’s work as well. While she continued to be a fan favorite at tech conferences, she stopped appearing at the company’s press conferences and developer showcases, including Google I/O, where the company displays its most important products of the year. When she showed up at the Crunchies, Silicon Valley’s self-congratulatory awards show, she was acting as a distinguished alumna, presenting an award rather than receiving one — that honor went to Gundotra for his Google+ work.
Excellent article and a forceful rebuke to all the “why would Meyer take such a downgrade move to Yahoo” vibe that I’ve seen elsewhere on the web and my Twitter feed (I admittedly jumped in at one point.)
I don’t question Meyer’s judgement on this any more and wish her the best; it’s also great to see more women in corporate leadership positions. But can she turn Yahoo around? I doubt it.
07.18.12 |
∞
I’ve lately been giving the cross platform to-do list app Cheddar a run through it’s paces. Bottom line, it’s a well built app, one I’ll write more about in the future.
For now though, if you use keyboard launcher Alfred, there’s a new Cheddar extension developed by Chris Vaughn. It’s simple but solid and should make entering new list items much faster in my workflow.
07.17.12 |
∞
Web sites depend on a lot of images, and with higher resolution displays, their size will only increase. Yet website performance is critical as well; you want a great looking image in as small a file size as possible.
That’s where TinyPNG comes in handy. Cut your png of choice and use the site’s drag and drop uploader. TinyPNG will strip colors and compress pngs down to 8 bits while still retaining 100% transparency. I’ve used it on a few recent projects, and every thing I send to it reduces the file size by at least 50% with no noticeable image degradation.
07.17.12 |
∞
Andy Greenwald, writing for Grantland:
What would it take to turn Mr. Chips into Scarface? What separates Breaking Bad from everything else on TV is this relentless focus. Every season has improved on the one that came before precisely because Gilligan is telling a single story, start to finish. His microscopic glare is as exhausting as it is exacting. In comparison to some of television’s more humanist and highbrow hours, Gilligan’s master class can occasionally seem cold. But it’s a seminar well worth taking. Breaking Bad is more than science. It’s intelligent design.
The season five opening was great. Can’t wait to see how this series wraps up.
07.16.12 |
∞
I love keyboard shortcuts but adding them to web sites and web apps can be painful. Different browsers handle slightly different syntax, and the process of looking up key codes can require some trial and error. Enter Mousetrap, a tiny (3kb minified) Javascript library where you invoke natural syntax (e.g. ‘4’,’command+k’) for keyboard bindings. No external library dependencies either.
07.16.12 |
∞
Nice article over at Webdesigner Depot that presents the a common design debate for a potential client: do you go with an entirely separate mobile and desktop site or a responsive design with a single combined view?
I enjoy the style used here: lots of mini interviews with developers across multi web agencies across the country. There’s not a clear consensus among those interviewed, and I tend to agree. You can’t be black and white about responsive design, much as there’s no silver bullet design solution for any one client.
07.14.12 |
∞
A wonderful look at the title sequence from Se7en. I still remember my experience in the theater with the film rather vividly; that staccato-edited macabre opening was amazing, dare I say influential later on when I started designing at work. Just look at the detail noted here:
The typography itself – which would likely break several guild legibility rules in modern times – was hand-etched into black-surface scratchboard and manipulated during the film transfer process to further smear and jitter it. This transfer was then cut up and reassembled during post production to add a final layer of temporal distress.
07.13.12 |
∞
Author Rowan Kaiser, writing for Gameranx, breaks down the plot holes and inconsistencies of Blizzard’s flagship game. I agree; the dialog is often atrocious. That said, complaining about plot in Diablo 3 is pretty well beside the point; it’s still an extremely polished, addictive loot game.
(As an aside, if you’re into gaming news you should be following Rowan on Twitter. Good source.)
07.13.12 |
∞
Very solid interview with Oliver Stone by Matt Zoller Seitz on his new film Savages. I really liked this back and forth:
Seitz: There’s a scuzzy little character moment between John Travolta’s DEA character and Del Toro that’s like something out of seventies drama. Lado drops in on Dennis. Dennis has just made himself a grilled cheese and tomato sandwich. Lado takes the sandwich away from Dennis, but before he eats it, he takes the tomato slices off and tosses them away.
Stone: [Laughs.] Yeah, that’s Benicio. Only Benicio could come up with a detail like that. He’s that way, very instinctive. To take the sandwich was probably enough, but Benicio pushes it further and makes it funny.
Seriously, having seen Savages over last weekend, Del Toro just rocks. That little Travolta/Del Toro scene was easily better and more natural than pretty much anything either actor has done for years. Overall, Savages is more than anything else a great showcase for 90s talent making a comeback: Travolta, Del Toro and Salma Hayek all nail their roles.