Snapping to Pixels

While anti-aliasing is wonderful and can help make things pretty, it can also have an adverse effect. There is a right and a wrong way to deal with it:

Photoshop offers a feature that can help you circumvent this problem – snap to pixels. When creating a new shape layer, Photoshop will automatically start you off on a whole pixel, allowing you to create perfect lines. To turn this on:

Although snapping to pixels won’t solve every anti-aliasing problem you run into, it will at least give you a strong starting point when designing with shape layers. If you continue to run into this problem, pick your Direct Selection Tool (A), grab the shape layers points and manually drag them into place. Being mindful of this will help you become more observant as a designer.

This post was more or less a reverberation of one of my previous articles, Web Design Subtleties, where the attention to detail is major play in making a design really sing.

If you like to learn more about anti-aliasing, click here.

When branding a Twitter account, designers are very much at the mercy of different browser window sizes. Often, designers will focus on branding the left gutter of a Twitter page since that has the highest chance of visibility across different browser sizes, while ignoring the right to avoid losing branding on variable monitor sizes.

My Wish

This thought process has lead me to an interesting thought: What if your Twitter page remained in place? Say, for example, set to the left of the browser? If it remained fixed, designers would know exactly how much room to work with and they would be less concerned with the content stream partially covering their design. I think this would allow for more interesting designs like these:

@felixxxthedj

@gaksdesign

@adamplitt

These are all wonderful examples of engaging Twitter backgrounds, however as the browser window is made larger, much of their impact gets lost. Hypothetically, if the Twitter feed remained in place, designers would be less limited and could really go wild.

Your Thoughts

Categories (Color-Coded)

All of us here come from different backgrounds, armed with different skills and experiences. And so do our readers! That’s why we’ve attached highly-visible color-coded category tags to each our blog posts. This should help users skim through content and find interesting topics faster. If you don’t feel like browsing, we’ve also included a search bar!

Bigger Photos and Text

We’ve also included bigger photos for faster skimming and quicker topic recognition. Keeping with that theme, we’ve also increased the font-size and line-height within each article to help reduce eye fatigue on those longer reads.

Beefed-up Sidebar & Comments Section

We’ve ditched our static sidebar for one that displays useful and relevant content for our users. For example, we’ve capitalized on some of WordPress’s built-in plug-ins by including a “Related Posts” and “Most Commented On” section. Additionally, we’ve rebuilt our comments section using Disqus, giving users the ability to “Like” comments, among other features.

Authors

There will also be an ‘About the Author’ section in the sidebar and at the end of each post. By doing this, we hope to bring as much transparency and accountability to each of our contributors. It could also help put a name to a face when we meet each other!

In Conclusion

We’d love to hear your feedback on the changes! Is there anything you think we’ve missed or you’d like to see? Expect to see these changes to go live very soon! Drop a comment below.

As you may have heard by now, Facebook announced in October that they will be making major changes to all existing fan pages by “late ’09, early ’10.” Much to the excitement of online marketers everywhere, Facebook is rolling out with a new e-mail API that will allow organizations and business to directly collect user e-mail addresses. Facebook will also be getting rid of the boxes feature, as well as cutting the maximum width of their custom Facebook tabs from 760px to 520px, essentially forcing developers and designers who work on Facebook (like me) to retroactively re-do all of our previous, wider-than-520px, work on Facebook. Not fun.

So how do us designers and developers prepare for this unmistakably annoying task? Well, over the past few weeks, the crew here at VaynerMedia have bit the bullet, and converted nearly all of our clients’ Facebook pages to the appropriate size, free of cost. The following are some insights into our process of converting existing tabs to fit the new format, and how we’ve prepared for the upcoming storm.

What a Disaster!

Upon first hearing the news – our design/development team thought the process would be an absolute mess… and rightfully so! Our meticulously planned layouts and images were suddenly going to be snuffed out by some arbitrary decision and inexplicitly vague deadline. Plus, we were going to have to go back and redesign all of our previous work. We didn’t have much time, either, as we still had a full slate of current client projects that needed to be taken care of in the upcoming weeks.

However, as we began the process of redesigning, we noticed the workspace reduction wasn’t as severe as originally thought. In fact, with a workspace reduction of ~30%, we were actually able to tighten up our interfaces in some areas, while still allowing enough pixels to allow our designs to breathe and maintain their clarity (with a little adjustment of course.)

Rollover to see the size change with Gary’s Facebook Tab. The pink color indicates the 520px mark. (This is not to size – find the link below for a .PSD of the custom tab)

Here are a few things we’ve learned through the process:

Compromise (the right way)

As your content is getting squeezed, it will tend to get pushed down and your custom tab will become elongated. If you had plans on getting a lot of content above the fold, you’ll have to come to terms with that not happening. However you may treat this as a positive, as this may serve as an opportunity to consolidate and boil down your content.

For example, with our client, Sunshine Suites (P.S. If you’re looking for affordable NYC office space, these guys are Crushing It), you’ll notice we had to remove the navigation of the original Facebook page and focused, instead, on a single introduction video with a clear call-to-action inviting the user to Sign Up Now for more information. This ultimately provides a more enjoyable and easily digestible user-experience. By being forced to work in a smaller layout, we were able to consolidate and boil down what was most important, rather than what would otherwise be considered a compromise.

