Media Manager is by far one of the cooler products that SDL could offer. It appeals to my inner geek. It offers rich asset management over a content distribution network and it does codec conversion. It’s an HTML5 developer’s dream. I don’t claim nearly the experience around Media Manager that I would Tridion, but I have learned a few things about it…
I hated Mac for years. Approximately 27 of them, if I recall. Then my wife twisted my arm and we bought an iMac. Then, two work-issued Macbooks later and I’ll admit that I like designing and developing with Apple’s OSX interface. But I’m not a fan of the iP/hone/ad/od. Why? Usability isn’t user experience, and Apple’s mobile devices are a win for the former and an epic failure for the later (I eagerly await your refutations ;).
After a project was laid on me in the eleventh hour which had to be delivered in the twelfth, I found myself madly trying to educate myself on a foreign subject. The project and the subject doesn’t really matter. What mattered to me was collecting enough data for me to deliver it on time. Google performed beautifully; but a lot of the sites failed. Why? Pop-ups.
One of the biggest problems that I’ve found working in the web industry is that outsiders don’t really get what a website is all about. It’s not just about HTML, a really good design, or content. I’m finding that too many young businesses, or immature older ones, think one web designer is all it takes to put together a website. So I’m going to attempt to describe in under 1,000 words what should go into a website. The key word here is should.
Content Inventory and Audit
Pop quiz: what’s the most important thing about your website? The answer is content. People go there for information, plain and simple. So, if you’re redesigning a website, the first step is to find out what content is there. Kristina Halvorson has some excellent chapters on content audit and inventory in her book Content Strategy and the Web. Get a spreadsheet together, map out what you’ve written, note the types of stuff on the page – and call it an audit.
Your audit also means something else: A review of Analytics and collecting User Feedback. You can get web analytics for a price, or for free. Something like Google Analytics is super easy to implement and it tells you a ton about what’s happening on your website. Analytics will tell you what pages users are going to, and how long they stay on the page. For websites with under 1,000 pages, it’s a useful exercise to tie your content inventory spreadsheet directly to your analytics. As for your User Feedback, try a free survey – like survey monkey.
I’m not going to rewrite an already well-written book on the subject. So I’m going to send you back to Kristina Halvorson’s book to learn content strategy. But here’s the deal: it’s about knowing what to do with your content. Know what you want to do with your website; don’t just throw up a few pages and pictures and call it it. Content Strategy means writing content, developing your Search Engine Optimization strategy (SEO) and even the brand.
Another big component of a content strategy is Usability and User Experience. Don’t confuse the two. Usability is a very scientific and objective piece; it measures things that Analytics captures. User Experience is something you design.
You shouldn’t build a website until you have a content strategy.
After you know what you’re going to accomplish withthe content on your site, you need to figure out how to organize it. So think of information architecture as building your navigation. It’s about what types of content you have, how you associate the content, and how you’ll arrange it on the page. Information Architecture takes you to wireframes which are your rough outlines of the site.
Weird how web design is the third item on your to-do list for your website. That’s because the guy who’s designing your website has to know what kinds of content he has, and where it goes on the page. The web design is to a website as what the interior decorator is to a house. The Web Design should support your content. The navigation style makes sense with your information architecture. The actual layout follows any wireframes.
Regarding the actual design…I’m a huge fan of Adobe Fireworks. Mainly because it was built to be a web design application – unlike PhotoShop which was designed for……well….shopping photos. This is a heated debate in the design community, so realistically, I’d let it slide if someone used PhotoShop. But I’d be happier if they designed using the application meant to do it.
Your web design should be driven by Usability practices, and you should also keep in mind that you’re designing the User Experience. So make your website easy and simple to navigate; quoting Steve Krug, “Don’t Make Me Think.” Remember that your User Experience is very subjective. You can’t really measure it with analytics, so be sure that your design gets reviewed by your customers. Not your mother, your secretary, or your vice president. Your customers.
Web Content Management
Your Content Management System (CMS) is the first application you should really buy for your website. It should be built after your web design is complete, and you even have the vast majority of it living in some sort of HTML. You’d think it’s a no-brainer, but you’re wrong; your content should be finished, too.
Over on another blog I run, I did a post of ways to manage a church website for cheap. If you’re looking for ideas, feel free to contact me. I’ve worked on both the free and premium sides of Web Content Management Systems.
Databases, Servers, and Hosts
To be honest with you, this is not my area of expertise. I don’t build any of the three. Almost every CMS needs a database. Think of a Database as a three-dimensional spreadsheet. Any website more than 10 pages large needs a database. Most all of your free CMS are written in PHP and run off of a MySQL Database. WordPress is especially good at installing itself and setting up its own database.
As for your servers and hosts… Well, unless you plan on keeping the server in-house, try using a server/ hosting provider. Bluehost is my favorite. You need something called a name server which actually stores your URL. Then you need a host – which is where your website lives. Life is easier if the same company keeps track of both.
Websites aren’t just for your neighbor’s cousin anymore. To build a successful one it takes a lot of time and experts. Major corporations often have either departments for each component I’ve described, or they get vendors to help. When looking for a new website, find someone that can help with all of the above – not just a pretty design.
Not too long ago I had a conversation with a graphic designer who was tasked with designing a website. Web Design is out of her area of immediate expertise, and she asked me if I had any pointers that I could share with her. After I sent her my email, I realized that I’ve said this before — and I’ll probably say it again. So, in case my mother, or anyone else, asks my thoughts on how to design a website, here are seven rules that I’ll mouth off.
F is for F-shape
The eye moves in an F-shape on the web page. The hottest spot on the page is the upper left, the coldest spot is the middle right. The last place the eye lands is the bottom right. This is why all navigations, regardless of whether the language reads right-to-left, are left-to-right horizontal, or left side top-to-bottom. Don’t break that rule. The trend today is centered horizontal navigations. When it’s a small website, it’s the best way to go. It leaves you with more room for work. Everything in the website design should support this physiological fact. The F-shape is how you show the user importance, take disgusting advantage of this principle. Design websites to follow the F-shape. http://www.useit.com/alertbox/reading_pattern.html
A Good Looking Header on Your Shoulders
Your header is at the top, and it tells the user where they are. The header is the first thing the eye sees. Get it right or they’ll leave. Logo at the top, above navigation. Center the logo, or put it in the upper left corner. If you have other universal elements, like a search box or an “Español” link, put those in the upper right, opposite of the left-side logo. Users have come to expect that, even Wikipedia got on board; follow the trends.
Don’t get cute with navigation. Absolutely no Mystery meat navigation. Some people would say that’s a key qualifier for a web page that sucks: It should be obvious where your navigation is and where it takes you. Keep your headers simple and easy to read.
Rainbows are for Unicorns, not Web Pages.
One color for links, one color for paragraph text. Link color should not match the color of any other text on the page. Ever. Ever. That’s how users get confused. It is okay for navigation to share color with something else on the page, so long as it’s obvious that it’s navigation.
The old, “yellow on white background” is somewhat obvious, but how about blue on a black background? Ever try a orange with red? Don’t throw colors together. Built a palette first. Be very intentional with how you match colors. I rely heavily on kuler.adobe.com for helping me build color palettes, as this is a weakness of mine.
Be mindful of the cultural implications of color. Be careful with red — and avoid using it in plain text. Red is an attention grabber. Often with software, red means warning. If your website is themed red, that’s fine, but make sure you’ve accounted for how you’ll be able to grab attention if you need it. Color on the web page tells me if it was done by a pro or an amateur.
Isn’t that red annoying?
F is for Fitt’s Law
The bigger something is – a button or navigation, the easier it is to click and the faster they can click on it. Make buttons big. Woot.com is a perfect example. The bigger the navigation or the bigger your call-to-action button is, the faster someone is getting to where they want to be.
Call to Action Like You Call Your Mother
Consistent and frequent Calls-to-Action are good, but don’t ask someone to do 7 things on a page. On every page, every user should be told to do something with a Call-to-Action at least once: Order Now, Register, Learn More, Call us. If someone landed on a page, they should know what they’re supposed to do now that they’ve gotten there. That’s bounce-rate vs. exit rate. They bounce to another page, but they exit when they’re finished. If someone gets on a page, and doesn’t know why they’re there, they’ll leave.
Please, absolutely no more than three CTA’s per page —and they shouldn’t be the same size. The most important CTA should be the largest. The CTA should be like a link; different and distinct in color and shape from everything else. When the user gets to the web page, within 1/4 second she should know what to do, now that she’s there.
F isn’t For Fold
The fold is the point on the page where the user needs to scroll to see more content. You’ll hear some folks say “don’t put anything important below the fold, users don’t see it”. That’s not true. So long as you indicate there’s stuff below the fold, you’re fine. Look at http://www.ilchiro.org/. I did some usability consulting for them. Ultimately, they broke my rule, so when you visit, you don’t catch there’s anything below the fold. My initial design lined up Current Publications and previous headlines. My intent was that the picture on the right get cut off – forcing the user to want to scroll down.
A vertical fold on a web page is fine. A horizontal fold isn’t.
Don’t Build a SteakHouse for a Vegetarian Chef
Don’t design something if you don’t know what you’re putting in it. Content before design. Content before Design. I swear that most website designs and redesigns go in the wrong order; design it, then write the content. That’s not a good idea. Architects don’t do it, web designers shouldn’t, either. Know your content first. Design the site to support the content you already have. If it’s a new site, and they don’t have any of their own content, write it yourself.