Join Morten Rand-Hendriksen for an in-depth discussion in this video Visualizing content realignment for better markup, part of WordPress: Building Responsive Themes.
- View Offline
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 three elements here. …
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry