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:
Navigation or content that fails to imply what’s below. If you’ve got a clear navigation area at the top that scrolls or jumps to content below, you’re probably in decent shape. But if you’re going very minimal and navigation isn’t prominent, be sure a bit of ‘teaser’ content will be viewable at the bottom of most users’ browsers (if in doubt about that bottom point, I’d start with 700 pixels from the page top.)
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.
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?
Looking through this list late one night over the weekend, I’m first struck by both the number of repeat directors, and how some of the most repeated and talented in the bunch end up directing both some of the best and worst episodes of the series. Exhibit A: Jennifer Getzinger. She’s directed what I felt was a crazy weak episode, “My Old Kentucky Home” from Season 3. Yet she also directed Season 3 highlight “The Gypsy and the Hobo” and Season 4’s “The Suitcase”, the latter of which has one of my favorite scenes in TV history.
This is a nice win for Spotify, and a huge improvement over their previous embed pages. As a Spotify Premium member myself, I’ll appreciate being able to play tracks and playlists on several music blogs I follow. However, in practice the Play button is more a triumph of marketing over real technological progress; with the full desktop still being the player’s audio source is a disappointment. Furthermore, it could easily frustrate those use to clicking on self contained flash music widgets.
A great solution would grant limited access, like playing one song via embed, followed by a prompt to log in and hook up via the standard app. That’s a potentially tricky technical implementation, but a simple IP check could just register number of plays before presenting the paywall.
I admittedly don’t listen to the Write for Your Life podcast often, but this was an excellent episode. Topic at hand: the best blogging platform for starting out (Tumblr vs. WordPress vs. Blogger) and good blogging philosophies.
Each of these games operates less from a real sense of story than a suggestion of a narrative. Temple Run is little more than an endlessly long expansion of that scene from Raiders of the Lost Ark where Harrison Ford runs away from the boulder (except instead of a boulder it’s a bunch of angry spirit-chimps that are chasing after you). Canabalt, by contrast, sort of feels like the early scenes of The Matrix or The War of the Worlds. Something bad is happening and it involves giant evil robots. You’re not sure why you’re running, or where you’re supposed to go. In both, you just keep going. Instead of words, there are only frantic footsteps and the occasional grunt of effort.
Well written, fairly thought provoking essay on the simplicity of both popular iOS games. Yannick also makes a case for the addictive qualities of running, both in game and in real life.
How long before customers look left, look right, see everyone with the same phone or tablet and start itching for something different? My friend Peter Yared contends that the trend has already started in the UK where the “18-25 class” now favors the smorgasbord of Samsung devices as a relief from the iPhone uniform.
I appreciate what Jean-Louis Gassée is after here but the argument doesn't quite stand up.
Apple's strength derives from its focus, iterating on a few core products endlessly. Multiple iPhone sizes don't mesh with that philosophy.
Besides, the iPhone gets a cosmetic refresh almost every year to keep things interesting. If demand gets high enough, Apple could always crank out a few iPod like color variations alongside the requisite white and black.
To be clear, I could not be happier for the Instagram team. They earned their success. The service is worth every penny. I’m genuinely glad that the team will get to reap the benefits of its hard work.
And buying Instagram was a great business decision from Facebook’s perspective. As I remarked on Twitter, why try to build a competing photo app when you can just buy the best and most viral?
Still, as a user, I can’t help but wonder: how long before Instagram becomes just another Facebook app? How much time until everything that made the service so special disappears into the ether?
As an early adopter, I’ve watched far too many of my favorite apps and services suffer. They have shut down or evolved into something completely different after being acquired by a bigger company.
Clever, streamlined note taking app from Agile Tortoise. Its speed is really slick; I’m able to write a quick note almost as fast as I tap the icon, and it’s exportability to Markdown really comes in handy for WordPress on the go. With a single action I can easily fire off a message as a tweet in Tweetbot, a nice touch.
Nevertheless, a lack of Dropbox integration is pretty much a deal breaker for me at this point. I can manually copy clipboard contents over to Notesy, but it’s cumbersome and it largely defeats the speed benefit this app has over others. I really liked Ben Brooks’ suggestion on an integration path:
I want Drafts to have a button that I can send the .txt file for the Draft to a folder in my Dropbox. Not every note needs to go there, but I want to be able to send one if needed.
If Drafts gains Dropbox functionality in a later version, I’d probably give it another shot. Then again, my workflow is far more Dropbox centric than probably most. It’s well worth a look for almost anyone else, especially at its very reasonable $0.99 price.
