Basics of Responsive Web Design

If you’re into web design, by now you must have heard a lot of chatter related to the subject of “responsive web design”. This isn’t just one of those design fads that come by once in a while and pass by in no time.

Responsive web designs are now becoming a standard practice. Clearly, the reason why all must embrace the latest design style is largely due to the expanding number and types of mobile devices used to access the web.

The all-in-one fit is an efficient way to approach the device-friendly problem a web design may have faced in the past. With the advent of RWD, we can ensure that a website will adjust according to the various browsers, screen sizes, resolutions, and other specs of a particular device.

Many believe that a responsive web design is simply one which adjusts to a certain device’s screen size. However, this notion is not entirely true. A RWD takes into consideration many other elements in design to achieve that “fine-tuning” function. Let’s look at some of those basic elements here.

Fluid Grids

In the past, many designers used the fluid grid concept for making print designs. The same concept can be applied to a web design to enable the adjustment of a page to any screen size. Instead of having a fixed width, column, and gutter size, a responsive web design will take into account the “proportion” of the grid elements. This means that the column and gutter widths will be set according to the percentage of the entire page width. Hence, the fluid or flexible grid system will allow the content to expand and contract within varying screens. On the other hand, static units that are based on pixels fail to do the same and thus they are un-responsive.

Packaging Nested Objects

Think of nesting objects as packing a cluster of objects that need to be kept just as they are. Here you may use the help of “pixels” instead of ratios. Objects such as buttons and logos should not be reduced, compressed, or expanded. Some elements need to be wrapped up and kept static to maintain logic, comprehensibility, and tidiness. RWD will also allow you to keep some elements static and not to “respond” to other elements or devices.

Media Queries

Responsive web designs achieve their purpose with the help of CSS3. A feature known as the media queries takes into account other device elements such as the screen resolution. This is to ensure that the “fluidity” function is performed without distortion and loss of quality. To expand and contract according to screen size may not be the only solution to the problem.

As I mentioned earlier, many are under the assumption that a responsive web design is all about adjusting web pages to screen sizes. What about the resolution and content quality? Media queries can be thought of as a set of rules or guidelines that respond to the width and display of window. You can target different resolutions and set separate layouts (320px, 480px, 600px, 768px, 900px…etc.)

The Flow

It is also important to make sure you set the right flow to your responsive web design. The smaller the device, the more vertical space it will take up and push down the elements to the bottom. A responsive web design will have more flow to it, unlike a static web page that will end up overlapping elements because of lack of flow.

Break Points

These work in conjunction with media queries. While media queries set the rules of how the page will appear according to specific screen resolution, break points provide the transition between media values. They permit the layout to change at pre-set points.

For example they may define how many columns to display on a desktop computer as opposed to those on a mobile device. Or, how many rows the menu bar will have according to the device (maybe two split columns on a mobile devices and one on a desktop computer). Possibly, few elements will shift to the bottom of the page and others will be eliminated.

More Tapping and Less Clicking

Responsive web designs also take into consideration the fact that many smaller devices such as smartphones and tablets are enabled with touch mechanisms. This makes it a whole lot different from the traditional mouse clicking method practiced on desktop computers.

An RWD will, for example, ensure ease of navigation so as to prevent the difficulty of “clicking” on items. For example a mouse pointer will easily point to a small, clickable object such as a small button. However, the same may not be easy on a touch device. Therefore, a responsive web design will work according to the touch mechanism in mind by nesting elements such as buttons, or make the menu large and easy to click on in any device.

Graphics and Download speed

The speed capabilities of a desktop computer using a broadband Internet service will vary greatly from that of mobile device using a 3G or 4G connection. For this reason, a responsive web design also accounts for the sizes of graphics and other such elements that call for a high speed and strong connection.

On a smaller device the layout will adjust in a way that might display fewer images and possibly eliminate videos, ads or other such heavy elements. Larger images will be replaced with smaller ones. The desktop version, on the other hand, will include everything since the internet and processing speed is not a major issue. Heavy objects will be adjusted to ensure that the web page does not take forever to download.

In conclusion

For now, understanding the basics of a responsive web design might have given you a bird-eye view of how this latest technology changes everything for web designers.

The basic features of an RWD will help you further in your knowledge and understanding of the RWD with other more technical concepts.