If you asked me about a year ago what my favorite blogs were, I would give you the same answers that most of you would give. Lately, and by that I mean about 6 months or so, maybe a little longer, I’ve been feeling like none of them are writing about anything that I need anymore. I’m not going to mention any names because I respect what they gave me. What do I mean by ‘need’ though? That feeling of “Holy CRAP that is awesome.” I don’t know if the caliber of writing has gone down on those blogs, or if I’ve just grown beyond what they are doing. Only one major blog has kept up with where I am at and what I want to see, and that is net.tutsplus.com. Everyone else seems to be posting the same fluff pieces about things plumbers can teach us. I want tutorials about some bad-ass CSS3 techniques that no one has thought of. Or the video tutorial series I’m watching on net.tuts about starting Ruby.

I started to actually wonder if this is typical? Do other web developers go through this stage? I get a lot of respect at work from certain colleagues because they know the amount of outside work I put into learning stuff. There are times though where I want to show people something that either they don’t care about or aren’t ready for. Sass has been one of them. I can’t convince anyone to try it out, either because they are learning their own things or they don’t see the point.

I want to do more!

I think I am at an in between moment in my career. One where I know how to do more that what my job lets me do yet I still love what I do and where I am at. To make this more clear though, I’m working on our corporate redesign, and for once I am given the straight psd files and told to build. That happens all the time on custom built websites and templates, but NOT on corporate. I don’t know if my manager trusts what I can do more or what, but this time he didn’t start the build at all. Pure heaven for me. One, because I am very particular (like most of us are) on how I build things, and two it is hard to build on top of what someone else has down when their style is very different. That is the back story and it sounds great right? Yes…and no.

I was about an hour into what I was doing today on this build when I realized a feeling that kept creeping up on me. Writing plain CSS/3 was tedious. I’m talking irritating the crap out of me. How can that be when I actually love it so much? Because I f’ing love Sass. I could have written the same styles with about half the amount of Sass, and about a third faster. You know that saying ignorance is bliss? I felt almost like I was in the Matrix. I almost laughed at myself, too. For just the time I was working on this build I thought “Please just let me not know what I know.” If that happened, everything would have been 100% awesome. I was building a nice design from the ground up…my way. But typing out CSS like the commoner was like watching a mile long turtle race. I kept thinking to myself “Dammit, if I could write a mixin for this or just have a few variables…I’ll settle for four of them…this would be so much better!”

Now you know what my problem is. I’m not a pro at Sass or jQuery or anything else I have learned in the past year, but I am far enough ahead that doing things the same old way is starting to bother me. Which brings me back to my question. Is this a normal thing in a web developer’s career? Have you gone through it? Because it really is a growing pain. I feel that there is so much more I could do to make things better or easier, but can’t for several reasons. One of which is, no one else is really ready for the type of things I would bring to the table.

I’m not tooting my own horn

Don’t think I am bragging either. Trust me when I say there are times where I feel like a COMPLETE idiot. I hate reading articles thinking there must be thousands of developers sooooo beyond me. If it were not for a couple of guys I work with giving me the verbal pat on the back once in a while, I would almost be depressed with my knowledge. Of course this is the same feeling that keeps me inspired to learn.

I am also sad that the same blogs I loved a year ago are being almost ignored. I am reading more articles written by unknown bloggers lately. I miss going to the top popular blogs and going “Crap that is awesome. Hey guys did you read that?” I get that still, but not from those same blogs, which means not a lot of people are reading the same things I am. I keep watch just in case, but it is rare when I get that same awesome feeling from them. I look forward to getting out of this middle stage and into the next, but part of me looks back to about a year (maybe a year and a half) ago as a golden age that has passed. I guess I just have to look ahead and make a new one.

I’m rebuilding my website, and I am learning multiple things at the same time while doing so. I’m using the HTML5 Boilerplate, HTML5 tags, the 960 Grid System (24-column), and will be using Sass. This isn’t a real post, just an update on why there won’t be one tonight. Tomorrow I will write a review on the 960 Grid System now that I have the hang of it. Does anyone know if the HTML5 Boilerplate has a Sass option? Meaning it has the CSS written in SCSS? Would be awesome, because I do not look forward to rewriting that. Anyway, I’ll have a real post for you tomorrow.

