As with any profession, there is a certain amount of knowledge that cannot be taught, but must be acquired through direct experience.  In most cases, it’s not that this information is not capable of being taught.  It’s just most people probably wouldn’t see the value in the knowledge until they were familiar with or had somehow encountered a specific situation in which the knowledge was needed to successfully complete the task at hand.  In the case of web design, much of this knowledge pertains to various tips and tricks regarding workflow improvements, validation of code, and debugging of websites.  Many of these problems result from having to design a site to display correctly across a handful of browsers and versions.  To many web designers’ delight, both Firefox and Chrome embrace the open source initiative and a large community of developers provides a steady flow of new plug-ins, add-ons, and tools, free of charge, that address these specific issues.

Firefox

Being that Firefox is perhaps the oldest and most widely used open-source browser, Firefox takes the cake for the largest number of plug-ins and add-ons available to its users.  The add-ons have a variety of purposes which range from social networking, simplified bookmarking, and even language support.  My favorite category however is the group of add-ons that relate to web development.  Firefox’s website shows the current number of web development add-ons to be over 1,100 strong.  Many of these add-ons can greatly help your performance and efficiency when designing a site.  Three of my most used plug-ins for Firefox are:

Firebug

Firebug has come to be one of the most popular tools used by web designers.  Its popularity can be attributed to its ease of use and the large variety of features it offers designers. One of the best uses for Firebug is for locating and fixing the little bugs, whose source seems to elude designers.  Firebug allows designers to quickly inspect HTML and modify style and layout in real time.  It has what is arguably the best Javascript debugger available for any browser.  In addition, its analyze feature gives designers the ability to look at detailed measurements of a site’s network activity.  And last, but not least, it has a console log which allows you to send messages to the console direct from your webpage through Javascript.

HTML Validator

This tool is amazing!  As an employee of a company who continually preaches the importance of W3C compliance, the HTML Validator has helped me out immensely with keeping my code cleaner and ensuring that every website I design complies with W3C standards.  This is important for many reasons, one of which is to make sure I’m not causing errors with simple syntax errors. It has a very easy to understand interface that directs you to the specific portion of the code that may be causing the errors.  Any error that is discovered is explained in detail without having to visit W3C’s website. Right now the only drawback with the HTML Validator plug-in is that it does not yet work with HTML5.

Web Developer

The Web Developer add-on has tons of useful features for aspiring web designers and developers.  It’s non obtrusive and easy to use. This tool adds a menu of options and a toolbar for inspecting and debugging webpages.  When paired with Firebug, the Web Developer add-on can really help round out your development skills.

Chrome

Out of the three major browsers, Chrome tends to be my browser of choice.  Based on a webkit framework, Chrome appeals to designers because its support of the latest functionalities, like HTML5 and CSS3.  And of course, its speed is hard to beat.  Just like Firefox, Google Chrome fully embraces open-source and has a thriving community of developers to prove it.  Although there are many useful add-ons aimed at designers, one of my favorites is:

IE Tab Classic

IE Tab Classic is a nifty little tool that allows users to run Internet Explorer (IE-7) inside of a Chrome browser.  I use this add-on for browser testing.  Of course it is best practice to have a real copy of IE-7 for tried and true testing, but this is a great substitute if the machine you work from does not have access.

Internet Explorer

Internet Explorer is the bane of most designers’ existence.  Their unwillingness to support emerging functionalities or open-source initiatives leaves many designers with a sour taste in their mouth.  Despite these problems, recent statistics show that Internet Explorer is still the most popular browser.  And so, as designers, it is our duty to ensure that our designs display correctly on all versions.  Even without an open-source community backing them, IE has managed to produce a few helpful tools, with my favorite being:

IE Web Developer Toolbar

One of the best tools for helping designers find and debug problems is Internet Explorer’s Web Developer Toolbar. It has a lot of unique features, like the ability to directly edit DOM elements to test problems. You can even test and inspect JavaScript to help explore variable attributes. And maybe most importantly, since this is one of the biggest problems associated with IE, is it enables you to view how your webpage will degrade in IE with compatibility viewing.

So why aren’t we attempting to be more progressive when we build web sites? The idea sounds simple on paper, but practicing progressive thinking when creating for the web requires patience, objectivity, foresight, and most importantly, knowledge.

If you are in the industry, CSS 3 and HTML 5 may come to mind when you hear the word ‘progressive’. These advancing technologies are some of the most popular discussion topics when it comes to the future of web design, but we can’t forget that the practice of implementing progressive techniques is not limited to the tools we utilize; it stretches into every aspect of the project from conception to execution.

