Hey there!

I’ve been missing-in-action for a few days, adjusting from a cross-country move Brooklyn to San Fran, it’s been an adventure. I’m nearly caught up with email now:) Apologies for falling behind, so many of you have emailed with awesome links and tips on your launches!

It’s Friday! so this roundup is devoted to all things “awesome.” And, today the theme of each link is about building something & getting it *out there.*

Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness” requirement, and regardless we hope you’ll enjoy them. Without further delay:

• FFFFound is a new little app that can help you find inspiration through images
• Shoutworthy is open for everyone! Another fun product by the team that brought Twitter lovers their beloved Shorty Awards
• In a long excerpt from O’Reilly’s recent book “Beautiful Visualization“, KickMap designer Eddie Jabbour talks about his process for redesigning the NYC Subway map (via @kotteke via @thebeard)
• 7 Lessons that app developers/designers can learn from Flipboard
• Keep an eye on OpenIDEO

Wildcard: Ikea Heights

Hey there!

It’s Monday, so this roundup is devoted to all things web design (ux, photo, illustration, art, graphics, CSS, jQuery, tutorials, and more).

Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness” requirement, and regardless we hope you’ll enjoy them. Without further delay:

• Design the Experience (via Drawar)
• jQuery, A Designer’s Perspective (via Script Junkie & @emilylewis)
• Super shareworthy! Design Is History, a teaching tool for young designers, part of Dominic Flask’s graduate thesis “
• “Tweet” by Oyl Miller (via McSweeny’s)
• A Better Way to Ask People to be Creative (via Lifehacker)

Best,

Chrissie (@tenaciouscb)

Hey there!

It’s Friday! so this roundup is devoted to all things “awesome.”

Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness” requirement, and regardless we hope you’ll enjoy them. Without further delay:

• UX lovers meet wireframeshowcase
• The 960 Grid System made easy (via Six Revisions)
• Illustrator Pasquale D’Silva writes about designing the face of Forrst – Yogi Bear was a factor!
• Enormous “thanks” to Rebecca Murphey for publishing (for free to all) jQuery Fundamentals complete with a GitHub repository
• Beginner’s Guide to Design Research (via UX Booth’s Andrew Maier)

Wildcard: An awesome “Tweetment” by designer Trent Walton - sign up for an invite and @yarcom should be able to help you out!

Perhaps one of the biggest holes in WordPress prior to version 3 was the lack of custom menu support. Menus often had to be hand coded into header.php and, whilst they could be ‘smart’, it often let the client needing a PHP savvy developer to make alterations to the setup.

That was then. Now, at (long) last, we are able to give some of this control back to the client. Or, if you’re using WordPress for your own site, you’re able to take control of your menu system with a wonderful new drag-and-drop GUI rather than diving into the code.

New Menu System

The menu system is based on WooNavigation, a custom menu system used by the ubiquitous WooThemes in the latest versions of their custom framework. Although much of the code was rewritten for WordPress 3, the similarities are still clear.

Adii Pienaar from WooThemes recently told me:

“The new menu system that WooThemes contributed is firstly long overdue and is a massive benefit to every single WordPress user. In essence, this is such a basic feature of any CMS, but due to it being a benefit to all WP users, I think this is a significant new addition.”

Chris Coyier from CSS Tricks agrees:

“Personally I think this is a big step forward because, together with Custom Post Types, it is migrating WordPress towards a fully fledged CMS. The more power we can give the end user, the easier it is for developers and designers with an understanding of PHP to use WordPress as a content management solution.”

So, without further ado, let’s take a look at how it all works. Grab yourself a WordPress 3 install with a bunch of pages and a refreshing beverage. It’s thirsty work.

Activating a Custom Menu

If you’re using WordPress 3 with the (brand new) default Theme TwentyTen installed this next bit won’t apply, because it’s already set up to use custom menus, so let’s assume you’re working with an older theme or perhaps even building your own. When you log into WordPress, go to Appearance > Menus.

If your current theme doesn’t support custom menus you’ll see this error message:

This means we need to head over to functions.php and get our hands a little dirty with some code. Open up functions.php and add in the following code:

add_action('init', 'register_custom_menu');
 
function register_custom_menu() {
register_nav_menu('custom_menu', __('Custom Menu'));
}

register_nav_menu has two parameters here, the first is the slug we’ll use in our code and the second is the name our menu will have in the WordPress admin area.

Now before we head back over to the menu screen, let’s stay in the source code and tell WordPress wear to put this menu. The most likely place will be in header.php, but of course there is no reason you can’t put a menu anywhere on your page. To keep things simple for our first menu let’s open header.php and, at whatever point makes sense in your theme, add the following line:

<?php wp_nav_menu(array('menu' => 'custom_menu')); ?>

With just the default ‘About’ page in our theme, if we look at our site we’ll see the following in the source code:

