Digg is a technology news website that combines social bookmarking, blogging, RSS, and non-hierarchical editorial control.

When discussing site design and technology with clients, we always discuss the use of Adobe’s Flash technology in the site. Adding Flash can give a site a tremendous visual kick:

• Smooth, slick navigation menus
• Controlled page loading and transitions
• Motion graphics, sound and video
• Increased control over design and especially typography

Flash can also accommodate functionality that cannot be achieved as well using other methods:

• Application interfaces that require variable graphics at run-time
• Remote calls to the server without page refresh
• Dynamic navigation menus

Some Considerations

Before using Flash there are some considerations to make. Flash introduces additional technology to the site architecture that requires the Flash Player Plug-in to be installed on the user’s computer. While Flash has considerable market penetration, over 90% for version 7.0, this still may present accessibility issues. The newest version of Flash, version 8.0, has significantly less market penetration.

Flash can also affect usability. When a site is built as one Flash movie in one web page, the browser’s back button is useless for returning to a previously viewed page in the site. This can be compensated for by additional programming, but most sites do not fix this usability issue. Building a site as one movie can also create a large initial load time. Some developers handle this gracefully with clever loaders, but this still makes a user wait.

Flash is more expensive to develop and more difficult to update. Animation sequences require a lot of man-hours to create and are subject to more revisions by clients because there are more details to criticize. Flash movies are compiled files, they cannot be directly edited. One must edit the source file and recompile the web formatted movie. This can be a real pain if you have other resources work on the site. Source files can be lost and fonts may not be available, making editing problematic.

Flash is often the best solution. Here are some useful benefits of using it in a site:

• If user experience is a big part of your site, nothing is better than Flash for creating awesome experiences. Cutting-edge sites combine interactivity, sound, and TV-like video presentation capturing the users’ attention.
• With all the recent hype about AJAX, Flash has been capable of making remote calls to the server for years. Rich Internet Applications provide great usability and experience.
• Flash is often more browser compatible for interface interactivity than DHTML.
• Displaying video as Flash is better than having a Windows Media Player, Real Player and QuickTime versions with the need for their respective player plug-ins.

Each version of Flash gets better with more features. ActionScript, Flash’s programming language, is more robust than ever. The seamless incorporation of video is revolutionary. As more users have the Flash Player plug-in, always consider Flash.

Benefits vs. Cost

When gathering requirements and planning a site, measure the benefits compared to the cost. Here are some specific requirements to consider:

• Will users have, or be able to install the Flash Player Plug-in?
• Is Flash going to create a technological roadblock to content within the site?
• Is Flash adding something special that cannot be done without it?
• Who will be making edits to content in the Flash movie(s) and how often does that occur? Flash can be developed to load data from external files which may overcome the need to recompile the web movie files. This should be considered if updating is a requirement.
• Do other developers working with the site have the necessary experience to successfully integrate and maintain the site containing Flash?
• Is the budget sufficient to create and implement Flash correctly?

Sometimes using Flash makes sense and sometimes it doesn’t, but one thing’s for sure there are more Flash sites than ever before and that trend isn’t going to change.

Juxt Interactive, innovative with design and technology.

Here's why:

Nestea Ice and Just for the F of It,

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

There are also examples for using float and selectors.

http://css.maxdesign.com.au/listamatic/

It seems data security is becoming a big part of the projects I work on. Identity theft has demanded increased security measures for the storage and transportation of personally identifiable information (PII). PII can include name, country, street address, e-mail address, credit card number, Social Security number, government ID number, IP address, or any unique identifier. The American Institute of Certified Public Accountants (AIPCA) and Canadian Institute of Chartered Accountants (CICA) have created an extensive privacy framework that a lot of companies are adopting. The Payment Card Industry has also created a Data Security Standard based of requirements developed by VISA, MasterCard, American Express, Discover and JCB. These standards and requirements affect e-commerce, travel, authentication, human resources, medical, and other similar applications on web sites, intranets, extranets, other client server and legacy systems.

If your current, or next project collects and processes PII data, do yourself a favor and find out the requirements and necessary steps to meet them. Many of these requirements are fairly new and changing. Clients may not event know them, but if something happens and losses occur, as creator, or administrator of the application you could be liable.

Since 95%+ web users are viewing sites using PCs and MS IE, wouldn’t it make sense to design web graphics on the same type of computer with similar monitor color temperature, resolution, aspect ratio, browser and gamma? Designers I work with often do not like how their work looks on PCs when compared to Macs. Web sites meant for public consumption should be designed for PC display. The easiest way to make things look good on a PC is to design on a PC. If you love your Mac, you can create designs that view well on a PC, but there must be some compensation and adjustment.

