SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to add a mobile CSS

    I want to develop a mobile version of a website, and I was wondering what was the best way to add it to a page. I know the classic way (media=handheld) but I've seen a lot of buzz about media queries lately, but if I understood it right they are not supported but every browser yet.

    So my question is: what is the best way to do it, knowing that I need to support especially the iPhone and Blackberries?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Media queries are the way the go I believe. I don't know much about them though. Here are my thoughts on mobile versions...

    This is what I think. I think the "mobile version" is a fad that will die. I have a iPhone. I hate mobile versions. They are always striped down - dumbed down versions of the full site. Why do I want that??? Especially when my iPhone is perfectly capable of displaying the site faster and better than my XP? This is why I don't bother.

    What I do on my site is simply give alternate content for unsupported mobile things. No "download java/flash for better experience messages". 99.99% of users ignore those links/messages anyway.

  3. #3
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Hello,

    Media queries are the way the go I believe. I don't know much about them though. Here are my thoughts on mobile versions...

    This is what I think. I think the "mobile version" is a fad that will die. I have a iPhone. I hate mobile versions. They are always striped down - dumbed down versions of the full site. Why do I want that??? Especially when my iPhone is perfectly capable of displaying the site faster and better than my XP? This is why I don't bother.

    What I do on my site is simply give alternate content for unsupported mobile things. No "download java/flash for better experience messages". 99.99% of users ignore those links/messages anyway.
    I went with media queries, after reading a couple of articles on the subject.

    About what you wrote, I appreciate mobile versions of websites a lot instead. They are striped down versions of the original because the screen size doesn't allow you to use the original version very easily, and so it's preferable to have a faster and easier to browse version, even if it's not always complete, as you say.
    In any case, you always have the possibility to select the original version, even on a mobile device, so I don't think it hurts to have the possibility to choose

    And, by the way, I often prefer the mobile versions of websites, because they just keep the relevant information: no banners, no annoying flash stuff, just the important things.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That's cool. Each his own. YouTube is a good example. There is some funtionality in the mobile version I need and the same for the full version. It's obvious how to go from the full site to the mobile site. But if you need to go back to mobile thre is no link. You have to go clear cookies in the settings and then go back. Lots of sites have those inconsistencies. Just added stepps while browsing. I do 99% of my web browsing on my iPhone so maybe I'm different than the average.

  5. #5
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    That's cool. Each his own. YouTube is a good example. There is some funtionality in the mobile version I need and the same for the full version. It's obvious how to go from the full site to the mobile site. But if you need to go back to mobile thre is no link. You have to go clear cookies in the settings and then go back. Lots of sites have those inconsistencies. Just added stepps while browsing. I do 99% of my web browsing on my iPhone so maybe I'm different than the average.
    What you say is true, but the problem is easily solved when the site has a subdomain just for the mobile version (for example m.sitename or mobile.sitename). If you want to go back to the mobile version you just type this url again

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Eric, you make a good point. Those who want a mobile version have it available in case the "real" site overwhelms their phone, and those who are fine using the regular version won't bother hunting for the mobile version. And you're right, no one does the "download java/flash for better experience" bit.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Additionally, I, and most people I presume, become accustom to the way a site looks and feels. Mobile versions rairly look/feel anything like their full version. I personally feel like I'm missing something when I'm just looking and a bland screen with some text.

  8. #8
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Additionally, I, and most people I presume, become accustom to the way a site looks and feels. Mobile versions rairly look/feel anything like their full version. I personally feel like I'm missing something when I'm just looking and a bland screen with some text.
    This also comes up to the designer's skills, if they are very good they can make the mobile version feel like the original one.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I've been building all my sites "for mobile" and then layering on "desktop" css using media queries.

    Any user agent who doesn't support media queries will at least get the basic layout of the page and everything functions.

    User agents who do support media queries get some extra goodness. The exception here is IE: I just give IE less than 9 the desktop styles. This does suck for IE6 on mobile, but, tough.

    I haven't done it yet but I'm going to make use of the isMedia() function to keep JS away from those loading only the simple css.

    The (well-built) mobile versions of sites are better than the desktop versions because
    -they do everything you need without the bull
    -no downloading 300MB of scripts and images that are just fluff
    -cleaner interface means better usability

    The above unfortunately isn't true of all (or even most?) mobile versions of sites. I am of course talking about a Utopia. : )


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
  •