AppendFormat Method

The method in C# is called AppendFormat. It belongs to the System.text namespace which contains the StringBuilder class and AppendFormat is a method of this. Here's the MSDN article if you'd like to find out more about it.

Old School Method

The neat thing about this method is it's an alternative to concatenation. Concatenation is basically the process of combining text and variables together like so:

I think we're all pretty familiar with the code above. We're also probably familiar with some of the annoyances of the code above such as the fact that every time we combine text with a string variable, we need to start a quotation mark. Quotation marks are bothersome because sometimes (or rather often times in my case) we forget to properly close the ending quotation mark resulting in an error. More trouble can ensue when we have to start re-arranging variables and text within the concatenated string.

Another problem is I often forget to include the concatenation symbol in between my text and variables. This, if anything, is probably the number one mistake I make.

Emulation Using Javascript

As I reviewed my co-workers C# code, I felt that perhaps C# had a good point so I set out to emulate this in other languages.

First of all, below is the syntax we use for this alternative method. We use keyword itentifiers i.e. {NUMBER} to indicate an item should be placed in its spot. That number corresponds with the index of the array items on the right i.e NEAL, GROSSKOPF. The neat thing with this is we can easily move {0} arround without having to worry about closing the quotation marks and there is no need to use the concatenation symbol...ever!

Below is the function I wrote to emulate this in Javascript. I pass the function an array, loop through it, and replace the placeholders with the array item in the same index.

Easily Re-Arrange Items

The great thing about this, is we can easily re-arrange items simply by moving the placeholder around in the text block like so:

Classic ASP Variant

I also wanted to create the same function but in Classic ASP, my language of choice:

As you can see, this is pretty much the basic princple that we used for the Javascript version.

Conclusion

I'm sure this article isn't as exciting as some of my others, and for all I know, most my readers are much better programmers than myself but I thought it was a cool idea so I wrote about it.

View Comments [2]

HTML Setup

The HTML Setup is pretty simple. Just place an empty SPAN element inside your heading element:

Using JQuery to Automatically Insert SPAN Elements

I think a few people might find the above code unsightly, so here's a method to leave the empty SPAN element out of your HTML and inject it via JQuery:

CSS Setup

The most important part of this code is setting the H3 element's position to relative. I'd also recommend setting the line-height to the same height as the font-size used and also reseting the margins back to zero.

Next, we position the empty SPAN element absolute and give it a height and width. Using this SPAN we can overlay various background-images over the H3 element.

Gradient Effect

The first effect I'll demonstrate is a simple gradient. To do this we use a simple white to transparent gradient image and set it as the SPAN element's background-image. We can then position the background-image higher or lower depending on how strong we want the effect to be.

In the example above, the black transparent area represents the SPAN while the black border represents the bounds of the H3 element.

Demo

When viewing the demo, take your cursor and select the gradient text. This will give you a good understanding of how the gradient works -

View Demo >>

Gradient Effect With Hover

We can also apply a color change on hover with our gradient. Since the color change happens on the layer behind the gradient there is no additional CSS we must do other than change the H3's color when hovered.

View Demo >>

Two Tone Effect

Another effect we can do is apply a two toned text color to our text. To do this we use a white rectangle with it's opacity lowered and then position it over our H3.

View Demo >>

Sliding Door Effect

Finally, my last effect uses JQuery to create an animation when the text is hovered. Using a little JQuery we can slide the SPAN's background-image up and down when hovered on giving it sort of a 'garage door' effect.

View Demo >>

Got any other effects that could be accomplished using a background-image? Share them below!

View Comments [1]

Firefox 3.5

Firefox 3.5 looks to have plenty of new features for web developers to play with. I'll go over some of new CSS features that are new to 3.5.

For much of my web career I've been an Internet Explorer stooge but when Firefox 3 came out last summer, I made the switch and never looked back. Firefox is just so heavily oriented to web developers and designers that it's hard to rationalize using any other browser. Sure, Opera and Safari have slightly better support but their lack of developer tools make me opt for Firefox.

Firefox 3.5, the latest version of the browser is set to be released this Tuesday. This intermediary release is probably aimed more at developers than end users and that's what excites me the most. After reviewing the 3.5 release notes I thought I'd point out a few of the new features that I'm most excited about.

@font-face Support

Since the inception of the web, we've been limited to about a dozen font types. With @font-face we're now able to choose from 1000's if not more. By embedding fonts our sites will be more accessible to people with screen readers, and it will also improve our search engine optimization by using pure text rather than images. This will also make our lives easier because we'll be able to change font properties via CSS rather than having to open up Photoshop or Fireworks to edit an image file.

Currently browsers using Webkit also support @font-face and Opera 10 will support it. Internet Explorer has it's own proprietary method.

Box Shadow & Text Shadow

A personal favorite of mine is the box-shadow property. Creating drop shadows on the web can be pretty painful, especially when the size of the box may vary from page to page. With the new box shadow property we won't need to worry about that anymore. Safari also supports box-shadow while Opera and IE do not. Firefox 3.5 will also support text-shadow (with no -mox prefix). This means that Opera, Safari and Firefox all support this while IE, again has it's own proprietary method.

CSS Transformations

Originally introduced by Safari/Webkit we now have the ability to use CSS Transformations. I haven't delved into this much but I have used CSS Transitions a few times on various projects which I wish they would have implemented instead.

New CSS Selectors

Probably the most important aspect of CSS is the ability to select elements. Firefox 3.5 gives us a few more tools to achieve this. Having used JQuery extensively for the past several months, I've found myself using almost all of these to circumvent browser's lack of support. With Firefox 3.5 we'll be able to natively use these selectors (and more):