Gamma

Pertaining to computers and the web, gamma is the tonal curve that a monitor displays: shadow detail, highlight detail, contrast and color temperature. Default gamma for a Mac is 1.8 while a PC’s default gamma is 2.2, much more contrast. You can change a Mac’s gamma to 2.2, but it just doesn’t seem the same. Shadow detail viewable on a Mac is often lost on a PC, same for highlights.

Brightness

PC monitors are generally brighter and flat panel monitors are even harsher. When creating graphics on a Mac the brightness needs to be adjusted.

Color

PCs are much colder, or bluer by default. Be cautious about skin tones, and earth tones such as olive, taupe, dark red, and ochre.

Scale

Since Mac went to the wonderful wide screen OS X monitors, some designers have had difficulty with scale. Sure it’s easy to say my layout is 750 pixels wide, but on that huge screen designers new to that environment can design elements larger than they expect them to look. Mac monitors have a default resolution that does not match the conventional 800x600 or 1024x768 sizes of most users’ screens. It is important to check size on a PC. Type and detail in graphics may be difficult to read, or not be in balance with HTML type sizes.

Type Anti-aliasing

Mac’s display web type anti-aliased, not bitmapped. Some new PCs also have this option as a default setting. Most users do not view sites this way. It is important to see how type looks bitmapped. It affects the clarity and size of the characters and general copy volume. If type is supposed to be bitmapped make sure it is checked on a PC to see if it has the desired appearance.

Fine Tuning Color

Color management on the web is a difficult battle. There are huge variations between monitors, settings, and color profiles on user’s computers. Even different browsers can render colors differently.

The best approach is simply to test on various computers. What may look good on your screen may not on others. Remember, acceptable is not perfect; there has to be some compromise. Create images that look the best for the widest number of users. Techniques that work with print color management are not standardized for the web.

I’ve owned and used both Macs and PCs. I love the Mac brand. The machines look great. The GUI is slick. Steve Jobs is cool. Their stock price is way up. Why do I still like PCs better? I have designer friends that will fight over dissing a Mac. I ask them, “Have you ever used a PC long enough to be comfortable with one?” “No”, they reply. Such loyalty. If it weren’t for font availability and compatibility, and this passionate loyalty, Macs would not exist today. Since the Intel PIII processor, PCs do graphics as just well. 

I'll admit Microsoft does make some really clunky GUIs for some of their software. Ever use PowerPoint, or for heaven's sake Visio?

Now everybody is excited that Macs can run Windows. Why is that such good news if the Mac OS is superior to Windows as Macs pundits tout? Could it be that deep down Macs lovers are tired of being the minority?

Can people finally have their cake and eat it too? Imagine a cool guy at Starbucks on his Mac laptop wearing his headphones. The stereotype is creative, iTunes loving, individualist. Further investigation reveals he is running Windows and listening to some right-wing podcast while doing his taxes. What is happening?

My prediction is the Macs OS will become another OS one can run on their Dell. Open Type fonts will take over. Steve Jobs has a coronary and people will be sitting around remembering the good old days when they lost four hours of beautiful design work because their Mac crashed again.

It’s tax time. I think I’ll buy a Mac laptop and a cappuccino, but only if I get one on sale.

A question I sometimes hear when first talking with prospective clients is, “Which technology platform and programming language is best for my site? Then, in the same breath they’ll say, “I heard Footron Version 3.0 is the best.”

We’ll examine some factors to consider when making this important decision, but first a few truths to think about.

• You can do almost anything you want to with ASP, ASP.NET, PHP, RUBY, PEARL, JSP, PYTHON, CGI, Cold Fusion, or any other popular web programming language.
• Microsoft Internet Information Services and Apache are both good web servers.
• Microsoft and SUN are good platforms.
• Most web languages have similarities since they have been derived from lower level languages like C, C++.
• Some are more prevalent than others.
• Some are more robust in features than others.
• Some lend themselves to rapid application development (RAD) better than others.
• Some are more robust in features than others.
• There is no best. It depends on the project.

Site Requirements

A site’s requirements are derived from its purpose, the resulting functionality and audience demands. If the site contains all static content that simply acts as an online brochure, the platform is not very important. HTML, which is what creates web pages, is platform independent. The web server does not need to do much work to display the site. If your site has any dynamic content, a content management system, or e-commerce, then more importance is placed on the platform and web server’s role.

