A quick guide.

Don’t tell me that it doesn’t annoy you when people turn to their phone in the middle of your conversation. It wouldn’t surprise me if they are surfing the web on their phone. What would surprise me in that case is how great some websites look on phones. This is when we can start talking about responsive websites.

The question is, how does your website respond to different devices? To assess the difficulty of achieving a truly responsive website, we must consider the variables. What is the size of a mobile phone? Wrong. Phones vary in sizes like you would not believe. Designing and developing a website for each possible size would be truly courageous and absurd. However, identifying the devices and browsers your website should support is an important task. Write this down as a reference defined in your specification. What? No specification? You must be courageous if you are reading about responsive web when you don’t even have a specification. As I love nothing more than helping you, I will throw some numbers around. An average desktop screen size is 1024×768 and a mobile screen size ranges from 960×640 to 480×320.

Here is a pretty diagram in case those numbers don’t mean anything to you.

responsiveDiagram.png
Figure 1: A diagram of a website that supports multiple screen widths

 

Well… Hello, responsive web! That right there is what a responsive website is all about. Breaking down blocks when and where appropriate, resizing not only the blocks but also text and perhaps even images. Don’t worry though, this is not as complicated as it may seem. One of the ways to achieve this is to use the link media attribute. Okay, fair enough. That probably did not make any sense. Let me give you an example to illustrate this.

<link rel=“stylesheet” media=“screen and (max-width 960px)” href=“css/medium.css”>

The link tag used in the above example defines the relationship between a document and external resources. A tag like that indicates that another file is being called, where in this case it is an external CSS file. What the above code does is fairly straightforward. When the  screen size is equal to or lower than 960 pixels, the file “medium” is used. This Cascading Style Sheet (CSS) defines the design of the website according to screen size outlined. However, what if the screen size defined is not suitable for smaller screens? Just use a different CSS file like so:

<link rel=“stylesheet” media=“screen and (max-width 960px)” href=“css/medium.css”>
<link rel=“stylesheet” media=“screen and (max-width 480px)” href=“css/small.css”>

In the above scenario, when the screen size is between 960 pixels and 481 pixels, the ‘medium’ CSS file is called. When the screen size is equal to or lower than 480 pixels, ‘small’ is called instead of ‘medium’. This does not mean that you have to spend time styling the website on every break point. Break point is what we refer to when the website breaks due to the screen size. The default CSS file called will remain applied to the website, unless the specific element is modified in the new CSS file. Having said that, calling different CSS files for different screen sizes is not ideal.

We should probably talk a little more detailed about media queries. A media query is a block of CSS that is ignored by the browser unless the query’s condition is met. To better explain this, do refer to the code snippet below.

@media only screen and (max-width 720px){
article{
width: 360px;
}
}

Once the browser dedicates that the media query is true, the code block is executed. By the way, a code block is any code inside the curly brackets {}. In the above code sample, all the article elements on the website are modified. The width is changed to be 360 pixels. As a result, the screen will be able to fit two articles in a row. But what if the screen is 719 pixels? Now we play smart. Instead of using pixels, set the width of block elements in percentages. This way, the size will be calculated based on the body width and resize accordingly. Did any of that make sense to you? Don’t worry if it didn’t so much. The reason I bring this up is mainly related to resizing images. A very common problem is that images sometimes look stretched on bigger screens. The worst part is that this is easily fixed. Use very big images! Shrinking an image has a much better result, I promise you. Let’s not get too excited though. It is not always that simple. Scaling an image down has its consequences.

In order to maintain the ratio of the image, both the width and the height needs to be changed together. This often causes a gap between the image and whatever is displayed underneath it. You would think that this should be able to be easily resolved by pushing all the elements up on the page. For me to explain the difficulties involved here, would require me to talk more about code. But no more code talk, I know how it’s not really your thing anyway. Just to clarify though, those code snippets were necessary to explain the concept of media queries. I’m sure you already know what I am referring to. These media queries are only powerful if accurate screen dimensions are defined. Understanding that identifying these dimensions is important was the point of crazy code talk. Enough code now.

Let’s talk a little about grids instead. There are open source frameworks out there that specialize in a grid framework. For example, Foundation is a framework that adapts a mobile-first approach. It consists of three parts; the mobile, desktop and block grid. The mobile grid is defined as the ‘small grid’, whereas the desktop grid is defined as the ‘large grid’. To better understand this, I drew you a diagram. I do know how much you like them.

gridDiagram.png
Figure 2: A diagram showing a sample grid.

I hope you have not forgotten my intense code lessons from before. If you have, you will know by now that it’s not that simple. A grid helps, but in the long run other variables may complicate things. I am talking about design. Design is the one thing that can make or break a website. Without accurate and responsive design, a website won’t stand. Mapping your design to a grid will most certainly help in making your website one of a kind. Grids are supported by media queries after all. So, the important question is: are your designs ‘simply the best’? This definitely requires a different session.

Author: Marfat Abdullahi.