From the course: Learning Responsive Web Design in the Browser

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Sidebar: A simple RWD principle

Sidebar: A simple RWD principle - WordPress Tutorial

From the course: Learning Responsive Web Design in the Browser

Start my 1-month free trial

Sidebar: A simple RWD principle

- Before we dive in, let me take a brief sidebar to point out an important principle when designing in the browser. Always start with the smallest screen, and make everything look great. Then increase the viewport until things start looking weird, and at that point, add your media query breakpoints. And do this with individual elements. That way, you'll get a layout that's fully dynamic, and every, single element is designed to fit all possible screen widths and screen configurations. If you don't do this, you'll end up having major breakpoints across the entire site, and you'll get this kind of jarry, popping behavior on the site. it's much better if you focus on individual elements and add breakpoints where they're most natural according to the content. So, start with the smallest screen, make everything look great, increase the width until thinks start looking crappy, and add your breakpoints there. Then continue until things look crappy, and add another breakpoint, and do this for…

Contents