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.
Designer Cennydd Bowles poses a really interesting and shrewd method to determine whether when drafting up a game plan for a web site, if it makes sense to go with a responsive or separate mobile and desktop design route. A key takeaway is both responsive web design and a separate mobile site approach can’t be labeled as the exclusive best choice for all web platforms. Instead you have to step back and ask what your site’s feature set is along with the focus of your different audiences and how they overlap.
Chris Coyier is a genius when it comes to CSS, yet this article I think illustrates some of the limitations for Flexbox when it comes to modern web design, at least for sites with a broad audience. Flexbox is an awesome property, but it clearly requires a lot of vendor specific CSS for coverage, and the lack of IE 9 or lower support isn’t great.
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.
The name says it all; I know what I’m going to be having fun with on my next web side project.
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.