Responsive web design
Nowadays, almost everyone has a smartphone or tablet in hand; this article prepares these individuals to adapt their portfolio to this new reality. Acknowledging that, today, there are tablets that are also phones and some laptops that are also tablets, we use an approach known as device agnostic, where instead of giving devices names, such as mobile, tablet, or desktop, we refer to them as small, medium, or large. With this approach, we can cover a vast array of gadgets from smartphones, tablets, laptops, and desktops, to the displays on refrigerators, cars, watches, and so on.
Photoshop
Within the pages of this article, you will find two Photoshop templates that I prepared for you. The first is small.psd, which you may use to prepare your layouts for smartphones, small tablets, and even, to a certain extent, displays on a refrigerator. The second is medium.psd, which can be used for tablets, net books, or even displays in cars.
I used these templates to lay out all the sizes of our website (portfolio) that we will work on in this article, as you can see in the following screenshot:
One of the principle elements of responsive web design is the flexible grid and what I did with Photoshop layout was to mimic those grids, which we will use later. With time, this will be easier and it won’t be necessary to lay out every version of every page, but, for now, it is good to understand how things happen.
Code
Now that we have a preview of how the small version will look, it’s time to code it. The first thing we will need is the fluid version of the 960.gs, which you can download from https://raw.github.com/bauhouse/fluid960gs/master/css/grid.css and save as 960_fluid.css in the css folder.
After that, let’s create two more files in this folder, small.css and medium.css. We will use these files to maintain the organized versions of our portfolio.
Lastly, let’s link the files to our HTML document as follows:
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Portfolio</title>
<link href=”css/reset.css” rel=”stylesheet” type=”text/css”>
<link href=”css/960_fluid.css” rel=”stylesheet”
type=”text/css”>
<link href=”css/main.css” rel=”stylesheet” type=”text/css”>
<link href=”css/medium.css” rel=”stylesheet” type=”text/css”>
<link href=”css/small.css” rel=”stylesheet” type=”text/css”>
</head>
If you reload your browser now, you should see that the portfolio is stretching all over the browser. This occurs because the grid is now fluid.
To fix the width to, at most, 960 pixels, we need to insert the following lines at the beginning of the main.css file:
Code 2:
/* grid
================================ */
.container_12 {
max-width: 960px;
margin:
Once you reload the browser and resize the window, you will see that the display is overly stretched and broken. In order to fix this, keeping in mind the layout we did in Photoshop, we can use the small version and medium version.
Summary
In this article we saw how to prepare our desktop-only portfolio using Photoshop and the method used to fix the broken and overly stretched display.
