Join Morten Rand-Hendriksen for an in-depth discussion in this video Design responsive WordPress themes in the browser, part of Responsive Web Design in the Browser.
- [Voiceover] All right, we can't talk about…responsive web design in a browser…without talking about WordPress.…Why? Because WordPress is the ideal platform…on which to design in the browser.…So before we wrap up this course, let me give you…a quick rundown of how designing in the browser works…with the WordPress theme.…The process of designing response WordPress themes…in the browser starts pretty much the same way…that we've been doing throughout this course so far.…Create style guides or other design assets…to establish the design language for your theme,…and create draft layouts to work with.…The draft layouts you saw in the beginning of this course…were actually the layouts for the WordPress theme…called Popper that you're seeing right here on my browser…right now.…
And if you want to learn how to make this theme,…you can check out the course: WordPress Building Themes…from Scratch Using Underscores right here in the library.…This theme was designed entirely in the browser.…Of course there's a bit more to it,…
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