<div>
<ul>
<li><a href="the-link-in-here" title="About">About</a></li>
</ul>
</div>

And that’s all there is to it! Of course, we can add in a bunch of options into that array. You can check out the details over at the WordPress codex and here are a few of the more important ones explained:

• menu – which menu to call. In our example we only have one but you can set up as many menus as you like
• container – what element is wrapped around the menu. The default is a standard <div> but if you’re playing with the new kids over at HTML5 you could always change this to <nav>
• container_class – the css class given to this container, helpful for custom styling
• menu_class – the css class given to the <ul> that is rendered. The default is ‘menu’, and again this is helpful for custom styling.
• depth – How many levels should the menu display. The default is 0′ which means all levels, but you can set this to perhaps 1′ or 2′ to limit how far a drop-down menu will render. Handy stuff!

That’s probably enough for our purposes, but it’s definitely worth checking out the WordPress codex because there are many options you can set, like adding text before and after menu items and links.

Using the GUI

So let’s get cracking with the user interface, where much of the magic happens.

The first thing we need to do is create our first menu (remember, we can have multiple menus) so I’ll imaginatively create one called ‘Our First Menu’. Type that in to the Menu Name field and hit the Create Menu Button.

Did you spot the check-box ‘Automatically add new top-level pages’? Well, do you?

Normally I don’t, because I figure if we’re going to the trouble of making a custom menu we probably don’t want it doing anything automatically. After all, we want complete control over our menu, so I don’t want WordPress dropping in a new page every time we create one. Maybe you do, and that’s okay with me too :)

Excellent! Our first menu is empty but we’re well on our way. Over on the left we’re told that our theme currently only supports one menu so we best make sure we’re using ‘Our First Menu’. Select it in the drop-down, and click Save.

Adding Pages to our Menu

So we’ve created a place in our theme for the menu, and now we’ve created the menu itself. Trouble is, there’s probably nothing in it. WordPress gives us three easy ways to add content to the menu, and the great news is that it doesn’t have to be content that sits in the WordPress site. For example, the first box on the left you’ll see is for Custom Links.

You could perhaps link to your twitter account like I have in the screen-shot above, and just click ‘Add to Menu’. It might be your portfolio, which you’ve hosted elsewhere, or links to live client sites. It might even be links to your favourite news sites. Whatever you choose, it’s great to know your menu can take your visitors anywhere.

The second (and probably most often used) way to add content to the menu is in the Pages’ box, under ‘Custom Links’.

As you can see, I’m working on a fresh install of WordPress 3 which gives me just two pages – Home, and About. Now ‘Home’ strictly speaking isn’t a page in the default configuration (although you can change that). For me, ‘Home’ is whatever resides at and in index.php.

Notice the tabs at the top of the ‘Pages’ box, which allow you to hunt around through content rich sites for exactly the pages you want. If you’re setting up your menu for the first time you might want to look in the ‘View All’ tab, or if you’re just adding in a page you might want to ‘Search’ for it.

I’m going to select both Home and About so I’ve got something to play with. If I hit ‘Add to Menu’ you can see that my menu is really starting to shape up.

Finally we have the ‘Categories’ box, which acts in much the same way as the ‘Tabs’ box. Again, as this is the default install of WordPress I only have one category, the much maligned ‘Uncategorized’.

I’m going to select it (most of my posts often accidentally end up in uncategorized!) and ‘Add to Menu’. This is what we now have:

Now before we move on you need to ‘Save Menu’, so go ahead and click it.

To prove that this has worked we can load up my simple blog (which has the TwentyTen theme installed) and marvel at it’s glory.

Menu Hierarchy

That’s cool but it’s also only the beginning. The next thing to look at is ordering your menu hierarchy. So far the menu items have just appeared in the order we added them, but we probably want to change this. The good news is that this the whole system is drag-and-drop, so go ahead and move things around.

What you’ll also notice is that you can create a hierarchy by dragging items onto other items. I’ve added a few more pages and created something that looks like this:

You can see I’ve created a hierarchy of pages as indicated by their indents, and I’ve also changed the name of ‘uncategorized’ to ‘The Blog’. If we whizz on over to the actual site, we can also see that WordPress has created a funky drop down menu for me.

Now it’s worth noting that TwentyTen is designed to style the menu as a drop-down, and that the actual HTML WordPress generates looks like this:

