Design/implement a mobile web experience

[estebistec]

This is not a trivial one... obviously for later.

Overview

It would be a good show if our site detected mobile user agents and provided a better targeted experience for those devices.

Tasks

• Decide on a mobile detection scheme. This may include the ability to manually select mobile vs. standard in case user-agent detection ever makes a mistake (in the wide world of ever new devices)
• Design layout of mobile experience. Because this experience should be target, it may be reasonable that our current one-page site becomes multiple pages for mobile (or rather has a really good navigation scheme for what would be a really long page for a mobile device).
• Implement design in mobile.css
• Implement user-agent detection and mobile/standard switching scheme

[juliaelman]

I'd love to be the design part of this if no one else wants a go! Not sure I know enough about detection schema to raise my hand to that one. I'd be happy to do some research though.

[estebistec]

I can work on the detection part. I had some vague ideas for the mobile design. Once the initial site deploy settles in and some small adjustments get out maybe we can compare notes on it. You can definitely take lead on it though if you like.

[juliaelman]

Let's touch base post lightning talks on Saturday!

[estebistec]

I've been looking around at user-agent middleware detection today. I'm not liking how many of them are trying to do too much on the django side (e.g., predict where your "mobile templates" live), and more or less none of them tell you if the UA is a tablet. I was hoping for one of the existing packages to simply do [1][2], tablets too, and set an attribute on the request for maximum flexibility.

So, I'm either going to see if I can use minimal parts from [3] or just write the simple middleware based on [1][2] directly in our site. If I get un-lazy then I would figure our how to detect tablets specifically, but I think to start with it's okay if those UA's get the standard site. wurfl [4] is a possibility too, but may be overkill for simple mobile/tablet detection.

[1] http://mobiforge.com/developing/story/build-a-mobile-and-desktop-friendly-application-django-15-minutes
[2] http://www.entzeroth.com/code - His mobile post updates the UA string list a bit
[3] https://github.com/gregmuellegger/django-mobile
[4] http://celljam.net/

[estebistec]

Julia, you briefly showed me a mobile design at our last meetup. Is there any chance you could scan that in and link/attach it here? Maybe based on that I can have mobile-detection in place and we could be down to dev'ing the specific templates/views that would be needed for the design.

[juliaelman]

Ok! Here is the scan of my silly drawing. Also, when I say, "What's the deal with maps on phones?" I think that I was wanting to do some research on how you create maps that interact with different devices OR if google maps works the same on any mobile device. I feel like there is more to it and will try to do some reading before the meeting.

Also, I remember that we agreed to have them link directly to the meetup.com site instead of creating a detail page about our upcoming event. That is what 3a signifies.

And sorry about the bleed through writing!!!

[estebistec]

I'm going to have something basic worked out (probably on a branch) later today or this evening.

[estebistec]

Julie, I created a branch called "mobile" [1], added mobile detection, and updated the views to render the proper templates. So, to implement the mobile site the only files that need editing now are those templates [2] and the mobile CSS [3] which they use.

Fair warning: the mobile pages are very ugly right now. I merely placed the relevant markup to get them started and didn't really style them at all. That's basically how far I got.

To work with this branch:

git checkout -b mobile origin/mobile

When you run locally from the branch, use something like Firefox's user-agent switcher add-on to trigger the mobile site. If you have any trouble running it, let me know.

[1] https://github.com/pythonkc/pythonkc.com/tree/mobile
[2] https://github.com/pythonkc/pythonkc.com/tree/mobile/pythonkc_site/templates/mobile
[3[ https://github.com/pythonkc/pythonkc.com/blob/mobile/pythonkc_site/static/mobile.css