When we are planning and creating web sites, we must move past old habits and traditions that characterize the early days of the web. The web has become a necessity in many people’s lives because it has rapidly grown and matured from its experimental childhood. In order for the web to continue to advance and become more useful, we cannot solely become content with what we have already accomplished.

That’s where progressive thinking and action plays a vital role. Designers should always push the web sites and copy we create in a forward direction. This involves, but is not limited to constantly rethinking about how sites are planned, built, and used. The web is constantly shifting and changing, we must be able to adapt along with it.

One of the greatest changes to the web in the future will likely be the implementation of semantic web technologies. The semantic web is a term coined by World Wide Web Consortium (W3C) director, Tim Berners-Lee, which describes the methods and technologies that will allow computers to understand the information the Internet displays as humans do. This semantic web is a vision of information that is understandable by computers, so computers can perform more of the tedious work involved in finding, combining, and acting upon information on the web. This may sound extremely complicated, but many of the technologies proposed by the W3C already exist and are currently being used in one way or the other. When looking to the future, web designers should consider how large leaps such as the semantic web will affect their designs.

The key concept to progressive design is to cater to the latest methods available while remaining backwards compatible with older methods. This applies to every step in the project from usability testing to coding. For example, if you are implementing a new usability technique in your project, do it in a subtle way that experienced users will catch on and benefit from your practice, while less-savvy users will not be impeded by your changes.

Above all else, educate. It is the greatest and most important role for someone who creates for the web. Progression is impossible without education. Informing others of where the web is going, allows us to continue trying new, exciting ideas. Because of those who were willing to look ahead and face new challenges, the web has evolved by small, rapid changes that continue to push the movement forward.

Do you ever grow tired of seeing the uninspiring, cookie-cutter site designs that seem to be so prevalent on the web these days? Don’t you wish that there were somewhere or someone you could consult to find the next, game-changing web design trend? Believe it or not, this somewhere may actually be in your bathroom. Confused? Let me explain.

Walk into any American household and chances are there is a basket full of magazines and other reading material in the bathroom. Web designers rarely consider using this print material for inspiration because of the inherit differences between the two mediums. Truth be told, these stacks of magazines are an absolute gold mine for creative inspiration. Print design and web design share many commonalities in their core principles; however, it is absolutely vital that web designers understand the differences between the two mediums before drawing any inspiration from them.

Let’s use an analogy to point out one of the major differences. If we were to compare the two mediums to animals, I’d say print design is most comparable to the nimble-footed hare, whereas web design more closely resembles the lethargic tortoise. The point I’m trying to make (Keyword being “trying”) is that the web tends to fall slightly behind on some design trends because of the time it takes to produce a webpage. This is not to say that all sites are outdated, but print gives web designers another place to look for cutting-edge ideas without having to worry about the compatibility issues that exist when designing for multiple browsers.

Page layout in print design is also vastly different from web sites’ standard layout. Twenty years ago, web designers were limited to creating basic, hierarchical table structures in HTML. Thanks to the utilization of new web technologies and standards such as CSS, Flash, and Flex, we have seen web design shift towards designs that more closely resemble traditional print ads. Despite the resemblance, print and website design are not the same. Designing a website that is identical to an ad you just ran in your local newspaper will never be considered a best practice. Regardless, I think it is fairly safe to assume that we will see web design principles continue to evolve towards their print counterparts.

Lastly, web typography creates a handful of additional concerns that don’t apply to print design. As web designers, we have to worry about screen resolution and readability, which is a concept that is likely completely foreign to print designers. Serif fonts are easier to read with printed materials, while sans serif fonts are better for screen viewing. Web designers also have to consider the circulation of their font. Just because your computer has a font downloaded, does not always mean that the majority of your users have it as well.

Once you identify these differences, it becomes quite simple to draw inspiration from print design.

Some magazines I look at for inspiration are HOW

PRINT

Communication Arts

and Baseline.

These magazines have proven time and time again to be invaluable resources.

Print design is a medium that is certainly exploited by other print designers for inspiration, but following it as a web designer, may leave you a step ahead of the competition. Next time you are lacking creative inspiration, don’t bother browsing the web. Instead, try settling down in a cozy recliner and studying your favorite magazine. And forget about the guilty-conscious nonsense – like the great Audre Lorde preached, “There are no new ideas. There are only new ways of making them felt.”

Drupal, Joomla, WordPress, and Expression Engine are all great content management systems, but deciding which is best to use for different sites and clients can be difficult. To ensure you make the most informed decision, we’ll begin by examining the strengths and weaknesses of each system.

