Entries tagged web development
Symbolset Most web designers are familiar with the pains of creating image sprites for their icons. It’s easier with things like LESS, but still, sucks. The good folks at Oak Studios have created an icon set that is built into a font (a growing trend), which uses ligatures to insert the icons. For example, if you type “heart”, it will automatically insert the icon for a heart. Pretty smart.
Designers vs Coding Frank Chimero explains why it’s important for designers to know how to code, which seems incredibly obvious. This rung truest:
Design decisions are affected by both the content and the format, like how a sculptor would make different decisions if she were working with clay rather than marble.
You don’t have to be an expert, but you do have to understand how things are built. If you don’t, you’re going to make assumptions that affect the work of everyone else on the team.
Web Dev Treasure Hunt to Apply to Bandcamp If you want to apply to work as a developer at Bandcamp, you start at their jobs page and they have the usual spiel — you should be like this, you shouldn’t be like that. But at the end of the job description, they tell you to check the HTTP headers. This leads you on a treasure hunt that requires a love of puzzles and some background as an engineer. I was happy to have made it to the end, but I won’t spoil it for you.
The treasure hunt was a lot of fun and I think it’s going to make an engineer more interested in working with the company. Sure, it’s a little quirky but it requires a slight time commitment (it took me about 15 minutes to figure it all out) and a knowledge that will immediately cut the wheat from the chaff. I love this kind of creativity.
The Usability of Passwords There are two great tips in this article — one for users and one for developers. For users: your password should be multiple words; “this is fun” would take 2,537 years to crack using today’s technology. For devs, adding a 5-second time delay between password attempts moves the time to crack “alpine fun” from 2 months to 63 years. [via iamcal.com]
CSS Vocabulary I often find myself teaching someone new to web design about something very specific and can’t remember the name. “So you just pick your class name and write all the, er, definitions.” Maybe I’m not that bad, but this list of vocabulary is a good reference to give someone just starting with CSS.
Web Directions South 2010 Opening Titles Cameron Adams created an amazing example of what you can do with HTML5 and CSS3. It makes me start to wonder if this is faster than building something comparable in Flash or another Motion Graphics tool. Anyway, this is amazing and needs to be viewed in Chrome. [via @stop]
Why 37signals Skips Photoshop I could always see why 37signals can skip Photoshop as part of the design process, but I’m starting to believe that more and more product-driven companies can too. Comps build up expectations and the final product will never satisfy everyone. Jason makes a lot of good points here, but this one especially rings true.
Photoshop is repeating yourself. Ok, so you’ve spent 3 days on a mockup in Photoshop. Now what? Now I have to make it all over again in HTML/CSS. Wasted time. Just build it in HTML/CSS and spend that extra time iterating, not rebuilding. If you’re not fast enough in HTML/CSS, then spend the time learning how to create in HTML/CSS faster. It’s time well spent.
Gridulator As Gridulator says, “Make pixel grids, lickity-split.” It’s a great little tool. David Sleight, aka Mr. Stuntbox, gives some nice background on the product, if you’re into that.
Dark Patterns I’m glad someone catalogued these. Tricking your audience is never the right approach.
Normally when you think of “bad design”, you think of laziness or mistakes. These are known as design anti-patterns. Dark Patterns are different - they are not mistakes, they are carefully crafted with a solid understanding of human psychology, and they do not have the user’s interests in mind.
Real Editors Ship Paul Ford wrote this a couple months ago and I never linked to it. Paul argues that web projects need editors to keep them from floundering and help them get the code out the door. Lots of smart people have talked about continuous integration and building the simplest version of a feature first, but Paul’s take puts a human touch on it that’s easy to appreciate.
If you read this before, read it again. If you didn’t, read this quote.
Editors are first and foremost there to ship the product without getting sued. They order the raw materials—words, sounds, images—mill them to approved tolerances, and ship. No one wrote a book called Editors: Get Real and Ship or suggested that publishers use agile; they don’t live in a “culture” of shipping, any more than we live in a culture of breathing. It’s just that not shipping would kill the organism. This is not to imply that you hit every sub-deadline, that certain projects don’t fail, that things don’t suck. I failed plenty, myself. It just means that you ship. If it’s too hard to ship or you don’t want to deal with it, you quit or get fired.
Fake: Automated Web Testing For those of us who constantly have to fill out a form to test server-side code or Javascript, this might be a godsend. Watch the video for a quick understanding of what it can do. [via @defunkt]
text-rendering: optimizeLegibility; I’m hoping the title signifies the nerdiness of this post. Roughly, this CSS property works some magic to improve kerning and add ligatures where they are available. It’s on by default in Firefox, but not for Chrome or Safari.
This Page is Under Construction! An unbelievable collection of “Under Construction” gifs.
Posted March 17, 2010
On the way over to SXSW, I was reading The Invention of Air by Steven Johnson. It’s good, but my mind was obviously in a design mode, not a science mode. So when I crossed this sentence, it leaped out.
We accept the premise that organisms have comparable purposes in the systems that collectively keep them at homeostatic norms: our bodies stay marvelously calibrated at 98.6 degrees for a reason, and that reason is that our particular mode of staying alive is optimized for that temperature. That is one of the defining characteristics of what it means to be an organism: a system of cells and organs that are explicitly devoted to ensuring the survival of the larger group to which they belong. [Emphasis is mine]
That last line is sticking with me. Whenever I want to make a change or an addition to a site, I have to think about how it will affect every other aspect of the system and what needs to be adjusted. The site needs to always hum along at 98.6 degrees.
It’s also going to encourage me to build more elastic solutions. Instead of creating a system that fails completely when something goes wrong, have it work well enough, but — just as your body’s temperature rises when you’re fighting an infection — send you warning signs that trouble is brewing. For example, forms should submit data even if it’s incomplete, because people might not try again if they’re overly frustrated.
As for SXSW, I’m still mulling things over. Expect some posts over the next few days.
Web Inspector Updates Webkit brings their developer toolkit up to parity with Firebug and, I think, beyond.
Creating a Lightbox with Only HTML and CSS Really impressive. I still only kind of understand it. [via For a Beautiful Web]
Douglas Bowman Explains the Imageless Buttons Used in Gmail Gmail released some new buttons (and keyboard commands for labels!) today and Doug explains how he built round buttons with a gradient without using any images. Impressive.
The Most Effective Debt Collecting Email I Ever Wrote I think we need to appeal to human sensibilities a lot more in business. I'm not saying we all have to hug it out, but there's no reason to avoid honesty and openness.