I have the following dilemma with two elements (menu items) that I need to move in a responsive design (it’s only two variations for now, let’s say one for over 750px width and another for under 750px wide):
Should I have two separate html blocks, one for each variation, and hide/show them depending on the devise size?
Or should I have only one html block and css styles that play with positions? This last option is kind of complicated with the design I’m planning, so the real question might be: is it too bad to have two different html blocks? The page will have javascript and ajax interaction, although I’m not sure to what extent. Thank you in advance.
Stating whether it’s “bad” is subjective and relative to what your goals are. From an accessibility standpoint, it’s not ideal to have the same markup appear twice and just toggle hiding one or the other, but without knowing more about the particulars of your design, it’s difficult to state with any certainty that it should or shouldn’t be done a particular way. I would say that, in general, it shouldn’t be that difficult because your markup shouldn’t be structured with the layout or design in mind.