Drupal – Drupal has a great deal of power out-of-the-box, and a large library of add-ons from its community. It contains a number of robust features for sites that need high functionality. Drupal also has a large list of pre-installed modules that can be easily activated by simply turning them on. Ubercart, an e-commerce module accessible on Drupal, is fairly intuitive. For this reason, Drupal is a good choice for smaller sites needing e-commerce functionality.

Now the downside. Because Drupal is a large content management system, it is very cumbersome. You may need to strip the CMS of unnecessary nuts and bolts that can bog down your site. The learning curve for Drupal is also fairly steep. When you first begin using Drupal, the task of trying to figure out the quirks for the various template files, and using hooks and function overrides, can be overwhelming.

When it’s all said and done, Drupal holds a significant amount of power and owns a strong community of development for modules. If you can wrestle it into the structure you need, Drupal can be a great tool for controlling your site, while making everything easily modified and accessible. When Drupal 7 is finally released, we may see some critical changes in relation to the robustness and missing functionality of the current version, making Drupal a more advanced CMS option.

Joomla – This open source CMS has come a long way recently, recovering from a long standing reputation of having a very low performance level. Joomla, like WordPress is easily themed, but has a very different approach to how its templating systems are built. Joomla is mostly based on overriding files, based on folder structure, keeping you from editing the main template files, similar to Drupal. WordPress on the other hand, will allow you to start your template from scratch, and use hooks to pull in the other functional content you need.

While Joomla is growing fast, it currently lacks imperative features that impede its chance in the race. Legacy support for its extensions is becoming an issue by means of having to make sure the right versions are compatible with what you are working with. However, with the newer version of Joomla on the rise, we may see extensions that don’t rely on supporting a legacy project, as well as modifications for deficient features.

WordPress – WordPress is a great CMS. It is incredibly simple to understand, has strong community support, can be easily skinned, and presents more plug-ins than you can handle. I would highly recommend it for really simple sites that don’t need complex functionality. But even with more complex functionality, once you are familiar with WordPress, adding in your own custom functions can be easier than many other content management platforms. Since WordPress is built mainly for blogs, its best use is for simple sites. Its templating system and admin interface is intuitive and most clients don’t have any problems figuring out how to use the basic content features. But since it is so specialized, it cannot be easily compared to the others as a “full CMS”. The main drawback of WordPress is the difficulty of adding complex functionality, such as e-commerce.

Expression Engine – Expression Engine is by far one of the strongest CMS’s available; it has a vast community following and technical support. With tons of modules available and its growing popularity, this CMS can be considered great. One of Expression Engines strengths is that it is not an open source community driven project, so its updates are not as frequent, providing a more stable platform for developers. This also means your personal site development can go a bit more smoothly because of their strict guidelines for how modules are put together. This CMS also has great security, but Expression Engine is not built to build the web page for you. You have to start from scratch and know exactly what you want; you are required to put it together yourself. However, its biggest catch is the price; you have to pay to get this extra support and functionality.

When choosing which content management platform to build you site with, best practice says to start with the goals and objectives of your site. If one of your goals is to sell merchandise on your site, than it is likely that Wordpress is not the solution you require. Compare the goals of your site to the strengths of the individual content management systems and I’m confident that you will make the correct decision.

“Why should my company’s website utilize a CMS?”

You may have found yourself pondering this question at some point at your current organization. To address this question intelligently, we need to first lay down the basic foundation, starting with a definition. What is a CMS? CMS stands for Content Management System. According to Wikipedia, a Content Management System (CMS) is a collection of procedures used to manage work flow in a collaborative environment. Honestly, Wikipedia’s definition doesn’t do much for me, as it doesn’t provide any more information than what the actual word implies. A better definition would describe a CMS as a computer system used by a Content Manager to manage the creation, modification, and organization of content from a website without the need or expertise of a webmaster.

So what are the benefits of using a CMS to manage your website? It turns out there are many!

• Intuitive UI – The obvious benefit to content management systems is that it allows individuals, who may have little to no experience with HTML or code, to efficiently manage the content of a website. Content managers can effortlessly change an image, replace text, and even add a new page with just the click of a button. Although we would prefer to manage the content on your site, given our expertise in online marketing and search engine optimization, content management systems allow us to hand back control of the website to you with complete confidence that the website will succeed.

