From the BlogSubscribe Now

Insightful Review of Flash CMS Options

A great review from 1st Web Designer…

Flash templates are getting more and more popular these days and though beautiful outside, they can be a real disaster inside. While most of the template companies state that their templates are easy to manage and update, customizing the ready-made template can be a tough task for you. How to ensure that you won’t have to dive into the flash code, Action Script or spend hundreds of dollars on a web developer to customize the template for you? This post is meant to give you a helping hand in the world of various flash templates and flash systems so if you consider creating your website from the flash template and want it to be real easy and affordable this post is for you.

First of all and if you have never seen Adobe Flash, do not try to convince yourself that you can manage it. Yes, you can probably learn some simple things from YouTube tutorials, but the flash templates of the new generation are much more than just a number or links, images and text blocks. So what’s the solution if you are a flash fan and dream of an awesome interactive flash template?

Flash Content Management System.

What’s a flash content management system or simply flash CMS? That’s a system that helps you manage your flash website without actual source files editing. The CMS based flash template usually consists of the 3 main sections: the design skin- that works like the shell for the content, the core- the codes and programmed functions, and the website content- that can be stored in the database or external txt/xml files. The content management system in simple words is an administrative interface where you can enter the content in a convenient, intuitive, friendly manner without going into any codes and this content will show up on the website in the real time.

So Flash CMS seems to be a really cool solution but can you build your website using its functionality if you are not a flash developer? The answer is obviously no. There have been lots of Flash CMS solutions reviews recently but they are useless for the regular users as most of us simply don’t know where and how to implement them. That’s why I have decided to create a review of Flash CMS templates solutions presently available on the market, the solutions that will allow you build your new flash website quickly, easily at without additional costs.

1. FlashMint CMS v3

 

FlashMint is a leading provider of Flash CMS Templates. They have CMS v1, CMS v2 and CMS v3 templates presented in their collection. While the first two versions of FlashMint content management system where pretty primitive, version 3 looks cool. There’s a nice intuitive admin area and the administration interface allows to perform the following basic actions:

  • Upload your logo; add company name;
  • Upload website background image;
  • Change company name and menu colors.

As every content management system FlashMint CMS v3 allows:

  • Create unlimited number of text pages;
  • Rearrange the order of the menu tabs.

FlashMint CMS v3 was developed mainly as the content management system for portfolios and photography websites hence the following features:

  • Unlimited number of photo galleries;
  • Photo controls for the website visitors;
  • Photo search;
  • Unlimited number of video galleries;
  • Slideshow creator.

Other modules presented in FlashMint CMS v3 include news editor, events editor, mp3 track editor, meta tags section. There are 30 beautiful flash templates to choose from, no special server requirements and no complicated installation. The system is not skin based, so every template is developed separately.

Template price: $204-215

2. ReadyPhotoSite Flash CMS

 

Initially developed for photographers community, ReadyPhotoSite CMS can be used to create any type of website, from business to entertainment sites. The product is available in 4 packages:

  • Basic- for business websites;
  • Creative- for photography websites and personal portfolios;
  • Ecommerce- for online flash stores;
  • Premium- includes the design .fla files allowing to make modifications not available from the admin area.

The modules presented in ReadyPhotoSite CMS include:

  • General website settings (logo, menu, copyright etc);
  • Meta-data manager;
  • Photo gallery (unlimited number of photo galleries);
  • Video gallery (unlimited number of video galleries);
  • Slideshow creator;
  • Mp3 tracks editor;
  • News section;
  • Events editor;
  • Password protected galleries;
  • Shopping cart and online store.

The pricing for ReadyPhotoSite websites depends on functionality. The basic package is $149, creative $159, ecommerce- $199 and premium package is $250.

The collection presently includes 10 templates and several new templates are added monthly. The templates do not require database to store info. All the texts, paths to the files and parameters are stored in the external XML files used by the system. The system is skin based but there are certain design restrictions applied for every template and thus changing one design to the other might be not a good idea. Deep linking technology makes ReadyPhotoSite websites search engine friendly and lets your reference the difference sections of your flash website as if it was simple clean HTML.

View ReadyPhotoSite templates View admin area demo

3. Fancy CMS

 

Fancy CMS is a new promising flash content management system that seems to be still in development. They have triumphantly launched their first template and promise more to come shortly. As a fresh developing product Fancy CMS might also be interesting for flash developers as there’s a beta version of Fancy Flash CMS Core available for free. One oops- the admin area is not available yet so if you decide to download the templates be ready to edit the info directly in the xml files.

Among the interesting features of Fancy Flash CMS are:

  • Rich content pages with 2-level menus;
  • Flash blog;
  • e-commerce shopping cart,
  • Option to change the pages design and layout;
  • Video, Image & Sound Galleries.

The system is skin based so you can easily change skins to newer design versions. At the moment the system is free.

Download Free Fancy CMS

4. FlashMoto CMS

 

Loved by flash developers the FlashMoto CMS has the widest range of functionality possible. There’s an option to edit the core of the system, add new modules and widgets and create separate projects based on the FlashMoto CMS. However when it comes to website management it gets complicated for most of us… since there are too many options available. Certain functionality limitations would guarantee that design look and feel remains stylish and professional but this in not the case when you can play around with almost every element and then can’t set it back to default position. Yet, we have to admit that FlashMoto CMS is a powerful engine, though (and in the consent of our theme today) oriented more on developers than end users. What’s really cool about this CMS is the Multilingual Control Panel supporting 12 languages.

Among the features of the FlashMoto CMS you will find:

  • Interface to update general settings like logo, menu, company name etc;
  • Ability to add unlimited number of pages in a rich WYSIWYG editing environment;
  • Media Library & Preload Item option;
  • News module, Video & Image Gallery ;
  • Video and MP3 player.

While the admin area works smooth I can’t call it intuitive though this can be a matter of time and getting used to things. People logging in for the first time to WordPress or Oscommerce admin area might be feeling kinda lost as well :)

The templates cost around $250 and are all designed in the up-to-date clean style which makes the offer even more attractive.

There’s an interesting fact that FlashMint and FlashMoto which are supposed to be competitors have recently signed an agreement where FlashMint will be developing templates based on FlashMoto CMS.

View FlashMoto CMS templates View admin area demo

5. Mint Editor

 

Mint editor is another flash website management product created by www.flashmint.com. This is not a standalone product or system but rather a management interface allowing to easily update info on the flash templates via simple admin area. While opened in Mint Editor, the template is represented as a structured combination of various flash components, with a separate set of configuration settings for each of them. The list of components include:

  • Audio gallery;
  • Image gallery;
  • Video gallery;
  • Slideshow;
  • Dynamic news;
  • Dynamic text page;
  • Contact section.

Mint Editor is probably the cheapest solution of that kind presented on the market. Mint Editor templates cost $50 and are hand-coded for a certain appropriate design.

6. AuroraFlash Site Builder

 

In simple words AuroraFlash site builder is your desktop flash WYSIWYG editor allowing to build fantastic flash websites without any special skills and within 30 minutes. The concept is very simple and the editor works as a candy. All you have to do is download the editor and auto install it on your computer in several simple clicks. After that the program will offer you choose the template to work with from the number of default designs and the interface will load.

The components presented in default free templates include:

  • Text pages;
  • News;
  • Photo gallery;
  • Contact section.

There’s a set of flash templates you can download directly from the website absolutely for free and use it for creating of your personal website, however if you plan creating a project for your customer based on AuroraFlash website builder be sure to read the licensing terms.

7. Yooba Flash CMS

Developer:

Yooba Flash CMS is a tool for creating simple flash animated websites in the Yooba environment. That’s a hosted solution so in order to manage your website you have to login to the membership area on the Yooba website. Before starting on the project you’ll have to prepare the design of your new web page and save all the elements as separate images that then will be uploaded to your Yooba interface. The nice feature about Yooba is that they offer simple website visitors stats.

The price of Yooba is somewhat high- €40 per slot a month and you have to build the design on your own. Yooba is not a CMS in the usual understanding however it allows to create animated websites with easy and without flash or any other special knowledge.

8. Wix Site Builder

If you have ever been looking for a free flash website you might have been on a Wix site and even considered using their builder to create your free flash website. Guys at Wix have a huge number of nicely designed templates and working with the Wix system is a real pleasure. It takes just a few minutes to sign up with them, choose the template and proceed to the editing interface. Editing the template reminds more of a fun game with big iconed tools :) You can change texts and fonts, you can add photos, videos and music and create nice galleries. You can also view your website online on the link like this one http://www.wix.com/adzyasan/anastasia and it’s also for free.

If you want more features than the free version of Wix allows you can sign up for a premium account (starting from $4.95/month) and use your own domain name, remove Wix ads and logo from your website.

9. TemplateAction Flash CMS

Developer:

According to TemplateAction team, TemplateAction website templates are fully customizable and editable via an extensive control panel. The admin area allows:

  • Rename pages, edit and format texts;
  • Add links, add/remove/change images;
  • Change the video background.

Compared to other Flash CMS system reviewed above, TemplateAction CMS doesn’t have an advanced functionality but it’s quite enough for a simple flash business or personal website. There are 17 nice templates presently available and the price is fair- $89 only. There’s a admin panel demo available on YouTube so you have a good chance to review the functionality before making your choice of the CMS based flash template and placing the order.

