Re-redesign of nbcnews.com gets it right, sort of

Re-redesign of nbcnews.com gets it right, sort of

The widely-panned nbcnews.com website redesign from February 2104 is getting a facelift—after a really bad facelift!

You read it here first. In my previous article highlighting the flop redesign of nbcnews.com, I excoriated the horrible design misfire and left it at that. In private conversation, I told friends how such a bad user experience was going to impact their reader stats negatively. Well, the numbers are in:

nbcnews.com redesign

The nbcnews.com website was already declining when the silly redesign was launched in February. They had a functional site, but the hyper-partisan cheerleading, I mean news reporting, was the real issue behind their decline in the first place. The overly-picturesque giant-comic-book redesign effort, which was an attempt at a branding turnaround, simply hastened the continued decline in visitors because it was simply unreadable as a source of news. Apparently, some Very Smart People™ at nbcnews.com thought mixing partisan news, coloring books, and Flickr, would equal a turnaround in the decline of their viewership. It did not work.

So how does the new design look, which is available for the moment in a preview opt-in section of the site? In a word, improved:

nbcnews-redesign

There are now 17+ story links above the fold, and a full suite of site navigation tools to quickly get you some place else. And if you flip to a mobile device, you get a very-workable no-nonsense sans-comic-book layout and typographic treatment (hidden pun in there, for sharp-readers only).

The mobile view looks good too:

nbcnew-redesign-mobile

Overall, we can see it’s very much a work in progress, but progress in the right direction.

What about Search? Let’s quote my previous post on this:

“BTW: Don’t even click “Search” unless YOU ARE READY FOR SOME SERIOUS SEARCHING! WOOHOO!

You clicked “Search”, didn’t you. You were warned.”

Hopefully they’ll fix that search box before the real site goes live :).

In the meantime, if you want a ton of news in a legible format, try Real Clear Politics (for desktop) or the Real Clear Politics app (for mobile). You’ll get a cross-section of headlines from all major news outlet in a cohesive, news-focused UI that knows what it is trying to do.

 

Redesign of nbcnews.com gives “mobile-first” strategy a black eye

Redesign of nbcnews.com gives “mobile-first” strategy a black eye

Visit nbcnews.com now. The “news” site has 5 headlines. I’m on a Mac with a 1080p display. This is what 5 headlines on a 1080p display looks like:

news

This is what happens when someone doesn’t get mobile-first.

Mobile-first should mean optimizing the content and design starting with mobile, not starting and ending with mobile. I’m looking at a formerly desktop-friendly news site that is 100% unusable on a desktop device.

This is such a goofy misapplication of mobile-first methodology that it’s goofy.

Let me just say that I wrote a little piece called 52 Question Checklist for Responsive Web Design Projects that was written to prevent goofy misapplications of mobile-first, or responsive web design, exactly like what we see at nbcnews.com. It annoyed a few people. I wonder if any of those people are on the design team at nbcnews.com?

Ok, so the world should design websites mobile-first. We get it. It’s right. It’s “how to build websites” now. But someone in charge of nbcnews.com only read the table of contents to “Mobile-First Web Design for Dummies” (is that a real book?), stopped there, not realizing they didn’t get it. This is Windows 8 all over again. Truly mobile paradigms are….mobile! They don’t translate to desktops! Hasn’t anyone on the design team at nbcnews.com been paying attention…to anything?

Oh well, another day, another deleted bookmark to a formerly relevant or usable site.

BTW: Don’t even click “Search” unless YOU ARE READY FOR SOME SERIOUS SEARCHING! WOOHOO!

You clicked “Search”, didn’t you. You were warned.

 

Font Combinations

Font Combinations

Here are the three (well, four) best resources for creating classic font combinations that we know of:

The resource page has pretty much all the classic font combination pages and resources from over the last decade. If you start there, you are going to get all the info you need. There are other more modern sites that focus on examples rather than principles, such as I Font You, but they tend to be a bit random. A book like The Big Book of Font Combinations takes a systematic approach and limits itself to a core subset of the most popular fonts of all time.

BONUS REFERENCE: You can also find many of the classic fonts, pre-typeset and mixable on the fly in, our iPhone App, Font Combinations 2.0.

bbofc-cover

 

Have you thought “I’ve spent way too much time editing CSS”? Well, glimpse the future

Ok People:

Here is a glimpse of the future of web design  :)

Imagine a future where you spend time designing and not fiddling. Remember those days past? They will yet come again.

Imagine designing in the browser. You will be doing it before too long.

I predict a wholesale shift to much more advanced CMS and web platforms or systems where code takes a big retreat behind dazzling GUIs like we see in Squarespace 6, and other platforms like Virb, Adobe Muse, etc. Hand-coding will be a niche, enterprise-focused endeavor. The realities of responsive web design necessitate this fact.

There was a time before PageMaker and Quark where people edited PostScript by hand, but those days are a distant memory. Can you even imagine hand-coding a page to simply print something out? Web design is moving in that direction. Listen to these sage words and watch magic happen as the user below changes a complex layout in realtime in Squarespace 6. Wow:

Skip to 6:50 for the relevant snippet and watch for about 30 seconds. Again, wow:

So if your favorite CMS doesn’t yet have rich GUI-based dynamic layout editing as it’s default mode, or have it on it’s roadmap, know one thing: it will.

Real Time Analytics