Responsive HTML (and CSS) - html

Question

I'm not familiar with responsive websites and would like to start creating a website taking all the screens into account.
Obviously media queries is the way to go but they only concern CSS.
In my current project, I would like to organise the page differently according to the width of the page (being completely device agnostic).
The thing is, on small widths, I would like the HTML layout to change completely so I will have to make the HTML "responsive" as well as it should change according to the website width.
How can I achieve that?
Is there any js library (jQuery if possible but not mandatory) that will "serve" another html page according to the width of the page?
The whole website should be build this way so the script should be more than a gadget, it should be rock solid enough to allow the whole website to rely on it.
And, of course, it should work on any device or screen or browser.
Some would say that I'm looking for adaptive techniques more than responsive ones but I believe it's a mix between those two as the elements will still be responsive in general but between some critical breakpoints, it will indeed adapt and change the html.
I read a lot about different techniques but I can't find something that suits my needs.
Any lead would be appreciated.
Thank you for your help.

Answer 1

What you are describing is adaptive delivery. What you want to to is detect the user agent string using a server side language, and then conditionally render your templates according to whether the device is a phone, tablet, or desktop. Realistically, you'll share a lot of code between the screens, but you might have a different navigation layout, or opt to not show more rich features on the smaller screens. This approach not only saves a bunch of hide/show code, but saves a lot of overhead on smaller screens where you would otherwise be loading stuff that would be hidden the entire time anyway.

Answer 2

You can do a lot with CSS and media queries to alter your page layout ("completly") depending on device and screen width. If I were you I would dig a little deeper through the possibilities these techniques can offer.
If you are positive this is not enough. I would look into Redirects and User-Agent Detection to redirect your users to a different page depending on the user-agent.
If you are looking for a full framework that can handle both what you need (redirecting and dynamic content depending on user-agent or width) and a whole lot more, you should look into AngularJS.
You CAN of course do some DOM manipulation with pure JS depending on your criteria, but as your project gets bigger you might be in for a world of hurt.

Answer 3

Is it possible you could use an existing CSS framework such as Bootstrap to achieve a responsive design across your various target browser widths and device types?
Bootstrap in particular will let you specify different layouts depending on the device width where the page is being rendered. More information here - adjust your browser width to see it in action.
If, after evaluating an existing framework, you're still determined to develop your own you can perhaps at least use the techniques in Bootstrap or another framework as a starting point for your own.

Answer 4

try Bootstrap
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Answer 5

I do not know if it is sufficient to your project, but you can to some extent use CSS to control what markup you would like to show or hide on smaller or larger devices. For example:
<div class="mobile-only">
<p>This content will only be visible on small screens such as mobile devices</p>
</div>
<div class="tablet-up">
<p>This content will only be visible in tablet and larger devices</p>
</div>
/* media query for small screens, such as mobile devices */
#media screen and (max-width: 767px) {
.tablet-up {
display: none !important;
}
}
/* media query for tablet and larger devices*/
#media screen and (min-width: 768px) {
.mobile-only {
display: none !important;
}
}
But be sure that you do not use this technique if you have a really big project, you might be ending up choking performance.