Getting Started with Responsive Web Design

These days, the internet is ubiquitous. No longer confined to desktop computers, the web is on your phone, your tablet, your laptop and even your television. Web pages that take this new multi-platform world into account are using Responsive Web Design (RWD). RWD is a web design approach aimed at crafting sites to provide an optimal viewing experience across all platforms, from desktop to mobile. The concept is often associated with terms like fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross device design, and flexible design, just to name a few.

What is responsive web design?

The iPhone was largely responsible for putting the spotlight on the mobile experience. This spotlight has made it clear that people expect to browse the web on their phone just as easily as the desktop. Nobody should argue that the spectrum of screen sizes and resolutions is increasing every day. In addition to mobile devices and computers, devices like touchscreens, high resolution monitors, tablets, and netbooks are becoming more common. Creating different version of a website that targets each individual device is not practical. This is where RWD becomes important.

Is responsive design my only choice for a mobile site?

No, responsive design isn’t your only choice. You can also develop a mobile sub-site or a native application. A mobile-sub site is a targeted set of mobile pages delivering device specific functionality. Native applications are the best solution for delivering an immersive mobile experience.

Responsive websites create the optimal viewing experience for any web page regardless of the screen size. This includes easy reading, navigation with a minimum of resizing, and panning and scrolling across a wide range of display devices. It’s important to understand that RWD isn’t a single piece of technology. There are three primary parts of building a responsive site, as shown in the following table.

CSS 3 media queries Used to evaluate parts of the browser environment to determine which CSS to apply.
Fluid grid layouts Used for relative CSS proportions for page layouts.
Fluid images and media Making images scale to fit within the size constraints of their containers using CSS and scaling proportionally with the rest of the layout.

Developing a Responsive Webpage

Responsive sites are very tuned into the size of the browser window. Within a browser, the viewport is the visible portion of the canvas. Essentially, this is the area the browser makes available to display your webpage, and is the size that that will determine how a webpage is displayed. When developing a responsive webpage, how can you tell the what the current browser window size is? Well, depending on your browser, here are a couple of utilities available:

Browser Utility Download URL
Firefox Firesizer
Internet Explorer Developer Toolbar
Safari Resize Safari
Chrome Windows Resizer

Why are we using a desktop browser?

Resizing the desktop browser size is a good place to start when developing a responsive site. However, testing on as many mobile devices as possible is also essential for the final release of any site.

With the Firesizer utility installed, let’s open the Home page of the sample corporate site of Kentico CMS 7, and at the bottom of the page we can see the display size as shown in the following screenshot.
Size displayed at the bottom

Now, let’s take a look at a pre-built responsive example page. In the Kentico CMS sample corporate site homepage, click the Mobile development link in the Examples column, as shown in the following screenshot.
Mobile development link

In the left-hand menu, select Responsive design, as shown in the following screenshot.
Responsive design link

With the web page fully expanded, we can see that it contains a nice wide border and a standard three-column layout with padding that displays nicely on a widescreen monitor.

Page fully expanded

If we decrease the page size to about half the size of the monitor, we can see that the layout responds by moving to a two-column layout.
Two-column layout

If we look at the bottom of the screen we can see the browser window size:
Size displayed at the bottom

If we decrease the size again down to about a third of the total screen, we can see that the layout changes to a single column design:
Single-column design

If we look at the bottom of the screen, we can see the browser window size.
Size displayed at the bottom

Final Thought

In this article we looked at just the basic definition and techniques associated with Responsive Web Design and mobile development. However, this article just scratched the surface of the subject, and offers basic techniques that are used to build pages that provide an optimal experience for the multi-platform world. In additionto extensive documentation, Kentico also provides a variety of videos that you can use to further your knowledge around Responsive Web Design and mobile development.

Learn more about the Mobile Website Support

We're named a Challenger in the 2019
Gartner Magic Quadrant for WCM!