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

As a software UX designer — that’s “user experience designer” for those of us who don’t speak geek — Porter makes some great points in his article that could apply to working as a web designer/developer in a large organization.

These sort of web design jobs are challenging and I’ve found the most important rule to remember is that We can’t do everything.

But we can do a lot. And we can make websites better — and in the process increase the website’s usability and, more importantly, the effectiveness of our audience at accomplishing tasks that they set out to achieve when they visit the website.

But how do we do that?

While keeping in mind what Porter notes:

“Unfortunately, there are far more problems than there are designers to solve them. So how do you know you’re solving a problem that’s worth solving?”

Porter offers three questions that can guide a UX designer in their prioritization of problems:

• Are people frustrated (with the problem)?
• Are people actively trying to solve it?
• Are people already spending money (to solve the problem)?

To answer these questions, Porter suggests interviewing users (with a very familiar Five Ws technique and observing how they currently work to solve the problem at hand using the existing system.

In web development, it’s not this simple. We can analyze web traffic to determine a website’s most popular pages — and we can even trace the traffic patterns that users took to arrive at these pages. And we can certainly interview website stakeholders within the organization to determine how their needs are being met.

On the web it’s even harder to gauge what the problems are with an existing website because the audience typically consists of different populations with different needs. One section of the audience may not care one bit about completing any task other than the one they came to the website for. These different audiences can include, but are not limited to, the following, in absolutely no particular order:

1. Current _____ (customers, residents, students, etc)
2. Prospective _____ (customers, residents, students, etc)
3. Stakeholders (employees, staff, faculty, elected officials, etc)
4. The Media (sure, they’re likely at least one of the above, too, but they have special needs)
5. Volunteers and Donors (if any, not quite stakeholders and as such, have special needs, too)

There may be more audiences depending on the website and its organizational purpose.

We know that, for most audiences, the longer it takes to complete a task on the website, the greater the frustration. When this frustration is multiplied by the frustration of the task at hand (doing something they have to do and not what they want to do; like paying money or filing paperwork), the poorly organized website experience sticks with them.

And we know some audiences actually don’t have tasks they want to complete. They are looking for general information — they are casually “surfing” — they are scouring for something intangible and unquantifiable: A feeling. So, OK, maybe they are looking to complete a task — but that task doesn’t have a result that can be quantified.

Sometimes, in an attempt to meet all of the needs of all of the audiences, the result is a disorganized mess that fails at satisfying the needs of anyone. We’ve all seen these kind of websites.

Making sense of this disorder — and preventing it from creeping back in — is really, what the job of a modern designer/developer is all about, and it’s as important as ensuring that the pixels are pretty.

And as Porter suggests, to succeed in solving problems for an audience, one needs to understand each distinct audience and create a rubric of questions to determine if those problems are worth solving.

This is one of my first sketches:

This is a sketch of a record, inspired by the latest issue of the Oxford American. This post was published via the WordPress app for iPad. (Update: Yeah, well, that doesn’t work too well, so I reposted it normally on a machine designed for work).

Here is another one:

Here’s a wild cat:

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.

Also, on a related copy editing tangent, I’m really glad that the Associated Press changed the style of the word, “website” – previously, it was mandated that it be written as two words with the first one capitalized, as in ‘Web site’ – I found this out today thanks to a colleague who lamented the change. But I love it. It’s about time. Website, website, website, website, website!

Anyway, back to the title of this post, there was this great blog posting I read this week just because the title was “The Care and Feeding of a Developer” which, after reading the article, I take to be the title of a presentation given by someone named Jason Johnson who spoke at some conference or something. Whatever! I was just in it for the part where it suggests bosses buy their (web?) developers bigger monitors and other tech gadgets that “passively” increase their work performance. There was a bunch of videos in the post – none of which I watched – because unless it’s 30 seconds long and involves a cat on a Roomba, I just won’t watch it, people.

Anyway, here’s a quote from the article:

“OK, three of them have some sort of interest in music, and you all listen to music while you hack? Right? Yes, there’s a connection here – patterns. Developers love, love, love patterns. Oh my God do we love patterns. We like relational databases, we like constructs and languages that do really neat things and they happen over and over again. So we’re constantly looking for these patterns to satisfy this need for immediate gratification. We love it.”

Speaking of patterns, I found this great website called Repper Lite that allows you to make a pattern from a photo you upload. I know how to do this in Photoshop, but what’s cool about this website, is it has some built in filters that distort the photo similar to a kaleidoscope, and you can alter the photo quicker than Photoshop.

So I uploaded the following photo of my new Neon Cowboy rose:

(UPDATE! Now, click on the photos for a sample page with the pattern)

Neon Cowboy rose

The first pattern I created with Repper Lite.

Numero dos.

The last pattern. Which one is your favorite?

FlockDraw

The first one is FlockDraw. And it’s beyond cool. Somehow, thanks to the amazing power of the Internets, it allows for collaborative drawing. Like, I could be drawing on it, and you could be drawing on it AT THE SAME TIME … and we can see each other do this … in real time.

It’s FLASH based, I believe and it’s really cool … when it works. I say this because I drew something at work, and then later today from home, I went to look at it and it was gone. I did post it to Facebook, and though no one commented, maybe someone erased it? Shrugs. See it here:

[It was embedded here. But, I've since removed it - it was not working as I had hoped and was busting my WordPress container.]

Of course, at this moment, it’s blank again. Sigh. Well, we’ll see … maybe it will right itself.

Just in case, I’ve embedded it here in this non-blog page: http://www.brandonandkimberly.com/flockdraw.html … It’s not working as of this writing. The “embed” code they give out is wonky, and it doesn’t even display on my Mac at work. Go figure.

In the meanwhile, the URL for the one I’ve been playing with is: http://flockdraw.com/cc0u4z

UPDATE: Oh wait, now I get it: “It’s important to note that these FlockDraw rooms are meant to be disposable — once the last person leaves the room, the image disappears.” from: ReadWriteWeb. But, still, I can’t seem to get the embedding to work. Sigh.

Squidoo

I’ve been looking for a guestbook for www.brandonandkimberly.com because someone has strongly advised me to, and one of the first things I found in a Google search was Squidoo.

Squidoo is a lot like GeoCities, in that it allows anybody to set up a free website. And, that it looks pretty crappy. I hate all the banner ads, as represented in this screenshot:

If you’re interested in seeing the Squidoo page I set up today but likely won’t continue messing with, see it here: http://www.squidoo.com/brandonandkim … Really, I just think I’m too old for that many ads. However, if anyone clicks on them, I might make money. Ka-ching … yeah, right.

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.

Stick with the little guy, I thought. Of course, if I really cared about the little guy, I would have stuck with Juno. Does anybody remember Juno? I think it pre-dated GeoCities – and, yes, that was my first web space provider.

Juno was a dial-up ad-based system. You dialed up. It spat out your e-mail, then, disconnected. If you were lucky, and if the seven Houston numbers you had pre-programmed in weren’t busy. Man, those were the days.

But anyway, I remember having Yahoo mail back when you had, like, only a little bit of space. I was constantly deleting messages to keep from going over my limit. Then, one day, they opened up the floodgates … and now, size is no longer an issue. But I shouldn’t say that. You can only send like 20MB in one e-mail. Want twice that? You need to buy their premium product for like $20-30 a year, I believe. The premium product also allows you to export the e-mail into something like Mozilla’s Thunderbird and/or Microsoft Outlook. I’m pretty sure this used to be a free feature. Man, I should have configured it before they made it a revenue stream.

A screenshot of a Yahoo Mail fail.

Today’s news that Yahoo will be incorporating Bing into its search system is likely what has my Yahoo mail on the fritz. It’s also probably why the search function on the Yahoo Groups has sucked for about a year or more … or, maybe like so many other Yahoo products, maybe they’ve just abandoned the Yahoo Groups Search function. It makes trying to moderate a group like VINELIST pointless … so I don’t, really, anymore.

Random thought of the moment: I miss San Antone.

Yahoo’s e-mail service is dead in the water so often lately – and so is it’s stock price, after today’s news. And I’m thinking about jumping. I guess it’s time for me to get a gmail account. Sigh. Maybe I’ll pay the premium fee for a Yahoo account, export all my e-mail to a client like ThunderBird, then I’ll get a free e-mail service that will also allow me to export to said client. With Google Wave coming up, and my current addiction to Google Reader, why the hell not jump onto the Google wagon. It’s not like they’re a large evil corporation or anything. Crap. brandonmoeller@gmail.com is already taken. What. The. Hell. Sigh.

But for two days in a row, I’ve been failing, and today it looks like part of it is my fault and part of it is Opera’s fault. As of this writing, I can no longer see the homepage of my Opera Unite account at my primary daytime computer, but when I click on the “Photo Sharing” service, those photos pop up. So, I don’t know if some parts of Opera Unite is down or something – I was able to see my homepage of my Opera Unite yesterday …

Also, when I try to access the files I allowed it to share from home, those files are now unavailable because the “device (is) unavailable.” Now this one is my fault.

Lesson learned: the hosting machine must have Opera Unite up and running for the files to be shared (having the computer on and ready is not enough) and the receiving end can then insert the share link in any browser to access those files.

But that’s a problem for me. I’ve never used Opera before two days ago, when I heard about Unite, and I downloaded it on a whim.

I’ll keep trying, however, because I really like the ability to easily share content with someone by giving them a URL link. And at least the photo sharing service looks cool – so far, the media player service seems lackluster because though I can stream my home MP3 collection anywhere, I can’t shuffle it all. I can only shuffle each folder (album) at a time. Sigh. I bet that’s improved, soon, though for now – though I plan on not giving up on Opera Unite, I think I’m also going to check out DropBox (mac) and Windows Mesh thingy. I’ll fall in love with one solution, soon enough, and then, I will be one synced puppy … or something.

P.S. I’m also too stupid to know how to rename folders in Google Reader. Thankfully, Elena Santos ain’t.

Which is sad, because Kim found me on MySpace but now we spend all of our time on Facebook and … well, Kim only found me on MySpace because I was smart enough to use my own name and she could have also found me through www.brandonmoeller.com but, I mean, well … man! I’m a geek.

Meanwhile, Facebook is gobbling up the audience of people who want to connect to their friends on a social network. It could easily be replaced by the next big thing that also can’t figure out how to make money, but that’s not Twitter because Twitter is useless.

Jeff, over at Broken Record, argues that MySpace should concentrate on what Facebook never figured out how to do: Music and performance art.

“I’ve thought for a while now that MySpace should consider focusing primarily on entertainment – movies, music, comedians, etc. There is a real opportunity to fill a void, particularly since they have the interface and the fan base already in place. It’s doubtful they’ll follow that advice, but a site with the size and resources of MySpace could dominate online music.”

I agree with Jeff (and I commented on his blog) … but one of the reasons I dread touching MySpace is because it allows its users to do some very uncouth (rhymes with Sonic Youth) things, like installing way too many bandwidth-clogging graphics and cringe-worthy design.

MySpace: A place for music logo.

I guess we’ll just have to see if Murdoch’s MySpace can recover from its downhill trend in a Facebook world … and what it might mean for local indie artists like Chase Hamblin, who doesn’t really have his new album online and available anywhere but MySpace and a handful of brick and mortar shops in Houston. Sigh. And it’s too bad, I’d order his new one if I could, but don’t really wanna hear it thru MySpace at this moment. And, I won’t be able to make Friday’s CD release party at the Continental Club.

Amazing. And, that’s just the comic book they leaked to announce it.

Now, I’m not saying Google is the best thing to ever happen to this industry.

But, yet again, they just ratcheted it up a notch.

In the meanwhile, I bet she’s either been thinking to herself:

A.) He’s not really thrilled with the gift

B.) He’s secretly planning to return it, get the cash and land himself two adult Frontosas.