CSS Media Queries

Media queries allows web developers to target certain scenarios that end users may have. For instance in the example below I'm adjusting the width of my #content DIV if the end user is on a PDA and has a screen size smaller than 300px.

You could also take this a step further and mine for information about your end users by testing the size of elements on your page:

Other New CSS Features

Here's a list of a few other CSS features I didn't mention above.

1. opacity (no longer -moz-opacity)
2. word-wrap
3. -moz-border-image
4. -moz-column-rule
5. -moz-column-rule-width
6. -moz-column-rule-style
7. -moz-column-rule-color

Further Reading:

• Firefox 3.5 for Developers
• Comparison of Layout Engines (CSS) - Wikipedia
• CSS 3 Selectors

View Comments [0]

Each video has three separate stills that you can choose from after you upload the video. YouTube, now also support high definition videos and because of that, provides higher quality stills as well. Below I will run through all the various YouTube images that are available for each video.

The Setup

Below is a break down of the YouTube URL. For all of my examples I have chosen my new favorite YouTube video Leprechaun in Mobile, Alabama.

The Default YouTube Image

YouTube's default video image, i.e. the image that the uploader has chosen, can be retrieved by using the default.jpg image. Its dimensions are 120px x 90px and its file size is 3.07KB. You may want to use this image when you want the exact image the original uploader intended.

Series Images 0 - 4

Next YouTube provides us with images 0.jpg, 1.jpg, 2.jpg & 3.jpg. These 4 images are basically the 4 images the uploader can chose from after uploading a video.

Image 0.jpg is larger, sized at 320px x 240px and its file size is 11.77KB.

Images 1, 2, 3 are smaller images sized at 130px x 97px.

High Quality Images

Next, YouTube provides us with what they label 'high quality' images. These are named hq1.jpg, hq2.jpg, hq3.jpg & finally hqdefault.jpg.

Images 1, & 3 are smaller images sized at 130px x 97px. Even those these are prefixed with 'hq' the images appear to be of the same quality that images 1, 2, & 3 were.

Image 2 is larger and sized at 480px x 360px. Its file size is 14.63KB. I'm not sure why this image is larger because it seems to break the pattern of the other images. It does appear to be the default image so perhaps that has something to do with it.

Finally, the hqdefault.jpg is the largest and highest quality of all the images. It is sized at 480px x 360px. Its file size is 14.63KB. I would recommend using this image as your primary image due to its quality.

Conclusion

You now probably know more than you ever wanted to know about the available images YouTube provides us for each video. Feel free to bookmark this article as you'll probably need to refer back to it someday while working on a project.

View Comments [4]

By default browsers will apply the following settings to your font out of the box:

We're all familiar with the appearance of this font, and often times, are turned off by this font styling because of how common and boring it looks.

Gray is the New Black

First lets get rid of that default and obnoxious font color #000000. I recommend you choose a value between #888888 and #333333 for your website's font color. If you need help picking a color I recommend using Eric Meyer's Color Blend Tool. I would also like to point out that using a color lighter than #888888 will not have enough contrast on a white background and will be difficult for your users to read. On the flip side, a color darker than #333333 is starting to get into that loud and obnoxious range again. I personally like to choose #555555.

Times New What?

Next lets 'can' Times New Roman for a different, less 'plain' font. A side note, Times New Roman is a great font, and there's a time and place for it, but being the browser default font, I tend to shy away from using it too often.

Font types can also be broke into two different groups. Serif and Sans Serif. Sans serifs fonts do not have the small tails after letters. An example of a sans serif font is Arial. An example of a serif font is Times New Roman. Below is a list of some of the more content-useful fonts to chose from when designing a website. Notice how some of the fonts take up more space than others:

Sans Serif

1. ABCDEFGHIJKLMNOPQRSTUVWXYZ - Arial
2. ABCDEFGHIJKLMNOPQRSTUVWXYZ - Verdana
3. ABCDEFGHIJKLMNOPQRSTUVWXYZ - Tahoma
4. ABCDEFGHIJKLMNOPQRSTUVWXYZ - Trebuchet MS

Serif

1. ABCDEFGHIJKLMNOPQRSTUVWXYZ - Times New Roman
2. ABCDEFGHIJKLMNOPQRSTUVWXYZ - Georgia
3. ABCDEFGHIJKLMNOPQRSTUVWXYZ - Palatino Linotype
4. ABCDEFGHIJKLMNOPQRSTUVWXYZ - Lucida Sans

Of the choices above, I find Arial to be the easiest on the eyes. If you want to be a bit edgier you can chose fonts 2-4 which are used a bit less than the others.

Need help? Check out my extremely useful Font Comparison Page to see which font you like best.

Size Matters

By default browsers will assign your font a font-size of 16px. While 16px is big enough that most users will find it comfortable to read, 12px is really the internet's de facto font-size. Visit some of your favorite websites and you'll discover that almost all of them use 12px as the main content's font-size. It's perfectly ok to use other font sizes, but for your main content I'd stick with 12px - 14px.

Give Your Font Some Breathing Room With Line-Height

Probably the single most easy CSS change you can make to your font, with the biggest impact, is to adjust your line-height. Line-Height is the spacing between the lines of text on your web pages. By default browsers set this to 18px. At 18px you will have about 9px of space between your top and bottom line.

Line Height Comparison

The first block of text has the default line-height of 18px while the second block has a line-height of 27px. Notice how the second block of text is easier to read.

