SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile Website Design

    Hi there,
    I am creating a mobile landing page for www.selectyourtickets.com. The idea is to create a simple home page for mobile devices which will then be linked to evenue, a different server which deals with all of the 'ticket buying traffic'. So I was going to just create a simple HTML page. I, maybe naively, thought that I could just create graphics at mobile size dimensions (I used 230 px wide), center them in the page, and when you go to the page on your mobile the screen will just snug up to the graphics. I tested one and instead, the graphics were very small and in the top left corner.

    Soo, I guess you could say I could use some pointers on designing a mobile site. I use dreamweaver, and just noticed the XHTML Mobile 1.0 Doctype option, so I assume that would be the right option when creating a new doc. But is html the way to go? I've seen mobile sites with a .asp at the end, but I am not familiar with that at all. Thanks so much.

    Amber

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The file extension is completely irrelevant you could have one with a .kangaroo extension and it would work if you setup the server correctly. All it probably indicates is, its more likely to be using a server-side script than a static page. Even so I create PHP pages and give them *.htm extension occasionally.

    XHTML Basic 1.1 superseded the XHTML-MP and (because MP was a poorly designed and implemented). Though nowadays a lot of these new generation mobile devices have better processing power and can handle standard XHTML 1.x family pages much better.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha.

    Can anyone help me with this: I want to make it so that the content scales to fit whatever screen is viewing it. I used this code:

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

    which I found on several different websites, but it doesn't seem to accomplish what I want. I can only test on my iPhone so I have been creating graphics too wide for my iPhone and then testing them and there is a bunch of side scrolling that I have to do to see the whole graphic.

    EDIT: or is this code simply so that zooming is disabled? Is it possible for graphics to be resized to screen size?

    Thanks,
    Amber

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by amberbam View Post
    Gotcha.

    Can anyone help me with this: I want to make it so that the content scales to fit whatever screen is viewing it. I used this code:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    If your image was 320px wide then it would fit exactly.

    If your image is between 320px and 980px the you probably just need this:

    Code:
     <meta name="viewport" content="width=device-width" />
    Initial scale = 1.0 basically means no scaling and then you would need to scroll to see elements bigger than the device's viewport.

    You can find a run down here.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Paul. You say that if my image is 320 px then it would fit. I know this is true for my iPhone, but what about the smaller devices? Thanks for the link!
    Amber

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Well the smaller devices won't scale the image you'd need to set up media queries for the smaller resolutions and supply a smaller image to fit assuming that the device understands media queries.

    There's a useful article here and here that explains how to use media queries.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


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
  •