The most prominent examples in the visual design for regular readers are the drop and inset shadows in the comment sections and also some of the buttons throughout the site. Of the buttons, the most complex are the glass (in Firefox) or metallic (in WebKit-based browsers) buttons in the mini-editor used while posting a comment or over in the support forum.

These little beauties use progressive enhancement with CSS3 for rounded corners, gradient backgrounds and stacked shadows to create their background effects – no images! Well, almost no images, CSS isn’t magic and can’t draw icons easily.

Here’s the CSS

a.glassbutton, .glassbuttons a{
	padding: 4px 10px;
	position: relative;
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#fafafa), color-stop(0.5, #fff), color-stop(0.6, #ddd), color-stop(0.95, #FFF));
	border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
	border: 1px solid #BBB;
	border-top-color: #CCC;
	border-bottom-color: #999;
	border-right-color: #AAA;
	color:#333;
	text-decoration:none !important;
	-moz-box-shadow: 0 4px 4px rgba(255,255,255,.6) inset, 0px -9px 10px -4px rgba(255, 255, 255,1) inset, 0 -20px 1px -6px rgba(0, 0, 0, 0.125) inset;
	outline: none !important;
	}

a.glassbutton:hover, a.glassbutton:focus, .glassbuttons a:hover, .glassbuttons a:focus{
	background: rgba(0,0,0,.05);
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fafafa), color-stop(0.5, #fff), color-stop(0.6, #eee), color-stop(0.95, #FFF));
	border: 1px solid #999;
	border-top-color: #AAA;
	border-bottom-color: #777;
	border-right-color: #999;
	color: #222;
	}

a.glassbutton:active, .glassbuttons a:active{
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.25) inset;
	background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#f0f0f0), color-stop(0.5, #eee), color-stop(0.6, #ddd), color-stop(0.95, #eee));
	border: 1px solid #BBB;
	border-top-color: #999;
	border-bottom-color: #EEE;
	border-right-color: #999;
	color: #111;
	}

… and the Explanation

Firefox 3.5

• Uses a combination of multiple inset box shadows [-moz-box-shadow] and RGBA color [rgba(r,g,b,a)] to create glossy transparent buttons.
• Multiple shadows are achieved by adding a comma and simply typing in a new shadow, simple (don’t forget the inset property).
• The offset property of –moz-box-shadow is used to position the shadow inside the button, allowing for the illusion gradient effect, but with the added benefit of the gradient following the contours of the box.
• The use of RGBA color for the shadows makes the shadows partially transparent, leading to a much richer rendering.
• Changing the main color in the background CSS property will change the color of the buttons without having to recolor the shadows.
• An RGBA color for the main background color will make true transparent glass, but won’t be supported in IE.
• The same technique may work with XUL and Firefox theming.

WebKit – Safari & Chrome

• Since WebKit doesn’t support the inset property for box shadows, yet, I opted to use -webkit-gradient for the background for WebKit browsers.
• The final look isn’t as rich as the Firefox rendering, which follows the shape of the buttons, but it is a reasonable substitute.
• I didn’t use RGBA color for the gradient, so the background color can’t be changed easily; however, the color stops in the gradient can be changed easily.
• I haven’t dug too far into the AIR-embedded WebKit, but this may also work for HTML AIR applications.

Internet Explorer

• Without CSS3 support for gradients, shadows or RGBA, IE renders plain gray buttons.

Final Thoughts

As the web continues to move forward and CSS3 support becomes more widely available these techniques will begin to show up in more places, and I’m really looking forward to it!

Of course, there is always the opportunity for the these properties to be misused, just like Photoshop filters. But I like to look to the brighter side, used thoughtfully and in the right places, they add just the right amount of decoration for a more beautiful web browsing experience for the end user and quicker development time for designers. I’ll certainly be using a lot more in client projects.

What are you looking forward to most in CSS3, and what are your favorite techniques that can be used now? Please, share in the comments.

