At some point, I engaged @TreeHugger in a few brief exchanges about accessing their site on mobile (as well concerns). I’m sure one could find this information via a cache of twistory. My primary issue was that there was no mobile site. No mobile consideration. It was a typical allow-safari-to-scale-everything-down mobile experience. Which, while technically accessible, isn’t a very enjoyable or functional experience. The MAIN annoyance – inadvertently scrolling to the side while trying to scroll up or down – as I’m zoomed in.

The initial response was – we have an iPhone app. And while I think that’s awesome (srsly!), I didn’t want an iOS native app TreeHugger. I just wanted my web TreeHugger to work on my phone in a pleasurable fashion. I was reassured that the redesign was coming and to stay tuned. Which I did! I even checked back in with them from time to time to see how it was coming along. And at long last – the redesign debuted!

You should check it out http://beta.treehugger.com – it is a nice improvement over the original one. There is less going on (though still white-space challenged), and the content is decidedly more front and center. Huzzah!

My first experience with the new design was a let down, for I found out about it at about six in the morning while sipping coffee on the couch and browsing the infonet on my iPhone. I was so excited to see the email with the news of the redesign launch! Yet when I clicked, I got the same scaled down version. The same non-responsive/desktop-first experience. I had a non-warm-fuzzy reaction.

I engaged in a bit more twiscussion. Then it occurred to me: I should stop whining and start doing. So I picked an article/page from the new design, and made a mobile first version. Aren’t you so proud of me? Or you hate me. The internet is like that. I’ve accepted this.

A few things:

1. This doesn’t address everything.
2. Responsive images should likely be addressed via the server.
3. A separate mobile site may be in order.
4. This didn’t receive a ton of design love, it’s to demonstrate the concept.

The page in question: http://beta.treehugger.com/green-architecture/backyard-house-built-recycled-barnboards.html. The original original version (see – it is better). And the new proof: treehugger.folktrash.com.

Also, everything is up on the github. A few more things:

• This doesn’t address everything.
• It does provide an experience for mobile and the desktop with very little effort.
• I’d likely recommend also putting the first paragraph before the first photo in the article in the DOM.
• As well as making the Featured, Related, and Popular click to expand accordions for mobile.
• Also, the “skyscraper” ad format isn’t a good fit for mobile in general. Ditch them altogether.
• We didn’t include the conditional style sheet reference for ie, but yeah, that’s how to deal with IE.

So what DID this example do?

• Moved the nav and search to after the article. Content first!
• Used the magic of CSS to position said moveds back to the top. Srsly, check to see.
• Added a small bit of js to demonstrated mobile & desktop app. Basically – load in only yepnope in the head, and inline – load in a file called load.js which uses yepnope to load in a sniffer (or you could use modernizer), run some JS common to mobile and desktop, and then based on a mobile boolean, load in either desktop or mobile specific js bits.
• Currently in JS the only code is in the mobile branch: the scrollTo and the orientation fix.
• We also opted for the conditionally comments html tags for the ie specific css rules.
• No I didn’t style the footer.
• This is just to show that it’s possible.

My company Tag Creative and I would be absolutely thrilled to help consult with TreeHugger and bring their vibrant community up to date with a truly accessible, future friendly, mobile first, and responsive web presence.

Oh, and if you want to send hate mail, it should go to folktrash@gmail.com.

Sure, I own some clothes. A few pair of shoes. Some dishes for the family. A couch even. A few beds. An iron. Some tools. But they’re all incidental to the few cherished possessions listed first. I even own a condominium, but that’s another story.

I don’t own books anymore. I really cherished books for a long while. Most of my life I guess. I owned a bookcase just for putting the books in. I still like stories and information. Love even. I no longer need to lug ideas around with me physically. Information is super in love with digital. My iPad can hold more books than all the ones I’ve ever own in my entire life combined. Times two even (probably more).

Some things aren’t yet digitize-able. But movies, books, financials, and most communication surely are. To which I take great advantage. Or try to.

I get really into trying to. Trying to be efficient. Save time on some things, to spend it in others. Imagine all the time we’ve wasted! I still waste a lot of time. It’s a process. But it isn’t on paying bills.

My personality tends toward extremism. I like to marinate. Sometimes literally, to my own detriment. But learning, absorbing, or whatever you call it, is addicting. One short hand for this I’ve come to is this modified axiom:

Give a man a fish, feed him for a day. Teach a man to fish, feed him for a lifetime. Teach him what it means to fish, feed everyone.

This is where is starts to get complicated before it gets simple again.