Ok, I apologize for yesterday’s article title. That was all about me. What about YOU though? Are you thinking of redesigning your website? Let’s take a look at what you should be thinking about, where to start, and being serious about what you are about to do.

Don’t just jump in!

Your first impulse when you are about to update your site is to just dive head first into the project without a second thought. Maybe you saw a cool photo that you want to use, or were inspired by 50 sites that were in some other blog’s list article (like me!). Or maybe you had no thoughts, but just decided it was time to do something about your site. I can tell you from experience that just noodling around in Photoshop will bring only a bunch of crap. I’ve tried that approach, and it doesn’t work. Expecting something awesome to come about from just playing around isn’t going to happen. What should you do? Absolutely NOTHING at first concerning the actual design. Get a notebook, or open Evernote, or even Paprika (love that little app), and start making lists.

First things first, go to your current site and look at it. Don’t just be all “Ya it *#Y@ing sucks.” I mean really look at it. Try to remember why you did the things you did. Write a list of what isn’t working, and another of what is. Be honest, because you will only hurt your future brilliant piece of interweb awesomeness. Is the navigation a well organized one? Do you have random things you put in just to show that you can do it? A careful study of what you did, will help you avoid what you shouldn’t do again. I found tons of things on mine, and it was a bit depressing that some items were so ill thought out.

One really important thing to do is write down all the things that are not doing anything for the site itself. Did you put a graphic or photo in just because it was cool? Think of all the crap that doesn’t add to the overall message of the site. Bits of flash, plugins and other bits that serve only to clutter need to go and not reappear in your new design.

What technology should YOU be looking at?

Well, that is a tough one, because I don’t know what your skill set is. One thing is for sure, you better start looking into incorporating HTML5. I know I have mentioned the Boilerplate a ton, but it is a great starting point. Its even better because you can ditch what you don’t need. We’ve all read about HTML5, so if you haven’t used it yet, start now. It will only help you in the long run.

Flash – I would say no, unless you are awesome at it. For one, if you are using it just to say you did, its the wrong option. After using it constantly at work, I can honestly say there is less and less call for using it. If you are not brilliant at it either, you just end up looking like a tool. I know I’m being harsh there, but its true. I only know one guy who is good at animating things in Flash, and he is the only one I would recommend using it. This isn’t to trash the program, its to make you think about what you should be using. Unless your design really calls for it, don’t.

Javascript – Yes. If you know a library well enough to do the simple but effective effects, then this is the way to go. Lighter, no downloading players, and more effective. It is a time saver even on the things people don’t see it doing.

LESS.js or Sass – For me, yes. I’m going to use the hell out of Sass. For you? I have no idea what your comfort level with this type of thing is, or your ability in regular CSS. If you are not a pro at CSS, then stay away. Learning CSS better is more important. You will just confuse yourself if you try to abstract something you are not great at.

There are tons of things to look at. Should you use PHP? WordPress? A CSS Framework? There are tons of options out there, that is your decision, but one you should think of carefully. Your redesign should be tight and clean, but easily adaptable. Again, write out the lists of pros and cons for each thing you think you might want to use.

Inspiration

I’m all for looking through list articles for something like a redesign. Not to steal anything or to copy what others are doing, but sometimes an idea will jump out at you. Look at a ton of sites you like, and think about the reasons YOU like them. You will find that while you like a certain site, what they did will not work for what you are trying to accomplish. Write down ideas of what you would like to incorporate, and then cull it down after a reread, and then do it again. Do the things you have written push you towards your goal and message you are trying to convey? If not, ditch it.

WHAT are you trying to acheive?

What is your main goal of the site? Too many times I have tried to do more than I should have. Making a crazy artsy site that is cool to look at, might not work for a goal of trying to get clients to choose you for their project. Do you want to come across more edgy or business like? Really think about what your site is going to be doing, and you will have an easier time of designing for that. If you don’t, you will just be disappointed later, with what you did. You can design and develop an awesome looking buisness site without sacrificing creativity.

