building a mobile website

Discussion in 'Web Design' started by Adam Jackson, Sep 2, 2012.

to remove all ads.
  1. Adam Jackson

    Adam Jackson New Member

    Messages:
    5
  2. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Media queries is the only "tool" you need to worry about for mobile enabled sites.
     
  3. Design Top

    Design Top Banned

    Messages:
    42
    If you want to build mobile website, here some application that maybe to try : mobdis.com, wapple.net, and gomobi.info. You can try one by one and choose the best according you.
     
  4. Adam Jackson

    Adam Jackson New Member

    Messages:
    5
    I checked out wapple.net and it looks like a good option, but I'm not very tech-savvy and might want a more user-friendly tool. What about bMobilized.com, mobify.com, or exai.com?
     
  5. Anjali Banerjee

    Anjali Banerjee New Member

    Messages:
    11
    bMobilized looks pretty easy to use.. you just enter your URL and you have a mobile website.

    I've also heard of the website builder, Exai.com, that she mentioned but didn't know they can convert your website into a mobile one. I was thinking of building my website with them anyway, so that's a definite plus.

    One that she didn't mention is MobiSiteGalore, a mobile website builder that guides you through the process with a quick start wizard and tutorial videos.
     
  6. leroy30

    leroy30 New Member

    Messages:
    485
  7. Roddy

    Roddy New Member

    Messages:
    117
    The problem with these online site builders is that they are much like Wordpress in that they generate huge amounts of code for even a simple page.

    Smart phone users are often depending on shaky cell phone connections and a lot of them are up against data limits.

    Creating a mobile version of a site is fairly straightforward using jQuery Mobile. The help file is comprehensive. You can convert it for use on desktops by centering the layout and setting a max-width.

    Customizing themes is done using the online theme roller.

    If you want to create a "one size fits all" website, Initializr is a good starting point for getting into responsive design. I use an adaption of this for sidebar and column layouts using blocks to get a better layout on tablets.
     
  8. Ennesus

    Ennesus New Member

    Messages:
    70
  9. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    its all about the media queries. seriously.
    one html, one css, media queries.

    its not that hard, and if you do it yourself you know whats going on rather than these blanket coverage and extreme generic layouts that happen when you automate the process.

    initializr is a good staring point I'd agree. Ennesus it is boilerplate.
     
  10. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    I really don't get the fuss about "mobile devices" all of a sudden. For about eight years I've been creating layouts that work on EVERY "mobile device" I have ever tested with and the list is quite extensive thanks to family and friends being co-opted/coerced into "beta testing".
    The approach is quite simple, use relative dimensions for everything. If you want to allow "zooming" to work flawlessly, use em for widths and ex for heights. It is not difficult to visualise the distances when you know that 1em is as wide as an uppercase 'M' and 1ex is as high as an uppercase 'X' at the current font size and family.
     
  11. martball

    martball New Member

    Messages:
    1
  12. Roddy

    Roddy New Member

    Messages:
    117
    The whole point in designing for mobile devices is that the end user doesn't have to zoom.
    Most mobile designs include this...

    <meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

    Here's a couple of interesting quotes from a recent survey ...

    "15% of mobile users scream at their phones while trying to buy from non mobile friendly sites."

    "61% of users won't return to a website if they've had trouble viewing on a phone."
     
  13. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    And does that automagically compensate for each individual user's eyesight?
     
  14. Roddy

    Roddy New Member

    Messages:
    117
    No, but its a lot easier to hold a smart phone 2 inches from your nose than a 30 inch monitor.
     
  15. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    Certainly but if you had poor eyesight and a 30" monitor, it would be doubtful that it was set to a resolution that needed 'zooming', whereas a 5" or a 7" screen might.

    I have an eyesight problem and use two 19" monitors (1280x1024 and 1440x900) on my desktop and don't need to zoom anything, but on my Dell streak 800x480 5" screen and 7" Android tablet (1024x768) I do occasionally need to.


    It is NOT the monitor size or the screen resolution currently set that determines whether a user needs to 'zoom' or not. It is the physical pixel size on the device in use. So zooming means that more screen pixels are used to display something that is set at 1 [CSS] pixel.
     
  16. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    this bit at least,
    To some degree yes...
    theoretically, and correct me if I am wrong as I'm still trying to get my head around virtual and physical pixels and retina displays and the like and how that works with the design.
    but what this guy says
    http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
    and what this says
    http://www.w3.org/TR/css3-values/#absolute-lengths
    (or 96DPI)...
    iphone4 326pdi
    http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport
    ???
    or something
     
    Last edited: Sep 8, 2012
  17. pisarek

    pisarek New Member

    Messages:
    9
    I n my opinion you could try 'responsive design' - media queries. This is the best way to achieve nice result.
     

Share This Page