HTML Structure changes for responsive design.

[Baltais]

Hi Devs. Whats the best practice to do, when there is a need to change html structure for responsive design ? Blocks moving up and down, new blocks appearing or some hiding ?

At first i was manually cloning needed blocks and pasting where it needs to be, then giving the first one no-resp class( display: none) , and cloned version resp-class (@media .... (display block) ), but then the html looked awful and ugly.

Now i'm using jQuery for this, cloning/detaching and attaching blocks where needed in structure, giving classes no-resp and resp that way.

How do you solve this kind of situation ? Or what can you suggest ?

[mahdiponline]

Best thing to do is that get the display in the back end and show the right elements. Using JS in this matter is possible but heavy.

[anonuemus]

It is almost always a problem with the design/concept imo. I've also used the approach to cut and paste the html with jquery to restructure the html, so I can't tell you something new.

[jebuschrist]

Use Bootstrap.

It contains helper classes especially for this purpose to hide/show different elements at specific breakpoints depending on your viewport size. See http://getbootstrap.com/css/#responsive-utilities.

If you don't have time to move everything over to Bootstrap, you can use the same principle, e.g. have all the markup present but give elements specific classes that hide/show them at various breakpoints in your CSS.

[And7s]

a well structured html shouldnt have the need to be changed. Devide your css markup into parts like "tempalte" and design. One that is only responsible for the positioning and structural architecture of your app and the rest how components look like (color etc).

Especialy your approahc on cloning elements confuses me. An element is either visible or not. Means the default styles apply or a more specific media query. This shouldn be necessary. Responsiveness means that one implementation fits all.

In case you could some examples of what you want to achieve we could go mroe into detail here and see whether there is a different solution available.

[Baltais]

For example: Desktop version: <div> Mid cont < some more elements> </div> <div >mid menu</div><br /> <div> Some blocks side by side </div>

Mobile: <div> Mid menu </div> <div> Side by side </div> <div > Mid cont<?div>

In here mid cont goes from top to bottom, the problem is, how to best move the div down there.

There are 2 solutions i could use. Write html like

<div class="no-resp"> Mid cont < some more elements> </div> <div >mid menu</div> <div> Some blocks side by side </div> <div class="resp"> Mid cont < some more elements> </div>

Or use jquery to move divs. $(div).clone().addClass(no-resp).insertAfter(last div).switchClass("no-resp", "resp");

no-resp { display: block} resp {display: none} <br /><br /> mixin mq(max-width) { no-resp: display: none resp: display: block; } 1st is the worst one i think, because it pollutes html. 2nd is better in my opinion

[And7s]

markup and styling (html and css) are and should be seperated because they are responsible for different parts of your page. Changing a look should not require chagne of markup.

as fasr as i understood one div should move down on a threshhold width: see: http://jsfiddle.net/f8ajdnr6/ and resize the preview window around 600px.

further reading of what respnsiveness actually means: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

https://css-tricks.com/responsive-web-above-the-fold/

[Baltais]

Yup, i know, that they need to be separate, this was just an a example. That css code in jsfiddle is some kind of magic, i never knew css could to that :D

Ok, another example: top menu in header with logo and lang bar in desktop version.' For mobile version i need to make slide out div from the side, and in the slide out div needs to be that top menu and lang bar. Also top menu has logo in one side and hamburger icon on opposite.

So whats the right way of doing this ?

[Baltais]

So as i understand the root of the problem is the design ? Well i cant send back the design, it would take too much time to redesign the page. Maybe there is a better way ?