RedchilliworX

Suspenledland.com

2010-01-19T09:02:00.001+05:30

www.Suspenledland.com a sister concern of www.redchilliworx.com is a freelance web and graphic designer with good experience providing high quality service, and web & graphic design for all types of businesses. Suspenledland.com is an innovative Web development and graphic design company located in India and serving clients worldwide. Suspenledland.com Web & Graphic Design provides a exclusive blend of creative vision and technical expertise. Our experts are fluent in the following software programs: ADOBE ILLUSTRATOR, PHOTOSHOP, PAGEMAKER, DIRECTOR MX 2004, AUTHORWARE, DREAMWEAVER, HTML, CSS, JAVASCRIPT,FLASH, 3DS MAX , and the latest Technology Silverlight / Flex.

Tips For Designers For Translating Your Comps Into XAML

2009-02-06T17:01:00.001+05:30

Pre-Tip: Work in Blend
All of these tips are assuming that designers are building comps with another design tool like Illustrator or Photoshop and then moving the comps into Blend. If you’re not using Blend, you should be. I am not suggesting that you change your design tools or that you design differently. These are just tips for the translation process.

Tip 1: Two layers of semi-transparent gradients is fine. Twelve layers of semi-transparent gradients is not
Whenever you add a transparency layer, you add another run of rendering to all the pixels in that layer. Doing that once or twice is fine… most machines can handle that. But when you have a bunch of them, you’re begging to bring the machine to a crawl. Look at the two gradients below…

The one on the right is a solid background with two transparent gradients (a light one at the top and a dark one on the bottom). The one on the left is a single gradient. The one on the right required three passes to render. The one on the left requires one.

This does not mean that you can never have transparency in your application. But if you can figure out an economy of layers when using transparency, you’ll save yourself from from developers who are willing to make the design trade off to speed up the application.

Tip 2: The Grid layout is your new best friend. Understand it. Use it. Love it.
I once worked with a designer who used Blend and made the most beautiful screens in Blend. But when it came to implement his designs, the developers ended up ditching most of his work because every element was inside a layout inside a layout inside a layout… etc. This ends up being a huge performance killer because every layout means another set of layout calculations for the layout manager.

Instead, make creative use of the Grid layout. Within the Grid layout, you can create columns and rows with the following options:

Auto (with Min/Max options) - This column will ask the items inside it how much room they need and will expand or contract to give them exactly the room they need and no more (within the min/max limits).
Fixed Width/Height (”80″) - A fixed height or width will take exactly that many pixels of space. Easy enough.
Star (”*”) (with Min/Max options ) - this can be used as a decimal or a percentage… “.8*” or “80*”. It asks the container holding it how much room it has. After the Auto and Fixed columns or rows allocate their needed space, the “*” ones take up all the remaining available space unless hindered by the min/max limits.
A single grid can use any number of rows and columns using any combination of Auto, Fixed and Star. You would be shocked at how flexible this is. (Click here to see that flexibility in action.) You can build whole screens using a single grid. I don’t recommend that, but keep the idea of fewer layouts in mind when you are translating designs. Not every element in the project needs to be inside its own layout.

Tip 3: Use Borders, not Rectangles
Borders play nice with pretty much anything you want to do with the added benefit of being able to put stuff in it. Additionally, they are really simple layouts, so they don’t use much overhead. Take a border and put a Grid into it and you have a visually compelling and flexible combination.

Tip 4: Draw simple vector art inside Blend.
Mike Swanson has a fantastic Adobe Illustrator-to-XAML plug-in. I’ve heard that some people can use Expression Design quite well. But unless your project is extremely visual in an artsy kind of way, you should just draw simple vector art inside Blend. Not only will you save yourself the exporting-importing trouble, your XAML will look nicer and be easier to change later on.

I usually draw with the pen tool inside a Grid layout and then use the direct selection tool to make the tweaks I need.

Tip 5: (Silverlight Only) Plan on using only a few fonts
Most of my experience with fonts in Silverlight have been somewhat painful. Hopefully we’ll see that change in Silverlight 3, but in the meantime it is something that I’ve seen even experienced developers fight with. Watch this video by Tim Heuer… it will help. () And put this blog on your RSS feed… I’m working on a step-by-step tutorial for this geared at non-developers.

Tip 6: Work in “Split” mode in Blend and goof around with the XAML every now and again
Blend as a drag-and-drop design tool is absurdly powerful. Using Blend, you could build an interactive wireframe prototype in 15 minutes and never touch a line of code.

But as awesome as it is, it will be necessary from time to time to go into the XAML and tweak this or that or comment something out or copy-paste something else. Simply put, understanding XAML will make transitioning your designs a breeze and having Blend in “Split” mode will let you know just what your work in the design space is doing to the XAML. It’s a pretty painless way to start the XAML learning process.

If you’re interested in getting into the XAML a little more, I would recommend using Visual Studio 2008 in tandem with Blend. It offers intellisense (auto-complete for code) and integrates extremely well with Blend.

Hope that helps… If anyone has any questions, feel free to post them here.

Media types In CSS

2008-06-19T13:13:00.004+05:30

Defining the Media Type

First let us have a quick think about what possibilities this opportunity to restyle your page for a different output medium gives us all as designers. You’ve probably witnessed what a mess some pages can look once they’ve been transferred onto paper — useless navigation areas and ads take up space, paper and ink. The page can often look cluttered and can become illegible given the more restricted dimensions of the page.
Over the last few years it has become customary for large sites to offer links to ‘printer-friendly’ pages — separate pages that were stripped of this unnecessary content. These pages were time-consuming to generate and costly to maintain, and so disparities between the content on the two versions of the same page often crept in. With the simple CSS methods in this tutorial, nothing more than a second stylesheet would be necessary for all of these pages to print perfectly.
There are even more browser types to consider, such as aural browsers, which read webpages aloud to their users; or Braille displays, which can create interfaces from a webpage readable to their blind users. The software that drives these applications will often include a default stylesheet which will apply stylings relevant to the medium, but now you can get in there and add your own styles to these outputs.

Media Options
There are ten different media types defined in the » CSS-2 specifications. They are:

all (default if no other is specified)
aural
braille
embossed
handheld
print
projection
screen
tty
tv

Making the Association
A linked stylesheet can be associated with a media type by simply adding the media attribute to the link tag:

If the stylesheet above was linked to your document, the style rules it contained would only be applied when the page was printed out — they won’t show up when you view the page on a monitor.
Imported stylesheets are classed similarly. You can apply a stylesheet to multiple mediums by adding a comma-separated list.

Finally, inline style rules can be associated with a medium by wrapping them in an @media block:

Putting them to Work
Now it’s time for some practical tips on actually writing your new stylesheets. Restyling for print will probably be of interest to the majority of you, so here are my suggestions.
Using the CSS display property you can take redundant elements out of the visual display. I apply this to all of the navigational areas of my page like this:
td#navigation, table#footer, div.banner {display: none; }
The above method should also be used to pluck advertisements from the printout. If a user can’t click on an ad, it’s not going to be of much use to them.
We then set all of our content areas to take up the full width of the page. As you would expect, leaving widths defined in pixels gives unpredictable results when translated to paper. To save on ink and increase legibility, text and background colours are set to black on white in as many cases as possible.
table#main {width: 100%; background: white; text: black; }
You may also choose to change the font of your text to something more suitable for print. This step isn’t necessary to produce a good printable page, and it’s up to you whether you incorporate it. Usually, serif fonts look better in print than on screen, whereas it is the opposite for sans-serif fonts. Georgia and Times New Roman are both good fonts for offline reading. Print is also the medium where defining your text size in points is most appropriate.
Print out a page from HTMLSource to see the changes I’ve made to the layout. You can also see our print stylesheet itself.

Retouching skin

2008-05-27T11:49:00.000+05:30

There's a facinating discussion about the right and wrong way to retouch skin going on over on the Tutorial Blog. If you've ever grappled with this in Photoshop you might pick up a tip or two from reading the tutorial and the comments.As ever, it enforces the fact that there are several ways to approach almost every photo restoration and retouching task in Photoshop. It's no wonder confusion develops!
"The broader questions are: when retouching skin, should you eliminate blemishes with the clone stamp tool, and should you blur out all detail in the pores. The answer is ABSOLUTELY NOT on both counts. It’s bad advice; following it will limit your Photoshop proficiency rather than developing it.For skin and many other surfaces, the clone stamp tool has been almost completely superseded by the Patch tool and the Healing Brush tool. These tools are easier to use, faster, and give better results. Yes, you can simulate their effects with careful, laborious use fo the clone stamp, but you are better off just using the right tool.As others have noted, skin has pores. You can’t just turn them into mush and expect to get a believable image back. The target appearance is not a featureless, blurry surface but the appearance of fine, shallow, barely-noticeable pores. "

Is Photoshop PS3 worth the upgrade for photo restoration?

2008-05-27T11:11:00.002+05:30

Photoshop CS3 is here at last and has some exciting new features, but is there enough to upgrade for if you use Photoshop for photo restoration?The workflow features have been improved through the streamlining of palettes and self-sdjusting docks, but the workflow and interface in CS2 wasn't exactly clunky or intrusive to begin with.Adobe Bridge has been improved too ... big deal. Most people I know don't use it anyway. I find it useful, but not essential. Adobe say it is now faster, and yeah, it was kind of sluggish, but the improvements don't sound exactly mind blowing!One new feature that is really worth a closer look, and should have made it into Photoshop a long time ago in my opinion, is non-destructive smart filters. Up until now you could only apply image adjustments (eg. levels, brightness/contrast, invert, etc.) non-destructively. With CS3 you can now apply filters, say a gaussian blur, to an image or a layer with the option of coming back later and adjusting the blur settings or removing it completely. Whether this feature will be limited to certain colour modes or a limited number of the available filters remains to be seem.I am delighted to see a feature I have desired for ages, and that is rotated/scaled cloning. I've lost track of the number of times I've cursed it's absence. Wait and see, give it a year and you won't be able to live without it!The Healing Brush tools have been improved too, which is more good news for photo restorers. Changes to the Channel Mixer and extended options for creating black & white images from colour will have obvious uses too.I reserve judgement on whether it's worth the upgrade.

CSS Media Types Create Print-Friendly Pages

