Programmers are designers in their own right, but they design code and wonderfully architected systems. To design something visual is completely different and just because you have a good eye for design doesn’t mean you have a good mind to apply it.

Since so many programmers have personal projects that usually means they have to create their own websites. If you are a freelance coder, one of the greatest assets you can have is knowing the full web development process from beginning to end, and this includes design.

Here are eight mistakes that I often see developers make when applying design to a website.

1. I know what good design looks like

It can be difficult to separate an eye for design with the ability to design. It is very similar to the people that can look at fashion and tell you what looks good, but can’t really dress the same way themselves.

Great designers simply know what good design is. They know what will work and what won’t work many times before they even pick up a pencil or open Photoshop. Often this is the case because they have spent years pouring over different designs and trying out designs themselves. Just like no artist can pick up a pencil and draw something great the very first time, no developer should believe they can knock their first design right out of the park.

Similar to the way a programmer might study the code of another person, anyone can study a design and begin to gain an understanding of why it works.

Taking a look at the beautiful Punchfork you can see what makes the design so great.

• A great use of images. Images are always helpful in spicing up a design, but too many times designers can get carried away with them. The images used on Punchfork are helpful to getting the message across.
• A solid grid. The great use of a grid layout helps the eye get into a flow.
• Simple typography. There are fonts that should be used on the web and there are fonts that should be used very, very sparingly on the web (Papyrus, Comic Sans, etc.). There is nothing wrong with sticking with Georgia and Helvetica for a design because they work when done right.

There are many more parts of the design that make it so wonderful. When you come across a design you like take the time to study the individual elements, but also acknowledge how they fit into the whole. One great element of a design doesn’t make the whole design great.

2. Color selection

Color selection can be a pain. I hate having to pick colors because there are so many to choose from. For some reason most developers tend to stick to a blue and white palette. Maybe because it is used everywhere or those are the browser defaults, but great design can involve a range of colors. Fortunately for us color-challenged folks there are a ton of tools out there that can help us put together some wonderful color combinations.

COLOURlovers is a great community where people create their favorite color palettes and share them. You can browse, save and vote for your favorite palettes and colors. On more than one occasion I have turned to COLOURlovers to come through and save the day with color selection.

When picking a color palette be sure to stick with one that fits the mood of your site and its content. Don’t pick a palette simply because you love it. Orange and black might not be the best colors for a site around the concept of love for example.

Rarely will you need to use more than 3-4 different colors and if you decide to you need justify your choice.

3. Center it

It can be very tempting to center a headline. It looks great in newspapers, but rarely will it work well on the web unless everything is centered. We know that left-aligned text looks professional and works with the natural flow of the eyes so why go outsides the lines?

Centered text is best used for headlines and short lines of text. Users can read them with ease because the lines are short, scannable, and don’t need repeated eye movements. Centered text can also give your layout an aesthetic look with its symmetrical format. This works for text that goes with centered images. If your images are left- or right-aligned, you should left-align your text to keep it consistent with your layout.

Centered headlines work in newspapers because the text is broken up into columns so the headline flows over the whole story. If you are only dealing with one column of text you should stick to a left-aligned headline.

4. Font smorgasbord

When you aren’t immersed in the world of typography then Arial looks like Helvetica and Georgia resembles Times New Roman. You know that there are other fonts out there like Comic Sans, but you don’t see the importance of having to pay for a font when you can very easily use what is available to you.

With resources like Typekit though, font selection has become eerily similar to color selection. It can take days of research to find the right combination when you could’ve easily used a basic font and finished with the rest.

Don’t go overboard with fonts. Like colors a limited selection often works best. When it comes to fonts, one or two different fonts can be plenty to produce a beautiful design. Remember you can do a lot of different things with fonts. You can italicize them, bold them, underline them, uppercase them, or lowercase them.

5. Pack in the information

When you are a developer, the more information you can have on a page the better. When I code I like to do so on multiple screens because it allows me to have everything right in front of me. Unfortunately this doesn’t work in design. You shouldn’t cram as much information in a tight space as you see fit because then the design becomes dysfunctional.

The eye can only take in so much information at a time and if the purpose of most designs is to get a task completed, then hiding it inside of a million other pieces of information isn’t going to help.

While busy websites can be effective, more times than not they aren’t. White space should be your best friend. You need empty portions in your design to provide emphasis to the parts of the design that are important.

6. No questions asked

We all know that wonderful feeling of creating something and seeing it out in the real world. Because we created it, there tends to be a bias behind it that makes us think that it is better than it really is. You need to get the opinions of others to know if your design is effective and if it isn’t you can find ways to improve it. Instead, developers feel that they don’t need to ask the opinion of others because they know how their design works so it all makes sense to them.

You will also find that when people ask for an opinion about a design they aren’t asking for a critique, but approval. They want justification for the decisions they made and this isn’t the right approach. Asking questions really helps you find usability issues that you might not have been aware of before. Often you get so stuck in your own design that everything makes sense to you, but for a new person your design might be more complicated than a Rubiks Cube.

7. Details waste time

With great designs it can be hard to notice the small details that really make it. They might be so subtle that the casual observer looks past them and continues on. For a developer, the small details might be a waste of time because they don’t understand the overall impact a drop shadow can have on an element.

Small details by themselves only impact a specific element of a design, but when they all come together then you have a wonderful design that flows. Sites like Dribbble expose how great the small details can work in a larger design. However, if you aren’t a designer by trade, focusing too much on the details might slow down the process more than you would like. However, this doesn’t mean you shouldn’t be aware of how the details can impact a design.

Paul Scrivens is the Product Designer at (mt) Media Temple. He also runs the Imagination Community, Drawar. He believes great design makes the world a better place and that we should all strive to improve the world around us. You can find him on Twitter @scrivs. He also likes cats.

What other common mistakes do developers make when it comes to design? Please share in the comments!

Never Ending WordPress Business Bundle – only $14!

Is innovation just a synonym for “invention”, or is it really just a positive spin on “imitation”? I guarantee if you ask five different people, you’ll probably get five different answers. Not because everyone is wrong, but because the exact definitions for ‘innovation’ and ‘innovator’ seem to vary by situation. Once you feel like you’ve answered the question, the next step is to figure out how you can be innovative so that it might help you go further in your situation.

Below, we will go through some definitions and examples to eventually get you to a better basic understanding of innovation, and how it can help you as a designer.

And the answer is…

The word “innovation” kind of varies and is almost completely subjective; it has to deal a lot with the situation and it’s surroundings. Some will tell you that it’s the act of coming up with a new idea while others will tell you it’s just taking any idea and making it your own. I think it’s safe to agree with both points to a certain extent.

The dictionary lists it as something new or different introduced. That’s a concise textbook definition but innovation is not just about an idea or just about creating something new. If that was the case we’d be talking invention, right? And if we were talking just about ideas, we’d be just dealing with cultivating creativity, right? Innovation is much deeper than that, and lies in creating new processes.

Coming with a new and creative idea is just one point of being innovative because the next step is making something tangible from that idea. When you make that tangible thing, are you just hoping people like what you came up with or are you really thinking about it? Innovation begins with research so that you can, in turn, come up with a great process.

Think about this: some of the most innovative things are not new ideas, they’re just better processes. You create a better process by looking at what’s out there, figuring out what’s right and what’s wrong with it, and coming up with something new. The “idea” portion isn’t the most important thing; it’s about how you portray it. For example, if you are a web designer with your own business, your innovation doesn’t necessarily come from an “invention”, but it may come from the way in which you carry out your process: for example, finding a great way to figure out what your client wants or creating an easy way to communicate with clients can be your claim to innovation. You may also show it through your super intuitive designs.

The most important part, however, is doing something different. It’s a competitive world out here, and when a company sees another company come out with something new, oftentimes they try to mimic it and mark it down a couple bucks. I guess I understand the current marketing strategy, but how does doing something like that gain you real loyal customers? Companies in this situation (where they feel behind), have a better chance at re-doing the process and coming out with something new—pay attention to what those customers are saying they hate about said product and fix it. Don’t make the same thing and expect people to come running.