Rollover to see the how the the new size looks above the fold. The old size is the tab zoomed out.

Putting the Time In – Do You Expense the Client?

There’s no way getting around it – you’ll have to put the time in to accommodate these changes. If you’re working for a digital shop that includes some sort of maintenance retainer in the contract, your costs will be covered for the most part.

However, what about freelance designers and developers, do they revisit the work they’ve already completed, possibly months ago, to restructure their work for free as an added value proposition? Or do they charge per project? How will clients react to this change? An interesting metaphor comes to mind: If a customer buys an SUV, and gas prices go up, would the customer be justified in going to the dealership to demand they install a more fuel-efficient part (restructured Facebook tab) in your car for free? Probably not. I believe that the ball is in our court (as well as other digital agencies) at the moment.

How to Prepare for Next Time

In the event Facebook decides to reduce their custom tabs again in the future, it helps to be a little more prepared. One thing that helped ease the process along was keeping Photoshop layers organized (I know, how many times have you heard that before?). In doing so, we were able to target and resize big chunks of information quickly and efficiently.

Also, from a client-relationship standpoint, accounting for the uncertainty of Facebook and all other social media platforms should be made in future contracts. In writing, it should be made clear that in the event something like this happens again, certain actions should be taken. Perhaps, a redesign/implementation should be offered at a discounted rate? Or perhaps those costs are covered within a monthly retainer?

In Conclusion

Most of what I’ve discussed is still up in the air, as we don’t actually know what exactly will happen to existing custom Facebook pages. Will custom content be distorted or completely cut off? Perhaps Facebook will provide vertical and horizontal scroll bars to allow you to see content not yet converted to the 520px model?

Either way – it never hurts to be prepared. The best way to get through this is to give yourself enough time to implement and learn from this challenge. Adaptation and problem solving is what us designers and developers do best.

What design hurdles have you had to overcome with Facebook’s pixel downsizing?

For your convenience, I’ve included a simple 520px width Facebook template for download to make your transition process just a little easier. If you have any questions, concerns, or just want to bitch about Facebook, shoot me an e-mail or drop a comment below!

Below are some examples of websites that effectively use textures that you may not have noticed.

Snook.ca

Can you see the subtle noise in the tan background? This effect brings additional depth and life into his design.

Thisisgrow.com

You have to look closely, but do you notice the hatch pattern separating the main content from the secondary content? This subtlety divides content and creates a platform to display content.

VersionApp

You have to scroll down a bit on this one. Check out the texture on the gray surface – notice how nicely it compliments the large graphic? The texture helps keep a correlation between the hyper-real forefront graphic and the rest of the content.

Culinary Culture

This subtle background texture correlates nicely with it’s dining-theme.

Ate Bits

This one is a bit more obvious. It helps make the website look more “real” – creating the illusion of being able to reach out and touch it.

Now these examples are not to say that adding a textured background is the answer to every great website’s design (see: Vimeo), but maybe the next time you visit a well-designed site, you’ll notice some of the subtleties of its design and even see elements you hadn’t before.

Do you know of any other sites that quietly use textures to enhance their design?

Love to hear you thoughts below!

Correct Page Titles

When the user clicks through to a page, it should be abundantly clear what page they are viewing.  Best way to do this?  Give your page a title!  Place it on the top left corner of the page; make it the first thing people see.  Try to avoid ambiguous titles, because they’ll just confuse the user.  If you have an ‘About Me’ page, just title it ‘About Me.’  No need to go crazy.

If you’re using WordPress to run your site, this tip should be especially easy to implement.  Just go to your Dashboard, click through to Pages and edit the name of the page you wish to change.

Simple Slugs

From WordPress: “Slugs are usually a URL friendly version of the post title…. Slugs are meant to be used with permalinks as they help describe what the content at the URL is.”

Slugs allow the user to preview links before they click it.  If I share this link with you: 45royale.com/blog/ you’ll probably be able to guess that it’s a blog.  A simple slug takes the guesswork out of navigating links and makes your URL easier to share.  Remember, usability is all about driving user actions.

Go into your WordPress Dashboard and click Edit Page.  Below the page title you’ll find the page URL.  By default, they should both have the same name.  Leave them that way.  Hopefully, the title of your page clearly describes its contents, but if not, that’s okay – you can always change it.

Optimize Clickable Content

If something can be “clicked”, it should be made obvious to the user.  This process can be surprisingly difficult to refine, but there is one quick step you can take to help optimize your clickable content: Make your links look consistent!

This means they should all look and act the same, especially in their “hovering” and “clicking” states.  They should also be starkly different from non-clickable text.  (For example, make links bold, or a different color.)  When users hover over links, give them a different color or use an underline.  If your site’s links are obvious, there will be less user guesswork, which means less user frustration and a better overall experience.

Even if you’re not a developer, I would try to spend a few minutes scanning through your CSS and playing with your a, a:hover and a:visited tags.  (If you’re not sure what I just said, check out this. Firebug, an HTML/CSS debugging Firefox extension, is a great way to play with your markup.  Once you make changes, you can easily update your WordPress CSS by clicking Edit page > Appearance >  Editor and by opening your CSS file in the right column.

For more (detailed) articles on web usability, please check out:

25 Incredibly Useful Usability Cheat Sheets Checklists

10-ux-blogs-you-should-be-reading