The browser is the canvas for websites, so it is only natural to design them in the browser. Doing so allows you to create responsive interactive designs that look and behave as they will in the final product. This online video tutorial explains what Design in the Browser is and how a mobile-frist approach to responsive web design will make the web design process easier.
- View Offline
- The web browser is the medium used to display…websites and their content.…So from that it would follow that the natural place…to design websites would be in the browser, right?…Well, up until quite recently,…that simply wasn't a fact.…Ever since we started designing things on the web…we've always used design applications…to design our websites,…like Photoshop, or Illustrator, or Fireworks, or Flash.…All these tools are design tools actually designed for…static environments that don't change,…but as we've gotten responsive web design,…and mobile first design, and all these new devices…that have different screen widths,…and different functionality,…we need a more dynamic design surface…and these static design applications…simply don't give us what we need.…
Because of this we've started talking about this idea…of design in the browser, and everyone talks about…designing in the browser all the time,…but what's that actually mean?…Well, it means taking the web browser,…that is the place we display websites,…and starting to treat it like a design surface,…
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