PSD to HTML Blog

Responsiveness of a design is a new feature in web development, which brings totally new perspective of coding web site. It is based on a new rule brought by Cascading Style Sheet version 3 (CSS3), more precisely a @media rule. With use of a @media rule it is possible to define different styles for different resolutions and therefore for different devices our website is accessed from.

Because of that, the @media rule is one of the most popular among web designers and front-end developers nowadays and a number of websites using @media queries is rapidly growing. The main reason why @media queries are gaining so much attention is their power to present the same website to look nice no matter what device is using the visitor of our website. It will always look well, whether accessed from portable devices (smart phones like Android and iPhone), which have rather small screen resolution (480×800 is most common lately), or large desktop monitors.

It is not impressive, then, that the @media queries are nowadays build-in into many CSS, HTML and grid frameworks, like Twitter Bootstrap, Skeleton and others. It is way easier to take advantage of the predefined and good templates and build your website on top of it. Therefore at PSD to HTML we also support developing responsive web applications based on Twitter Bootstrap. And since Twitter Bootstrap is natively written in HTML5 / CSS3, you benefit the HTML5 markup for free!

How to use @media rule

I’ll try to cover some basics about how to use @media queries to display the same HTML markup differently based on the screen’s resolution. The @media query has pretty simple syntax, as demonstrated here:

@media (min-width:600px) and (max-width:1020px) {
    /* your css code for devices which screen's
       width is between 600 and 1020 pixels */
    .some-class {
        display: block;
        float: left;
    }
    #some-id {
        color: #fff;
    }
}

Now let’s take a look what we have done with this block of code. At very first line we have a @media rule, followed by two round brackets. In the first brackets we set the minimal width of the viewport for which the following CSS rules will apply and in the second brackets we define the largest width of the viewport. I say viewport and not screen’s resolution because the @media queries really do not rely on actual resolution, but the area of the screen which is showing a website – usually being a web browser. Therefore if you resize the browser’s window, the @media queries will respond accordingly. So when you define the @media rule, you just write your regular CSS code inside the curly brackets following the rule.

It is possible to nest @media queries one into another or declare one after another. The last option in fact really brings the responsive web design, because one can set the width, floating, display mode etc. for each HTML element based on the user’s viewport.

We do offer responsive web design!

You will not be able to find ‘Responsive Design” as one of the options in our order page. The reason is that every PSD to HTML project requiring a responsive design has it’s own level of complexity, therefore it is impossible to charge anything in advance, we need to see and analyze the PSD files. So you are more than welcome to contact us and send your design over before placing the order and we will provide you with the estimate costs for responsive web design.

Have any questions about responsive web design? Shout is out in the comments below, we’ll do our best to help you!