Straighten Out With Text-Align: Justify

My final recommendation is to experiment with the CSS property text-align, specifically with the justify value. By default, browsers will assign the value of text-align: left; to your text. Using the value of 'justify' we can make all of our blocks of text have straight edges on the left and right.

Text Align Comparison

The first block has text-align: left; while the second block has text-align: justify; I find that the justified text helps reinforce the grid layout in your web design.

Putting It All Together

Below is a summary of everything I've just went through. Also check out my step by step results page.

View the metamorphoses from Times New Roman to my example above. >>

View Comments [3]

I ran a quick test of all the browsers I had installed to see at what width, would the browser's print preview window crop off my fixed width DIV. Here are the results I found:

Notes On My Results

You'll notice that many browser's default settings are set to 'shrink to fit'. This may solve the problem of extra-wide content when printing most of the time. I also decided, that when given the option, I would set the resize option to 100% to make all my browsers equal.

Also when I ran the test, I did not modify the page's margins which I'm sure would have an affect on the results. Safari also had an interesting feature that triggered shrink to fit when the content grew beyong it's max-width. I thought this was a pretty useful feature compared to most the other browsers.

Other results we can see, is Internet Explorer has stayed tried and true throughout it's past three versions sticking with 670px each time as it's max-width. Opera provides the most real-estate at 730px.

Conclusion

When writing print stylesheets knowing that the lowest common deneminator is Internet Explorer at 670px will help you when creating print stylesheets.

Related Articles

• Browser Comparision of Available Screen Width When Using 1024x768
• Go Green With CSS Print Stylesheets
• Using Media Targeting With CSS With @Media

View Comments [1]

Yahoo! Redesign

Yahoo! has been in the midst of redesigning their home page since September of 2008. Their last redesign was in August of 2006.

I've been using Yahoo! since 1996, and over the years I've become quite attached to my beloved Yahoo! even when users started to ditch them for other websites. So, it's natural for me to get excited when Yahoo! gives me a sneak peak at their new home page (usually located at m.www.yahoo.com).

One reason that I still like Yahoo! is I am primarily a designer...not a developer. As a designer, I'm drawn to websites that have more design elements and style. This is one reason why I prefer Yahoo! to Google. I feel that Yahoo! has a bit more personality compared to Google. For more on that see - http://blog.fawny.org/2009/03/19/google-antidesign/. Still, I won't deny that Google has a superior search engine.

What confuses me, is I have been randomly getting these 'sneak peaks' since last November. I'm starting to wonder if Yahoo! will ever release their newly improved home page. Every time I get a sneak peak I take a screenshot to compare to my last screenshot. Now that I have a couple different screenshots I thought I'd share them with the rest of the world.

Yahoo! Today

First, let's check out the current home page of the site, which has been their design since August of 2006.

November 2nd, 2008 Yahoo! Redesign

Here is the first screenshot I have from my collection. The site's main structure is very similar to the current site, but the major difference is the background gradient and the dark blue bar on the left of the page. The right hand applications area has also be redesigned.

April 6th, 2009 Yahoo! Redesign

Yahoo's next iteration is once again a small evolution from the November design, except they softened the look of the their blue left navigation bar, which I think was a good decision. You'll also notice this version of the redesign is much wider than the previous version. I checked my screenshot and it's roughly 1165px wide. This seems like an odd width to choose unless of course, they are using a min-width/max-width layout.

Another interesting change in this version is the choice of Times New Roman/Georgia as a main font type. Times New Roman is rarely used since it's usually the browser's default font choice.

May 13th, 2009 Yahoo! Redesign

Then today, I opened up IE6 to test something out and was once again, given a sneak peak at another iteration of Yahoo's redesigned home page. This version is radically different than April's and November's, but looks much closer to their current design. They also decided to loose the dark gradient background in favor of a softer gradient. Also, the right hand applications area has been removed in favor of a 'top searches' content area. The applications were then moved to the left bar. I think this version will be an easier transition for people favoring their current design.

Wrap Up

It's interesting to see the various interations of Yahoo's redesign process. It almost appears they are coming full circle back to their current design with a few modifications.

What do you think of Yahoo's redesigned website?

View Comments [1]

Default Rendering of HTML and BODY Elements

By default, all major browsers assign the BODY element a margin of 8px. We often see this in CSS resets, setting the margin back to 0px. As far as I'm aware there is no other default CSS applied to either elements other than your usual font-size, color etc. The HTML element, in comparison, has a margin set to 0px. Also neither of the two elements have padding, which is often seen in CSS resets as well.

Overflow/Scrollbars

Another thing I like to place in my stylesheets is some CSS to always display browser scrollbars. I do this because it annoys me when I browse to one page that has a lot of content and then browse to another page that has little content, and my main content DIV is bouncing back and forth. In order to fix this you need to place 'overflow-y: scroll;' on your HTML element. If this property is assigned to the BODY element, nothing happens and it will not work, thus another big difference between the two elements.

Scrollbar Colors: HTML or BODY?

In Internet Explorer the scrollbar color properties need to be applied to the HTML element rather than the BODY element in order to work. Safari has also added scrollbar styling in their recent build, so we'll have to see how they implemented this as well.

Background Images and Colors

Another major difference between the HTML element and the BODY element is background-colors and background-images. The BODY element mimics the default behavior of a DIV element. It's height relies on the content within it. The HTML element on the other hand, spans the entire viewport regardless of the content within it. If you set a background-image to the BODY element and position it bottom, it may not have the desired effect you intended, while the HTML element's background-image will fall at the bottom of the screen regardless of the content within it.

