Before

After

With the help of design goddess June Allison, and message crafter Brenda Dammann of Creative, Inc., we developed a new site for AcctVantage that we’re proud to show off. What do you think?

The staff of PaleoSun were able to sit down with quite a few of the guests and take a look at their websites. Those people left armed with new insight into the design, usefulness, and effectiveness of their online endeavors. And, by all accounts, it was an enjoyable evening.

PaleoSun would like to extend thanks to those who volunteered their time, and to everyone who attended. Because of you, Website Insight was a smashing success.

PaleoSun , a web design and development firm, plans to bring in the new year by giving back to the community through their new Website Insight event. On January 23rd from 5pm to 8pm PaleoSun will be opening their office to the public to answer questions about the web design process, provide advice on creating a website, provide advice on improving an existing website, and share tips on internet marketing. Gary Reckard, lead database developer comments “My friends and family ask me website questions all the time, but not everyone has a friend or family member that is knowledgeable about web design. We see this as an opportunity to lend a helping hand to those who are interested in making the most of their website but don’t have a resource for asking basic questions.”

PaleoSun will be furnishing this fun and casual event with free food, music and drinks. The PaleoSun offices are in the Park Place Building at the corner of Charlotte Street and the 240-E on-ramp.

Event Details

For more information about the event and/or to RSVP please visit the invitation site: http://paleosun.com/website-insight

Press Release Files

• Website Insight Full Resolution Logo (JPG)
• Website Insight Press Release (PDF)
• Website Insight Flier (PDF)
• Website Insight Flash Ad (SWF)
• Website Insight Press Kit (JPG, SWF and PDF’s)

Pinnacle Falls is a private wooded mountain community 10 minutes from Downtown Hendersonville, North Carolina. A ‘nature’ theme permeates the overall design and an earth tone color scheme supports the tremendous natural appeal of this development. Large prominently placed imagery offers a micro and macro view of the Pinnacle Falls environment and is intended to deliver emotional appeal. An interactive Google map, complete with custom icons, photographs and additional information gives a birds eye view of Pinnacle Falls’ location in relation to nearby amenities and attractions.

Generating quality leads is the greatest end goal of this website. A simple contact form is easy to find on every page. The Pinnacle Falls website is clean and simple while communicating with pictures throughout the website. The layout of Pinnacle Falls is easy to understand and navigate using a highly intuitive interactive property map. Each location available for development is easy to find. The web site is extremely easy to navigate with large well defined links and a company message that is clear.

Organization

The importance of an organized design process cannot be overstated. Before you even touch the software, have a plan. Whether it consists of sketches, story boards, mock ups, or simple notes, a detailed plan will help your ideas come to life smoothly and limit the amount of time you spend backtracking. If you make decisions early about the myriad details (file size, interactivity, imagery, video, etc.), you can save yourself a lot of work. Remember that every project will come with its own set of challenges. It is impossible to anticipate every problem, but your time spent troubleshooting can be significantly reduced if you maintain an organized process.

Once you actually dive into Flash there are a few organizational strategies that will help you collaborate with others and keep the file(s) manageable.

Timeline and Library

• Name your layers. Make it simple and descriptive.
• Organize similar layers into folders.
• Lock layers to avoid placing content in the wrong location.
• Never put assets on the same layer as ActionScript. Keep ActionScript on its own layer and lock it.
• Use frame labels. This allows you to make changes to your timeline without having to edit every snippet of code where you referred to a frame number.
• Use library folders to make changing assets easier.
• Stick to a naming convention with both layers and your library.

Fig. 1 – The above image is a snapshot of a hypothetical work in progress. It illustrates the use of descriptive layer and library names, layer folders, locked layers, frame labels, and library folders. Each project can require a unique organizational structure. Use the planning stage to determine what will work best for your project and work environment.

Scenes

In most cases involving interactive flash, the use of scenes should be avoided. They tend to enlarge your file size,and can be confusing to edit in a collaborative setting. Using scenes also forces the user to download the entire file instead of the pieces they choose to see and use. Perhaps most importantly, scenes can cause ActionScript errors that break the usability of your final product.

