Responsiveness In Action
Let's talk Responsiveness today. If you are not sure what it is, check out my other blog about Responsiveness. There is only so much that can be explained about responsiveness, but I would like to start the blog by offering few reference elements that can surely prove useful in time.
Useful Downloads
- 1. Click here to download a width diagnosis I have created in Photoshop for one of my clients. It lists out most of the common widths used for Responsive designs. Widths on top demonstrate horizontal views while the widths on the bottom represent the vertical views. Everything is built in actual size, so you can export it as an image and add it to your design with some opacity to see what's what.
- 2. Click here to download an excel file that lists up to date common devices (built in 2013) and their screen sizes. You can use that if either you or your client wants to target specific audience using a specific device. I used tha last column to indicate which devices are supported - this matches the photoshop file above.
- 3. Here are few wireframes (1170px, 940px, 724px) I used for web design. You can also print these out on a transparent paper to demonstrate to your clients how the website is built and how it will respond to resizing.
Now let's explain a little about the Responsiveness itself.
STEP 1: You, the developer, decide what screen sizes you want to work with. My example will be simple as I will use 940 for he default layout (because that is what my website is based off of) and 780 for secondary layout (horizontal tablet size).
STEP 2: Designate your responsive elements. In other words, decide what will change once you resize the website. I will create an empty div with a class "box". Now create default style, whatever it may be. In my case I will use a border-radius, background color and size - width and height:
STEP 3: Now you create a section in your stylesheet for the secondary layout. You can define this as as a width range (i.e. (min-width: 480px) and (max-width: 767px)) or a max width only, which I will use since I will not go further than that. If you are using multiple layouts, you can also use the min-width element by itself as well (i.e. (min-width: 480px)).
Code
<div class="box"> </div>
<style>
.box {
background:#B80000;
border:3px solid #333;
width:300px;
height:200px;
}
</style>
<style>
@media only screen and (max-width: 959px) {
.box {
background:#333;
border:3px dashed #B80000;
border-radius:10px;
width:200px;
}
}
</style>
<style>
.box {
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
transition:all 1s ease-in;
}
</style>