When designing a responsive website you should always start with the most important content - the view and component your visitors will spend the most time interacting with. In most cases this is the single post, product, or article views. In this online video tutorial you'll learn how to start with the primary module and work your way out when designing in the browser.
- [Voiceover] Ok, now it's finally time to do some…real design work in the browser.…The trick here is to focus on one module at a time.…Just to make it easier for you to follow,…I've set up my desktop a little bit differently.…I have Atom on the left and I can toggle…this tree view on and off by either holding down…Ctrl or Cmd and hitting Backslash,…or by going to View and Toggle Tree View on and off.…On the right, I have Chrome toggled for Device mode,…and I have the developer tools on the right hand side.…
This set up allows me to design live in the browser,…and immediately copy code from the browser…to the files once I'm happy with the results.…In this example we're going to be working with…over the next two movies,…I'll start with this top module here…that I gave the class, Banner.…By the end of it, I want it to look something like…what you see here in my style tile.…I want this section to be a full-bleed section,…with this gigantic background image of a space capsule,…with these two different fonts,…and with a semi-transparent box behind the main text.…
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