Visualize content realignment for better markup WordPress: Responsive Themes


show more Visualizing content realignment for better markup provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Responsive Themes show less
please wait ...

Visualizing content realignment for better markup

Once you have a clear idea of how your content will look on different screen sizes, you need to make sure your markup allows for this type of realignment. The one thing to keep in mind is that while the presentational aspects of your site may change as your responsive theme responds to different screen sizes and other scenarios, the markup, that is, the code behind the scenes, stays the same. That means your markup needs to accommodate all your different layouts simultaneously without becoming unnecessarily cluttered in the process.

To make sure I know how I need to divide up my content, I like to draw lines in my designs so I can see what different sections I need to section off and how they relate to each other, and then I can match that between my full-size layout and my phone layout and see how these elements move in relation to each other. Let's, for example, take a look at the header. If I draw a box around the entire header, you'll see that we actually have th...

Visualizing content realignment for better markup
Video duration: 4m 35s 2h 55m Intermediate

Viewers:

Visualizing content realignment for better markup provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Responsive Themes

Subject:
Web
Software:
WordPress
Author:
please wait ...