One exception to this rule is if you plan to create a lengthy linear animation. This type of file has little or no interactivity, and is intended to play through from beginning to end. A long character animation is a good example of the sort of file that would benefit from the use of scenes.

Saving and Versions

Another key ingredient to smooth project development is to save often (File>Save or ctrl+s). Saving is good advice, whether working in Flash or not. As complex as your file can become, you will prevent a lot of frustration by following this rule.

Also, periodically select File>Save As (or press shift+ctrl+s), to save a new version of your file. This is especially helpful if you decide that your current approach is not ideal. Instead of trying to undo your current work, you can simply open a version of your project that does not have the latest set of changes and work from there.

ActionScript

ActionScript is the brain of your Flash project. Through the process of evolution, nature determined that brains go in a single place. In this case the logic of nature is worth emulating. Your ActionScript should be kept in as few places as possible.

If you intend to keep the ActionScript in your main FLA file, put your code in the top layer, name it “actions,” and lock the layer. The reason for putting the ActionScript in the top layer is to make it easy to find, and setting the file to load “top down” in the publish settings ensures that your code is the first thing to load.

Another option is to put all of your code in separate ActionScript files. You can write these files using a simple text editor (Notepad on PC and Text Edit on Mac), or you can use the Actions panel in Flash, taking advantage of the built-in code hints, then copy and paste to the text editor. Either way the end result is a plain text file. Make sure to save it with a .as file extension. You can then call your file with a few lines of ActionScript on the appropriate frame of your SWF.

Avoid placing code on object instances on the stage. ActionScript on objects can result in having code in hundreds, even thousands, of places depending on the complexity of your project. The tangled mess that results is called “spaghetti code” because of how difficult it can be to decipher, edit and debug. Additionally, there are different syntax rules when you put ActionScript on an object. For someone just learning Flash, this can be confusing. Stick with putting your ActionScript in a central location, and the result will be more elegant and versatile code.

When it comes to coding, you cannot be too organized. Group your ActionScript into related sections to make finding and editing the code easier. Use comments to communicate a particular script’s purpose. Comments are especially useful in a team environment where many people may be involved in editing the code. They are also priceless when revisiting code you have written in the past. You’d be surprised at how foreign your own thought processes can seem after even a short period of time.

Fig. 2 – Sample ActionScript. Note that the current selection is a frame, not an instance on the stage.

Behaviors

Behaviors are prepackaged bits of code that can be added to your project. They are convenient and can potentially save you time. Behaviors are especially useful to novice Flash designers who want to add interest to their piece, yet don’t know much about ActionScript. However, the end result when using behaviors is similar to the “spaghetti code” mentioned earlier. In a complex project, behaviors can be as much of a hindrance as a help.

For a designer who still wants to use behaviors, here are a few guidelines that will save you a lot of trouble:

• Plan ahead. Spend some time determining the number, types, and locations of the behaviors you will need. You can save yourself a lot time and effort by knowing early whether behaviors will work for your needs.
• Keep it simple. If you only have a few behaviors, and avoid putting them on object instances on the stage, they can be a real convenience. If things get more complicated, though, try to stick to ActionScript.
• Be consistent. If you use behaviors for a particular project, stick with them. Avoid writing ActionScript that has to interact with the behavior code. This will help streamline the collaboration process and prevent any potential errors.

Behaviors can be quick and easy. But like Yoda says, that way leads to the dark side. Behaviors encourage sloppy code and work flow, but they can be helpful in a time crunch. For anyone who is looking to create elegant, high quality work, remember that there is nothing that can be done with behaviors that cannot be done with ActionScript. “Mind what you have learned. Save you it can.”

Fig. 3 – A behaviors panel with its associated ActionScript. Notice the difference in syntax between this code and the ActionScript placed directly on a frame (fig. 2). Also note that the current selection is an instance of “start_btn” rather than a frame.

Video

Flash 8 introduced significant advancements for working with video. In the past several years video has spread throughout the Internet, thanks in large part to Flash video (FLV) and sites like YouTube. Here are a few practices that can help you get the best performance from your video, and provide the best experience for the user:

• Decide things like dimensions, quality, duration, format, and download type before you import a video into Flash.
• Edit and compress video outside of Flash.
• Give the user some control. Include pause, close and mute at the very least.

Remember that video files are relatively large. They are likely to be the biggest files in your collection of assets. Therefore, lots of video in a Flash document will equate to a long download time. One excellent way to include video and keep download time short is to keep your FLV files separate from your main SWF. In this way, download time is reduced and the user will only download the video(s) they wish to see. Also, remember that the more visual complexity (special effects, numerous colors, etc.) you have in your video, the larger the video file will be.

Optimizing

The idea of optimization is to minimize your file size without sacrificing quality. A small file size equates to a shorter download time, which tends to please the user. People like immediate results, especially when they are on the Internet.

You may have noticed, by now, a significant emphasis on organization, yet it bears repeating. You cannot be too organized when working with Flash. Plan ahead and make important decisions early in order to avoid having an excessively large or complex file.

Bitmaps

• Avoid using lots of large image files. If you need to display a large amount of high quality images (such as in a photo gallery), store them outside of your main SWF and call them with ActionScript.
• Optimize your bitmaps outside of Flash.
• A resolution of 72dpi is ideal for the web.
• Compress your images as much as possible without causing an unacceptable loss of quality.
• The ideal bitmap format for Flash is the PNG file type. PNG preserves the alpha channel, and allows for a small amount of editing within Flash.

Here are a few more tips for optimizing your Flash project:

• Frame rate directly relates to how hard a user’s computer must work to play the SWF. Choose the lowest frame rate that keeps the animation smooth. Your frame rate should never be higher than 30fps.
• Gradients and alpha transparency will increase your file size. Use them sparingly.
• Keep it simple and keep it clean. The fewer moving elements and visual artifacts in your piece, the smaller the file will be.
• Use external SWFs and FLVs to reduce the file size of complex projects. You can call them with ActionScript so the Flash Player downloads them as needed.

Preloaders

If your file size remains large, despite your efforts to optimize, you could consider using a preloader. A preloader is a simple animation that runs until the entire SWF has loaded, and then proceeds to the first frame of the main animation. While a preloader can be entertaining, its main purpose is to inform the user, so a visual or textual indication of the load progress is recommended. A preloader may not be appropriate for all situations, but in many instances it is the best solution for working with a large file.

Ultimately, it is up to you, the designer, to determine what strategy will work to provide the best experience for you, your team, and the user.

Miscellaneous Dos and Don’ts

There is a good rule that goes, “Just because you can do something, doesn’t mean you should.” This axiom applies to many things in life, and certainly to Flash.

• Don’t be annoying. That includes the use of flashing objects and/or rapid color changes. Not only will you cause seizures, but you will chase users away rather than invite them in.
• Flash comes with a preset rainbow gradient. Unless you’re making a rainbow, don’t use it.
• Learn and apply some fundamental design principles.
• If you use sound, warn the user before it comes, and/or allow them to turn it off. There is little worse than a shockingly sudden noise and the inability to turn it off.
• Transparent ads that float above regular website content should have a close button.
• If you intend to spend a significant amount of time with Flash, learn the keyboard shortcuts. You’ll be surprised at how much time they will save you.

Additional Flash Resources

We recognize that this article is not a comprehensive list of best practices or Flash techniques. Fortunately, there is a seemingly endless supply of resources for someone who is seeking to learn more. Here are a few places we suggest:

Adobe’s Flash Developer Center –
http://www.adobe.com/devnet/flash/

Tutorials –
http://www.flashkit.com/tutorials/
http://www.kirupa.com/developer/flash/index.htm

ActionScript –
http://www.actionscript.org/

Below we will explore some approaches to tying a series of websites together.

How EllisLab Handles Family Branding

EllisLab, a recognized technology company, initiates a cohesive look among its products and services with a consistent logo style.

The common styles include:

• the use of the same font
• the use of italics
• a symbol followed by a name
• a somewhat flat simple logo shape
• a white font

They then take creating a cohesive look a step further by using a common layout style on each of the sites

Some of the common layout features include:

• the same tabbed navigation
• the same logo placement
• the same placement of login/register links
• a large visual under the tabbed navigation
• a fixed width layout on a dark background