In Conclusion

Probably the biggest take-away from this article would be background-images. I almost always use both the HTML and BODY elements to apply background-images to, and it's good to remember that the BODY element may not always hit the 'bottom' of the viewport.

Know of any other differences? Share your thoughts below...

View Comments [4]

Skip To Demos:

1. Basic Template Layout
2. Reversed Basic Template Layout
3. 2 Columns With Header & Footer
4. 3 Columns With Header & Footer
5. Easily Re-Arrange Columns
6. Easily Re-Arrange Rows

Updated May 6th: For the longest time I've been waiting for browsers to support the CSS Template Layout module. Today, I found out that Alexis Deveria has given the web community the gift we've all been waiting for. Using JQuery and a plugin we can now take full advantage of the CSS Template Layout Module.

Historically, we've used containers and floats to create our websites but with this method we may possibly be able to make that method history. With template layouts we can finally have source order independence that has plagued the CSS Display: Table, HTML TABLEs and CSS Float techniques. We can also ignore absolute position methods which I've always disliked. Finally the template layout method also handles equal column heights right out of the box.

Recap: Template Layout Gives Us

• Pure source order independence
• Equal height columns
• No need to overflow containers
• No need for hacks
• Advanced grid layouts
• Easy source arrangement for different media types i.e print, mobile

A Quick Overview

Template layout works like a grid. We're all familiar with the dozens of CSS libraries that attempt to give designers a grid to work with. I personally despise CSS libraries but that's another story. With template layout we can create all of those complex grids that designers dreamed up with HTML TABLEs, but using only CSS and semantic HTML instead.

Step 1: Importing JQuery and the Plugin

The very first thing we'll need to do is import JQuery and the JQuery Template Layout Plugin

Next we'll need to initialize the plugin using JQuery's document.ready event:

HTML Setup

The HTML setup can be approached in the same fashion we would approach the old float based layout system. For the sake of this tutorial I've named my DIVs a, b, c, d, e rather than header, nav, content, aside and footer.

CSS Setup

We start like we would with any other layout system by centering our main #template DIV and giving it a width. I chose 1000px simply because it's easier to do math with.

Position: What?; Think Grid Placeholders

Next we need to assign each of our child DIVs a position name. Again for the sake of this demo I've given each DIV the same position name as it's ID name:

Think of each position name like a variable that will be used to place each DIV in a grid. My code example above would probably look like this in a production environment:

::Slot() Pseudo Class

Template Layouts introduces a new CSS pseudo class called ::slot(). Think of slots like a content placeholder. Only certain CSS properties can be applied to slots such as background colors and images.

Display: Grid:

Using our placeholder names we can arrange our DIVs in an equal height grid system using the following syntax:

View demo of this code >>

We could also easily re-arrange our DIVs by simply ordering the placeholder names like so:

View demo of this code >>

Note that what we just did is not possible using Sitepoint's evil display: table; method, and is not easily possible using the standard float system. It is possible with absolute positioned elements but once again we're trying to avoid that.

Real World Example of Template Layouts

Until now, I've only shown you the basics of template layouts. I've found that new programming techniques often make little sense until put into a real-world perspective. Lets create a two column template layout:

View demo of this code >>

A break down of that code:

• Line 4 states that the "a" DIV should occupy 2 columns in our grid row and /150px states that it should have a height of 150px.
• Line 5 states that the "b" DIV should occupy 1 slot in the left row column and "c" should occupy the right column in row 2.
• Line 6 states that the "d" DIV should occupy 2 columns
• Line 7 states that the first column should be 250px wide and the second column 750px wide

Easy 3 Column Layout With CSS

We can easily take our same HTML structure and make it a three column layout with the template layout system:

View demo of this code >>

A break down of that code:

• Line 4 states that the "a" DIV occupies 3 slots in our grid and have a height of 150px; This is our #header.
• Line 5 states that the "b" DIV occupies slot 1, of row 2, the "c" DIV occupies slot 2 of row 2 and finally the "d" DIV occupies slot 3 of row 2. "b" is our #nav, "c" is our #content and "d" is our #aside.
• Line 6 states that the "e" DIV occupies 3 slows of row 3. This DIV acts as our #footer.
• Line 7 states that both column 1 and column 3 have a variable width (250px) while the second column has a width of 500px consuming the rest of the available space.

Easily Re-Arrange Columns

The best thing about this approach is we can quickly re-arrange our content in the grid. This might come in handy when displaying content to different media types such as @print and @handheld. Take a look at how easy we could switch our columns around:

View demo of this code >>

Easily Re-Arrange Rows

If ever needed, we could also flip our #header and #footer DIVs like so:

View demo of this code >>

Argument Against Using This?

I can think of a few reasons not to use this:

