Shallow Thoughts

because deep thoughts smack of effort

Dear FCC Response

Posted in Uncategorized by Bridget on May 26th, 2014

Thank you very much for contacting us about the ongoing Open Internet proceeding. We’re hoping to hear from as many people as possible about this critical issue, and so I’m very glad that we can include your thoughts and opinions.

I’m a strong supporter of the Open Internet, and I will fight to keep the internet open. Thanks again for sharing your views with me.

Tom Wheeler
Chairman
Federal Communications Commission

Aiding CSS3 Rounded Corner Images

Posted in Uncategorized by Bridget on August 25th, 2010

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.

Content + CMS + Layout

Posted in Uncategorized by Bridget on January 6th, 2010

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…)