2008-05-26T18:10:00.004+05:30

Don't Create Multiple Pages or Fiddle with Scripts
You've decided to make your site "printer-friendly". You read the article on what it means to be printer friendly, but now you have to decide how you want to do it. There are several options:

1.Make a copy of every page or article - and manually remove all the non-printer-friendly stuff.
2.Use a (CGI, PHP, JavaScript, other) script to remove the non-printer friendly stuff on the fly.
3.Write a style sheet for print.

The drawback to option one should be fairly obvious to most people. It is very labor intensive and requires that for every page on your site, you create a second, duplicate page.
Option two is the most common choice right now, because it mitigates the problems of option one, and with a small change in how you write your Web pages, you can set it up for every page on your site. But if you don't have access to CGI or you just don't feel comfortable with programming, this method can be challenging, if not impossible.
Cascading Style Sheets to the Rescue
Luckily, CSS was not written with just Web pages in mind, and with just a few extra codes you can create a printer style sheet that removes all the non-friendly options on your page and even takes into account issues such as typography and readability. And you don't have to write two different copies of your page or do any programming to build it.
Defining a Style Sheet for Print
As with screen style sheets, you use the element to define the print style sheet your Web page should use:
The only difference between this link element and the link to your screen style sheet is the attribute:media="print"Most style sheets are written for the screen, so the media can be left off, or written as:media="screen"
Building the Style Sheet
Change colors to black on white.
Change the font to serif.
Watch the font size.
Underline all links.
Remove non-essential images.
Remove navigation.
Remove some or most of the advertising.
Remove all JavaScript, Flash, and animated images.
Change these rules into CSS

: Black on white with 12-point, serif fonts:
body { color : #000000; background : #ffffff;
font-family : "Times New Roman", Times, serif; font-size : 12pt; }

