Build a Responsive, Mobile-Friendly Website From Scratch: Introduction

In the last series (“Understanding Responsive Web Design“), I defined the basic features of this new and important responsive approach to mobile-friendly, device-agnostic design. Now, let’s set the stage for a more concrete work. We’ve seen that there are many aspects to take into consideration throughout the responsive design process: screen size, operating platform, user behavior, and so on. We have explored the various measurement options for fonts in a website, and we’ve covered the best way to approach typography in terms of responsive web design. We’ve explored the characteristics of four different layout types and their respective fields of implementation. We’ve covered some common problems that a web designer may encounter when managing responsive images (and pointed out potential solutions). Finally, we’ve explored the problem of cross-browser compatibility and proposed different ways to achieve it. Now it’s time to demonstrate some real-world technical applications of the responsive web design and build a real responsive website.

Objectives

Let’s start with defining the objectives of this new series, and highlight what you’ll learn. Thanks to this tutorial…

1. You’ll learn how to create a responsive design mockup, taking into account the main features of a website, the users’ needs, and the way to effectively combine responsive graphics and web design. The mockup of the website won’t be unique to one platform, and it’ll provide an example of the possible structure of a portal from several standpoints—imagining the view on three different devices: smartphones, tablets, and desktop PCs.
2. You’ll learn how to take full advantage of modern web technologies, namely HTML5 and CSS3, applying them step-by-step to each component of your web content.
3. You’ll see how to implement some rules related to responsive web design, by applying what we have analyzed conceptually in prior articles.

Media Queries

One of the foundations or responsive design is media queries, which ultimately make the site accessible and usable by the largest number of users, including those who do not use recent versions of popular browsers such as Internet Explorer, Mozilla Firefox, and Chrome. Let’s start by getting our hands dirty with media queries; they represent one the most important tools that a web designer has to make their website responsive and mobile-friendly. Media queries are composed of two main parts:

• @ media screen — The first part of a media query is the type of support. You might recognize this syntax from writing your own CSS styles, especially if you used this method before when designing printing options for your website.
• (min-width: 500px) — The second part is the query itself. It includes the function to be evaluated (in this case, the minimum width of the browser window) and the corresponding value to test that the rule has been applied (in this case, a value of 500px).

Thinking about responsive web design, there is a tendency to focus exclusively on the width property, but there quite a few other attributes to consider when designing for a variety of screen sizes. There are many more valid properties associated with media queries. They are:

1. width / height — With these properties, you can set the width and height of the display area including any scroll bar. You can use the prefixes min and max.
2. device-width/height — These properties set the width and the height of the rendering surface, that is, the width and height of the entire screen of the device and not simply of the display area of the document. Even in this case, you can still use the min and max prefixes.
3. orientation — it sets a vertical or horizontal orientation. By specifying particular rules in the CSS stylesheet, you will be able to define how the various elements of a web page will be displayed on the device, in this case, depending on the orientation of the device we use. We can then specify the type of orientation; landscape and portrait that allow us to change the layout of your design according to the current orientation of the browser.
4. aspect-ratio — This is a property that sets the ratio between the width and height of the display of a document. Even in this case, you can still use the min and max prefixes.
5. device-aspect-ratio — This attribute monitors the ratio between the width and height of the device. Prefixes min and max are allowed.
6. color — This applies certain CSS styles for all color devices. Prefixes min and max are allowed, but very few black and white devices (besides inexpensive Kindles) remain as popular browsing options
7. color-index — This describes the number of colors in the palette supported by a device. It can have min and max prefixes.
8. monochrome — This property indicates the number of bits per pixel of a monochrome device (grayscale).
9. resolution — Resolution sets the resolution (i.e. the density of pixels) of the output device. The values ​​of the resolution can be expressed in DPI (dots per inch) or in DPCM (dots per centimeter).
10. scan — a valid property for television screens that indicates the type of scan, interlaced or progressive. The values ​​can be precisely progressive or interlaced.
11. grid — Grid indicates whether the device is a bitmap type or a “grid” equivalent.

Breakpoints

After this short overview of the main (and often underutilized) properties of media queries, let’s proceed by pointing out what are the best responsive breakpoints and how to determine them for a given project. Breakpoints in terms of responsive web design are browser widths that have a media query declaration to change the layout once the browser is within a declared width range. More specifically, a breakpoint is a point on a line that starts from 0, where there is a change (via CSS) within the layout of the page. Breakpoints are defined with numeric values ​​and units of measurement based on the media queries entered into your CSS stylesheets. In general, every responsive website has a minimum of two breakpoints — one for tablets and one for mobile devices. Each breakpoint corresponds to a media query. In the media query below, I wrote CSS that only takes effect when the minimum width of the browser window (min-width) is equal to a specific value (that can be 320px, 480px, 768px, etc..). Here is an example of one of these standard breakpoints:

@media only screen and (min-width : 320px) {

/* Styles */

}

But, how many breakpoints does a web designer need to create? This depends on the characteristics of the website, on its layout, and on the techniques that you decided to implement in order to turn your design plans into something truly interactive and responsive In essence, we could answer the previous question in this way: You need a breakpoint for every device that you deliberately choose to support.

Breakpoints According to the Devices

Today, the prevailing practice tends to set breakpoints based on the size of the screen (or browser window) of the following popular device types:

• Smartphone (with portrait or landscape orientation)
• Tablet (with portrait or landscape orientation as well)
• Netbook
• Desktop PC monitor with high or very high resolution

Translating this scheme into pixels, you can see how for smartphone and tablet categories, the “standard” sizes adopted mainly correspond to the screen dimensions of the iPhone and iPad:

• 320px — iPhone in portrait orientation
• 480px — iPhone in landscape orientation
• 768px — iPad in portrait orientation
• 1024px — iPad in landscape orientation (as well as netbooks, since these devices typically have a horizontal resolution of 1024px).

Someone might argue that not all smartphones and tablets are iPhones or iPads, and they’d be unquestionably correct. But, in this case the screen size of the Apple device is used more as a reference point for a greater category of devices. Moreover, creating a breakpoint for each and every device would be totally absurd. A good practice could be defining a set of main breakpoints possibly combined with some secondary breakpoints in order to fit the document to specific devices. You could also think about creating a custom breakpoint; this is very straightforward but requires a familiarity with media queries, so I suggest practicing initially with basic media queries and common breakpoints. It’s extremely important to test your dynamic layouts, including the breakpoints themselves, and the CSS that executes under certain screen size conditions. If you do not have both of those aspects of your responsive design in good order, you’ll end up with glaring layout and functionality problems that make your website less responsive than if you hadn’t attempted any mobile-friendly accommodations. Test your designs thoroughly!

Conclusion

I have introduced the main objectives of the series, and above all, I have given a short but complete introduction on the critical components of media queries and responsive breakpoints. In the next article, I’ll start with the planning and the creation of a mockup for each of the three main device types on which our website will be designed, tested, and displayed. Want to learn more about Responsive Web Design? Check out SitePoint’s new book, Jump Start Responsive Web Design!

Frequently Asked Questions on Building a Responsive Website