• Requires Javascript & JQuery
• Layout not triggered until the DOM is loaded
• Not thoroughly tested in all browsers (IE6 specifically)
• Syntax has a high learning curve at first
• Currently no browsers (that I'm aware of) support this natively

Should You Use This?

Absolutely! While I'm unsure if this is ready for large & complicated designs I think as a community we should start testing this new approach out which is currently in the working draft stage of the W3C spec process.

Love it? Hate it? Speak your mind below...

View Comments [18]

View Slider Example

If you want to skip the article and go straight to the final product view my CSS Only JQuery Emulation Slider Demo.

Note: you will need to use Safari in order to view the transition effect and I highly recommend that you do.

My Goals Of This Proof Of Concept

My mission was to create a working example without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.

HTML Structure

The HTML in it's most basic form consists of a container DIV and a simple unordered list. I also used P elements which could probably be removed depending on hardcore you want to be about extra elements. I did this because I needed to style the LIs differently than the text contained within the LIs such as floating, width etc.

I use the following CSS to style the above elements.

Positioning Our Slider

Next we need to set our UL which is the container of the slider's LIs. It needs a width set on it which is the width of the LIs X the total number of LIs. If each LI were 500px wide and we had 4 LIs then the total width would be 2000px. I should note that you will also most likely have a margin between each of the LIs which this would need to be accounted for in the above.

Next we move our UL element left baed on what LI we want to show in our slider. Look at the example below to see how I accomplish this. Each color block represents a LI. The block positioned over the black area represents the current visible LI.

Adding Persistence To Our Slider With :Target

By far the most complicated part of this proof-of-concept is accomplishing all of this without the assistance of variables that JavaScript allows us to use. CSS variables are not yet a true reality (although one could argue that CSS Counters are a form of CSS Variables). To overcome this obstacle I used the CSS3 :target pseudo selector. The :target pseudo selector works with URL fragments like below:

Using CSS we can actually style the page-anchor DIV if our page's URL contains #page-anchor like so: http://www.example.com/page.html#page-anchor.

Using :Target To Mimic Variables & Selectively Show Content

Since I do not have variables available to use I need to use the URL fragments to selectively show my LEFT and RIGHT arrows. If I didn't do this I wouldn't know which LI slide to move to next and I wouldn't know which slide LI I need to show. This would quickly defeat my ul { left: -500px } method. What I did was wrap my entire slider in 4 :target hooks which simulate variables:

Using Our :Target Hooks To Postion Our UL

I then use the following CSS to move our UL left 0px, -500px etc.

I next use these same hooks to hide/show the appropriate LEFT/RIGHT arrows:

Giving Our Slider Animation

If you were to test out the demo up to this point you would notice that when you click the LEFT/RIGHT arrows, it would automatically switch to the next slide rather abruptly. To fully achieve our JQuery-like slider we need to use CSS3 Transitions which was originally proposed by the Webkit team and has since been adopted into canon by the W3C. What this means is, at the moment the animations will only work in Safari, but Opera and Firefox will not be far behind to implement this exciting new CSS feature.

To achieve the CSS animation we need to first define what CSS property we want to animate. We can do this by stating '-webkit-transition: left'. Next we state the amount of milliseconds we would like the transition to occur over by adding '.3s'. Finally we add linear to the end stating that it is a linear transition. Here is the fully property statement:

Demo

To view the final product (which I recommend you use Safari which supports CSS Transitions) view my CSS Only JQuery Slider Emulation Demo >>

Before you comment stating why on earth anybody would ever use this when it can be accomplished so much easier in JavaScript please remember this is just a proof of concept and a test to see if it could be done using only CSS.

View Comments [6]

Overlay A DIV?

Originally I thought it could be possible to overlay a DIV, with opacity, over the entire viewport in a futile attempt to make the screen 'darker'. This was futile because the DIV essentially makes it impossible to click anything underneath it.

A New CSS Property

After giving it some thought, I came to the conclusion that we need a new CSS property which I've decided to call 'intended-brightness'. The syntax might look something like this:

Intended-Brightness would take a decimal that could range from 0.0 to 1.0 (much like opacity does). This would allow the designer of the website to design using their native brightness and then ensure that the website looks the same on all monitors rather than dark on some and washed-out on others.

Accessibility?

Obviously accessibility proponents would complain about this new property because some users (heaven forbid) would want their browser's brightness cranked up to 95%. Because of this, browser vendors could create an option like they do for other CSS properties related to browser accessibility such as font-size, color, background-color etc. See below for Firefox's tab regarding these settings:

CSS Inheritance?

One issue I'm not sure on yet is whether the property could be inherited by child elements. The property could act like the various 'background' properties where the background-image is only set on the current element and not the child elements. The property could also allow inheritance basically allowing child elements to have a different brightness than other elements.

Personally, I think it would be easier, and faster to implement using the non-inheritanced method which is usually the desired effect web developers would want.

Does This Belong In CSS?

Of course! CSS already allows the styling of many other features native to the operating system such as form controls, scrollbars, cursors and text-selection colors. Another very similar property already present in CSS is opacity which I think further strengthens my case.

So what do you think? Feel free to discuss below -

View Comments [7]

Figure A.

Facebook's horizontal scrollbars showing up on a 1024x768 screen resolution. (Note this screenshot was took on my own PC using Firefox)

I was using my parent's computer the other day which is your standard Dell with a LCD monitor set at 1024x768. I decided to log on to Facebook, one of the internet's most popular websites. Upon logging in, using Internet Explorer 7, I was greeted with a wonderful horizontal scrollbar. I thought to myself "Facebook, the world's leading social network has horizontal scrollbars?". Sure enough, the Facebook developers failed to check their re-designed website in IE7, or possibly, on a 1024x768 monitor.

I wouldn't have minded if a horizontal scrollbar appeared if the design was targeted towards a higher resolution such as 1280x960 but this looked more like blatant oversight on Facebook's part. Look at how little of a horizontal scrollbar appears - Figure A.

Unnecessary Horizontal Scrollbars = Evil

Nobody likes horizontal scrollbars (unless of course your entire design relies on it). Horizontal scrollbars are annoying because they hide 15-17px of content at the bottom of you page. They are also confusing because the web browser is typically browsed un-directionally, due to limitations of the mouse's scroll wheel. When a user has to scroll down and over, this forces the user to abandon the mouse wheel and manipulate the horizontal scroll bar with the mouse's left button, thus wasting time.

So What Is The Available Screen Width In Various Browsers?

Had Facebook done their homework they would have realized that a content width of 1024px combined with a vertical scrollbar results in a horizontal scrollbar. Below is the maximum width you can use in various browser viewports, showing both with a vertical scrollbar and without:

[1]IE incorrectly includes the scrollbar width in the element's width, thus the actual scrollbar width is 0px.

So What's My Point?

By looking at the chart above, we need to pick the lowest value as our maximum width. Seeing that 1003 is the lowest, which is used in Internet Explorer 6 & 7, if you plan to create a design for 1024x768, I would advise that you not make it wider than 1003 pixels. I would also advise that you never make your main content DIV an odd width. See http://csscreator.com/node/472#comment-2208 for more on that. My point is, you're better off choosing a width less than 1000px if you want to avoid horizontal scrollbars. Remember to always check you design in the early stages of development for your baseline screen resolution.

You might also be interested in my article Always Show Browser Scrollbars.

View Comments [5]

Shredding The Extra File Size

After reviewing the CSS file I noticed it lacked organization, and probably the worst of all, it repeated itself...a lot! My top pet peve with stylesheets is when properties are copied from one selector to another. Below is one example of what I'm talking about:

Notice the Golden Rule in programming which is "don't repeat yourself" is broken here? If you look close enough, the only thing that changes from the three link states is the font color. Let's shorten that up a bit to see what it could look like:

Ah yes, much better. A full 24 lines shorter and much easier to follow. (Note I also removed some font styling as it was better served on the BODY element). Little things like this can make your stylesheet better organized and also much smaller. After removing mistakes like this from the stylesheet, I was able to remove over 200+ lines from it and shred 5KB file in file size.

Overall Stylesheet Organization & Grouping

Another area to pay attention to is how you organize your selectors within your stylesheet. Too often, I review other people's CSS files and have no idea where to find something. The first thing you should always do is group like-selectors with one another. Below is how I usually choose to organize my stylesheets:

1. Table Of Contents
2. CSS Variables
3. CSS Image Preload

1. Reset
2. Headings
3. Anchors
4. Form Elements
5. General Classes
6. Template & Layout
7. Print
8. Handheld
9. Aural
10. CSS Diagnostics

CSS Table of Contents

I recommend a table of contents for stylesheets over 500 lines long, which in most cases, is always my CSS files. I also recommend that you separate your groups of selectors with CSS comments. Numbering them with the same number you used in your table of contents will make finding the area quicker as well. Below is how I prefer to do this as it makes it stand out more. I also like to place code references in the heading in case I need to quickly refer back.

CSS Variables?

You may have noticed my reference to CSS Variables and are wondering what the heck this is. It's currently a proposal for CSS, which may never happen but after the W3C recently adopting CSS Transformations, I think CSS Variables still stands a chance. While you don't need to adhere to the spec, I sometimes like to place common color references at the top of my stylesheet for quick reference:

Preloading Images In CSS

I also have a section where I preload :hover state images to be consumed further along in my stylesheet. I've written an article on CSS image preloading if you want to read more on this topic. By doing this I avoid the one second flicker that many users experience when hovering over an element with a background image. I like to group these together because I find they can often get lost in the overall stylesheet and eventually somebody else will run across the selector, not understand it's purpose and delete it.

Other Common Sections in CSS Files

I like to place my CSS reset at the top of the stylesheet so that I can override it further down if need be. I also have a section for heading elements i.e. H1, H2, H3, site-wide anchors, form elements and also general classes such as .b .u .i .left .right for bold, underline, italic, text-align: left & text-align: right etc. I also include in here styling for blockquotes, images and some other common non-structure styling.

After that I like to have a grouping for "Template & Layout". Under this heading I like to place structural styling such as DIV sizes and positions. I will also throw in here some font formatting if it's specific to that particular DIV. I know some people like to break out the font styling into their own section or even stylesheet (god why does it need it's own stylesheet?)

