Readers who use Google Reader to read WordPress powered website RSS feeds on their small-screen mobile devices don’t get the full picture if the WordPress site in question uses the caption short code functionality, because the resulting inline CSS code that displays does not instruct the feed reader to scale the image down to fit the screen.

See, i.e.:

In this image, a giant photo in a post is poorly displayed in Google Reader as a result of the default settings of WordPress 3.3 (and previous versions that include the Caption feature). As displayed on my Android-powered Nexus S from Google, running the latest version of Google Reader, Version 1.1.1.

The solution:

I created a new WordPress plugin called RSS Responsive Caption to adjust the inline CSS styles that get attached to images with captions to make them more “responsive.”

Really, all that was needed was the following CSS code to specify that the maximum width of an image should be 100% (of the screen size). That’s responsive web design, in a nutshell.

max-width: 100% !important;
height: auto;

Creating a plugin to accomplish this was not necessary. In fact, anyone can do this without downloading the plugin, simply (heh) by altering lines 745-746 in the wp-includes/media.php file, from:

return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . esc_attr($align) . ‘” style=”width: ‘ . (10 + (int) $width) . ‘px”>’
. do_shortcode( $content ) . ‘<p>’ . $caption . ‘</p></div>’;

to:

return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . esc_attr($align) . ‘” style=”max-width: 100% !important; height: auto; width: ‘ . (10 + (int) $width) . ‘px”>’
. do_shortcode( $content ) . ‘<p>’ . $caption . ‘</p></div>’;

But! If I did it that way, then every time WordPress would release a new version of its frickin-awesome open source software package, I would have to manually go into the media.php file and change that line of code to keep my RSS feeds displaying properly in Google Reader.

Instead, I prefer the instant update method of installing the latest version of WordPress. I click the button, it does its thing and in a few moments of anticipatory suspense, I have the latest version of WordPress in all its glory, and I can troubleshoot it because my own specific modifications are separate.

That’s also why I typically choose to create child themes on top of existing themes – if the theme is ever updated by the theme author, I won’t have to manually sort out what was changed vs. how I reconfigured it, unless the theme author specifically chose to alter something I wanted to alter.

The plugin makes the viewing experience in Google Reader much better.

See, i.e.:

The photo as displayed in the RSS feed when the plugin is activated.

Download my first-ever WordPress plugin here:

RSS Responsive Caption

http://wordpress.org/extend/plugins/rss-responsive-caption

Credit:

This plugin would not have been possible if the WordPress core team didn’t create a way to “allow a plugin to replace the content that would otherwise be returned” via the caption shortcode function (see: wp-includes/media.php, line 711), or, if they didn’t further explain the add_filter function in the codex, even going so far as suggesting the following plugin:

add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);

/**
 * Filter to replace the  shortcode text with HTML5 compliant code
 *
 * @return text HTML content describing embedded figure
 **/
function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> '',
		'width'	=> '',
		'caption' => ''
	), $attr));

	if ( 1 > (int) $width || empty($caption) )
		return $val;

	$capid = '';
	if ( $id ) {
		$id = esc_attr($id);
		$capid = 'id="figcaption_'. $id . '" ';
		$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
	}

	return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: '
	. (10 + (int) $width) . 'px">' . do_shortcode( $content ) . '<figcaption ' . $capid
	. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}

Basically, I took the plugin above and altered it to fit my needs, after an exhaustive search to determine that someone else hadn’t already done what I wanted to do.

I got the idea for this plugin by looking at the HTML source code of the posts WordPress generates for images with captions and images without, then Googling until I discovered what made what worked.

Articles and forum posts that I came across in the exploratory process include, but are likely not limited to:

• Auto resizing images to fit max width? original forum post by caffeinedreamer
• Should I edit media.php? original forum post by avalera

Want to further alter the way captions are handled in WordPress? This plugin looks very interesting:

• Links in Captions, by katzwebdesign

About RSS Responsive Caption
from the documentation section of the plugin:

This plugin allows publishers to better control the width of photos that use the WordPress caption shortcode feature, when that content is displayed in RSS feed readers like Google Reader, as displayed on small-screen mobile devices.

