04.16.14 |
∞
Designer Eric Portis goes over the many growing pains for the web and responsive images. There’s a lot code, a lot of math, and generally a lot of trouble. Note Eric’s proposed solution – a single img tag with both srcset and sizes attributes – doesn’t exactly look like what browser manufacturers fully agreed upon as of last month. But even with the slightly more verbose picture element, the srcset and sizes idea remains. I especially loved Eric’s illustrations on this post; they’re smart and funny.
04.15.14 |
∞
For beginners, CSS selectors and selector specificity can be tricky to properly understand without significant trial and error. Fortunately Luke Pacholski created this smart little game to help you learn properly. Clever.
04.14.14 |
∞
Web developer and consultant Tim Kadlec:
The more multi-device work you do, the more you discover that the toughest problems to be solved aren’t related to technology. The toughest problems are related to people, process, workflow and politics…
…Transitioning from the traditional waterfall/siloed approach to a fluid process where designers and developers are working more closely together can be a very difficult adjustment. Not only do you have to battle the internal politics involved in such a move, but you have to experiment to find the right comfort level. Until organizations make that transition it’s natural for things to be off-balance a little bit.
Exactly. As I’ve written myself and linked to elsewhere, responsive web design is more than a few tweaks and fixes taken in isolation. It’s a change in workflow that requires buy in from several key players.
04.12.14 |
∞
I had a fun time using Dayle Rees’s color schemes in Sublime Text a month ago. But lately I’ve been using this alternative color scheme that’s a touch less colorful than Rees’s yet works beautifully for my coding style. Its got an interesting theme as well, but I found it a bit too spaced out for my tastes (I pair the color scheme with Flatland.) By designer Jaime Wilson.
04.11.14 |
∞
Trent Walton:
A responsive site may have flexible grids, fluid images, and media queries, but if it also scroll-hijacks desktop monitors while stutter-scrolling on touch devices, auto-loads heavy videos that break data plans, or asks users to rotate their screens 90° for the full immersive experience, I’d argue it’s not device-agnostic. Many sites, responsive or not, are built only with ideal scenarios and a small set of devices in mind.
04.10.14 |
∞
I’ve done many web-based ajax request forms in my career. Regardless of the project, I generally see the same processing design aesthetic: the submit button flips to a disabled state and a loading animation, usually a circular spinner, pops up. So designer and developer Mary Lou asks, why not try something different with the button itself? The results are pretty cool. Some ideas are admittedly a bit too clever, but it’s fun to see such creativity in action.
04.09.14 |
Web/UI Design |
∞
The New York Times recently launched their first major redesign in eight years. That’s an eternity on the web, so it’s impressive to see the NYT largely catch up with modern web design and development principles so well. New pages have a responsive design framework to work well across smartphones, tablets and laptops. Articles embrace a “content first” design with less distractions from the main text. And management got the message that good performance is good design with average page weights dropping and faster speeds across the board.
Trends and tech standards aside, even casual readers will find the new NYT article layout a redesign highlight. Content is all on a single page with endless scrolling for navigation. It makes reading easier and is a clear nod to the fluid designs of native mobile design. The improvement is especially noticeable on long form articles; my reading flow was frequently interrupted with content previously broken into many pages my reading flow was frequently interrupted.
Article design is clean and sparse, especially as you move further down the page. Often it’s borderline minimal with little more onscreen than the article text itself and a top aligned navigation bar. Even other suggested articles don’t appear until you reach the article’s bottom. Attention stays refreshingly on the article text. This makes for a more pleasurable reading experience than what I find on most news sites. Also article images and videos are expandable into large, full screen lightboxes. It’s a cool addition given our much higher expectations for web media since the last NYT refresh.
The NYT’s modern design sensibility extends to article comments as well. Instead of adding a chronological thread of commentary below article content, comments are hidden by default and optionally brought in alongside the article (It’s akin to more experimental designs over at Medium and Gawker Media.) The use of real estate makes it easy to refer back to article passages as you’re scanning reader feedback. To help sort through what’s important, comments can be organized chronologically, by reader votes and by direct editor picks. Overall the comments design is such an improvement that I’m reading them regularly; I rarely did with the previous design.
Most NYT pages are now also responsive with navigation and content optimized for the display you’re on. For the first time I’m able to browse through much of the site on an iPad or iPhone (which occurs frequently when I dive into NYT links on Twitter and RSS) without feeling hampered. Interestingly, the NYT developers didn’t use a traditional responsive method where CSS media queries make alterations on the fly to page markup. Instead there’s an upfront check for the general boundaries of your device at which point custom CSS and HTML are generated dynamically. It’s unorthodox, but the NYT has an very diverse audience to support. An out of the box solution is justified.
The much touted new universal navigation works as promised. It makes it easier to jump from one paper section to another without having to scroll significantly or bounce back to the home page. It’s a logical extension of the “content first” approach to the NYT’s article design: stay out of the way yet remain readily accessible.
On the other hand, the more time I spend with the NYT redesign away from viewing and reading the articles, the more I see missed opportunities for change. Foremost is the home page, whose design still feels, like many newspapers online, muddled. There’s just too many levels of hierarchy that blend together. Take the two leftmost columns: there’s a narrower column with larger, italicized headlines and then a wider column to its immediate right with smaller headlines. Given the styling change I expected two different sets of content from different newspaper sections. I was wrong. Stories “wrap” from the first to second column according to chronology and editor preference.
The “Inside Nytimes.com” section further down are smartly curated deep dives that don’t fall under traditional breaking news. Unfortunately, the horizontal carousel navigation is slow, dated, and there should be more articles to choose from. Moving further down you get the common top set of stories from each section of the paper (e.g. World, Business Day, Opinion). It’s well placed in relation to the top stories above but the area needs more white space and a larger font size to improve legibility.
There’s also inconsistent, puzzling navigational choices throughout the site. The smaller “micro sites” like Dealbook, the Bits blog, and the Opinion section often differ the order and placement of the main links (sections, home, search) at top. Moving down into article content also changes the top nav bar actions: options and user account settings links disappear, replaced by share and comments icons. In reality, at least the share and comments icons – the most relevant actions within an article – should be accessible regardless of my location on the page. The NYT instead pushes these actions out of the way in favor of home delivery links and a corner ad. Yet there should be a way to keep both the ad and delivery push alongside comment and share options without the space feeling cramped. It’s annoying to scroll down into an article just to share easily or see if there are any comments.
Likewise, while the new nav bar with a list of related articles at article top is useful, it needs some behavior adjustments. It appears inconsistently: it’s natural for it to appear when you’re at the top of an article, but odd that only a quick scroll up makes it appear otherwise. To mirror native mobile experiences, any scroll up should make the article nav bar appear. Alternatively the NYT should remove the “scroll to appear” behavior outright. There’s a few animation and spacing problems with the nav bar as well. The animation that slides individual articles in from right to left can distract from article text; I’d prefer something subtler. Also the global side navigation is hard to navigate with touch. Slightly larger hit targets on the styling for narrower width devices would solve this.
All in all, the good news about the NYT design deficiencies is that they’re correctable, unlike some of the more fundamental problems I see with the web editions of papers elsewhere. When looking at the news competition (e.g. Washington Post, USA Today) I’m reminded of the widening web design and development gap between younger, online only journalistic companies and their older counterparts rooted in print. Compare Pitchfork to Rolling Stone, The Verge to Wired and Gawker to People. Post redesign, the NYT is a rare exception to that gap.
04.09.14 |
∞
Great news from the responsive image front: the picture element, a responsive image solution championed by many developers (including myself) is finally coming to fruition in the latest Firefox and Chrome dev builds. Safari will hopefully follow suit soon. Members of the Responsive Images Community Group discuss what’s been decided and how we reached this point.
04.08.14 |
∞
There’s a lot of responsive grid frameworks out there but many don’t understand what they are really crafting in the HTML and CSS. Jordan Lev’s tutorial goes over the basics.
04.04.14 |
∞
I haven’t revisited Alien for quite a while. But Ridley Scott’s classic has aged extremely well, and it’s influence on modern sci-fi and horror tropes is undeniable; smart analysis is always welcome. This video essay by Steven Benedict is exactly that; it hits on some major themes while not overstaying itself welcome.