Wordpress design with Underscores starter theme: mobile first design

Web design and development is undergoing a drastic change thanks to the proliferation and abundance of mobile devices and how we use them. As a result, the old method of designing webpages in Photoshop and then trying to create pixel perfect versions with HTML and CSS is simply no longer valid. The current best practice for web design is modular mobile first design, and that's what we'll be doing in this course. What does that mean? Three things:

1. Design modules that together comprise a full view
First off, instead of designing an entire page with all its contents, we're going to design modules that fit together to form a full view. That way things can be moved around and connected in a more dynamic way.
2. Design and build for small screen first

Secondly, we'll design and build everything for small screens first, specifically a vertical smartphone, and then when everything looks good on that screen, we'll scale up the screen and apply responsive design principles to make the same content look good on other screens,
3. Make design decisions the browser
Thirdly, we'll do as much of the design as possible in the browser. After all, that's where the website will be displayed.

When working with responsive web design, I like to apply a simple principle. Start with the smallest screen. Make the viewport wider. When something looks weird or wrong, add a breakpoint through a media query.You'll see me do this throughout the course and the result is lots of media queries scattered throughout the style sheet. This may seem messy but in the end it produces simpler and more easily editable code. So how does this all work? Let me show you. Before starting the actual build on my theme, I made some quick drafts in Photoshop. You'll notice here that I've started with a couple of different art boards,some small and some large, and the focus of these design drafts is on individual modules. What does the header look like? What about the featured image and post header? What are the font sizes and relationships? Once this is done, I start translating each module into code on the webpage, and that's what we'll be doing through the majority of this course. One final thing, as we move forward, notice that I rarely refer to this Photoshop design and never use my designs to measure heights or font sizes or anything like that. All these designs are for is to get a general idea of the overall look of my theme. All decisions about sizes and precision, et cetera, should be done in code in the browser because that's where the real content will live.