What are the differences?

Once again, trying to really define and teach innovation is really sticky, so perhaps one could understand it when being put against related terms. Innovation can be a completely new idea or a borrowed and improved idea. The thing, however, is not to get caught up in the “idea” of it all, but to focus on the finished product. We all have ideas.

Invention has a very similar definition to our topic. When we think of inventing, we obviously think of making something new. But the process of invention really only deals with creation. In the invention stage, we are working things out, on what’s usually a new idea. In the invention stage, we are trying our hardest to put money into the creation of an idea. We want whatever it is to work and be amazing. Innovation suggests that whatever we have isn’t necessarily a new idea, but it’s our new attempt to basically put it in front of people’s faces. In innovation, we have our finished and tangible reflection of the idea and now we typically want to make money off that, or at least get it seen on a larger scale.

For example, if you’ve studied a bit of science history, you may know we attribute the invention of the telescope to Galileo. The problem with this, is that telescopes were around for a while before Galileo got his hands on it and many people used them. He actually joined that bandwagon fairly late; he was about a year or so behind. Telescopes prior to Galileo’s usage weren’t used as a device to look at moons and stars—it was basically a pretty useless magnifying glass, sometimes purchased for fun. However, Galileo decided there was something important in the sky and he wanted to take a look at it, so he researched the product, made it better by increasing the distance in which you can see things and ended up giving us the precursors of the modern day telescope.

Galileo did not invent the telescope, but he helped to innovate and cultivate the idea. Steve Jobs didn’t create the MP3 player, but he helped to innovate the idea. Being or creating something that is innovative is about making the right connection to your consumer. There are many products that take extremely complex topics and scale them down to put them in front of an individual so that they may use it. There are also products that seem to be useless, that can be innovated into extremely useful products. However, if you have a simple audience and try to sell them an extremely complex product, you’ve completely lost hope. It’s just about making the connection between an idea or invention and an individual who has a problem to solve. Inventions can be innovative, but innovations do not have to be inventions.

Innovation relates not only to creation and making connections, but the organization as well as the design. If you want to create a better process that relates better to your audience, you’ve got to design it and organize it in a way that is easily understandable to your audience. Else, you’re a lost cause once again. Any product usually does not live without invention in some stage, but at some point there has to be a focus on the process and how to make it better for what ever problem needs to be solved. It’s easy to confuse invention and innovation, but the truth is, innovation is much more important.

Moving forward

Any good business, whether large or small, knows that in order to stay ahead of the game, they’ve got to be innovative. It isn’t about being better than anyone else, instead it’s about creating products and services that will have longevity. The great thing about innovative products is that they are typically timeless. Gimmicky products? Not so much.

Why is it so important to cultivate innovativeness? For one, people have short attention spans and get tired of new things fairly quickly. Secondly, innovation is what changes the world—it changes our interests, it changes our government and it changes the way we move in the future. Some products are for a time period, even some categorically innovative ones. But it takes that quality to be continuously visited in order for the product to remain relevant. You don’t just update features, but you update how it works, how it interacts and what it looks like. For example, the Nintendo GameBoy at every stage in its life (from the bulky handheld to the slim two-screen), hasn’t just simply added a feature, it changed the way you played handheld games. Not only did other copycat companies have to keep up, but game developers had to do the same, as did mobile phone makers and full gaming consoles. Nintendo has always been an innovator in the game console arena.

Companies that spring up just to copy off another company won’t make it. Even as designers, if we are trying to design like our favorite and follow the same path, we aren’t going to make it. You have to be different. You have to want to change something. The longevity of a company is in question when their main purpose is to copy every move of another company. Think about two companies that have broken the mold of typical companies; for example Starbucks, Apple, and PayPal just to name a few. Now think of the companies that came to be because they felt like “they could do that too”. The innovators mindset is not “I can do that, too”, but rather “anything you can do, I can do better.”

We must also keep in mind that innovation is not just directly related to products and commercialism. There are ways available to innovate in society through economics, laws and much much more. It is the propeller for all things linked to progressive movement. Innovators have to keep in mind that they have an opportunity to change the lives of 6+ billion people. It isn’t all about products and consumerism, but it is definitely about raising the bar for everyone.

How can you be innovative?

As a freelance designer who has clients, you’re probably not thinking you have to be innovative. That’s just the job of your clients and you follow suit. But as previously stated, any business knows that they must be innovative in order to prosper and be successful. Don’t you want that for yourself?

You already have the upper-hand because if you’re a good and mature designer, you know that graphic design is about visually solving a problem. You have a client that wants to use their website to sell their product; how would you do it? Your client needs a flyer for an event that people have to RSVP for; how do you do it? If you can answer these questions, you are already a problem solver of sorts and have no issues thinking in that mind frame.

The thing about innovation, however, is not just what you’re going to use to carry out your tasks but how you’re going to do it. See, innovation for a designer can present itself in several different ways. Do you find yourself and others in the same situation often, so you want to try to invent an app to take care of something? Do you want to change the way people look and see design, so you create the difference? Or perhaps you just want to change and better the process of graphic design all together, so you want to organize things differently.

Many innovators have mastered the task of paying attention. If there is a problem that needs to be solved, you must pay attention to the solutions already out there and you must also pay attention to the way consumers have reacted to the solution. Figure out what works and what doesn’t work and come up with something new. The trick to creating that new thing, though, is creating it so that it is used intuitively by your audience. If a solution or process is outdated or doesn’t work, flip it around and look at it from all angles. Try to figure out what works.

In order for innovation to take place, of course you need some creativity and you need some entrepreneurship capabilities, and you need an excellent relation between both. But you must know how to make things intuitive. Products and services are used when they make sense for people without the use of training and such. You must know how to find the bigger picture and act on and solve that.

You also want to make your self as susceptible to innovative thoughts as possible. It really begins when you attempt to think outside the box. It sounds cliche and boring, but the truth is a lot of people have issues thinking outside the box. Many of us our cultured into believing certain things and in some systems, that when one thinks against it, you automatically get scared. As a musician, I run into a lot of other musicians who are looking for fame and fortune. If anyone knows anything about the music industry, it isn’t doing so well. These musicians want to catch their big break while they are still running through the dying techniques of the industry, and when they have an out of the box idea, they shy away from it because it’s “too different.”

If you want to be innovative and move forward, you have to abandon the thought that all different ideas are bad ideas. Keeping an open mind and paying attention to your surroundings are some of the best things to do in order to be innovative. Innovators look for unique ways to solve problems. There’s no better way to think uniquely than to be open, daring, and bold; don’t be afraid of your creativity. Taking risks and not being afraid to break down barriers and walls will take someone further than playing it safe. There’s nothing wrong with being different, especially if you can bottle it up in a product that people will love.

Conclusion

The definition and thoughts on innovation will always vary, but there’s never any real question of those who are innovative. Innovation doesn’t have to be this thing you put on a pedestal or fear but it should definitely be something you strive for and try to welcome. It comes in many different scales and in many different situations, you just have to open your eyes to it.

Is there a difference between the person who creates his own new innovative idea or the guy who borrows an idea and makes it better? Not really, as long as both things work and are accepted as such. Is there a difference between the guy who invents something but it’s deemed unusable for the public and the guy who takes that invention and flips it so that it is usable for the public? Absolutely—the latter person is an innovator.

You don’t have to invent the newest, shiniest technology, but you do want to bring something different to the table. If you find a consistent problem in some sort of process, turn it upside down and see if it still works. If it does, use it. If it doesn’t, try some other amazing idea. Innovation doesn’t require you to reinvent the wheel, but it does challenge you to look at that wheel differently.

Kendra Gaines is a freelance designer from Virginia, USA. Connect with her.

Where do you see the most opportunities for innovation in web design and development? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

The immediate benefits are also abundant. Emerging techniques you learn today can be applied to a client project tomorrow for added value, or to set your work apart from the mainstream.

