Distraction-Free Writing and WordPress 3.2

There is a lot of software that lets you write “distraction-free” at the moment. It’s a hot category. A quick look through the Mac App Store reveals a half dozen of those apps, at least. There are one or two that I like, and in general, I think Mac apps are headed in that direction anyway. The forthcoming Mac OS X Lion will offer a full-screen mode for many apps, which means that even a standard text editor could become “distraction-free” with a click of a mous

This type of interface is also coming to WordPress next month. You will be able to click a button in your editor – when editing any text on your site – and be able to see your text without any interface at all. This is exciting news for us, because the WordPress admin interface can feel rather cluttered. When you have a lot of writing to do, you don’t want to be looking at menus, categories, tags, SEO options, and more. You will need that interface when you’re ready to publish, sure, but you don’t want to see it when you’re trying to concentrate. All you’ll be looking at is the post title and body text, in a column that’s not too wide to work in. As it should be.

It’s fitting that this appears around the same time as Lion. It means that you can take Safari (or Chrome) full screen, and you have the same functionality as an app you would pay for. Better yet, WordPress still saves your work-in-progress while you’re writing. If something bad happens, you can come back to WordPress and your text will still be there, in draft form. You can finish it up and publish.

We think this improvement – along with a number of others – will make next month’s WordPress 3.2 a very exciting release for WordPress users, which includes many of Needmore’s clients. We’ll be sure to post some tips and tutorials when it comes out, but you can always get in touch if you’d like to sit down with us in person and chat.

EDRIS Salon’s New ‘Do

A before and after view of our redesign for EDRIS Salon, taking them from Flash to a one-page social-media integrated HTML website.

EDIRS Salon, based in New York’s meatpacking district, is known for their uptown/downtown aesthetic and a multicultural approach to hair styling. (And, when we say known, we mean it; they were just named one of Elle Magazine’s top 100 hair salons.) When we initially started working with EDRS, we immediately got a sense that, while their Flash website was bold and striking, it was a bit stale in comparison to the sophisticated vibrance radiating from everyone talked to at the salon (see the before image below). Plus, their Facebook and Twitter presence, where much of their ass kicking personality is evident, was non-existent.

We were interested in thinking outside the box a bit with this project. We’ve been quite inspired by one-page websites lately and wanted to push ourselves to telling the whole story right up front. (It only seemed right for such a bold, distinguished group of hair artists.) And so, we gathered together a pile of great photography from the salon, had a nice long chat, and set to work creating the tallest graphic we’ve ever made in Adobe Illustrator. Not to change absolutely everything at once, we were careful to brought in the emblematic EDRIS colors together with a twist; as you dive deeper into the page, the mood gradually changes. We also matched their identity with a custom web font.

As you can see, the site focuses on social media as a first priority, making every visit fresh. There also are a number of unexpected details—full image press pieces and an integrated blog—that burst forth from the one-page rule. (Hey, rules are made to be broken.)

Overall, we are thrilled to have had the opportunity to translate EDRIS’S signature style into a forward-thinking website that takes social media integration seriously. We do hope you will enjoy.

One to Watch

A modern, timeless website design for luxury interior design firm Jessica Jubelirer Design.

Today we’re pleased as can be to announce our latest design, an all-new website for Jessica Jubelirer Design. Jessica Jubelirer Design is a luxury interior design firm with an classic elegant, and timeless aesthetic. They’re masters of their craft, and we want visitors to know that immediately.

When we started work on this project, we tinkered with how to capture just the right aesthetic. (Our client emphasized their desire for a site that was “clean, modern, stylistic.”)  One piece we strove to nail was the portfolio. Our client had a look in mind (thumbnails on the right, a larger image to the left), but we wanted to push the images a bit further (and larger). For one thing, we wanted them to be able to add a ton of pictures, but make it easy to navigate them. There are numbers below that set of thumbnails, automatically sliding from set to set. And because we felt that the larger image wasn’t enough, we’ve made it so that curious visitors can click to see a larger version. Once zoomed in, you can navigate the images from right there, too.

Speaking of search engines, our client wanted the typography to reflect their identity, so we tracked down an elegant font that could be used on their website. Search engines can index their site without a problem, but the final product looks just as classy as our mockups.

Spend a little time exploring the site. We think you’ll enjoy Jessica’s designs just as much as we do.

 

Adding The Facebook Like Button

One of the new features on the new Needmore website are the Twitter Sharing and Facebook Like button at the bottom of every work item and blog post.

Given how popular these tools are they are remarkably difficult to implement. Most blogs use either the AddThis or ShareThis plugins to use these tools. However setting up and using these tools adds a layer of complexity as well as another account you have to manage, as well as a layer of complexity for visitors who suddenly can share your post via dozens of different services (most of which they have never heard of). Just having the simple Facebook and Twitter buttons without involving a third party plugin seemed like the cleanest and most minimal solution.

I ended up developing a small WordPress plugin to place the properly formated OpenGraph tags and required JavaScript and sharing buttons.

When you share with Facebook, it is best to include Facebook’s OpenGraph tags in your . They look like this.







These tags tell Facebook how you want your page to appear when someone hits the Like button. Things like titles, links and images. However, I’ve already made a mistake. Notice that I set the type to “blog” thinking this was the logical choice. Well, buried in the OpenGraph documentation is this obscure but important detail.

Note that the Open Graph protocol is currently designed to support real-life objects. If your URL is a piece of content — such as a news article, photo, video, or similar — you should set og:type to article (see below). Pages of type article do not have publishing rights, and will not show up on user’s profiles because they are not real world objects.

