I'm a big advocate of responsive design, yet it's often hard to convey visuals on multiple devices by just resizing a single browser back and forth. Developer Jaime Reynolds' solution makes a responsive demo a hell of a lot more straightforward: Iframes are dropped in shells of different widths, each of which represents a different device.
Now that I’ve been increasingly using FiftyThree’s Paper app for sketches and UI ideas, investing in a solid stylus is important. The Verge has a really slick roundup here. (Spoiler: The Wacom Bamboo, my current stylus of choice, ends up as one of the finalists.)
If you love films and got a few hours to spare, the latest podcast episode of Battleship Pretension is a must listen. It’s a chronological review of the 90s independent film movement, from Sex, Lies and Videotape to Bottle Rocket and The Virgin Suicides. Hosts Tyler and David discuss each film’s influence, lasting quality, and how many of the movement’s “it” directors (Tarantino, Smith, Rodriguez, Anderson) evolved in later years.
David Hansson, 37signals:
Every line of code you write has a cost. It takes time to write it, it takes time to update it, and it takes time to read and understand it. Thus it follows that the benefit derived must be greater than the cost to make it. In the case of over-testing, that’s by definition not the case.
Think of it like this: What’s the cost to prevent a bug? If it takes you 1,000 lines of validation testing to catch the one time Bob accidentally removed the validates_presence_of :name declaration, was it worth it? Of course not.
I see a huge amount of admonishments online for developers who don’t test enough. David approaches the problem from the other side; when does testing get out of control?
JavaScript engineer Rebecca Murphey:
Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev. We measured our mettle based on our ability to wrangle IE6 into submission or achieve pixel perfection across browsers. Many members of the community – myself included – lacked traditional programming experience. HTML, CSS, and JavaScript – usually in the form of jQuery – were self-taught skills.
Something has changed in the last couple of years. Maybe it’s the result of people starting to take front-end dev seriously, maybe it’s browser vendors mostly getting their shit together, or maybe it’s front-end devs – again, myself included – coming to see some well-established light about the process of software development.
Whatever it is, I think we’re seeing the emphasis shift from valuing trivia to valuing tools.
Impressive compilation of JavaScript tools, tutorials and more. Complete newbies should make a beeline for the in-browser developer tools section. If you aren’t debugging in the Chrome Developer Tools or Firebug, as far as I’m concerned, you’re not breathing as a front end developer.
Tech writer Garnett Murray:
When I browse the Tumblr Dashboard I feel overwhelmed by the amount of great content—as most people probably do—and it’s very hard to focus on longer entries people post. I still use an RSS reader for those kind of blogs, but I have a feeling most Tumblr users do not. So I often feel my longer posts get easily lost in followers’ Dashboards. That’s not a problem with Tumblr, it’s just the way people digest content here.
This is exactly the reason I’ve stopped blogging on Tumblr and consolidated everything under WordPress. Tumblr is awesome, but I just wasn’t posting the quick bites of media content that flow so well there.
Like the author suggests, when deadlines are tight I can get lax on proper CSS sprite usage. Author Niels Matthijs helps remedy this problem with some best practices. I’m not entirely onboard with this article, as there’s heavy usage of LESS and Sass, two CSS preprocessing languages I have decidedly mixed feelings about. Nevertheless, I really liked the first section of this article which deals with splitting out the sprite in Photoshop, and the LESS/Sass material later on at least gets one thinking about sprites more programmatically.
Writer Luke Wroblewski:
Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we’re not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.
I had the privilege of seeing Luke speak live at An Event Apart last year; he’s a very smart, articulate guy. Considering the higher volume of work I’m doing recently that emphasize responsive, mobile-friendly design, Luke’s patterns will come in handy.
There’s a lot of gamers, myself included, very curious about Polygon, the soon-to-be-launched gaming web site from Vox. Vox is the team that brought us tech site The Verge, which overall is a pretty slick site. Yet Paragon’s teaser website is atrocious. It’s a site guilty of shoving all relevant content on one very long page in a poor manner. That design paradigm – what I call ‘scroll heavy’ – probably sounded cool in design meetings but falls apart entirely in execution.
Just look at this:
Do you have any damn clue at all that’s there’s more content below this email form? Granted, there’s a scroll bar. Yet given how impatient and click happy most web users are these days, it’s unlikely one would scroll down out of sheer curiosity.
It’s unfortunate, because far below the page there’s a Twitter listing of many respected game journalists all across the industry that are now part of the Polygon team. For those “in the know”, the exact “core” gaming audience Polygon should be interested in, this is a pretty big deal. It’s a total lost opportunity.
So if you’re a web designer who’s on ‘scroll heavy’ design duty, be careful. Look out for the following pitfalls:
Inconsistent design among page sections. I’ve seen some designs throw together otherwise eclectic pages together on one scrollable area because it ‘looks cool’; it doesn’t. If anything, scroll heavy design demands more attention to design consistency, not less. Users who don’t notice a site’s cohesiveness between page refreshes are far more likely to clue in when different sections are a few hundred pixels above or below each other.
Too much high bandwidth page content. With all the extra code and content now on a single page, site performance becomes especially relevant; slower connections and processors can choke on a scroll heavy page’s sheer complexity. Minimize http requests by cutting down the number of separate images and/or videos that are part of initial page load. Streamline the HTML and CSS code.
If you’re still having trouble, one example of great scroll heavy design is the Kaleidoscope file comparison app website. It’s clean with bold colors, strong copy and clear divisions between major content areas. Designer Ethan Marcotte’s home is also well thought out with a more subtle color scheme.
Ben Brooks:
Since acquiring YouTube, how has Google made YouTube better? The best quality videos are on Vimeo. The funniest are usually on Funny or Die…
…YouTube still can’t playback video smoothly, it still takes forever to load, it still looks like crap, it still has the worst — most hate filled — comments on the web. It is still a flash laden nightmare.
Fair point, and I’d go even further: Facebook has the potential for a even larger product misstep with Instagram than Google made with YouTube. Facebook has a far more closed ecosystem than Google’s; they’d potentially really gut Instagram’s original intent by wrapping it into Facebook’s UI (which I fear they may at some point do.) At least the wide open, free flowing video + ad crazy nature of Youtube was a more natural fit with Google’s business model.
Ben does exaggerate Youtube’s weaknesses however. Great quality videos are to be found at Vimeo, but ‘best’ is a stretch. Youtube’s content still dwarfs that of Vimeo, and publishers overwhelmingly send content there as a first choice. Vimeo offers a similar playback experience to YouTube as well.
I think the key worry, which Ben nails, is product stagnation. First YouTube, then Flickr…could Instagram be the next to stop evolving?