For AIR applications that have access to an internet connections, delivering ads via OpenX is very easy with just a little code. For this basic implementation, we’ll use AIR’s built-in WebKit browser, which accepts JavaScript delivery perfectly, by using an instance of the HTMLLoader class. This is the same approach I’ve taken with my own AIR application, Brush Manager, which is authored in Flash CS4 Professional. Being completely ActionScript based, the same code should be able to be used in the Flex environment (maybe with very few modifications for public and private identifiers). HTML/JavaScript based applications should be able to use a similar approach, if the ads aren’t already integrated completely into the code base for the app.

As a follow up to this post, I’ve turned this into an ActionScript 3 class for easy use in both Flash and Flex. Here’s the new post and download link.

Just a note that this WILL NOT work for Flash applications targeted to the Flash Player plugin – ONLY AIR applications.

//Import the HTMLLoader and related classes
import flash.html.*;
import flash.net.*;

//Create a new HTMLLoader instance to hold the ad(s)
var html:HTMLLoader = new HTMLLoader();

//URL of the OpenX delivery page
//this is a regular HTML document on your server with the OpenX invocation code
var urlReq:URLRequest = new URLRequest('http://domain.com/ad_page.html');

//Set parameters for the HTML component before adding it to the display list

//Width & Height of the HTML component
html.width = 125;
html.height = 125;

//X & Y positioning coordinates (relative to the parent movie clip/sprite/object)
html.x = 0;
html.y = 0;

//We want links in this component to open in the default system web browser
// If you don't do this, the link will open in the HTML component instead.
html.navigateInSystemBrowser = true;

//Give the HTML component a transparent background so it blends into the application background
html.paintsDefaultBackground = false;

//Add the HTML component to the display list
parentMovieClip.addChild(html);

//Load the OpenX delivery page
html.load(urlReq);

Additional Tips & Tricks

• CSS in the head of the delivery page can be used to style and position ad blocks.
• CSS should be used to clear any margin or padding of the default browser window. This makes positioning easier.
• Overflow may need to be hidden as well to hide scrollbars.
• JavaScript is always enabled in AIR (it is one of the base components), so normal JavaScript invocation methods work perfectly.
• Ad clicks may not work properly in the AIR debug player, but work perfectly in published and installed AIR files. Both impressions and clicks are tracked as they should be.
• For banner/ad rotation, either use JavaScript in the head of the delivery page or write a refresh script using a timer in ActionScript in your Flash document. Use the html.relaod(); method to refresh the HTML Loader instance in ActionScript.
• If there is any chance your application may not have access to an internet connection, use the air.net library to create a URLMonitor to test for connectivity and only attempt to load your ads if a connection is available. If your application is offline, trying to load the URLRequest will throw an ActionScript error.
• This method, extended a little, could be used to create an ad loader much like the one seen in YouTube’s video player with text-based ads.

Have anything to add?

Have any of you used any other or similar methods to integrate ads into an AIR app? What discoveries have you made?

It has been 7 long years (and a couple months) since the release of Internet Explorer 6, along with its many rendering bugs. Some of these were fixed in IE7, and even more are fixed with the forthcoming IE8. With that said, watching the stats of visitors to this site, over 90% of you have upgraded to IE7 or other, newer browsers. At this point, I’m officially dropping support for IE6 for this site, except for problems that affect usability. This doesn’t change much for the current design, which I’m planning on sticking with for a while because I love it, but future designs and improvements to this design may not display perfectly in IE6.

Unlike some sites taking a stand against IE6, I will not block IE6 from viewing the site, but just be aware that some parts may not display perfectly if you’re using IE6. All the different pages and content will be available – the drop of support is completely aesthetic in nature. Hacks will no longer be used to make sure everything is displays perfectly in IE6.

To be sure you’re seeing this site (and others) as intended, please consider upgrading your browser. Here are some recommendations:

What Does This Mean For Clients?

With dropping support for IE6 on the Studio|chris site, I will also be dropping out of the box support for IE6 on any future or yet to launch client projects. IE6 display support may be added on for an additional fee, if needed. Once again, sites WILL display and be usable for IE6 users, they just may not display 100% as they do in a more standards compliant browser, like Firefox, due to the rendering engine bugs. Ultimately, this decision was made instead of raising prices across the board due to the growing amount of extra time (sometimes measured in days) spent to “fix” sites for IE6.