What does it mean to fish? It’s a harder question than it might at first appear. In the simplest form, it is applying technology to a food problem. But as we keep zooming out to get a broader picture. More context. Input Stephanie. We need to learn about more things.

There aren’t just fish. There are kinds of fish. And other animals. And plants in that ocean. There is a teeming biosphere just in that one fishing hole. And there isn’t just the one fisherman. There is his family. The region. The human race. And there are seasons, tides, chemistry, and our star.

Each context contains an inexhaustible amount of data.

But us sapiens are good at pattern recognition. So an additional strategy to trying to learn every single data there are to learn is to find some simple truths, theories, laws, whatever – that describe what’s going on. That seem to hold true every time we examine ourselves and our ideas or beliefs about whatever is it we’re examining at the moment.

Does this still make sense? Does this still hold true? Are there any new data which may change the validity of this?

A short-hand for this infinite learning phenomenon is the scientific method.

It is not a belief system. It is a doubt system. It is also the best tool we have yet for learning about the world in which we find ourselves. The Internet is a huge help in this endeavor. It helps us collect and analyze all our data.

New truths are bound to emerge. And emerge to a point which not believing in them is not a sane response. On par with not believing in gravity, for example. We can debate and research and theorize and refine, but the apple will fall.

Some things are true. Objectively true insomuch as we are able to discern. Our camera only has the megapixel resolution that it has though. Some ideas require a firmare update in order to install.

I think that’s where we are now. The reason that it feels like now is a special moment in history is because a) every moment in history is special. Now is always now. and b) because this particular now is significant.

The human race is on the precipice of undeniable realization of truth. New value systems will emerge. A new societal model will be required. One we will create together as we need it.

Take the idea of economy. An economic system. It requires a currency of exchange. And the only rational currency is energy. Or one based on energy. Not the scarcity or perceived scarcity of some particular mineral. That’s it. There’s no arguing it. It’s just the way it is. It’s just the universe we find ourselves in. The matter and energy exchange is the only game in town.

Or take the idea of ownership. It’s just an idea. It’s just a thing we made up. It seemed reasonable at the time, but as we learn more and more, it’s obvious that ownership isn’t real. Take my iPhone, one of my prized possessions. What happens to it in 2 years? Hopefully there is an attempt made to reuse it’s materials (it’s the energy conscious thing to do). What about 10 years? 100? A million? A billion? At some point its entire form will be literally recycled into other materials and forms, which do other things. Are part of other processes.

What does it mean that I owned it for 2 of those billion years? Those particular particles. That particular bit of energy incarnate in that particular matter. It doesn’t mean anything. We are slowly realizing this. Currently the only thing we collectively agree is that owning another person is “wrong.”

This is normal for us. We can only learn a new idea when it relates to us. Oh, right, you can’t own a person. This agreement is recent in most contexts. A mere moment ago geologically. And right this instant cosmologically.

Owning animals of a certain sentience is considered questionable. And every day we begin to understand the nuanced intelligence of more and more of the forms of life which inhabit this planet with us. That boundary will extend further.

It reminds me of the fervor surrounding the mosque being build “near” ground zero. How close is too close? Where is the edge of too close? The answer, the truth, was and is that it was a fallacious objection. Born out of emotional response. And totally understandable. But ridicant nonetheless.

It’s almost irony, perhaps, that as we come to understand the holistic-ness of everything and our place within it, we are mortal. We struggle to learn and pass on our learnings, make emotional connections, love, be loved, laugh, express, etc…

We are the universe coming to know itself. Along with all life. And the planets. And the stars. All through a variety of journeys, each infinitely unique. There is no experience of the universe that is exactly the same as mine. It is my blessing and my curse. Perhaps more irony.

There is no way that I can prove to myself with any rational satisfaction that this entire phenomenon I am experiencing is NOT a mental blip in the mind of a comatose drooling patient. But what else am I going to do?

I choose to believe that this is a real world. A real keyboard. A real wife. Real sunlight. A real urge to go to the bathroom. And use my mind to understand it. The universe and the need to go to the bathroom. I’ve heard of that as body wisdom.

I am not a Communist. And there isn’t private property. There isn’t even property. Not really.

OMGPonies. I got to participate in this years 10k contest sponsored by Mix Online and An Event Apart. Erik Hicks, Seattleite developer, helped with the YQL & storage bits. My employer, Tag Creative, was super supportive of the Say When? project, and helped pushed to make it even better. It was basically a love-fest here in Pioneer Square.

Try it here. Guess the year the film was released.

The first thing we learned was that guessing the exact year a film was released is harder than you think. Originally, the scoring approach was going to be X of N movies you guessed correctly, and we’d give you a percentage correct. Then we gave a random point award (from within a range) based on how many years off your guess was. Exactly correct, being the most possible points and so on; And it worked.

