Responsive Web Design and display:none;

[barkins]

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.

[Alen]

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.

[Historical Forums User]

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”)

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.

[Author]

Posts