Grow your CSS skills. Land your dream job.

Responsive Web Design and display:none;

  • # March 12, 2013 at 6:32 pm

    I can’t find a definitive answer to this subject, so I’m hoping someone here can steer me in the right direction.

    I try to develop responsive web sites by rearranging content and not replacing content by hiding and appearing other content.

    However, in situations where it’s not possible, for whatever reason, what is the appropriate alternative to this? Is there a way to serve up HTML tags based on the viewport? Can JavaScript help with this?

    The goal is to avoid having extra HTML tags (but hidden) on the site when viewing on a mobile device.

    Thanks in advance.

    # March 12, 2013 at 6:52 pm

    The only way to serve different HTML tags based on view-port is to have some kind of server side device/view-port detection.

    You can’t rely on JavaScript too much. What if user is browsing with JavaScript turned off.

    My rule of thumb is to hide as little as possible, especially with content (if it’s hidden does it really belong on the page?)

    If you need to hide/load content, offload that content on a different page, link to it, load it with AJAX if JavaScript is available. If JavaScript is not available link will still work, making the content still accessible.

    # March 13, 2013 at 1:03 am

    Let me start by saying I know that this is not good practice and still has tons of bugs, but as anyone here built a responsive site using PHP browser detection…
    [http://php.net/manual/en/function.get-browser.php](http://php.net/manual/en/function.get-browser.php “PHP.NET Manual”)



    < ?php
    echo $_SERVER . "nn";

    $browser = get_browser(null, true);
    print_r($browser);
    ?>

    combining this with some php ReqEx to display HTML content if so please link it.

    If not it might be worth putting a testing environment together using JavaScript and a PHP fallback, just to see if this would ever be a practical solution. My guess is no, but I have been wrong before.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".