I met Bonnie McCann of Photography by Bonnie a long time ago through the Digital Painting Forum. She lives in paradise in Kaneohe, HI which is literally a hop, skip and a jump from Honolulu. Given her location, Bonnie does a lot of tropical themed art and her photography ranges through nautical, aquatic, tropical and cultural themes. Stunning work – in fact, so stunning that she recently won the Grand Prize in the Artful Home’s 2008 Portfolio Competition!

In conjunction with her accomplishments, Bonnie decided it was time to toss out the old Flash template website she had been using in favor of a more classy and elegant interface that she could update quickly and easily and also included a blog and shopping cart system to sell her products online. In her list of requests for the new look was the light cyan that makes an appearance as the main content background color, a slight tropical feel (but remaining elegant) and to keep things as open as possible.

The Color Choices

The first step in the process was to pick a color scheme that would flow well with the light cyan. In the end, I chose a lime green as an accent color and a dark, rich brown reminiscent of coconuts, coffee, cocoa and a dark, rich wood to anchor the header and footer of the site amidst all the cyan and aquas. To continue with the tropical color scheme, I chose one of Bonnie’s portrait paintings taken on the beach to draw some color inspiration for the background. The result brings in hints of the color of sunshine hitting the waves and also of waves washing over the beach.

A Little More Tropical

To add just a little more tropical flair, but still staying elegant, Bonnie needed a new logo, which comes in one form for her site and two alternate, but very similar forms for her product packaging and printed materials. I added a small flower motif for the final touch. Here is the main logo:

Pulling It All Together

With the new colors, logo and website layout in hand I created two matching templates for the two pieces of software that make up Bonnie’s site – the main content management system and the shopping cart. While the two parts of the site are separate, they flow like one single piece and the end result accomplishes all of the goals Bonnie had set for her new site.

She has been a joy to work with and I look forward to continuing to work with her and watching her art grow and evolve as time passes.

Bill Keane, owner of Keane Studios, LCC, heard me speak at WPPI back in March of this year when Marilyn called me up on stage during her program in the Silver Ballroom at Bally’s (I should really write about that sometime – it was an awesome experience!). After the conference, Bill contacted me to totally revamp his online presence. Bill’s old site was very simple, and according to him, didn’t really suit  the “look” he’d like to put forward for his studio. He also wanted to be able to take advantage of blogging, which he wasn’t able to on his old site.

Bill’s requirements were for customers to be able to order portrait sessions on the site and we were to make use of his “signature green” and current logo. Along with the signature green, we also introduced a brand new green – the lighter green that serves as the background (I believe it was called Wasabi). Bill was great during the design process, providing color swatches, paper design patterns and samples of other websites he liked. Combining this all together, the final look combines the colors, logo, textures, and all of the other provided suggestions into a designed based on layered arcs, stripes and slightly textured backgrounds.

The Shopping Cart

Not evident in the final design, there was actually an intermediate version of the Keane Studios website that took the old design and updated it slightly for a session of emergency ordering for prom portraits. The intermediate version was built over a weekend and orders were ready to be taken in just a few days. During this time, the groundwork for Bill’s final shopping cart was laid down and everything performed beautifully. After the success of the custom coding solution to collect session information from clients during the shopping process, the final version of the shopping cart involved tweaking forms for different types of photo sessions and print pre-ordering.

Over the life of the new shopping cart system, Bill has successfully been able to take orders online and coordinate photo sessions for the senior proms, graduations and senior portraits for four area high schools. Each of the past events is still registered in the cart system, so next year, Bill only has to “flip a switch” and he’ll be ready for Round 2!

The Rest of the Site

Of course, like all of my recent web design projects, Bill can easily maintain his entire site, which is very important. In a dynamic photo studio, forms and products change and evolve over time. The site is coordinated through a content management system complete with galleries, his blog, and as many pages of content as he can throw at it. Included with the galleries, he also has the option to show Flash slideshows. He can do it all without writing one single line of HTML code – which makes everything super easy.