So what should you take away from this?

Take the redesign seriously. Pretend you are designing it for a client, but one that has your goals. Do a lot of research, think about it, write lists, re-write lists, and only start when you have a clear idea. If you half-ass it, your new site will look it. Your site is the one place where you can really shine because you don’t have other people’s restrictions…but you do have to pay attention to your own.

Coupon Code: webmachine

$('.target').change(function() {
alert('Are you sure you want to choose that?');
});

I’ve finally created my business cards. For real this time, not some home created garbage that I never liked anyway. What did I learn about myself through designing them? I freakin’ love the combination of orange and gray. This isn’t some new thing either, I thought long about this after I created the cards (which you can see below). I’ve always liked these two colors together. I used to shoot archery with my mom and step-dad a lot when I was young, and I remember loving this arrow set that had gray shafts with orange and white fletchings. It was that memory that made me look at some of my past designs. I never really noticed before, but apparently I reeeeeeeeally love gray and orange. Now I have these new cards, and my website doesn’t fit together with them…guess what that means?

The current one is probably about a year and a half old now, maybe a little more, and I want it to match my new business cards. I had to do some critiquing though of what I have now, and why I think it actually needs it. First thing, gray and orange stay. That was a given. I had to go deeper though. What did I want to do, what do I like about my current site, and what don’t I like. I also needed a starting point for the new design, and I found it. Do you ever get inspired from a list site that shows like 20+ other sites that are pure awesome? I did (which is funny because usually I hate list articles) and that is where the borrowed comes from, which you will see.

Here is the site I borrowed an idea from. You’ll notice the iceberg cut out below the navigation. I really liked this idea, so I incorporated something like that in my new design. Do I feel like I am being unoriginal? No, and you shouldn’t either if you are inspired by something you see. I like the idea, I am not stealing the website. I don’t really like the rest of the site, but that one part really drew my eye. Now you can take a look at what I have done. You’ll see with the cog cutout, my shout-out to the iceberg.

What I like about my current site

Critiquing your own site is way harder than I thought, so I’ll start with what I like:

• Main navigation – I really like the small descriptions under the main link name
• The grundgy faded graphic under my logo – adds something interesting
• Bottom left orange/purple graphic on home page – that is a collage of like 3 photos and I like how that turned out
• Look of the bottom footer area on the interior pages

I thought there would be more, but when you are really being serious with yourself, you realize there is a lot more you dislike. I’m not sure if that is me being over critical of my own work, or if I have just learned a TON in the past two years, that it makes a lot of it seem out dated. On to what I dislike:

• My logo – I liked it about 5 years ago…that is how long I’ve had it. I updated it here at The Web Machine, and changed it on the business cards by moving the ‘DESIGNS’ word. More modern now, and I love it.
• The flash text – Hate it. Not because it is Flash, but because it is cheesy. That will be gone – no need for it. That was more to say “Hey, I know Flash!” I don’t need to say that anymore.
• Portfolio slider – that is just a plugin I found at the time, and there are much better, like the Nivo Slider, or one I’ll create.
• Contact Page – just plain f#@(ing ugly
• Orange bar on the right side of the site – at the time I thought it would bring the orange color into the rest of the site. Now I just see a thick bar that cuts into content area. That will be a sidebar area now.
• Main Navigation – Yes I mentioned it in what I like, but what I hate is that it is image based, instead of text like I have at The Web Machine here. NO MORE IMAGE BASED NAV’S!! Plus – no damn link to my blog in the main nav – wth is that all about?
• Secondary Nav – What the hell was I thinking putting that at the bottom…AND just above the footer nav?? PURE STUPID – if I need more nav items they will go in the sidebar.

What technology should I use?

This one is actually tough. Here is a list of things I have been considering:

• HTML5 Boilerplate – Pure awesome starting point
• Sass 3 (SCSS) – Great CSS organization with variables, mixins and nested styles
• HAML – So I’ve been researching HAML, and I get the syntax. Makes HTML creation a breeze
• PHP – no brainer here, want to learn more, and when I do, I can add in things later
• CSS PIE – CSS3 for IE
• jQuery – Another no brainer. Will do a lot of the effects work
• WordPress – Need I say more?
• Minifier – This is really a must. Compresses CSS and Javascript files into one.
• 960 Grid System

