Join Morten Rand-Hendriksen for an in-depth discussion in this video Thinking responsively: Designing for many different screen sizes, part of WordPress: Building Responsive Themes.
- View Offline
Designing responsive themes is surprisingly challenging the first time you try,…but it does get easier once you get used to thinking in responsive terms.…I think this has a lot to do with how we are used to design web sites.…In the past, the only constraint we needed to think about was how wide the…smallest computer screen was going to be,…and generally, if you landed somewhere around the 960 mark, you were fine.…So we were safe in designing sites that were always fixed width to 960 pixels,…and they are also very easy to design.…
But now that we have all these different sizes of screens, we have to rejig how…we think about the design approach to get to where we need to be.…What you're seeing here is the original design concept for the Anaximander theme.…This is what I made in Photoshop. And what I did was I started with the…smallest possible screen, the cell phone screen, and then I decided to scale it up from there.…There are many reasons why you want to go this route, starting with mobile first,…
- 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