Adobe InContext Editor

Adobe's new content editing feature, InContext Editor, looks like it will be a very useful tool for online, live editing of websites.  Web clients can update their own content as defined by the Web designer/developer.  I'm excited to test this feature with some existing clients, as well as begin to offer this live service to potential new clients!  And, best of all, IT'S FREE!!

Easily update web content online

"Let content contributors make website edits so you can focus on design. The Adobe® InContext Editing online service makes web content maintenance easy for designers and content editors alike — no software installation or training needed. Web designers can maintain the design integrity of their sites while enabling clients to make their own web updates from virtually any major browser."

Adobe.com

Gradients

sixrevisions.com — Using color gradients, or effects that transition two or more colors with one another, is one of the most popular design techniques in web design. They're easy to create yet hard to get right. In this showcase, you'll witness some of the best examples of using color gradients in the hopes of inspiring you in your own designs

Gradient Use in Web Design

Blog Directories

Directory listings are great way to expose your website or blog. You can add your listing to one or to many different directories depending on the the type of site and on the directory specifications. Some directories are free, some require a monthly fee. It may be worth the expense to add your site to a paid directory if it will incresase traffic to your site! Search google for industry specific directories or general directories. Links to your site from multiple places will increase your ranking on search engines. Search Engine Optimization or SEO is extremely important to the success of your website. Hiring an expert in website optimization is a great way to get started!

A few blog directories to check out:

http://www.digg.com/

http://www.bloghub.com/

http://www.bloggopedia.com/

http://www.blogorama.com/

Twitter and LinkedIn are also great resources to network your blog or business:
http://www.twitter.com/
http://www.linkedin.com/

Bad Web Design!

As a designer, one hopes to create eye-catching and innovative design, fully functioning, dynamic websites, and thought provoking animation.

An artist hopes NOT to show up on the following website: http://www.webpagesthatsuck.com

Take a look at the lists of bad web design going back 13 years. I've used it as a resource in classes before undertaking a lesson on web design.

A site that is badly designed or uses confusing navigation could wind up on this site. I've actually noticed a few beautifully design sites listed that have ridiculous and confusing navigation.

Just because you know how to create a floating, blinking drop down menu that grows flowers and talks, doesn't mean that you should.

Intake Forms

Creating a contact form to use on your website is a great way to collect information from potential clients. Rather then simply listing your email address or phone number, the contact form will require the user to enter important information like name and number, and also give the option to ask for extra info like comments or questions. The simplest way to create a form will require the viewer to send the email themselves, while using a .php file to send your form will automatically send you the information as soon as the send button is pressed.

Don't know PHP? Don't worry, there are many websites available that will create your form and the PHP file for free! With a few alterations to the .php file, you can customize your form and add extra intake fields.

For example, I use a site called The Site Wizard to create forms. It will quickly generate a form to use, but has limited intake information. You will need to create an extra .html page to use for your ERRORS and THANK YOU pages after someone hits send. If you need to add extra, customized information, then you can copy and paste the existing form lines, and change the name or question. After you do this though, you must alter the .php file so that the new lines get sent. Basically, read over the PHP and everytime you see a line that refers to one of the intake form boxes, duplicate that line and change the name to match your new box. For example, if there was orginally Name, Address, Email, and Phone, but you added Comments, then you would need to find everywhere in the PHP that Name, Address, Email, and Phone are listed, and create a new line for Comments. If you don't alter the PHP, and only the form, then the new info you have added will not be sent to you in the email.

It might help to read up on PHP before you tackle it, unless you have experience with other programming languages and HTML.

No Flash Player!!

It can be very frustrating as a web designer to create amazing Flash content, only to find out that many of your viewers do not have Flash installed.  There are a couple ways to get around this. 

1.  If you have a site that is completely designed in Flash, then you will need to use the javascript option listed below.  The reason for this, is that unless you want a single image to replace your entire site, you will need to redirect the user to an alternate page that does not contain Flash. This option creates more work for the designer/developer because you'll actually be constructing two separate sites.. one for Flash, and one for HTML alone.  

