I’m a TreeHugger fan, and have been for some time. They were the place to go for all things green for quite sometime, and they’re still relevant today.
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:
- This doesn’t address everything.
- Responsive images should likely be addressed via the server.
- A separate mobile site may be in order.
- 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 firstname.lastname@example.org.