There’s no use denying it: ExpressionEngine’s control panel, or CP, can be a little daunting, even if you’ve been using EE for years. Which is why I like Jesse Bennett-Chamberlain’s simplified CP theme so much. While it doesn’t do much, if anything, to address the CP’s underlying architecture, it does clean things up and reduce some of the CP’s visual clutter—which is not nothing. I recently installed it on Opus, and like it so much that I’ll probably be using it for client sites that aren’t running EE 2.x (the theme only works with EE 1.6.x).

In all of the hullabaloo surrounding Apple’s announcement of the iPhone 4, it was easy to miss the announcement of Safari 5, the latest version of Apple’s web browser. And it was even easier to overlook the announcement of one of Safari 5’s features. But now that Safari 5 has been in the wild for a bit, this particular feature has been getting more and more attention, and I think there’s more to come as people work through its potential ramifications.

The feature in question is “Safari Reader”, which allows you to view a streamlined version of a website’s news articles and blog entries. Or, as Apple puts it:

Safari Reader removes annoying ads and other visual distractions from online articles. So you get the whole story and nothing but the story. It works like this: As you browse the web, Safari detects if you’re on a web page with an article. Click the Reader icon in the Smart Address Field, and the article appears instantly in one continuous, clutter-free view. You see every page of the article—whether two or twenty. Onscreen controls let you email, print, and zoom. Change the size of the text, and Safari remembers it the next time you view an article in Safari Reader.

Most users will probably consider this a very welcome feature, especially in light of the fact that web advertising has consistently grown more obnoxious over time, thanks to obtrusive techniques and gimmicks such as fly-out ads (which lurk in a webpage’s corner and “fly out” when you mouse over them), “in-text” advertising (which highlights certain words on a webpage and displays a popup with ads when you mouse over those words), and splitting articles across multiple pages (which increases the number of ad impressions for the entire article). Safari Reader provides a nice escape from these things and gives you quick and easy access to nothing but the content that you came to the website for in the first place.

(Admittedly, this isn’t anything new. Readability is an add-on for Firefox, Chrome, and Safari that does much the same thing. Ad blocking software has been around for a long time. And many sites offer their content ad-free, or relatively ad-free, in their RSS feeds. But as far as I know, this is the first time it’s been a browser-level feature.)

Continue reading…

Apple has launched a nice little gallery that showcases some of the cool things that can be done with HTML5, CSS3, and JavaScript. No Flash required, though you do need to be using a modern browser (e.g., the latest version of Safari). The demos are pretty cool—I’m especially fond of the “Transitions” gallery—and it just proves that Flash is becoming increasingly unnecessary to create rich, interactive web experiences.

If you’ve done any significant ExpressionEngine development in the last year or so, then you’re probably familiar with Brandon Kelly. With add-ons like Wygwam and FieldFrame, Kelly has quickly joined the upper ranks of “rock star” EE developers, alongside such developers as Solspace and Leevi Graham.

In October of 2009, Kelly announced that he would be leaving his job and forming his own company, Pixel & Tonic, to focus on full-time EE add-on development. And on February 23, 2010, Kelly unveiled the new Pixel & Tonic website.

Use any of Kelly’s add-ons, and you quickly realize that he sweats the small things—his add-ons are elegantly designed down to the littlest detail—and it’s no different with his website. It may not be the flashiest developer website, but it’s a solid, good-looking one that is packed with useful information (including thorough documentation for all of his apps). But the real magic happens if you’re using a “cutting edge” browser, such as Safari 4.

Kelly has used CSS3 to develop the website, which means that users with newer browsers will see a lot of subtle visual flourishes that give the site an extra level of polish. For example, the form fields are just lovely thanks to a nice use of gradients and rounded corners. Also, he’s using HTML5 to mark up the website, which means that the website’s code is more sensible, semantically correct, and easier to maintain.

Of course, this means that IE users are left behind. Visually speaking, the Pixel & Tonic website is an absolute mess in IE6, and only slightly better in IE7. But, as Kelly points out, that’s not really big deal for him:

So what about IE? Well, thanks to the fact that I’m targeting other web developers, I can say with 97.3% certainty that you’re not using it. Which is awesome, because that gave me a practical reason not to worry about it (besides just not caring). I did scope out the damages a couple days before launching, and it wasn’t pretty. Not even remotely usable. I’ll probably deal with that in some form eventually, but it’s most certainly not going to be full support.

Kelly has been blogging about the processes behind the website, which is a nice way to get in the head of one of ExpressionEngine’s premier developers.

All in all, a very nice website and a nice sign of things to come. It’s certainly a website that I plan to return to a lot in the future, if only to keep abreast of the coolness that Brandon Kelly unleashes upon the EE community.