This plugin accomplishes the same thing that adjusting the “function img_caption_shortcode” code in includes/media.php would, but allows the user to automatically update WordPress without worrying about losing these changes.

It is the author’s hope that in future releases of WordPress (post 3.3), this plugin will prove unnecessary if (hard-working, responsive-minded) WordPress core developers decide to include the fix in newer versions of the awesome great open source software we have all come to love.

(Hint, hint)

Download my first-ever WordPress plugin here:

RSS Responsive Caption

http://wordpress.org/extend/plugins/rss-responsive-caption

The static pages of the previous version are archived here:

http://brandonmoeller.com/old_design1107

This is the previous design.

WHY I DID IT

Here’s an example of what my new responsive Hire Me page looks like when you adjust your web browser to a skinny sliver (or view it on a smart phone).

The responsive style of this page was achieved with media queries and alternate content and style for thinner widths.

What really made me take the plunge and do the redesign was the responsiveness built into the new TwentyEleven theme, and the web standards community’s recent embrace of a responsive design philosophy, probably best articulated by Ethan Marcotte in his book, Responsive Web Design. His book was the first e-book I have ever purchased (it was cheaper than a physical copy!) and by the looks of the way things are going these days – it won’t be the last.

I’ll put the “responsive” philosophy in my own words here. Websites should look great on all devices, and by great, I mean you should be able to easily read the copy and see the crucial images and most importantly, use the website as it is intended to be used.

I think the new default TwentyEleven theme does just that, and I’m happy to develop my own style on top of it with a child theme I’m calling ….

Bmo Two 1.0.0 Child Theme for TwentyEleven Theme for WordPress 3.2.1 (Download it.)

WHAT CHANGED

I’d like to say not much changed, but the new background image and the desire to switch the body content of the page to white from the previous blue make the redesign look more involved than it really is.

This is what the new homepage looks on a 27" iMac, when the browser window is expanded to fill the whole screen.

I ditched the “about” page, because, you know. Who cares? (It was also getting depressing changing the age that I am every year on that page).

Besides, I’m not really who I say I am, am I? I’m who you think I am. And to that end, I want you to see a lot of pretty photos, and a lot of hard work and that way, you may draw the conclusion that I am blank or perhaps blank, or maybe even blank. But! I’ll let you figure it out … instead of me telling you.

Oh no, I’ve told too much. . .

So, with the redesign, I now have four items in my main navigation menu. “Home,” “Hire Me,” “Photos” and “Blog.”

For easier navigation, and to drive more traffic to them, I made the subpages of the “Hire Me” appear in the menu when one passes their mouse over it. This freed me from having to create a new navigation box on the subpages.

And now, all pages on the website are built into the WordPress system, the more elaborate of which like the main “Hire Me” page, were created by using WordPress page templates that I hand-coded.

I also removed most, if not all, of the Facebook integration. I might bring this back. Or, I might just integrate Google+ instead.

I’d write more, but I’m too busy working on customizing the new default template, which I think is the best default template yet.

See what I’m up to here:

http://brandonmoeller.com/twentyeleven/

My first stabs at customizing the new Twenty Eleven WordPress theme, by creating a new child theme.

The new Houston History Magazine website

My role in this project was to advise and consult the small staff of the academic magazine of what tool to use for the job, what services they need to acquire and suggest a template that would give the magazine an engaging look. I was also responsible for designing the Past Issues archive page in the new WordPress system – previously it was designed as a three-column table. I was also responsible for installing WordPress and maintaining its installations, and customizing it for the needs of the magazine.

The new Past Issues archive page improves the usability of the previous page by inserting links to full-issue PDFs on the index, so readers can easily download them without opening each issue page. The design also breaks out of the previous three column table, allowing the elements to float left of each other, allowing for continued backward and forward compatibility with web trends and layout. If/when the design ever changes again, these elements will naturally flow to fit the size of their container.

We chose WordPress because of my familiarity with it and its ongoing maturity as a user-friendly CMS that works best with time-oriented publications.