Coincidentally, Bill and his wife will be attending the Blogging Workshop in Asheville on October 3 & 4. I can’t wait to meet them both face to face and really show them how to take the new blog to the next level!

For her beginning website, Alice didn’t need anything very complex. She basically wanted something that introduced her to the community along with a few samples of her paintings. With her love of color and spontaneity, we started with a vibrant background taken from one of Alice’s abstract paintings, which matches the styling of one of the accent walls in her studio. On top of it, we’ve added various design elements taken directly from her business cards and other marketing materials along with her splashy logo and several paintings chosen by Alice.

Business Cards

Before the website, as mentioned above, Alice commissioned her business cards with the idea that they should be “fun” and have some representation of a splash to accompany her business’ name. Sure, we could have done a traditional paint splat, but that wouldn’t fit Alice’s larger than life personality. During an in-person consultation, we came up with a conceptual “splash” that does bring in some specks of a normal paint splash, but adds so much more with swirls and modern flourishes.

The end result is a card designed in Adobe InDesign CS3 for traditional one-color printing. For her first round, Alice chose to use a lively aqua-cyan ink (which ties into the color of her website background), and they look fabulous printed on a double-sided glossy card! She really likes the fact that as the blue cards begin to run out, or if she’s ready for a quick change, she can just have another batch printed in another color to keep things nice and fresh.

↑ Logo Side | Information Side ↓

As all of you know by now, Marilyn and I work exceptionally well together, and as a result, we work together often. When Marilyn was ready to update her branding with a wonderful logo created by Charmaine Check at Check Studio, she came to me. The goal was for something refreshing, new and “Marilyn.” My first instinct was pink all over the place because Marilyn loves pink. It is a color that’s in all of her paintings, in every piece of marketing material I’ve seen from her, and of course the color she chooses to use as her daily skin color over at the Digital Painting Forum.

The first concept for her site is the same as above, but only in a rich set of pink and burgundy. She loved it, but always having had pink as a central color, decided it was time for a little change, something fresh. We played around with color palettes from a paint catalog (color inspiration is everywhere) and chose to keep pink as a strong accent, but opted for the blue and teal for the base design’s background. To make it more “Marilyn,” we used one of her most popular paintings [Bourbon Balcony] for a splash of color in the header.

The result is a contemporary, layered design that meets all of the goals we set out to accomplish. Now if only she could slow down enough so we can sit down and finish filling in all the content! Not to worry though, we have it on our to-do lists [along with plans for more expansion]. An artist’s work is never done!

Suzanne is a portrait artist from the Atlanta, GA area who uses modern digital tools to create one of a kind portraits for clients. I met Suzanne for the first time a few years ago at DigitalPaintingForum.com and over that bit of time, we’ve built an online friendship as well

As a little bit of history for Suzanne’s site, a little over a year ago, Suzanne was one of Studio|chris’ first clients. For the first iteration of her site, we worked together to create a static HTML site that effectively represented her brand; however, since it was all HTML updates were a little complicated.

Her host at that time offered a blog engine, so she did maintain a blog as well, but due to limitations set by the host, the look could not match her site. This wasn’t good from a branding standpoint because as her site visitors navigated around, if they clicked on her blog, they went from the richly colored, jewel-toned site to her blog which was tan and white. The blog, though on the same domain name, was like an entirely different planet from her main site. This can be confusing to users as they wonder if they’ve left the site they were viewing or not.

As a solution to those two problems, the new SuzanneClemWheeler.com now uses a customized WordPress-based system to manage her entire site, which makes her content simple to update and brings her blog into her site with a consistent look and feel. She decided to maintain the same look as her old site with a few minor changes, and it still works beautifully. With her new site in place, Suzanne is ready to take the world by storm with her portraits.

Blogger, Blogsome, Blogspot or WordPress.com? What is the difference in them?

As professionals, the differences in the above do not matter because they all impose limitations on the type of content you can post without fear of your blog being deleted for misuse. As free blog hosts, the terms of all of these do not allow for selling work directly on your blog. The alternative is to use WordPress or any other blogging software installed on your own web server. This removes all the limitations, and you can use the software for absolutely anything you want to, including all of the features of the free blog hosts and adding in the ability to add plugins for more functionality, sell your work, and customize to your heart’s content!

