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.

http://www.metacafe.com/

DropSend helps you do 2 things:

• Send files of up to 1 GB
• Store files online

Handy-dandy!

On Wednesday, March 22, 2006 I posted comments on the closing of Arnold Worldwide in St. Louis and the state of the ad market here.

In today's St. Louis Post-Dispatch newspaper there is an article about the changing industry. I wanted to bring the article up because it supports some of my observations.

It also has some vague information on Kupper Parker Communications morphing into a new entity. Too bad Kupper isn't as good at producing good ad work as he is at corporate shananigans.

I failed to mention in my post that two large ad firms are recent new comers, J. Walter Thompson and VSA Partners, but I'm not sure how much creative is actually produced here.

I was involved with a project last year that brought to light a major decision that needs to be made early in a project’s initiation.

Do we build onto our existing application, or start from scratch?

As developers we always would like to start with a clean slate, but web projects are often part of ongoing operations and legacy systems greatly influence the how they are planned. There are times to extend systems in place and times to begin anew. Too many times companies throw good money after bad. Let’s look at some things to consider.

How Old Is It?

Spend resources to maintain systems first. If the platform, application, database, infrastructure or hardware is deprecated, or even a few versions old perhaps it’s time for an overhaul before thinking about adding onto it. Whether it’s lack of money, downtime, or human resources it's important to keep your core systems up to date. Technology changes fast. If too much time passes between upgrades it is more costly and difficult to bring things up to date.

How Compatible Is It?

The system should still have significant market share. One year Sun as the best solution and five years later Microsoft is the market leader. Software manufactures are making compatibility improvements with every version, but interoperability may still be difficult to achieve. It makes little sense to spend development dollars on utility software to connect outdated or obscure systems with new ones. This adds tremendous costs to project budgets and the problem still isn’t fixed. It’s impossible to predict the future, but try to choose a platform that will be around.

Does It Suit Your Needs For The Future?

Never build something for today, build it for tomorrow. By the time a project is finished it may already be outdated so it is important to build ahead, or at least plan ahead. Your web server may handle the load today, but what happens when your company doubles in size, or you want to add e-commerce?

What Are The Alternatives?

It may not be necessary to abandon the system entirely. Upgrading to the current version may be enough. Are there products offered that are clearly better for your needs, or are there more cost effective solutions? Should I build, buy or lease? Do due diligence. Explore options. Compare solutions. It takes work to make the best decisions. The less expensive route now may cost more in the long run. Get help doing the homework and making quantified analysis. It pays to put off a project to do it right rather than making this situation worse by employing any less than best practices.

Sometimes I over look the obvious. I'm always looking for good people to help me with web projects: developers, designers, Flash experts, writers... I find some by word-of-mouth, but most by using the web.  Franki Durbin, a designer friend, turned me onto to Creative Hot List the other day when I was looking for a Flash animator. It's a good resource for finding freelance talent and folks between gigs, and since it's run by Communication Arts, the design community is well aware of it.