Once we decided we needed a timer, we inverted the scoring mechanism to a subtractive – not additive – model. Each question has a total maximum value, which starts counting down. If you guess correctly, you get all those points, and we remove points in larger amounts for increased inaccuracy. Also, don’t forget, use onkeydown not onkeypress.

There are three known items that are hard to deal with in Say When? Especially in under 10k The first, remakes. This seems to be due to the now nature of the web.

If the movie we try to fetch is The Karate Kid, the trailer we get is for the recent remake, not the original. We tried appending the release year to the request, but that actually caused us to get more incorrect results than without.

A second item is video content that is not authorized for external embedding, and/or has no mobile version; Yes, Say When? works on mobile, try it! There’s nothing we can do about this.

And then there’s just plain random sh!t. Sometimes we get weird video responses. Even when pinging the You Tube API with the movie title and the word trailer, you can get some weird responses.

The solution to these – given the size and time constraints – was the skip button. This allows players to just bypass anything that’s funky.

The basic application flow is thus. A player hits Say When? We pick a random year from within a range, currently set to 1970 – 2011. We throw that year to a bit of YQL sitting out in cyberspace (yay erik!) which finds, parses, and returns a list of movies from that year in film page on wikipedia.

We then select a random movie from that list, append the word trailer to it, and send it to the You Tube API. The response is a an ID. We use that to build an embed, start the timer, and play it.

That’s basically it.

Dear Jules Winnfield. Almost every time I read the the Say When? brand header, I think of Samuel Jackson in Pulp Fiction and the infamous What does Marcellus Wallace look like? (great short texty version) – post foot massage conversation – in which he says, among many other gloriously delivered lines, “Say what again.”

I always hear that as “Say when again.” and if anyone knows Samuel Jackson, and he’d like to contribute a few minutes for a recording of that a la go the f to sleep – well, that would be awesome.

While we’re at it – when IE6 does eventually die, who’s going to do the find and replace on all the blog posts from IE6 to IE7, then IE7 to IE8, etc.?

Exactly. The simple fact is, this isn’t about ie6. No, srsly, it isn’t.

Remember when Chrome happened? And Firefox before that? And Safari before that? The browser wars are over. Thanks to @zeldman and large, vocal, mild-mannered standarista crew, we have a stable landscape upon which new technology and new agents (browsers) can be born.

And this is a fantastic way for it to be.

This is why feature (and not agent) detection is now a viable approach. This is why things like html5 reset and boilerplate can thrive in this era of html5 in which we find ourselves at this moment. And maybe to some extent the wonderful phenomenon of git and github. And node. The web is electric again.

We are about to be swallowed (or hugged perhaps?) by the proliferation of the web to such a diverse sea of devices upon which people (and machines!) will interact as to make now the most exciting time to ever be in this business.

There will always be old agents (browsers) that require data to justify support. Just as there will always be new agents that fit that same bill.

The phenomenon of ie6 is not some hold over relic from how things used to be, it is a ever-present manifestation how how the web is.