After that, if I'm feeling ambitious, I'll create sections for @print, @handheld and @aural. I have some stock CSS I use for @print so that usually leaves @handheld and @aural to do for later.

And Don't Forget...CSS Diagnostics!

Last but not least, I have my Diagnostic Styling. I've written an article about this already so feel free to check that out, but in a nutshell CSS Diagnostics is CSS that highlights ugly areas of your HTML so that you can quickly fix them. The reason this goes at the end of the stylesheet is that it needs to 'trump' all other selectors that have been set so far.

Organize Your CSS Properties...Please!

Finally the last thing I like to do when cleaning up/developing a stylesheet is alphabetical organizing my CSS properties. Below is a selector with a whole slew of properties which are unorganized:

Now let's sort it and use some CSS shorthand (which I'll explain shortly).

Looks better, doesn't it? You'll notice one property that isn't sorted alphabetically. Did you find it? Width, yes I didn't place width at the end. I do have two exceptions with sorting my properties. The first one is width & height. The second is position + top,right,bottom,left. I like to group these two sets of properties together since they all have a relationship to one another and I find myself editing them at the same. You'll also notice that I did not use CSS shorthand for my font properties. I generally avoid using shorthand for the font set of properties as it can be a bit tricky to correctly implement since several of the properties share the same values and also need to be the correct order.

CSS Shorthand

