This was never a hugely time-consuming step, but it was a whee bit annoying. For the record, I’m not sure if other people have done this before, I’m sure someone has, but after a quick search on google, I didn’t see anything.

I created some dummy content and explained what I was doing and then pulled a dummy pic from a previous (also FPO) project. I marked it up without any major CSS, just normal body stylings. Here’s the HTML:

<div id="demoWrap">

	<div class="fpo">

		<img src="images/holderOne.jpg" height="164" width="249" alt="" />

		<abbr>FPO</abbr>

	</div>

	<h1>This is cool stuff.</h1>

	<p>This way, you don’t need to create a PSD file with FPO and then

	remove it later.</p>

</div>

Here’s the before look:

Then I added a bit of CSS:

#demoWrap .fpo { float:right; margin:10px 0 -50px; }

#demoWrap .fpo image { display:block; position:relative; z-index:1; }

#demoWrap .fpo abbr { display:block; font-size:300%; font-family:Helvetica,

Arial, sans serif; font-weight:bold; position:relative; z-index:100; top:-115px;

left:75px; color:rgba(255, 255, 255, 0.8); text-shadow:#101010 0 1px 2px; }

And voila, I got just what I was looking for:

Like in the image, in modern browsers, this adds a nice flavor that we used to get only in Photoshop. Older browsers will ignore them and this effect will still be effective, just not as glamorous.

Post this goodness to twitter.

Why I say this is because I came to web from a fine arts / print background. And as much as I love print, I was just drawn to web, and I wasn’t always sure why. Lately, however, I’ve begun to realize what it is.

Although I thrive on feedback and criticism (from a design point of view), rarely is the code ever seen by clients, thus rarely is it ever reviewed. So, as it stands, I am my best and worst critic. I constantly critique my code by the fact that I read blogs and tweets all day relating to newer and cleaner coding techniques and how I may have done this or that in a less-than-ideal way previously.

Each day I strive to try something new, whether it’s relieving myself of divitis, figuring out how to make sites more accessible, trying some new CSS3 tricks, or testing the latest web fonts trend. Unfortunately this is not usually paid work, but as semi-wise old man once said to me “if it is to be, it’s up to me.”

These personal projects are a really nice creative outlet (for all those ideas too out-there for the clients, or that have just been floating around my head), and are a great way to help me break through any kind of designers block I might be having. But more importantly, with each and every project, I implement something I learned from the last time, and usually do it better.

Additionally, being able to create and test a new page right then and there, each project helps me feel more confident in my own skills, and helps me to be able to better communicate with the client as to why we should always strive for the cleanest, most semantic code.

Bonus–another reason why I strive to do this is because I really dislike the word “expert.” There are definitely some people out there who are experts at what they do. And while there are even a lot more who are really good at what they do, I’ve always been of the opinion that you should be constantly getting better, and learning new things, thus not worrying over labels. Let your work and your clients do the labeling, I say spend your time getting better.

Also, I’m not saying I’m a so-called expert, just my thoughts on the matter.

Any suggestions on other ways / tips to constantly improve the development side of web work?