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:
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.
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.
In the left-hand menu, select Responsive design
, as shown in the following screenshot.
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.
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.
If we look at the bottom of the screen we can see the browser window size:
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:
If we look at the bottom of the screen, we can see the browser window size.
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