Tuesday, August 31, 2010

Lions, and Tigers, and Bears, Oh My! What layout is best?

"Lions, and Tigers, and Bears, Oh My!"  Dorthy says in The Wizard of Oz. The web designer like Dorthy walks through the enchanted forest in which he or she is confronted with a dizzying, if not frightening array of layout choices. How does one decide what layout is best?


Image from Henri Rousseau's, The Sleeping Gypsy.

I have two children - a daughter and a son. Separately, each one will ask who is my favorite child. My response is always, "I don't have a favorite." My daughter might be better at one thing, my son at another. It is the same answer that I give when asked what my favorite meal is - What are you in the mood for, Italian, French, Chinese, ...? Diversity is a great thing. I like choices. Choices make the world a more interesting place in which to live.

Choosing a layout is a confusing mix of facts and questions. What type of content will fill my site? What is the purpose of my site? Who will read the site? And on and on. Surely, a web designer would agree that the layout for the N.Y. Times and the Huffington Post will differ from Amazon or Overstock. Or that a photographer's site will differ from a butcher, baker, or candlestick makers. Then, there are bloggers, but they too come in all shapes and sizes. (Edit this paragraph.)

The 960px layout provides a great amount of territory in which to place content. For newspapers and sites in which content is more important than design it is the ideal layout.

However, a 780px or 800px layout may provide design layout advantages. The primary design advantage is the use of white space to highlight the content. At least one graphic designer says,
At least 20 % of an ad should be blank (white space). Ample white space helps gain attention, create contrast, and unify the ad. According to Albert Books, white space is probably the most underestimated element in advertisements.
http://www.wiu.edu/art/courses/handouts/layout.html

Saturday, August 28, 2010

HTML 5 - a Summary

Good things come to those who wait - and so it is with HTML 5, the new generation of code. A simple preview is available at A List Apart.

An intensive discussion is provided by Mark Pilgrim in an amusing article, Dive Into HTML.

What we all worry about is browser support if we are brave enough to use the new HTML 5 and CSS3. Read Taking Advantage of HTML5 and CSS3 with Modernizr by Faruk AteĊŸ. for an article that could be titled "what me worry".

Or be patient. As Sam Cooke said, "Change is gonna come."

Thursday, August 26, 2010

Shadows and Rounded Boxes on Blogger Images with CSS3


Gone are the old days when shadow boxes and rounded corners were created in Photoshop and pasted in your web site as an image. Now with CSS3 the same effect can be created in Blogger with coding.

Let's experiment with an image. Later, we can progress to the header or other element. Here is what the image will look like when you are finished adding the CSS:

Image with rounded corner and shadow box.



Image with Shadow Box only




How to do it.

Insert the image into Blogger. Now, get the CSS3 code to create the effect. I used Fetchak's excellent tutorial to get the code. It is simple and to the point. Here it is for a class called box.

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
Since this didn't take, I inserted the styling directly into the element tag of the posting in the edit html view.

style="-moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 10px 10px 20px rgb(0, 0, 0); background-color: yellow; color: white; padding: 10px;" width="320"

You can look at the source code of this blog and see how it was done.