Mobile designer Rakesh, writing on his own blog Radesign, gives the GMail mobile app a visual makeover. I’m not crazy about everything he does (most notably, making unread titles blue), but if anything, Rakesh illustrates some great guidelines for general readability and contrast. It’s applicable equally to both native mobile app design and the web.
An excellent deep dive by developer/designer Paul Stamatiou regarding his approach to handle images that looks great on both normal and HDPI (a.k.a. ‘retina’) devices. Pay special attention to his work on how to effectively cut 1x and 2x sprites, he includes useful screenshots.
Engineer Lara Swanson writes an excellent article for A List Apart on how overall UX design can be greatly improved with some performance optimization. It’s true some of her suggestions should be obvious (e.g. sprites, cutting down on HTTP requests), but there’s still real insight here. It’s an especially important read for designers: I’ve seen way too many beautiful designs that have way too many requests and inefficiently load imagery.
This is one of the best articles regarding web optimization for long form reading I’ve read in a while. Lots of great tips: don’t break page flow between articles, test how the typography looks on multiple devices and much more.
It’s very exciting to see The New York Times redesign their (now pretty dated) web design. Looking at this official blog post I’m tentatively encouraged; it’s got a much cleaner implementation along with that very hot ‘off canvas’ side navigation. Overall, it seems far more content focused and responsive friendly.
I’ve always considered Zurb’s foundation to be one of the best thought out front-end web frameworks out there, especially with regard to its thoughts on an adaptive grid system. Foundation 4 really shakes up what’s been done so far, most notably moving to a “mobile first” mentality regarding its grid and CSS components.
Designer Viljami Salminen:
As I earlier in that article wrote, typography for the Web is really hard to design anywhere else than inside the browser. This is today even more true than it was a year ago. Typography prototype tries to solve this by doing the hard choices before jumping to other design tools like Photoshop.
Viljami really has a great point here. I’ve seen way too many projects backpedal when a font was decided on that looks awesome in Photoshop, only to fall apart in actual browser usage in the middle of a development cycle. But it’s more than face selection, it’s also issues of size and scale, also briefly touched on in this post.
I found the details here a bit overkill – something about the amount of mixins dependencies gives me some mild concern about code bloat. But once I started paging through the raw CSS logic there’s a lot of great ideas here, from a non uniform line height to not using pure black and a custom look for ampersands.
I really liked this short post by director/designer Nathan Ford on the advantages of custom cut web grid systems. Here’s the money quote:
Nathan Smith built 960.gs a few years back and it went a long way to popularize the application of grid-based layout on the web. This was a leap forward in bringing grid-based thinking to the web, but 12 columns at 960px wide has become so ubiquitous now that it limits our progress into more considered and complex grid design. 960.gs – and most frameworks – invert a key aspect of grid theory:
You should design a grid based on your content’s constraints, not design your content based on a grid’s constraints.
Designer Elliot Jay Stocks on responsive web design (RWD):
RWD is about making your site adaptable to any scenario, without worrying about specific devices and their proprietary dimensions.
RWD doesn’t need to take more time and therefore doesn’t need to cost your clients more money. At least not after you’ve rethought your approach to web design, anyway.
His argument isn’t perfect – I think Elliot underrates costs overall, but it’s still very strong.