hello@christinatruong.com
christinatruong.com //
@christinatruong
Thanks to CoderDeck for the interactive code slides.
Slides also available on Github.
With the introduction of Ethan Marcotte’s responsive web design approach, there’s been a flurry of excitement around the idea that one website could target multiple screens. Fluid websites are nothing new but with the introduction of CSS3 media queries, one site can now adapt gracefully between different resolution sizes and respond accordingly to the context being viewed by the user. Fluid grid designs also allow for a consistent multi-screen experience while maintaining one codebase.
No screen left behind: Creating a digital experience for multiple devices - Christina Truong
You may have seen a website redirect from yoursite.com to m.yoursite.com when viewed on a phone or tablet. That's because they are two separate sites. One for desktop and one for mobile.
Let's take a look at an example of a mobile & desktop site, flickr.com and m.flickr.com.
Responsive web design is not the magic solution but it is a great alternative to creating a separate desktop and mobile site.
mediaqueri.es houses a collection of responsive websites. Take a look at a few sites and see how the layouts change when the browser window size changes.
Fluid designs are created by using percentage widths, therefore becoming relative to the size of the viewport.
Fluid designs create a more flexible layout and generally works well in a desktop context but begins to not function as well when going into smaller resolutions.
A List Apart - Flexible design example
A List Apart - Responsive design example
A List Apart - Full article
Media Queries, Breakpoints and Tools
Media Queries are the key to making a site responsive. It is used to apply CSS only when the screen has reached a certain size.
Lets take a look at a basic media query:
@media screen and (max-width: 480px) {
body {
background: red;
}
}
According to the above condition, any screen equal to or less than 480px wide resolution will have a red background.
Notice how we nested our CSS inside the media query? If we had more than one rule it would look like this:
@media (max-width: 480px) {
body {
background: red;
}
h2 {
font-size: 20px;
}
}
The above CSS gets applied when the browser reaches a width of 480px or smaller. This is what we call a breakpoint .
These are just general guidelines. Depending on the project, you may need to target different resolutions and add media queries at different breakpoints.
A good rule of thumb is to have at least have 3 breakpoints to optimize for phones, tablets and desktops/laptops. On the flip side, avoid using too many media queries as well!
The viewport meta tag is required and is included in the <head> to ensure that the page responds on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>.<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1">
Note that for accessibility reasons, these options should be avoided when possible.
Developer tools allow us to inspect any web page and see the code.
These tools make it easier to test and debug code as well as allow us to experiment with elements on the page without touching the actual source files. It can be accessed in 3 ways:
in the top right hand corner of the Chrome browser and select Tools > Developer Tools ORExtra resource: Chrome Developer Tools
When creating mobile friendly sites, it's always best to test on an actual device. However, there are a lot of interesting tools available for testing in the browser. Today we will look at the Viewport Resizer Responsive Design Bookmarklet:
Go to Chrome and select View > Always Show Bookmark Bar
Your bookmark bar should now appear under the address bar.
Go to Viewport Resizer
Responsive Design Bookmarklet and add this bookmarklet to your bookmarks bar by clicking the button once, hold and drag it to your bookmarks bar.
You should now see the Resizr bookmarklet in you toolbar.