2.  This second option works well for any site that has Flash content only as a header, or other singular part of a site.  The majority of the site in this example should be HTML, with limited Flash content added.  This technique uses a line of HTML code that will swap the Flash content for an image anytime that a Flash Player is not detected.

Links and Code for Flash Detection:

(Also try searching Google.com for Flash Player detection)

Adobe Flash detection kit

Flash detection script for Javascript or HTML

Video on the Web

Video on the web seems to get more and more popular every year (or maybe even every week). Nearly everyone that has ever been on the internet knows about youtube.com, and probably also about the ability to post video onto social networking sites like facebook.com and myspace.com. These are good resources to share videos, but what if you need professional quality, streaming video embedded right onto your website?

This is the question I'm looking to answer.. There are many video players out there that can be embedded into a website, but most of these seem to be expensive and some are difficult to use. Are there any FREE video players for the web that can be embedded on your site AND still look nice/play properly/etc? Youtube works fairly well, but your website is transformed into an advertisement for youtube. There are ways to embed an .mov or .mp4 directly into your webpage, but it can be a little tricky to get the code just right. Simply embedding it onto your site probaby won't work. A couple links to try:

http://www.2-popforums.com/forums/showthread.php?

http://library.creativecow.net/articles/chaffin_abraham/embedding-quicktime-movies.php

You can easily create a link to your movie that should make it play in a new window. Create text or an image to use as your link and then link to your movie file (.mov or .mp4) using the properties window (Dreamweaver). When you preview in your browser, the movie should play in a new window or download to the viewer's desktop. Use .mp4 to get better streaming capabilities.

One example of a free video player that seems to look nice and play pretty well:

http://flowplayer.org/

It also has an option to buy the software for customizable player options.

If anyone knows of a great free player that I should know about, tell me!

Background Textures

You can create interesting textures for website backgrounds quickly with Photoshop. Here are a few tips to get you started:

1. Size the document appropriately to match your website. For example, if your website is 1000 pixels wide by 800 tall, then you want to make your background slightly larger than that and possible much wider if your site will be centered on the page. You might also want to match up your edges for seamless image tiling if it is a smaller image.

2. There are several websites with free textures that you can start with. One that I like is http://www.cgtextures.com . The site allows quick and free downloads of a wide variety of images. Either download a texture to start with or simply choose a background color to start with in your Photoshop document. You could also use a photograph of your own.

3. Step three will involve Photoshop filters. If you are happy with the downloaded texture, as is, then you could skip this step. If not, then try a few of the following filters on either your downloaded image texture, or onto a solid layer in Photoshop.

Filters to try: Colored Pencil, Dry Brush, Film Grain, Angled Strokes, Crosshatch, Noise & Dust, Film Grain, Crytallize, Pointillize, Grain, and Texturizer. Use one or combinations of several to get your desired effect.

4. After the desired look is achieved, you can use Hue/Saturation to adjust the color and tone of your background.

5. Finally, flatten the image and save as a low resolution .jpg image, and you're ready to add this background to your website.

**To match up edges of your project, use Offset, under the Others filter heading.

Web Design - Adding a Drop Shadow

It recently came to my attention that many websites feature a drop shadow separating the body from the background. The body of the site would be centered on the page and the background would consist of a solid color or a pattern (.jpg image file most likely). The drop shadow creates a nice feeling of depth and is a eye-catching divider between the content of the site and the background. If set up properly, the drop shadow will slide with your website as the browser window is sized larger or smaller. This technique can be accomplished in a couple different ways.

Example One:

Create a new document in Adobe Photoshop sized accordingly with your website content (If working in Dreamweaver, I recommend converting to a centered table). You will create a new layer and draw a rectangle slightly smaller than your entire document. Using Layer Styles, create an Outer Glow in the color of your choice. Save the image into your website images folder as a .jpg with a low resolution (72 should do). In Dreamweaver, select your entire table and locate the background image option in your Properties Window. Add the .jpg you have created and then under Page Properties, change the background color or add a background image file to coordinate with your website content.

Example Two:

This example uses CSS to create the effect. Rather than writing it all out, I'll simply insert the following link that outlines the instructions.

http://www.webdesignerforum.co.uk/index.php?showtopic=307