There was never a point at which successful designers have learned enough. The secret to being cutting edge is to stay sharp. Aside from your local library or book store, and in lieu of returning to college full-time, the internet offers you an infinite number of outlets and resources for learning.

With so many blogs, e-books and forums offering knowledge on hundreds of design-related topics, determining quality and choosing sources can quickly become overwhelming and time consuming. Below are 9 of the best resources I have uncovered and used to keep my own skills fresh, chosen for their high content quality, element of interest, value and relevancy.

1. Sessions College for Professional Design

Sessions College offers a collection of high quality certificate and degree programs aimed at professionals who wish to learn something new or refresh their credentials. Each course is designed to provide new and creative ways to use modern techniques in design, coding and multimedia. Fees are reasonable, and the school offers an easy payment schedule and assistance for securing private loans for those who need them.

2. Lynda.com

The video courses offered through Lynda.com cover a wide range of subjects, from Development to Photography. Courses are carefully tailored to help professionals learn new topics in a short amount of time, and are a perfect way to evolve your work by expanding your knowledge to include complimentary skills such as Photography or Animation. Lynda.com is a pricier option at $25 per month, but may make up for the money you will lose by letting your talents wane.

3. O’Reilly

O’Reilly is an academic standard when it comes to instructional text, and their library sports titles covering every technical subject imaginable. They also sponsor the School of Technology, which offers extensive online courses and certificate programs, covering modern programming languages. Unlike formal online university programs, the School of Technology courses earn you credits at a fraction of the cost and are accessible anytime.

Training courses are excellent for learning specific topics quickly, but the cost adds up. If money is tight, the best solution is to buy a book. Several titles are available for free download from the O’Reilly library, found by entering “free” into the search bar.

4. jQuery

The power of jQuery is quickly becoming a staple in web design, and understanding its basic function and implementation is important, even if you are not a developer. The jQuery website is more than just a repository. Its tutorial seciton is an excellent solution for learning specific techniques and plugin usage. Each tutorial is written by key contributors to the jQuery project, many of which are also authors, teachers or industry pioneers.

5. W3C Schools

Building from standards set by the Worldwide Web Consortium, W3CSchools always has a complete overview on updates in web coding before they are fully supported by browsers. Keeping on top of content as it is published to this site guarantees you will have a strong understanding of the discipline and techniques required to implement it in your designs far before the rest of the web catches up. W3C Schools even offers certification for the benefit of skeptical employers.

6. Free University Courses

You can pay for premium education, or you can get it free. If you are like most designers, free is always a better option. Academic Earth is a compendium of top university resources, seminars and lectures on a variety of topics, including business, art and writing. Berkeley and MIT also offer a huge selection of open courses, video lectures and materials to help you supplement your technical skills.

7. Conferences

They aren’t the most cost-effective or quick ways to learn a new skill, but the contact-building capabilities of conferences and seminars far outweigh the perceived inconvenience of leaving your computer and many of them offer convincing whitepapers aimed at convincing your employer to fit the bill.

Thousands of experts from around the globe gather to exchange expertise and ideas in areas you may not think to pursue as a designer, such as copyright law, business ethics, user experience and agile development.

Smashing Magazine hosts a thorough list of conferences on their blog here and cover everywhere from New York to New Zealand. Conference websites often host videos of past talks, allowing you to gain key insights without having to attend. To keep on top of internet topics outside of design, check out upcoming technical conferences at O’Reilly.

8. Challenge Yourself

Learning a new trick in CSS or mastering HTML5 is not the only way to keep your skills sharp. Your creativity muscle needs new ways to flex itself that go beyond web standards. Use sites like the 100-Day Drawing Challenge and Show & Tell’s 30 Day Challenge to keep your artistic aptitude high and strive for unique and interesting perspectives through physical sketching. If Photography or Digital Art is more your thing, consider JPG Magazine, DP Challenge or Dominance War to help keep that spark lit, and keep an eye on Duuel, a new website aimed at challenging pairs of designers to innovate in specific areas of design.

9. Community

Your instinct may tell you to stay away from others of your kind for survival, but this is counterproductive and counter-intuitive where the spirit of web design is considered. Sites like Forrst, DesignersCouch and Dribbble give you the opportunity to experiment in an open arena, ask questions or share your expertise. Your peers and colleagues offer the best resource for learning new techniques, discovering new tools and gaining valuable feedback, so don’t be afraid to use it.

Written exclusively for Webdesigner Depot by Vail Joy. She is a freelance designer and tech blogger with a deep interest in all things web-related. She also enjoys writing for WIX, the free website builder.

Where are your favorite places online to continue their design education? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

The downside is, Drupal is huge. There is a steep learning curve and it can be a full-time job just looking through all the contributed modules to find exactly what you’re looking for. It is not a happy-go-lucky, “set it up right out of the box” platform.

But the upside to all of this is, Drupal is huge! There is nothing you can’t do with Drupal. Want to run a blog? Done. Want to run a blogging community? Done. Share links and photos, run classified ads, show Twitter updates and statuses, sell products, upload and share files, play movies, even manage a wiki? Done, done, done, done and done!

At the risk of sounding trite (and please forgive this slightly over-used phrase)…Drupal is as Drupal does…And Drupal does it all. So what makes Drupal stand out so much? Many things, but we’re going to focus on just the most important aspects right now..

Views

First… Views. I could almost just stop right here. No other platform offers your site the power and flexibility that Drupal does through Views.

For those of you not already well-versed with Views and all its glory, let me explain it to you. In a nutshell, Views allows you the chance to define how you want the content on your site to be displayed. But that’s not all. Thanks to the powers that be at the Views project, Views allows you to query your Drupal database for the content and define and solidify exactly how you would like to display the content retrieved from the query… all without having to write the SQL queries yourself. And with the even more simplified administrative interface offered by Drupal 7, building Views has now become streamlined. A basic View – say, showing a list of all the products on your site – can be set up, configured, and saved in two or three minutes.

More complicated Views will take a little longer to set up and configure—for example, maybe 15 minutes to set up a list of all your members as an exposed proximity search by zipcode.

If I never have to write another SQL query, I will die a happy web designer! Even if you love SQL, who wants to spend unnecessary time on repetitive tasks? Views helps you stay focused on the important parts of your project.

Custom Content Types

Next, Custom Content Types. The Content Construction Kit (CCK) has been around for, well, forever. CCK was a contributed Module for Drupal 4, 5 and 6, but now with Drupal 7 most of CCK has been added to Drupal Core.

The Content Construction Kit does, pretty much, what it says in its name—it’s a kit to help you construct various types of content. Thanks to CCK, you can have thirty different types of content and each one can be glorious and different from all the others. For example, you can have real estate listings in which there are fields to input things like square footage and the number of bedrooms. Or you can have auto listings that need a whole separate set of fields. Here’s an example of various content types in action:

It just doesn’t get much more flexible or easy than this.

Powerful SEO Tools

Third, Search Engine Optimization galore! It would probably take me ten articles to describe to you the top ten ways that Drupal rocks SEO…and even then I couldn’t get into any real detail or address every aspect of the power behind Drupal’s SEO capabilities.

Everyone knows about how important it is to optimize content for SEO, and add in things like keywords and meta tags. And Drupal gives you the power to do this. But Drupal goes even further by offering you full control over your URL structures, page titles, and even power over caching tools.

Plus, integration with other SEO tools such as Google Analytics is easy to do and highly configurable. Want to track your members but not your moderators? It can be done! All from within Drupal, all without manual programming… And all for free.

I have two words for this…Rock On. By radically simplifying this side of things, Drupal helps increase the value of the services you can provide to your clients – all in a pain-free way.

Versatile Theming System

Fourth, Drupal’s theming system is extremely versatile – and perfect no matter your level of experience.

For new users, Drupal offers a slew of free themes that are ready for you to use right out of the box. And we aren’t talking about bottom-of-the-barrel themes that will make your site look like it’s been built with a free theme. We’re talking beautiful, professional themes that will give your site a clean, professional look without much work from you at all. Check out these examples:

• BlogBuzz
• Corporate CLean
• Andromeda