Finally, use shorthand CSS whenever possible. It will save you lines of code to sift through and also KB of file size. A few property groups you can use it on are:

• Background
• Border
• Font-Family
• List-Style
• Margin
• Outline
• Padding

Conclusions

Your CSS file doesn't need to be an afterthought after you finished programming your website and adding the markup. It can shine, just like your carefully crafted server-side code does. By organizing, grouping, documenting and shortening your CSS file your co-workers will thank you and you will know that you did a good job at the end of the day.

Have any secrets to your CSS organizational success? Share them below -

View Comments [4]

I've seen many different methods to achieve this effect in HTML and CSS, most of the time the method requires unnecessary elements or classes. I'll give an example of how to do drop caps in CSS without any classes, and then I'll show you a second method which will require you to place a single class on the parent element.

Styling Our Drop Cap in CSS Without Classes

The first option is if you want to style the first P element on every page of your website with a drop cap. The selector below will first use the :first-child pseudo selector to find our first P element and then it will select the first letter of the P element with the first-letter pseudo selector.

I've added some other visual effects to our drop cap such as a background-color, font-family, text-transform, and a double'd border which is seldom used.

View Demo >>

Using A Class

You may also want to selectively apply a drop cap to other blocks of text on your website. In this case, simply add a class to the paragraph and add this selector to your CSS:

View Comments [0]

Recordset Function In ASP

The function takes any SQL and returns it as an HTML table. The begining part of the function sets up the opening TABLE element and also writes out the column names as TH elements.

Looping Through the ASP Recordset

Next the function loops through the recordset writing out values under the appropriate column name.

Finally it writes out the closing TABLE tag.

Putting It All Together

I've been looking for a simple function like this for a long time so perhaps I'll help a few others out with this. I've mostly used it to show on result pages after a user adds a new item to a database via a web form.

Using The Function

The function can be used by selecting the columns you want by passing the SQL to the function like so:

You can also show the columns in a different order by changing the order of your columns in your SQL statement.

Sources

• http://forums.aspfree.com/sql-development-6/how-to-get-the-field-s-name-from-a-table-2529.html

View Comments [2]

Why is not Using Print Stylesheets Wasteful?

The first reason it is wasteful is you are probably printing areas of your website template that are not actually part of your content area. Examples of these areas might be you header, navigation, footer, search box etc. With all these extra non-useful areas of your template printing every time a visitor prints your website, over time it all adds up as extremely wasteful. It's wasteful because it requires the end user's printer to print more than needed. It's also wasteful because it often adds an extra page or two to your total pages required to print. If every print job on your site is adding an extra sheet or two of paper, over the course of a year you are probably wasting a lot of paper and killing a lot of trees, especially if you have a highly trafficked website.

My theory is if somebody wants to print a literal screenshot of your website they should create a screenshot using either print screen or the utility of their choice. Firefox offers an excellent screenshot addon called Screengrab! which is very flexible in what you want to grab. Windows 7 will also come with a screenshot utility which PC users can use. (And yes, Mac users we know you already have this, you can lower your hand now).

So we've already identified that by not using print stylesheets you could be wasting an extra sheet of paper for every print job or ink that never needed to be used, what can you do to help?

Using CSS Print Stylesheets to 'Go Green'

I hate the marketing buzzword 'green' probably more than anybody I know. It's too often just a gimmick a company is using in order for them to save money. Few companies care about the environment, but all companies care about making money (that is the purpose of a company after all), and if they can save money and inadvertently help the environment, they're all of a sudden 'going green'.

First let's remove some useless DIVs from our template to save on ink and paper:

Reduce Your Line-Height

We can also shorten the length of our print job by reducing the line-height we use. I often use a line-height of 2.25em x 12px which is basically double spaced for my screen stylesheet. We could reduce this to 1em to cut down on the amount of paper needed to print our website:

Hide Advertisements & Other Useless Graphics

Another thing you might consider if it's an option is to hide any images or advertisements via CSS. User won't care to see ads on their print outs and you probably didn't promise your advertiser that the ad needed to carry through on print outs either. Also if you can get away with hiding images in the content area, I'd recommend doing this as well.

Go Grayscale With Black Font Colors

I also like to remove color from all my font when printing. This may not be a green practice but it will probably save people money over a long period of time by removing the need to use color ink to print with. You won't be able to get around this when it comes to color images but you could turn all your font styling to black.

Maximize Your Print Area

Another thing to consider is your main #content DIV. Usually this will be set to some sort of dimension in pixels by default. I've found that fixed width pixels doesn't translate well into print so let's set our #content DIV to a width of 100%.

Putting it all Together

Conclusion

I think print stylesheets should be used on every website, whether you care go green or not. It will help your end users save money on printing costs and will also give you users a more useful printout.

Feel free to add any ideas you have on improving print stylesheets in regards to going green in my comments below...

View Comments [5]

I then proceeded to visit that URL only to find out somebody had borrowed/used/stolen/was inspired by by my nealgrosskopf.com design. I then went to the root of that website to discover that it was actually a web design company that had done it. I've decided not to link to or give out the name of the company because they were actually pretty nice people. I've actually caught people stealing designs of websites I worked on before but it was always some novice using Microsoft Frontpage, not an actual web designer getting paid which was the troubling part of this experience.

My first instinct was to leave a mean message via their contact us form but I noticed a phone number and decided to call it. After all, I've always wanted to personally talk to somebody who stole a design and here was my chance to do so. I ended up talking to a person who wasn't responsible for the stolen design but was very apologetic and understanding which I really appreciated. She asked me if they could proceed with using the design, and I said yes, as long as they changed a few elements in the design because I felt they were too similar as is. She also said they could give me credit for the design since their footer was currently claiming it was designed by them. I agreed that this was probably a good idea on their part.