Underline links:a { text-decoration : underline; color : #0000ff; }
I also like to make the links blue, to stand out on color printers.
Remove Non-Essential Images, Ads, Navigation, and ScriptingThe best way to do this is to put

elements around each section of your page. For example, you might have the following sections:
top, bottom, left, and right navigation
.┼internal advertising
.┼content
.┼other elements
.┼Define each of them with a element:

Then, in your style sheet, get rid of the ads, navigation, and other information:
#navigation, #advertising, #other { display : none; }
The print.css Style Sheet
The print.css style sheet would look like this:
body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }
a { text-decoration : underline; color : #0000ff; } #navigation, #advertising,
#other { display : none; }
Save print.css in the same directory as the file, include the in the head of your document,
and your page will print perfectly while displaying however you would like.

Conflicting Absolute Positions

2008-05-20T13:47:00.003+05:30

On two separate occasions this month, I’ve been required to produce a layout in which a fixed-width scrolling side “pane” and flexible scrolling main “pane” must resize to fill all available space in a browser window.
As a CSS purist, I’ve always tried to avoid such dynamic layouts, but sometimes they’re required. When they are, I like to have a good old grumble about the fact that I’ve resorted to using JavaScript for my layouts.
The most advanced way of achieving such a layout is to use a JavaScript toolkit such as DOJO—but for what I was trying to achieve, even DOJO felt too bloated and seemed liable to create further complications.
We can, of course, achieve these layout goals by using JavaScript to resize the divs every time the page is loaded or resized. Unfortunately—among other headaches—that’s made more complicated by the choices between window.innerHeight and document.documentElement.clientHeight and document.body.clientHeight, and the need for cross-browser event listeners.
It seems that using JavaScript is an attainable but inelegant solution for this layout. What I really want is a lightweight, easy-to-understand, pure CSS template…
The problem with percentages
We often use elements that have dynamic widths and heights by defining those attributes as percentages. But there’s a problem with percentages: they don’t play well with others. Despite everyone’s best attempts, you just can’t mix up pixels and percentages (although I’ve read rumors that it’s in the cards).
While we can create relatively effective layouts using just percentages, we can’t then have a fixed-width side panel or a fixed-height header. So percentages just aren’t going to do the job in our layout.
The nature of divs
Adopting a tried and tested philosophical technique, I went back to the basic assumptions to try and find something else I’d missed. I realized that I thought the following statements about divs were all true:
In all browsers
A div is rectangular.
Only one corner of a div can be absolutely positioned on a page.
The location of the diagonally opposing corner must be determined by the width and height of the div.
If the width and height are dynamic, they must be determined using JavaScript.
It struck me that assumption no. 2—that only one corner of a div can be absolutely positioned on a page—should be very easy to either confirm or deny. What happens if we absolutely position a div by defining its top, left, bottom, and right properties, all at the same time? After all, although I think of it as being a “conflict,” it’s actually perfectly valid CSS.
Assigning “conflicting” absolute positions
I had assumed that if you assigned top, left, bottom, and right properties that most browsers would simply ignore two of those properties.
It seemed like a fair assumption at the time. I expected some variation between the browsers, but I also expected all of them to ignore two of the four positions.
I was utterly wrong about that. What actually happens is something rather magical. In every browser I tested, with the exception of IE5 and IE6, all four rules are obeyed. The result is that the div is effectively “stretched” to fill the viewport.

fig. 1, DIV size is computed in most browsers when absolute positioning is specified.
A bit of research revealed that I’m certainly not the first person to discover this.
“In browsers that support CSS you can specify all four edges and let the browser compute the width and the height. Unfortunately this doesn’t work in Internet Explorer…”—Autistic Cuckoo
“Technically you can use both a right and a left property and leave the width as auto. But unfortunately IE does not support this…”—css-discuss
In general, this little bit of CSS trickery seems to have been discarded due to its incompatibility with IE5 and IE6, and as a result has remained largely unnoticed, although it’s nice to see that IE7 now supports these “conflicting” absolute positions.
Incompatibility doesn’t make the discovery useless. Our original statements may still apply to IE5 and IE6, but we now have a different set of statements for all other browsers.
In all browsers except for IE5 and IE6
A div is rectangular.
All four corners of a div can be absolutely positioned on a page.
If the location of diagonally opposing corners has been determined the width and height is implied.
An alternative solution for IE
What does this mean? It means our assumption that only one corner of a div can be absolutely positioned on a page creates a problem specifically for IE5 and IE6. As it turns out Internet Explorer actually offers us its own alternative. Earlier on, I said that you can’t mix pixels and percentages, but that wasn’t strictly true: you can in Internet Explorer.
Using the power of dynamic properties, it is now possible to declare property values not only as constants, but also as formulas.
Dynamic properties are undeniably powerful, but as they’re only supported in IE, they tend to be of little real use.
But, once again, incompatibility isn’t a reason for discarding this little trick. Being able to determine the width and height of our divs as a formula means we can specify “the width of the page minus 40px.” As long as we can do that in IE5 and IE6, we can modify our original assumption #4 just a little bit and settle on our final set of statements.
In IE5 and IE6
A div is rectangular.
Only one corner of a div can be absolutely positioned on a page.
The location of the diagonally opposing corner must be determined by the width and height of the div.
The width and height can be determined using dynamic properties.
In all other browsers:
A div is rectangular.
All four corners of a div can be absolutely positioned on a page.
If the location of diagonally opposing corners has been determined, the width and height is implied.
Ah! Now that’s much more like it. As long as all of the above statements are true, we really should be able to put our entire template together using (almost) pure CSS.

In modern browsers
Our CSS for all modern browsers is now strikingly simple.
We specify the width and height of the body as 100%. (This is actually only needed for our Internet Explorer solution, but there’s absolutely no harm in including it in our main CSS.)
We hide the overflow in the body and html because we never want to see those scroll bars again.
We set the overflow to “auto” for the left and right panels, and hide it in the header.
The header has a width of 100% and a constant height of 80px.
For the side panel we specify the top (header height + padding), left (padding), and bottom (padding) positions. Then we give it a constant width of 200px.
For the right panel we specify the top (header height + padding), left (padding + side panel width padding), right (padding) and bottom (padding) positions.
All of that is very easily translated into the following CSS:
Creating the exception for IE5 and IE6
In IE5 and IE6 the bottom and right attributes of the main and left panels are just ignored.
This means that the top left corner is still pinned in place for each of our divs, and we just need to define our widths and heights.
We want the height of both the main panel and the side panel to be 100% of the height of the page minus the header height and the top and bottom padding (100%-80px-20px-20px).
We want the width of the main panel to be 100% of the width of the page minus the width of the side panel, the left padding, the right padding, and the gutter padding (100%-200px-20px-20px-20px). The width of the side panel is a constant, and has already been defined, so nothing needs adding here.
By using a conditional comment we can include these expressions for IE5 and IE6. (Line wraps marked » —Ed.)
Don’t forget: we specifically had to set the height and width of the body to 100% for this to work, but we didn’t need to hide that from other browsers, so it’s included in the main style sheet.
Beautiful
And there we have the finished layout.
Okay, those dynamic expressions aren’t valid, but they are at least hidden from the browsers that don’t need them. Although they’re presented as CSS those dynamic expressions are in truth JavaScript, and as such they won’t work in IE5 and IE6 if JavaScript is turned off.
But then, none of the alternative solutions would work in that situation either.
{Although this technique was developed independently, an article that suggested many of the same methods was published in 2004 by Alex Robinson. —Ed.}
Known issues
There’s a small and annoying bug in Opera 8. Although the side div resizes correctly when the page first loads, it doesn’t dynamically resize when the window size is changed.
This seems to be because we’ve given it a constant width, and I have, so far, been unable to find a way around this issue. Happily, it’s fixed in Opera 9, and it isn’t a particularly critical bug to begin with.

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

2008-05-20T11:41:00.003+05:30

Progress always comes at a cost. In the case of web browsers, users bear the cost when developers take the rendering of certain authoring tools and browsers (especially Internet Explorer) as gospel. When a new version of that browser comes along and fixes bugs or misinterpretations of the spec (or introduces new ones) or in any way changes behavior, sites break and our clients, bosses, and users get very unhappy.
We could spend hours explaining why our sites broke, but wouldn’t it be better if they didn’t break in the first place?
A little background
Building on the momentum created by the release of Internet Explorer 7, which included major advances in CSS support, the IE team began work on a completely new rendering engine for IE8—one that followed the CSS 2.1 spec as closely as possible. The culmination of their efforts is a browser capable of rendering the Acid2 test accurately. For those of you keeping track, this means that IE will soon support generated content and data URLs, and, it has been confirmed, will banish hasLayout forever. This will put its rendering on par with other browsers that have passed Acid2, including Safari, iCab, Konqueror, and Opera. (Firefox 3, which passes Acid2, had not been released as of this writing.)
Throughout the development of the new engine, the IE team has been mindful of the backlash they received upon the release of IE7. Some standards zealots and even a few Microsoft fans felt that they didn’t go far enough in IE7 with bug fixes and improvements to CSS support. But a far greater number of developers gasped in utter disbelief as their websites, which looked great in IE6, broke in IE7. On his blog, standards advocate Roger Johanssen offered three reasons for the breakage, and in their drive to improve standards support, the IE team discovered a fourth: the DOCTYPE switch, a core technique enabling modern CSS layouts, is fatally flawed as a way to protect compatibility.
The DOCTYPE switch is broken
Back in 1998, Todd Fahrner came up with a toggle that would allow a browser to offer two rendering modes: one for developers wishing to follow standards, and another for everyone else. The concept was brilliantly simple. When the user agent encountered a document with a well-formed DOCTYPE declaration of a current HTML standard (i.e. HTML 2.0 wouldn’t cut it), it would assume that the author knew what she was doing and render the page in “standards” mode (laying out elements using the W3C’s box model). But when no DOCTYPE or a malformed DOCTYPE was encountered, the document would be rendered in “quirks” mode, i.e., laying out elements using the non-standard box model of IE5.x/Windows.
This concept was first implemented in IE5/Mac two years later, and was quickly adopted by the other browser makers. Standards-aware developers were already including a DOCTYPE declaration in their documents for validation purposes, so it required no extra effort on their parts to get browsers to render documents according to the spec. Developers who weren’t standards-minded were blissfully unaware that their documents were being given special treatment because neither they nor the tools they were using inserted well-formed DOCTYPEs.
Unfortunately, two key factors, working in concert, have made the DOCTYPE unsustainable as a switch for standards mode:
egged on by A List Apart and The Web Standards Project, well-intentioned developers of authoring tools began inserting valid, complete DOCTYPEs into the markup their tools generated; and
IE6’s rendering behavior was not updated for five years, leading many developers to assume its rendering was both accurate and unlikely to change.
Together, these two circumstances have undermined the DOCTYPE switch because it had one fatal flaw: it assumed that the use of a valid DOCTYPE meant that you knew what you were doing when it came to web standards, and that you wanted the most accurate rendering possible. How do we know that it failed? When IE 7 hit the streets, sites broke.
Sure, as Roger pointed out, some of those sites were using IE-6-specific CSS hacks (often begrudgingly, and with no choice). But most suffered because their developers only checked their pages in IE6 —or only needed to concern themselves with how the site looked in IE6, because they were deploying sites within a homogeneous browserscape (e.g. a company intranet). Now sure, you could just shrug it off and say that since IE6’s inaccuracies were well-documented, these developers should have known better, but you would be ignoring the fact that many developers never explicitly opted into “standards mode,” or even knew that such a mode existed.
Chris Wilson, Platform Architect for Internet Explorer, has often said that one of the core tenets of development on IE is that any choices the IE team makes must not “break the web”. Sadly, IE7 did just that for quite a number of people. Unwilling to make the same mistake twice, Microsoft reached out to The Web Standards Project (of which I am a member) and to several other standards-aware developers, and asked for our help in coming up with a better method of allowing developers to “opt in” to proper standards support. The goal was to find a method that was more explicit than the DOCTYPE switch, and could be implemented in any browser, not just IE.
Future perfect
At last year’s SXSW, I had the good fortune to watch a fantastic panel led by New York Public Library’s Carrie Bickner (who also happens to be the wife of ALA’s publisher, Jeffrey Zeldman). The panel, “Preserving our Digital Legacy and the Individual Collector,” amounted to a discussion of the problems libraries and individuals run into when trying to maintain digital archives. Most of these problems stem from advances in file formats and applications: Microsoft Office 2007, for example, cannot reliably render a Word 1.0 document as it was originally intended to be rendered. The panel got me thinking about how the web has changed since its creation and how it will continue to change as web standards evolve.
As a proponent of web standards, I want to see browsers continually improve their implementations of standards while adding support for new ones, but I also see it’s important to preserve the web we’ve worked so hard to build—table-based layouts and all. Sure, most trips through the “Wayback Machine” don’t suffer in modern browsers because the DOCTYPE switch still serves them well, but what about a site built to IE6’s implementation of “standards” mode? We already know that, in many cases, IE7 won’t render it properly. Does that mean that we need to keep a copy of IE6 on hand in order to view the page as the author intended? That’s exactly what many libraries have done in order to be able to view elderly files. With IE8 on the horizon, we have the same potential problem with documents created using IE7’s rendering engine. What’s the solution?
Targeting a browser version
In an ideal world, of course, all specifications would be perfect from the get-go, and their implementation in user agents would be immediate and flawless. In a slightly more down-to-earth version of an ideal world, browser vendors would immediately integrate regularly updated standards into new user agents—and users would have instant access to the latest version of those browsers without having to lift a finger. Were that the case, we developers would be able to build sites and applications that take advantage of the latest and greatest web technologies without worrying about backward compatibility. But as we all know, the world is nowhere near even that level of perfect.
Standards are developed and advanced in fits and starts, sometimes taking several years to find their way to “recommendation” status. Browser release cycles are driven by product management and marketing concerns—security, features, speed—and rarely coincide with the finalization of standards specifications, even when the browser makers themselves have been intimately involved with the development of those very standards. And users, especially within an organizational context, are often slow to upgrade their browsers.
All of these factors leave us, the website developers, in a bit of a pickle when it comes to making websites. How do we ensure that browsers continue to render what we want them to?
We could specify the version of the languages we use, such as CSS 2.1 or JavaScript 1.5. Unfortunately, browser vendors often implement only part of a spec and the interpretation of a specification often differs from browser to browser, so any two contemporary browsers may offer completely different renderings of the same CSS or may trigger completely different events from the same form control.
With this spanner in the works, we’re really only left with one option for guaranteeing a site we build today will look as good and work as well in five years as it does today: define a list of browser versions that the site was built and tested on, and then require that browser makers implement a way to use legacy rendering and scripting engines to display the site as it was intended—well into the future.
This is exactly what our group decided to recommend for IE8, and we hope to see it implemented in other browsers as well.
Keeping the syntax simple
One key to ensuring that this browser “version targeting” was easy for developers to adopt was to make it easy to implement by hand or in an authoring tool. We considered many syntax options, including a conditional comment-like syntax, processing instructions a la the XML prolog, and even HTML profiles such as those adopted by the Microformats community, but few seemed to fit the job as well as the meta element.
Using a simple meta declaration, we can specify the rendering engine we would like IE8 to use. For example, inserting this: {meta equiv="X-UA-Compatible" content="IE=8"}
into the head of a document would make IE8 render the page using the new standards mode. This syntax could be easily expanded to incorporate other browsers as well:
In the interest of speeding up the processing of the lock instruction, it is important to prioritize the version targeting meta element in much the same way as we prioritize the character encoding information. In order to work, the meta element will need to be placed in the head of your document, as close to the top as possible. It can be preceded by other meta elements and the title element, but will need to be placed above any other elements—and you can’t add it into the DOM via JavaScript.
As those of you with keen eyes probably noticed, the meta element we are using here is of the HTTP-equivalent variety, which means we can set the following header on the server to get the same effect:X-UA-Compatible: IE=8;FF=3;OtherUA=4
We can also use both methods in concert. For example, it is possible to set a baseline lock on a whole site using the header method and then override that header on individual pages, as needed, using the meta element.
Whither progressive enhancement?
Having the ability to lock your site to a particular browser version is fantastic for ensuring that your site will be usable well into the future, but does it undermine the concept of progressive enhancement? Will we have to alter the way we build sites? Can we still take advantage of new CSS properties automatically, as they become available? These were some of the many questions I had when we began discussing a possible “version targeting.”
For instance, let’s say IE8 wasn’t going to support generated content—if the Acid2 announcement is any indication, it should, but just bear with my use of it as an example—and we used generated content on a website that “targeted” IE8. Every other modern browser with the exception of IE would render that generated content, but even if IE9 included support for generated content, someone using that browser would not see the generated content because the site was locked to IE8. The site’s lock would need to be updated to IE9 for the generated content to appear, which goes against the core concept of progressive enhancement.
As much as it pains me to lose this particular aspect of progressive enhancement, this behavior is honestly the best thing that could happen, especially when the site concerned is public-facing. After all, we shouldn’t make assumptions about how browsers will behave in the future. If a change in IE9 would break the layout of our site or the functionality of one of our scripts, that could be disastrous for our users, sending our team into a mad scramble to “fix” the website that was working fine before the new browser launched (which is pretty much the boat we’re in now). Version targeting gives our team the ability to decide when to offer support for a new browser and, more importantly, gives us the much-needed time to make any adjustments necessary to introduce support for that new browser version.
So does version targeting spell the end of progressive enhancement? At this point, no. First of all, we will be dealing with legacy/pre-lock browsers for years to come, and progressive enhancement is a proven way to manage the differing levels of CSS and JavaScript support among them. Furthermore, there will still be a place for conditional comments to deliver style and scripting patches to IE browsers though we hope there will be a diminishing need for them over time. Finally, writing JavaScript using progressive enhancement techniques will still greatly cut down on the re-factoring time needed when preparing to launch support for a new browser.
Extra credit: living on the “edge”
For those willing to throw caution to the wind, let the chips fall where they may, or any other manner of colloquialism for coding with reckless abandon, IE will support a keyword value of “edge:”
This option, though strongly discouraged, will cause a site to target the latest IE browser versions as they release. It is a far cleaner alternative than the inevitable hack of setting an arbitrarily high value—IE=1000, anyone? But with all of the benefits of version targeting, the “edge” value is probably not practical for anything but experimental websites. That’s because even Eric Meyer can’t predict layout or scripting bugs that may be accidentally introduced by a new browser version.
Hope for the future
For many years, we designers and developers have been yearning for a way to reliably deploy our websites. In addition to the headaches of writing cross-platform styles and scripts, we’ve had to deal with the fallout from new browser releases that inevitably broke something we couldn’t possibly have anticipated. It’s never fun explaining the cause of an unexpected break to our clients, bosses, and users. But with IE8’s introduction of version targeting, there is a light at the end of the tunnel. I, for one, hope other browser vendors join Microsoft in implementing this functionality.
Illustration by Kevin Cornell in a list apart article.

Thank you Kevin

Regards Ritesh Niranjan

Web Designing for Context with CSS

2008-04-24T15:01:00.001+05:30

Web standards promised us improved multimedia delivery: the ability to optimize content for computer screens, handhelds, printers, projection devices, and other media.
The CSS required to accomplish this is simple. All you have to do is import a separate style sheet for each media type to override the style selectors for the primary medium. Check out Eric A. Meyer’s fantastic and influential article “Going to Print” for an in-depth example of how to do this. (Warning: some media aren’t fully supported.)
Most of the discussion thus far in the design community has focused on styling content for varying media. Specifically, designers have tried to improve the accessibility of content, stripping away heavy graphics for handhelds or switching to more legible fonts for print.
We don’t have to stop there. Instead of using CSS to style the same content for different media, why not use it to display content especially suited for the situation?
Imagine that a designer reads an article in his favorite web magazine and then prints it out. The designer staples the pages together, grabs a highlighter, and reads the article, marking the most important points and jotting down notes in the margins. Over time, he refers back to the hardcopy.
What can we say about this situation? Is there anything unique about it? What makes it worth noting?
Different media offer different opportunities
First of all, the designer in the above example viewed the article in a different medium than it was originally designed for, and used the article in ways that it couldn’t be used online (i.e. highlighting selected passages). Secondly, we know the designer cared about the article so much that he wanted a physical copy of it. That makes him fairly special compared to the folks who “only” read the web version.
Designing for context
Say you want to use context-aware content to speak to potential visitors to your site. What happens when someone who hasn’t visited your site reads a printout of one of your articles? What message can you give that person when they print the article that you wouldn’t give to someone who reads it online? If your goal is to increase readership, you might say something like:
You are viewing a printed version of an article that came from a fantastic website (http://www.xyz.com) where you can find many more relevant, insightful articles. We think that you’ll be interested in this other article (http://xyz.com/article02.html) because it deals with the same subject as the one you are now reading.”
If your goal is to increase account sign-ups, you might say something like:
If a friend or colleague gave you this printout, you might be eligible for a special, one-time offer. Sign up for an account and we’ll give you 10% off your first purchase.”
If your goal is to get people inquiring about your services, you might say something like:
You are reading an article written by J.D. of XYZ Company. J.D. lives this stuff. If you have any questions about the services mentioned in the article simply give J.D. a call at her personal number (321-867-5309 ext 123) and she’ll be able to talk with you in-depth about what XYZ can do for you”.
(The third example might not be particularly suited to print, but might work well for readers who view your content on a handheld phone. You know it’s not hard for them to call you.)
But don’t just put these messages on the website for everyone to see. You don’t want to deliver them out of context; you want to create the special situation that exists when you talk to people in their context and they realize it.
A dash of CSS will do
The CSS used to accomplish this is very easy. Create a div with the content that is specifically suited for the medium you’re designing for — for this example, let’s say print:

Highly persuasive text of offer.

Use the display: none; property applied to the div for your screen style sheet so that the div does not display on the web (screen). In your style sheet for screen, use:
div#offer4print { display: none; }
Then style the declaration in your print (or whatever media you’re designing for) however you’d like in your style sheet for print:
div#offer4print { //insert styling for print here }
Other ideas for printing:
If you know a reader’s name (because, for instance, they’re logged in), insert their name on the printed version. Now it’s a print piece designed especially for them: ex libris Joshua Porter.
Give them special offers. Remember, these people are different from casual readers; treat them accordingly and design for their context.
Ideas for handhelds:
Phone numbers (obviously). Offer direct access to information related to the article they printed. They will appreciate it.
Provide them with a simple way to email themselves an easy-to-read (and easy to print) PDF version of the document.
Start doing stuff like this, and people will talk about you. They’ll show their friends and coworkers. They might say, “Hey look at this. This only showed up after I printed it. That’s different. Show this to the website VP. I’m going to see if any of the other pages on the site do this.”
Exploring these methods, you can come up with unique innovations that work particularly well for your users. Of course, you don’t need CSS to do this. You can use any technology with the ability to distinguish between media. The easiest way, however, takes a little context and just a dash of CSS.

RedChilliWorX Top NEWS

2008-04-11T15:11:00.002+05:30

07.Apr.2008
RedChilliWorx is one of the silverlight starter, Microsoft added the Redchilliworx.com for using and implementing his new technology Silverlight on their site and rated as 4.5 out of 5. India's Top Web Designer and professional person is engaged into Creating Silverlight Websites and Applications. >> View more
18.Jan.2008
OasisGraphic.com is owned by redchilliworx.com Microsoft added the Oasisgraphic.com for using and implementing Silverlight on their site and rated as 4.5 out of 5. >> View more

Thanks for such a good effort guys.
Regard's
Ritesh Niranjan

Silverlight 1.0 Animation: Checkerboard, blinds, and comb

2008-04-11T12:30:00.006+05:30

This post describes how to create a Silverlight 1.0 based checkerboard, blinds, and comb animation. The effect is added to my animation library so you can reuse the effect using a single line of code. You can download the complete source from here.
To create your own checkerboard animation using my animation library download the source code and include Animator.jas and XamlObjectFactory.js in your project and reference them in your Silverlight host page. To create an across checkerboard effect, use the following line:
SilverlightRecipes.Animator.checkerAcross('CheckerAcross', sender.findName('ToAnimate'), '1', 10, 10);
The first parameter is a unique ID for the animation storyboard. The ID is required because storyboards added to a UIElment resources must be named. The second parameter is the animation target. The target can be any UIElement. The third parameter is the animation duration in seconds. The third parameter is the number of horizontal checkers, and the fourth parameter is the number of vertical checkers.
To create a top down checkerboard animation use the following line of code:
SilverlightRecipes.Animator.checkerDown('CheckerDown', sender.findName('ToAnimate'), '1', 10, 10);
To create a vertical blinds animation use the following line of code:
SilverlightRecipes.Animator.blindsV('BlindsV', sender.findName('ToAnimate'), '1', 10);
To create a horizontal blinds animation use the following line of code:
SilverlightRecipes.Animator.blindsH('BlindsH', sender.findName('ToAnimate'), '1', 10);
To create a vertical comb animation use the following line of code:
SilverlightRecipes.Animator.combV('CombV', sender.findName('ToAnimate'), '1', 20);
To create a horizontal comb animation use the following line of code:
SilverlightRecipes.Animator.combH('CombH', sender.findName('ToAnimate'), '1', 20);
The idea behind these animations is to use multiple wipe animations with different clippings, start times, and durations to generate the desired effect. For example the clipping for 2*2 checkerboard is a PathGeometry with four PathFigure instances to represent each rectangle of the checkerboard:

(pathgeometry)
(pathgeometry.figures)
(pathfigure isclosed="True" startpoint="0,0")
(pathfigure.segments)
(linesegment point="0,0")
(linesegment point="0,135")
(linesegment point="0,135")
(/PathFigure.Segments)
(/pathfigure)
(pathfigure isclosed="True" startpoint="0,135")
(pathfigure.segments)
(linesegment point="0,135")
(linesegment point="0,270")
(linesegment point="0,270")
(/PathFigure.Segments)
(/pathfigure)
(pathfigure isclosed="True" startpoint="200,0")
(pathfigure.segments)
(linesegment point="200,0")
(linesegment point="200,135")
(linesegment point="200,135")
(/PathFigure.Segments)
(/pathfigure)
(pathfigure isclosed="True" startpoint="200,135")
(pathfigure.segments)
(linesegment point="200,135")
(linesegment point="200,270")
(linesegment point="200,270")
(/PathFigure.Segments)
(/pathfigure)
(/PathGeometry.Figures)
(/pathgeometry)

And the animation is done by a single storyboard with three PointAnimation instances to generate the wipe effect. The following is an example for a 2*2 checkerboard animation:

(storyboard duration="00:00:01" name="CheckerAcross")
(pointanimation duration="00:00:0.5" begintime="00:00:0.5" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" to="200,0")
(pointanimation duration="00:00:0.5" begintime="00:00:0.5" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" to="200,135")
(pointanimation duration="00:00:0.5" begintime="00:00:0.5" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" to="0,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[0].(LineSegment.Point)" to="200,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[1].(LineSegment.Point)" to="200,270")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[2].(LineSegment.Point)" to="0,270")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[0].(LineSegment.Point)" to="400,0")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[1].(LineSegment.Point)" to="400,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[2].(LineSegment.Point)" to="200,135")
(pointanimation duration="00:00:0.5" begintime="00:00:0.5" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[0].(LineSegment.Point)" to="400,135")
(pointanimation duration="00:00:0.5" begintime="00:00:0.5" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[1].(LineSegment.Point)" to="400,270")
(pointanimation duration="00:00:0.5" begintime="00:00:0.5" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[2].(LineSegment.Point)" to="200,270")
(/storyboard)

Illustrated By Ritesh Niranjan

Silverlight 2.0 Deep Zoom using MultiScaleImage Control

2008-04-11T12:23:00.000+05:30

MultiScaleImage Control
This is my first Silverlight 2.0 tutorial. I have seen MIX keynote yesterday and was really impressed with Hard Rock's Memorabilia sample http://memorabilia.hardrock.com/. I tried to reproduce the sample but could not find any documentation about Deep Zoom. After some search, I found a tool released by Microsoft called "Deep Zoom Composer". You can download the tool from here . And you can get the user's guide from here. The composer is very simple, you will import your images, arrange your photos, then export. These steps went smoothly, but I didn't know what I am supposed to do with the exported output, but after some hacking I could display the image, zoom in and out, and move the canvas. So I decided to share how I accomplished these tasks.Displaying Deep Zoom ContentThis is the simplest task, all you need to do is inserting a MultiScaleImage control and set its Source property. But there are a couple of tricks here, first you need to copy the folder that "Deep Zoom Composer" generated to your clientbin folder. The second is that the Source property should refer to your items.bin file if you exported your content with "Create Collection" option selected, or info.bin file otherwise.ZoomingYou can zoom either by using ViewPortWidth property, or better using ZoomAboutLogicalPoint method, the method takes zooming factor, and logical x, y co-ordinates to zoom around. The following code sample shows how to use this method
if (!isCtrlDown) this.DeepZoom.ZoomAboutLogicalPoint(1.5, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).X, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).Y); else this.DeepZoom.ZoomAboutLogicalPoint(0.75, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).X, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).Y);The isCtrlDown field is set in the KeyDown, KeyUp events of the root canvas. I have tried setting the events on the MultiScaleImage control, but it did not fire, not sure why, here is the code private void DeepZoom_KeyDown(object sender, KeyEventArgs e) { if (e.Key == Key.Ctrl) isCtrlDown = true; } private void DeepZoom_KeyUp(object sender, KeyEventArgs e) { if (e.Key == Key.Ctrl) isCtrlDown = false; }
Moving ContentThis is the most tricky part because of the logic needed to handle dragging. But when it comes to the MuliScaleImage control, it is relatively easy and require only one line of code to modify the ViewportOrigin property, here is some sample code if (isDragging) { Point newOrigin = new Point(); newOrigin.X = this.DeepZoom.ViewportOrigin.X - ((e.GetPosition(this.DeepZoom).X - lastMousePosition.X)/this.DeepZoom.ActualWidth); newOrigin.Y = this.DeepZoom.ViewportOrigin.Y - ((e.GetPosition(this.DeepZoom).Y - lastMousePosition.Y) / this.DeepZoom.ActualHeight); this.DeepZoom.ViewportOrigin = newOrigin; }You can download the complete sample project with source code from here

Quick CSS Mockups with Photoshop

2008-04-09T14:56:00.006+05:30

You need to make a set of web design mockups for your client. You’d like to find an easy way to show these mockups in clean XHTML and CSS code, because plain JPGs don’t convey the full sense of the design, and sliced tables are evil. In fact, let’s forget table slices ever existed.
Caveat: This article is for people who need to produce valid, standards-compliant mockups quickly, with the graphics tools they already use. This is not a production technique for people who want to get the most benefit out of (X)HTML by creating structural, semantic markup. Creating structural, semantic markup, as A List Apart and most standardistas recommend, still takes time, thought, and hand-coding.
WYSIWYG graphics editors such as Fireworks, GoLive, and ImageReady allow you to generate HTML code, but the exported code tends to use tables or absolute positioning. That’s so 1999. So what, then, can these programs do in terms of producing valid and useful code? More than you think. I’ll show you an easy way to produce mockups with Photoshop, prepare them for the web with ImageReady, and clean up the code afterward.

Background

I must admit, Fireworks was a major part of my design arsenal until I started taking accessibility and standards compliance seriously, and I don’t think I’m alone here. The problem I ran into was that I could only export HTML code using tables, when what I really wanted was relatively positioned div elements. Only with ridiculous hours of coding and copious quantities of caffeine could you convert such a table to relative divs, and this just steals more time from when you could have been designing more mockups or sleeping. So why start off with a sliced table at all? What I needed was a way to generate clean relatively positioned divs—or, barring that, code that was close enough that it wouldn’t take aeons to make it play nice with W3C standards. These days, this is surprisingly straightforward with ImageReady.

Make ImageReady CSS-ready

Adobe Photoshop CS ships with a web-focused sidekick: ImageReady CS. Adobe Fireworks is great for vector applications, but less so for raster work. Conversely, ImageReady is perfectly suited for raster work, but less so for vector work (although that’s changing). Using ImageReady, you can export slices as absolutely positioned divs, which can be easily transformed into relatively positioned divs.
This means you can start off in Photoshop to do all your complex masking, fades, Illustrator vector art, filters, etc., and then switch to ImageReady to slice up your layout. You’ll want to be sure that your layout is aligned to the top left; don’t try to center it just yet—that’s a job for CSS later on. Using ImageReady, you can style your navigation menu items (unless you’re doing that with pure text / CSS) and set rollover states. (For a production layout, you would probably shy away from Adobe rollovers and actions in favor of your own JavaScript or CSS rollovers, but for mockup use, these rollover states should suffice.)

Slice it up

Use the Slice tool to create your slices. Once you’re finished use the Slice Select tool to select and rename each section. For example, you may have a header that will become a div tag later on. ImageReady would really like to call this “Yourfile_1_01,” but you’ll save yourself some work by giving it a logical name from the start, like “header”. You will use this later on when editing your CSS. The same goes for the content area, any side columns, the footer, and other areas you may want to define.
Jump back and forth between designing in Photoshop and ImageReady until you’re ready to test out your design in a browser. Then, in ImageReady, go to File › Preview In › (insert favorite browser here). See whether your slices look and behave as intended, and modify your optimization settings accordingly. Exported slices will result in JPG or GIF images inserted into div tags with img tags; later, you may want to insert some of the images as background images for the individual divs instead.

Exporting HTML & CSS

Set your output settings: select File › Output Settings › HTML and change the settings to your liking. Note that you can opt to generate XHTML code. Select “Next” and check the settings in Saving HTML Files.
Select “Next” again; this brings you to Slices. Here you can choose to “Generate CSS.” Next to Referenced, you’ll see a dropdown menu that allows you to choose By ID, Inline, or By Class. Select By ID. You can also get detailed with slice naming conventions if you’re so inclined.
Export your mockup to (X)HTML/CSS using File › Save Optimized As, and choose a location that makes sense to you. Note that ImageReady will create an /images subdirectory in the same location where you save the HTML file. (Line wraps marked » —Ed.)

Toast, anyone?We now have slices consisting of absolutely positioned divs, with the CSS contained directly in the HTML file’s head. Maybe absolutely positioned divs are just what you need—if so, grab a cup of coffee and relax. Otherwise, let’s take things a step further by converting these divs to relative positioning.
First, make a copy of the ImageReady-generated HTML file and open it in your code editor (e.g. Dreamweaver, BBEdit, or another favorite editor). You’ll probably want to wrap all your divs inside an outside container div to control your mockup layout more precisely. ImageReady exports the CSS slices as divs and wraps them in a container div called “Table_01.” Rename the “Table_01” div (to “container”, for example) and style it with CSS as you see fit. If you don’t need a container div, just delete the “Table_01” div and its CSS counterpart.
Next, switch all your other divs to relative positioning by removing the absolute positioning declarations and letting them inherit relative positioning. Pay special attention to your floats and clears. You could try to switch all your divs at once, but a more precise and predictable way to go about it is to change one div at a time and check each div individually.
For divs that contain images, decide which should be turned into CSS background images and which really deserve an image tag. Some slices (a content area, for example) may be of a single color and thus should be set using a CSS style without any images. Set the overall page background separately using your stylesheet. If this were a production layout, you’d probably move your CSS to an external stylesheet, but that may be overkill for single-page mockups. Validate your code and you’re good to go.
You’ll need to add appropriate height and width declarations back in if the image in this element becomes a background image in a later revision.

CSS Layout Techniques: for Fun and Profit

2008-04-09T13:33:00.000+05:30

Look Ma, No Tables.
If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find, and some that I made up when I was bored last Thursday. All the examples on this site have been reduced to only their essential code, and you will find the source displayed on each page to hopefully make it quick and easy to understand the inner workings of the CSS. Feel free to steal all the code you find on this site, and consider linking back here on your site or in your source comments.
You will also find below links to various online CSS resources and tutorials, appropriate for both the novice and the seasoned CSS veteran.
I started this collection because of the dearth of resources I found out there when I went looking for information on how to translate typical table based layouts to CSS layouts. I know it is not nearly exhaustive, so if you see that there is something missing, whether it is a particularly good tutorial, or a site that is using a complex CSS layout, please let me know about it. I will pay you $3750 for each link you submit that I use.
If you don't have any idea why anyone cares about this topic, because like tables can do all that stuff and more, please read this: To Hell with Bad Browsers. And then read this follow up interview with Zeldman. And then read about the Web Standards Project's Browser Upgrade campaign. The future is bright, kids!

CSS Techniques
CSS layout techniques and the sites that use them.
3 Columns, The Holy Grail of page layouts — The most elegant technique and perhaps the most sought after layout: a 3 column page with a fluid center column. Easy to understand, easy to implement. I first saw this layout at dynamic ribbon device and have since learned that the sweet CSS came from Rob Chandanais of BlueRobot. Owen also made a very nice tutorial using this layout technique.
2 Columns, ALA Style — Famously chronicled by Jeffrey Zeldman in his ALA article A Web Designer's Journey, this is an extremely easy layout to implement requiring only a simple float:left declaration.
4 Columns, All Fluid — This technique can actually be used to provide as many columns on a page as you like. Drawback #1) it gets difficult quickly if you want to make any of the columns a fixed width. Drawback #2) it relies heavily on percentages, which the various browsers all calculate differently, so you can't place your columns very precisely. Still, a very useful technique, especially if you don't want borders and different background colors for your columns.
3 Columns, All Fluid — A much simpler and potentially more useful technique that then 4 column technique above. It uses float:left, suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed.
Static Width and Centered — 3 columns all with static widths, and contained in a parent DIV which remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.
Nested Float — A very simple layout that features a nested, floated menu in the upper right. Easily reversed. A variation of this technique is in use on this very page.Dealing with the CSS box Model — IE5 Mac, NS6, Opera 5; they all handle borders and padding correctly, adding them to the width of the box. But IE5 PC gets it all wrong, placing them within the width of the box. IE5 PC's implementation is arguably easier to work with (scratch that, it is easier to work with), but that is beside the point. How do you deal with this discrepancy between the browsers? There are ways, my friends, there are ways.-->
straight to the top
CSS Resources
Specs, primers, validators, stuff like that
The CSShark Answers FAQs — Martina Kosloff has compiled a pretty good FAQ on CSS. Worth your time.
css/edge — From the mind of Eric Meyer comes this great little site pushing CSS to the edge. It is, in his words: "intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. It does not exist to present or explain safe cross-browser techniques; in fact, almost the opposite. The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations."
websitetips.com CSS section — Literally a ton of links to CSS resources from all over. A better set of links than this one by far.
Guide to Cascading Style Sheets from the Web Design Group. — An excellent primer if you need to start from scratch. It features a tutorial, a reference section, a syntax validator, and more CSS links. A little dated, but still an excellent place to start.

Ritesh Niranjan Pic

2008-04-03T12:03:00.003+05:30

Regard's
Ritesh Niranjan
Web & Graphic Designer(Web Developer)

RedChilliWorX - Creative Solution For Your Bussiness
Charmwood Plaza, Charmwood Village, Surajkund Road,
Faridabad, Haryana 121009, INDIA
M - 91-9911138302
email - ritesh@redchilliworx.com
Website : www.redchilliworx.com

How to embed fonts in webpages

2008-04-03T11:48:00.000+05:30

Find a font. First, find a TrueType font you want to use. I can recommend Larabie Fonts, where there are over 300 free fonts to download. I made my handwriting font for $10 using Fontifier, a service that makes a TrueType font from a scan of your handwriting. You can get a 30 day trial version of Font Creator if you want to design more sophisticated fonts.
Install your font. To do this, you just drag the font's ttf file into the computer's fonts folder. You can find this in the control panel.
Test your font. The default fonts supplied with computers are optimised for reading long tracts of text on screen. If you want to change your website's body copy, choose carefully. If your font is installed correctly, you should be able to format text using the font in Microsoft Word or other word processing packages you have on your system.
Use your font in your webpage. You'll need to use code similar to this, but remember the font name might not be the same as the font's filename:

My spidery script...

To create the embedded font files, you need to download Microsoft's free Web Embedding Fonts Tool (WEFT). It's about 9MB and runs on Windows 98 and later. Microsoft suggests it might work on Apples running PC emulators.
Install and run WEFT. The first time it runs it will scan the computer for installed fonts.
If you've closed WEFT and come back to it, click on the Wizard button. First time it starts automatically. You'll be asked for your name and email address. This will end up on your webpages that use the fonts unless you edit it out again, so enter a spam-safe email address.
Tell WEFT which HTML pages you want to use embedded fonts on. These should be the pages you've already styled in step 4 above. When I tried it, the feature to spider links from the first page didn't work.
WEFT will analyse your webpages to see which fonts they use and whether they can be embedded or not. The embedded font files (EOT files) can be set to only include the characters you're using. This is called subsetting. You can see which characters are included for each font by clicking on the subset button. If you want to be able to update text in future, it's a good idea not to use any subsetting. Otherwise you might find your font file doesn't have all the characters you later need.
The tool lets you define which webpages or websites are allowed to use the font so you can share fonts between your sites while blocking others from snaffling your bandwidth. You can have a maximum of three paths.
Back up your webpages. WEFT will add code to them to reference the font files.
Create the font objects. Your EOT files will be created and your webpages will be updated to refer to them.
Test it - Uninstall your custom font by removing it from the fonts folder in the control panel again. Upload your webpage and the associated EOT file. Visit it using IE. If you can see the font on screen, it's worked! If not, check first of all that you haven't blocked font downloading in your security settings in Internet Explorer.
Illustrated By : Ritesh Niranjan

Choosing the right file format for a logo

2008-04-01T11:10:00.000+05:30

For a Word or Powerpoint document
You need a GIF (.gif) file. These are 'bitmap' files (pictures made of dots), and will be easily imported by Office applications. JPEG (.jpg) files are unsuitable for logos - they are intended for colour photographs. I provide GIF files because they use up less disc space, but bigger BMP (.bmp) files an alternative.

For a web page
For this you need a GIF file. Don't try to scale it though!

Professional print
Here the GIF file is all but useless. You need an EPS file. These are 'Vector' files. (see below) Because EPS files are big, (they take up a lot of disk space, and take a long time to download) I 'compress' them with a program called Stuffit. They end up with the suffix '.sit'. They are only really suitable for professionals who use Apple Macs.

Definitions
Bitmap files are made up of rows and columns of dots. When you enlarge them, you can see the dots.

Vector files are made up of mathematically described geometric lines and shapes (rather than coloured dots) and so will never get 'blocky', whatever size you print them.

GIF Graphic Interchange Format. This sort of bitmap file is very good for simple line art, logos and icons. It is rubbish for photos.

JPEG Joint Photographic Experts Group files are bitmaps which are great for photos but very poor for logos or text.

EPS Encapsulated Postscript Files are vector files and used by printers, designers and other graphics professionals. Logos designed in Illustrator or Freehand (most are) will be originally in this format. From this file, you can make as many 'bitmap' versions at whatever size you choose. They are infinitely scalable.

BMP Bit Map Picture files are commonly used on Windows PCs. They are not suitable for transfer across the Internet, because they are poorly compressed.

Logo Format Definitions

2008-04-01T11:06:00.001+05:30

For Web or Presentation materials, please use a low resolution image.
These will be e-mailed to you in JPG format.

The JPG format is for Web or Presentation materials.

For Professional Print materials, please choose a high resolution image.
These will be e-mailed to you in EPS format.

4Color is for CMYK color scheme.
Black is for Black&White scheme.
PMS is for the Pantone color scheme.

Note: Unless you have the appropriate software, you will not be able to open high resolution images. This is because, these files are meant for printers and designers. If you have any questions, please contact RedChilliWorx.

Understanding Web Design

2008-03-26T17:35:00.001+05:30

We get better design when we understand our medium. Yet even at this late cultural hour, many people don’t understand web design. Among them can be found some of our most distinguished business and cultural leaders, including a few who possess a profound grasp of design—except as it relates to the web.
Some who don’t understand web design nevertheless have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.
If we want better sites, better work, and better-informed clients, the need to educate begins with us.
Preferring real estate to architecture
It’s hard to understand web design when you don’t understand the web. And it’s hard to understand the web when those who are paid to explain it either don’t get it themselves, or are obliged for commercial reasons to suppress some of what they know, emphasizing the Barnumesque over the brilliant.
The news media too often gets it wrong. Too much internet journalism follows the money; too little covers art and ideas. Driven by editors pressured by publishers worried about vanishing advertisers, even journalists who understand the web spend most of their time writing about deals and quoting dealmakers. Many do this even when the statement they’re quoting is patently self-serving and ludicrous—like Zuckerberg’s Law.
It’s not that Zuckerberg’s not news; and it’s not that business isn’t some journalists’ beat. But focusing on business to the exclusion of all else is like reporting on real estate deals while ignoring architecture.
And one tires of the news narrative’s one-dimensionalism. In 1994, the web was weird and wild, they told us. In ‘99 it was a kingmaker; in ‘01, a bust. In ‘02, news folk discovered blogs; in ‘04, perspiring guest bloggers on CNN explained how citizen journalists were reinventing news and democracy and would determine who won that year’s presidential election. I forget how that one turned out.
When absurd predictions die ridiculous deaths, nobody resigns from the newsroom, they just throw a new line into the water—like marketers replacing a slogan that tanked. After decades of news commoditization, what’s amazing is how many good reporters there still are, and how hard many try to lay accurate information before the public. Sometimes you can almost hear it beneath the roar of the grotesque and the exceptional.
The sustainable circle of self-regard
News media are not the only ones getting it wrong. Professional associations get it wrong every day, and commemorate their wrongness with an annual festival. Each year, advertising and design magazines and professional organizations hold contests for “new media design” judged by the winners of last year’s competitions. That they call it “new media design” tells them nothing and you and me everything.
Although there are exceptions, for the most part the creators of winning entries see the web as a vehicle for advertising and marketing campaigns in which the user passively experiences Flash and video content. For the active user, there is gaming—but what you and I think of as active web use is limited to clicking a “Digg this page” button.
The winning sites look fabulous as screen shots in glossy design annuals. When the winners become judges, they reward work like their own. Thus sites that behave like TV and look good between covers continue to be created, and a generation of clients and art directors thinks that stuff is the cream of web design.
Design critics get it wrong, too
People who are smart about print can be less bright about the web. Their critical faculties, honed to perfection during the Kerning Wars, smash to bits against the barricades of our profession.
The less sophisticated lament on our behalf that we are stuck with ugly fonts. They wonder aloud how we can enjoy working in a medium that offers us less than absolute control over every atom of the visual experience. What they are secretly asking is whether or not we are real designers. (They suspect that we are not.) But these are the juniors, the design students and future critics. Their opinions are chiefly of interest to their professors, and one prays they have good ones.
More sophisticated critics understand that the web is not print and that limitations are part of every design discipline. Yet even these eggheads will sometimes succumb to fallacious comparatives. (I’ve done it myself, although long ago and strictly for giggles.) Where are the masterpieces of web design, these critics cry. That Google Maps might be as representative of our age as the Mona Lisa was of Leonardo’s—and as brilliant, in its way—satisfies many of us as an answer, but might not satisfy the design critic in search of a direct parallel to, oh, I don’t know, let’s say Milton Glaser’s iconic Bob Dylan poster.
Typography, architecture, and web design
The trouble is, web design, although it employs elements of graphic design and illustration, does not map to them. If one must compare the web to other media, typography would be a better choice. For a web design, like a typeface, is an environment for someone else’s expression. Stick around and I’ll tell you which site design is like Helvetica.
Architecture (the kind that uses steel and glass and stone) is also an apt comparison—or at least, more apt than poster design. The architect creates planes and grids that facilitate the dynamic behavior of people. Having designed, the architect relinquishes control. Over time, the people who use the building bring out and add to the meaning of the architect’s design.
Of course, all comparisons are gnarly by nature. What is the “London Calling” of television? Who is the Jane Austen of automotive design? Madame Butterfly is not less beautiful for having no car chase sequence, peanut butter no less tasty because it cannot dance.
So what is web design?
Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?
Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
Let’s repeat that, with emphasis:
Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
She walks in beauty
Great web designs are like great typefaces: some, like Rosewood, impose a personality on whatever content is applied to them. Others, like Helvetica, fade into the background (or try to), magically supporting whatever tone the content provides. (We can argue tomorrow whether Helvetica is really as neutral as water.)
Which web design is like that? For one, Douglas Bowman’s white “Minima” layout for Blogger, used by literally millions of writers—and it feels like it was designed for each of them individually. That is great design.
Great web designs are like great buildings. All office buildings, however distinctive, have lobbies and bathrooms and staircases. Websites, too, share commonalities.
Although a great site design is completely individual, it is also a great deal like other site designs that perform similar functions. The same is true of great magazine and newspaper layouts, which differ from banal magazine and newspaper layouts in a hundred subtle details. Few celebrate great magazine layouts, yet millions consciously or unconsciously appreciate them, and nobody laments that they are not posters.
The inexperienced or insufficiently thoughtful designer complains that too many websites use grids, too many sites use columns, too many sites are “boxy.” Efforts to avoid boxiness have been around since 1995; while occasionally successful, they have most often produced aesthetically wretched and needlessly unusable designs.
The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging.
If she achieves all that and sweats the details, her work will be beautiful. If not everyone appreciates this beauty—if not everyone understands web design—then let us not cry for web design, but for those who cannot see

Findability, Orphan of the Web Design Industry

2008-03-26T17:04:00.001+05:30

Findability is to Search Engine Optimization (SEO) as “web standards” is to “table layouts.” In a web whose vastness exceeds comprehension, sites with findable content win. The good news is that everyone on your team can help make your site findable. Get a taste for this essential discipline from Aarron Walter, author of Building Findable.

Websites: Web Standards, SEO, and Beyond.

Silverlight XAML

2008-03-26T15:00:00.001+05:30

Overview
Extensible Application Markup Language (XAML) is an XML based declarative language that is used in the Windows Presentation Foundation (WPF) and Silverlight to define the user interface and animations. Silverlight implements a subset of features that are available in the .NET Framework 3.0. Thus, certain features used with WPF, such as markup extensions using the curly braces ({ and }), are not available in Silverlight.
The goal of this document is to highlight the main differences from other XML formats you may be familiar with and the syntax you will need to understand to read and create XAML files.
Syntax
Namespaces
The following table lists the namespaces used by Silverlight XAML.
Namespace
Description
http://schemas.microsoft.com/winfx/2006/xaml
The general XAML namespace, usually prefixed with "x".
http://schemas.microsoft.com/client/2007
The Silverlight specific namespace. Note that this is different from WPF even though they share some of the same elements.
Silverlight 1.0 requires that the root node of the document be a

Property Element Syntax
Standard XML lets you set values of elements using attributes or by using the content of an element. Property element syntax is a way to let you specify complex values for object properties. For example, setting a gradient with multiple color stops as a plain string would require specialized formatting that would not easily map to the underlying gradient object. It would also be extremely difficult to extend this format in the future while maintaining backwards compatibility. Property element syntax gives us an easy way to read values and an extensible mechanism that also maps to the actual objects used when manipulating the object in code.
The basic syntax is demonstrated below.

...

...

Thus our gradient example would look similar to the following. Note the use of property element syntax for both Rectangle.Fill and LinearGradientBrush.GradientStops. Rectangle.Fill contains a LinearGradientBrush object and its GradientStops property contains a collection of GradientStop objects.

While the resulting code required tends to be verbose, it is much more readable for humans than attempting to shrink all of the information above into a simple string. It also leaves the content of the element free to hold the actual visual children that it may contain.
Attached Properties
Attached properties are a way to specify properties on any element, even if element does not natively have that property. Most often you'll see this used to set properties that are related to the parent of the element.

...

...

For example, setting Top and Left properties are actually dependent on the container in which the element is placed. In the following example, Top and Left are a feature of the parent

Silverlight : Overview

2008-03-26T14:38:00.001+05:30

Overview
Silverlight is a cross-browser, cross-platform browser plug-in to create Rich Internet Applications with support for vector and bitmap graphics, animation, and media playback. Silverlight applications consist of two main parts, the UI declaration using XAML and the program code. Silverlight is a subset of the Windows Presentation Foundation available in the .NET Framework 3.0.
Programming Prerequisites
Silverlight 1.0
Working knowledge of JavaScript
XML basics
Silverlight 2.0
Working knowledge of .NET and a managed language of choice
XML basics
Supported Client Platforms
Windows 2003/XP/Vista
Internet Explorer 6/7
Firefox 1.5/2
Windows 2000. Silverlight 2.0 only.
Internet Explorer 6
Firefox 1.5/2
Macintosh OS X 10.4.8+. Note! Silverlight 2.0 only runs on Intel processors.
Firefox 1.5/2
Safari
Linux, Project Moonlight (announced)
Firefox
Konqueror, WebKit, Opera (planned)
Mobile support has also been announced, but currently Microsoft hasn't released any specifics.
Supported Server Platforms
Supported web servers must be able to deliver .html, .js, .xaml, .zip and .dll (Silverlight 2.0) files along with any desired media assets. This includes Apache, Microsoft IIS, and other web servers.
Silverlight 1.0 and Silverlight 2.0
Silverlight 1.0 and the next release, currently numbered 2.0, share similarities in terms of using XAML as the declarative markup language, but differ vastly in their programming model.
Silverlight 1.0
Uses the browser's JavaScript engine for all code execution.
Is essentially a rendering and media playback engine.
Silverlight 2.0
Programmed using managed code running on the .NET managed Common Language Runtime (CLR).
Many languages to choose from: Ruby, Python, C#, Visual Basic, JavaScript, and more.
Client application level performance.
Expanded feature set.
Design & Development Tools
The minimum requirement to develop Silverlight 1.0 applications is a text editor. Silverlight 2.0 runs managed code which must first be compiled. Free .NET compilers are available in the .NET Framework SDK. However, there are many tools for both designers and developers available on the Windows platform.
Microsoft Silverlight 1.0 SDK
Microsoft Expression Suite
Microsoft Visual Studio
XamlPad, which is part of the .NET 3.0 Framework SDK, and similar tools
Adobe Illustrator to XAML export plug-in. This plug-in can create XAML for both the Windows Presentation Foundation and Silverlight.
Silverlight 1.0 and Case-Sensitivity
Please note that while XAML is case-sensitive, JavaScript used to script Silverlight 1.0 is not. This means you will have to make the decision whether to use JavaScript style camel-casing on method and property names (object.theMethod) or .NET style Pascal-casing (object.TheMethod). If you intend to port your Silverlight 1.0 application to 2.0, you may wish to use Pascal-casing to remove one extra step.
Our samples use Pascal-casing as this is the format used in the Silverlight SDK documentation method signatures (but not examples!) and this is what you'll see in Silverlight 2.0.
Further reading
Related information on the web is listed below.
Silverlight on Microsoft.com
Microsoft Expression Suite
Silverlight Reference on the Microsoft Developer Network
Moonlight, the Silverlight implementation for Linux
How to create Silverlight 2.0 Applications with Notepad
Sessions from MIX07

How to structure large CSS files

2008-03-25T18:26:00.003+05:30

Many methods exist to structure your CSS. This article tries to describe the method I use. I call it the “Tree method”, since it structures the CSS like… that’s right, a tree structure. I want to stress that it isn’t my invention; I just describe and give reasons for its rules.

Everyone that has built a bigger site has had to deal with the mess CSS so easily become. There are ids and classes all over the place, and to find where a certain class is defined you usually need to use some search feature in your editor. Matching the other way, from the CSS to the HTML is even harder; you don’t even know what file a certain class is defined in. It’s a mess.

The Tree method tries to structure the CSS into logical blocks; blocks taken from the HTML. It also aims to be easy to understand for anyone. No secret codes or difficult ordering schemes.

Order your selectors like the HTML
Always use the “full path” to elements
Indent your code cleverly
Each declaration on its own line
… in alphabetic order
Order your selectors like the HTML
One of the problems of mapping between the HTML and the CSS is that they usually differ in structure. The HTML is (if you’re lucky) structured like a convenient semantical tree while the CSS often is ordered by something random like fonts, colors, and positioning.

To make moving between the two worlds easier we want to make them as similar as possible. Is the HTML divided into header, content, and footer? Then make sure that’s the three major parts of your CSS as well. Have you put the navigation above your header in the HTML? Then order it like that in the CSS as well! Any other structure makes moving from the HTML to the CSS much harder. You might be able to find all font manipulations in one part of the CSS, but only if you know that this particular developer uses that exact scheme. No, let’s keep it simple.

Here’s a simple example where we just order the selectors:

#header { ... }
h1 { ... }
h2 { ... }
#content { ... }
p { ... }
em { ... }
strong { ... }When grouping several styles into one definition I just put the group above both of their specific styles. #header, #content comes before both #header and #content.

Always use the “full path” to elements
The above is very easy to get an overview of, but the experienced developer knows that very few sites are that easy. Something you often want is a way to define different styles to different parts of a page. Let’s say you want green links in the navigation, but want to keep them blue everywhere else.

For this we use sub selectors. The selector #navigation a lets you give all links inside your navigation another look. But let’s take that further. Why not always write the full path to your elements? Why not use #navigation ul li a instead? Doing this gives a developer looking at your code a lot of information about how the HTML and CSS belongs together.

Lets add that to the previous example:

#header { ... }
#header h1 { ... }
#header h2 { ... }
#content { ... }
#content p { ... }
#content p em { ... }
#content p strong { ... }This does change the meaning from before. Before we selected all the level two headers; now we only select headers inside of the header division. Extending each selector with a “path” has made our CSS rules more specific, and specific means more control for you.

This also makes for fewer new ids and classes; just specify the path to an element instead of adding a class for it. Don’t add a new class or id unless you really need to.

We still have the issue of “common styles”; styles that we want to apply to elements in different parts of the tree. Since they should be applied to all elements they don’t fit in the tree structure we’ve built. Instead we make a section in the beginning of the file (or a separate) with just “general styles”. Don’t add rules to this section if you only use them once in the document, you want as much of your code to be in “the tree” as possible.

Indent your code cleverly
To make the code even easier to understand I always add indentation (for those that don’t know that word: it means spacing in front of blocks of text). Indenting makes the tree structure we’re trying to build even clearer, you can easily find the major sections and dig down from there.

Lets add indention to you our example too:

#header { ... }
#header h1 { ... }
#header h2 { ... }
#content { ... }
#content p { ... }
#content p em { ... }
#content p strong { ... }Don’t take indentation too far. If you’re styling tables and using thead in the markup, but don’t change the style of it, you can skip that indentation level. Double indention just for the sake of it is just a waste of space.

Special case: Templating
We also need to deal with rules that only appear on some of our pages. Perhaps we want the home page to look somewhat different than the sub pages? We solve this by giving an id or class to the body element. Doing this lets me specify styles for just one specific page, and setting the id or class on body makes me able to change anything in the document based on that.

These page specific styles need a place in the tree too. Here I tend to break from the above scheme and put them together with the style they change. So body#page_home #header h1 is one step below #header h1 in the tree. That makes it easier to see all styles for a certain element, instead of scrolling back and fourth (like you need to do if you don’t remember your general styles). Keep your templates together with the style they change instead of completely separate.

If you want bigger changes, perhaps a totally different look on some pages, there’s no reason to group things according to the scheme above. Move them to a separate file instead.

Each declaration on its own line
Indentation combined with full paths makes some lines rather long. This means that putting all declarations on one line will force you to scroll horizontally, something we already avoid on our sites. The simplest way to prevent horizontal scrolling is to use one declaration per line, so that’s what the tree method uses.

… in alphabetic order
Grouping of properties is another issue. I’ve seen grouping schemes based on all sorts of things; from splitting things into “positioning”, colors, and fonts, to people adding their properties completely randomly. I’ve chosen to just order them alphabetically. It’s one of the few methods that bring some order while still being simple enough. I’ve seen total beginners do this by themselves; something I believe is a good argument for it. It’s intuitive.

A simple example to illustrate:

#content {
color: Blue;
font: 3.4em Arial, sans-serif;
margin: 0.5em;
}One complaint I’ve heard on this method is that it splits up things that belong together. People tend to keep position: absolute and left: 0 together, just to name one such pairing. It annoyed me at first too, but declaration blocks rarely contain more than 10 declarations, and the alphabetic order still makes them easy to find. Also, why handle position different than float and margin?

That’s it! By following a few simple rules you can get a CSS-file that’s easier to overview, a file that you proudly can give away to the next developer. I can praise its existence all day, but you’re the judge of whether it works or not. Why not give it a try in your next project?

Cross browser CSS for your site

2008-03-25T18:12:00.001+05:30

This article will go through some useful cross-browser CSS techniques I use to get my sites to look the same in several modern browsers. It’s fairly easy to send out different versions of your site to different browsers. This should be avoided though since it will end up with you having to maintain the site as if it was in fact several. That defeats the whole purpose with standards, why are they even needed if you are adapting to the browsers instead? My opinion is that good cross-browser coding is to find the set of standards that are supported and then use them.
Validate your site
Validation is a much debated area and many Level 2 bosses doubt that this procedure really helps. It does help though. It ensures that you didn’t do any simple spelling errors, things that could be incredibly hard to find manually. A validator also checks for nesting errors (did you put a

inside of an anchor?) and other strange things like your character encoding. Information about each of the errors is available as links when they appear, just click on one and you’re on your way to learn something new.
Validation is the simplest of my tricks to check. There are validators available for both (X)HTML and CSS. Use them! Any errors that show up on those lists could be a potential cross-browser breaker so if you decide to ignore any of them you should be really sure about what you are doing. There are reasons why each one of all of the errors on the validation page show up, so validate, fix, validate, fix, validate.
Stay in standards mode
The next trick is not as obvious. Modern browsers have two rendering modes they use to display websites with: Standards mode and Quirks mode. Standards mode is a rendering mode that is made to work according to the W3C specifications as closely as possible and Quirks mode is a bug ridden mode made for older sites. Why have a mode with bugs you ask? It’s a way for browser makers to keep their users happy. When you do big changes to your rendering engine a lot of old sites relying on browser bugs will break. Some might think that this is a good thing, why should sites still work when they are poorly coded? If you think like that you have forgot about who the web is for. It’s not a place for experts only, it’s made for regular users, that is, anyone with a browser. Those people need to see a working site if that’s possible.
So a new browser is released with a more standards compliant rendering mode and pages start to break. This is a bad thing for users so browser makers decided to first identify pages that tried to follow the standards, and if they did, switch to the new and improved rendering mode. You will probably see why I recommend standards mode now. All browsers are trying to render things as similar to the specs as possible when in standards mode, while in quirks mode they keep all their old bugs just to help regular users.
So how do the browsers identify who’s trying to follow standards and who’s not? They use the doctype. If you’re not familiar with doctypes, don’t worry, they are easy to learn. A doctype is a tag on first line of your site file telling the browser what markup language you will be using. There are basically two doctypes you should select among:
HTML 4.01 Strict (what I recommend):

XHTML 1.0 Strict (without on the line before)

Using any of these make sure the browser switches to standards mode and your design not fail because of that. Using a strict doctype means that you will do your best to separate structure from design and the validator will give you errors in those areas. It’s very useful. (Worth a small note is that the XHTML Transitional doctype also triggers standards mode, but while using transitional you don’t get as many good validation checks so don’t use that one anyways.)
There is one last catch one needs to talk about when dealing with doctypes and standards mode - the doctype needs to be the first tag in the document. If you put any HTML comments or strange characters before it IE will go crazy and switch to quirks mode. This has cause many developers countless hours of trying to fix things. Just don’t do it!
Remove default styling of elements
Another cause of many web developers screaming in the night is the default CSS that is applied to elements. If you don’t use any CSS at all on your page elements will still have a certain look. Headers will be larger than text paragraphs and blockquotes will have padding. Sizes of text is something that is pretty similar across browsers but something that’s not is padding and margins. Let me give you an example: With no styling an "ul" gets a padding in Firefox but a margin in IE. Solution? Set either the margin or padding to zero and set the other one to the indentation you want. You need to somehow remove the default browset styles.
These kinds of problems take up a lot of development time if not handled nicely. “Do definition lists in Opera have padding or margin?”. “What about second level headers in IE 6?”. Two schools of thought have evolved to handling this. The first one tells you to start by resetting all margins to their defaults at the top of you CSS file. This can easily be done by typing in * { margin: 0; padding: 0; }, * being a universal selector that applies the same rules to all elements.
Problem solved right? That’s where the second school of thought comes in. They argue that too many default margins are reset. Why should we mess with users form fields, rendering them hard to use unless they are set to good values again? Instead you could just reset those elements that have differences, and leave the rest untouched. This is quite a lot of work to get right so Faruk Ateş built a “starting css” template that you can easily include in your head. Personally I prefer the *-method, but try both and decide for yourself.
Browser bugs
This is the area where CSS gets hard. Even though browser makers work their asses off to follow standards they sometimes don’t reach their goals. This leaves us webmasters with bugs that when fixed triggers new bugs, either in the same or another browser. It can easily get real dirty.
One of the worst browsers (that is widely in use) is Microsoft’s Internet Explorer, version 6. Some claim they have about 80% of the browser market so it’s not a browser you can just ignore. IE was a good browser when it was first released but by today’s standards it’s certainly not. No other browser caused me more pain while building the design of this page. Its shortcomings get painfully clear when it comes to rendering complex CSS layouts.
How do you handle these bugs then? The easiest (and fastest) way is not solving it yourself but reading up on someone else’s solution. “Holly ‘n John” have gathered the most frequent bugs on their page Explorer Exposed!. They give you examples of how to detect the bug, how it works and why (sometimes) and most importantly how to solve it. Sometimes the solution is just setting position: relative; or display: inline; on some element and sometimes you have to resort to strange code. The point here is that if your bug is on that page; don’t waste time trying to figure it out yourself. Learn that list by heart.
So what do you do if your bug isn’t on the list? You start by googling for a solution of course. Googling takes a few minutes compared to the hour you probably need to hunt it down. Don’t underestimate this step.
If you don’t find it somewhere you need to hunt it down yourself. Do this by making a copy of your page and then removing as much code as you can while keeping the bug. Then find out exactly what line (or lines) of code that causes it and finally try to find another way of doing what triggers it. This is much better than just throwing in hacks, you keep your code maintainable and you learn a lot more useful stuff than if you were throwing in nonsense code from the beginning.
If you for some reason do not manage to solve the bug with the above technique you either rethink what you are doing (not likely) or you go get your arsenal of hacks. Make sure the hacks are valid code. The one I use for IE when nothing else works is the “* html” hack. You use it but writing like this: * html #element { code; }. That selector selects all tags that have the child html that have the child #element. But “html” is the topmost element in the hierarchy so nothing is selected, unless IE can choose of course. The code gets applied in IE only. Note that it is perfectly valid CSS, it just doesn’t select anything. Remember: hacks are your last resort when nothing else works.

I hope you found something useful in this article that you can use when you get cross-browser CSS problems. I have now told you what steps I use, did I miss something? Do you do something differently?

Microsite Means

2008-03-24T14:41:00.000+05:30

A microsite, also known as a minisite or weblet, is an Internet web design term referring to an individual web page or cluster of pages which are meant to function as an auxiliary supplement to a primary website. The microsite's main landing page most likely has its own URL.
They are typically used to add a specialized group of information either editorial or commercial. Such sites may be linked in to a main site or not or taken completely off a site's server when the site is used for a temporary purpose. The main distinction of a microsite versus its parent site is its purpose and specific cohesiveness as compared to the microsite's broader overall parent website.
Microsites used for editorial purposes may be a page or group of pages that, for example, might contain information about a holiday, an event or similar item which gives more detailed information than a site's general content area may provide. A community organization may have its main site with all of the organization's basic information, but creates a separate, temporary microsite to inform about a particular activity, event or similar.
Often, microsites will be used for editorial purposes by a commercial business to add editorial value. For example, a retailer of party goods may create a microsite with editorial content about the history of Halloween or some other holiday or event. The commercial purpose of such editorial microsites, (beyond driving product sales), may include adding value to the site's visitors for branding purposes as well as providing editorial content and keywords allowing for greater chances of search engine inclusion.
Microsites may be used for purely commercial purposes to create in-depth information about a particular product or service or as editorial support towards a specific product, such as describing a new technology. A car manufacturer, for example, may present a new hybrid vehicle and support the sales presentation with a microsite specific to explaining hybrid technology.
With the prevalence of keyword contextual advertising, (more commonly referred to as Pay per click or PPC), microsites may be created specifically to carry such contextual advertising. Or along a similar tactic, they're created in order to specifically carry topic-specific keyword-rich content with the goal of having search engines rank them highly when search engine users seek such content topics.
See also minisite.