Rich-text Reply

Recoding for layout changes and responsive design

shirley 06-09-14
Accepted Solution

Recoding for layout changes and responsive design

I know that even small moves made in the editor can adversely affect responsive design. Now if a page layout is changed considerably with re-coding, how does this affect responsive design? And with re-coding, how does this affect the loading of the test page? Does it slow up the rendering a lot or not at all?

Level 2

Aicke 06-10-14
 

Re: Recoding for layout changes and responsive design

As far as I know, there is no simple answer, it depends on your layout and what you change.
An overall good suggestion is, do the changes as topmost/early as possible, for example by setting a class at the html or body tag and do as much as possible with css. Changing alot in the dom and do is after the page already finished, may have an unpleasent impact.
Everything is hard, before it is easy.
Level 2
pkasso 06-10-14
 

Re: Recoding for layout changes and responsive design

Hi Shirley,

 

What Aicke mentioned is definitely true as it depends on how responsive your website actually is. This can depend from using creative CSS styling such as:

 

.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 

or media queries in the likes of:

@media (max-width: 600px) {
  .video {
    display: none;
  }

 If you chose to design a responsive site around inline CSS style appends or CSS stylesheets, you have to make sure that making changes to these respective elements and their CSS within Optimizely will not overwrite the inherited page styling - or this will cause issues and might break the responsive properties of your site. Media queries are a bit different in that their properties are set to specific window sizes and hence are a bit harder to overwrite using Optimizely. So again, depending on the changes you are making using Optimizely - be sure to understand how responsive your site is at first, and make sure the modifications done within Optimizely do not strictly interfere with the responsive styling. If your website re-coding is dependent around moving objects and items around, there should be really no harm because they should not alter the actual dimensions (e.g. padding / height / width). Considerable re-coding of the page should not affect the loading of your page as Optimizely loads synchronously; this will not slow up any sort of redenring as the changes will be applied at DOM ready.

 

Sorry for the long response!

Paul

Optimizely
shirley 06-10-14
 

Re: Recoding for layout changes and responsive design

Thank you Aicke and Paul. This was very helpful!
Level 2