We chose hosting the WordPress custom installation on GoDaddy because the company offered affordable web hosting with an interface that the magazine’s staff was familiar with. Hosting the system on a third party’s web server was necessary because the college does not have all the required pieces of a modern web environment in the same place, and is currently in a period of transition. Hosting the site on GoDaddy provides stability now, with the option to transfer the database of information to the college web server later.

We chose the BluePrint Magazine WP 1.0 theme, designed by Dany Duchaine of DDStudios, because it allows for a sophisticated look and an engaging featured image slideshow on the homepage.

This is the original design of the BluePrint magazine, which I altered to fit the needs of the Houston History Magazine.

The site was built using WordPress as a content management system, to allow Bradley’s staff to make updates to the content and post news items.

At launch, the site’s features include:

• A custom theme
• Custom header designs
• Customized menu
• Six jQuery javascript-based image slideshows
• 24 pages and a 3 news posts
• A randomized “testimonials” sidebar graphic
• Facebook integration
• A sign-up form for the Bradley’s newsletter

I worked with Bradley’s Art and Frame co-owner Pat Bradley to develop the site. She provided the content and most of the photos, and I designed the website and customized WordPress for her business’ unique needs.

I’m most proud of the following design elements:

With mostly provided art and photography, I created header banner images and modified the WordPress system so that Bradley's employees could easily switch out the banners depending on the season.

This sidebar on the What We Do page is stylized with CSS3 to a create rounded borders and a drop shadow to make the menu items stand out prominently on this page.

For years, Bradley's Art and Frame has been highlighting what its customers have custom framed in its newsletter's You Framed a What article. To publish the feature on the Bradley's website, I was asked to desgin a page that would display each piece of art and when users move their mouse over it, it enlarges to show detail. I found a jQuery-based javascript and customized it to perform this requested function, and I think it turned out great.

I designed this page to tell readers about the Bradley's staff. Also pictured is the randomized testimonial widget graphic in the sidebar, featuring Casey, the Bradley's four-legged family member and Certified Master Shop Greeter.

When I tried to jam my whole name into 16 pixels by 16 pixels, it didn’t look too swell. Just cramming seven letters looked better.

My new ico

A favicon.ico is a small icon that browsers use to add some flair to the window tabs and bookmark links. It’s the closest I’ll ever come to corporate branding.

I also modified my functions.php file in my WordPress theme to include the code to call the .ico on every page within the blog.

Here are some helpful web pages I found that helped me accomplish these tasks.

“How to create a favicon.ico” from PhotoshopSupport.com

“Child Themes” from the WordPress Codex

BrandonMoeller.com

It has been two weeks since my last redesign.

My redesign project for BrandonMoeller.com began on July 5 and ended a week later on July 11, and I’m very happy with the results.

The previous design had served me well for a number of years, from Feb. 6, 2008 to July 5, 2010.

It was time for a change.

COLORS

The Good Friends color palette, used on the new BrandonMoeller.com

I started by deciding on a color palette. I chose “Good Friends” desgined by Colour Lovers user Yasmino.

FONTS

Next, I chose Franklin Gothic FS by FontSite Inc. to be my official font, so I bought the whole family from FontSpring.com, and unlimited licenses to put it on as many websites as I please. The two fonts currently used on the site are Franklin Gothic FS Medum Condensed and Franklin Gothic FS Book. I even incorporate these fonts in my blog.

A picked a (free) secondary font from FontSpring called Merge Regular from Philatype. I really like this font, but I just don’t have many places to put it at the moment. Currently, it makes the text in my sidebar on my “Hire Me” page stand apart.

A SIMPLER DESIGN

I wanted a simplistic design that would allow the content to shine. So, I spent a lot of time revising my content, consolidating pages and reducing clutter. I got it down to five pages, and developed intuitive titles for the pages: “home,” “about,” “hire me,” “photos,” and “blog.” I wanted my homepage to be free of the boring introductory text that — for whatever reason — everyone else is convinced they must have. However, I think visitors to my website are aware that they’re at my website, and I’d rather have graphics and the content to do the talking.

A sample vector-based icon as it appears on the homepage.

