USA’s Independence Day

I almost titled this entry “America’s Independence Day,” but then I realized that I was being very ignorant by referring to the United States of America as “America.” There are two Americas, South and North, and the United States is simply a country in one of those Americas, not an America in and of itself.

Therefore, I will not finish by saying “happy fourth of July, my fellow Americans,” but, instead, happy fourth of July, my fellow United Statesmen [and Stateswomen]!

[Amended to clearly acknowledge the women of the USA, although the previous phrasing was not meant to exclude them. Cheers!]

The Beauty of Style Competition

Inspired by the beautiful site that we all now know as simply “The Garden,” the SitePoint Community Forums are holding a CSS Website design competition entitled “The Beauty of Style.”

The SitePoint Forums Staff worked together to create a semantically correct, XHTML 1.0 Strict document, which the contest entrants must stylize from top to bottom using only CSS. Like the Zen Garden, they may not change the source code in any way, and their entries must be near-identical in at least Mozilla, IE 6, and Opera 7. The entrants’ style sheets must also be valid CSS2.

The deadline is July 31, so head over to the SitePoint Forums, register (if you haven’t already), and take a shot at winning the prize: a copy of Dan Shafer’s well-reviewed book HTML Utopia: Designing Without Tables Using CSS. Even if you do not enter, stay tuned – it should be very interesting to see the entries and who wins!

Oops, it’s July!

My recent computer troubles have had me so flustered that the first few days of July flew right past me. But, with things nearly back to normal, I had the senses to realize that it is July and, therefore, time for some July quotes and proverbs!

“In July, shear your rye.” Uh…ok?
“A swarm of bees in July is not worth a fly.”
“July does not a November election make.” Ann Richards

And, of course, the very famous speech given by “President Whitmore” in the blockbuster move Independence Day…

“In less than an hour, aircraft from here will join others from around the world. And we will be launching the largest aerial battle in the history of mankind. Mankind … that word should have new meaning for all of us today. We can’t be consumed with our petty differences anymore. We will be united in our common interest. Perhaps, it’s fate, today is the fourth of July, and we will once again be fighting for our freedom. Not from tyranny, oppression, or persecution. But from anniliation. We’re fighting for our right to live … to exist. Should we win the day, the fourth of July will no longer be known as an American holiday. But as the day when the world declared in one voice, ‘We will not go quietly into the night … we will not vanish without a fight! We’re going to live on! We’re going to survive! Today, we celebrate our independence day!’”

If I don’t find some quality month quotes soon, I think this might have to be discontinued. I mean, come on! Shear your rye? Anyways, enjoy.

Mozilla 1.4 Released

Version 1.4 has finally made it through the tests and trials and errors, and was recently released as a stable version. According to Mozilla.org…

“We’ve added lots of features and fixed lots of bugs since Mozilla 1.3. Among the additions are NTLM authentication support on Windows and improvements to pop-up blocking, junk-mail filtering, and image blocking. More information is available in the release notes.”

If you’re still using 1.3, you’d better go download this one!

Good News. Bad News.

What do you want first? The good or the bad? Let’s go with the bad.

The bad. So, it’s the weekend and I’m just hanging around the house. It starts to rain, and then I hear thunder, so the little meteorologist in my head tells me that a storm is coming. I head to my room to shutdown my computer and switch off the power cord, but, stupid me, I switch the power cord before the computer finishes shutting down. I didn’t think anything of it because I have done it before, so I just went on my way.

About an hour later, I no longer hear rain, and the sound of thunder is slowly fading into the distance, so that little, genius meteorologist tells me that the storm has passed. I head back to my room and turn on my computer, fire up Internet Explorer, and it freezes. No biggie! Not yet, at least.

To make a very long, arduous, and frustrating story short, IE6 no longer works on my computer. It simply freezes, if not as soon as I open the browser, then a few Web pages later. I have been troubleshooting over the last few days, with help from the great minds over at the SitePoint Forums, but a solution is yet to be found. I’m sure you’re asking yourself, “uh, why not use another browser?” Well, the answer is that I am (Mozilla), but I’m very tense and won’t feel relaxed until I know that everything is back normal.

