We often encounter a variety of websites that use fixed width pages, for example 960 pixels, with the hope that all users accessing the website will get the same look and the same experience when interacting with a linked website. Size is not too wide for the screen and a user with a laptop that has a great resolution will get a fairly wide margin on either side of the website.

But now there are smart phones. Smartphone users increasing both based on android or iPhone using Apple’s products. As some of the data that had been released, Internet users around the world are using mobile devices to browse the Internet has increased rapidly. Not to mention the increasing user supported tablets where the screen size is larger than a smart phone and smaller than a laptop.

Before we discuss further, let’s look at the picture below, which describe different screen resolution sizes are used in various devices today. So smart phone users will need to zoom in zoom out to view or read the text in the website. Not to mention the one dial often link because too little posts.

Fortunately, now there is a solution to handle different screen sizes. Responsive Design is one of the terms in the concept of a web presence that will adjust to the size of the viewport (the area in the browser area to show the website) that is used by the user when accessing a website. This technique is supported by the latest technology which most of us have been familiar with HTML5 and CSS3. Exclaim these techniques can be implemented without the need-based server or backend solutions.

Definition of Responsive Design

At first glance, this technique is quite simple, if you master HTML and CSS, then you can apply the technique of Responsive Design. Because CSS is actually done is to check the size of the browser area, and then will apply the CSS styles that fit the size. So it does not need a script based programming code such as PHP, ASP or other. This technique is purely the UX designer or a front end designer.

Responsive web design is term originally coined by Ethan Marcotte. He was viewing the three existing techniques namely flexible grid layout, images, and media queries into a single approach and called Responsive Design. Some of the terms used to refer to the same thing the other fluid design, elastic layout, layout rubber, liquid design, adaptive layout, cross-device design, and flexible design.

Marcotte and some other experts argue that the actual responsive methodology is not enough to change the layout according to the size of the browser to access, but overall overhaul of the approach we use when designing a website. Instead of starting the design on the desktop screen size fixed and then turn it down and set it for the purposes of a smaller size, but the design should be done on the size of the smallest viewport first and continue on the larger size of the viewport.

Viewport or screen size

It is important to note that the viewport and screen size or screen size are two different terms. Viewport is a content area of the browser, beyond the toolbars, tabs, or other address box of your browser. More simply again is the size or area where a website displayed on the browser.

Why should HTML5 and CSS3?

HTML5 offers tremendous advantages over the previous generation of HTML4 and HTML5 elements that are used is more meaningful or easily to understand when we read or write. CSS3 has one feature that is media queries, which is one of the key features supported by responsive design and of course other features to produce a flexible web.

Responsive Design Gallery

Before we discuss in more detail about responsive design, let’s look at a few websites that have applied this concept. For example, the well known Smashing magazine website, you can simply try to access it through a variety of devices you have. However, if you only use a computer or laptop, try as complete web page that load, just slowly reduce the width of your browser. Could you do with a click and drag it slowly to the left on the right of the display limits of your browser. You will see the changes of view from big monitor, laptop size, tablet view and even the new trends of smartphones.

Full View

Middle and Right sidebar

Middle and Left Sidebar

Middle view only

Equally we know that the width of your PC or laptop monitor is wider than the tablet PC and the Tablet PC is wider than the cell phone or smart phone so that when it is used to access the same site it often produces a different look because the theme or layout of the site that are not responsive against the access device. Responsive Technology web design is actually utilizing the latest technology of HTML5 and CSS3 that has so many features in designing a website and you might want to try applying this concept for your new project.


Enjoy blogging, love everything about Designs, and a WordPress Evangelist.

More Posts

Leave a Reply

Your email address will not be published. Required fields are marked *