If you fail to set your og:type to article Facebook will assume that your single blog post is a unique real world item and create a new Facebook page when someone “Likes” it. These are fully functional Facebook pages that people can “like” and comment on. Fortunately, these new pages are put under the control of your fb:admins, so you can delete them. The results of my remarkably simple plugin make shared posts look this when they are “Liked”. Notice is has an image, title, link to the article and a small excerpt from the article and properly credits it to our website.

Integrating with Facebook can be tricky. I recommend reading up on it as much as possible before working with it. The result is that items shared on Facebook show up more like this and have greater prominence on people’s walls.

Fresh Masu

We’ve just released our second iteration of the Masu Sushi website. Our original design came out in full Flash, before the word mobile carried much weight. Here is shot of the original Flash website.

We redesigned Masu’s website with a firm eye not only on desktop design, but also on the mobile web. For the desktop, the new Masu Sushi website is spacious and clean. Yet, we’ve also added quite a bit – quick notes, the latest Twitter feed (which is updated daily with specials), and the ability to make reservations online. Once you delve deeper into the website, you’ll see up-to-date menus.

We also created a mobile version of the website. The mobile site retains much of the feel of the desktop version, but has been simplified to allow a visitor to quickly place a call to Masu or click on a map for directions. You know, the kinds of things you would want to do when driving around looking for a restaurant!

And, all the menus are up. Easy to read (no PDF’s here, friends).

Space (Re)Designed

We’ve just launched a redesign for Martie Kilmer at Space Design. Martie is an über talented floral artist—her intriguing arrangements and terrariums can be found at hip Portland haunts such Stumptown Coffee Roasters, Laurelhurst Market, and the Ace Hotel (to name but a few).

Martie is all about floral art. And folks near and far are taking notice; eat.shop portland suggests that “…martie is the orchid whisperer … you get the feeling that anything she touches blooms…”. Similarly, Oregon Bride recently noted that her “exotic display of bear grass, succulent rosettes, monstera and flax leaves, tillandsia and manzanita branches draws on the Northwest’s lush rainforest climate and makes a strikingly architectural statement.”

This is Martie’s website before. Not only did it not have Martie’s fun new identity, but it was also in Flash (making it not viewable on many modern devices). Martie was looking for a classic, non-fussy website that would show off her aesthetic and her work.

For her new home page, we strove for ethereal movement, uncluttered space, and textures – all aspects of Martie’s own designs.

As with all of our efforts, we paid close attention to more than just the design that greets the eye; this website uses the latest HTML5 techniques, works well across a broad spectrum of devices, is optimized to be search engine friendly, and is easy-to-update.

Within her portfolios, we wanted the work to speak for itself. Therefore, we have large images, cropped closely, mixed with wider images that reveal an impressive number of recognizable Portland clients. The slide show is easy to update, and is presented with beautiful transitions that draw from the larger design.

We’re very proud to have worked with Martie (who is a fabulously nice person as well as an extremely talented individual), and to have brought this design to life. We do hope you’ll stop in and smell the, er, succulents.

 

Daley’s Dog Years

We recently adopted a puppy from the Oregon Humane Society. While there, we met volunteer Chandra who has a passion for allowing senior dogs to live full lives. Her dedication and passion is instantly apparent. We worked with Chandra to create a simple micro-website that uses the latest semantic HTML features of WordPress 3.0 and is based on the brand new Twenty Ten theme. And, of course, includes plenty of snapshots of the tremendously photographical Daley.

 

Of WordPress, Themes, and Licensing

If you haven’t heard by now, there is a great big controversy between the creator of WordPress and the creator of Thesis, a popular paid theme that runs on WordPress. The issue is simply that WordPress uses a license called “GPL” which means that, among other things, you have to share the software and anything built upon it. The creator of Thesis doesn’t believe that license actually applies to him, and claims that Thesis uses a much more strict licensing.

I’m not going to jump into this debate, but if I were, I would probably take the side of WordPress. However, the whole thing reminds me of a debate on many a geek mind in the Nineties, namely, should you or should you not use Windows?

To use an example from my life personally, let’s say that I buy a computer (in this case, a PC) and I want to use Photoshop. Hackers had developed a replacement for Windows called Linux, but at least at the time, it wasn’t good enough to run Photoshop, and thus wasn’t good enough to do web design. You needed to run Windows.

Now, I was a poor boy at the time, and because of that and also on principle, I didn’t want to give money to Microsoft for every computer I wanted to run Windows on. Linux used the GPL license, which among other things meant that I could just sit down and use it, without paying a dime. Now, I could get a free copy of Windows, sure, but what does that say?

While I’m a geek who maybe could get that copy for free, I’m thus supporting the whole ecosystem of Windows-based software. When I buy my Photoshop license, I’m effectively supporting Windows. When my friends see my computer, they may be influenced to go out and buy a Windows license for theirs. After all, I’m a geek, I probably know what’s best on a computer. In fact, many of the things I do with my computer would be contributing in one way or another to the Windows ecosystem, and thus to sales of more license of Windows, regardless of whether I’d paid for mine or not.

This isn’t a debate that was ever necessarily resolved. I actually just ended up switching to a Mac, so that point was sort of irrelevant to me. And sure, I still hate Windows, just for different reasons. But the WordPress debate is an interesting twist. I wouldn’t support Thesis – I wouldn’t even use a free copy – but I have paid for many WordPress themes that did support the GPL license and will continue to do so.

 

Get Your Daily Dose of Presents of Mind

image

We’ve just launched a new blog for longtime Needmore client Presents of Mind.  The folks at Presents of Mind have a strong online presence already (with active Twitter and Facebook pages). Their new blog integrates seamlessly with each of these and takes it a bit further with slideshows of their products.

And, if you have any last minute shopping needs, we have it on good authority that Presents of Mind is open today and tomorrow…