Regardless of whether you agree with him politically or not, of whether you voted for him or not, I think we can all agree that Barack Obama’s campaign websites—that his overall web presence—was quite remarkable, and displayed a use and understanding of the web that no other political candidate had displayed to date. One needed only to compare the look of his website to that of his opponents. Obama’s website was beautifully designed and laid out. Its smooth, elegant look was upbeat, warm, and inviting, and made other candidate websites seem crude, kludgy, and ancient by comparison.

Since then, it’s been interesting to see the impact that the Obama campaign has had on what other political candidates have begun doing with their websites. Unfortunately, I’ve seen some websites where it looks like the candidates in question haven’t really learned anything. Rather, they simply co-opted Obama’s visual style, which just means they end up looking derivative (as if they’d applied some sort of “Obama-izer” effect to their design in Photoshop).

All of which is to say, I’m very pleasantly surprised by the website for John McCain’s senate campaign. The design is clean and thoroughly modern, but doesn’t at all look like an Obama rip-off job. There are all manner of intriguing little details (like the different states of the little buttons that populate the site), the content is laid out nicely, and there’s a nice use of Cufón to introduce some additional typography to the site. And I must say, I love the logo design. Like the design, it’s clean and modern, and its simple, graceful design lends itself well to being iconic.

And I would be remiss if I didn’t point out that the site runs on ExpressionEngine and was built with HTML 5.

I do have a few minor quibbles, though. Some of the colors seem a little heavy-handed to me, but then, I’m personally not a big fan of red and orange together. And the header—which I assume to be a shot of the Arizona landscape—is a nice idea, but the actual execution, with its deep blues, feels ominous and gloomy. Which isn’t exactly the tone you want for a political candidate’s website.

The website was designed by Forty, and they have a nice write-up of the process behind the website on their blog.

A Whole New Wooooorld: Structure + ExpressionEngine:

Even with the EE 2.0 release in December, I think the best ExpressionEngine event in 2009 was the rise of Travis Schmeisser’s Structure. While 2.0 lays the groundwork for a bright future, in the short run it’s more of a step backwards because so few of EE’s amazing community-built addons have been ported so far - even with new functionality, a 2.0 upgrade takes away far more than it gives at the moment.

In contrast, the Structure module immediately makes major improvements to your site’s UI, construction, and template codebase, and it also plays nice with other addons, creating a faster, smarter EE experience. No software I installed last year saved me as much time and effort as Structure did, and Travis deserves all the credit for that (and he got quite a bit, including Devot:ee’s Module Of The Year award).

I couldn’t agree more with that last sentence: Structure has quickly become an indispensable EE add-on, one that I use on almost every one of my EE sites.

If there’s one design-related skill that I wish I was much more proficient in, it would have to be illustration. Oh sure, I can fire up Illustrator or Freehand and put together a couple of vectors, and I’ve done fair share of sketching in notebooks, but there’s a knack there that I just don’t have. As such, I’m both incredibly jealous and incredibly in awe of someone who really and truly knows their stuff. Which brings me to Nick La and his recent redesign of N.Design Studio, which serves as his blog and design portfolio.

When done right, illustrations can add a nice organic touch to a website design/layout, and that is precisely the case with La’s site. As you travel through the site, you’ll see bright, richly detailed illustrations with a decided Asian bent to them, lending the site both an organic and an exotic look and feel.

But the attention to detail doesn’t end with the illustrations. It continues on through the playful typography in the headers, the tiny icons used for rollover effects in the main menu, and the navigational flourishes. However, there are times when there’s so much detail that the design becomes a little overwhelming and cluttered (e.g., the layout of the blog entry comments).

But overall, a very lush and gorgeous design that, as I mentioned before, leaves me both insanely jealous and very much in awe.

Related: Process of Redesigning N.Design

You might primarily know Panic as the maker of such fine Mac software as Coda and Transmit. However, they’re also the proprietors of a very fine corporate blog. Now, honestly, I tend to skip most software developers’ blogs. But Panic’s is quite different.

For one thing, the design is one of the more clever and enjoyable ones I’ve seen in awhile. At first glance, it doesn’t appear to be that special, but look a little closer, and you’ll see that it’s chock full of little design details that prove to be rather delightful. Utilizing the latest in CSS3, such as CSS-based rotation, Panic gives their blog a look that is delightfully—and literally—off-kilter, adding to the overall feel of a company bulletin board. (You must be using the latest version of Safari, Firefox, or Chrome to see the effect.)

And there are other little details as well, such as the 3D effects applied to the blog header and “older/newer” navigation at the bottom of the page, or the design of the different types of posts (e.g., company announcement, technical/engineering, list of quick links). Again, it all just adds to a casual, fun, and informative feel.

Which, by the way, ties in with and enhances the overall vibe that I’ve always had concerning Panic: namely, that they’re a company that loves what they do—making “Shockingly Good Mac Software”—and they have a great sense of humor. How else do you explain something like their “lost” retro artwork from 1982, this page chronicling all of the rip-offs of their icons and artwork, or their comparison of Japanese and American snacks?