Top Features You Need to Know About – Responsive Web Design

Exclusive offer: get 50% off this eBook here
Instant 960 Grid System [Instant]

Instant 960 Grid System [Instant] — Save 50%

Learn to create websites for mobile devices using the 960 Grid System! with this book and ebook

$12.99    $6.50
by Diego Tres | October 2013 | Open Source Web Development

In this article, by Diego Tres, the author of Instant 960 Grid System , we learn to prepare our website for the present and the future with fluid grids, fluid media, and media queries, also known as responsive web design.

In this article, we will see how to prepare our desktop-only portfolio that runs in mobile phones and tablets.

(For more resources related to this topic, see here.)

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.

Resources for Article:


Further resources on this subject:


Instant 960 Grid System [Instant] Learn to create websites for mobile devices using the 960 Grid System! with this book and ebook
Published: September 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Diego Tres

Diego Tres has worked professionally since 2000, mostly with large global brands, such as Google, MasterCard, and PepsiCo. He has developed extensive technical skills in developing websites from designing to programming, and he is always aligned with a great business vision. He is always focused on frontend and is obstinate for perfection, seeking all the details involved in the execution of work to get the best results.

He was born in 1983. During his childhood, he joined a drawing course and also a painting course. After he broke his legs, he started playing keyboards in his samba group that he played keyboards. Later, he won a 586 computer from his stepfather, which included the famous software, Paint Brush; he then started gaining knowledge about Photoshop and HTML. In 1999, he published his first website using Microsoft Front Page and Macromedia Flash. His first job was as an instructor in web design; he began using web standards in the development of various applications and AJAX, and got a promotion in the same year. Later, he launched his first website for a global brand, Samsung. In 2007, he was selected as a finalist in the Grand Prix (London International Awards) for the first time. The very next year, he founded his own advertising agency; however, he unfortunately failed the first time due to the stock market crash. Later, he began using HTML5 and preprocessors, such as SASS and LESS. He also launched his website using responsive web design and Mobile First design. Recently, he had his name on a winning project. Now he enjoys animations with CSS, SVG, Canvas, and WebGL.

Books From Packt


Responsive Web Design by Example
Responsive Web Design by Example

 Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

 Instant HTML5 Responsive Table Design How-to [Instant]
Instant HTML5 Responsive Table Design How-to [Instant]

Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile

HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

 Drupal 7 Mobile Web Development Beginner’s Guide
Drupal 7 Mobile Web Development Beginner’s Guide

 Drupal 7 Development by Example Beginner’s Guide
Drupal 7 Development by Example Beginner’s Guide

 Mobile First Design with HTML5 and CSS3
Mobile First Design with HTML5 and CSS3


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
7
M
T
N
r
3
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software