Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Poxy Mobile Websites!

Options
  • 15-03-2013 2:21pm
    #1
    MeTV
    Registered Users Posts: 242 ✭✭


    This seems like as good a place as any for a rant about my experience trying to build my first site specifically targeted at mobile phones! It really is the single most infuriating thing I've attempted as a programmer, doubly so because it shouldn't be!

    Problem #1: For 15 years I've worked width fixed layouts so I've been able to define, to the pixel, where absolutely everything appears on screen. Working with variable layouts, there's no way of knowing the size of certain elements and, therefore, to position other elements relative to them. Even sizing fonts in areas with limited space is proving to be problematic.

    Problem #2: Programming for mobile phones is akin to taking a bajillion steps back into the dark ages of building websites. Using conditional CSS & JavaScript and JS hacks to work around the inconsistencies and shortcomings of browsers is something that was left behind years ago. And, those conditionals and hacks mean we're sending more data than we should need to to a device that we're supposed to be sending less data to. Learning which ones to use where is proving to be vastly time-consuming as well.

    Problem #3: Mobile browsers seem ridiculously badly bugged (I have a fixed position item that insists on jumping randomly about the screen, for example). These bugs only become apparent as I build and then require endless research to discover what the problem is and how to fix it. Again, I've been programming for proper browsers for 15 years, I know all their bugs and shortcomings by now and can instinctively work around the majority of them as I code.

    Problem #4: I can't test properly with just the one phone I have and even to test on that is a tedious process. With a proper browser, when trying to test something, all I need to do is write up my code, switch windows to my browser and refresh. With a phone, I have to write up my code, switch windows to my FTP programme, wait for the files to upload, switch my focus to my phone, refresh and then flip the orientation back and forth.

    And, so on and so forth! Assuming I ever get this bloody thing finished, my first mobile site is definitely going to be my last!

    As I said, I'm just ranting but, at the same time, if anyone has any practical advice, it would be appreciated :)


Comments

  • Options
    #2
    Creamy Goodness
    Registered Users Posts: 26,558 ✭✭✭✭Creamy Goodness


    #1 responsive design should be employed now a days to have a one site, looks good everywhere feel.

    #2 what conditional hacks? the majority (safari and android) browsers are actually quite decent. More data down the wire? what are we talking here a couple of kilobytes?

    #3 http://caniuse.com/

    if anything mobile sites are easier to design and develop as the two major players safari and android browsers are based off the same rendering engine and you don't have to deal with both webkit, gecko, MSIE and the fragmentation that is 6/7/8/9 in IE's that you'd be used to.


  • Options
    #3
    Fanny Cradock
    Registered Users Posts: 10,245 ✭✭✭✭Fanny Cradock


    Have you used FF's responsive design view (ctrl-shift-m)? The window is scalable so you can see exactly what is going on. It's very hand for seeing exactly when the new lines of code kick in. And there are Loads of tools out there. For example, http://www.responsinator.com/ is not bad and when used in Chrome will probably render more accurately than FF. I would recommend developing with these sorts of tools first and doing intermittent checks on your devices. It looks to me like you are only checking on your devices - which would be painful.

    I would also recommend setting your media queries over a staggered range of dimensions. This way you are actually only coding for 4 or so width ranges. People on iPhone see the same as people on a Galaxy etc, which would mean that your media query starts at 300px and ends at XXXpx while the next begins at XX1px and so on.

    I'm also a big fan of removing functionality. If the screen is too small then you can't have it. Tough titty.


  • Options
    #4
    KonFusion
    Moderators, Education Moderators, Technology & Internet Moderators Posts: 2,588 Mod ✭✭✭✭KonFusion


    If you're finding it this hard, you're doing it wrong. And I don't mean that in a snide way :)

    Look here, then here, then here. That should be almost everything you need.

    And yes, while those are responsive web resources, the principles are the same.

    As Creamy stated, you should be finding it easier, not harder.


  • Options
    #5
    MeTV
    Registered Users Posts: 242 ✭✭MeTV


    Thanks for all the replies, guys :)

    Doesn't seem like anyone's fully understood my main issue which is having to unlearn everything I've taught myself over the past 15 years and start from scratch with no real frame of reference.

    I've thrown this together to illustrate some of the specific problems I've come across so far such as, but not limited to:

    - The header not resizing on changing orientation.
    - Text overflowing out of elements of limited size.
    - The fixed position menu jumping about randomly (on my S3, anyway).
    - Absolutely positioning things exactly over a background image of variable size.
    - Horizontal scrolling of the page when the menu is open.

    Thanks for the Responsinator link by the way, handy for a quick glance at how things size on a handful of different phones but, unfortunately, it obviously doesn't replicate issues like 1, 3 & 5 above. And thanks for the links to all those resources. My heads fit to burst with all the reading I've done over the past 2 weeks, though! And none of it has gotten me a single step closer to getting my head around any of it.


  • Options
    #6
    Creamy Goodness
    Registered Users Posts: 26,558 ✭✭✭✭Creamy Goodness


    MeTV wrote: »
    Doesn't seem like anyone's fully understood my main issue which is having to unlearn everything I've taught myself over the past 15 years and start from scratch with no real frame of reference.

    We do, it's just that as developers we've come to realise that the day we stop learning is the day we retire. We don't unlearn anything it's stored with us to help us determine what paths to choose when tackling a specific problem.


  • Advertisement
  • Options
    #7
    KonFusion
    Moderators, Education Moderators, Technology & Internet Moderators Posts: 2,588 Mod ✭✭✭✭KonFusion


    This is also worth a gander on what not to do http://wtfmobileweb.com/ ;)

    Few really funny/wtf ones in there. The "... designed for use in portrait mode" being a favourite.


Advertisement