The good. The Get the Look design guides are in the process of being made over. Exciting, huh?! Here is a list of some of the changes, all of which are intended to either (1) make the guides easier and nicer to use, or (2) improve the guides from a content and helpfulness standpoint.

• New headers and borders, which improve the overall look and usability of the guides
• 50px wider, giving more breathing room for the content, thus making the guides easier to use
• Cleaner layout of the content, overall
• A new color section that will include suggested colors from the 216 web safe color palette
• Updated techniques and a couple new “Putting it all togethers”

The new guides should be posted to the site within the next couple weeks, so keep an eye out!

Get the Look Chic Simplicity

Chic simplicity. What exactly is “chic simplicity,” you ask? It is somewhat of an oxymoron: simple yet sophisticated. The design exudes simplicity through its forms, fonts, and layout, and sophistication through its textures, details, and tastefulness. It’s a fantastic “look” that can be used for almost every genre of websites: a professional, yet hip, corporate site; a stylish, yet clean, commercial site; or just a fun and colorful personal site. Whichever style you’re going for, this “look” will fit.

Download the Guides

Download Chic Simplicity Part 1 / Colors and Fonts / 47 kb
Download Chic Simplicity Part 2 / Techniques and Wrap-up / 113 kb

Colors

Colors that will give you the “chic simplicity” look are usually very bright, lively, and fun. To tone down the high values, meaning high brightness, of the colors, use tints and shades of gray, especially a dark gray to anchor the design and a light gray to give the design a clean and airy feeling. The grays will suit the vivid colors perfectly. Think of this principle in terms of an outfit. If you are going to wear an orange shirt, you want to wear a pair of dark pants to complement the brightness of the shirt.

Now it’s time to decide on a color scheme. Here’s the equation that will give you a perfect color combination every time:

   dark gray
+ light gray
+ color #1
+ color #2: tint or shade of color #1
+ color #3: complementary color of color #1
= the perfect color scheme!

Therefore, going by the numbered “Colors to Consider” in the guide, combining colors one, two, five, six, and eight will give you the chic and simple look that you’re aiming for. I’m telling you, this will work every time! Just use the colors in the guide to help you.

Fonts

When trying to obtain chic simplicity, you obviously want to keep things clean and simple. So, when choosing a font it is usually good to shy away from serif fonts. Serifs are very decorative and normally will not reflect the look that we’re trying to achieve, therefore I have chosen sans-serif fonts such as Century Gothic, Futura, and Gill Sans. They’re all very slick, clean, and stylish.

Well, now that you know the rule, we can go ahead break it. You’ll notice that there are a couple serif fonts in the list, namely Apple Garamond and Gloucester. Although they have serifs, they exude a certain tailored look that works well with the chic and simple look we are going for.

Another rule of thumb I discovered is that condensed fonts will usually be better at helping you achieve this look than their normal (i.e. not condensed) counterparts. When you condense a font, it’s almost like it loses weight, resulting in an overall sleeker look.

Techniques

1. Simple, Sectioned, Block Layouts

A great way to lay out your page is to use color. Now that you have chosen a color scheme, simply use those colors to section off blocks of content, and note what content will go in each block. Some basic sections to think about are the background, top or side navigation bars, a header, and the main content area, where white usually works best. Doing this will make it easier to come up with a final layout and will guarantee a clean result.

2. One Crisp, Large, Central Photograph

Using one, large photograph is the perfect way to add a punch of color to your webpage. Choose vibrant photographs that work well with your color scheme by having either similar hues or complementary hues.

If you are having trouble finding a photograph that works well with your design, ask yourself the following questions: What color from my color scheme do I want my photograph to represent? What is something, anything, that is that color? So, say your answer to the first question was red. Then, your answer to the second question might be strawberries, raspberries, or big red balloons. Now you know exactly what to look for. When using this method, close-ups and extreme close-ups (macros) are great, such as the example photograph of a basket of raspberries, because you can concentrate on one or two colors and they will give your design texture and vibrance.