Functionality for such features is provided by programming from scratch, purchasing pre-built applications, or leasing services. While making these choices is beyond the scope of the article, the platform to choose is tied directly to which of these alternatives are used. If you’re programming from scratch, there is flexibility to use any reasonable web platform. Leased services are also somewhat independent of the platform of the web server because of APIs and web services that allow for interoperability. If you buy a content management system or shopping cart the platform is largely determined by that application. Any other applications used on the site should be of the same platform. It can create a lot of problems to mix technologies. Don’t to it if you don’t have to.

The amount of traffic to the site also influences platform decisions. Sites with few visitors (5-2000/day) can usually handle the load with one web server and single tier architecture. Sites with a lot of traffic (2000-1,000,000+/day) may need several servers to distribute the load and processing. Some technologies scale better than others.

Where’s the site going to live?

A site resides on a web server. How it's developed is determined by the type of server, or the type of server is determined by how it's developed. Companies can host their own sites, lease dedicated servers, or lease space on shared servers. These options come in all platforms and are closely priced.

There are basically two factions of web platforms: Microsoft and everyone else. Apache is the most popular web server. It is most often found on non-Windows computers (Linux, Unix, Macintosh, Sun). Second, is Microsoft’s Internet Information Services, IIS, it follows Apache in market share across the web, but leads in business use because of Microsoft’s focus on business computing and development.

Who’s going to work on it?

Vendors are usually specialized and have a platform and programming language of choice. They sell what they know and can usually justify their preference. It is important to make sure there are other resources available to work on the site than just the vendor that built it. Choose a technology that has an abundance of development resources available in your area.

Common Choices

Microsoft Internet Information Services, IIS (Windows) Languages
Active Server Pages, ASP – Microsoft’s core web scripting platform can be developed using VB Script, a language derived from Visual Basic, or JScript, JavaScript. ASP has essentially been replaced by ASP.NET, but there are a lot of sites still on the web using this technology.

ASP.NET – Microsoft’s pride and joy. A true paradigm shift in how web sites are developed. The .NET framework provides a huge arsenal of objects (namespaces) with robust functionality and the speed of compiled assemblies versus interpreted script. ASP.NET can be programmed in C#, VB, and JavaScript.

PHP – This is the most popular and arguably the best open source scripting language on the web today. It's mostly used on non-MS web servers, but there is a version for IIS too. It is also made to go with MySQL database server the most popular open source database server. The language has nice syntax and structure with quite a few built in objects, but nothing compared to ASP.NET.

Pearl – Pearl was very popular in the open source world, but it has been surpassed by PHP.
 
Ruby - Ruby is the new kid on the block. It is gaining popularity because it’s easy to learn and Ruby On Rails, a RAD framework, created by 37 Signals. Purists love its simplicity.

Cold Fusion – Cold Fusion is part of Adobe’s suit of development products. It is a super easy to learn, RAD system that uses a tag structure, like HTML, to provide functionality. Before Macromedia (now Adobe) purchased it, Cold Fusion’s future was uncertain. They kept it alive and Adobe plans to make improvements and reestablish it as a major web development alternative.

Common Gateway Interface, CGI – This was the first technology to provide server functionality on the web. CGI apps are programmed in C, C++, Java and other primary development languages. This technology is still out there, but outdated.

Apache Web Server Languages
ASP – There is a version of ASP created for Apache, but why? It’s kind of like trespassing.
PHP – This is PHP’s true home.
Pearl – ditto.
Ruby – ditto.
Cold Fusion
CGI

Enterprise Systems

Large businesses today are using software systems that manage information and provide collaborative tools for a wide degree of business services that include web publishing. It gets really complicated on projects of this scale. IMB’s Web Sphere, Oracle’s JD Edwards, Sun’s J2EE, and Microsoft’s Family of Servers all have web publishing components. There are hundreds of smaller development firms that have their own systems built with several of the languages listed above.

Most Importantly

Whatever platform is used the application can be developed well using best practices, or end up being a mess.  When choosing a vendor and subsequent development technology look for a team that can deliver a well designed and executed application while keeping things simple.

Feast your eyes on these selected works.

http://awards.fitc.ca/pc/

Forms are always a pain. They are difficult to design and difficult to make user-friendly. Here are a few rarely used tags that can be incorporated into page XHTML mark-up that will improve the usability and accessibility of forms.

Label

<label for="firstName">First Name</label><br />
<input type="text" name="firstName" id="firstName" />

The label tag used in the code sample above relates the descriptive text to the form control. This is important for screen readers.

<input class="input" type="checkbox" title="Select Color" name="color" id="color1" value="red"><label for="color"> Purple</label>

