What is Responsive Design?

In simple terms, it’s a design that responds to the user’s behavior based on screen size, platform, and orientation. This means that a responsive design is one that works on all types of different devices.

The design needs to be functional, and the images and text need to be crisp. By this, I mean that the design needs to adjust screen resolutions and automatically resize images to fit the device. However, responsive design is not only that. It’s also about a whole new way of designing.

Some of the features included in a responsive design are: adjusting screen resolution, flexible images, the custom layout structure, and showing or hiding content.

Adjusting Screen Resolution

With more devices come varying screen resolutions and orientations. The different directions include portrait or landscape, or completely square. Some devices can flip between portrait and landscape on a whim. This means that designers need to consider hundreds of screen sizes to create the right screen resolution for them all. To achieve this, everything needs to be flexible. Images need to compact themselves to fit on a phone screen but can enlarge themselves when they are on a desktop monitor. The text needs to do the same thing.

Credit: SmashingMagazine

Above is an example of what a good responsive design would do when going from a large screen to a smaller screen.

Flexible Images

Images are the hardest part of working with responsive design because they each have their original size. A fluid image is a term used for images that they are delivered at the maximum size they will be applied at. The image will resize itself for the browser using CSS to guide its size.

Different screen sizes

Custom Layout Structure

Layout structures are often similar on a similar screen. For example, a laptop website structure is very similar or the same to a website structure being used on a tablet; however, the structure of a website on a phone could be different than that on a laptop. This overlaps a great deal with the next feature.

Showing or Hiding Content

Shrinking, hiding, or rearranging elements are all ways to make the information fit on different screens, which is one of the most important aspects of responsive design. This aspect allows all the sites to be available on all devices, but some might have a different look and structure. Taking every piece from a large screen and putting it on a smaller screen isn’t always possible, so it’s critical to know what the essential parts of information are so they can stay. The smaller, less significant pieces can be hidden or rearranged.

Above are two screen grabs from The Guardian one from a laptop and the other from a phone. This is an example of rearranging, as you can see the important information is still at the top, but the side bar from the laptop view is no longer there.

All of these features are what make responsive design. Knowing what makes a good responsive design helps designers create an excellent responsive design. The features discussed above are only a few of the ways to create a responsive design. There is no clear cut way to create a responsive design because every website is different, and every device is different. The concept of a responsive design is a way to improve user experience. Designers can tailor sites for specific devices, or they can create a design for a majority of people that use the same device. Web designers want to create the best experience for all users, and this is one way to do that.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s