Mobile version of a website?

Discussion in 'Web Design and Development' started by definitive, Jun 22, 2011.

  1. definitive macrumors 68000


    Aug 4, 2008
    Can anyone recommend me a tutorial for converting a fairly simple website that mostly contains information to a mobile version for tablets and smartphones with OS' such as iOS, Android and WP7? Any other tips would greatly be appreciated as well.
  2. design-is macrumors 65816


    Oct 17, 2007
    London / U.K.
  3. AFPoster macrumors 68000

    Jul 14, 2008
    Charlotte, NC
    look at Adobe's site they have a ton on there.
  4. ChicoWeb macrumors 65816


    Aug 16, 2004
    Why would you want to create an app for a website? I would personally set up a mobile version of your website, so that people don't have to visit an app store to view your content. Much easier for the end user.
  5. definitive thread starter macrumors 68000


    Aug 4, 2008
    After looking through it, I don't think that it's what I'm looking for. I'd prefer to have two separate versions of the site, because looking through what the framework offers, I don't think it would work well with what I already have made. The site I have now wouldn't work too well with scaling between browsers, so I'd prefer something very simple instead that I could maybe point from instead.

    What should I be looking for? Info on how to do it or templates?

    Not sure if my initial post was clear or not, but what I'm looking to do is make a mobile version (html) of a website I've already made in the past. I'm looking for a good, but fairly easy to follow tutorial or maybe even a simple template that would allow me to do it. I have no interest in building apps.
  6. jalgebra macrumors newbie

    Jun 22, 2011
    Some things I found

    The easiest solution would be loading a new CSS specifically for mobile browsers, keeping your HTML intact.

    I'm not sure if this is possible for your particular website, but here is an aggregate of resources that may be able to help you.

    In particular, this link looks fairly reasonable, as it seems you are not using any frameworks and more just HTML.

    Good luck!
  7. definitive thread starter macrumors 68000


    Aug 4, 2008
    The thing that I am having difficulty understanding is how I would go about omitting some parts of the site if I was simply going to use a second css file for mobile devices. For example, I don't want to include certain large images, or certain text that's being displayed on the pages. Also, I have some javascript stuff on the current site ( an accordion script), and I'd like for it to show up on as many different phones as possible, though I am aware that there are many older phones that probably won't work with it. I also have a php page with a contact form, and I don't know how that would factor into things, especially if I'd decide to skip the page, and have a html version one instead to simply list all the contact info as text. This is why I'm leaning towards making a separate mobile version of the site.
  8. lucidmedia macrumors 6502a

    Oct 13, 2008
    Wellington, New Zealand
    Media Queries are the first thing you should research.. that will give you the CSS separation you are looking for...
  9. definitive thread starter macrumors 68000


    Aug 4, 2008
    Thanks, I'll look into it.

    Another question. Say I decide to simply code a mobile version of the website instead of using an alternative CSS file. How would I be able to auto forward mobile devices to it without simply having a mobile version link on the front page?
  10. jsm4182 macrumors 6502

    Apr 3, 2006
    Beacon, NY
    You would need some javascript to redirect mobile users, such as these snippets.

    For my websites, I pretty much always build in Drupal. Theres a great drupal module for this, Mobile Tools.
  11. Consultant macrumors G5


    Jun 27, 2007
    Instead of reinventing the wheel, why don't you change to a CMS such as Wordpress and use something such as wp touch? (I use the pro version on my site).
  12. definitive thread starter macrumors 68000


    Aug 4, 2008
    I was thinking of using WordPress, but I am not that advanced with building a website in it (not a blog).
  13. chown33 macrumors 604

    Aug 9, 2009
    Sailing beyond the sunset
    Safari Web Content Guide.
    The "Optimizing Web Content" section covers conditional CSS, and the fact that iOS Safari doesn't use the @media handheld rule. You can also make screensize-specific media rules, so the CSS differs for wide vs. narrow screens.
  14. robvee macrumors newbie

    Jun 24, 2011
    Should be straightforward

    I'd look at JQtouch and/or Sencha Touch. I have heard they are easy to use and you get nice pretty results without having to do too much coding.

    Hope this helps,


Share This Page