3. Simple, Readable Navigation

We’re going for chic simplicity, so simple navigation is the way to go. It is extremely usable, very clean, and allows for an easy change if you ever find yourself wanting to redesign. Check out Dan Cederholm’s CSS tabs, CSS mini-tabs, and CSS mini-tab shapes for more!

4. Transparency and Layers

Overlapping objects that have been made slightly transparent is an easy way to add color and texture to your site. First, draw a shape, fill it with a color from your color scheme, and change its opacity, which is usually possible in some sort of “Layers” window, to somewhere around 50%. Repeat this step with a different shape, but the color the opacity should remain the same.

Once you have all of your shapes drawn, overlap them in a fun pattern. Every time two of the objects overlap, their colors will mix and produce a darker shade. The key here is to experiment! Try using different shapes, colors, and opacities.

5. Tight Text, Using Kerning

Sometimes text, especially when using condensed fonts, just looks too spaced out. The solution? Kerning. Found in the “Character” window in Photoshop and in the “Text Editor” window in Fireworks, kerning will often give your text an even cleaner, slicker look. Want proof? Compare the two columns in the guide and you’ll see that the kerned text looks more polished and refined.

6. White Space

White space is something that is very often overlooked when, in fact, it is one of the most important factors in making a good design look even better. White space can be achieved by increasing the leading or line-height, the space between each line of text, and by padding your blocks of content with anywhere from fifteen to two hundred pixels of blank space. Read more about white space in this great article at Design Matters.

7. Pixel Icons

Though very tiny, pixel icons are a fun and noticeable detail that are easy to incorporate and will add some subtle interest. Use them in place of the standard bullet in your lists, or place one at the end of each section of content, like magazines do at the end of each article.

8. All Lowercase or All Uppercase Text

Changing the case of your text is very easy and adds interest because of the simple fact that it is different than the standard capitalize-first-letter-of-each-word method. A great way of doing this is to implement CSS by using the text-transform property, with either uppercase or lowercase as the value.

9. Subtle Drop Shadows

Drop shadows have a bad reputation because they are so often misused, but when used subtly and correctly, they add a nice touch to any design. In the first example, a very faint and soft drop shadow is used to make the text pop off the background. In the second example, a faint, yet crisp, drop shadow adds dimension and interest. As always, experiment!

Putting It All Together

By simply combining many of the techniques explained above, I quickly and easily created this example webpage design. Notice how well the vibrant colors work with the calmer grays, and how the different sections of the page are distinguished using colors. The photograph in the header adds a ton of texture while, at the same time, incorporating a vibrant blue, one of the colors from the color scheme. The navigation is simple, yet stylish, making it easy for one to find their way around the site, and the pixel arrows are much cooler than standard bullets. The abundance of white space makes the page look very refined, not cluttered, and will make browsing the content easier for the viewers. And finally, the all lowercase navigation is extremely subtle, but a nice change from capitalization. In the end, we have a webpage that perfectly defines chic simplicity. Enjoy!

RIAA Flexes Its Muscles

If you haven’t already heard, the Recording Industry Association of America is finally showing the music-sharing obsessed nation what it’s made of. It plans on going after the worst offenders first, although the number of files a person needs to be distributing before they are considered to be one of the worst is unknown.

Already, they have nailed a couple offenders, including Daniel Peng, 17, a junior at Princeton University, and Jesse Jordan, another young student. Both have Web pages up to help them raise money to pay for the fees. Dan is getting donations for his $15,000 settlement fee, and Jesse is getting funds to pay for his of $12,000. If you feel bad or, perhaps, guilty, lend them a helping hand (or dollar, in this case).

Explore with Safari 1.0

Todd Dominey reminds us that today, Apple released the final, 1.0 build of Safari, its beautiful and feature-packed Web browser. Thank you, Apple, for keeping it free, unlike the monopolistic Microsoft.