There is little doubt of the fact that mobile devices are preferred to PCs and laptops when it comes to browsing the Internet. The only unfortunate news is that a small portion of the Internet is optimized for mobile devices. How content appears on a mobile device should be much different to the situation on laptops and PCs. This is because mobile devices avail a highly constrained space for the display of content. Therefore, this shows the importance of ensuring that budding and experienced web designers have a proper understanding of the fundamentals of responsive web design to come up with sites designed specifically for mobile devices.
Table of Contents
Fundamentals of Responsive Web Design
The responsive web design course is all about designing mobile-friendly websites. A web designer should create responsive websites. Some patterns in responsive designs are only great for specific devices. However, other patterns would produce stunning results regardless of the mobile device in use. By exploring all that there is to know about the fundamentals of responsive web design, a designer would then be able to come up with his unique responsive layouts. More importantly, he will be skilled in experimenting not only with breakpoints, but also with the concept of optimizing texts.
Importance of Screen Size in Responsive Web Design
Responsive web designs require awareness regarding the different sizes of desktops, tablets, phones and TVs, gaming consoles as well as wearables. Screen sizes are dynamic and keep changing all the time. Therefore, any mobile-friendly website must not restrict itself to particular screen size. For that reason, it is crucial that the designer comes up with sites that can adapt to various screen sizes regardless of the mobile device that a visitor uses to check information on a particular website. While doing so, the designer has to consider the ever-changing face of screen sizes and be in a position to understand what the situation shall be in future, and not today only.
Importance of User Needs and Devices in Responsive Web Design
A responsive web design fundamentally responds to what the user needs and the device he decides to use in accessing the Internet. A responsive design should have a layout that is capable of changing depending on the capabilities of each device and its size. What this means is that whereas a user would only be able to see content in a single column when using a phone, viewing the same on a tablet would display the information on a double column. Therefore, this indicates that display of content changes based on the device and the size of the screen on which users are able to view whatever they want.
Some of the lessons that a designer interested in coming up with a responsive web design has to undergo include the following:
1. Setting the viewport
Optimizing pages for various devices would be incomplete with the omission of an element of meta viewport. The meta viewport tag provides the browser with instructions regarding the best way of controlling not only the dimensions, but also scaling of each page. However, the viewport would be less effective if it does not promote accessibility of the site.
<meta name="viewport" content="width=device-width, initial-scale=1">
In addition to setting an initial-scale, you can also set the following attributes on the viewport:
- minimum-scale
- maximum-scale
- user-scalable
 |
 |
2. Sizing the content to the viewport
Sizing the content is crucial in enhancing user experience. Users are accustomed to scrolling vertically. Responsive web design should make it easier for users to scroll the pages vertically and not horizontally. The web designer should never force users to zoom out before seeing the results on an entire page or scroll the content horizontally.
Setting large absolute width especially for the div elements will cause the div to be too wide for smaller screens. Instead, using relative width(width: 100%) values is recommended.
 |
 |
3. Using CSS media queries to enhance responsiveness of the site
Media queries are filters applicable in CSS styles. The media queries simplify the changing of styles depending on the characteristics of each device. Therefore, with the media queries, it is possible to change resolution, orientation, height, width and display type of the content on the responsive web design.
You can place all styles required for printing inside a print media query.
<link rel="stylesheet" href="print.css" media="print">
The other two ways to apply media queries in a CSS file are @media and @import.
@media print {
/* print style sheets go here */
}
@import url(print.css) print;
4. The Mobile First Approach
One of the most popular technique with using media queries is the Mobile First method. The mobile first approach includes using styles targeted at smaller viewports as the default styles for a website, then use media queries to add styles as the viewport grows.
/* Default styles first then media queries */
@media screen and (min-width: 400px) {...}
@media screen and (min-width: 600px) {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}
More on media queries usage here.
5. Choosing breakpoints
Each class or category of device has a specific breakpoint that can produce the much-desired results in terms of responsive web design. Exercising plenty of caution at this stage is a wise move that all web designers who desire to create responsive websites must observe. The definition of each breakpoint should depend on not only a specific device, but also brand names, products and the operating systems that are in the market today. Designing the content to fit on a small screen size first is recommended, then expand the screen until a breakpoint becomes necessary. Also pick minor breakpoints where necessary. The text should be optimized for reading. Classic readability theory suggests that an ideal column should contain 70 to 80 characters per line (about 8 to 10 words in English), hence each time the width of a text block grows past about 10 words, a breakpoint should be considered.
 |
 |
6. Your website layout
The mostly fluid pattern consists primarily of a fluid grid. On large or medium screens, it usually remains the same size, simply adjusting the margins on wider screens. On smaller screens, the fluid grid causes the main content to reflow, while columns are stacked vertically. One major advantage of this pattern is that it usually only requires one breakpoint between small screens and large screens.
7. Making your Media Flexible
One of the most important aspect to responsive web design involves making the media flexible. As viewports begin to change, images, videos, and other media types should follow suit. They need to be scalable, changing their size as the size of the viewport changes.
One easy way to make media scalable is using the “max-width” property with a value of 100%. This ensures that as the viewport gets smaller any media will scale down according to its containers width.
img, video, canvas {
max-width: 100%;
}
Use of a CSS framework like Bootstrap is highly recommended to make your job much easier. Click here to check out a tutorial on How to make a Responsive Website with Bootstrap.
Spilo, a French e-marketing company has created a beautiful infographic explaining the 10 Basic Steps to make your website mobile friendly.
