There’s a lot of proposed solutions to the problem of serving different resolution images for different sized devices: small for mobile, big for widescreen and iPad Retina displays, and everywhere else somewhere in between. Unlike many other CSS or JS based solutions, Matt Stow’s doesn’t feel hacky and is widely compatible with a wide variety of browsers (IE8 and older excluded.)
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.
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.
After a week of hard work with lots of CSS editing and cross platform testing, version 2.0 of my personal site is now finished and launched. Welcome!
It’s been a long time coming. The last year has seen a dramatic experimentation on my part with blogging and social media with fairly uneven results. I’ve tried regularly flogging Twitter, cropping and posting shots up on Tumblr, even committing myself to a 700 word plus rant here on my personal site, yet nothing seemed to feel fully comfortable.
So for now at least I’m getting back to basics. Here you’ll find a mixture of Daring Fireball-esque link posts that I find interesting; tech, design and film stories predominate. I’ll also occasionally be posting more extended, traditional blog posts, though I’m aiming here more for a happy medium size, probably 500, 600 words tops.
Hopefully you enjoy the layout. It’s an HTML5 based WordPress theme written pretty much from the ground up. It’s simplistic, letting the typography (go FacitWeb!) shine with a lighter, milder color contrast than I’ve used before. It’s also fully responsive, built on a 24 column variant of the Skeleton grid system; that should make for comfortable reading on your iPhone, iPad, Android or other mobile device of choice.
Comments or questions are always appreciated. Enjoy.
Scanning through the rather gorgeous Gdgt redesign this week, I was impressed with its change in typography. The site uses Proxima Nova for its paragraph text, almost uniformly well above 12px, making reading comments and reactions on the site?s many gadgets easier to browse through. A bump in size also opens more opportunities for sizing variety within a single page, ranging from smaller 10px text for secondary sidebar information to large 16px text reserved for primary questions and notices. Overall, the typographic changes should deliver better usability and most likely generate far higher traffic.
Gdgt?s typographic change illustrates an important web design lesson: To improve the impact and readability of a text or information heavy web site, experiment with increasing the body text slightly. Try to move up from the common 10 to 12 pixel range to something larger, like 14 or 16px. It?s a practice many well designed sites are latching onto, especially in light of higher resolution displays and custom web fonts.
After months of planning, Gawker Media’s massive redesign was released to the public a week ago. Founder Nick Denton declared the changes to be “an evolution of the very blog form”, strong words from the influential entrepreneur.
In response I took a closer look, and after a week of heavy use across several of Gawker Media’s sites (Kotaku, Gizmodo and Lifehacker) I’ve concluded the redesign is a disaster: Gawker takes a shockingly old media approach to a very new media subject matter, largely ignoring the browse and scroll-heavy tendencies of web users in a desperate grab for page views and ad buys. If this is the solution, in Denton’s words, to “the bankruptcy of the classic blog column”, I shudder for web journalism’s future.
Below, a more thorough breakdown of my four largest problems with Gawker’s redesign.
Continue reading…
For this month, great reading for the holiday break, iOS vs. Android platforms for developers, paring down web design to the essentials, and Time’s nod to Mark Zuckerberg.
Best Books 2010
Slate Magazine
The yearly “best of” lists are endless this time of year, yet I’ve found music, film and gaming critics are mostly coalescing best of status around a smaller set of favorites like Kanye West’s My Beautiful Dark Twisted Fantasy (best album), The Social Network (best film) and Red Dead Redemption (best game.) Overall, there are few surprises.
That leaves the choices for 2010’s best books – an increasingly relevant medium in wake of the Kindle, iPad and Instapaper’s rise – to be all over the place. Where’s a good place to start? I’d give my first recommendation to Slate’s compilation. In contrast to the bare bones New Yorker list, I found Slate’s explanation to be lengthy enough to generate interest, yet not going so far as to be unwieldily. I also found their selection among fiction and non fiction the most varied and interesting.
Adding to yesterday’s wrap up of talks from The Future of Web Design NY, several additional trends emerged from the conference on day two: