CSS Decorative Gallery

The four principals of good landing pages are:

· Fulfill expectations

· Give Them What They Want

· Make it easy

· Make it simple

Well, that sounds like common sense, right? Such simplicity is actually really difficult to streamline when you have a lot of information to share. Extensively knowing the background of what you’re selling makes it hard to present it in a way that resonates with the people on the other side- who don’t know, but may want to learn more. That’s why people seek consultants, like the ones at II, who have practice with good strategies and solutions. Well, enough stroking, back to the landing pages:

You need to remove distractions and make your conversion goal obvious. There should really be no superfluous information at all. You’re making an offer, and collecting information. That’s it. You don’t want any distractions, because they will reduce your conversion rates.
Engage the respondent, collect the smallest amount of information possible to contact them, then follow up personally – you’ll gain more “face” time to sell more information.

Be Clear
The brand should be obvious – a clear logo not competing with anything. The benefits should be upfront – what’s in it for them if they respond to the CTA (call to action). And speaking of CTAs – that needs to be loud and clear, too. By loud, I rather mean large.

White Papers

White papers are a great way to get your foot in the door and collect information. They give you a forum to explain your benefits and what sets you apart from the competition. Since the title is often the only source of enticement, follow rules similar to creating a good blog title to pull readers in.

· Communicate A Benefit

· Ask A Question

· Use Key Words Pertinent To Your Sell

· Use Power Words Like ‘Discover,’ ‘Easy,’ and ‘Secret’

· Lists Like ’10 Work Flow Killers’ or ‘Top Three Signs That It’s Time To Update Your Brand’

Offer compelling content that will entice people to learn more about your product or service. Iterate your main selling points.

A Book And It’s Cover

Make people feel comfortable about giving you their information. The site should look professional and clean. A poorly designed site will be perceived as a less reliable company. Credibility is perceived by how you present it.

Is Flash OK To Use In A Landing Page?
It depends. Don’t make ppl wait. A movie with good info is good, but let them make the decision to watch it. Don’t make them sit through it before offering a call to action, because most people won’t.

Should The Landing Page Be Part Of The Website Or Separate?

Separate. This provides more control and flexibility. And it’s easier to test. Websites have many uses – for the press, shareholders, ect. Landing page should have only one purpose, and they shouldn’t link to a home page, or anywhere else, until they are offered a call to action, and either participate or refuse to convert. Other links or options besides the one capturing information are considered bailouts, and they will lose your chance to capture lead information.

Segment People As Soon As Possible, But Only If It’s Pertinent

There should be only be more than one option upfront if you are trying to segment people before you capture the information. If they are recieving the same end result – segment later. If, for example, you have two white pages for two very different target audiences, then perhaps you should segment first.

Thank You

When user hits submit, they should see a thank you page. At this point, you can digress a bit and invite further engagement, chat, link to the website, ect. – not before. But a Thank You page is essential, so they have verification that the information they sent isn’t lost in the vortex of interwebs.

I use landing pages with my company to try to draw leads for people with different marketing and trade show needs. What do you use landing pages for?

The Advantages

Frameworks can make the designing of tableless websites much easier and quicker, because some are based on a streamlined grid system – 960 is a good example. Frameworks can decrease development time, especially once you become familiar with one or customize it to your needs. They work well with code generators and visual editors. And, namely with a CSS Reset Framework, they ensure cross-browser compatibility, because all the compatibility issues have been worked out – it’s like creating a blank slate across browsers for your web designing. You can increase productivity, and avoid forgetting important pieces of code. Frameworks can also streamline workflow when working in a team – everyone is starting with the same base.

The Disadvantages

The obvious disadvantage is that you can lack flexibility, because in setting up a framework you are also putting certain limitations in place. You may be adding additional HTTP requests, which can add to your sites load time. And unless you are customizing these frameworks by taking just what you need (adding time to what is supposed to be an efficient process), you can end up with bloated code source. The CSS can not be set up semantically, which can make them less readable and editable in the future. Using frameworks that you did not create can also cause you to inherit someone elses bugs, or give you a base of code that you may not be familiar with.

Usage

Frameworks don’t have to be monster files with a ton of code. They can also come in the form of a css template, which are more unique and pared down. There are some tools that have been developed to help you create these files, such as YAML and blueprint. Yahoo offers some prepackaged solutions such as fonts, grid, and reset which can be bulky but comprehensive. And this is the wiki list for your resource.

Which side of the fence do you sit on? Are you for or against frameworks, and in what capacity? What’s your experience with them?

We are all guilty of procrastination, especially with social networking and the convenience of the internet. But it is self defeating and hurts your production.

I stumbled across a wiki-how and found it helpful. It points out that you don’t “have” to do anything. Everything is a choice, and you have the power to do it, or not do it. This helps so that you don’t feel victimized by the task. It also stresses focusing on the beginning action, not the daunting or intimidating end product. These seem like common sense ideas, but it’s easy to forget them when your inner conversation is habitually thinking in such a negative way. Check out the complete list here:

How To Overcome Procrastination

American Way suggests that you work on procrastination everyday – testing what works and what doesn’t. You build up an emotional and mental toughness by consciously focusing on overcoming this problem that everyone has to varying degrees. Build up good habits to eventually overcome the bad habits. Read the entire Art of Procrastination here.

It seems simple to just say ‘put your shoulder to the grindstone.’ Procrastination seeps into our lives often unseen, on a subconscious level. Personally, my biggest agitator for such habits is my own self-defeatism, and my want for things to be ‘perfect.’ The best designers that I know aren’t mulling on this idea of making their work the best – they aren’t thinking of the process at all, so much as they are just moving forward with diliberate action. Don’t think, make!

One way I have been getting more things done is by modifying my lists. I use a pad of paper, a ruler and pen to make a total of 14 boxes – seven days split in two for personal and work related tasks. Keep the space small, so you have to use discretion with what you put in the space. Then I fill out what I have to do, while being mindful to not put more than can actually be done in a day. This may force a task to be broken up into smaller parts. When I see my week outlined, I know I have to complete the tasks each day, or I will get behind. If you have any list making habits, I’d be interested to hear about them.

mySound.attachSound("idName")

You need to call sound.start to have the music clip start playing. With this object, you are able to mute, start, and stop the sound without these actions being directly related to the timeline. I had made a movie using this object, and when the movie replayed at the beginning, the sound loop doubled over itself. I tried to clear the sound at the end with a stop function, but then the sound didn’t stop at all, the ‘mute’ button was rendered useless. In the end, I hacked a solution, to just loop the movie back to the second frame, as opposed to the first frame where the sound is attached. The reason why the sound was acting in this way is because the attachSound object is used to control the sound and get information about it. It acts as an interface between your code and the sound being played. If you delete it, the sound it controls remains and continues to do whatever it was doing, but you no longer have control over it. I think that this is a good thing to understand when beginning to work with sound in Flash. Do you have any tips to share?

If iMovie is not in your dock, you can find it in your Applications folder.

Create a new project.

Import a song or some sounds that you wish. You can overlap up to 3 channels, but most likely, you’ll only use one. If you click on the audio icon, it will bring up your iTunes files by default. Here you can preview songs, then drag one to a blank channel below. Or use Shift – Control – i to import a sound. You can also drag and drop a sound file from your desktop. You can also record sound to this space if you have a microphone that connects you your computer. Now you have the sound file ready to be edited.

Editing Sound Levels

Go to View > Show Audio Clip Volume Levels (Shift – Control – L) and View > Show Audio Waveforms (Shift – Control – L).  With the volume levels visible, you see a strait line across the channel in the timeline. You can click anywhere on that and drag it up (louder) or down (softer) to change the sound levels. If you make a mistake, choose the point so that it’s yellow and go to Edit > Clear.

Cutting Music Clips

The playhead is the down-pointing arrow that shows you the point in time within the sound file. Place this where you want the file cut and go to Edit > Split Selected Audio Clip At Playhead (Control – T). Then you can select and delete the excess bits. Make sure your sound clip starts at 0:00:00, or there will be some silence added to the beginning of the clip when you save it.