What didn’t make the cut

HAML. I am going to research it more, but really if I use it, it will just be to say I did. No point in making this complicated. Not that it is, but I’ll have enough to worry about. Second? WordPress will not be used. Why you ask? Good question. I love WP, but what would be the point here? I edit my own stuff, I don’t need it for that. I already have a blog…so I can’t think of any reason to actually slow development down a little to use this for my main site. If this was for someone else, then it is not even a decision for me. For this redesign, it serves no purpose. Everything else stays.

I have to say I am really excited about making a complete site using Sass. I found that I really like what it can do, and I much prefer it over LESS.js. Yes I’ll have to compile every time, but I’m willing to sac the convenience for the experience and quickness of writing it. This means no quick changes during my lunch break, but I can live with that. When I am finished, I will post my Sass code in full here so you can get a real grasp of what it looks like and what it can do.

Redesigning your site – when do you say enough is enough

Redesigning your site is very tough. Why? Because its your baby. You want the best possible for your own work, and sometimes that is not actually achievable because of how hard we judge ourselves. With me sometimes things just click, and although its a rough idea at moment (like I’m not sure what I’m going to do with the navigation), I’m happy with where I am going.

I found that my gut reaction was to tear it apart and leave it for dead. Meaning, I didn’t want to see anything I liked. What I really wanted though was to look and see if I did anything I really felt was good. There is, but I have learned so much since this version, its hard to look at anymore. Forcing yourself to really look at what you did is an eye opener. I have a more clear view of what I want, and there will be more attention to what I am doing and why I am doing it.

I’m sure in another year I’ll redo it again. I like it to continually evolve to show where I am at in my career and skills. I’ll post more images as I go along, so you can see it progress. Below are the past versions of my website. A couple of these I had to use that web archive site to find, because I don’t have the files anymore.

1. June 2003 – Wasn’t first version but as far back as they had, and the images are not available but you can see even then – orange and gray
2. December 2003 – Damn that is bad
3. August 2007
4. February 2009 and Current
5. See above for the new look

Those are not all, but all that I can find. There are probably about 2 other versions that I cannot locate and the archive site didn’t have. Boy did the first two suck!

Coupon Code: webmachine

Next up, some links. I don’t know why all of a sudden these are popping up now, but apparently people think that code snippet sites are the “bomb.” Why not use Evernote? Do you really have time to go to a site and just browse through snippets that people have come up with? I sure don’t. But if you are indeed one who does, here are two new ones: smipplr, and codesnipp.it. If you would be so kind and let me know if you find sites like these helpful, or if you use them? A small comment review on one would be helpful. I struggle to wrap my mind around the usefulness of these things. Its like they are trying to come up with a social network site for us devs/designers, but this is all they could come up with.

Now you are probably wondering what the hell I mean by the “lets exclude people” in the post title, eh? Well I came across yet ANOTHER site that is invitation only. Here is a link, if you are interested. This I guess could be called another of my mini rants. In fact, I should come up with a section for each post called that, but then I would come off as being too negative. I don’t want that, because I’m not a negative person. All these sites coming out that are by invitation only are pissing me off. Its yet another site that only a select few, and most likely only the elite top, are going to get invited into. Of course I sent my info just to see if they hand one out to me, when a though popped into my head. Let’s say I did get invited, or any site that is invitation only like Dribble. I wonder if someone would pay for the actual account? I get in, then sell it off to someone who doesn’t really have a chance of getting invited. Would you pay for the chance to be in, and maybe get your site/blog noticed because you are on there? Something to ponder my friends. I think someone out there would.

And on to the more. Smashing Magazine is having a CSS3 contest. Check it out and have at it. They say go nuts, but honestly, after seeing that twitter whale css3 thing (you can see it on the contest page), I just don’t have the time to spend on something like that. I know CSS3 can do some amazing crap. We’ve all seen it. I’m just not about to create some crazy thing using a stylesheet, that can be done in 10 minutes in Photoshop. That is me being a hard ass and sticking to what I believe (really, I would love to…I just don’t have the hours/days to do it).