• Customization – No two businesses have the same needs and luckily, CMS’s are easily tailored to an organization’s requirements through the use of various plugins and add-ons. Plugins are available for a large variety of tasks, but some popular categories include search engine optimization, E-commerce, caching, and web forms.

• Wide Community Support – At some point in time, your website is bound to encounter some problems. When something does go wrong, content management systems offer great community support. Millions of individuals around the world use CMS’s to manage their websites and it is very likely that someone else has run into the same problem.

• Restrictive Access – Let’s face it, while CMS’s make editing content very easy, there are still some people you may not trust with that responsibility. CMS’s allow the content manager to assign varying levels of privileges to members in his/her organization. While some may have full privileges, you could potentially allow individuals only certain abilities like editing a specific page.

• Decentralized Maintenance – Content managers can edit the site through any browser, on any computer, with an Internet connection; therefore you are not tied to your server. Having this capability is a great feature, but is often overlooked. Another byproduct of decentralized maintenance is increased security. Since the website is edited through a CMS, the server is never directly accessed.

There are essentially two trains of thought when implementing a CMS into your website. Developers can choose to build upon existing content management platforms, adapting the product to fulfill the needs of the client, or they can choose to develop a custom solution, where a CMS is built from scratch. Most don’t choose the custom development route but instead choose to develop the system by customizing one of the 3 popular content management platforms: Wordpress, Drupal, and Joomla. Each CMS has its own strengths and weaknesses, but for now, we’ll stick with just introducing each system to you.

• Wordpress – Although most identify Wordpress with blogging, Wordpress is in fact a very powerful content management platform. It behaves and looks very similar to the Wordpress blog UI, but adds oodles of new functionality. Content managers are able to easily extend the functionality of the CMS by integrating open-source plugins made available by the Wordpress community.

• Drupal – Drupal is a free software package that allows a content manager to easily publish, manage, and organize a wide variety of content on a website. Drupal has great built-in functionality, and when combined with the many free add-ons available through the Drupal community, content managers’ are enabled with endless possibilities for customization.

• Joomla – As with the other two, Joomla is an open source solution which enables content managers to build websites and powerful online applications. Joomla is highly customizable and thousands of add-ons are available in the Joomla Extensions Directory.

I hope this has helped clear any confusion as to what a content management system is and shows the importance of utilizing a CMS for your company’s website. Next week, we’ll dive further into the topic and explore the individual strengths and weaknesses of Wordpress, Drupal, and Joomla.

There has been recent debate about whether a web designer should know HTML and CSS. This isn’t a blog post to prove either side right or wrong; both have their own advantages and disadvantages. This post is about personal advantages of knowing HTML and CSS, and being only once small voice in a larger conversation. I happen to be one of the individuals who learned code before developing my design skill set. I encourage you to catch up on the topic as there are some great points being discussed.

Finding Beauty in Code

I’m one of those eccentric designers who is able to find beauty and appreciation in the code I write. Writing semantic, standards compliant HTML, and intelligent CSS is as important to me as jumping into Photoshop and creating the best mockup I can. I’m always conscious about the next step in my workflow, and that statement is no more prevalent than when I am inside Photoshop painting pixels on the screen.

As my mockups come together in Photoshop, the code that will breathe life into them, and transform them into an actual website, livens. Being able to understand the limitations of your medium while designing for it is the most important advantage of knowing how to code. Designing with markup in mind will provide you with final code that does not have to bend or break to accommodate your mockup. The code remains clean, standards compliant, and accessible.

Drawing Inspiration and Ideas

Not everything a website does can be represented in a mockup; it lacks interactivity and functionality. Having a strong understanding of the capabilities of HTML, CSS, JavaScript, and other languages, can help you look past the mockup and begin to design pieces of interactivity that usually only occurs during the coding stages.

I draw a lot of inspiration from these avenues, and they usually blossom into larger ideas. Had I not understood the capabilities of code that were going to be implemented for my design, I may never have touched upon them.

I Am a Web Designer

There’s one truth I stand by personally when it comes to my profession; in order to design for the web, I need to understand how the web works. I can build on this idea, but for the sake of this blog post, I’m narrowing it down to primarily HTML and CSS. This statement may not apply to everyone, but in my case, it makes me a better web designer.

The easiest way to explain the difference is by using examples of animation that you might have seen.

2D Animation Examples

• Bugs Bunny, Daffy Duck, Elmer Fudd.
• Snow White, The Jungle Book, The Little Mermaid.
• The Simpsons
• Family Guy
• South Park

2D animation is the traditional animation method that has existed since the late 1800s. It is one drawing followed by another in a slightly different pose, followed by another in a slightly different pose, on and on for 24 frames a second.