<div>
<ul id="menu-our-first-menu"><li id="menu-item-5"><a title="The home page" href="http://localhost/">Home</a></li>
<li id="menu-item-6"><a href="http://localhost/?page_id=2">About</a>
<ul>
<li id="menu-item-23"><a href="http://localhost/?page_id=9">Our Company</a>
<ul>
<li id="menu-item-21"><a href="http://localhost/?page_id=13">The Team</a></li>
</ul>
</li>
<li id="menu-item-22"><a href="http://localhost/?page_id=11">Our Products</a></li>
</ul>
</li>
<li id="menu-item-20"><a href="http://localhost/?page_id=15">Get in Touch</a>
<ul>
<li id="menu-item-19"><a href="http://localhost/?page_id=17">Office Locations</a></li>
<li id="menu-item-4"><a href="http://twitter.com/richardshepherd">My Twitter Stream</a></li>
</ul>
</li>
<li id="menu-item-8"><a href="http://localhost/?cat=1">The Blog</a></li>
</ul>
</div>

A Few More Options

You should also be able to see in the Menus admin that each menu has a drop-down arrow. Click on it, and you’ll see there are a few things you can tinker with.

• URL - The url which the menu item links to
• Navigation Label - What it will actually say in the menu
• Title Attribute - Useful for making your menu accessible, and you could also use some jQuery to grab this and create a piece of ‘description’ text
• Remove/Cancel - No prizes here

Menu Widgets

There’s one more thing we’ll look at in this introductory tutorial, and that’s the menu widget. So far all we’ve done is actually create a menu in our header and stick ‘Our First Menu’ into that hook. There is one other thing Custom Menu’s do out-of-the-box. In the WordPress admin head on over to Appearance > Widgets and we can take a look at the Custom Menu Widget.

It should be sitting under Available Widgets, so drag it over to one of your widgetized areas and let’s take a look at the options:

As you can see, there aren’t many! You can give the widget a title (I’ve called mine ‘Our Menu Widget’) and then select which menu you have created to use. Now we only created one menu in this tutorial, but you could of course create a second and drop it in here. Click ‘Save’, head on over to your site and you should see something like this:

And that’s it! Great for a sitemap-like feature, just remember that if your menu doesn’t automatically update when you add new pages neither will this widget.

Just the Beginning

As you can probably tell, there’s a lot going on with the Custom Menu feature. I’ve tried to stick to the basics here and focus on the GUI, but there is a lot more going on under the hood that is also worth looking into. If you feel confident with PHP then start playing – there’s so much more you can do.

If all you are looking for is a simple way to create and manage menus for you and your clients, we hope this overview gets you started. As always, we welcome your comments and look forward to seeing Custom Menus on your WordPress sites!

Hey there!

It’s Wednesday, so this mid-week roundup is devoted to all things business and development.

Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness” requirement, and regardless we hope you’ll enjoy them. Without further delay:

• Simple Geo talks “culture is critical” and details 9 principals (via @joestump)
• Happy Cog posts on their work with the Zappos redesign (more than a refresh)
• How GitHub deploys new features (a GREAT read!)
• Introduction to MongoDB (two really great screencasts)
• Why Entrepreneurs Should Write (via @spencerfry)

Wildcard: @yarcom launches Tweetment, a terrific Twitter tool (personalized backgrounds for individual tweets, e.g. the day you launch a new company or confess your love for a person or an iPhone!), here’s a great one from Kyle Steed

Today’s free helping from the Think Vitamin Membership video library looks at what to do and what not to do when designing HTML email.

In part 1 of this series, you’ll learn techniques for dealing with e-mail clients that disable images by default.

Hey there!

I’m back from vacation and visiting San Francisco to celebrate @ciberch and @n2frizbee wedding and marriage! Thank you for sending me so many great projects to link to, expect a surge in the coming days!

It’s Monday, so this roundup is devoted to all things web design (ux, photo, illustration, art, graphics, CSS, jQuery, tutorials, and more).

Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness” requirement, and regardless we hope you’ll enjoy them. Without further delay:

• A great infographic about the bumpy starts of startups (via FastCompany )
• Swoon-worthy typography. Elliot Jay Stocks’s magazine project, 8 Faces, debuts.
• For designers who code, great ways to learn jQuery (via Learning jQuery)
• The Humble Pied archive, a useful project full of bite-sized brilliance (via Mig Reyes designer @ Threadless)
• The Distance between Maker & User (via @bokardo)

Best,

Chrissie (@tenaciouscb)

If you are involved in any way with the words that appear on your web site or app then have a listen to Relly’s session from this years @media conference in London.

It’s around the 55 minute mark but packed full of great ideas for helping you write better “microcopy”. You can read the outline below and find out more about the session on the @webdirections web site

Session Description

Microcopy is the ninja of online con­tent. Fast, furi­ous and deadly, it has the power to make or break your online busi­ness, to kill or stay your foes. It’s a sen­tence, a con­fir­ma­tion, a few words. One word, even. It isn’t big or flashy. It doesn’t leave a call­ing card. If it does its job your cus­tomer may never notice it was there.

FYI: We have started “Huffduffing” so expect more found sounds in the future.

Jon Hicks has released “The Icon Reference Chart”, a one page guide to all the info you’ll need when designing icons.