Coupon Code: webmachine

$('.content').wrapAll('<div class="borderHighlight" />');

Keyboard Kung-fu

Plenty, I say, plenty. Most of them little. It used to be, back in the day, that Photoshop didn’t allow you to edit your keyboard shortcuts. I use to have a huge Action file that did all sorts of things like flatten layers, change color modes, aligning things with a push of a button, stuff like that. Now though, PS allows you to customize the keyboard shortcut preferences. I have a ton of my rearranged. For instance, to flatten layers, I just have to hit F2, to change to RGB mode for when I get something that is in CMYK or when I open a gif, I just hit Ctrl + R, and bingo, RGB mode.

Doesn’t seem like much, but think of all of things you do in Photoshop…and I mean things you do all the time. Wouldn’t it be nice to just hit a button and presto that is done? I know this sounds stupidly easy, but I am still amazed by how many new developers keep going to the damn menus to do simple things. Maybe they are scared to overwrite the shortcuts that PS has by default. Well, they shouldn’t.

Because for all of the things that you do repetitively, there are a TON that you will most likely never touch. You just need to figure out what those are, and change the quick keys to do what you want them to. Photoshop has a lot of bells and whistles, but really how many of them do you really take advantage of in your day to day work or project? There are most likely a lot that you won’t use often or ever…might as well put the keys they are assigned to, to do some good for you. Otherwise they are just sitting there doing nothing.

Anyone care for some cheese?

How about your mouse? I am one of the few people who uses a trackball. Up until 3 days ago, I was using the Kensington Turbo Mouse Pro…a trackball that I have seen go for $250 on ebay recently. Why? Because you can’t get it anymore. It has 6 application launch buttons, and four normal buttons. I had all my apps programmed to the 6, copy to the top left, paste to the top right, open with the top 2 chorded together, close with the bottom 2 chorded together. That means I could do a bunch of stuff using just my right hand. Saved a TON of time. Unfortunately I had to get a new one, the Kensington Slimblade Trackball (5 year warranty, and yes they are good with it…I’ve recieved 2 replacements free when they died). I don’t have the 6 launch buttons, but with the new software that came out, I can at least program the 4 it has. And yes, that trackball is awesome.

Script cliff notes

I don’t care what you use…although I recommend something like Evernote, cause it is bad ass, but use whatever you are comfortable with. I have a page with all the scripts I might use. Like what you ask? Well…for 1, google’s got a code vault of sorts, you can take a look the javascript libraries here. I can never remember where to find the damn things, so I copied the links to use them and put the common ones, like jQuery and Ext into a note file. Along with the swfobject to call flash nice and easy, and a host of other script snippets. That way I have them all right there, copy, paste, done.

In conclusion, in no particular order

Over the years I have collected a ton of crap that helps speed my daily process of building sites. It cuts the time down on doing routine things. One of these types of things isn’t going to do much, but add all of it up, and you are shaving quite a bit of time off what it takes to build a site. If you are not doing these types of things, making your own “web dev tool kit”, you better start now. It will let you focus on what is important rather than wasting time on doing the little things.

Let me know what you do to make you faster at building sites. I would love to hear what everyone is doing, and see if I can’t learn something new, too.

Coupon Code: webmachine

$('.motionDiv').slideDown(2000).delay(2000).fadeIn(1000);

Creating a file like this to be reused is just one of the tools web developers have in their “tool kit.” Things we have to speed up the time it takes to build a site. Tonight is part one in how ever many I decide to do. They won’t be consecutive, but spread out whenever I get one together. For my next one, I would like to do a base CSS file, but using Sass and showing the neat little tricks you can do with it.

Now…onward! I created one tonight for anyone that wants it, and you will see it below. The first 3 lines of mine is a very small reset. It takes the margin and padding to zero on a bunch of elements, so there is no problems with IE, and every browser starts the same. You will also see display: inline wherever I have a left or right margin added. This is to take care of the IE6 margin doubling.

