Our Blog

Responsive Website Design

By Heshy Friedman

Responsive Web Design (RWD) is a new approach to designing websites that provides an efficient and automatic resizing of the website based on the user’s browser’s device and resolution. With RWD, websites will load in an optimal state on desktop browsers, tablets, and mobile devices. RWD minimizes the need to enlarge or horizontally scroll by dynamically placing content in smartly sized components.

Sites designed with a proper RWD approach will efficiently size and stretch themselves to the screen without intervention. They adapt the layout by using fluid, proportion-based grids, image resizing, and complex CSS3 rules. RWD is very efficient because it eliminates the need for mobile website design and allows the website to properly fill larger screen sizes dynamically.

Prior to 2010, websites designed to stretch to the width of a screen were said to have a “liquid layout.” This generally involved the use of tables and cells and setting a percentage value. This format worked mostly for sites that were light on graphics, such as Amazon and Ebay. However, it still didn’t provide an efficient mobile format, nor was it able to resize elements and graphical components in an intelligent way. The new responsive approach has entirely eliminated the liquid layout format, especially in a world where coding in HTML tables is considered obsolete, and tableless web design has become the standard.

There are some limitations designing a site in RWD. The main concern is that the items don’t always line up in the most ideal fashion possible, especially when there are multiple graphical elements or not enough content. The most common problem is navigation menus rolling over onto the next line at certain resolutions. Overall though, most pages can be tweaked to efficiently display in all screen modes, though it can take time and trial and error to get it right on all environments and screen sizes.

Designing in RWD involves much more work than a standard web format that is not responsive. It involves more planning in structuring the coding, and needs more extensive testing in all different browser environments. Much time is spent tweaking the codes to ensure proper layout execution, and this causes the price of a RWD project to be increased by a factor of 50 to 100 percent.

Recent website trends have been following a stronger role in mobile and tablet usage, from device-friendly formats to system apps. Despite the additional cost for responsive websites, it is a worthwhile investment and should be strongly considered when designing any new website. It is important to stay up to date in this fast-paced environment, and RWD is a trend that is here to stay for a while.