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!
Very interested to see your final results. I have been playing with using Jquery to rewrite some of the TNEW styles myself. It seems tthe only way to really affect a codebase that i don't have access to. Much of the legwork you had to do seems like it could have been avoided by allowing clients to use local style sheets to control TNEW display.
Thanks Brien,
I just updated the test site links to our _QA_ instance....It just changed yesterday.
you can check it out for a preview with an Iphone, by going to mm.fairfieldtheatre.org
We do use 1 local style sheet, but this wasn't enough. Because TNEW isn't just divs and classes, and actually uses tables and hard coded styles, widths and column spans, even if i hosted the TNEW specific CSS file locally, and edited it to my needs, I wouldn't be able to create a mobile site.
So, i went to jquery to rewrite the DOM on the fly. If you look at my tnew_moble.js file, you'll see some of the tables i redo, and styles i remove.
If you aren't aware, you can set up tnew to include your own hosted header and footer, to wrap around your tnew application. and that you have full control over. jquery becomes necessary you modify the application rendering on the client.
It still isn't perfect, and i'm holding off on launching live till i get some more time to clean it up. Right now, i'm neck deep in too many other things! But I am looking to move forward with this. Feel free to re-use my code, and let me know if you get anywhere with it.
Hi James,
So given that TNEW uses tables and hard codes styles, Is it safe to say that using something like an adaptive CSS framework as a starting point theme for TNEW wouldn't work very well?
Maybe something like Less Framework (lessframework.com) or 320 and Up.
I'm thinking of going with something more adaptive for our main website in our next website version and would love to see this functionality extended to the TNEW side.
I'm new to TNEW so I don't know all it's limitations.
Tim
Tim, thanks for the link that is cool.
Not a bad idea Tim. I didn't think of it. But I have briefly explored adaptive CSS. you may want to take a look at http://960.gs/ too.
The TNEW limitations are tricky. And in the end, its a bit of a hack (all client side rewrites). I'm hesitant to put too much time into the area, especially if TNEW is considering a mobile format "sometime in the future."
There is also no way to plan for version changes affecting a customized mobile site...so any major overhaul is a gamble.
"...especially if TNEW is considering a mobile format "sometime in the future."
Perhaps an enhancement request that could be, or has been put forward by TNEW licencees? Our Director of Marketing is chomping at the bit for a mobile platform, and coordinating with the TNEW team would certainly be ideal here.
Duane
Funny, i don't remember it in the most recent request list...but i suppose that would get some serious votes.
Its been great to watch the TNEW team grow and develop great strategy over the past year. Purely from perspective, I think the TNEW team will push towards a mobile capable website, sooner than later. Its just where the web is going, and they seem to have some great foresight.
Are you able to share your current status with your mobile site? I see the mm.fairfieldtheatre.org site is still live and populated with events, looks very nice.
Cheers,
Nicholas
Nicholas,
I just caught this post by accident. I stopped Dev on this project and have moved to Carnegie Hall. But I hear FTC is going to be launching a new Drupal site very soon. :)
Thanks for the info. Congrats on the position at Carnegie Hall!
Best,
As I understand it this is supposed to be part of V. 4....which is slated to be released in 'late 2012'.
Jim