Hey Brian, NearbyTweets is great

One thing I wished was that NearbyTweets could format nicely to a mobile device. I figured, "make it responsive." Shouldn't be too hard. So I appended some styles.

Since you're using jQuery:

1. go to nearbytweets.com
2. run the following snippet in your console (just attaching a stylesheet and simple bit of jQuery): $('head').append('<link rel="stylesheet" type="text/css" href="http://jonahgoldstein.com/poof/nearbytweets/nbt_mobile_styles.css"><script type="text/javascript" src="http://jonahgoldstein.com/poof/nearbytweets/nbt_mobile.js"></script>');
3. resize your browser window as narrow as you can. if everything loaded up correctly, it SHOULD trigger a @media set of styles optimized for the smaller format.

yay.

a couple things of note:

1. i hope you don't mind that i took some liberty with the logo, playing with the iconic map marker symbol.
2. since the tweets themselves couldn't be smushed into a div of consistent height at such a small width, i made them size to their content. this kills your nice tweet entry-animation that seems to count on a consistent height. i'd fix it if i could tinker with the JS.
3. since touch screens don't seem to deal well with divs that have internal scrolling (without lots of JS hacks), i decided to not limit the height of the container. now it resizes to the content... which means the footer needs to be pushed down manually given the architecture. that's the reason for the JS file that pushes it down on an interval. sloppy but functional. this could all be done more neatly with a little more planning.
4. to keep the tweets-over-map effect, i had to make the map grow as the tweets did. the map does not redraw however past a certain point unless the window is resized. also, the code is written so that the marker deals with the middle of the map, which is thrown way off. i believe the JS would have to be altered.

As a tiny backstory, I meandered to your blog and was energized by your recent post about being a social developer. I then came upon another post about your design decisions in NearbyTweets' second iteration. Cool. Good ideas.

I hope you take this little hack as a social developer tribute of sorts rather than a critique:)

peace, man

jonah
jonahgoldstein.com
@jgmakes

Update : 07/27/11 1:05AM

woah, you put it up right away:)

a few things:

1. without the following meta tag, mobile browers will still scale the page (so the @media styles won't kick in and it's all meaningless). add to your HEAD:

2. funny, you're loading the assets off my server. my JS relies on jquery, so load it afterwards. should keep the footer visible at the bottom.