Responsive web design renders webpages compatible with multiple devices and browsers. However, creating the design can initially prove to be bit tricky even for experienced web developers. This is because of the significant shift in thinking pattern that is required to create the dynamic pages.
Responsive design is no longer a luxury but is an industry standard. It is the future of web designing. As devices over which webpages can be viewed are adopting newer dimensions, the need for responsive designing is being felt more.
Responsive Web Design: The concept
You often browse various webpages through your mobile device. The layout of any such page is an example of responsive website. If you want to experience its working, just open the site last browsed on your mobile in a desktop browser. The site would intuitively adjust its dimensions to match the viewable size of the browser. If you change the browser size, the page would automatically adjust for optimum viewing.
iPhone had pioneered the concept of responsive design for its iOS browser. Gradually, all other devices adopted and implemented this technology to offer unparalleled UI responsive design experience to audiences. As web browsers increased in number and were developed particularly for mobile devices, the concept was aggressively implemented to ensure that users can browse sites on mobile as comfortably as that on the desktop.
During the initial days, separate mobile versions of the sites were created and deployed on mobile phones. Since technology was gradually evolving, each site owner maintained mobile and web versions of their webpages. In the meantime, the hardware landscape of phones was getting revolutionized. Normal phones and PCs were experiencing competition from touchscreen smartphones and notebook computers. The prices of the devices were affordable too and hence they started permeating the mass market at a rapid pace. Along with smaller screens, web designers were trying to benefit from the emergence of bigger and higher resolution displays.
As technology is advancing, the array of screen resolutions and dimensions is also growing. Web designers understood the problem that maintaining separate web versions for each type of screen size is literally impossible. To overcome this impracticality, responsive web design was invented. The responsive design philosophy is not based on a standalone technology. Rather, it blends different techniques for creating impeccable results and multi-device webpage compatibility.
Useful Article:
Wireframing A Responsive Website Design: A Brief How-To Guide
Media Queries: The concept
CSS3 media queries are an integral part of responsive design. All modern browsers offer support for these. The queries facilitate collection of data about website visitor which is then used for conditional application of CSS styles.
When you narrow down the browser window, the min-width media query comes into play. Specific CSS style is applied once size of browser window goes beneath set width. Similarly, webpages can be styled for mobile phones with specific media queries.
A sequence of media queries can be used for increasing the resolution of webpages. The resolution is specified by pixel width. Commonly used widths are 320px, 480px, 600px, 768px, 900px and 1200px. These pixel sizes are commonly used and one can start from them.
Ideally, you would want media queries which can intuitively adjust site layouts for accurately matching width of all devices. Sometimes, you have to make a conscious decision regarding the area where your efforts should be directed. You need to rely on your insights and discretion for choosing the perfect resolutions to work at. This depends upon the context of situation, resolutions at which you expect users to browse the site, budgetary and timing considerations. Choosing a viable option is practical because if you target large number of resolutions, you would have to spend more time and efforts. This may not be feasible on your part.
To check if the responsive design created by you is working or not, you need to open the webpage on a desktop browser. Now, go about resizing the browser slowly, make it narrow. The elements on the page would automatically adjust themselves for fitting to the new width. You can change the browser size to that of mobile browser, yet the display would remain undistorted.
CSS(Cascading Style Sheets) media queries
You can understand about the queries by doing simple exercises. The background color can be updated depending upon the width of device in theelement. Prior to starting with complex layouts, you can start simple to ensure that the CSS media queries are functioning properly.
Let’s create a fresh stylesheet as styles.css for differentiating amongst layouts of narrow, medium and wide sizes. You have to add this:
*{
margin: 0;
padding: 0;
box-sizing: border-box; /* Avoid overflowing of layout outside the specified size*/
}
/* Mobilephone*/
@media only screen and (max-width: 367px)
{
body {
background-image: url(image1.jpg);
background-size: cover;
}
}
/* Tablets*/
@media only screen and (min-width: 368px) and (max-width: 990px)
{
body {
background-image: url(image2.jpg);
background-size: cover;
}
}
/* Desktop*/
@media only screen and (min-width: 991px)
{
body {
background-image: url(image3.jpg);
background-size: cover;
}
}
3 varying background images would be visible once the browser is resized.
To start a media query, you have to use @media (at-rule) and follow it up with a conditional statement of adequate type. Next comes curly braces in which a group of common CSS rules is clustered. The rules would be executed by the browser only if the condition is fulfilled.
With the only screen ‘media type’, the browser is instructed to apply the contained styles to devices that have screens. This would not be applied to printed documents when Ctrl+Pis hit within the browser. Media features are ‘min-width’ and ‘max-width’ parts which are used for specifying the dimensions of the targeted device.
The media queries discussed above would be commonly encountered. You can also work with many other conditions like if the device’s orientation is landscape or portrait, whether the device is being operated by mouse, and the screen’s resolution.
With @media, various layouts for different device widths are defined. You have to choose the layout for ux responsive design based on your specific implementation goal. The web designer is responsible for providing the site developer with different mockups. For implementing the individual layouts, you have to use media queries for separating out the different CSS rues that are applicable to each.
For facilitating smooth collapsing of the desktop layout to mobile layout, you can use well-defined patterns. Also, layout shifter is available. The decisions have to be taken based on the design of the website. As a developer, you must focus on a few important things. The layout which can be stretched and shrunk for filling the screen’s width is called ‘fluid’ and is very flexible. In contrast, the width of ‘fixed-width’ type layout remains the same irrespective of the dimensions of the screen. The fluid layout types are used with tablet and mobile versions of web pages whereas fixed-width is used for the desktop version.
Selecting the Breakpoints
Majority of css responsive websites design patterns behave similarly. Fluid layout is used for handheld devices whereas fixed-width layout is used for desktops and static screens. The reason behind this is that different screen widths can be targeted for various mobile devices using fluid layouts. This facilitates web designers very much especially during the creation of mobile layouts. Layouts need not be made by keeping specific phone models in mind. The fluid layout would make web pages appear good in the range of pre-defined screen widths.
In responsive website, ‘breakpoints’ are accurate pixel(px) values for parameters related to (minimum)min-width and (maximum)max-width within media query. With fluid layouts, the breakpoints are not relevant as the website does not concern itself with the device being used. The focus is on making the website layout appear aesthetically good at different screen widths.
Mobile-oriented web development
While developing web pages, it is recommended that you begin with mobile version of website layout and then gradually move towards the desktop mode. The complexity of desktop layouts is higher compared to mobile versions. If you start with mobile approach, the CSS that can be reused in various layouts can be maximized.
In theelement of responsive.html, empty boxes have to be filled first. Each box carries some text within it so that boxes can be classified easily. We will understand this with below-mentioned code example.
The basic styles which need to be uniformly applied across mobile, desktop and tablet layouts are discussed below. These styles have to be added before the @media queries rules which have been built earlier. The selector rule discussed now would help in resetting the padding and margins.
body {
background: #f1f1f1;
display: flex;
margin: 0;
flex-wrap: wrap;
}
.section {
height: 100px;
width: 100%;
display: inline-block;
text-align: center;
}
.header {
background-image: url(image1.jpg);
background-size: cover;
}
.content {
background-color: #2bbbd2;
height: 400px;
}
.col-1{
background-color: #b7e0e0;
}
.col-2{
background-color: #93d8d8;
}
.footer {
background-color: #000000;
color:#ffffff;
}
When the browser window is narrowed down, the complete mobile layout would become apparent. Media queries would not be required and as such this mobile-centric approach is recommended. Handling of any special type would not be required in mobile version. The ease of implementation of desktop and tablet layouts is facilitated with flex-wrap property within containing body.
When the base styles are kept free of media queries, they can be surmounted for adding on newer elements during the implementation of specific layouts. This convenience many designing processes like the tweaking of the color scheme of the complete web site. You can update the color details from one point instead of having to track down excess declarations about background-color in various @media rules. The change is intuitively applied to the layouts for tablet, smartphone and desktop.
Tablet Layout
There is a single difference between the mockups for mobile and tablet layouts. A 2X2 grid is formed when ‘col-1’ and ‘col-2’ sections are used. Single column is not formed. This is made possible by Flexbox. The flex items’ widths have to be adjusted to the screen’s half. Rest would be taken care of by flex-wrap. This behavior is ideally applicable for tablets or similarly sized screens. An @media rule has to be used.
The present /*Tablet Styles */ media query has to be substituted with below-mentioned code:
/* Tablet */
@media only screen and (min-width: 368px) and (max-width: 990px) {
.col-1,
.col-2
{
width: 50%;
}
}
In order to experience the change, make the width of the browser window anywhere in the range of 400px to 900px. Next, you have to navigate down to the page’s bottom. A colorful grid would appear. The perfect screen width does not matter always. The layout is fluid and intuitively adapt to the screen’s width within the range of media query. The mobile layout, discussed above, is fluid. The resultant website would appear attractive in all devices with screen width lesser than 960 pixels.
Desktop Layout
If you want to prevent the web page from expanding infinitely, you have to use the desktop layout. For this, page has to be given fixed width which would also be centered with auto-margins. Like tablet style, the instructions have to be included in the media query. The present /* Desktop Styles */ media query has to be replaced with below-mentioned code:
/* Desktop*/
@media only screen and (min-width: 991px) {
body {
width: 990px;
margin: 0 auto;
}
.col-1,
.col-2 {
width: 50%;
}
.header {
height: 400px;
}
}
You will get the right width for all screen types. The header has been made taller. To get a perfect desktop layout, little reordering is required.
In less than 100 lines of CSS codes, we have been able to build a responsive website. Further, for accommodating the layouts for tablet, mobile, and desktop, the HTML code has not been modified even a bit.
The above example is a single instance of the process of defining the layout for a responsive website. Other designs too can be implemented by following the same process and techniques. You have to choose the base style that would be applicable to the complete site. The style then has to be tweaked for different widths of devices through selective application of CSS rules with the help of @media. If you want to cater to ultra-widescreen viewing devices, you may insert a media query for creating the dedicated layout.
Preventing Viewport Zooming
Before finishing up with responsive web page designing, we need to disable viewport zooming. Prior to the advent of responsive design, the desktop layout was the standard for webpages even on mobile screens. To become compatible with this, the mobile device caused zooming in for fitting the complete desktop layout into the mobile screens width. The users could interact by zooming in as and when required.
Due to the default behavior, mobile devices would be prevented from utilizing the mobile layout which is not desirable. For disabling it, you need to append the element mentioned below into the document’s. This critical element is similar toand must be present on every single webpage created by you.
<metaname='viewport'content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
For checking out the outcome of this code, the mobile device has to be simulated on the desktop browser. You need to have an advanced understanding of CSS to be able to use this, but an overview is presented here.
Open Google Chrome and then start the responsive.html. Navigate to Developer Tools from View-> Developer in the menu bar. For simulating the mobile device, Toggle Device Toolbar icon has to be clicked on. Once you come across the zoom disabled version, the browser would start acting as a mobile device. You can browse tutorials for Chrome dev tools to get better insights into it. On a mobile device, by navigating to the example project’s live before and after versions, you can get to see how the changes in viewport are panning out.
Conclusion
The information needed for creating responsive websites has been summarized in the above discussion. The process involves creating mockups for different layouts of responsive design, developing CSS rules for the implementation of different layout types, and creating media queries for conditional application of these CSS rules.
You have understood the difference between fixed-width and fluid layouts. You have also learned how to build mobile-oriented stylesheet which uses media queries for building desktop and tablet layouts atop base styles shared. You can also disable the viewport zoom behavior which is activated by default in mobile browsers.