When used with checkboxes it allows users to click on the text to check the checkbox, similar to desktop applications.

Fieldset & Legend

<fieldset>
<legend>Pick a Color</legend>
<input type="radio" id="color1" name="color" />
<label for="color1">Red</label>
<input type="radio" id="color2" name="color" />
<label for="color2">Blue</label>
<input type="radio" id="color3" name="color" />
<label for="color3">Green</label>
</fieldset>

The fieldset tag is used to group form fields. With a little CSS it works well for humans and machine readers alike. The legend tag provides a way to give the grouping a title.

Optgroup

<select name="Colors">
<optgroup label="Reds">
<option>Crimson</option>
<option>Brick</option>
</optgroup>
<optgroup label="Blues">
<option>Azure</option>
<option>Sky</option>
<option>Navy</option>
</optgroup>
</select>

The optgroup tag groups options in drop down lists. They can have CSS styles applied to them.

Other Techniques

Tab Index

input type=”text” name=”field1” id=”field1” tabindex=”2” />
Adding the tabindex attribute to a form control sets the tab order. Make sure your form element tab in the correct order for those who do not use a mouse.

Access Key

<label for="field1" accesskey="f"><span class="access">F</span>ield 1:</label> <input type="text" name="field1" id="field1" accesskey=”1” />

CSS    .access {text-decoration:underline;}

Adding the accesskey attribute to a form’s label control allows users to press a key to focus the form element – again useful for those who don’t use a mouse. To indicate what the accesskey is for a form, underline the corresponding character in the field’s label.

Nice article on common sense SEO and site content published on the Internet Search Engine database site.

http://www.isedb.com/db/articles/1401/1/SEO-versus-Marketing:-The-Fine-Art-of-Copywriting

Back in 2003 Microsoft was sued by Eolas Technologies for a patent infringement. The technology in question is how Internet Explorer handles the inclusion of objects (ActiveX controls) such as Flash, video and Java applets in web pages.

On April 11, 2006 Microsoft is scheduled to release an update that makes the browser compliant with the lawsuit’s requirements. All IE browsers shipped after that date will also have the update installed. This change will affect thousands of sites with embedded content. This content will no longer automatically display in web pages. Users will have to click a prompt to view the content. This will greatly affect the user experience.

The Fix

Sites will have to change how objects are included in the HTML mark-up to prevent this rude disruption. Click here for a Google search on the topic. Here are some resources with more information:

MSDN Instructions on How to Activate ActiveX Controls

MS Knowledge Base Article

Adobe Developer Center

What about other browsers?

They are also in violation of Eola’s copyright, but they haven’t been sued yet. Netscape, Firefox, Opera and Safari have not done anything. Time will tell what will happen to them.

Top 6 domains in terms of page-views in February 2006 according to Media Metrix were: 1) Yahoo, 2) MySpace, 3) MSN, 4) Ebay, 5) Google, and 6) Hotmail.

4 of the top 6 sites (MySpace, MSN, Ebay and Hotmail) run on IIS and Windows.

Linux and Apache may have market share, but enterprise, mission-critical sites rely on Microsoft

Source: Scott Guthrie

I ran across this excellent resource for building standards compliant web sites using ASP.NET 2.0. The information presented here is useful for any platform. It covers doctypes, mime types, broswer issues, accessiblity and some good tips for forms.

I read so much Microsoft bashing online it was refreshing to read how they have addressed a lot of problems with server control rendering in the new version of ASP.NET.

While watching Bela Fleck the other night, I was thinking about how precise and structured the music was yet organic and improvisational at the same time. This balance is the core of a good jam and exemplary of building a good web site. There are logical, learned aspects and emotional, intuitive ones. In web development project planning, database design, programming, and testing are usually the methodical parts while the graphic design, content creation and rich media are more exploratory. My favorite aspect of web development is the blending of technical and creative activities into one homogeneous entity. The better this happens, with careful balance, the better the results.

Both technical and creative people can learn from each other. Technical people thrive on structure, but when creativity is added amazing things can happen. The opposite is also true for creative folks. Applying structure to their process can allow them to concentrate on being creative while maintaining uniqueness to their approach. Technical folks can improve their problem solving skills by approaching tasks in new ways. Try having a developer learn a new programming language, or code something by hand not using the software they usually use. Creative folks may be able to improve hard skills such as using complex software and networks. Have a designer work with someone who is organized and efficient. Pair a creative with a technical person to share knowledge. Learning to be proficient within one's working environment allows them to concentrate on the core problem at hand. Being independent of one’s crutches fosters original thought. Different perspectives result in different solutions improving overall team performance.