2016
Lynda
Morten Rand-Hendriksen
1:52
English

With all the web design software available, why would you design in the browser? We are living in a brave new world of responsive design. Websites can be read on mobile devices, tablets, desktops, and even on the smart watches on our wrists. Most static web design tools don't account for that. The browser is an endless, flexible canvas. It's a natural place to code, and its dynamic design surface and instant feedback allows for more responsive web designs.
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.

Introduction
3m 22s
Welcome
1m 9s
What to know before you start this course
2m 13s
1. Design Preparation
13m 40s
Use the browser as a design canvas
1m 53s
Establish a design language for your site
1m 23s
Draft layouts with pen and paper
1m 48s
Map out containers by drawing boxes
54s
Modularize the design
1m 30s
✓ Challenge: Create a container map and modularize the design
1m 43s
✓ Solution: Create a container map and modularize the design
4m 29s
2. Visual Design in the Browser
1h 10m
Tools and setup
2m 55s
Start with a core setup
3m 5s
Create a baseline document with HTML5
1m 53s
Sidebar: A simple RWD principle
1m 1s
Apply fonts and responsive typography
8m 8s
Work on one module at a time
8m 30s
A practical approach to responsive web design
6m 39s
Use modern technologies to simplify the design process
9m 18s
Create responsive layouts with Flexbox
9m 44s
Color tools in the browser
4m 33s
Color experimentation and the value of HSLA
5m 21s
✓ Challenge: Design the article page in the browser
1m 24s
✓ Solution: Design the article page in the browser
8m 21s
3. Interaction Design in the Browser
14m 38s
Interaction design through CSS
5m 27s
CSS transforms
3m 7s
Experimentation through image filters
6m 4s
4. Designing WordPress Themes in the Browser
7m 16s
Design responsive WordPress themes in the browser
7m 16s
Next Steps
2m 12s
Thank you!
2m 12s

lynda.com/WordPress-tutorials/Responsive-Web-Design-Browser/422839-2.html

Download File Size:662.16 MB

---