In conclusion I’d like to say that it’s only up to you what system to choose for creating and managing your flash website but let me give you some advice.

  1. Check the admin panel demo before making the purchase and make sure that it’s convenient for you. Don’t trust the words, test it.
  2. Think what features you need and what you don’t- you don’t have to pay for the stuff that you don’t need.
  3. Make your decision based on your template type. If you are a photographer- you’ll need photo and video galleries as well as your own domain name for brand recognition. Wix templates will work for a personal hobby website but you have to be more thoughtful when choosing a flash solution for your company business website.
  4. Avoid all the templates with huge/complex animations. This websites will not only work slowly but can make the browser and computer freeze.

Understanding Business Cycles and How They Relate to SEO

This is a really good article on SEO and business from SitePro News…

As the song by The Byrds goes “To everything – turn, turn, turn/ There is a season – turn, turn, turn/And a time for every purpose under heaven.” The same principle applies to Internet marketing – different aspects of Internet marketing campaigns run on different cycles. These business cycles have to be understood and accounted for when developing any SEO strategy, because they can directly affect the success of the campaign. While one company’s business cycles may greatly differ from another, especially when comparing B2B companies with B2C businesses, the bottom line is that you have to be aware of your company’s business cycles to more effectively measure SEO success.

There are three main types of business cycles a company should keep track of: the sales cycle, the conversion cycle, and the SEO cycle.

The sales cycle begins the moment a company gets a lead. It could be a phone call from a prospective customer or client, someone submitting an online form and so forth. Each business has to decide when they are dealing with a real lead that is worth pursuing. The sales cycle doesn’t stop until that lead has either gone cold or been successfully closed. Some leads may remain active for months as potential clients hem and haw over making the final purchasing decision. Depending on the complexity of the products and services your company sells (medical testing equipment versus office supplies, for example), your business sales cycle could take a few days or even up to a year to complete. E-commerce sites typically have a much shorter sales cycle since visitors arrived at that site with the driven intent to make a purchase. Typically, the more expensive and complex the product/service being sold, the longer the sales process takes.

So how does the sales cycle relate to a company’s SEO? Let’s say your company sells scientific equipment used in chemistry labs. Your average sales cycle from getting the lead to closing the sale takes about nine months. If it takes you six months to really ramp up your SEO activities (from on-site optimization to really working through a strong link building plan), you can’t judge if the SEO efforts are having any effect on your business until nine months after they are in full swing. You have to allow for your average sales cycle to occur, since that’s how long it takes to see ROI anyway. Deciding a few months in that your SEO campaign isn’t delivering any new leads is preemptive, and you can cut the legs out from under what could have been a very successful plan.

The conversion cycle is all about prompting website visitors to action. This is a common point of failure for a lot of websites, but B2B sites in particular seem to have the hardest time. What is the goal of your site? What actions do you want visitors to take once they find your site? A site has to lead visitors down a predetermined path and encourage them with the appropriate call-to-action. If the goal of a site is to get visitors to pick up the phone, there better be a phone number listed everywhere. Don’t make it hard for visitors to act or find the information they need to turn into a lead for your business. Offering demos is a great way for B2B websites to start a relationship with visitors and engage them to start the sales cycle.

Many argue that SEO shouldn’t worry about the conversion cycle, that SEO is just about delivering the traffic. They argue that it’s the website owner’s job to see that traffic gets converted into leads. But SEO professionals and marketers in general have to be accountable for every dollar of the marketing budget. They have to prove that SEO is worth the investment of time, money, and manpower. A good conversion rate is essential to proving ROI. Sites need to be built so as to not sacrifice the brand in favor of SEO, or SEO in favor of the brand. SEO and user-experience go hand-in-hand when it comes to conversion.

The SEO cycle is how long it takes for a site to start seeing their SEO efforts be rewarded with better ranking for targeted keywords in the search engines. A company’s SEO cycle ties into several factors: the level of competition, the past and current SEO efforts of competitors, and the room for growth available. Websites often find themselves facing two common scenarios when they are trying to determine their SEO cycle.

Scenario one: the competition is dominating the search engines. Even if you work in a small, niche industry, one competitor who incorporated SEO into their Internet marketing a few years ago has carved out a pretty sturdy place for themselves in the rankings. They have the trust of the search engines and own top ranking spots for industry keywords. If you find yourself facing this kind of scenario, be prepared to buckle down for the long haul. Your site is the new kid on the block trying to usurp the king of the playground.

Scenario two: what every site should hope for when they begin their SEO – no one is doing a good job! Regardless of industry size or level of competition, if no other company is dominating the online space, this is the perfect time for your company to seize ownership. If your site has been online for a long time (5+ years or so), it already has a good level of trust with the search engines. Even basic SEO tactics can help propel the site to the top spots of the SERP. This scenario also gives you more room to go after competitive industry keywords and win.

Business cycles vary from industry to industry, company to company. They depend on the type of product being sold, whether a site is B2B or B2C and the amount of competition in the field. But sales cycles, conversion cycles and SEO cycles are all critical components of any Internet marketing plan. They can directly affect the success of your SEO efforts and should always be considered when evaluating the overall outcome of your onlíne marketing campaigns. Failing to take them into consideration could mean you end up stopping a campaign just as it was starting to gain momentum.

Website Magazine

The most recent digital edition of Website Magazine is ready for your review!

The cover story for the April 2011 edition is “The Modern Elements of SEO” and addresses how opportunities presented by universal content and on-site optimization influence how sites are positioned on the search results pages and the tactics Internet professionals can employ right now. Also in this issue are helpful articles on producing Web video for optimal profits, current Web design trends, heat maps, live chat solutions, check-in services and reducing e-commerce fraud.

20 Photoshop Tips for Web Design

I love the .NET magazine. They have great content and tips from beginner to advanced designers and programmers. Below are some great tips from them regarding Photoshop.Advanced users can get value from this by brushing up on some must do’s…

– – – – – – – – – – – – 0 – – – – – – – – – – – – 0 – – – – – – – – – – – –

Being a web design hero isn’t about trendy effects, but sound design fundamentals and knowing your way around Photoshop, says Dan Rose

The phrase “I wish I were better at Photoshop” is uttered by web designers young and old. Yet there’s something inherently wrong with that statement. It implies that our proficiency in a software program would make us better designers.

The reality is that just knowing the basics of Photoshop is sufficient for web design heroics. What if we took a step back from adding noise and insetting text to evaluate our efficiency using Photoshop?

Too simple for you, Level 42 PSD Sage? Not your cup of tea, Fireworks Fanboy? I beg to differ.

1. Sketch first

