Responsive Web Design(RWD): The Beginner’s Guide

Responsive Web Design(RWD): The Beginner’s Guide

Whether you are a beginner or an experienced web professional, developing responsive designs can be confusing at first because of the radical change in thinking that’s needed. Moving forward responsive web design is moving away from the pool of passing styles and quickly entering the area of the standard procedure. The magnitude of this model shift feels fundamental as the transition from table-based layouts to CSS(Cascading Style Sheet). This is a very different method of web designing and it represents the future.

What is responsive web design?

The blog that you are reading this post on is actually a responsive design. To know the difference, open this article in a desktop web browser and make the browser thinner and wider. You can see the layout automatically adjust to perfectly fit into the new width of the web browser even if you make the web page as skinny as the resolution of a mobile device.

Ethan Marcotte the creator of responsive web design. In his seminal article about responsive web design, Ethan discusses all the key factors that form responsive web design(RWD) and that is technically what responsive design is. The RWD is not a single piece of technology, but it is a set of ideas and techniques that form a whole.

What is responsive design exactly? But the better question is, what problem does responsive web design solve? As you may have noticed, computers are not the only piece of hardware with a web browser any more. But the iPhone was the first mobile phone to feature a great web browser and it put the spotlight on upgrading the experience of the mobile web. After that, many mobile devices followed the same and apparently overnight, the face of the mobile web had changed dramatically.

The changing landscape of the browsers implied that users' expectations also changed, people expect to browse the web on their smartphones just like on a desktop/laptop. In response to this the web development community developing mobile versions of their sites. Every site has their general "desktop" version and also a "mobile" version.

Technology is always moving forward not long after the phone hardware market had been changed, other form aspects flowed in popularity. Moreover, phones & personal computer devices such as smartphones, tablets, and small notebook computers started appearing everywhere. It is not just only small screens. Large, high-resolution displays are beginning to become more common than they used to be and it will be a waste for web developers to not take advantage.

Earlier in this post, it is mentioned that the responsive web design(RWD is not a single technology, instead it is a collection of ideas and techniques. Now we have a better idea of the problem space we are addressing. Let’s take a glance at each part of the solution.

Fluid Grids

The usage of Fluid Grids is the first key idea behind the responsive design. In recent memory, developing a "liquid layout' that widens with the web page has not been very famous like creating fixed-width layouts, the web page designs that are a fixed number of pixels and then centered on the web page. Although, when one considers a large number of screen resolutions present in today’s marketplace, the advantage of liquid layouts is too high to ignore.

The Fluid grids just go a few steps further the traditional liquid layout. Rather than designing a web layout based on arbitrary percentage values or rigid pixels a fluid grid is designed carefully with regard to proportions. By this approach, when a layout is compressed into a small screen device or stretched across large screen devices, all of the web elements in the layout will automatically resize their widths to one another.

To calculate the proportions for each and every web page element you should split the target element by its context. Now, the best way to achieve this is to build a high-reliability mock-up first in a pixel-based image editor such as Photoshop. With your high-reliability mock-up, you can measure a web page element and split it by the full width of the particular web page. For instance, suppose your layout size is like 960 pixels, then this is your "container" value then, our target element is some arbitrary value like 300 pixels. If we multiply the result by 100 then we attain the percentage value of 31.25% we can use this value to apply to the target element.

300/960 = 0.3125 * 100 = 31.25%

Suppose if your values do not work out as a whole number and you get floating point value with many numbers after the decimal then do not round the value.

The fluid grids are a crucial part of developing a responsive design, but they can only take us so far. When the width of the web browser becomes too narrow then the web design start to collapse. For instance, a complex 3 column layout is not going to work fine on a small screen mobile device. But, the responsive design has taken care of this issue by using media queries.

Media Queries

The CSS3 media queries are the second part of the responsive design, which currently enjoys decent support across many latest versions of web browsers. If you are not very familiar with CSS3 media queries then they basically allow you to collect data about the website visitor and use that data to conditionally apply CSS styles. For our needs, we mainly focused on the min-width media feature this enables us to apply particular CSS styles if the web browser window drops below a specific width that we can specify. If we required to apply some styling to mobile phones then our media query may look like the following:

320px
480px
600px
768px
900px
1200px

These values are just recommended and should assist as a starting point. In the real world, you can adjust your layout to exactly match with every device width, but often times you've to pick and select where you spend your efforts. From a more practical point of view, the resolutions of the design will depend on the resolutions of the design, time, highly contextual situations, budget constraints and much more.

To see a responsive design in real time, then just open this page with a desktop web browser and slowly resize the browser size. Then you can see all the web page elements automatically changing to fit to the width.

Resources

Responsive web design(RWD) has a lot of resources that can enable you to learn more about it. By using our high-quality video training service Treehouse. Following are some of the links:

  • Video: Introduction to Responsive Web Design
  • Responsive Web Design Video Course on Treehouse
  • A large list of responsive design resources
  • The W3C specification for CSS3 Media Queries
  • A great roundup of responsive design techniques via Smashing Magazine
  • Ethan Marcotte’s article on Responsive Web Design

If you have any doubts or queries about this blog, then please feel free to contact us immediately, we are here to help you. Email-id: info@htmloffshore.com

Contact Us


Content

Contact Us