Archive for June, 2007
June 14th, 2007
Now, I could start out with a lame joke about meeting Tom Hanks or being sleepless with Meg Ryan or Tom Hanks going to the conference or drinking with Meg Ryan or… you get the point. Let’s just agree not to reference that movie at all in this post.
A week from today, I’ll be attending An Event Apart, a comprehensive 2-day conference with some of the names in our industry. It will be an informative and exciting trip. Plus, I get to see if these people actually know what they’re talking about and probably learn a thing or two.
Being a Seattle newbie, I’m looking forward to exploring this beautiful (and rainy) city. One definite highlight I will not miss is the Pike Place Market, a 9-acre mix of local farmers, craftsmen and merchants overlooking the waterfront. Awesome.
My goals for the conference are simple - learn more stuff, meet more people and have more fun. Learning is definitely covered with the lectures, but there’s also a great wealth of knowledge in the other participants. Which leads me into my second goal - meet more people.
How Design recently had a top 10 list on their site about how to get the most out of your design conference. It’s full of some good advice and items that I’d probably forget to pack. However, I wouldn’t be true to myself if I didn’t point #5, a handy dandy use for your name badge.
To pretend you know someone you’ve never met. Good icebreaker. Just don’t take it too far.
Let’s all imagine how a conversation like that would go. OK, I heard a slight chuckle. Now let’s imagine it after a few drinks. Wait for it. Wait for it. And…there it is. Good icebreaker? Please.
Anyway, I’m not going to promise anything. But I will do my best to post during the conference on the lectures, the people and most of all, the drunk people.
If you have any suggestions about what else to see in Seattle, please let me know. And if you’re going to be there, look me up. I promise I won’t pretend to know you.
|
1,150 Views |
Site News
Digg this |
Bookmark at del.icio.us |
E-mail This Post
June 11th, 2007
As web designers and developers, we tend to understand the latest trends and account for them as we create and code. And no matter how hard we try, browser resolution always seems to be one of those trends that rears its ugly head. Yes, 800×600 is slowly disappearing and 1024×768 is becoming the standard. We all know that. But unfortunately, we still have to design for it.
As you might have figured, the current web stats and trends do support the slow fading away of the 800×600 browser resolution. W3Schools, with data collected every 6 months, states that as of January 2007, computers are using a screen size of:
- 800×600: 14%
- 1024×768: 54%
- Higher: 26%
Now keep in mind that this data is across the board use. Individual sites, demographics, industries, etc. will all vary from these numbers. And this is where the fun starts.
Get to know your user
Before you begrudgingly start to design for 800×600, find out if your target audience is even using that resolution. Sure, there will always be people with different resolutions that visit your site and of course, you can’t account for all of them. It is the internet after all. But who are the people that are actually going to buy your product or use your service? Those are the people you are going to design for.
Yes, it would be foolish to ignore the other people visiting your site. After all, a sale is a sale is a sale. But don’t let it greatly affect your overall design and user experience. You can account for them without focusing in on them.
So how do you do find out who is using what?
The first route is with market research through a third-party or by yourself. Both ways are fine as long as you have the time, money and confidence in either route. There are dozens of industry-specific magazines, reports and sites out there the will give you the low-down on the market trends you are currently in or trying to penetrate. After all, why do the extra work if someone else has already done it for you?
The second way is obvious to some and oblivious to others - talk to your customers. Find out their likes and dislikes. Observe them on the job. Ask them questions. You’ll find, as I have, that most people are very willing to share their positive and (especially) negative experiences when asked. It feels good for someone to take an interest in what you do. And don’t discount the negative answers to your questions. The most valuable information you can get comes from a negative experience because that is where your customers’ needs truly are and where you have the most opportunity to satisfy those needs.
Design Options
So you did your due diligence and found out that your target customer base uses multiple browser resolutions. What now? Well, you basically have 3 options: liquid layouts, resolution-dependent layouts or design a site with a set width of your liking or of a coin toss. Let explore each of them.
- Liquid Layouts - You’ve more than likely seen this type of layout before. This is when a site is designed and coded to stretch out and in as you increase or decrease your browser size. (example) They are relatively common and like anything, can be designed well and not-so-well. Some things to consider when designing a liquid layout are:
The graphic element(s) that are going to stretch. Usually this is a background color or a small portion of a photo that can be duplicated horizontally. When duplicating a photo slice, take a good look at, well, how it looks. Repetitive patterns can look amateurish when the colors and textures don’t match up. Also, take a look at the stretching portion in context to the entire photo. Two business people talking next to each other indicates collaboration, but may give the feeling of not understanding each other’s point of view if stretched apart.
The content. Just because the graphic elements stretch to entire length of the browser does not mean the content also should. Keeping your column width between roughly 400 and 650 pixels allows the best readability for your users. By setting a minimum and maximum width, you can accomodate the liquid design and still keep your users (who know how to read) happy.
- Browser-dependent Layouts - These handy-dandy pieces of code use javascript to detect the user’s browser size and then calls different CSS based on that size. The CSS can be completely separate style sheets or different elements within the same style sheet. Back on ‘04, Cameron Adams demonstrated how he switched between a 4-column and 1-column layout with JS and CSS (article | demo). Since then, Cameron has updated his code and others have joined the mix. Particle Tree, for example, wrote some solid code that modifies the layout a little smoother (article | demo).
When implementing this solution, make sure that the user experience is consistent throughout the different column positions. If they’re asking, “Where the heck did that column go?” then you’ve done it wrong. Your site could seem confusing or even worse, broken. The best example I’ve found of resolution-dependent layout is UX Magazine. The transition is smooth and the site still has a consistent experience even when the column positions have been adjusted. Take a look at this not-so-great example. I spent more than a few confusing moments trying to find the second column when it relocated. Probably not how you want your potential customer to react.
- Set Width Layouts - There are times that you’ll want to design your site with a set width. Your decision may based on the results of your market research, the complexity of your site or any other reason that strikes your fancy. After all, just because you can make a site liquid or resolution-dependent does not mean you should.
Final Thoughts
As always, make sure you know your target audience and follow the best practices of usability, design and clean code regardless of your layout choice. And, on a positive note, at least we no longer have to design for 640×480.
|
1,246 Views |
Design
Digg this |
Bookmark at del.icio.us |
E-mail This Post
June 5th, 2007
Are you too busy to open your emails during the day? Can’t afford that extra click of the mouse to receive your friend’s message about the latest YouTube video? Or maybe you’re just too damn lazy. Whatever the reason, have we got the solution for you. It’s quick. It’s easy. And it runs by default on most email clients. Curious? Impatient? What could it be?!?
You’ll find out…right after this brief message from Microsoft and Outlook 2007. “Outlook 2007: Setting email code back to 2002 since 2006″.
To many of us out there consistently fighting the daily onslaught of our inbox, the preview pane is the answer to our prayers. It allows us to view a portion of an email without the need to open it. This save us time and provides more information about the email before we make the decision to open or delete the message.
All of that is well and good for the user, but how do you design for it? Not only do you have to still consider the overall message that you’re convincing the recipient to read and ultimately take action on, but we have 25% of the space to do it in. Wait, there’s more. This precious 25% of space could be displayed horizontally or vertically, depending on the setting of the email application and the individual recipient. Having fun yet?
Okay, okay. Enough of the dramatic effect. This isn’t the end of the world. It’s just going to take more consideration and planning. You only have 2-4 inches to convince someone to open your email. Let’s explore how to do it.
The Stats - Customer Usage
- Overall, 64% use preview panes as default when they are presented with this feature.
- 95% of B2B users have email clients that are preview pane capable. 64% are using them.
- 38% of B2C users have email clients that are preview pane capable. 27% are using them.
If you’re thinking right now, “I market to B2C. 27%? Awesome.” - don’t. This preview pane usage may seem low, but it’s deceiving because it takes into account web-based email clients. But don’t you fret. The new versions of Microsoft Hotmail and Yahoo! Mail are preview pane capable. So that 27% will just grow and grow and grow.
More Stats - Age Usage
- 84% of 18-34 year olds
- 68% of 36-54 year olds
- 58% of 55 and older
Viewing Methods
As I mentioned earlier, there are 4 ways you can use a preview pane to view your email - small horizontal, large horizontal, small vertical and large vertical. The good news is that the majority of these users are using the horizontal preview page - 18-34 (76%), 36-54 (74%), 55+ (81%) - which is easier to design for.
Take Action
The upper left corner is the one area that is displayed in all preview pane layouts, so take advantage of it. Reduce the size of the masthead images/logos and move them out of the left corner. Put your most important call to action in that space instead. In promotional emails, proudly display your offer or a “Shop Now” call to action. For your e-Newsletters, list your table of contents or an “In this Issue” teaser highlight.
But my branding, my identity, is in that left corner? What is an e-marketer to do? Remember that email marketing is about encouraging action, whether it’s to buy a product, register for a webinar or simply view a web page. A masthead may brand your email, but it does not encourage action. Don’t worry, your email’s “From” address will still have your company name and your subject line will still include the name of the email. At least industry best practices says it should (hint, hint).
And now for my “wet blanket” moment. Just because someone does not use a preview pane does not mean they read your entire email. They just see your subject line and line listing and are making the decision to open or delete your email based on that text. So don’t forget the subject line.
A Final Thought
Designing for the preview pane is not a massive undertaking, so don’t sweat it. It just takes some additional planning and considerations of your goals, your audience and the action you’d like them to take to reach those goals. Your bottom line will thank you for it.
|
2,088 Views |
Design, E-mail
Digg this |
Bookmark at del.icio.us |
E-mail This Post
June 1st, 2007
Yes, it’s Friday. Or as I like to call it, Slacker Friday. This is the day that workers everywhere spend more time thinking about the weekend, looking at the clock barely move and talking about anything but work.
Now what kind of person would I be if I didn’t lower productivity levels even further? With your silent confirmation, I can state with confidence that I am actually that type of person. So, in that the spirit of slack, I give you… [drum roll, please] …the best cartoons of the 1990s. Well, at least to me.
Funny Stuff
Action Stuff
For the nostalgic sap in all of us, I included cartoons that only aired in the 1990s and not the ones that are still on the air. Yes, we all know I’d love to include Family Guy and Ed, Edd n Eddy as well as many others.
Enjoy.
|
1,511 Views |
Animation
Digg this |
Bookmark at del.icio.us |
E-mail This Post
About Spectorbrain
Spectorbrain is a stimulating discussion of web & interactive design experiences, techniques, critiques and ramblings with a bit of humor thrown in the mix.
In his other life, Jason Spector is an experienced web and interactive designer who quotes old Tex Avery and Chuck Jones cartoons just a little too much.
Contact Spectorbrain
spector(at)
spectorbrain(dot)com
Spectorbrain heads to Seattle for An Event Apart
