CSS Layout & Responsive Design
Educational Notes (Quick Links)
- HTML and CSS Basics
- Floating Elements
- Nested Elements
- Negative Margin & Float Layout
- ‘Float’ Over ‘Position’ Sometimes
- The ‘Position’ Property
- Adaptive Images
- Use Media Queries Sparingly
- CSS Inheritance
- Source Order, Specificity, And !important
- Display (Inline vs Block)
- Pseudo Elements
- Pseudo Classes
How Responsive Web Design Works
Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.
This article gives a brief summary of how responsive web design works. When a site is responsive, content adapts to suit different screen sizes. Media queries are key to responsive web design. A media query places a condition on whether certain styles have an effect or not. For instance, a media query could be used to replace a regular navigation menu with a mobile one on screens below a certain size. The CSS code for a media query could look like this:
CSS style rules entered in place of the /* CSS style rules here */ text will only have an effect on devices that are 480px wide or less. They will not take effect on screens of 481px or wider. The vast majority of mobile devices have a portrait screen width that is less than 480px wide. That’s why the 480px breakpoint is often used to target mobile phones. More about breakpoints later.
Displaying content according to screen size doesn’t always require media queries. It’s possible to create fluid components by defining width values in percentages. Combining these fluid components with a handful of media queries achieves great results. This is what you will learn how to do.
Why Your Site Doesn’t Look Good On Mobiles
Perhaps you think your site already looks fine on your phone. And it probably does. Smart phones arrived in a non-responsive world of websites that were designed with larger computer monitors in mind. They had to take measures to make themselves useful internet browsing devices. They couldn’t just wait for responsive web design to kick off. So the solution they settled on was to scale websites down.
Non-responsive sites tend to shrink down proportionally on a mobile device. You can still see everything; the main content and the sidebars, etc., it’s just smaller. But the mobile device has not made your site responsive by virtue of being able to display it.
It’s considered best practice to display websites on mobile devices with readable font-sizes; readable without requiring the user to zoom in. Doing this means adjusting the design completely. Not just shrinking the desktop version of the site. Here’s an often quoted definition of responsive web design:
“Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience —easy reading and navigation with a minimum of resizing, panning, and scrolling— across a wide range of devices (from desktop computer monitors to mobile phones)”.
Wikipedia
No that you have a vague idea of how responsive web design works, please move on to the next part in this tutorial which introduces the tools you will be working with. You will use these to gain hands of experience converting the old non-responsive Twenty Ten theme in a modern responsive theme.