Changing the look of your Drupal site is as easy as uploading your theme to your server, and clicking on a link in your site’s theme administration system:

For more experienced users looking for an option somewhere between building a custom theme and using one of the available free themes, Drupal also offers a collection of starter themes that will provide you the basic building blocks—allowing you to further customize and build your theme on top:

• Zen
• Fusion
• Genesis
• Blueprint

And for you experts out there, Drupal has provided you with a thorough explanation of their theming system, including basic page templates, hooks, functions and classes.

Taxonomy and Unicorns (well, maybe)

Fifth is the magic of taxonomy. Okay, so taxonomy isn’t actually magical (it’s the science of classification)—but it might as well be. Through Drupal’s taxonomy system, you can build a seemingly limitless hierarchy of keyword-rich terms that will help you classify and categorize your content.

From there, you can even build menus, pages, and Views that center on this taxonomy. Each Vocabulary on your Drupal site can be as strict (select a term from the given list) or as free (type in a term) as you like. Powerful organization and easy management is magical, right?

User Management and E-Commerce

Next is the sheer power and flexibility offered by Drupal’s user management capabilities. You have absolute control over everything, including registration, member profiles, content access controls and role assignments. You can allow or restrict inter-member communications as much or as little as you like – from full-blown community sharing to simple forum discussions or messaging.

Let’s not forget e-commerce…Drupal has several options available for your e-commerce site, including the ever-popular Ubercart and, of course, the creatively-named Ecommerce.

Create and control inventory, offer shipping quotes, calculate taxes and handling fees, accept payments from any of several payment gateways…The sky is truly the limit. No need to find a third-party resource to list and sell your products; it can all be done from within your site.

Awesome Community

And finally, Drupal’s awesome community of developers, themers, programmers and overall support sets this content management system apart.

First, the centralized repository for Drupal modules helps ensure that the support queues and version control are handled in a more universal way and remain GPL compliant. (Don’t know what GPL compliance means? Basically, it means you won’t have lawyers breathing down your neck!) If you happen to be a developer of one of the many (many, many…many) contributed modules on Drupal, you can be assured that your module will get a high level of exposure and be thoroughly vetted by the Drupal community.

And, Drupal has been around a long time—which is a huge benefit for a number of reasons. It’s stable and it works; its longevity already proves that. But, let’s be honest: other CMS platforms can boast the same thing. But can everyone else also boast that they have never forked or branched out? The Drupal community works together: programmers work in hand with writers to bring you the documentation area, guides, and handbooks; developers of one module work together with the developers of other modules to help design better integration. And they do it in such a way that allows your online presence to continually grow and expand without ever having to hack into the core modules. And who wants to hack into the core of anything?

While we’re on the topic of community and universal handling of modules, I should note how easy it is to hand off a Drupal-based project, or get a new developer on a project up to speed. I know… as a business owner you would never have to fire your existing site developer and, likewise, as a site developer you would never leave your client. You are both mutually awesome and work together perfectly.

But, in the chance that I am wrong and you do find yourself someday in a predicament where you’re looking for someone to continue the work for a site being developed, almost anyone trained in Drupal can handle that for you without worry. There’s no need to feel like you’re stuck with a platform that no one else can learn or understand. Also, if your project takes off and you need more help, you can get a new developer going in almost no time.

Conclusion

In short, if you’re looking to build a simple site with anywhere from six to twelve pages that aren’t going to be updated all that frequently, then Drupal is probably over-kill. But if you’re looking to build a robust site with infinite possibilities for expansion and growth, Drupal is an absolute must.

If you’re a brand-new beginner within the world of Drupal, you may find Drupal a little harder to pick up than most other CMS platforms.

With great power and flexibility comes a steeper learning curve; unfortunately, there’s not much that can be done about that. But if you stick with it, use the support queues and forums to gain help as needed, and truly experience all that Drupal has to offer, you’ll find yourself wondering why you didn’t try Drupal earlier.

Dana Winslow (aka Dana on Drupal) is a member of the DWUser.com education team. DWUser.com offers software tools for developers and designers, including an easy and free jQuery slider builder, EasyRotator.

Do you use Drupal for your own projects? Why or why not? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

One of the long-standing complaints about Macs is that there are more limited software options than for Windows-based PCs.

While the gap has closed in recent years as Macs become more popular (and let’s face it: there are some awesome Mac-only programs that PC owners are rightfully jealous of), there are still programs you can only run on a PC.

And even if the programs you want are available for the Mac, what if you already have Windows licenses for them? Do you really want to spend hundreds of dollars on buying the exact same version of your software, just for a different platform? Can you even afford to do that? Probably not.

Sure, you could use Bootcamp, but that means every time you want to run a Windows program, you’ll need to reboot your Mac. Not the most ideal solution if you’re in the middle of a project. Especially if you use a mix of Mac and PC programs for your work. This is where Parallels comes in…

Parallels lets you run Windows programs on your Mac, as if they were native programs, without a reboot. Instead, it creates a virtual machine within your Mac where you can install a (separately-purchased) copy of Windows. From there, you have the option to view your Windows desktop and programs within a single window on your Mac, or you can set it up to show your Windows programs natively within your Mac environment.

Developers and designers should be especially interested in this, because it means that they don’t need to keep two systems up and running for testing (or rely on third-party testing services). Just run whatever version of Windows you want with Parallels and test in Internet Explorer or Windows versions of other browsers without any hassle.

Parallels 7 has just been released, and adds a number of new features. First on the list for many is likely integration with Mac OS 10.7 Lion, which includes full-screen support, use of the Launchpad for Windows applications, Mission Control support, and more. Parallels also has a new, more Mac-like appearance and functionality, including setting preferences immediately without having to click OK.

The Parallels Wizard makes it easy to set up your virtual machines, and even includes the ability to download Chromium OS, Fedora Linux, and Ubuntu Linux for free, or purchase and download Windows 7 (you can also install Windows 7 from a DVD or image file, or migrate from a Windows PC).

Another big feature that’s been added is the ability to share your iSight or FaceTime HD camera with Windows applications, including Windows Live Messenger, while also being available to OS X programs at the same time. Printing has been streamlined, too, so that it’s possible to print from your Mac OS printers from within a Windows program.

Other improvements include faster boot times, faster pause and resume within Windows, and faster migration of your PC data. Overall, Parallels 7 is about 60% faster than Parallels 6 was.

You can also now choose up to 1GB of video memory to make graphically intensive Windows programs run smoother. There are enhanced 3D graphics for gaming (up to 45% faster than with Parallels 6), plus 7.1 surround sound and support for high-quality audio formats (up to 192KHz). And there are plenty of reports from gamers online that Parallels 7 makes it possible to play games that Parallels 6 couldn’t handle.

Another advantage to Parallels is that you can also run multiple versions of OS X within the virtual machines on your Mac. For example, you could run OS X Lion along with Snow Leopard Server if you needed to, without having to reboot your computer to switch between the two. This is another huge potential advantage for developers.

The new Parallels mobile apps for iPhone, iPad, and iPod Touch are also a great addition. Currently $4.99 (the regular price is $19.99, so get it while it’s on sale), the mobile app will effectively let you run Windows (or whatever OS you’re virtualizing) on your phone or iPad, even including Flash content. You can even copy and paste text directly from your mobile to your virtualized machine with the app!

The full version of Parallels 7 is $79.99, though the student version is only $39.99. An upgrade from Parallels 5 or 6 will set you back $49.99. You’ll need to buy a copy of Windows if you don’t already have one, though Parallels 7 makes it easy to purchase and install the newest version of Windows directly from within the program.

Reviewed exclusively for WDD by Cameron Chapman

