Thanks! The hidden nav is certainly a risk. The bumps on the bottom of the bar try to suggest it, but are very subtle. A major overhaul like this would involve some marketing efforts, and/or a NUX tutorial upon first launch. They'd lose that chunk of existing users who hate change, no matter what progress is made. I can picture the streams of tweet rage already...
Recommendations on clearer nav icons? Always seeking constructive feedback from people wiser than I.
Trying it out – UX is super fast, easily superior on both iOS and web. The confirmation email parsing doesn't seem to be working for the first few I've sent in. Feels kinda like filling out an expense report. Gonna run this side-by-side with TripIt on a road trip next week, and see if I actually end up using it. Thanks!
Sure, totally valid. I just built the site from scratch in simple HTML/CSS, so I figure this is a risk-free place to learn something new. I've been doing a lot of IA and product management for 18 months, so I'm catching up on the latest practices a bit.
Agreed. I shrunk the header on the content pages to remedy that a little, but I'm still learning about responsive design to accommodate 11", iPad and phone screens. Feedback appreciated.
Ha, thank you. I actually mapped out the existing app's "potential data" in a 51-slide Keynote before starting this, and the 11 iterations before it. Nobody will ever see that – it's just bones – but I hoped the thought process would show through a bit.
TripIt favorited my tweet to the link, but... that's it. I'm not really looking to join Concur. I'm just hoping they haven't quit on their loyal and loving users yet.
I changed it to :fixed and shrunk the header bar on content pages. Looks fine on the iPad. I need to learn more about responsive design principles, etc. before I rewrite it for phone resolutions.
That looks pretty good. Any plans for companion apps for other modes o' transport?
I didn't realize TripIt handled so much potential data, until I mapped out the whole app in Keynote to start this project. Credit where it's due – while I hate the existing app, it's still no small feat.
Ya, :fixed doesn't behave as intended there. I tried it out on a 15" MBP, 13" MBP, iPad, Cinema Display, and phones, so I've seen that it's pretty cramped. I'm not great at responsive design yet, but I'll mess with it. Any advice on getting the images and text to scale to smaller screens within their divs would be appreciated.
On that note, can't wait to see how Polygon.com is built.
For images, you can specify either multiple file types (load different resolutions with media queries), or use .SVG graphics (support is spotty in older browsers). Here are two handy guides: http://bit.ly/LzRkfN and http://bit.ly/MH1bjq.
For text, it depends on which part. For body text (paragraphs), the easiest thing is to have a percentage based container and change font-sizes based on break points with media queries (e.g. at a screen with min-width of 768px, change font to this size). Headers are a bit different, you can follow the same approach as paragraph text or, use something like FitText (http://fittextjs.com/).
Love your work. Hit me up at me@ryanglover.net if you need code help.
I am curious about this too. After disabling javascript and fiddling with this for about 1.5 minutes in Web Inspector I was able to get it to behave like the JS implementation reasonably reliably. It would only have required some CSS cleanup to move the icons etc. back into place properly.
Ah, I see. The problem is that I'm an idiot and was :fixing the wrong div. For some reason it was collapsing ingloriously upon itself. Must've been a 3 AM hackjob.
Also, I'm gonna shrink the header for all of the content pages. Good call.
Recommendations on clearer nav icons? Always seeking constructive feedback from people wiser than I.