Finally Ellislab makes sure that its easy to return to the parent site by consistently placing a tab with a link in the upper right hand corner of each website.

How Hershey’s Handles Family Branding

While Hershey’s lets all of its products and corresponding websites have a unique look and logo, they tie their family of websites together with a bar at the top of the page and product finder at the bottom of the page.

Below are glimpses of the “hershey bar” applied to a couple of their websites. One advantage of this top bar is the ability to quickly click to any of the pages found on the parent Hershey’s site.

To easily navigate between the product sites Hershey’s also provides a product navigator at the bottom of each product site.

How Kellogg’s Handles Family Branding

Kellogg’s takes the more subtle approach of the examples featured here. They add the parent branding by simply putting the Kellogg’s logo in the top left corner of the product logo.

Kellogg’s more subtle branding commonalities include:

• the use of vibrant, somewhat primary, colors
• all of the logos are text outline in color
• the overall style of each site is playful and fun
• generous use of sound and animation

How to Maintain Cohesive Parent Branding

Once you have decided upon an approach to drawing a common thread between the parent and children websites, is it good practice to write a style guide that documents each of the design elements that should appear consistently across the sites.

Each company can then follow the design process to identify their unique themes while maintaining the unified look dictated by the style guide.

The Design Process

As we work closely with you to determine your website goals and objectives you can expect to receive the following deliverables:

a summary of project goals and a reiteration of the company’s purpose, objective, or theme

example

a non-graphical layout of the information and tools that will appear on any given page

example

an image of what your website will look like

example

Constant Dialog

It is important to have your input throughout the entire process. We find that constant collaboration helps us create better work and prevents any “surprise” results.

Visit the BB&T bank, located on the first floor of the BB&T building, before the 29th to see it live in person.

Bill Nixdorf started Position Builders as an Internet marketing company in 2000. “Design and the strategies implemented for greater Internet visibility are intertwined,” says Bill. “We have incredible talent in both of these areas. Since there is a need for both services, it only made sense to restructure our offering.” Thus, PaleoSun, Inc., a full service new media design firm was born.

Bill feels that his extensive background in Internet marketing is really going to set PaleoSun apart from the other Design firms that are simply adding Internet marketing to their list of services without much previous experience. “We are still the same great company with the same great people providing the same great services”, says Gary Reckard, Chief Programmer. “People identify Position Builders with Search Engines. PaleoSun, Inc. reflects the full spectrum of our talents.” The Position Builders website can still be found at www.positionbuilders.com.

Too many companies have payed handsomely to have a website built only to wonder why it isn’t doing them any good. In many cases, the best thing you can do is scrap your old website, consider your marketing objectives and rebuild. It’s a painful lesson for most. Many things that are favorable to search engines should naturally be handled by your web developer. This includes but are not limited to:

• the use of style sheets to separate content from style
• the use of code that complies with a set of standards
• clean/minimal code
• code that degrades gracefully

These points should not be afterthoughts. They are basic building blocks that need to be applied from the beginning and throughout the development process. Google provides a laundry list of things you, or your web developer, can do to make your site appealing to the search engine and the people that use it.

One guideline that jumps out at me is “Create a useful, information-rich site.” This is an area where you, the client, can really contribute to the success of your website. An “information-rich site” might include:

• how-to videos
• podcasts
• articles relevant to the website’s subject
• a blog
• help forums

As an added bonus, quality content is more likely to receive relevant backlinks from trusted sources. Google in particular looks favorably on websites that have this type of backlinking.

Additionally things such as blogs or forums often contain “natural language” that people are more likely to use in a search engine. Therefore increasing the potential for your site to be found by people not using the more formal terminology found in your polished website copy. This is not to make your polished content sound useless. Word selection and word weight is actually an art within itself and can be a real asset to your websites visibility when applied appropriately.

In conclusion successful Internet marketing involves an integrative approach from the day you start planning your website. This article merely skims a few of the things you can do improve your Internet visibility and should not be considered a comprehensive approach to marketing your website on the Internet. Take the time to consider your Internet marketing objectives before going to production.