Rule #1: Delete Out The Google Analytics Tracking Code

My main gripe was that they had stolen my Google Analytics tracking code and were polluting my statistics. Being the crazy stats person I am, I absolutely hate it when my stats get messed up so I asked them to remove my tracking codes. Every time I've busted somebody for stealing a design, it was because they also stole my Google Analytics tracking code. If you every feel like copying some code from a website at least remove the evidence that you did.

Side By Side Comparision

Below is an example of the two designs side by side. You can also click on the image to view it larger. It does appear that they pulled a screen shot of my website into an image editing program and made some modifications to it. The source code was clearly copied and pasted though as I could see the same IDs, classes and HTML comments still.

So What Can You Do If This Happens To You?

My recommendation from past experiences is don't bother emailing or using an online contact form. I've done this several times in the past and most people just ignore you. If you can find a phone number like I was able to, I'd recommend calling and trying to speak with somebody who either worked on it, or who is the team leader of whoever worked on it. On the phone you can have a two way conversation rather than long winded back and forth conversations like email produces. I would also advise not to be a jerk to somebody that stole your design. After all "Imitation is the sincerest form of flattery". Somebody stealing your design really is a testament to your own web design skills and all of us at one time or another have at least borrowed small elements from other websites.

The problem with my example is it went a bit further than borrowing elements from my web design to outright copying and pasting of the source code as well as the design files. If you catch somebody in this stage you should contact them and at least get them to ask you for your permission.

Conclusion

I've always felt that the web is an open platform, and openness is the central theme behind the internet as a whole. Because of the web's open nature it make borrowing a lot easier than other methods of design. I would much rather have a web where a small few steal the source code/design of others than have a web were you can't even view the source code at all. I have to credit a lot of my own skills to viewing other's source code and learning from it.

If you catch somebody who has stolen your design or source code, try not to get too angry. Also trying contacting them personally as it will probably get you further than if you email them. And remember we're all web designers so take it easy on one another.

Have you every copied a design/source code before or caught somebody that has? Feel free to discuss your experience below:

View Comments [10]

My JQuery code is based on the following CSS:

I decided that much of this is redundant and makes too many assumptions about our content. If the amount of content were to grow larger, we would have to update the CSS each time. On most dynamic websites this is not a feasible solution. Also the margin-top and margin-left were to always be exactly half of the height/width so it seemed silly to have to do that math each time the width or height were to change.

Vertical Align JQuery Plugin

I first decided that I would use JQuery to figure out the height of the DIV and the content within it. I then had to take into consideration that the DIV may have a border or padding so I used JQuery's .outerHeight() property to get that value. The resulting formula looks like this:

I took that formula/code and made it so it can be used like a JQuery plugin:

This can be called when our DOM is fully loaded like so:

Simple, isn't it?

Horizontal Align JQuery Plugin

I also created a similar plugin to horizontally align a DIV. By combining the vertical align and horizontal align plugins we can set a DIV in the exact middle of the viewport. I realize that this is usually solved by giving our DIV a width and setting it's margin to 'auto'. The problem was my DIV was already positioned absolute so setting the margin to 'auto' wasn't working. I therefore used a similar approach to my vertical align solution.

Putting It All Together

View Demo >>

I should point out that the only CSS property you will need to set on the DIV is it's width. If you want your DIV's width to be 100% you can remove this property.

Sources:

• http://seodenver.com/2008/09/08/simple-vertical-align-plugin-for-jquery/
• http://blog.themeforest.net/tutorials/vertical-centering-with-css/

View Comments [9]

Feedburner also offers these statistics via an RSS feed of their own. We can use this RSS feed with some server-side code and ajax to give future feed subscribers a count of total current subscribers.

ASP File Code For Getting Total Feedburner Subscribers

Using a small amount of ASP we can retrieve the Feedburner RSS feed and get the total users subscribed to our RSS feed. This code could also easily be done in other languages like ASP.NET or PHP. If you have yet to migrate your Feedburner account over to a Google account, you'll want to comment out my "objXML.Load" line and use the one before it. Also, the following code should be placed in a separate file and named feedburner.asp.

Getting The Total Number Of Feedburner Subscribers With JQuery

Next we use JQuery to get the response stream from our ASP file. The code is placed inside of $(document).ready(function() to ensure that we don't access our #feedburner SPAN until the DOM is fully loaded. I pass the URL we are checking on via a query string to our ASP file.

Putting It All Together

View Comments [0]

I first wanted to mimic what I did with my Delicious bookmark total retrieval but didn't have any luck with Diggs JSON API variation so I turned to server side coding to accomplish my task.

ASP File Code For Getting Total Diggs

You'll want to place the following code in a separate file called "digg.asp". You'll also need to replace the following with your own domain name "Server.URLEncode("http://www.example.com/")". This is how Digg tracks their API usage.

Getting The Total Number Of Diggs With JQuery

Next we use JQuery to get the response stream from our ASP file. The code is placed inside of $(document).ready(function() to ensure that we don't access our #digg SPAN until the DOM is fully loaded. I pass the URL we are checking on via a query string to our ASP file.

Putting It All Together

Conclusion

I realize that not everyone uses classic ASP anymore but the same principles can be easily applied in PHP as well. For an example of this in action check out the source of the page you're currently on.

View Comments [0]