SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I revert back to my desktop.css after mobile media query has kicked in?

    Hi all
    Sorry if this the wrong place to post.

    I've been building a mobile version of a new site I have, everything's going ok so far.
    Just wondering, once the smart phone is detected and the mobile.css kicks in, how do I give the user the option to revert back to the main site desktop.css

    <link rel="stylesheet" href="css/desktop.css">

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {


    Sometimes the user, including myself wants to see the full site and not the mobile version.
    Is it possible to switch between the two via a standard link?

    Thank you, Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Are you detecting the mobile device via some kind of server side code, or via CSS (media queries etc.)?

    If you are serving up a different site via the first method, you can just provide a link to the desktop site.

    If you want to give the user not to use a mobile style sheet, you may have to use JS for that.

    An alternative might be to target the mobile styles to portrait mode and serve up the regular styles in landscape mode.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Ralph.

    At present I'm using CSS media queries and just hiding (display:none) to the elements I don't need for desktop.
    Quite happy with the way things look in portrait & landscape, for now I think the JS solution might work best.

    Do you have a resource for the correct JS to use?

    What do you use yourself? Server-side? Different sites? What about SEO?
    Though I must admit, sometimes sites just seem better without changing anything for mobile, my main reason for this choice.

    Thanks, Barry
    The more you learn.... the more you learn there is more to learn.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by computerbarry View Post
    At present I'm using CSS media queries and just hiding (display:none) to the elements I don't need for desktop. ...What do you use yourself?
    I only do simple sites, but I prefer the idea of having one site that displays differently for different devices (or displays the same ... The way you can double to to zoon in on an iPhone makes me question the usefulness of responsive design).

    However, I also feel that most sites are full of a lot of junk that shouldn't appear on mobile or desktop. If content is stripped down to what's really needed, I don't see why content can't be easily accessible on any device. The notion that you have to have separate sites—that mobile users want something different—doesn't stack up for me. I still feel that a well designed site can offer what everyone needs.

    Don't fall into the trap of just setting superfluous content to display: none on mobile devices. That means they don't see it but still download it—an untenable scenario. If you have to hide it, it probably shouldn't be there in the first place. Eventually we'll have to break away from the current web design conventions, which are rooted in the old world of print design.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    having one site that displays differently for different devices
    Absolutely, the way like things to be done myself, what I'm aiming towards... good responsive design, no?

    I also feel that most sites are full of a lot of junk that shouldn't appear on mobile or desktop.
    Yes, lots of my sites are mainly content heavy, I think this is due to my SEO background but don't mind using images here and there for a better feel to your site.

    If you have to hide it, it probably shouldn't be there in the first place.
    Also agree, but on a desktop layout its always nice to have a welcoming introduction header, depending on the site of cause and some quick links in the side, amongst other things. The type of stuff that won't cause much download time for the mobile user.

    This is a big subject Ralph and been reading lots of discussions about where all this mobile is heading.
    How I see it, clients want mobile sites, users want less clicks and fast information and others just want to browse on their phone.

    Appreciate the feedback as I'm still new/learning about smartphone design.
    And did you have any JS references to hand?

    Thanks, Barry
    The more you learn.... the more you learn there is more to learn.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, there is a lot of debate about it all, and no one's totally right or wrong, I suspect. It depends a lot on the site and its needs. I use a few apps that are totally different from the desktop site (like my favorite news site) but I often wish the desktop site did things like the app.

    There is also growing evidence that mobile browsing is less and less about 'info on the go'.

    Anyhow, I have no idea if these links are relevant to the issue, but a few style switching links I have are:

    http://www.visibilityinherit.com/cod...t-switcher.php

    http://designshack.co.uk/articles/css-style-switcher

    http://www.alistapart.com/articles/alternate/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •