Rendering our web site on the iPhone



  • Along with the whole iPhone buzz, the business asked us to make sure our web site renders properly on iPhone Safari - not as it does on a normal browser, but without certain elements like the footer, and the layout should be slightly different.

    Since one of my unofficial roles is to consult on new projects, I suggested to the team that we use CSS to render it differently, using the following snippet in the header JSP head tag:

    <!-- existing -->

    <link media="all" href="browser.css" type="text/css" rel="stylesheet" />

    <!-- ...plus this new snippet -->

    <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

    A little proof-of-concept proved this to work. I also saw this as the perfect opportunity to remove table-based formatting scattered all over our views, and use DIVs.

    In the absence of our main stylist, the Java guy in charge of the project said that the team lacks the necessary CSS experience to do this properly. I advised they wait for the stylist to return, and then consult with her. Anyway, he's been coding web apps since the mid/late nineties, and I had to carry on with my own work.

    2 or 3 months later, and I take a peek at what he's been up to.

    This is what I find at the end of all our Struts Action classes:

    if (request.getHeader("User-Agent").toLowerCase().contains("iphone")) {
      return mapping.findForward("default.iphone");
    } else {
      return mapping.findForward("default");
    }

    All our JSPs have been duplicated to a new folder called iphone, and the tiles definitions have duplicated from "blah" to "blah.iphone". These new tiles definitions point to the copied JSPs.

    The dev manager, the Java team lead and I just shook our heads over a beer later that night.

    God forbid we get asked to do the same for the multitude of other devices out there...



  • @opyate said:

    <link media="only screen and (max-device-width: 480px)"
     

    That's really neat. Didn't know you could do that. Must be some CSS3 thing.







  • Personally, I hate it when a website tries to redirect me to a special iPhone version. Safari renders normal pages just fine, unless your page is full of Flash, in which case you should be fixing that instead. I don't understand why a footer is any less useful on an iPhone than elsewhere. Nobody every looks at the footers on a regular computer, so why would they on a mobile device?



  • @dcardani said:

    Safari renders normal pages just fine,
     

    True, for I have a McNut coworker and know about the device's capabilities, but do you enjoy reading TDWTF on your iPoon?



  •  @dcardani said:

    Personally, I hate it when a website tries to redirect me to a special iPhone version. Safari renders normal pages just fine, unless your page is full of Flash, in which case you should be fixing that instead. I don't understand why a footer is any less useful on an iPhone than elsewhere. Nobody every looks at the footers on a regular computer, so why would they on a mobile device?

    Safari might render normal webpages just fine, but isn't it even better if you get a special version optimized for a small screen?

    I always use Opera Mobile on my HTC Touch Diamond, which also render 99,9% of the web pages just fine. That doesn't mean I don't prefer the mobile versions of a lot of websites I go to with it.

     It might be less neccesairy for the iPhone because it has a larger screen (same resolution though iirc) though.



  • TRWTF is waiting until now to make your site iphone compatible.  It's almost as bad as waiting until now to make your app vista compatible.



  • @belgariontheking said:

    TRWTF is waiting until now to make your site iphone compatible.  It's almost as bad as waiting until now to make your app vista compatible.
    You shouldn't have to do that! All websites should conform to a standard, just like all applications. Once it's written it should work forever, regardless of whether it's made completely obsolete by new technologies and/or good design, no matter how many quirks it leverages to work!

    I'm still trying to get my apps Java-1.5–compatible. (I don't know about you but here we have at least two massive production apps whose vendors refuse to move beyond Java 1.4.)



  • @Welbog said:

    I'm still trying to get my apps Java-1.5–compatible. (I don't know about you but here we have at least two massive production apps whose vendors refuse to move beyond Java 1.4.)
    I'm still waiting for my client to tell me it's okay to write my webapps in 1.5. *groan*

    Once they decide it's okay to enter the world of 2004, it shouldn't be a huge ordeal to fix.



  • @belgariontheking said:

    I'm still waiting for my client to tell me it's okay to write my webapps in 1.5. *groan*
    I don't understand why they don't immediately move to the new version. So they'll get a few deprecation warnings, oh no. It's not like these are hard to fix. It's not like this is moving from VB6 to VB.NET. It's just minimal changes to the existing language with a whole mess of new stuff added in. Oh no! Surely this will break your codebase!



  • @Welbog said:

    @belgariontheking said:
    I'm still waiting for my client to tell me it's okay to write my webapps in 1.5. *groan*
    I don't understand why they don't immediately move to the new version. So they'll get a few deprecation warnings, oh no. It's not like these are hard to fix. It's not like this is moving from VB6 to VB.NET. It's just minimal changes to the existing language with a whole mess of new stuff added in. Oh no! Surely this will break your codebase!
    You remember how long it took me to get my disk quota increased on the QA server, right?  (the better part of a week for those who weren't there).  Imagine how long it would take to upgrade three environments which are comprised of 3 physical servers each.  There are multiple webapps housed on each server.  Add to that the mentality that "if it ain't broke, don't fix it" and the "cut costs" mentality.  I'm sure they haven't even dreamed of doing it for existing webapps.  If this were a brand new webapp right now, I might have a shot at 1.5.

    But it's all the same to me so meh.



  • @belgariontheking said:

    TRWTF is waiting until now to make your site iphone compatible.  It's almost as bad as waiting until now to make your app vista compatible.

    No, I waited until now to write this WTF.

     



  • @Welbog said:

    @belgariontheking said:

    I'm still waiting for my client to tell me it's okay to write my webapps in 1.5. *groan*
    I don't understand why they don't immediately move to the new version. So they'll get a few deprecation warnings, oh no. It's not like these are hard to fix. It's not like this is moving from VB6 to VB.NET. It's just minimal changes to the existing language with a whole mess of new stuff added in. Oh no! Surely this will break your codebase!

    One of Java's bad points (not removing @deprecated stuff) actually works in its favor, as old code will run in newer platforms. However, the newfangled IDEs usually trash the older models, with no way whatsoever to keep doing stuff "the old way".

    This is one of the main reasons my current employer resists the 1.5 jump: Java EE 5 shat all over the EJB spec, binning Entity Beans and turning Session Beans into something totally upside down. Oh, and not to mention "rpc/encoded not supported" errors found in the new WebServices standard... what happened to backwards compatibility? I know that at least one of our B2B apps would come down in flames because the other side uses rpc/encoded.

    That said, already existing apps can be placed on an 1.5 or 1.6 environment without any tweaking. But maintenance would be ugly if the older tools dissappear...


Log in to reply