Visit the site: http://www.hicksdesign.co.uk/iconreference/

Editors Note: Fed up of pulling your hair out with clients constant changes and demands then read on. Rob Mills, a web project manager and author, outlines some key strategies for helping you manage tricky clients.

The client isn’t always right. There, I said it. I know this to be true because I have worked with clients who have been wrong, this is OK though, in fact it is inevitable, but of course there are many times when the client is right and does know best but this article isn’t concerned with those instances.

The Two Cases

1. The clients ideas aren’t appropriate for the project
2. The client is making demands beyond scope/budget

Both cases bring with them different challenges and problems but the solution for both is simply managing client expectations.

The first thing I think project managers, design teams and anyone dealing with clients needs to accept is that it is OK for clients to be wrong and it is OK to admit that. By failing to acknowledge that we simply become yes people, nodding dogs agreeing to things that will ultimately be detrimental to the project.

After all, we have been hired for a reason, our knowledge, experience and expertise. If there is a reason why the main colour of the website shouldn’t be green, then say so. If the client insists that no audience research is needed as they did some in 1993, then insist that they should reacquaint themselves with their audience as times have changed and therefore it is likely their audience have.

Saying no is scary as you don’t want the client to pull the plug on the project and vow never to work with you again. But what happens if you keep saying yes and end up with a website that doesn’t look too great, is difficult to use and targeted at completely the wrong audience?

I’m sure the client would prefer you to say no earlier in the project than read some of the feedback they are likely to get on their website if you action all their requests or allow for new requests meaning the site will never be launched anyway!

Back to the two cases mentioned above.

The Client Idea is Bad Idea

The saying goes that there is no such thing as a bad idea. I think we can all think of an example to disprove that theory.

Let’s not forget that clients offering ideas are enthusiastic about the project so all ideas should be listened to. They may not always be what is best for the project though so how we communicate that without being kicked off the project is the challenge.

Don’t just say, we know best so we’ll do as we please. It is their site and they are paying you. Instead, explain your opposing view but crucially, have rationale to support this, case studies, testimonials, examples of other sites, whatever supports your point. Sometimes clients respond better to visual evidence.

Similarly, don’t be pushed into something you feel strongly against. You are the experts, it is why you have been hired in the first place. If a client persists, try to come to a compromise. It depends what the idea is. If it is more concerned with design then chances are, your instinct is right so follow that.

If you do opt not to incorporate their ideas in the final design, my experience tells me that they will thank you for it once the project is finished.

Their Request is Unreasonable

We’ve all been guilty of it I’m sure, yes we can add in a whole new section even though the site map has been signed off.

That is the second case, clients requests that go beyond the agreed project scope. As a Project Manager, scope creep is one of the biggest and most common issues I am faced with. Part of the solution is to be so transparent from the beginning that such requests won’t even be made, but that’s often an ideal expectation.

Explain your process in the request for proposal or functional specification documents, reiterate it again at the kick off and provide a written copy of timescales and deliverables, both for you and for the client. Also make it clear what has been agreed with sitemaps and sign off documents, as part of this, have it in writing that anything completed beyond what is stated in the document will have implications for both the timescales and budget.

Here’s a line of text I often use in proposals, feel free to adapt it to your own needs:

Any additional work that is both requested after signing this agreement and deemed beyond scope, will impact on costs and deadlines. All additional work will be costed and only completed upon signing of a revised project document.

Refer to this document throughout the project so they can easily see where you are in the process, what has been achieved and what is coming next.

When a Request is Made

Before you start moaning about unreasonable clients I think it is always fair to consider the request. Then moan. No, consider it and make an honest decision. If it is something that can be implemented quickly and without much resource it might be easier to action the request than go through the process of explaining why you won’t. This approach does open you up to the client expecting you to say yes again though.

If you do say no, explain that it is beyond the agreed scope, and use previous project documents as evidence if needed. Try to turn a negative into a positive. Inform the client that their idea is great but as you have already signed off the sitemap, perhaps you can note their suggestion for a phase 2 or retainer.

The important thing is to be realistic as to what can be achieved with the launch date in mind. If there are many requests maybe you could compromise and implement the 3 or 4 most essential.

Managing this process is also made easier if there is one main contact from the client’s end. Receiving feedback and requests from a whole team at different times will only delay the project. Clear and open lines of communication between the project lead/manager and delegated client contact will ease the process. Ultimately be clear as to what you are delivering and when and what you need from the client in order to hit these deadlines.

Collaboration

Any project is a collaboration so all involved need to play to their strengths. Clients know more about their business than project teams ever could. They should also know more about their audience. Design teams on the other hand will be strongest to make decisions about visuals, usability, content and the like.

Don’t forget, it is OK to say no. In my experience, clients will be grateful and respect you more for it anyway.