Shallow Thoughts

Tim Van Damme wrote a very helpful tip for adding CSS3 rounded corners on images. To get the rounded corner effect, Tim placed an additional element around the img tag — in this case a p tag. To that p tag, he applied an inline style to set the background-image to be the same as the image being displayed on the page. Then he wrote some CSS3 magic using border-radius to round the corners. Not every image you come across will need this solution, but if you read what he wrote first, you might see why this strategy would come in handy.

The issue that arises for me comes when handing the site off to a client who will be adding images later. Depending on their skill level, they may or may not be savvy enough to add markup around an image to make this effect work. So, I’ve opted to add that element automagically using jQuery. All the caveats that go along with other javascript solutions apply here.

In my scenario, there is already a div with class=”figure” containing the image that is to have its corners rounded along with some additional text. In fact there are multiple div‘s with class=”figure” on the page. So, this snippet of jQuery finds the images inside each of those divs and applies the additional markup to them:

$(document).ready(function() {

// find images inside the divs with the class of
// "figure" - and for each of them do some stuff 

  $('.figure img').each(function() {

// store the src attribute for the img because we
// need it in the next bit

  var imgSrc = $(this).attr('src');

// wrap the image in a p tag and use the src
// attribute we stored earlier in the inline style
// on the p tag

  $(this).wrap('<p style="background-image:url('
  +imgSrc+ ');"/>');
  });
});

That’s all there is to it. Now each of the images will have the p tag with the inline style added to them, in order to make use of Tim’s delightful solution.

Silly things one can do with Baskerville’s Ampersand:

Pandoodle

Part Panda. Part Poodle. Pandoodle.

Simple Snail

Nothing fancy. Just a snail.

Red Hot Chair

Fancy Chair. Simply done.

Swirly Flower

5 ampersands rotated around. Shrug.

Walrus by request

Highly coveted walrus. 2 ampersands.

Those of us who follow the likes of Jeffrey Zeldman, Andy Clarke, Dan Cederholm, Ethan Marcotte, and a host of other notable web professionals have heard the battle cry that design should support the content, not the other way around. I’m not going to reiterate all the reasons why this is a good practice. You can get their thoughts on the matter via their blogs, books and presentations at conferences. I encourage you to do so because I agree with them. Content should be honed first, so that an appropriate design can deliver it in a pleasing manner to the intended audience.

The question I am posing today is how to best put this philosophy into practice when a CMS and other restrictions come into play. Lets face it, not every site can have each article “art directed” a la Jason Santa Maria‘s site. Not every company has the resources available to do such a thing. So, in the harsh, cruel world where low budgets, unenlightened project managers, unrelenting time lines, and understaffed companies govern the website’s resulting look and feel, what do we do to ensure that content is delivered in the best possible light?

I have a specific scenario I’d like to examine, in hopes of hearing some ideas on supporting content while using a CMS in the conditions mentioned above. (more…)

A lot of posts in the first few days of January reflect on the year that passed and/or look toward the year ahead. That’s not my plan here. There’s nothing wrong with posts like that. I just don’t want to do one of those. I do, however, want to get back into writing. More specifically, engaging in conversations that may be more meaty than those we have on Twitter or Facebook. (more…)

A simple game: Go to supplements for pets
the address bar in your favorite browser, and type one letter. Start with “a”, end with “z”.

A - http://aremysitesup.com/
B - http://bradcolbow.com/
C - http://www.clevelandwebstandards.org/
D - http://www.dailypuppy.com/
E - http://expressionengine.com/
F - http://forabeautifulweb.com/
G - http://www.google.com/
H - http://www.hulu.com/
I - http://www.imdb.com/
J - http://jquery.com/
K - http://kuler.adobe.com/
L - http://localhost:8888/
M - http://microformats.org/
N - http://www.newint.org/
O - http://orderedlist.com/
P - http://photobucket.com/
Q - (nothing)
R - http://www.rockportretirement.com/
S - http://shallowthoughts.org/
T - http://twitter.com/
U - http://upcoming.yahoo.com/
V - http://www.virtualrabbit.com/
W - http://www.watchtheguild.com/
X - (nothing)
Y - http://www.youtube.com/
Z - http://www.zeldman.com/

A few of the above reflect some recent work I did on a website project and services they wanted to include.

Other lists to look at:
Tim Van Damme (the guy to blame for this game)
Andy Clarke
Brad Dielman
Elliot Jay Stocks

If you are using Twitter as a means to communicate with other people, super. You’re not the only one. There are tons and tons of us out here using Twitter and as a means to make Twitter a useful service, I only see the tweets from those I follow. At least, that’s the theory.
(more…)

I’m attending An Event Apart, a great conference for people who make websites. My plan is to take notes during the presentations mainly so that I remember all the great stuff I heard, but also to share with my friends who couldn’t attend.

I also plan to create just two posts – Day One and Day Two. So, if you are one of the folks following along, I’ll publish the post section at the end of each presentation. All of Day One’s presentations will be contained in Day One, while Day Two will be in a post dedicated to day two. Hopefully, that is plain and obvious.

On to the meat of the posts… (more…)

I’m attending An Event Apart, a great conference for people who make websites. My plan is to take notes during the presentations mainly so that I remember all the great stuff I heard, but also to share with my friends who couldn’t attend.

I also plan to create just two posts – Day One and Day Two. So, if you are one of the folks following along, I’ll publish the post section at the end of each presentation. All of Day One’s presentations will be contained in Day One. Hopefully, that is plain and obvious.

On to the meat of the posts… (more…)

Ever stared at a blank Photoshop screen and just needed to “get started designing”? Ever been handed a 40 page spec sheet that you needed to build from? Ever wonder if this feature should even be built in the first place? (more…)

The Cleveland Web Standards Association will be gathering once again on Tuesday, August 5th from 6:30 – 8:00pm. We’ll be meeting at American Greetings Headquarters, 1 American Rd, Cleveland. (more…)