Saving An iMovie file As a Sound File

When you are ready to save, go to File > Share (Shift – Control – E). Choose the Quicktime Icon at the top of the drop down menu. Then, from the drop down, choose “Expert Settings.” Click Share. A new window pops up, but before you save, choose “Sound to AIFF” or “Sound to WAV,” from the Export drop down menu.

You are done. Now you can import the sound file to your Flash library. Please check back for posts on handling sound with ActionScript. Ciao for now!

Actions give you the ability to record a set of tasks, then execute them on multiple files. The advantage, besides having to ‘click’ a lot less, is that these actions get played out very quickly and save a ton of time. Some senanarios where you might use this:

· You have many pictures that need to be cropped to the same size and saved for web optimization.

· You want to apply the same set of filters, with specific percentages, to a number of files.

· You frequently save psds, then flatten the file and save as a pdf. (You flatten the file before saving as a pdf, because it will reduce the size of the pdf).

· You want to paste a logo in the same spot on many documents, then save them.

To do this, go to [Window] in your Photoshop menu. Choose Actions. Here is a screenshot of my actions window:

I wanted to show you the entire window, but pay attention only to the row of icons at the very bottom. From left to right:

The square is to stop recording an action.

The circle is to start recording. You only use this if you are editing an action that you have already created.

The right-pointing arrow is ‘play’ – to execute your pre-recorded action. You will have fun clicking this button a whole lot, repeatedly.

The folder is to create a ‘set’ of actions.

The white square with the page flip is to create a new action.

The trash is self explanitory.

To create an action, get to the point where you’d like to begin recording and choose the ‘New Action’ icon. If you forget which this is, mousing over the icons will reveal their purpose. Name your action something unique that will help you identify what it’s doing. Click ‘Record’. Now execute everything that you’d like to be recorded, and click the stop icon. Now you have your recorded action. In the next file where you want to run this action, get to the point where you’d like to ‘play’ these actions, and hit the play button. That’s it!

Extras: You can even share actions with different people and machines. They are stored on your hard drive in the Photoshop folder: [My Computer > HD > Applications > Adobe Photoshop > Presets > Actions]. But please keep in mind, just creating an action will not store it in this folder. You actually have to create a set for it (remember the folder icon above), and then choose ‘Save Actions‘ from the pop-out menu of the Actions window (upper right corner). Then you can put the new .atn file into any Actions preset folder, restart the program, and the action will be there.

Do you already use actions? What do you use them for? Also, comment with any questions, and I will try to answer them!

Most designers are well versed with setting up the color mode when creating documents – using either RGB or CMYK depending on the output. In photoshop, it’s [Image > Mode > RGB or CMYK]. In Illustrator, it’s [File > Document Color Mode]. However, to get a better idea of what the final output will look like,* you can make several adjustments in your settings.

*Please note, you will never get an absolutely accurate reading of the final color. There is always deviation. Print is especially difficult, but even with the web, where the end product is pixels, there are still deviations of color from different screens.

Proof Setup

In Photoshop, [View > Proof Setup] will yield choices to view the artwork in either a plate preview (for printing) or you can choose to view what the document will look like on a Mac vurses a PC. Use Control – Y (Apple – Y) to toggle between the view of Macintosh RGB and Windows RGB. Use Shift – Control – Y to see if there are any gamut warnings – meaning that the color on the screen may not be printable.

Color Settings

Most likely, you want to be designing in sRGB IEC61966-2.1, as opposed to RGB 1998 or another option. Sean McHugh explains, “sRGB is a RGB color space proposed by HP and Microsoft because it approximates the color gamut of the most common computer display devices.” This setting is also most accurate to most printer gamuts. To access these settings in Photoshop or Illustrator, go to [Edit > Color Settings]. In Photoshop, it is also available in the Advanced Settings when you create the document.

These two basic settings can make work easier for you, your production artist, and your printer. I hope this was helpful. I will try to explain more about color management in the future. Thanks!