Keeping to a reasonable line width adds significantly to a web page’s readability. But it’s easy when building a site to forget about this and hand counting characters on a screen is a drag. That’s why Chris Coyier’s simple bookmarklet here works great. Run it on any site and determine immediately how your lines are shaping up.
From Randomwire, one reason why native Japanese sites often feel so cluttered, at least to more of a traditionally U.S. centric eye:
Logographic-based languages can contain a lot of meaning in just few characters. While these characters can look cluttered and confusing to the western eye, they actually allow Japanese speakers to become comfortable with processing a lot of information in short period of time / space (the same goes for Chinese).
Designer Trent Walton is a responsive web design veteran; he’s part of the three man web agency Paravel who’s done many cutting edge responsive projects. That’s exactly why reading this post, highlighting some smart steps to get a team on board with RWD, is so awesome.
(Bonus points for the FF Meta Serif usage, one of my favorite web fonts.)
There’s a lot of designers and developers who love the design of Apple’s new product pages. But I’m not one of them and it’s almost entirely due to its very forced input methods. Designer Trent Walton explains it perfectly.
Designer Jessica Enders, writing for A List Apart:
The problem is that in the push for simplicity, flat UIs may have gone too far. With content, things like drop shadows, gradients, and borders may well be no more than useless “embellishments.” When we read a multi-page news article, it doesn’t matter much whether the mechanism to move to the next page is a button or a link. With forms, however, distinguishing between a button and a link matters far more.
A thesis that argues for more visual contrast than average for forms may sound a bit simplistic. But it’s not; Jessica goes into some really excellent design examples to show how just a tiny bit more distinction or hierarchy can have significant form conversion effects.
Last week at my day job our team released a newly refreshed Pocket for web. (If you’re at all curious why my blog posts stopped dead midweek, it’s because my life has been fixated on launch and support issues. Thankfully there we few.) It’s been my main development and design focus for months. There’s a simplified navigation, recut reader view, keyboard shortcuts, and everything is noticeably faster. If you’re already a fan of save for later services, or you’re curious but never jumped in before, I’d encourage you to check it out.
Web developer Brad Frost:
It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
Some may interpret Brad’s post as a shot against a traditional web design workflow. It is, and rightfully so. Too often, both in my own career and in talking with other developers, designers run off the Photoshop deep end without a lot of developer collaboration. They create something that is gorgeous, groundbreaking but in the end really slow. Or a team’s focus is just on shipping new web functionality without considering the performance impact.
Successful teams consider and optimize for performance. As Brad emphasizes, get into prototype form earl and if it’s too slow revise immediately.
I have read far too many posts in recent months on how to incorporate responsive web design into a design workflow. Most cover what I already know, but leave it to designer Jacey Gulden to shake things up:
By nature, a mobile device is narrow, and it forces the content to be presented in a single column. The linear display caused by this narrowness forces the designer to give priority and hierarchy to certain pieces of content that is much less apparent when a site is viewed on a wider screen.
Because of this, many designers have started experimenting with a new kind of mockup that involves content hierarchy rather than design layout. Designers give numerical values to elements of content that correlate to where those items might appear in a stacked column layout. This way, design is less constrained, but the content is always presented in the best way possible.
I’ve heard the “content hierarchy first” advice before but rarely in such a clear manner.
I’ve seen a lot of tech buzz about this app and deservedly so: it’s a hell of a lot easier for developers that have HDPI to open up a special “non HDPI browser” via this app vs. trying to switch resolutions repeatedly. Well worth a look.
UI designer Joshua Porter:
The reality is that Amazon has designed themselves into a Local Maximum. They’ve tested and tweaked the same product page over and over and they’ve optimized it as much as possible. They can’t improve it significantly at this point without making a big change. But they can’t make a big change because the only changes they can make must increase revenue (or some closely related KPI). So any big change is a very, very scary thing when that page is driving billions of dollars in revenue. So it makes sense that Amazon only makes small changes to their product page design.
Early in my web career, like many others I was fascinated by Amazon’s web design and leveraged it occasionally to fuel e-commerce decisions. But when you fast forward to where we are today, it’s positively shocking how little Amazon’s design has evolved. Joshua really nails why.