If I have a website, why do I need a blog too?

Blogs are constantly growing as a way to get the word out about your art and what you do. Businesses are taking advantage of this wave of popularity and are using blogs for a number of reasons. To name just a few: a blog can help add a personal side to your business which can help build customer relationships, improve the customer experience, help establish you as an expert in your field, open your site to new search engines, tap into a user base of billions of people, make regular search engines visit your site more often for updates, and give you an easy platform to publish content (even outside of the blog area!). Even with those few, having a blog is worth more than its virtual weight in gold!

No one ever comments on my blog. Am I wasting my time?

Comments are only one part of a blog. Just because no one is commenting doesn’t mean people aren’t reading and taking notice. Regardless of comments, having a blog also opens up a whole new world of search engines – blog searches which may bring more visitors to your site and may help increase sales! As an artist, you should give as many people as possible the chance to see your work, even if they don’t make comments in the blog.

What is “hosting”?

Hosting is simply access to a web server that connects your website to the world wide web. A host will hold all of your website’s files, website software, images, email and more and make them accessible to users of the web. Without some sort of hosting, it is impossible to have a website or a blog. Some hosts are free, but generally place ads on your site, may not allow you to have your own domain name (both of which does not look very professional). Free hosts may also have extreme limits on the type of content that may be published. Look for a paid host that will allow you the flexibility to use your website to the highest potential in your marketing efforts.  

What is Windows Live Writer and why do I need it?

Windows Live Writer is a fully featured, free, blog publishing tool offered by Microsoft that allows offline blogging! If you’re ever in a situation where the internet isn’t available, but have a great idea for a blog post, fire up Windows Live Writer and write your blog post completely (or partially) and save a draft to your computer. When the internet becomes available, open the post and click one button to publish it to your blog instantly! Offline blogging isn’t the only plus though, it makes content publishing super easy! You can keep an unlimited number of drafts, add media, and more! Adobe Contribute CS3 is an alternative, though is not free software.

Can I sell things from my blog?

As long as your blog isn’t hosted by one of the free blog providers that prohibit selling through its User Agreement, you can do absolutely anything you want with your blog. Selling can be accomplished through links to your own e-commerce site, PayPal buttons, or any method you choose.

What are links and why do I need them on my blog?

Links are clickable hotspots on a website that transfer the user to a different website. You need them on your website because search engines, like human users, will follow links to help categorize your site, and as a result, your site may show up in search results. Links to your site on other sites are also important. They can help build credibility and give different users another opportunity to find your work.

I have tons and tons of pictures on my blog and Google never lists me, why is that?

Search engine spiders are programmed to read text, not images. Make sure your blog includes text so that the search engines can actually read through your blog just as people would. Of course, do not stop posting your images along with the text. While search engines can’t see them, your human readers will still appreciate them!

Does it matter if I have a MAC or PC to blog? Is one easier than the other?

MAC or PC, it doesn’t matter.  Blogs are controlled through web interfaces, so they are exactly the same on both platforms!

It would be so much easier if someone could set up my blog for me in person and teach me how to use it. I can’t understand all the information on the internet and need to shown. Are there any blogging classes I can take?

You’re in luck! Studio|chris offers complete blog setup and customization for your business needs using the WordPress platform all year round, taking away all of the frustration of having to learn how to do the technical setup and customization. From there, the platform is easy to use to control your entire website, even outside of the blog if you wish. Contact Chris for more details.

Also, later this year, Chris will be teaming up with Marilyn Sholin to give a wonderful blogging and online marketing workshops in Asheville, NC. If you’re interested in attending, contact Chris or Marilyn to be placed on the waiting list for the next one to be announced.

© 2008 · Studio|chris

I don’t have a release date set, and likely won’t set one, so it’ll be a surprise when the new look pops up! This is a very exciting update here, and my thanks go out to those who have watched through the progress of and commented on the initial design on the Digital Painting Forum and Painter Talk.