It is vital. It is change. It is stimulating. And it is awesome.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<!--[if IE 6 ]><html lang="en" class="ie6 "><![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie7 "><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8 "><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9 "><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--[endif]-->
<head>
	<link rel="stylesheet" href="style.css" />
	<!--[if (lt IE 9) & (!IEMobile) ]>
		<link rel="stylesheet" href="ie-reset.css" />
	<![endif]-->
</head>
<body></body>
</html>

Wow. What about the CSS?

1
2
3
4
5
6
7
8
9
10

/*mobile: base layout given to all*/
body {background:url(iphone4-bg.png);}
 
/*desktop-media-query*/
@media only screen and (min-device-width:961px) {
 
/*all your iefixes go in this file too!
.ie6 body * {zoom:1;}
 
}

So what’s with that ie-reset.css stylesheet?

That’s the one compromise. It seems a reasonable concession to us. Do yourself a favor, and maintain a one-way relationship between the contents of the desktop media-query to the ie-reset stylesheet. Then you just copy > select all > and paste. It’s a pain, but way better than the alternatives.

What about *allthatsh!t* you didn’t include?

It’s true. You’re right. I didn’t include html5.js or modernizer or the no-js classname on the html tag. I know, I should die the firey hot death of a thousand suns. I also didn’t include a title tag. Or yepnope. Or a css reset. Or microjs.com references. GA code with the async hotness. Or the apple save-to-home-screen icon reference. Or the favicon – how could I omit the favicon link?! Or the charset meta tag. Or the title and description meta tags. I am a d-Bag. Or what about JqUERY!? Or markup in the body tag! All of which (sans modernizr and jQuery) are all in my personal starter pack.

Maybe if people get all angry and hateful, I’ll post the proper files on github.

But for now this demonstrates the technique.

1. Deliver mobile style information.

2. Augment for desktop via media-queries.

3. And copy and paste to fix IE.

Done, done, and done. Srsly, that’s all there is.

Go as crazy as you wanna with different resolution (grouped) fish-ladder steps. You’re welcome internet. Back to building fun things.

If you’re interested please email me. And actually, even if you’re not, please email me and let me know that as well. Thanks.

Midcentury Pinkish/ Red couch circa 1960’s, $100

• 2 piece sectional.
• 9 feet long, 3 feet wide.
• Ad link: soon

Midcentury Stereo/ Record Player, $30

• General Electric brand.
• Radio works, record player needs work.
• Good shape.
• Nice piece.
• Ad link: soon

Three Midcentury side tables, $10 each, $20 all three

• Two tiered.
• Dark color.
• Ad link: http://

Red Director chair, $10

• Leather and metal.
• Great shape.
• Ad link: http://

Red side table or plant table, $5

• Three feet tall (3′).
• Wood. Super clean.
• Ad link: http://

Brown suede bean bag cude, $20

• About one foot square.
• Super versatile. Use as an ottoman, kid chair, or minimalist handy seat.
• Ad link: http://

Mid century white lamp, $15

• Comes with CLF bulb.
• Great shape, including shade.
• Ad link: http://

Midcentury black Eames replica, $25

• Custom back cushion.
• Low profile/sleek.
• Great shape.
• Ad link: http://

1950’s Yellow velvet bench, $20

• I found this at an antique store.
• Low profile/sleek.
• One leg is a little loose and needs work.
• Super cute piece.
• Ad link: http://

Looking so submit feedback, bugs, or feature requests? We’re on Get Satisfaction.

The first version went from idea to completed product in five days. You can find this original version at http://glada.folktrash.com/1.0/.

We’ve since done some code refactoring and added the “custom locations” feature. You can find this version at http://glada.folktrash.com/2.0/.

And we’ll always keep the latest instance at http://glada.folktrash.com/.

Gary Bedell busted out the Now. Here. This! identity, helped with the button styles, and is generally awesome.

We’re currently aggregating data from Twitter, Flickr, Instagram and Foursquare. Got a service you’d like supported? Email me. We’ve got a road map too:

• UI support for Android.
• UI support for desktops.
• Additional services.
• Service configuration (pick which 4 to show by default).
• Services layer to allow for real-time data updates.
• Ability to add registered users (allows oauth to services to get more data (e.g. 4s friend data), and more services (e.g. Facebook is closed without auth).
• Produce a more formal UI which incorporates new features (registration, service authentication and configuration, friends, etc.).
• Develop native OS app containers which talk to existing web service (would provide more device integration, but keep the SOA).
• Add ability for users to throw geo-data into their own streams (Twitter, Flickr, Delicious/Pinboard/Zoo, Tumblr, Posterous, Facebook, etc.).
• Add ability for users to provide feedback about geo-data (save, like, dislike, etc).
• Allow users to broadcast their position to the network (e.g. at a pho restaurant, see that someone else is there who’s not friend but is sharing, can directly browse their public geo-data which they’ve acted upon (liked, saved, shared, etc.).

Additional Dev Notes:

• We’re currently only accessing public API data which requires no authentication by the user.
• As this uses the Geo-Loc API, it’s only supported in agents which support that, so webkit (chrome & safari) and latest Firefox.
• The app falls back to a “Downtown Seattle” location for other agents (e.g. IE), but the UI is currently baked to iOS.
• Recommend we try user registration, service authentication and configuration on desktops first.
• Having the data update in real-time is where it gets more interesting. We should use web-sockets for this and push the polling to the server.

To start again at the beginning.

As may be a common scenario for independently owned and operated small businesses, the identity wasn’t at the top of the list of business concerns. As we began to define what exactly the purpose of the web presence was and how it fit into existing efforts, it became clear we needed to put into words the essence of Sunshine Charlie. It need the brand stated, without fluff, without pretense, and with an acknowledgment of the true personality of the business.

After a iterative process of research, competitive analysis, word exercises, and “hey, i like this” emails, we arrived at the definitive Sunshine Charlie  brand statement:

Sunshine Charlie, simple authentic stories.

This was what Sunshine Charlie was all about. Simplicity; Photographs that capture the best of how clients really are. Authenticity; The best WYSIWYG has to offer. No ego, bullshit, or other costly constructs. And Stories; Each moment captured in photograph tells a story. The experience of working with Sunshine Charlie leaves an emotional memory of the story of what it was like.

We need the logo now.

As must also be commonplace, time was a huge factor. The business was already taking off. We needed business cards. Promotional materials. A website. Gift certificates. HTML email templates. Hurry! In accordance with the agreed brand distillation and competitive analysis results – a classic design aesthetic seemed the most honest and differentiable. Say more by saying less. Let the work speak for itself. Allow a simple emotional experience plant a seed that can grow into a brand evangelist later. We’re not looking for overnight success. Just a modest trend upward.

Sunshine Charlie in logomark form!

Garamond seemed to have the best-in-class vibe we were looking for. A classic serif, with a breadth of family, that just gets out of the way. And for color, black on white, with subtle grey distinction for the brand statement.

We got client approval and moved rapidly into a limited number of high quality business paper products. Business cards, postcards for promotion, and gift certificates to encourage client loyalty. We love Moo. Their product set is a great fit for Sunshine Charlie. Quality products, ecologically responsible, and a great web experience. And they call their periodic emails the Moosletter. They were a great fit.

Furthermore Moo offers an array of accessories that go with these products all with the same snap. Card holders, stickers, and a shopping experience any web monkey would be proud of. We had found our business paper provider.

A client partner is all you need.

Sunshine Charlie is a fantastic client. We work well together as partners, not as person-with-money and desperate vendor. As a result, the farther along in the process we get, the more we come across big problems we don’t have to worry about. Decisions that seem obvious right at that time when you don’t have time to make non-obvious decisions.

The iterative website comping process was a natural extension of the existing work we’d done together previously.

The simple color of the identity lent itself to the web instance in a way that stays right in line with the brand experience. Be yourself, be simple, and tell a story. The story is in the voice of the writing and the photography work. The website in this case is earning an A+ if it gets out of the way and let’s people interact with the work and the content.

Our early competitive analysis was most helpful while translating the brand to the web. We reached consensus regarding why people were at the site and who might they be. The navigation basically wrote itself. The portfolio – show me the work. The blog – tell me your story. And pricing – everyone wants to know. Add to that some contact information and some terms regarding the kind of arrangement that goes on between client and photographer, and you’ve got a simple hierarchy which should get people to the content they’re after.

Connecting the tubes.

Sunshine Charlie is a phenomenal photographer. And a great writer, social facilitator, and authentic individual. And by virtue of us working as their technologist, it stands that maybe Sunshine Charlie isn’t a web developer. And that’s okay. In fact, thank goodness everyone doesn’t want to learn all this stuff. It’s how we offer value.

So we need a solution that allows a tech-friendly-but-non-expert maintain their own web presence. And for this WordPress fits the bill nicely. Plus we have a history of experience doing WordPress integrations. We use Dreamhost. We find them to be quite fantastic.

With the host and CMS decisions made there comes the question – what about the photographs? WordPress is many things to many people, but one thing it is not is a photo management solution. Luckily, we happen to be alive right now, and Flickr exists and is a great photo management solution. It’s off-site and redundant so Sunshine Charlie gets data security, it’s got an API to pull our data out, and as a bonus, it has a flourishing community which can serve as another potential business channel.

Put the frosting on the cupcake.

When Sunshine Charlie publishes a new blog post out goes a tweet and a status update to the Sunshine Charlie fan page. The website is theirs to manage, and represents the brand online; All other networks and presences are an extension of sunshinecharlie.com. It comes with a SlickrFlickr plugin instance which keeps photo management where it belongs, at Flickr. It comes with a Google Analytics integration so they can better make business decisions. It comes with Google’s Pagespeed Apache module enabled to give better performance. It comes with the Google Application suite running off the domain which keeps email (and other document) management where it belongs, at Gmail.

The point isn’t to build everything from scratch. The point is to provide compelling solutions that provide value to the business and the their customers. We think we’ve done just that.

A strange inversion.

It may well be worth noting that our design process resulted in a solution transcends typical photographer websites. Of you look out at the photographer landscape, there is a pattern. A “portfolio” of the work done with flash, and “the blog” implemented with a variety of solutions, mostly via photographer.someservice.com. This manifests as photographer homepages with a click here for the blog and click here for the portfolio decision with no easy way to go between the two experiences. And the two experiences are always different and incur some brand dilution.

We feel like the solution we provided for Sunshine Charlie is elegant, functional, and transcends some of the typical versions of what photographers out there are doing. We found a way to integrate the portfolio with the website.