B://B: Box Model

My previous post went off the trail a bit from my original intent for my new series of web development: back to basics. This week we are back with what I hope will be the ‘ah-ha’ moment for some people out there and just a nice refresher for the others. When talking about the box-model in css-based layouts, what we are referring to is that all elements on a web page are a rectangle box of some kind. What this means is that there is a behavior to how the browser calculates the width and height of these elements of themselves and the relationship of one element to another.

Death of a Cut-Up Man

The modern day cut-up man/woman/shop is dead when it comes to a dynamic system. It’s sad because no obituary was written nor news alert on AP/CNN posted, but it’s true. The theory, that a company or individual needs to ‘cut-up’ the design composition into a semi-working website before full development of the backend system is highly unnecessary and inefficient. In a time where budgets are even tighter than they have been in years past and a need for continual push around efficiency in development, eliminating the process of cut-ups before development needs to die quickly.

B://B: What the Sprite was That?

Primer:

I thought that I would start a series of fairly straight forward posts that refer to the basics that are so often overlooked in web development and more specifically the realm of front end development. Utilizing sprites should be one of those techniques that it’s a no brainer and have no second thoughts/reasons on why not to use them. In case you did forget, the sprite is in reference to early video game developers who used a large image to contain multiple states of an entity while preserving precious space on the game media at the time.

Vendor specific extensions: The Good, the Bad and the Ugly

CSS3 is great fun! It can speed up our work process with simple syntax for creating awesome drop/text shadows, gradients, rounded corners, animations etc. It’s a virtual wonderland for any web developer/designer for easily whip up visual elements that would normally take at least a few sprites, several hours of writing code and countless Advil when trying to get it all to work cross-browser.

Progressive Enhancement or The Lowest Common Denominator?

There are more flavors of browsers out there than coffee choices at your local Starbucks. I may not be 100% correct on that statement, but toss in browsers resolutions and the different operating systems that people are viewing on and the numbers are quite close.

"Can I get a firefox 3.5 on OSX with my 1440 x 900 resolution to go?"

"My IE6 on windows xp is how much? 1024x768?"

"Do you have any fresh chromes? My Ubuntu loves them!"

Don’t get me started on odd browsers like NutScrape, Orca, Salamander, Skipstone, SkyKruzer, Kazehakase, Madfox, Arachne, Charon, Chimera, Dillo, Oregano, and Viola, just to name a few.