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

Share this article

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

What are the key elements to consider when designing a responsive website?

When designing a responsive website, it’s crucial to consider the layout, flexible grid, flexible images, and media queries. The layout should adapt to different screen sizes, ensuring the website looks good on all devices. A flexible grid system allows the layout to resize dynamically. Flexible images are essential to ensure they don’t break the layout when the website is viewed on different devices. Media queries allow the application of different CSS styles for different devices based on characteristics like screen resolution and orientation.

How can I test the responsiveness of my website?

You can test the responsiveness of your website using various tools available online like Google’s Mobile-Friendly Test, BrowserStack, and Responsive Design Checker. These tools allow you to see how your website looks on different devices and screen sizes. Additionally, you can manually resize your browser window to see how the layout changes.

What is mobile-first design and why is it important?

Mobile-first design is a design strategy that starts by designing for the smallest screen sizes first and then progressively enhancing the design for larger screens. This approach is important because it ensures your website is optimized for mobile users, who make up a significant portion of web traffic.

How does a responsive website improve user experience?

A responsive website improves user experience by ensuring that content is easily readable and navigable on any device, regardless of screen size. It eliminates the need for users to zoom in or scroll horizontally to view content, leading to a more enjoyable and seamless browsing experience.

What is the role of CSS in creating a responsive website?

CSS plays a crucial role in creating a responsive website. It allows you to apply different styles to different elements depending on the characteristics of the device the website is being viewed on. This is done using media queries, which let you apply specific CSS rules for different screen sizes.

How can I make images responsive on my website?

To make images responsive, you can use CSS properties like max-width, height, and object-fit. Setting the max-width property to 100% ensures that images scale down if they have to, but never scale up to be larger than their original size.

What are the common mistakes to avoid when building a responsive website?

Common mistakes to avoid when building a responsive website include not designing for all screen sizes, using non-responsive images, not considering touch-friendly design for mobile users, and neglecting performance optimization. It’s also important to test your website on actual devices, not just in a responsive design checker tool.

How can I optimize the performance of my responsive website?

You can optimize the performance of your responsive website by minimizing HTTP requests, optimizing images, enabling compression, minifying CSS, JavaScript, and HTML, and leveraging browser caching. These techniques can help to reduce page load times and improve the overall user experience.

What is the difference between adaptive and responsive design?

While both adaptive and responsive design aim to optimize websites for different devices, they do so in different ways. Responsive design uses flexible and fluid grids to adjust the layout to the viewing environment. In contrast, adaptive design uses static layouts that are designed for specific screen resolutions.

How can I learn more about responsive web design?

There are many resources available online to learn more about responsive web design. Websites like W3Schools, Mozilla Developer Network, and CSS-Tricks offer comprehensive guides and tutorials. Additionally, there are numerous online courses available on platforms like Coursera, Udemy, and LinkedIn Learning.

Annarita TranficiAnnarita Tranfici
View Author

I have a Bachelor's degree in European languages, cultures, and literature from the University of Naples. I'm passionate about graphics and web design, and for several years I've been working on projects and designs for many companies. I'm a writer for the Audero User Group; my specialties are HTML, CSS, Web Design, and Adobe Photoshop.

mobile web tutorialsResponsive DesignTutorials
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form