Has anyone out there found a crafty way of implementing a TNEW mobile website?
I'm open to all thoughts on the subject, but honestly, i'm having a holiday weekend hangover, and not thinking very clearly;
We use sudo-dynamic headers and footers included to our TNEW template from our content site, but i can't really do any server side scripting to get the user agent. 1 thought would be to do a javascript detection to load different Style Sheets, which is probably the best route.
then comes actually writing the style sheet...
Thoughts or comments anyone?
James
UPDATE:
Due to the lack of response, I thought i'd just take a stab at it! So, today I did. Here is what i've discovered:
1: It IS possible, but it ain't gonna be easy.
2: I fully expect limited functionality due to the complications. (shooting for a transaction path only)
Javascript is your friend; There is the age old argument of Who disables javascript? - my opinion, not many, and if they do, they're generally screwed on the web....
What i've done so far:
First off, javascript will detect the user agent and load the appropiate code; Right now, i'm simply toggling 2 different style sheets. Simple enough right! Well, once i dug into the structure of TNEW's HTML, I found selecting the proper elements rather difficult. there are many classes used, but some of the unique elements don't have unique IDs attached...
So i tried the nested css approach....fail
Some pages have 1 button some have 2, so i couldn't always hide button 1, for example.
This is where we need to get into page specific style sheets, loaded with javascript, based on user agent and current page.
Next issue: Tables!!!
Oh, the joy! I still haven't worked this out. The cart and checkout page display selected seats in a table (two/three actually). by default they're too wide for an iphone. First i managed to hide some cells/columns that aren't exactly necessary - but it didn't work out too well, as they all don't line up right.
Then, i realized how much inline CSS was on the tables, so i stripped it with jquery. That helped, but didn't solve the problem, for good.
I'm working on converting the tables to divs, but that too is pretty tricky, and i'm yet to work it out successfully.
Anyways, thats the update for all you lurkers. Back to the code.
ANOTHER UPDATE:
So, 1 full days work, (pretty much), and i've almost got it complete!!! All thats left is a little polishing off, and a few exception tweaks for good measure.
I worked out the tables, and it all fits in nice nice. I managed to keep it to 1 stylesheet per user agent, with some conditional javascript. I had to do some fancy :nth().remove stuff on the tables to get what i was looking for.
God bless jquery. with 1 line of code, i removed all inline styles from a given tag, then wrote my own css style to the nested element accordingly.
Keep an eye on this thread for a demo link soon!
Wow - That's pretty cool, James! Thanks for sharing!As Dave mentioned, UI is a big deal and we're the first to acknowledge that what you're working with was not designed with mobile in mind, strictly old-school computer monitors -- Mobile's been a hot topic round the TNEW (virtual) watercooler lately - and while I can't say precisely when we may go mobile, we are looking at taking some TNEW functionality to phones in the future.Please keep us posted concerning your future experiments! :)H
Thanks Heather!
I get the whole UI discussion, but i'm curious to know what people define as the "Big Deal"? I kinda see it as pretty cut and dry. Make it work fast, and user friendly. Big buttons for fat fingers. vertical scrolling only. cut out all the fancy UI rich web desktop stuff and get to the point.
Thats not to say i don't believe in design either; I do want to spend some more time styling these pages more for mobile BUT the very basics are done, and they're here for you to see!
I'm open to all comments suggestions criticism and the like. The only caveat here is you need an iPhone or iPod Touch (unless you know how to fake your user agent). I'm yet to test (or detect) android devices, and all the rest go to the regular website.
you can try this, but Firefox doesn't render all the CSS
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
Okay, so iOS users: Our TEST mobile Content site, which will link you to the TEST TNEW mobile site.
http://fairfieldtheatre.org/mm/ftc/
(typically our mobile site is m.fairfieldtheatre.org - i have mm.fairfieldtheatre.org propagating for testing.)
Again, i'd love to get any feedback!
Through a conversation with Don Njad, it was mentioned actually sharing the development on this project. Too bad the forum doesn't do code highlighting (hint hint)...
Anyways, I added to the <head> section of my TNEW include the following:
See the linked files for the rest of the code.
<script type="text/javascript">
//User Agent devices to switch to the mobile site
var mobileDevice = "iphone";
//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();
//If it is an approved mobile device, load the correct mobile js and css
if (uagent.search(mobileDevice) > -1){
document.write('<link rel="stylesheet" href="//fairfieldtheatre.org/inc/tnew/_QA_/css/ios.css" type="text/css" media="screen" />');
document.write('<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />');
document.write('\u003cscript language=\u0022javascript\u0022 src=\u0022http://fairfieldtheatre.org/inc/tnew/_QA_/js/tnew_mobile.js\u0022>\u003c/script>');
}else{
//load the standard website
document.write('<link id="ctl00_main" rel="stylesheet" href="http://fairfieldtheatre.org/inc/tnew/_QA_/css/main.css" type="text/css" media="screen" charset="utf-8" />');
document.write('<link id="ctl00_jqueryCss" href="../_css/ui.base.css" rel="stylesheet" type="text/css" />');
document.write('<link id="ctl00_mycss" href="../__org/FairfieldTheatre/_css/Fairfield.css" rel="stylesheet" type="text/css" />');
}
</script>
Thanks!