C.) He loves it. He just doesn’t wanna let on he expects such great gifts.

D.) I shoulda boughta Coach purse for myself, instead.

Well, no matter what she was thinking, the answer is “C” and here is a test run of the new camera vs. the camera I already have – yet, as she so tenderly noted: “Everytime you use the damn thing, you say how much you hate it.”

Let’s take a look …

The first Samsung shot.

The first Kodak shot.

Yup. Hands down, the new one’s better. And, it doesn’t take several seconds to try to auto focus and decide if it wants to shoot or not. Hooray!

There are at least 25 memorable swimsuit moments.

Kelsey Grammaer is the producer of Medium, a decent show that involves this woman who dreams the future and who got mad at her husband for knowing something he didn’t want to tell her because he’s a nice guy.

Jay Leno still reads headlines.

Robert Downey Jr. is Iron Man.

Niles was instantly attracted to Daphne when they first met on the Lifetime 11 p.m. rerun.

Powered by ScribeFire.

A recent stroll at the mall with that certain someone resulted in a conversation about video games. I’m not talking about those bloody adrenaline-rushing 3-D spectacles of modern programming and cross-marketing that now passes for the genre. I’m talkin’ dunh dunh dunh dunh dunh Dunh, DUNH. Doo-doo Doo-doo Doo-doo. Nintendo. The original. NES. What seemed like the sole reason for my existence during a good chunk of the more formative years.

Ah, yes. So I tried downloading the former NES Emulator I had on an old machine ages ago, but I’m glad it wouldn’t work on VISTA because who wants something called NESticle.

After finding a virtual NES java Web site, I stumbled upon NEStopia and this large collection of games. The version of Arkanoid is particularly rewarding because it has infinite lives coded right into to it to ensure hours of seamless fun.

I may never leave the house again.