Mobile version of a website?

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

  1. definitive macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #1
    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

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #2
  3. AFPoster macrumors 65816

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

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #4
    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

    definitive

    Joined:
    Aug 4, 2008
    #5
    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 mobile.websiteurl.com 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

    Joined:
    Jun 22, 2011
    #6
    Some things I found

    The easiest solution would be loading a new CSS specifically for mobile browsers, keeping your HTML intact.
    http://speckyboy.com/2010/10/07/designing-a-mobile-stylesheet-for-your-website/

    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.
    http://www.noupe.com/how-tos/tutorials-for-making-your-website-mobile-friendly.html

    In particular, this link looks fairly reasonable, as it seems you are not using any frameworks and more just HTML.
    http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices

    Good luck!
     
  7. definitive thread starter macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #7
    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

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #8
    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

    definitive

    Joined:
    Aug 4, 2008
    #9
    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

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #10
    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

    Consultant

    Joined:
    Jun 27, 2007
    #11
    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

    definitive

    Joined:
    Aug 4, 2008
    #12
    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

    Joined:
    Aug 9, 2009
    #13
    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

    Joined:
    Jun 24, 2011
    #14
    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,

    Rob
     

Share This Page