Join Morten Rand-Hendriksen for an in-depth discussion in this video A practical approach to responsive web design, part of Learning Responsive Web Design in the Browser.
- [Voiceover] Following the principles of…Mobile First Design, I always design everything…in the browser to fit the smallest screen first.…Now that we have a layout that looks great on smaller…screens, we can start widening the viewport to find out…where to place our breakpoints and change the display.…This allows us to create unique designs and layouts…that suit every possible screen width.…The process starts by finding the first breakpoint.…So here, you simply widen the viewport until things start…looking crappy, which is about somewhere around here.…
So, maybe 600 pixels.…You can see the width up here, and this is starting…to look less than ideal.…That means it's time to add our first breakpoint.…And I'll do that right inside banner.css.…Scroll down, and go at media screen…and min-width 600 pixels.…Now I need to decide what rules I want to target in this…new media query.…So, if I look a bit closer at my content here, you see…we have this section with the class banner that contains…everything, and we don't want to change that because…
In this course, Morten Rand-Hendriksen explains his approach to designing in the browser, which starts well before he even starts coding. He shows how to define the layout on paper and create a "language" for the site, and then builds a baseline document with HTML5. Then he uses CSS to guide the look of the site and the layout, using media queries and Flexbox to add responsive behaviors. In chapter 3, Morten improves the site's interactivity using CSS transitions and transforms. Finally, he reveals how to use these techniques to build WordPress themes in the browser.
Each step involves design strategies, best practices, and actual code examples that will turn the web browser into your new favorite design tool.
- Use the browser as a design canvas
- Draft layouts with pen and paper
- Modularizing the design
- Create a baseline document with HTML5
- Create responsive layouts with Flexbox
- Applying CSS transitions and transforms
- Building WordPress themes in the browser