Most of the numbers and colors are generic, but those are the main things that I change. I start with a very basic layout, and add the details as I go. With this type of CSS file handy, now I don’t have to rewrite the same thing over and over again, and it takes less development time.

Here is the CSS code for you – written in long block form. Keep in mind this is just a basic CSS stylesheet that I created for you tonight. The ones I normally use are much bigger. Customize to your heart’s content!

body, p, ul, ol, li, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
 
body {
	color: #666666;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	background: url(../images/) repeat-x left top #ffffff;
}
 
img {
	border: none;
}
 
h1 {
	color: #ff0000;	
}
 
h2 {
	color: #00F;	
}
 
h3 {
	font-style: italic;	
}
 
a {
	outline: none;
	zoom: 1;
}
 
a:focus {
	outline: none;
}
 
a:hover {
	color: #00F;	
}
 
li {
	list-style: none;
	background: url(../images/) no-repeat left 4px;
	padding: 0 0 0 10px;
	margin: 0 0 10px;
}
 
.small {
	font-size: 11px;
}
 
.highlight {
	font-weight: bold;
	color: #ff0000;
}	
 
#container {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
 
#header {
	width: 1000px;
	height: 200px;
	background: url(../images/) repeat-x left top;
}
 
#contentRepeater {
	width: 1000px;
	background: url(../images/) repeat-y left top;
}
 
#contentTop {
	width: 1000px;
	background: url(../images/) no-repeat left top;
	min-height: 500px;
	height: auto !important;
	overflow: hidden;
	_overflow: visible; /* IE6 - put this in IE specific stylesheet - here just to show */
}
 
#sideBar {
	width: 200px;
	float: right;
	margin: 20px 40px 0 0;
	display: inline;
}
 
#content {
	width: 600px;
	float: left;
	margin: 20px 0 0 40px;
	display: inline;
}
 
#content ul {
	padding: 0 0 0 40px;	
}
 
#footer {
	clear: both;
	background: url(../images/) repeat-x left top #ff0000;
	color: #ffffff;
}
 
#footer a {
	color: #ff0000;
	padding: 0 5px;
}
 
#footer a:hover {
	color: #00F;	
}
 
#footerContent {
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}

And here is the html that would go with it (note I am only including the body and its contents here:

<body>
	<div id="container">
    	<div id="header"> </div>
        <div id="contentRepeater">
        	<div id="contentTop">
            	<div id="sideBar"></div>
                <div id="content"></div>
            </div>
        </div>
    </div>
    <div id="footer">
    	<div id="footerContent"></div>
    </div>
</body>

Enjoy!

$('#nav li').slice(2, 7).css('color', '#000000');

We’ve all had those moments. One of mine was getting things positioned using ‘relative’ positioning. I won’t go into the details, of how dumb I was, but lets just say I had my top margins at -500px or something silly like that. Now I know that you have to position relative the parent div and absolute the one you need to place with pin point accuracy using top and left. All browsers then get along.

Another…the float. I used to float the HELL out of divs, when it was totally unnecessary. I mean EVERYTHING. Stupid, stupid, stupid. Yes I could get things to work, but man what a pain in the ass.

Or how about dealing with IE6′s double margin? I used to write a separate rule for each margin that had a a left or right on it for IE6, when really a display: inline will work just fine.

You know when everything got real easy though? Using a css reset. I remember doing a site that had a bunch of ul’s on it, and they were all different. My css was disgusting. Everyone of them had seperate padding and margin rules and all sorts of crazy was going on. If I had just reset them all to 0, and then adjusted what I needed…wow.

So what are some things you have done that makes you shake your head and want to slap yourself? I know there are a ton more that I’ve done. But really, that is the point of this blog. To help the new and middle level web developer skip through all the crap I’ve gown through. I wish I had the resources available to me back in the day, as everyone does now.

Oh, and if anyone has a freakin’ link/site that shows how to start from ground zero to getting a web page up and going using Ruby, PLEASE give it to me! I talking about a for dummies type approach.

$('h1').prependTo('#container');

<div id="container">
    <div id="navigationContainer">
        <div id="navList">
            <ul>
                <li>Nav item 1</li>
                <li>Nav item 2</li>
                <li>Nav item 3</li>
                <li>Nav item 4</li>
            </ul>
       </div>
    </div>
</div>

In most cases though, you could just have the first container and the ul. You can position any block level element, such as the ul, just as you would a div. By doing so, you would eliminate unnecessary code, making it cleaner as well as easier to read and figure out what is going on. Now of course, there are going to be times where you need extra container-y things to do some graphic awesomeness, because the multiple background CSS3 styling isn’t supported across the board. I get that, but I would bet a majority of the time, if you looked at your code, you could strip some of the crap out.

To give you an idea of what I’m talking about, I’ll give you a little example. This little bit also styles the body as if it were just a regular old container. Cause guess what….it is. Here is the html:

<body>
	<div class="left">Just some text.</div>
    <ul>
    	<li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>
</body>

And here is the CSS (feel free to copy and test this of course, cause I didn’t believe the whole body thing either):

html {
	background-color: #CC6;	
	height: 100%;
}
 
body {
		width: 800px;
		margin: 20px auto;
		background-color: #ffffff;
		padding: 20px;
		overflow: hidden;
		height: 100%;
}
 
.left {
	background-color: #36F;
	float: left;
	width: 100px;
	height: 200px;
	color: #ffffff;
}
 
ul {
	float: right;	
}

What does this look like? Take a look at the screen shot. Crazy right? Your saying, “HOW THE F#@$! CAN YOU DO THAT WITH THE BODY TAG?” Well, look at the styles and you will see. But that really isn’t the important part. You can see the ul floated right, and now you can style the heck out of it. Put a background image in it, style the li tags, add a drop shadow, whatever. The point is, You don’t need any other containers to do it.

The whole “divititis” thing is a very common disease, and almost every beginning to intermediate web designer/developer gets it at one point. Sometimes it is a matter of trying to push out a project quickly and you are not thinking of the best ways to do something, just the fastest. And there are times where that is what you need to do to get things done, because that is what you are familiar with. But really, if you sit back and look, you can find you can do some trimming. I like to build my pages, then go back and see what I can take out. You will be amazed at what you don’t need.

NOTE: Just so you know, to get the body to work like that, you need the 100% height on the html style, and overflow:hidden on the body, as well as the height also.

Anyway it was an article about saving images for the web at 72 dpi. The funny thing is, dpi is what most of the web designers I know refer to it as, but that is a printing thing (dots per inch). PPI is the one dealing with screens. Pixels per inch, and that is the one that matters.

Now, I am not sure if there is a way, once a photo has been taken, to adjust the number of pixels per inch in Photoshop. What I do know is that most web designers save their images at the 72 resolution. You could very well be one of them. Well…so am I. And even knowing what I know today, I doubt I will change that habit. Why? Because it doesn’t matter.

I would like anyone reading this that is actually interested now, to do something. Open an image in Photoshop, and go to Image>Image Size. In that window, make sure the Resample box is UNCHECKED. Now, if it isn’t already at 72, change it to that, and then save it as a jpeg. Then do the image size again, and change the 72 to say…3000. Notice with the Resample box unchecked, the pixel width and height stay the same, they are locked in. Save that also as a jpeg.

Now place both of those images into an html file, and preview it in a browser. What do you notice?

Not a damn thing, right? They both look the same. Now right click on both of the image files, where ever you saved them, and check their properties to see each’s file size.

What do you notice? They BOTH have the same file size. So what does this tell you? That for people in web development, that whole 72 thing is a bunch of bull. That resolution means NOTHING in the web world. It does however matter if you printed them. Cause you probably noticed that the Inches size changed. But screens don’t go by inches.

So what this means is, what you really have to pay attention to is the Pixel width/height. That and the compression you use when you save for web in Photoshop (or Fireworks, or whatever it is you use) is what matters for the file size.

I know, that just blew your mind, right? Feels like you just found out that what you believed in was all just a big fat lie.

So, will this change how you save images? I’m guessing not. It IS interesting though. Next time someone pulls the whole 72 whatever-p-i…you can tell them they have no idea what they are talking about and pull out your new found knowledge, and look like a super smarty pants.