Being a fan of the social media, I wanted to maintain my previous website’s homepage feature that listed all of my other pages out there on the Internet. But, instead of a list, I decided to make vector-based graphics for my 10 favorite external sites. Hovering over these images reveals a splash of color and movement. Soon, I’ll probably use the jQuery javascript library to add more icons in a slider format for the other websites I didn’t have room to mention.

FACEBOOK + PICASA

Also, I wanted to tap into the Facebook API on the homepage. At launch, I added the famous “like” button to the homepage, and future plans including a Facebook comment box on every page. That’s coming soon. I want more people to hit that “like” button, first, though — before I go to the trouble. Ahem. I’m talking to you.

I also created a new section for my photos using a javascript that embeds my Picasa Web Albums right onto my website, making it appear as though the photos are housed on BrandonMoeller.com. The JavaScript I used was written by Jesse Berman and works just like he promised it would on the open source website SourceForge.

THE NEW BLOG

Last but not least – certainly not least because it probably took up most of the time I spent during the redesign — I updated my WordPress blog from version 2.6 something to the brand new WordPress 3.0 “Thelonious.” I then took the new standard WordPress theme of Twenty Ten and built on top of it, customizing it to look like the design I created for the new BrandonMoeller.com, allowing for a seamless experience for my blog visitors. When I get around to it, I’ll likely make the new BrandonMoeller.com into a template file that can be publicly downloaded for anybody who wants to mimic my design, as well as make my WordPress theme build-on available.

I’m also now tracking the traffic of my website with Google Analytics — I’m very impressed with what the tool allows me to discover about my visitors.

If you like the new website, please let me know what you like — and why — in the comments below.

It was easy. I went to their website, signed up, chose two fonts from the free trial selection and specified what domain I will be using them on. The free trial only allows for the use of two fonts on one domain. I then copied the two-line Java call and pasted it into the head of all the site’s pages, then configured the easy-to-use TypeKit editor to specify which font corresponded to which selector in my HTML/CSS of the site, and after a few minutes, I was done.

I chose FF Enzo Web by FontFont for my headlines.

I chose Scrivano by Outras Fontes for my regular body text. I know, I know – it’s a little wild. And kind of a little fancy pants, but it really highlights the fact that I’m using a unique font on my Web site and if you’re cool enough to have an updated browser, then you’re cool enough to see it and, perhaps, be inspired by it and the brilliant web developer behind the Web site. All that, and Kim let me, so there.

But it doesn’t work in all the browsers I use. Here’s the results of my survey:

Go

MAC
Firefox 3.5.5
Safari*

PC
Firefox 3.5.5
Internet Explorer 8

No Go

Mac
Camino
Google Chrome
Opera

PC
Chrome 3
Internet Explorer 6+7

* Though BrandonandKimberly.com keeps crashing Safari. Doh! Man, I hate that browser.

Also, I’m kind of disappointed in the way that various browsers display the fonts I chose.

Check out these screen shots. Discuss.

Firefox 3.5.5 (PC): This is how Typekit displays our wedding Web site on the browser of my choice.

Internet Explorer 8 (PC): It doesn't display as nicely, but, maybe that's just my opinion. Notice how the weights of the headlines between this one and FF are inconsistent.

Firefox 3.5.5 (Mac): It looks pretty good on Firefox for Mac.

Click to return to BrandonMoeller.com.

Click to return to the Barefoot Drums of Houston working redesign.

Barefoot Drums of Houston

-AND-

BrandonMoeller.com

I originally stumbled upon the ShareThis service by avidly reading Wired.com, which uses it. I used it a few times to forward articles to that certain someone, you know, to further affirm my geekness 2.0. When I first saw the ShareThis interface, I thought: How much is too much? I mean, seriously: All of the latest and greatest Web services just seem to be small variations on the same four-pronged theme: Post content. Share it. Comment on what your friends are posting. Repeat.

Of course, the only problem with that idea is that, thanks to the outburst of all these nifty services, everyone does the same thing a different way. Usually, compatibility seems to be the last consideration.

With ShareThis’ more-is-never-enuff approach, though, at least none of my readers can claim they were left out.