Traditionally these were put together in an amazing process where artists drew pencil drawings of every frame of film, then these images were painted onto clear plastic sheets called ‘cels’, and each of the thousands of handrawn and painted cels were photographed one at a time over a hand painted background image and those thousands of images compiled to run as film at 24 frames a second.

Today most 2D animation involves using computer software to one degree or another, from just digitally coloring the cels to be photographed in the traditional method, to doing every single element in the computer.

3D Animation Examples

• Toy Story
• Shrek
• The Incredibles
• Jurassic Park (the dinosaurs)
• The Transformers (the robots)

3D animation (aside from stop-motion, which really is a form of 3D animation), is completely in the computer. Things that you create in a 3D animation program exist in an X, Y & Z world. Instead of a drawing of a globe, I have a sphere that can actually turn 360 degrees.

3D allows you to do things that simply are not possible in 2D animation.

• 3D objects, once modeled, can be treated almost as a physical object. You can light it differently, you can move a camera to look at it from above, or below. In 2D animation EVERYTHING is drawn. “Moving the camera” in 2D means drawing everything from another angle. “Moving the camera” in 3D is simply dragging it to another position to see if you like it better.
• 3D allows you to create realistic objects. You can use textures and lighting to create objects that appear solid, and can even be integrated seamlessly into live video elements.

There are pros and cons about both methods. Which method of animation is best is based the specifics of  what a client needs, but like all animation it lets you do things that would be otherwise implausible or impossible.

Choosing the right colors for your web design is a decision that should not be taken lightly. Color is the first thing viewers notice on a webpage. It can evoke a variety of strong emotional reactions and each color can contain a different association. Although everyone’s experience and taste can vary greatly, there are still some basic tenants one can follow when working with color:

· Consistency - This applies not only to font and background color, but also to the images and other cursory elements. It would be awkward to have a black and white image on a site full of bright, colorful backgrounds. It is typically best to choose colors that go along with the company branding and it is important that the brand identity seamlessly fits into the design. Also, limiting the design to just a few main colors—2 or 3 main colors and 1 or 2 accent colors—is usually a good standard and helps to maintain the consistency. Too many colors can cause your design to become erratic and visually confusing to the viewer.

· Contrast – If you use colored copy, make sure that it contrasts well with the background to be easily legible. Stark color contrast is a powerful tool and can draw the eye, so make sure the most important elements have the most contrast in the design. Having muted colors for your title copy and a bright bold color for the body would be a poor use of contrast, applying viewer focus to the wrong element.

· Complements – Complementary color choices are also extremely important. And it’s not just the literal complementary colors that are key, but also colors that complement each other as an accent or highlight. There are many different types of color balances and every designer should be very familiar with color theory and its impact on design.

· Color Theory – Some designers feel that it is enough to just have a feel for the right colors and that color theory is unnecessary. While having a good eye for color can certainly help develop a good design, color theory is still important. It is important to know what types of emotions your colors will convey so that you cater to your target audience. Click here for more information on color theory.

Staying inspired can be tough. A great place to find new ideas for your designs is http://designmeltdown.com/. And, for the complexities of color theory and experimenting with new ideas, try kuler.adobe.com or http://www.colorjack.com/.

As web designers, we’ve learned one very valuable lesson: creating a design that pleases everyone is impossible and in attempting to do so, we lose sight of the project’s original intentions.

Design is naturally subjective, eliciting different emotions based on the individual viewer. In the early planning stages of any project, target audiences and goals are listed in order to preemptively remedy this problem. Unfortunately, these well-intentioned guidelines are often lost once the first pixel is placed on the screen. When the design of a site is viewed as nothing more than an aesthetic skin, personal opinion takes over and the design begins to lose its original intent.

Simply because we are the professionals does not mean we can expect clients to take our word for any design decision. Yet, blanket statements such as “I don’t like this color” or “that graphic is too small” do not improve the design and offer no real constructive criticism. The statements are ultimately empty and leave the designer wondering. Instead, we should encourage reasoning behind any idea or adaptation, thereby keeping the process objective and oriented toward the original goals. “I don’t like this color because it will not appeal to our target audience” and “that graphic is too small for the elderly who will be the majority of our visitors” are objective, informed statements that help the design in more ways than just aesthetic appeal. Problems are solved, not created.

We’re not just addressing how external assessments are made, however. We understand that there is always room for internal improvement. We should exercise problem solving oriented practices even more so than anyone else, setting an example that will lead to good design, productive relationships and better end results.