Ironically, the most essential Photoshop tip doesn’t even involve turning on your computer. I can guarantee you’ll spend less time playing around with layout by doing some sketches. Buy a solid sketchbook or print out your own templates (http://www.raincreativelab.com/paperbrowser/) and go to town doing some rough layouts. Then translate those sketches in Photoshop.

You can really let those doodles fly with 4-up templates, with or without grids

2. Use a grid system

Alignment and relationship of size are two attributes your designs should address. Set yourself up with a grid system from the get-go. Most grid systems have PSD templates with guides for columns and gutters. Here’s a bunch: 960px978px1140px.

978.gs provides templates for multiple widths (mobile, small screen, roomy)

3. Turn on snapping

There truly isn’t anything worse than to be off by one pixel. Turn on snapping by going to View > Snap and then View > Snap to > Guides. If you’ve implemented a grid system, snapping to guides is genius. With less squinting at the screen, you won’t need those trendy designer glasses.

4. Organise your PSD

Is it a pain to name your layers and put them in folders? Sure. Most designers buy in to the logic that you’ll spend more time doing so, but there are reasons that’s not true. If you work by yourself, you’ll save time searching for things later on. If you work with others, you’ll be doing them a favour when they search. If you name layers as you go along, it’s not hard to keep up with it as opposed to doing it after.

It may seem like a hassle if you’re not used to it, but naming layers and using folders is what all the cool kids are doing

5. Master shortcuts

The key to Photoshop stardom is efficiency. It’s not just knowing how to do something, but how to do something quickly so that you’re using valuable time executing a function. Some specific shortcuts to know? Start with Save for Web [cmd+opt+shift+S], Image Size [cmd+opt+I], Canvas Size [cmd+opt+C]. Don’t forget Levels [cmd+L] and Hue/Saturation [cmd+U].

6. Be subtle – everything in moderation

As designers, we tend to discredit our audience’s ability to perceive the effect we’re trying to achieve. So our response is to add too much noise, make harsh gradients and use too much contrast. The perfect blend is when you use effects with some grace, and, more importantly, self control.

Add filters such as noise and drop shadows with ease as if barely using them

7. Utilise layer comps & smart objects

Unfortunately, Photoshop doesn’t have a great system for compositions such as navigation states. However, you can leverage Layer Comps [Window > Layer Comps] to make versions of layouts fairly well. Smart Objects [Layer > Smart Object > Convert to Smart Object] will compile multiple elements into a file that can be edited outside of your PSD.

8. Keep integral shapes vector smart objects

There’s nothing worse than going to “make the logo bigger” and realising you can’t because it’s a rasterised graphic in your PSD, or trying to resize a button only to find that it’s no longer a shape. The solution is to keep these shapes in vector format, and you can do that by importing them as Vector Smart Objects or converting them to Smart Objects before you rasterise them.

9. Use masks intelligently

Globalising masks makes for some sweet Photoshop efficiency. For instance, if you have five slider images in your design, group them and put a mask on the folder instead of each individual layer. It’s a far superior solution than sifting through 20 masks, not knowing which ones do what.

10. Refine masks for easy hair silhouetting

Who doesn’t loathe having to silhouette hair? Here’s a trick that works well on various sizes of images, no matter how crazy the hairdo. Make a rough mask of the person, then go to Select > Refine Mask (Refine Edge in versions previous to CS5). Play with the Radius and watch the magic unfold.

Frizzy hair? Fear no more. Use the Refine Mask tool instead of spending countless hours silhouetting by hand

11. Perceive drop shadows accurately

Piggybacking on the last tip, the sign of an amateur designer is when you see drop shadows far too dark. It translates that the object is under a spotlight. Probably not the case. Be sure to decrease the opacity, and better yet, use a colour that’s a dark hue of the background behind it instead of black.

 

12. Teach yourself the pen tool

It’s worth the time to get good at using the pen tool. It’s one of those things we tend to avoid, but if you want to pull off some crisp masks or add illustration to your designs, the pen tool is your weapon of choice. Brush up your skills with this tutorial.

 

PSDTuts has a very comprehensive tutorial on how to master the pen tool

13. Sharpen photos using high pass

Ready for some Photoshop Magic? So, you’ve received a low-res photo from your client, and it’s just too blurry to use. Duplicate the layer, then go to Filter > Other > High Pass. Choose something low (around 2.0) and then set that layer’s Blending Mode to Overlay. If it’s too crisp, decrease the opacity. Results may vary.

You might need to massage it, but High Pass with an Overlay can revive those crummy inherited bitmaps

14. Be consistent

Five different blues, and none of them are the one from the brand guide? Be sure to check the colours being used, especially when exporting images. Another handy tool for colour accuracy is 0to255.com, which provides hex values that arharmoniously lighter and darker of a given colour.

 

0to255.com is a brilliant tool by Shaun Chapman. Enter a hex value to see shades darker and lighter, all easy to copy

15. Don’t default to default settings

One of the hardest things to ward off is Photoshop autonomy. If you’re treating the Effects panel like a checklist of desired styles, you’re most likely not crafting their settings to a reasonable state. The default settings are generally harsh in order to show their appearance. Soften the amounts and change the angles.

You’ll know when you see a drop shadow whose settings haven’t been touched. Work those settings every time

16. It’s in the details

An integral part to perfecting your craft in Photoshop is to make your design “pixel perfect”. Go back through your PSD, looking for blurry edges on rounded rectangles or inconsistent line weights. It pays to take the time in Photoshop perfecting your layout (rather than in HTML/CSS).

17. Rewrite history

Isn’t it such a bummer when you open up the History panel and you need 21 steps back, only to see it stops at the last 20? Prevent that from happening again by going to Preferences > Performance and increasing the value for History States. You web design superheroes don’t need to use the History panel though, do you?

18. Personalise your workspace

Photoshop’s not the boss of you, pixelcrafter. If you prefer having your tools on the right and only your Layers panel open, do it. You can even change the colour around the canvas by right-clicking on it. Save your workspace via the menu in the top right of the application.

You can save your menus and keyboard shortcuts, as well as the panel layout by creating your own workspace

19. Organise your files

Much like naming your layers and folders, naming your files appropriately prevents much strife. Isn’t it hard to distinguish which PSD is the “latest” when they have descriptors like “NEWEST_round4.psd” or “FINAL_USE_THIS_ONE.psd”? Keep one PSD and be done with it. Archive the rest if you really need it.

20. Be original and fight trends

The good news is that we web designers have used Photoshop to create some beautiful techniques. That’s also the bad news, because we’re prone to copy one another’s new hotness. Photoshop’s a wonderful tool, but use with care. Just because you can put a gradient on something doesn’t mean you should. Experiment with the settings and start your own trends.

A Comprehensive Website Planning Guide

I have written many blogs on web design and I continue to look to .NET Magazine for advice and guidance. Here’s a fairly in depth “how to” on why Comprehensive Website planning is crucial as well as some specifics of how to do the planning stage. Thanks .NET!

As a veteran designer, developer and project manager for more websites than I can count, I’ve identified a common problem with many Web projects: failure to plan. The same issues come up repeatedly in my work, so I’ve written this guide in order to help clients, other designers, businesses and organizations plan and realize successful websites.

This guide is written in relatively non-technical language and provides a broad overview of the process of developing a website, from the initial needs assessment through the launch, maintenance and follow-up. It is appropriate for:

  • Small and medium-sized businesses;
  • Organizations;
  • Institutions;
  • Web designers, developers, and design and development firms.

If you’re building a four-page website for your family reunion or a 5000-page website for a Fortune 500 company, then this guide might not be for you; it will either be too detailed or way too short, respectively.

QA in A Comprehensive Website Planning Guide
Important questions and answers. Image by opensourceway

Why Plan?

Planning is essential for most businesses and organizations. In practice, many people fail to plan their websites. Sometimes the ever-busy, dynamic nature of running a business is to blame; there are so many operational demands that proper time is not allotted to projects. But this often happens because people fail to recognize that planning for the Web is just as important as planning for anything else in a business.

The (Lengthy) Deck Example

Consider the example of building a deck. If you want a deck for your house, you probably won’t call several carpenters and ask, “How much is a deck?” If you do, you’ll get the smart answer: “It depends.” In order to provide you with an estimate, a carpenter needs some details about the project:

  • What kind of wood? Cedar? Treated? Synthetic?
  • Where exactly will the deck go? Are there any obstacles to work around?
  • What height will it be, and how many levels will it have?
  • Do you want benches, railings, built-in planters?
  • Do you have clearance to bring special equipment into your yard?

Then there is the host of other things for the carpenter to consider: scheduling, building permits, inspection, maintenance, etc. That’s why a smart carpenter will answer your simple question with “it depends.”

Way-to-success in A Comprehensive Website Planning Guide
Be sure to plan your way to success. Image by opensourceway

It makes sense to meet with more than one contractor to address the questions above and more. When you choose a carpenter, they should provide a detailed plan that you both sign. Throughout the building process, the carpenter should check in with you periodically and discuss potential challenges and snags.

Surely all of this makes sense, but consider another scenario wherein there is no clear plan:

“Hi, Jennifer Carpenter. It’s Juan Homeowner. I need a 20 × 30-foot cedar deck in my backyard. I want it built in two weeks.”

“Okay, Juan. I’ll pick up the materials and get started tomorrow. If you have any questions, just see me in your backyard while I’m working.”

Jennifer Carpenter gets started by drilling post holes for each corner of the deck. She assumes that Juan Homeowner has secured a building permit from city hall, because that’s how most of her previous jobs have worked out… But there’s no building permit.

As Ms. Carpenter starts framing the deck, she notices that Mr. Homeowner has put a large hose reel against his house and connected it to the faucet. Based on where the deck will sit, the hose reel will have to go. She’s not sure if he will want to move it somewhere else or have his outdoor faucet replumbed to reconnect it and put it on the deck, which is two feet off the ground. She stops building and waits to ask Mr. Homeowner when he gets home… But it turns out that he’s on a business trip for three days.

When he gets back, Ms. Carpenter reaches him by phone. He’s not happy that his faucet will have to be moved, because it adds unplanned expenses to the project. But that’s not Ms. Carpenter’s fault. She’s not the plumber. She’s just putting the deck where he asked.

Once the deck is framed, she starts building a railing for one side. This wasn’t discussed, but she sees that there are small children around the house and thinks this is a good safety measure. Mr. Homeowner comes home one day and is happy to see the great progress on his deck, but he notices the railing.

Mr. Homeowner: “What’s this?”

Ms. Carpenter: “I added a railing to the side because you have kids. It’s a good safety feature.”

Mr. Homeowner: “I don’t have small children.”

Ms. Carpenter: “But I saw them playing in your front yard.”

Mr. Homeowner: “Oh, those are the neighborhood kids. My kids are in high school.”

Ms. Carpenter: “Well, a railing is still a good feature.”

Mr. Homeowner: “Fine, but can you make it shorter and put a bench next to it?”

Ms. Carpenter: “I didn’t buy enough wood for a bench, and the railing is already drilled and attached. I’d have to remove and recut it. Also, we didn’t talk about a bench.”

Mr. Homeowner: “Well, I’d like a bench here.”

Ms. Carpenter: “That will take more time. I won’t be able to get this done by your two-week deadline if we add the bench. Plus, I’d have to charge you for the extra wood.”

What began as a simple project has become a series of headaches, all due to a failure to plan.

From a Web professional’s perspective, developing a 50-page website for six unique stakeholders is far more complex than building a rectangular deck. A deck is a physical structure built in stages. You can look out the window and see the progress. In contrast, a website has a number of technical and administrative steps that aren’t visible to all.

A Caveat, and the “Waterfall” Method of Development

When I worked at an insurance company, business analysts from the information technology (IT) department would write project charters: long, painfully boring documents that attempted to outline every possible aspect of a website. I hated these documents and preferred to work by the seat of my pants. My reasoning in part was that websites are flexible, unlike print material. That is, their content can be changed at will. The idea that every aspect of a website could be pre-planned on paper was ludicrous.

IT departments that handle large projects often use something called the “waterfall” method of development: specify absolutely everything, down to the point size of the type, the line length of page headers and exactly how a simple photo gallery will work.

Seeing-and-doing in A Comprehensive Website Planning Guide
See what is relevant and react. Image by opensourceway

This is my view of the waterfall method: if you’re building a banking application that transfers money in and out of customer accounts, you’d better be sure your code is perfect. When dealing with debits and credits, there is zero allowance for error. For projects this critical, it makes sense to specify everything you’re going to do in great detail before writing a single line of code.

However, as I said, websites are flexible. So how do we reconcile the need for clear and detailed specifications with the inherent flexibility of the medium?

We do this by splitting the difference. By following the process I’ve outlined below, we can create a set of content and design specifications that greatly reduce the likelihood of mid-project glitches, while creating a framework that allows the website to grow with time. In fact, we can plan for expansion by allowing, for example, a news section to handle 10 news items or 200. When these specifications are properly implemented in a content management system (CMS), the website will give its editors the flexibility to swap out key photos, change titles and headers, reorder content, etc.—all within the framework established by proper planning.

The Value of Planning and Needs Assessment

I am frequently approached by prospective clients who want estimates for building their websites. Sometimes they have a general idea of what they want and possibly a simple website map. Others, especially organizations, will submit a request for proposal (RFP). In most cases, none of this gives the designer or developer enough information to generate an accurate proposal. Even a multi-page RFP usually does not have enough detail from which to create a proposal and estimate. If a prospective client just wants a ballpark figure, I can usually do this, but much more information is needed in order to arrive at an accurate cost.

Ideally, prospective clients would hire either a designer, developer or project manager to do a thorough needs assessment before requesting a proposal. However, clients don’t necessarily understand the efficiencies gained by up-front assessment. Ten hours spent on a needs assessment can save 30 hours of development time. Discovering the needs of a client halfway through a project is a recipe for headaches, extended development time, cost overruns and missed deadlines. As you’ll read below, failing to recognize and pay for proper planning creates big problems.

Common Results of Failing to Plan

  • The designer or developer is forced to make assumptions, which may or may not be correct, about how certain content will appear on the website.
  • The amount of back-and-forth communication about trivial matters can be multiplied many times over.
  • Backtracking causes delays and missed deadlines.
  • Work that falls outside the original scope of the project creates cost overruns.
  • Confusion and client dissatisfaction are byproducts of a shoot-from-the-hip process.

Needs Assessment

Important things to remember:

  • Unless you’re building an intranet, the website is not for you and must meet the needs of your client.
  • A website is not an event. It is a flexible, extensible communications tool that reflects, negatively or positively, on the business.

Now we could potentially start using business-speak, as in “Assemble your key internal stakeholders.” That’s another way of saying: “Get everyone together who has something valuable to contribute.”

Aligning the Website With the Marketing Campaign

The website must work in concert with the overall marketing plan. The needs assessment for the website might overlap with the other efforts and approaches of the marketing department, which is fine. This is outside the scope of this article, but note that the established branding and marketing of the business should inform the structure and design of the website.

Roles: Who’s Doing What?

Every project is different, but these are the typical roles in a sizable Web project:

  • Internal stakeholders (aka “clients”), who represent all primary aspects of the business;
  • Project manager;
  • Copywriter or editor;
  • Web designer (graphic design, illustration, Web design);
  • HTML coder (HTML, CSS, JavaScript, Flash);
  • Web or CMS developer.

Keep in mind that one person can play multiple roles. The number of participants does not necessarily bear on the quality of the result. In some cases, a series of one-on-one meetings between company principals and an experienced designer can yield a great website.

Determine Website Content

Who’s Responsible?

As you prepare to add content to the website, think about who will contribute. In a five-person business, it might be just two of you, and that’s fine. In a large business or organization, 5, 10 or 15 people might be contributing content. The time required to edit and proofread both copy and visual content grows exponentially in proportion to the number of people who contribute content.

To-compete-or-collaborate in A Comprehensive Website Planning Guide
Clear the fronts and distribute clear responsibilities. Image by opensourceway

Content Is Not Just Text

Unless you are creating the dullest, most technical website imaginable, your content should consist of more than just plain text. By using one or more of the following multimedia elements, you’ll greatly enhance the appeal and usefulness of the website:

  • Images;
  • Documents (usually PDFs);
  • Audio;
  • Video (i.e., embedded from YouTube or Vimeo, or self-hosted);
  • Adobe Flash files;
  • Content feeds (from other websites, for example);
  • Photos (from Flickr perhaps);
  • Twitter stream;
  • Facebook “friends” list;
  • RSS feeds.

The Value of Good Photography

Like other elements of a website, photos communicate the brand of the organization. If you’ve just moved into a beautiful new building or storefront, you may have snapped some pictures of it and your staff on your $150 digital camera. In most instances, unless you have bona fide photography skills, these will not be quality photos. Try to budget for professional photography. You don’t necessarily need a lot of photos, just good ones. Twelve professional images is better than fifty amateur snapshots.

If your budget doesn’t allow for a pro, then contact your local art school or community college and ask for a recommendation. A budding student photographer with a good eye will work for cheap in order to build a portfolio. If you have no budget at all, then take the photos yourself, but pay special attention to lighting, framing and focus… and hope for the best.

In some cases, when generic images will suffice, stock photography can be used. But there is no substitute for quality photos of your staff, storefront, products or services.

The Value of Good Writing

Good writing, like good photography, requires a skill that not everyone possesses. Writing for the Web is different than writing memos, policy papers and technical documents. You might write great technical manuals for precision machining tools, but that doesn’t mean you can write well for the Web. If your organization doesn’t have someone who can write clear and concise marketing copy, hire an expert. If you can write reasonably well but need some guidance, consider hiring an editor to polish your output.

Quick Writing Tips

Consider your audience and write accordingly. Try to see the business from the customer’s perspective. What do they care about?

Avoid business-speak, confusing acronyms and dry details. Your customers do not work at your shop, office or widget factory; they are the ones purchasing your products or services. Speak to them accordingly. When appropriate, write in generalities, and save the hardcore details for multi-page PDFs (as downloads). This approach is especially useful for product information, white papers and copy that approaches or exceeds 1000 words.

Here is a useful approach when writing for the Web:

  1. Write your first draft,
  2. Cut it in half,
  3. Cut it in half again,
  4. Add bulleted and numbered lists where possible,
  5. Send it to the editor.

Reading on a screen is fatiguing. A screen, whether a massive 26-inch monitor or a diminutive smartphone, projects tiny points of light at your eyes. Consequently, reading long stretches of text on it can be very tiring. Users will scan for key points in the text, so short blocks of copy and bulleted or numbered lists are helpful because they’re easy to spot.

Don’t style the content. Most writers prefer to work in Microsoft Word or a similar program. This is fine, but Word is notorious for outputting messy code. Don’t worry about colors, fonts and alignment. Just write well. Style will be applied later at the level of each Web page.

Determine Your Website’s Structure

Here are the key elements in planning a website’s structure.

Site Map

Your site map could be structured like a flow chart and built with software such as Visio or a free tool likeGliffy. Alternatively, you could create an outline with bulleted lists and indentations that indicate pages, sub-pages and other structural breaks.

Content Definition

Some content will be easy to define. A contact page, for example, is generally expected to include a business name, a location, contact information, hours (if applicable) and, often, a simple form. Other types of content require more consideration. This is another point when failing to carefully define the content will create headaches for you later on.

Structure-your-content in A Comprehensive Website Planning Guide
Structure your content. Image by opensourceway

Perhaps you want to put a photo gallery on your website. Good idea, but what exactly will the gallery consist of? Will it be 20 images in a grid of thumbnails with a nice pop-up overlay when you click on one? Or a multi-page gallery with 1000 photos, individually categorized and tracked with meta data? Should users be able to rate the images? Comment on them? Download high-resolution versions? Email them to friends?

This is but one example of why defining each type of content is so important. If you don’t, then the developer will make their best guess as to what each type of content should be. Content elements like an event calendar, staff directory or blog might provide a general frame of reference, but they require clear direction: what exactly do they need to accomplish, and how will they be used?

One way to help define content is to simply observe the functionality of other websites and see what might suit your purpose.

Content Checklist

Here is a list (though not exhaustive) of common types of content. Remember, these are just types, not definitions:

  • Articles;
  • Blog;
  • Banner advertising;
  • Discussion forum;
  • Documents;
  • E-commerce;
  • Forms for contact, quotes or something else;
  • Physical products (how many?);
  • Digital content (what kind and how many?);
  • Email newsletter;
  • Event calendar;
  • Event registration;
  • Image gallery;
  • Link management (dozens or hundreds of links, ordered by category);
  • Incoming RSS feeds (pulled from other websites);
  • Outgoing RSS feeds (your content syndicated to other websites);
  • Search;
  • Social media sharing links (Twitter, Facebook, etc.);
  • Staff directory.

Content Relationships

Some of your content will relate to other content. For example, the same details might appear on different pages of your website. Map these relationships carefully, and remember that when content is changed in one area of the website, it might need to be changed in other areas for consistency and accuracy.

Separating Design From Content

Design and content are intimately related, but they are also separate. This might be confusing at first. But it means that website content is completely free of design elements. To avoid speaking in hypotheticals, let’s consider a simple example. Let’s say your website has a set of articles. For each article, there is a:

  • Title,
  • Meta title,
  • Meta description,
  • Author,
  • Date of publication,
  • Category,
  • Summary,
  • Main text.

These pieces of information constitute a whole article. At this point in the process, it doesn’t matter what design you apply to the copy: fonts, layout, colors, author photo thumbnails, etc. The content is valid even in the absence of design. It may not look pretty in plain text, but it reads correctly.

This separation neatly suits Web Standards, a project that advocates for a set of standards for Web design that makes content accessible to the broadest possible range of people and devices.

Then, when it’s time next to redesign your website, you can easily apply an entirely new design to your existing content, because you’ve maintained the separation between content and design.

The Value Of Good Content And Meta Data

What Is Meta Data?

Meta data is content about your content. In the case of an article, everything other than the title and article text is considered meta data. When some people hear “meta data,” they immediately think, “Oh, that’s for search engines,” which is correct: search engines do rely on meta data to index Web pages effectively. However, you might want some meta data just for your own records, without displaying it.

When deciding what meta data to collect for each type of content, there is a benefit to collecting more data than needed. Still, you could collect a lot less than what we’ve listed above and still have a valid article. The bare minimum you need for something to qualify as an article is:

  • Title,
  • Author,
  • Article text.

You might think that that is enough, or that you won’t have many articles, or that they’ll be short, or that the articles won’t need summaries, or that your visitors won’t care about date or categories. This might be true today, but what about next year? If you write good content, then it will be useful well into the future.

Collect Meta Data, Plan for the Future

Over time, the value of good meta data increases. If you have only 10 articles, then tracking authors and categories might not seem useful. In two years, though, when you’ve built up a library of 150, you’ll be glad you took the time to collect it. You will be able to sort by author, date and category. And because you’ve collected summaries, you’ll be able to make a version of your website for mobile devices, for which summaries are all that fit on the screen at once.

Wireframes

Once you’ve determined the structure of the content, you can move to the first step in the design process. Building wireframes mostly has to do with the layout aspect of Web design. They are done in grayscale and are designed not to be pretty but rather to show page layout. There are many great tools for this: Photoshop, Illustrator and Visio work well, as do specialized tools like Balsamiq.

Wireframe in A Comprehensive Website Planning Guide
You can wireframe anything. Image by opensourceway

The tendency of designers especially is to make things look appealing from the beginning of the process. But this should be avoided completely at the wireframing stage, because that would distract from the purpose of the wireframe, which is to decide where things should go, not what font size to use or what color the navigation should be.

Generally speaking, one wireframe should be made for each unique page on a website. If you have a page that offers downloads or photo galleries, mock it up as well. The examples that follow are for a home page and two internal pages, respectively.

Once the wireframes have gone through your review process, it’s time to move to the design stage.

The Value of Good Design

Consider the iPod. Apple has been wildly successful at selling products with exquisite and refined design (in terms of both the physical object and the user interface). The iPod doesn’t have any particular capabilities that its competitors lack. In fact, by some measures, it has fewer features than others. For example, it doesn’t record audio out of the box; you have to attach a piece of hardware to the iPod before it can do this. Nonetheless, the product’s exceptional industrial design and highly intuitive interface, combined with great marketing, make the iPod a far more coveted item than any competing product.

Design in A Comprehensive Website Planning Guide
Where does good design start? Image by opensourceway

When it comes to websites, however, good design and attention to detail are often discounted. The reasoning is that if something works, it doesn’t need to be refined. This is misguided thinking. A website—along with a logo, business cards, signage, letterhead, direct mail and other visual expressions of a brand—critically affects the way customers perceive a business. The experience users have on your website is part of this impression. When a website is harmonious, pleasing to the eye and easy to navigate, visitors will leave with a positive impression. Conversely, when a website is just passable, it could annoy customers, leave a bad impression and discourage return visits. And, importantly, you likely won’t hear about it from them. The Web isn’t very old, but here’s a key question that has been relevant since the first business website went online: if a customer goes to a website to search for the specifications of a product that they know you sell and finds nothing, what will they do next?

They’ll leave. Typically, when users get frustrated, they don’t search any further, and they don’t call or email; they just leave the website. To get a sense of this, review your website visitor statistics (see the section below on bounce rates).

Still, these stats can’t tell you what a visitor was thinking when they left. And unless you’re selling something wonderful and unique, customers will probably go elsewhere to find a similar product or a different service provider.

Initial Design

The initial design, commonly created in Adobe Photoshop or Fireworks (and sometimes Adobe Illustrator), consists of visually accurate images (“mock-ups”) of the home page and at least one internal page. Your business’ visual branding elements should be included here. If you already have well-defined graphics in addition to a logo, they should dictate the design of the website. If your brand lacks these, then the designer should do their best to create work that accurately reflects the business.

Here is a short list of key points for successful mock-ups. We’ll assume that the designer is working in Photoshop, although these guidelines apply to other programs as well.

  • Start with a pre-made template, with pre-drawn pixel-accurate guides. Some designers create their own, and others adhere to systems like the 960 Grid System. Whichever you start with, the template should be clean. Make the canvas wider than the width you’re designing to so that you can add notes on one side.
  • Add the color palette and basic branding elements (e.g. fonts) in the margins of the canvas so that you have them for reference when viewing on screen or in print.
  • Draw everything to exact pixels, and draw clear guides and slices around design elements. This becomes critical when you execute the design in HTML later.
  • Organize all design elements with a logical folder or sub-folder structure, and label each item clearly. If the designer will be handing files off to an HTML specialist, this is especially important. “Sidebar events header” is clear; “Layer14 Copy” is not.
  • Make clear notes about fonts, alignment, repeating background elements, gradients and anything else that will be implemented with CSS. Photoshop’s sticky-note feature can help with this. If something is unclear, ask the person who will be converting the design.
  • If you’re using a common style for headers, navigation or other design elements that appear throughout the website, consider making separate templates for them. These will also come in handy later in the design process, once mock-ups have been approved.
  • Use realistic content. Designers often use Lorem ipsum to fill space, which is okay for body copy. But for headlines, titles, events and so on, use real copy. Consider the two following headlines. The layout considerations would be different for each:
    • Widgets, Inc. Wins Green Manufacturing Award
    • Widgets, Inc. Employees Win Landmark Court Case Affirming Employee Right to Petition for College Tuition Reimbursement When Training Is Relevant to Work Role

Design Approval and Revisions

After you have submitted the initial mock-ups for approval, there could be a revision process where the designer and key stakeholders go back and forth a few times, trying a variety of edits until the design is approved.

Designing-by-Committee: Don’t Do It

Having to consider multiple opinions can be a problem at this stage. Some stakeholders might be quite vocal in critiquing the design but are absent later, when the time comes to put in solid hours sifting through content for the website. Certainly, soliciting feedback about each design is important, and project stakeholders have valuable criticism to offer; they help to guide the design process so that the result accurately represents their business. In some instances, legal or technical staff will need to review. However, giving equal consideration to all feedback might not satisfy anyone.

Generally speaking, in small businesses or organizations, allowing more than five people to provide design feedback creates gridlock. It would help if these five (or fewer) people solicited feedback from their subordinates or department colleagues, but this feedback should be compiled by each stakeholder. In other words, don’t invite 15 people to a design review meeting.

Design Tension: Designer vs. Client

There is often tension between trained designers and less-informed clients. This is best illustrated by the “bad idea” conundrum: the client requests a design feature that is ugly, unworkable or for some reason a bad idea. Entire websites are dedicated to chronicling the poor choices of clueless clients. The responses of designers usually fall somewhere between “That’s horrible, and we won’t do it” and “Well, if that’s what you want….”

The response should be based on a number of ever-shifting factors, including:

  • When the designer hopes to get paid;
  • How emotionally invested the designer is in the project;
  • How much time the designer has invested in the design phase, and how long a delay would result from implementing the bad idea;
  • The client’s willingness to hear constructive criticism of their ideas.

Every project is different. Designers who continually get requests from clients for ill-advised features are likely to write the project off at some point. It’s just too exhausting having to constantly explain why centered bold red paragraphs, crazy Flash animations or poor-quality photography make for an ineffective website. Their attitude shifts from “Let’s make something that we’re proud of” to “Let’s just get it done.” Designers don’t say this to clients, but it happens frequently.

Realize, also, that the work of some designers is not up to par. Perhaps they have refused to listen to valid criticism. Avoid this situation by inspecting their previous work.

Consider Content

Think about future expansion. For example, you might have a news section with six news items. You’ll have a main news page with summaries, each of which links to the full view of the item. This is fine. But what happens when you have 10, 20 or 50 news items? Now you have other considerations. Do you want to archive old news? Paginate the items? Show only the last 10 items? Consider these questions in the design process.

For websites that accumulate content, such as news, press releases and reports, there’s a good rule to follow when creating mock-ups: you can never have enough mock-ups. In other words, if you think the layout or design of a page or section of the website will differ significantly from other pages, then mocking it up is worthwhile. This step normally comes after the initial mock-ups are approved.

Web Style Guide

A style guide is where proper planning shines. A style guide determines and defines all the design, layout, interactive (i.e. JavaScript and Flash) and type elements used throughout the website. These include but are not limited to:

  • Navigation styles;
  • <h1> through <h5> (heading tags);
  • Paragraphs;
  • Lists;
  • Block quotes;
  • Italics, bolding and underlining;
  • Links, including active, hover and visited states;
  • Icons;
  • Use of images and image style;
  • Use of background images (watermarks);
  • Common elements such as sidebars.

The mock-ups and style guide are the foundation of the next steps in development.

Integrating With Content Management System

At long last, your brilliant design has been converted to code and is ready to be integrated into a CMS. The individual or team tasked with doing this will provide you with log-in details for the CMS that allows you to add content, including text, photos, video and documents. Most editors prefer to cut and paste from Microsoft Word.

Content-management-integration in A Comprehensive Website Planning Guide
Make sure everything fits in. Image by opensourceway

Depending on the specifics of the CMS, you might be able to do this easily and retain simple formatting like bold, italics and lists. Sometimes, though, the CMS will strip out the formatting when you cut and paste, and you’ll have to put it back. This can be tedious, but it ensures that your content remains neat and orderly and thus can be easily printed, cited, indexed by search engines and converted to other formats.

Putting It All Together

After following these steps, you should be sitting on a pretty solid website. Regardless of the size of the project, now is a good time to do the following:

  • Review the content once again, and check it against the points listed under “Writing for the Web” above.
  • Ask a third party to proofread all of your content. This is not the task of the designer or original writer. Bring in someone with a fresh perspective. Don’t proofread your own work.

Beta Testing and Launch

When you feel that the website is almost ready for the public to see, it’s time for beta testing. Go through this checklist (which is the bare minimum):

  • The website looks correct in all targeted Web browsers. Web browsers include the usual Internet Explorer, Firefox and Safari, as well as (depending on the specifications) less common browsers like Chrome and mobile devices (iOS, BlackBerry, etc.);
  • Interactive features work smoothly;
  • Contact and other forms work predictably and send the correct information to the user and recipient(s);
  • Internal and external links work;
  • Images are sized properly;
  • All placeholder content has been replaced by the final copy;
  • Links from third-party software, such as email campaigns, work.

Once you’ve thoroughly beta-tested the website, launch it.

Post-Launch

After you’ve launched, maintain the website. Here are a few helpful tools for that.

Web Statistics

Visitor statistics provide insight into how people use your website. You’ll need at least a month or two of data to make any determinations. Here are a few questions to consider:

  • Where are visitors coming from? See search engines, direct traffic (i.e. visitors who type your website’s URL directly into the address bar), ads, links from other websites, etc.
  • Where do visitors live? Are they mostly local, regional, national or international?
  • What pages are the most popular?
  • How long are visitors staying on the website?
  • What is the bounce rate? That is, how many users visit only one page on the website before leaving?

Google Analytics is one of the most commonly used Web statistics apps, and you will find answers to these questions in the high-level data it presents. Other software should provide these answers as well.

Documentation

Much of your documentation will consist simply of the different elements discussed earlier in this document, including wireframes and Photoshop documents. You’ll also need detailed notes on how various parts of the website are implemented in the CMS. Think about what information would be needed if you brought in new people to maintain the website, people who were not at all familiar with it. What would they require in order to pick up the project? This is what proper documentation is.

Back Up

Schedule regular back-ups of the website’s files and database. Daily is ideal. Your hosting company might provide an automated way of doing this, so that if your files or database get hacked, erased, corrupted or otherwise damaged, you can restore them with copies from the previous day. Depending on the size of the website, update frequency and some technical matters that vary from website to website, you could schedule more frequent back-ups.

Maintenance Plan

Your maintenance plan should clarify roles and responsibilities for every aspect of the website. For example, if two articles per week are to be posted, who is responsible for them, and who is that person’s back-up? If your website requires that photos or graphics be created regularly, make sure this work is assigned and understood. Decide who will check links.

Write a simple maintenance plan, and share it with everyone involved in the website’s care and development. Remember, a good website isn’t a one-time event, but rather an extensible communication tool that requires regular updates to stay valuable, relevant and compelling for visitors.

Solicit Visitor Feedback

A great way to improve the impact of a website is to solicit visitor feedback. There are a variety of ways to do this, from conducting simple online surveys to on-site focus groups. Website visitors often have trouble articulating what they like and don’t like about their experience. With this in mind, craft very clear and specific questions when soliciting feedback. And remember: if you’re going to take a significant amount of visitors’ time, offer something in return (a product discount, a prize or simply a handwritten thank-you note).

Conclusion

Okay, one more time: a good website isn’t a one-time event, but rather an extensible communications tool. Once you’ve built a great website, keep the momentum going. Devote resources to regular maintenance, and check in with visitors regularly to identify areas for improvement.

Mike Kroll supplied wireframes and design mock-ups. Susan Morris provided editing and proofreading.

Download a Free PDF Copy

You can download an even more detailed PDF version of Ben’s project planning guide after a quick registration on his agency’s site.

CSS3 Is For Today

This is a really great article by Studio Press on CSS3. Well worth the read…

CSS3 Is For Today

I love movies. There’s nothing better than experiencing a movie that drops your jaw or makes you go quiet for a minute, contemplating what you just witnessed. This can happen when the story takes a turn you never saw coming. The end of the Sixth Sense or when Brad Pitt finds out what’s in the box at the end of Seven are particular favorites of mine.

Sometimes the director brings a moment to the screen that just isn’t possible in real life. One of these moments happened for me when I first watched The Matrix and encountered “bullet time.” I didn’t get to see it in the theater but I remember rewinding that initial rooftop scene at least ten times while watching at a friend’s apartment. Another awe-inspiring experience was flying with the camera as it panned over and revealed the massive structure of Minas Tirith in Lord of the Rings: Return of the King.

These effects create profound experiences that enhance the movie and take the storytelling to another level entirely.

Would The Matrix have been a good movie without “bullet time”? Sure, it possessed both a good story, and good cinematography. But it was the “bullet time” effect that sent it over the top, that made you remember.

Would Lord of the Rings have been a good movie without its visual effects? Yes, because the story is so incredible. But with the amazing effects, the story was taken to a whole new level that gave us a truly magical experience.

The same can be said for CSS3.

Is it absolutely necessary to use CSS3 on our sites today? No. You still need a good foundation of content, usability and markup. But using it to enhance these things can take a site over the top and give the user a wonderful experience.

Some have said that using CSS3 is akin to cheap parlor tricks and that by using them we’re trying to pull the wool over the eyes of our users. This may be true in some cases where the content is weak, but our job is much like a movie effects designer in that we want our users to have the best experience possible. Consider what John Gaeta, the head of effects for The Matrix said about this:

My job has nothing to do with making zingers. The point is not to knock you over with a visual trick. The point is to be able to construct events that are so complex, in terms of what human bodies need to do, that the total ‘effect’ is impossible choreography. ‘My God! It looks real, but it just can’t be.’

As web designers we want to enhance our content to the point where it gives the user pleasure to be on our site. Much like advances in technology have allowed amazing effects to be brought to the silver screen, CSS3 allows us to bring really cool enhancements for our users to experience.

What is CSS3?

CSS3 is the third iteration of the CSS specification recommended by the W3C.

So, way back in the day, around 1996, a group of people called the World Wide Web Consortium put together a document called a specification or spec that officially recommended ways for browsers to handle CSS. It included suggested standards for things like font properties, text color, alignments and so on. This was CSS1.

Always wanting to push the boundaries as to what browsers could possibly display, the CSS2 specification was officially recommended in 1998 and included things such as positioning and layering attributes. There were a number of errors in this spec which were corrected. And the spec was enhanced in what was called CSS2.1 which was officially recommended in June 2011.

The Consortium decided to split up the next iteration of the spec — CSS3 — into modules. Theoretically this spec would allow browsers to adopt and support new selectors getting them into the hands of designers more quickly. And that’s where we are at right now.

Browser Support

Since the spec has been split into modules — and with the introduction of CSS3 — browser support for new selectors has been good across the board with the exception of Internet Explorer.

Generally IE6, 7 or 8 do not support CSS3. The good news is that the current version, IE9, implements a majority of the working draft and IE10 supports even more.

So Realistically Can I Use it?

My answer is yes—regardless of browser support.

In Dan Cederholm’s book CSS3 for Web Designers he talked about the reality of implementing CSS3:

…the truth is everyone can begin using CSS3 right now. And fortunately you don’t have to think differently or make drastic changes to the way you craft websites in order to do so. How can anyone use CSS3 on any project? Because we’re going to carefully choose the situations where we apply CSS3, focusing squarely on the experience layer.

As I stated above, we don’t absolutely need these things, because we still have our content and markup. CSS3 serves to enhance the experience.

What About the Poor IE Users?

The latest browser statistics have the market share of IE anywhere from 30%-50% depending on which study you look at. So is it realistic to not give half of my users an experience? I’ll defer again to Cederholm as he says we need to group the elements of our sites into critical and non-critical categories.

Critical Non-Critical
Branding Interaction
Usability Visual Rewards
Accessibility Feedback
Layout Movement

For those items that are critical we would not use elements that are not compatible with all of our target browsers.

For example, if part of the branding and distinct look of your site is to have all of your containers with rounded corners you’re probably going to have to use images, or a different solution than the CSS3 border-radius selector. But, if having rounded borders is just an enhancement — not critical to the site’s look — you can freely use it now.

Fixes and Workarounds

There are a couple decent solutions to using CSS3 with all versions of IE now.

The Case for Progressive Enhancement

In the past, when presented with the problem of designing for multiple browsers, the typical solution was to make sure our sites “degraded gracefully.”

We would design sites for the latest browsers, but would make sure they would look ok in the older ones. I always pictured the user wincing and shying away from their computer as the page loaded, not sure if their computer would explode …

Progressive Enhancement takes the exact opposite approach.

We design initially for the lowest common denominator and then progressively build in enhancements. This is one reason this idea works so well with mobile sites and responsive design.

Using progressive enhancement as a design philosophy caters more to users that can’t upgrade because of IT policies. It also saves the designer loads of time and headaches because they aren’t forced to come up with crazy hacks and solutions to make everything look the same.

A Case Study using Drop Shadows

Say I want to use drop shadows on images in my blog posts. I have basically three options:

  1. Import all of my images into a graphics editor and apply a drop shadow to each image
  2. Create an shadow in a graphics editor and then have each image use that shadow as a background with css
  3. Use the box-shadow element to apply a shadow to your image or container

All three will work, but:

– I’m spending loads of time creating these shadows for every image and increasing my file size
– I have to have crazy markup and rules to fit every image size or be restricted to one size. I also lose the ability to use the background selector for other purposes.

When I use the css3 box-shadow element I save myself developing time. I can preview changes quickly in the browser without having to create multiple images. I have the option to use my background for something other than a shadow and I save file size and processing time.

Just because some people are color blind doesn’t mean we design a site without color.

Examples of CSS3 You Can Use Right Now

Multiple Backgrounds
This property allows you to specify multiple backgrounds in a container with nothing more than a comma separated list in your css. The image listed first will appear on top of all others. In this example I’ve actually used only two images but have re-used the airmail strip to have it appear on the bottom of my container.

.envelope {
background-color#e3dfba;
background:
  url(images/airmail.png) top repeat-x,
  url(images/airmail.png) bottom repeat-x,
  url(images/grunge.jpg) no-repeat;
height400px;
width600px;
}

Border Radius
The border-radius property allows you to round the borders of your element. To learn more visitThe Art of the Web.

.envelope {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.env-inner {
background-color#1699e5;
backgroundurl(images/blue-grunge.jpg);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
height319px;
floatleft;
margin42px 20px;
width560px;
}

Box Shadow
In the example below we’ve added a shadow to our container. There are four parts to box shadow:

  1. The horizontal offset of the shadow. A positive value means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  2. The vertical offset of the shadow. A negative value means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  3. The blur radius. If the value is set to 0 the shadow will be sharp. The higher the value the blur will increase.
  4. The color of the shadow
.shadow {
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666;
}

CSS Transforms
The transform property is used to rotate, skew and scale elements. It can be applied to images, containers, and text elements.

In our example below we’ve rotated our containing element basically 1 degree backwards. It would have also worked to use -1deg for our value.

We’ve also used a scale transform on the sun graphic. Most often this property is used in conjunction with a hover action. Make sure you hover over the sun to see it in action. The last example in the article shows how this can be done smoothly with a transition property added.

For more information on using the transform property click over to zenelements.

.rotate {
    -moz-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
}
.sun {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
.sun:hover {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    cursorpointer;
    transform: scale(2);
}

Child Pseudo-Selectors

ul.envelope-list li {
    background-color#e3dfba;
    background:
        url(images/airmail.png) top repeat-x,
        url(images/airmail.png) bottom repeat-x,
        url(images/grunge.jpg) no-repeat;
    floatleft;
    height98px;
    list-style-typenone;
    margin10px 10px 10px 0;
    width98px;
}
ul.envelope-list li:last-child {
    margin10px 0 10px 0;
}

In this example we are changing the margin for the last list item. Last child refers to the last child of the parent item. So in this case the css will be applied to last li of the ul with the class of evelope-list.

ul.envelope-list-2 li:nth-child(2) {
    background:
        url(images/airmail.png) top repeat-x,
        url(images/grunge.jpg) no-repeat;
}

In this example we are changing the background for the second item in the list. So nth-child lets us specify a specific numbered item of the parent element to change.

ul.envelope-list-3 li:nth-child(3n) {
    background:
        url(images/airmail.png) bottom repeat-x,
        url(images/grunge.jpg) no-repeat;
}

In this last example we are applying a formula where the css is being applied to every 3rd item in the list. So every 3rd list item in the ul will have a different background.

Having a Bit of Fun

In this last example we’ll combine several of the examples we’ve already done plus add in some transitions to smooth everything out.

<div class="envelope radius">
    <div class="env-inner shadow airplane">
        <div class="text">
            <div class="wave">Wave Next Time</div>
            <div class="iowa">Iowa</div>
            <div class="fly">You Fly Over</div>
        </div>
        <div class="sun-animate"><img src="sun.png"></div>
    </div>
</div>
.airplane {
    -moz-transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
    background:
        url(images/airplane.png) no-repeat 600px -34px,
        url(images/blue-grunge.jpg);
    transition: all 0.7s ease-in-out;
}
.airplane:hover {
    background:
        url(images/airplane.png) no-repeat 0 -34px,
        url(images/blue-grunge.jpg);
}
.sun-animate {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
    float:left;
    margin-top:-270px;
    opacity: 1;
    transform: scale(1);
    transition: all 0.7s ease-in-out;
}
.sun-animate:hover {
    -moz-transform: scale(10);
    -webkit-transform: scale(10);
    cursorpointer;
    opacity: 0;
    transform: scale(10);
}
.text {
    color:#efefef;
    float:left;
    font-family: Oswald;
    margin-top:60px;
    text-align:center;
    text-transform:uppercase;
    width:100%;
}
.iowa {
    font-size130px;
    height116px;
    line-height107px;
}
.wave {
    font-size40px;
    height:36px;
    line-height:35px;
    margin:5px 0;
}
.fly {
    font-size45px;
    height:40px;
    line-height:37px;
}
IOWA
WAVE NEXT TIME
YOU FLY OVER

Resources

Find out what CSS3 properties and selectors can be used by today’s browsers:
http://www.findmebyip.com/litmus/
http://caniuse.com

All Around CSS Information and Goodness:
http://css-tricks.com
http://www.w3schools.com/css/default.asp
http://www.zenelements.com/blog/
http://trentwalton.com/category/articles/

Experimental Uses of CSS3
http://tympanus.net/codrops/

Books
CSS3 For Web Designers
Stunning CSS3

Pinterest And Business

Here’s a good article written by StudioPress.

Five Reasons Why Pinterest Works For Your Business

Pinterest is one of the fastest growing social networks around, and works differently than other social media platforms. With Pinterest, you create boards and “pin” videos or photos to them. If your business hasn’t made use of Pinterest yet, here are 5 reasons why you should.

1. You Can Gain More Traffic

Pinterest is a fantastic way to drive more traffic to your website. Not only can you post images that contain a link back to your site, but you can also post links in the titles and descriptions. All of these links means the potential for more traffic.

If your site is built on the Genesis Framework, this tutorial will teach you how you can add a Pinterest “Pin It” button at the top or bottom of every blog post.

For example, let’s say you want to link to your business blog. You can post actual pictures from your blog with a link back to the specific blog post those images come from, driving traffic to that page on your blog and others. It’s a quick and simple way to market your business website or blog.

If you’re looking for design inspiration, follow StudioPress on Pinterest.

2. You Can Gain Exposure

Not only can you drive traffic to your website or blog using Pinterest, but you can also build exposure for your brand. Pin images of items your company sells to Pinterest, and you could potentially introduce new customers to your brand. Many clothing companies have already done this using Pinterest – pinning images of their entire catalog while linking back to their site.

This method is a free way to advertise to millions of potential customers every day. Plus, users can re-pin anything you post, which means if they like a product you sell, they can re-pin it to their boards and circulate your brand even farther.

3. You Can Interact with Customers

Pinterest can be a great tool for interacting with customers, and if you want your business to be as successful as possible, you definitely want to engage your customers and foster their sense of brand loyalty. In order to do this, create a public board on Pinterest that will enable your customers to provide you with feedback on your products, service or overall opinion of the company.

Another way you can interact with customers on Pinterest is by holding a contest or offering discounts exclusively to your Pinterest followers. Not only will this help encourage your customers to keep coming back to your website, but it will also make your loyal customers feel even better about sticking with your brand – and your new customers are more likely to remain long-term customers if you actively engage with them and help reward them for their loyalty!

4. You Can Raise Awareness

Even non-profits can take advantage of Interest as a marketing tool. For example, animal shelters can post photos of dogs and cats looking for a home, as well as create a board showcasing photos of animals who were already adopted. Several shelters have already started doing this on Pinterest!

No matter what type of non-profit you run, you can use Pinterest to share photos of the people or things your business affects, as well as images of any current or upcoming projects your non-profit is working on. This is a great way to connect with your followers, and enables you to explain your cause in.

5. You Can Showcase your Company’s Personality

Pinterest focuses heavily on lifestyle, meaning it’s a good idea to showcase your company’s personality on a special board dedicated to that. Customers like getting a peek behind the scenes of a brand, knowing there are real people working to create the products or services your company produces.

Create a pinboard with images and/or videos of your employees at work, marketing your brand, attending company outings, etc. This will make your company seem more human and relatable, and potentially help gain even more followers and customers.

While Pinterest is still fairly new, it’s quickly becoming one of the fastest growing social media platforms around. Whether you need to build exposure, drive more traffic to your site, raise awareness about a specific cause or charity, or any number of things, take advantage of this free marketing tool to help your business be as successful as possible.

WordPress Security

This is a good article by StudioPress. It is very succinct. They usually write great posts regarding WordPress.

4 Simple Ways to Secure (and Maintain) Your WordPress Website

With the wind in my face and long stretches of open road before me, life is very good when I’m on my Harley.

I ride a lot, and as freeing as it can be, a good rider is always keenly aware of the high risks of being on a motorcycle. A good rider plans — as much as he or she can — for all kinds of contingencies.

The key to being a safe rider is the acceptance of risk.

I have to consider a lot of variables, but ultimately I’ve decided that I want to ride, and I’ve accepted that there will always be a certain level of risk to that activity.

Running a website site is not unlike motorcycle riding when it comes to risk acceptance and overall risk management.

A Responsibility to Your Audience

Though WordPress allows a site creator to go a step above what most website software offers regarding security, it is still Internet based software, and there are inherent risks for you, your data, and your users.

The security of visitors on your site should be a priority, ensuring their visit is free from harmful content. Your website does you no good if it’s harming visitors, or your reputation.

Just like hopping on a bike, you need to be taking a strategic approach to WordPress risk management.

Here are four simple risk reduction approaches you should consider and implement …

1. Clean Your Garage

The paint on a Harley-Davidson is engineered to last 50 plus years — even in extreme heat or cold.

It isn’t designed to withstand that ladder currently leaning up against your garage wall falling on it. Before I brought my precious bike home, I decided to pick up a few things and create a proper parking spot.

We’re extremely fortunate as WordPress users. The WordPress core team does a great job of cleaning up and optimizing the WordPress core on an ongoing basis.

They are committed to the identification and patching of security vulernabilites. Anytime you see a minor release (3.2.x), it’s for bug fixes and security patches.

Here’s a few things to consider with each WordPress update:

Update your core: The most important advice I can give anyone who manages websites is to ensure they are updating their software. When you’re done updating, check everything again, and update some more!

One of the biggest contributors to malware attacks is running outdated software. In fact, it accounts for more than 70% of all the cases we see at Sucuri. This includes various web based software titles, not just WordPress. There are various ways to accomplish this, and it usually takes mere minutes to update the WordPress core.

Have you tried the automatic update feature in WordPress? It works great, and is conveniently located within your WordPress admin panel.

Update themes and plugins: Everything is working just fine, why should I touch plugins? The same reason you’d updating any other software — even more so with themes and plugins — because they don’t necessarily go through the same vetting and testing as WordPress core (unless you’re using StudioPress themes and plugins).

Remove disabled plugins and inactive themes: In August of 2011, there was a public disclosure that the popular TimThumb script included in popular WordPress plugins and themes was vulnerable. Within days we were seeing attackers exploiting the vulnerability with everything from SEO spam to website redirects to infecting every single PHP file on the server with nonsense characters.

As we started to see more and more of these cases we came to realize that most site owners didn’t even realize the script (and resulting malware) was on their server. In other cases, site owners were disabling the vulnerable plugin or theme, but were leaving it on the server. This vulnerability didn’t mind that the theme or plugin wasn’t enabled in WordPress. Attackers started scanning sites looking for Tim Thumb and when they found it, they would arbitrarily execute PHP on the server. When a plugin or theme is inactive, WordPress does not load it.

However, it is still accessible and executable on the web server. This is one of the most overlooked vulnerabilities on a WordPress install and one of the first avenues hackers cruise when looking for ways to exploit a site. If you aren’t using the plugin or theme, remove it from your site! That goes for all software really, if you’re not using it, remove it from the server. There is no sense in storing it there if it’s not being leveraged.

There’s nothing worse than leaving it there, forgetting about it, then getting infected through something that you don’t even need. In the end, by removing all unneeded software, files, and data from your server, you’re reducing your risk of future vulnerabilities being exploited, and it’s less you have to update or maintain.

Update your server: If you’re being held accountable, your web host should be as well. Are they keeping the server software update? Are you running the latest web server software? If you’re not sure, ask them! If that doesn’t net the results you’re looking for, you can scan your site at Sucuri and it will tell you.

2. Close Your Garage Door

As obvious as this may sound, one of the things I seriously considered when buying my bike was the state of my own home.

Where was I going to park my new ride? How would I ensure that it would be protected when I was away from it?

How does this apply to WordPress?

Making sure your local infrastructure is as safe as possible is the starting point for most everything you will do online.

Here are a few areas that will help reduce your risk from the beginning:

Keep your computer up-to-date: Ensure you’re patching or installing updates regularly. Automatic Updates are good. Most OS vendors are patching security issues often, it’s important to stay updated.

Install an anti-virus solution: AV solutions don’t only protect you from computer viruses, they are also helpful to detect malicious software that may try to attack your web properties.

Software firewalls: Yes, they are still relevant.

Safe Browsing: Just because your website is a super ninja doesn’t mean others are too. Most desktop viruses and malware these days are passed via infected websites. If it doesn’t look right, it probably isn’t. If you’re a Firefox user check out the NoScript Extension, It allows you to manage the scripts being loaded by websites so that the latest drive-by doesn’t catch you with a funny pop-up.

3. Don’t Leave Your Keys in the Ignition

I was having a great day at the office a few days back.

When I left to head home, I realized that my bike’s key was in the ignition — in the on position — which had drained my battery. I was lucky though.

What if someone with malicious intent realized the key to my ride was sitting in the ignition? I’d be dealing with my insurance company right now.

The simplest forms of authentication use some type of keying mechanism. This is one of the quickest ways for attackers to gain access to your site, and ride off into the sunset.

Let me ask you this, are your passwords strong enough to ward off an attack long enough to disinterest an attacker?

Did you know that the most stolen password in 2011 was “password”?

Here are the top 5 worst passwords:

  1. Password
  2. 123456
  3. 12345678
  4. qwerty
  5. abc123

Hackers aren’t sitting around all afternoon randomly typing passwords. They automate attacks using a technique called the dictionary attack. They create a large list of common passwords and automate an attack trying each one until they find what they’re looking for.

Here are a few things to help you fight password attacks:

Change your passwords often: The longer you use the same password, the more time you’re giving hackers to try and crack it. If you change it frequently, you shorten the window of attack.

Don’t share passwords: Passwords are like toothbrushes, you should keep them to yourself. And discard them, and get a new one, if they have been used by others.

Don’t write your passwords down: This is as bad as me leaving my key in my bike. Anyone can take it, and run with it. Alternatively look at using a password management tool like KeePass or LastPass

Use Passphrases: Passphrases are basically long passwords, something with a meaning. For example: F0urScoR3&s3v3NYeAr$aG0Now – this passphrase is pretty complex, but you’ll see that it contains 3-4 words, uppercase, lowercase, numbers and symbols. I am fond of Abraham Lincoln and the Gettysburg Address so this would be fairly easy for me to remember. You don’t have to go crazy like the example, but the idea is to use a more complex set of characters that would be very difficult to guess.

4. Find a Good Mechanic

I don’t trust my bike with just anyone.

I have poured my heart into upgrading, and customizing it. I have spent countless hours architecting the ride, the look, the feel. Sound familiar?

In a lot of ways I approach my websites the same way, and when choosing a web host I research considerably before giving over the keys to the kingdom. Anytime you install a plugin or let a designer make changes to your site, you are handing them the keys to your kingdom. Your hosting provider always has the keys to your kingdom.

Do your research, get recommendations, and choose wisely. Here’s a few things to consider when using thrid-party offerings:

Plugins: Not all plugins are created equally. Unintentionally, an inexperienced plugin designer can open up all kinds of security vulnerabilities in your site or simply tank its performance. Read the reviews of plugins you select and try and stick to ones that have shown a history of updating and evolving their code on a regular basis.

Designers: The WordPress design community has grown significantly and there are lots of great resources to choose from. Make sure and get recommendations for a qualified designer and consider having them implement their design on top of a reputable framework like Genesis. A framework really helps to keep your designer in design and configuration mode versus coding. Unless a designer is an experienced WordPress developer as well, coding can often lead to security and performance issues.  Even if they are an experienced WordPress designer, it doesn’t hurt to stress to them that security is important and ask them to keep it in mind by adhereing to some of the advice in this post as well as the basics of WordPress hardening from the Codex .

Hosting: Most hosting platforms are designed to be everything to everyone. If you select a hosting provider that specializes in WordPress and is proactive in its approaches to security, your chances of having performance, operational, or security issues will lessen. Copyblogger Media’s Synthesis Managed WordPress Hosting, for example, combines a minimalist, locked down stack with proactive PHP scanning software to prevent hackers from accessing its customer’s sites, or even gaining information about them. It’s also safe to say that the folks at Copyblogger understand WordPress, SEO, and hosting and integrate that knowledge into their customer support.

I hope this helps in your travels down the WordPress highway.

As you can see, a few simple plans can go a long way in heading off disaster, and bringing you peace-of-mind.