When designing a responsive website it is always recommended to start with the smallest screen and then add the necessary CSS for larger screens. This way your CSS will be more performant and your focus will be on the content first. Learn how to apply a mobile-first strategy to your responsive web design in the browser in this online video tutorial.
- Before we dive in, let me take a brief sidebar…to point out an important principle…when designing in the browser.…Always start with the smallest screen,…and make everything look great.…Then increase the viewport until things start looking weird,…and at that point, add your media query breakpoints.…And do this with individual elements.…That way, you'll get a layout that's fully dynamic,…and every, single element is designed to fit…all possible screen widths and screen configurations.…If you don't do this, you'll end up having major breakpoints…across the entire site, and you'll get this kind of jarry,…popping behavior on the site.…
it's much better if you focus on individual elements…and add breakpoints where they're most natural…according to the content.…So, start with the smallest screen,…make everything look great,…increase the width until thinks start looking crappy,…and add your breakpoints there.…Then continue until things look crappy,…and add another breakpoint, and do this…for individual modules as you work your way…
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