The number of people accessing the Internet via their smart phones and other mobile devices has risen significantly in the past few years. As these devices become more affordable they will become even more commonplace. Mobile devices offer users distinct advantages when it comes to Internet usage. A user can conduct a search for a restaurant, nightclub, Movie Theater, or any other local establishment and be directed to the business’s website or physical address with just a click. Businesses with a website created with the principles of responsive web design (RWD) are more prepared to engage with the millions of people already using mobile devices.

What is Responsive Web Design?

Simply put, responsive web design is a set of principles that are adhered to in order to create a website that requires a minimum of scrolling and resizing in order to be visible on a range of devices. Accessing a website using a desktop computer, laptop, or smart phone should be equally convenient and user-friendly; this is what RWD aims to achieve.

The Basics of Responsive Web Design

The technical elements that go into RWD are primarily of interest to the people in charge of creating the website. Though content creators and website owners will probably have little interaction with the technical underpinnings of a business’s website, knowing something about the basics of responsive web design can be helpful.

  • Fluid grid – In traditional website design, elements such as tables, frames, and images were assigned absolute values that dictated exactly how wide or long they would be when displayed on the webpage. In absolute terms, a mobile screen is able to display less than a standard desktop monitor. However, under fluid grid design principles width and height are assigned percentage values. This allows the elements to size to fit the screen without losing important information.
  • Mobile first – Until quite recently the mobile version of websites were created only after the standard one was in place. These mobile versions had simpler designs and generally supported fewer options; only the fundamental functions of the website were preserved since mobile devices do not support all the same programming that a standard computer will. It is increasingly common to design new websites with mobile devices in mind first. If the needs of a mobile device are considered first there is much less risk that valuable detail will be lost in the transition. A standard computer user will also have an enjoyable experience since current web browsers can already support everything that a mobile browser can. Nothing will be lost when mobile devices are considered first.
  • Progressive enhancement – There are certain features contained within common programming languages, including HTML and CSS, that do not display correctly on all mobile devices. Since website designers cannot anticipate the limitations of each and every device that might be used to access a site, they can include progressive enhancement options that detect the capabilities of the device in question. Progressive enhancement is a valuable tool but one that comes along with certain caveats that can make it challenging to implement.

Responsive web design is a dynamic new approach to the creation of websites that are accessible by mobile device users and standard computer users. By putting the capabilities of mobile devices first and thinking about flexible display, a new generation of websites is being created.

Author: Edward Kundahl