[Disclaimer: This post is a sponsored post for Parallels. The opinions expressed in the article are the author's only.]

Never Ending WordPress Business Bundle – only $14!

For the past two years, since Google Chrome’s release, there’s been a raging debate on which browser is superior. Mozilla’s open source product has stood the test of time and Firefox has quickly become the most used browser, having surpassed Microsoft’s Internet Explorer.

Don’t feel sorry for Google Chrome, however. Even in its infancy, Chrome has already reached second most popular, having already surpassed Internet Explorer and with a high chance of surpassing Firefox.

Although Firefox is more robust (primarily due to its popularity), Chrome is lightning fast and, with new extensions added daily, an exciting option for the serious web designer.

And here you are to find tools that make Chrome useful to you as a designer or a developer. Fortunately, Chrome has a burgeoning collection of extensions that will make the transition from Firefox a lot easier.

1. AppJump App Launcher and Organizer

After you finish downloading all the extensions in this list, you’ll definitely need an organizer. AppJump is a Chrome extension that allows you to locate and launch your applications and other extensions quickly from a drop down menu on your toolbar. One cool feature of AppJump is the ability to organize apps and extensions into different groups. For example, you can easily separate your work extensions from your personal, for more effective time management.

2. Awesome Screenshot

Awesome Screenshot lives up to its name. This awesome extension allows you to take snapshots of the whole or partial page. After taking a screenshot, you can circle or underline relevant parts, blur out irrelevant parts and make comments. You have the option to save to local or upload and receive an image link for sharing.

3. Aviary Screen Capture

After waxing poetic about Awesome Screenshot above, you may wonder why two screen capture extensions are added on this list. One downside to Awesome Screenshot is that it requires access to all the data on your computer and your browsing history. For those users who feel that is an invasion of privacy, Aviary is a perfectly capable option.

4. Chrome Sniffer

Chrome Sniffer allows you to check the framework of any website. It locates and displays any known Content Management System (CMS) or Javascript library on a website. This extension is great for those mind-blowing websites that leave you wondering, “How is that humanly possible?” Currently, Chrome Sniffer can detect over 100 frameworks.

5. Cloud Save

There’s a huge shift from operating locally to working in the cloud. As designers and developers, you are accustomed to working on the internet, but do you also save important files online? If your excuse is that it’s not so convenient, you may want to take a serious look at Cloud Save. Cloud Save allows you to save files from any website to supported cloud services. Save to Amazon Cloud Drive, Dropbox and Flickr.

6. Code Cola

Code Cola is an extension that allows users to edit individual pages inside of a website. The extension allows you to click on an area within a web page and edit the CSS automatically.

7. Corporate Ipsum

Corporate Ipsum is a fun alternative to the standard Lorem Ipsum text filler. With this extension, you can populate your website with “corporate” speak and buzz words. An example of Corporate Ipsum is, “Competently target enterprise-wide data with multifunctional ideas.” This extension is based on the popular Mac widget of the same name.

8. Diigo Bookmark, Archive, Highlight and Sticky Note

Diigo is short for Digest of Internet Information Groups and Other stuff. It is an online research tool that allows users to manage information. Highlight webpages in multiple colors, make sticky notes, exchange pages across your social network and create groups to share your research.

9. Drag2up

Drag2up is an easy to use file attachment system. Instead of clicking through various windows, simply drag the file you’d like to attach from your computer onto the input field. Alternately, you can upload files to various hosting sites, including Flickr, ImageShack, Twitpic, and Box.net. This extension is easily one of the must-have downloads.

10. Eye Dropper

Every now and then, you come across the perfect shade of green that you must incorporate into your web design. The Eye Dropper extension allows you to locate the exact shade. It also keeps track of your colors history.

11. Firebug Lite

Firebug is one of the great tools that makes it difficult to transition from Firefox and leave it behind. Fortunately, Chrome has an extension called Firebug Lite that offers a similar function. Firebug Lite works along side Chrome Development Tools to enable developers to inspect and edit HTML and DOM elements. It also allows you to debug with ease. Firebug Lite is actually a JavaScript file that acts like the original Firebug once inserted into a web page.

12. Greplin

Greplin is an extension that allows you to search within your private data. Use this extension to locate a piece of information you post on various social websites, including Twitter, Facebook or even Gmail. It indexes your data for easy searching. Instead of dredging through your history, you can easily call up data with Greplin.

13. HTML Instant

HTML Instant is a real time HTML. It  features a split screen. As you type your code on left side of the split screen, you see the results automatically on the right side. HTML Instant not only works with HTML, but it also supports CSS and JavaScript. You can also upload images from your Image Shack, Photobucket, or a random website that’s hosting an image. This HTML editor is very user friendly, for the novice designer.

14. IE Tab

The IE Tab extension allows you to view a webpage from a simulated Internet Explorer, while still using your Chrome browser. Internet Explorer is still the preferred browser of most internet users. And there are still some sites that work best or even exclusively with Internet Explorer. This tab allows you to use Internet Explorer without sacrificing your dignity. First things first, IE Tab only works on Windows. This is because it uses Window’s built in rendering engine for Internet Explorer. For that reason, Mac users are out of luck on this one.

15. Image Properties Context Menu

Image Properties Context Menu is a useful Chrome extension that provides information on all things related to a selected image. Users can find both the location and the source of an image. It also shows the image’s dimensions and file size. It’s a simple but effective extension that is somehow not included in the Chrome browser.

16. MeasureIt!

MeasureIt is a ruler that you use to find the dimensions of any element on a web page. Simply click on the extension and drag out the ruler to find the dimensions quickly and easily.

17. Microstock Photo Power Search Tool

What separates a good web designer from a great web designer is knowing where to go for stock images. Any designer knows that finding the right image is one of the most time consuming parts of design, especially if you have several go-to resources. This extension allows you to search microstock on 5 of the top stock agencies, including Dreamstime, Fotolia, and Shutterstock.

18. Palette for Chrome

The Palette for Chrome extension is instantly useful. Right click on any image you’d like to use. This extension creates a 16, 24, or 32 color palette. Alternatively, you can also create a custom palette. Use this extension to incorporate and convey the colors from your favorite image into your web design.

19. Pendule

The powerful Pendule extension combines several of the extensions found in this list. Pendule allows you to view and alter Javascript and CSS. You can also view information about specific images or hide them altogether. It’s a robust developer tool that includes a color picker, an HTML and CSS validator and a link checker.

20. PlainClothes

PlainClothes is a fun and useful extension that allows you to see the bare bones of a website. Sometimes it’s easier to see mistakes in a design or analyze why it works so well when it goes black and white. PlainClothes allows you to strip down an webpage to one text color, one background color and one link color. Links are underlined, text is your default and suddenly, you’re in 1998 again. Actually, PlainClothes works very well for adding accessibility to your web design.

21. Resolution Test

Change the size of your browser to test your website in various resolutions. Resolution Test comes with preset resolution sizes, but you can also view in your own specified resolution.

22. Search by Image

Search by Image is one of my favorite Chrome extensions. This extension allows you to find a specific image on different websites. With Search by Image, you also have the option to find similar images. Simply right-click on the image of interest and select “search Google with this image.” You will find pages that include matching images or are visually similar.

23. Session Manager

The Session Manager extension saves all of your currently opened tabs for later perusal. This extension is extremely useful if you, like most, find yourself opening the same pages over and over again. Group and save related tabs in Session Manager. For example, bundle all of your social networking sites together so that you can quickly access them without having to individually open each site. And close them just as quickly, with assurance that your tabs are saved.

24. TabJump

Similar in scope to Session Manager, TabJump goes a step beyond. Not only does it manage your tabs, this extension can also lock tabs, preventing you from closing an important tab accidentally. If you do close a tab by mistake, TabJump will allow you to re-open it, but keep in mind that extensions cannot restore history.

25. TooManyTabs

Because there can never be enough extensions to address browser tab management, TooManyTabs is another must-have. This extension shows a thumbnail of all of the tabs you have open. This comes in handy when you’re operating with so many tabs that you can no longer read the tab titles. Having a visual aid helps you sort through your workspace effectively.

26. Web Developer

Web Developer is another comprehensive developer tool. It is by the same developer who wrote the wildly popular Firefox extension. With this extension, users can view and edit CSS, display image file sizes and clear session cookies.

27. WhatFont

For most web designers, fonts are kind of a big deal. Have you ever happened upon a random website and found the perfect font, only to search endless code for answers? If you like things simple, install this font finding extension. Simply hover over a text and find the font in use. Not only will this extension tell you the name of the font, it also gives font size and color.

Jacqueline Thomas is an award-winning writer and web design consultant. Find her on her website and follow her on Twitter.

Do you have any favorite extensions that didn’t make this list? Please share it with us in the comments.

Never Ending WordPress Business Bundle – only $14!

The lines blur a bit with web apps (which are technically both apps and websites), but we still tend to try to compartmentalize them. Even designers who work on both kinds of designs often view them as separate things.

But there are a lot of lessons that app designers and web designers can teach each other.

Each type of design has emerged to have its own strengths and weaknesses, often complementary to the strengths and weaknesses of the other field.

Below are six lessons that app and web designers can teach each other.

1. Avoid feature creep

App designers know that extra features can quickly become your worst enemy. Keeping your app tight and lean, with only the necessary, useful features, is a key to success. If you look at the most popular apps in virtually any platform’s app store, you’ll see that the majority have a narrow focus with only the features they most need.

Ge.tt is a great example of a web app that has avoided feature creep. It lets you quickly share and publish your files online. All the features it includes are directly related to that one central purpose.

This kind of narrow focus is important for apps, because they’re often constricted by both space and usability issues. If someone is using an app on their phone, usability can be a lot more challenging. The more features you clutter their screen up with, the more difficult the app becomes to use. While some applications have figured out ways to create feature-rich applications without clutter, it’s definitely a much more challenging proposition.

Web designers, on the other hand, often try to cram as many features as they possibly can into a website. Their view is that the more features, the more useful their site will be. And while websites don’t necessarily face the same clutter challenges that small-screen apps do, that doesn’t necessarily mean a larger scope and more features are going to add value to the user.

That’s what it comes down to: value. If the features you’re adding honestly provide more value to your end user, then finding a way to incorporate them into your existing user experience is important and worth the challenge. But don’t add features for the sake of adding features.

2. You need to create something unique and fresh

App developers know that creating something that’s different from the apps currently available is one of the most important elements of creating a popular and successful app. They need something unique and fresh if they want to stand out in the marketplace. Just adding a feature or two over what the competition is providing doesn’t cut it.

PDF Expert is a great example of an app with both a fresh design and unique functionality.

Web designers haven’t necessarily caught on to this idea. A lot of them take the same things that other designers are doing, tweak a couple of things to “make it their own” and call it a day. Sure, superficially the site might look different, but it’s still the same generic layout, the same generic features, and the same generic functionality. There’s nothing different or outstanding.

Designers who want to be really successful need to think of ways to create something that’s truly different from what the competition is offering. Come up with new ideas and new approaches to common problems, rather than looking at what the other guy is doing.

Here’s an exercise for you: the next time you have a design challenge that needs to be overcome, don’t go looking for how someone else is doing it. Instead, sit down and brainstorm ten ideas for how you might address the issue, regardless of how off-the-wall or stupid they may seem. Only after you have this list are you allowed to go look at how others have solved the same challenge. See if their solutions are really better than what you came up with. Combine some of their ideas with some of your ideas and see what you can think of. This will get you in the mindset of thinking of your own, unique solutions rather than just following the status quo.

3. Use standard GUI controls and patterns

While unique is good, the best app designers also know that there are certain standard GUI elements that are expected to do certain things. They deviate from these predefined controls at their own risk. The successful apps only do things differently when it works better than the standard GUI (which isn’t often in most cases). And most of them present clear instructions when they do deviate.

The Harvest app uses standard GUI patterns while also creating a customized interface. It makes for an app that’s both easy to use and attractive.

Web designers sometimes deviate from the norm in an effort to be unique and in the process make their sites unusable. People expect certain things when they visit a website: underlined text is a link, as are buttons, navigation is obvious and usually either at the top or side of the page, and similar common constructs. When you change things from the norm, you’re more likely to confuse your visitors.

Think of the common design patterns for any given element and then decide whether deviating from that pattern is actually going to improve the user experience on your site or just make it “different”. If it’s not going to improve the UX, forget it. And if it’s not immediately obvious how something works, then add some instructions somewhere on the page so your visitors know what to do. The quickest way to lose a visitor is to make them feel stupid.

4. Create useful error messages

This lesson can go both ways. Some app designers have fantastically useful error messages, as do some websites. But there are a lot of apps out there that don’t have helpful error messages, and a lot of websites that are the same.

Even the simple addition of a search box and links to the home page and archives can make a 404 page more useful.

Useful error messages tell the user something more than just the fact that there’s been an error. In the case of an app, a more useful error message might offer ideas for how to get around the error. On a website, the error message might give the visitor some alternatives or ideas for how to overcome the error. In either case, just saying “there’s been an error” does nothing but frustrate your user. Take the time to craft error messages that actually improve the user experience and you’ll have happier users.

5. Pretty matters

This is something a lot of app designers could learn from web designers. Now, granted, there are plenty of pretty and useful apps out there. But there are also a lot of apps that have great features but are incredibly ugly and poorly designed.

App designers need to think about how they can better design the GUI of their app, rather than just using the default design scheme of the platform they’re building for. Sure, the built-in GUI elements aren’t terrible in some cases, but they’re also pretty generic. They’re not going to help your app stand out from the thousands of others in the market. Even worse is the number of apps out there that use a custom design that’s actually worse than the stock GUI.

Awesome Note is one app that definitely gets that an attractive design is important for a good app.

Consider the functions of your app and who your users are, and then think of how you can use the design to make those features easier to use and improve the perception your users have of the app itself. Say, for example, that you’re creating a vintage camera app. Using the stock GUI does nothing to reinforce the idea that the camera app does anything different than the stock app. But if you add some vintage touches and elements to the design, you’re creating an experience that’s more enjoyable for your user. They feel like they’re using an app that’s different, not just the standard camera with a few extra bells and whistles.

6. Scalability is a must

This is something that web designers have down pretty well. We know that at any point in time, our website could suddenly see an influx of traffic and need to remain usable by a larger number of people. All it takes is a bit of content to suddenly go viral, or even just get one or two retweets or shares from influential people. And to an extent, it’s not that hard for a standard website to become more scalable (it’s mostly just a matter of choosing a host who can provide servers that will scale along with your traffic).

The other issue with scalability is predicting how users will use a site or service. With most websites, this isn’t as much of an issue. But with apps, how a user interacts with the app is paramount. A small number of power users who really stretch the capabilities of the app can cause issues for other users, or just have a bad experience themselves.

Apps can be much harder to scale than websites, depending on the infrastructure. Scaling purely for an increase in the number of users isn’t that much different than scaling a website; it’s just a matter of bandwidth and processing power. Where app scalability is more difficult comes down to how individual users end up using the app.

There’s been an interesting discussion on Google+ in the past week going on between Robert Scoble and Kevin Rose. Scoble is having issues with duplicate content (“noise”) cluttering up his feed, and was publicly saying that Google+ should come up with some kind of filtering system to help weed out all this noise. Rose argues that it’s only because Scoble is a “fringe case” user, and that most people won’t run into the same issues because they don’t follow thousands of people. The question remains, should a web app like Google+ (or an app for a mobile platform) be focusing on scalability for those fringe users, or just focus on the more “average” users? It’s a debate that’s unlikely to be solved any time soon, but it is something app (and website) developers and designers need to be aware of and decide how they want to handle on a case by case basis.

Conclusion

Whether you’re a web designer or an app designer, there are things you can learn about good design from other spheres of design. Look beyond your own narrow focus at how other designers, in other fields, are handling similar problems, and then adapt those ideas to fit your own challenges.

Written exclusively for WDD by Cameron Chapman.

What do you think? What other lessons can web and app designers teach each other? What lessons do both types of designers need to learn, and where can they learn them? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

Over the last few months, I was fortunate enough to be given the opportunity to fulfill this dream.

I was about to write this post up over on my blog but Walter very kindly invited me to share this case study with the much larger audience here on Webdesigner Depot and across the Smashing Network.

I’m no Elliot Jay Stocks and I certainly don’t claim to be, so when Virgin Atlantic got in touch with me back in November I was surprised, humbled and extremely enthusiastic at the prospect of working with the company on a new blog for the “vtravelled” website.

Many people have since asked me why Virgin chose to work with me in particular. The answer is that they found me on Twitter, enjoyed my blog posts and, most importantly, liked my work. This won’t end the debate about the “value of Twitter” for some people but it certainly has without a shadow of a doubt for me.

The Beginning

In November 2009 vtravelled’s editor, Maxine Sheppard, got in touch to ask if I would be available to design and develop a complete blog for the vtravelled website (Virgin’s new online travel community and web app). Meetings were arranged and after a week or so I got the green light for the project.

I’ve done some work for big companies before, including Ubisoft, but this was really my first time getting into the corporate culture of the industry. To be totally honest it’s really not as scary as people make it out to be, though I can imagine that there is some variation in people’s experiences.

Virgin Atlantic has managed to put together a truly great team at vtravelled; as a result, not only was the company very easy to work with but it was great fun, too.

The building is as wide as it is long, it even has its own set of traffic lights.

Bizarrely, I think the most daunting (perhaps awe-inspiring) part of the whole process was going to Virgin Atlantic’s headquarters for meetings.

Something about driving up to a building that can (and does) physically contain both offices and actual aeroplanes is pretty special. The entrance to the building contains the company’s own gift store, and after a long walk you end up in the atrium, which is directly adjacent to large sections of Boeing aircraft that are used to train cabin crew.

At the first meeting I asked the head of vtravelled, Lysette Gauna, (as a joke) if all of the design awards lining the vtravelled office were hers. The answer was, “Yes, but I keep most of them at home.” D’oh! Time to be really afraid.

The Brief

The vtravelled offices are bright and creative and the whole back wall is a chalk board!

The brief was fairly straightforward: vtravelled is a big web application and community for travel lovers but it’s still being actively developed. The team needed a way to put out editorial content and engage with users on social networks. A blog was the obvious answer.

I wanted to make sure that I really nailed the direction it was looking to go in on the design side, so I came up with a slightly different implementation of using mood boards; I called them Moo’d cards. The idea was simple but effective: I took 100 samples of great design work that I’d collected and printed them on 100 MiniCards from Moo.com.

Some of the Moo’d cards that were used.

We looked through all of them during the kick-off meeting and eight cards were selected to represent the sort of style that the team was looking for to appeal to vtravelled’s user base.

If you haven’t tried this technique, I highly recommend it; It’s a great way to discover client expectations of design. I’ve since released all the source files for the Moo’d cards as an OpenSource project, including web and iPhone versions.

Once we established an overall style (minimalist, in keeping with vtravelled branding but creative and different from the main website) and an overall direction (a magazine-style blog, with plenty of avenues for user interaction), it was up to me to get started.

The Design Process

The design process when working with a large company is pretty similar to any other: starting with wireframes, then developing mockups.

The main difference comes at the feedback stage: two or three people had to review and sign off at each stage, at which point they took much larger issues into consideration. For example, Virgin is particularly sensitive to how its brand is portrayed. Anything the company does has to fit in with its morals, standards and qualities.

After establishing the structure of the website, it was time to move on to actually creating the design.

This was about a 30-hour process (for the home page) which moved through several interesting phases leading up to the end result. Luckily, in anticipation of writing this post, I recorded a screencast of almost every minute of design time and compressed it into a three-minute video.

All in all, the design process took place over about six weeks.

This video was created with ScreenFlick ($25) for Mac OS X, recorded at 1 frame per second, and edited in iMovie.

The Development Process

Once final-signoff for the design had been achieved, the development process began and lasted approximately another six weeks.

Virgin Atlantic uses IE6 in its corporate offices, so this was a big consideration in developing the front end. The website had to degrade gracefully enough to accommodate this browser so that it was at the very least functional. Once again, because of the great team at vtravelled, I was also permitted to use progressive enhancements with CSS3 for newer browsers.

Turning the front-end code into a custom WordPress theme was the next step. There were a few special considerations here to make the website as powerful as possible.

I started with the WooThemes “WooFramework” to allow a high level of back-end customization but, in the end, it was modified and customized so much that the vtravelled blog pretty much ended up with its own custom system. It was important to take into consideration that a lot of people would be administrating the blog, so it needed to be as flexible as possible in all areas.

Finally, the theme needed strong pagination and light-hearted error messages on the 404 and search pages that would reflect the friendly nature of the brand.

A Little Trickle Tweet

The first sketch of the Trickle Tweet plugin.

I’m pretty handy when it comes to writing PHP for WordPress but when I need something totally custom built, there’s only one guy I turn to: my partner in crime, Japh Thomson.

During the design phase, I had sketched out an idea during a meeting that went over really well with the vtravelled team. The idea was to use the Helvetica-Man branding that existed throughout the vtravelled website and social media profiles for a stream of live conversation about travel.

The final version of the TrickleTweet plugin.

Japh had already developed a piece of code with the Twitter API, called Trickle Tweet which allows you to search for any term on Twitter and view a live (up-to-the-second) stream of the latest mentions of it.

I was permitted to sub-contract Japh and he was commissioned to modify his script to become a completely custom WordPress plugin for vtravelled. This has turned out to really be the piece-de-resistance of the website.

Launch and Conclusion

Launching a website for a big company is a little different than a normal launch. I had to liase with vtravelled’s development company fo proper server settings and to remove password protection to the sub-domain at the right time.

I had to liase with the advertising company to ensure that the right ad codes were installed, and I had to go through a mad 24-hour period of beta-testing, bug-fixing and reviewing performance.

In the end, we soft-launched the blog at about mid-day on Tuesday and started the announcements and press releases a few hours later. Fingers crossed, nothing has gone wrong so far and the website has gotten a very positive response on Twitter, which was reflected in the blog’s day-one traffic levels and some other features around the web.

As with any website, there are improvements can be made and features will develop over time, but I’m pretty pleased with how v1.0 of the vtravelled blog has turned out.

Working with Virgin Atlantic has been one of the absolute highlights of my career so far, and I’m very pleased to be working with the company again at the moment on a few other pieces of design work.

I still suck at estimating time though; we initially thought the whole blog design and build would take four weeks!

Credits

• Post image by sebas
• Virgin Atlantic HQ photo by MilborneOne
• vtravelled offices photo by Maxine Sheppard
• New York photo courtesy of vtravelled
• All other photos and screenshots by John O’Nolan

Written exclusively for WDD by John O’Nolan.

Please share your comments about the design and the process below…

Never Ending WordPress Business Bundle – only $14!

Are you eager to start using them, but don’t know where to start?

Although many of the new properties are not yet “official”, some browsers have already implemented many of the features of the coming CSS Level 3 specifications.

The problem is that many browsers—most notably Internet Explorer—have not.

The trick to using these new CSS3 features is to treat them as design enhancements.

A design enhancement (which I discuss in my new book Speaking In Styles: The Fundamentals of CSS for Web Designers) is any flourish you add to your site designs that increases its visual appeal without diminishing its usability if the style is not rendered.

This can be a tricky call, with there being a fine line between enhancement and not diminishing usability:

• Design Enhancement Example: Using border-radius to round box corners, creating a more appealing design. However, if the corners are not rendered, the site is still just as usable.
• Example of Design Diminishing Usability: Using an RGBA color value in the backgrounds of overlapping elements that all need to be visible, expecting the upper elements to be semi-transparent. This will make it impossible for some people to use the site, thereby diminishing the page’s usability.

Let’s take a look at 5 different CSS3 properties that you can start playing with right now, provided that you always keep in mind that they should only be used to enhance your design, and not be relied upon for site usability.

This is the original design, before applying any CSS3 design enhancements

1. Transparent Colors

Supporting Browsers: Apple Safari 4, Firefox 3.0.5, Google Chrome 1

RGBA allows you to control the opacity of a particular color fill, whether it is for text, background, border, or shadow colors.

Setting the color transparency requires you to specify the color value using RGB notation—hexadecimal values are not allowed—with an additional A value being from 0 (transparent) to 1 (opaque).

rgba(0-255,0-255,0-255,0-1)

You should also include a simple RGB, or hex color value as a fallback for other browsers to use:

.topbox {
color: rgb(235,235,235);
color: rgba(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: rgba(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: rgba(255,255,255,0.65);
}

The good news is that there is also a fallback solution—at least for background colors—in Internet Explorer, which supports transparent colors using a filter and conditional styles:

Note: Due to the fact that WordPress could not display the above code in the content of this post, it has been included as an image, therefore you will need to type this code manually.

2. Rounded Corners

Supporting Browsers: Apple Safari 3, Firefox 1, Google Chrome 1

Border radius sets the curvature of each corner of the box, as if there is an imaginary circle on the corner with a specific radius (r):

border-radius: r;

Although border-radius will be a part of the coming CSS3 specification, both the Mozilla Project (Firefox) and Webkit (Safari and Chrome) implemented their own versions which have to be included for maximum cross-browser compatibility:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

You can also set the radius for the corners individually:

3. Text Shadows

Supporting Browsers: Apple Safari 3, Firefox 3.0.5, Google Chrome 1

Add a shadow underneath any text, controlling the left/right and up/down offset, as well as the color:

text-shadow: x y blur color;

You can combine the text shadow with a transparent color to control the darkness of the shadow:

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

You can also include multiple text shadows just by repeating the values separated by a comma:

text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 
15px -4px 3px rgba(255,0,0,.75);

4. Box Shadows

Supporting Browsers: Apple Safari 4, Firefox 3, Google Chrome 1

Adding a drop shadow to any box on the screen follows the same format as adding a text shadow:

box-shadow: x y blur color;

Just like text-shadows, Mozilla and Webkit have implemented their own vocabulary in advance of the final CSS standard:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

You can add multiple shadows just by including multiple values separated by spaces:

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 
15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);

5. Multiple Backgrounds

Supporting Browsers: Apple Safari 1.3, Google Chrome 1

Including multiple background images in a single element simply requires additional sets of values to be added to the background properties, separated by commas. You should include a single background image as a back-up for other browsers:

background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

SPECIAL BONUS

Rotate Anything!

Supporting Browsers: Apple Safari 4, Firefox 3.5, Chrome 1

Although not even a part of the CSS3 specification yet, Webkit has implemented its own transformation property, which Mozilla is following suit with. Transform can include a number of different value types, but one of the most intriguing—and useful as a design enhancement — is rotate:

-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);

Appearance as seen in browsers that do not support CSS3 (e.g. Opera 9)

See the live working example (requires Safari 4+, Firefox 3.5+, or Chrome 1+)

Jason Cranford Teague is the author of Speaking In Styles: The Fundamentals of CSS for Web Designers. Get it now from Amazon for 27% off the cover price.

Do you use any design enhancements in your websites? Please share your examples with us!

Never Ending WordPress Business Bundle – only $14!

Clean markup and building with web standards not only helps you do this, but will save you both time and money in the long run.

As the web expands, so the technologies that it uses grow with it. While HTML has been around for a long time, it has acquired quite a few sidekicks along the way.

First Javascript, then CSS, XML and later AJAX. Wide adoption of HTML 5 is just around the corner, with Firefox, Safari, Opera and Chrome already enjoying nearly full HTML 5 support (the slow kid on the block, Internet Explorer, is lagging behind as usual).

In this article, we’ll review the basics of web standards, what they are, what they mean to you, and some important tips to help you deal with this important and often neglected issue.

What Does it Mean to Have “Clean” Markup?

Simply put, it means free of clutter, standards-compliant, and using the tags and structures of each language for their intended purpose.

Clutter-free HTML makes sparse use of tags, eliminates the extraneous and accomplishes its task with as little markup as necessary. It avoids needless attributes, such as inline CSS, and leaves each document structured and organized.

Likewise, clutter-free CSS should avoid repeating itself, take advantage of inheritance (remember, CSS stands for Cascading Style Sheet) and re-use classes whenever possible.

Standards-compliant means that your pages validate with the standards laid out by the W3C for HTML, CSS, and XML. It means using the free W3C validators to check for errors, correcting them and testing again until you’re as close to 100% valid as possible.

Why Should I Care? It Works, Isn’t That Enough?

Every project has an aggressive deadline and every client wants their site launched yesterday. So as web developers and designers we are under constant pressure to work faster and more efficiently.

It’s easy to fall into the trap of thinking fast must mean sloppy, and that clean, standards-compliant markup takes more time. It’s easy to just say “it works and that’s all that matters.”

Sure, it works… for now, for you. What about next year, or three years from now? What about new browsers? What about accessibility?

Do you really think that the major search engines will adhere to special, sloppy coding methods? They’re finicky, and if you are not standards compliant you’re kicking your search ranking in the face.

What about the next poor sap that has to edit these pages you’ve created? What happens if you get hit by a bus, quit to go backpacking in Alaska, or get abducted by aliens? Someone else has to pick up where you left off and he’ll be looking at your code, trying to make sense of it. Will it be easy, or will it give him a headache and make him curse your name?

Do it right the first time. This isn’t just some annoying, fatherly life-lesson. It will actually save you both time and money, and make those that follow you have an easier time of things.

You may think it’s faster to just drop in the inline CSS instead of properly adding a new class to your style sheet. And you may think it’s faster to toss in whatever HTML you can spit out without considering the overall document structure.

When it comes time to update that document later or redesign the whole site, you’ll spend much more time making up for sloppy code than you ever saved by rushing through it in the first place. When you create a new style sheet, those pesky inline styles you hastily added will come back to haunt you and you’ll spend hours hunting them down and stripping them out.

Extensibility, Accessibility, Translation and Future Proofing

Mobile browsing is growing like Godzilla on atomic-steroids. Instead of being relegated to the jet-setting Blackberry addicts from 5 years ago, today everyone is using their phone to surf the web.

Assistive technology -screen readers for the blind and alternate interface devices for the handicapped- is common, and you don’t want to lose a sale or alienate traffic just because you didn’t take that into account.

Your site is likely to be translated into a half-dozen languages as readers from around the world find your content. Thanks to the Internet Archive, Google’s cache and others, pages you publish today will be around for a long, long time even after they’ve been removed from your live site.

Clean markup and standards-compliance will go a long way to ensure your sites work in each of these scenarios.

Do’s and Don’ts:

• DO use tags as they are intended. For example: h1 is the first top-level element on the page, then h2, h3 and so on. There should only be one h1 tag per page.
• DO name your CSS classes and IDs using meaningful terms, and ask yourself if someone else will know what a class/ID does from its name alone. Which naming convention makes more sense: #box12 or #comment-footer?
• DO make good use of CSS inheritance. For example: if you set a font on a container, you don’t need to specify it again on every child element unless that child element needs to use a different font. This will keep your style sheets lean and quick to load.
• DO validate your HTML, CSS and XML and correct as many errors as possible. Pay attention to the warnings generated as well.
• DO double check WYSIWYG generated code and clean up as necessary. They’re notorious for spitting out bulky, bloated markup with loads of unnecessary, invalid junk.
• DON’T inject inline styles or extraneous tags and attributes just because you’re in a rush.
• DON’T settle for “it works.” Just because a page renders it doesn’t mean that the markup under the hood is standards-compliant, problem-free or search engine friendly.

Further Reading & Resources

• Designing With Web Standards: the infamous book by Jeffrey Zeldman
• W3C Validation Engines: XHTML Validator, CSS Validator
• W3C Tips for writing clean markup, among other things.
• Introduction to Web Accessibility
• Web Standards Project – information on web standards, upcoming trends and more resources.

Written exclusively for WDD by Jeff Couturier.

Do you follow web standards in your websites? Why or why not? Please share your comments with us.

Never Ending WordPress Business Bundle – only $14!