SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile Web Template / Guidelines

    Hi, I'm just about to start designing a mobile version of a site, and i was hoping that maybe someone could help me with the following few questions please:

    01 - is a mobile site essentially just a normal website that is designed and coded to work well on mobile browsers, as in can you just design and code a normal HTML / CSS website that has a single column layout with big buttons
    02 - is there a mobile web framework out there that a lot of leading mobile sites utilise
    03 - is there a generic web standard default width size that the canvas (width of the site) should be... what width should we all design our <body> to be so that it fits all current mobile devices (iPhone and android) or should we just code everything to 100% width in a single column layout

    Thanks in advance to anyone who can help with the above questions...

  2. #2
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Manchester, United Kingdom, United Kingdom
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Howdy oo7ml,

    Just to answer your questions:

    01 - you could get away with just redirecting people to standard webpages with minimal content. However, (this covers point 2 as well) you should take a look at google's page "Developing mobile sites" within their support section.
    03 - you should really use a stylesheet that reacts positively to screen widths and not try and force them.

    I hope that helps,

    Lee

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Heya oo7ml

    With regards to designing for a mobile site, and particular to your question (03) - the number of mobile devices that's out there at the moment is astounding. What is equally astounding is the vast number of screen sizes that are now around, not only because of mobile phones, but also a large variety of tablets and small form factor PCs (Netbooks for example). To this end, I would not recommend designing to a fixed width, but rather take an approach where content can reflow on the page depending on the size of the screen.

    Generally when building sites like this, a front-end developer would use a framework of some sort that utilises CSS media queries to adapt the site for various sizes.

    There are of course several popular sizes, many of these frameworks will have a breakpoint at those sizes, and fluidly resize between the breakpoints.

    Some good examples include:


    How your design is put together by a developer is a bit of an art form, it requires some extra thought to translate a design to a mobile site with a responsive layout. (Without the designer needing to design all the possible layouts of course.)

    Just my 2c
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thanks for your help...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •