Responsive Design: How it Works?

By -

The first article of 2012 is a sort of introduction to a technique that will be used increasingly, talk of responsive design , but what is it? It ‘a technique that exploits the capabilities of a web page to fit in a logical manner at different resolutions. So in short, with only CSS, one can develop the same Web page version of my website that graphically differs according to the resolution adopted, in a fast, dynamic and fully compatible with all major web browsers and mobile.

If you think the field of smart phones and tablet, take a solution of responsive design could be a viable solution to observe essentially the same job but with targeted results and optimized according to the device used (whether on a PC, a netbook, smartphone or tablet ).But as I will discuss during the life of this paper is a technique that is used in the right conditions for development.

Some examples?

Before passing to the technical part I show some examples of responsive design , both for schiarirvi the ideas in this regard. Try to view these works from a browser window full screen, gradually reducing it until it assumes the resolution of a smartphone, it’s fantastic is not it?

The importance of media queries

To create a product that meets the specifications of responsive design is crucial to better familiarize themselves with media queriesthat CSS offers. To understand this better, “a media query defines one or more conditions of validity within which you can perform certain operations.”


@ Media screen and (“validity condition”) { / / Conditions CSS

You see, in fact, that in this way you can manage the objects within a page according to the resolution of the window browser , imagine you have a web page for the standard versions with a menu very complex and quite cumbersome to be viewed with a mobile devices, to ensure that it can be enjoyed even by smartphone I have to define a media query so that it can also be seen on lower resolutions, here is a concrete example:

@ Media screen and (max-width: 320px) {
. bigmenu  {
display : ninth ;

. Smallmenu  {
display : block ;

At the end of my CSS that regulates the look and feel of the page I can define the variations in the event that the window was smaller than a width of 320px …

@ Media screen and (max-width: 320px)

If this condition is met … I operate in such a way to hide the menu to appear more cumbersome and one for the “mobile” version:

. Bigmenu  {
display : ninth ;

. Smallmenu  {
display : block ;

Similarly I can adjust the properties of other objects within the page.

Much more clear now?

Practical Example

So in short I made some examples that you can see  download the source files by clicking the link below


Detractors of responsive design

Before you venture upon this technique, I wandered the web looking for feedback more or less reassuring, finding for it.However, a niche not entirely isolated claims that this technique should not make the “gospel” … and I’m with them.

As mentioned earlier in this article, the general rule that the computer provides any type of project is the phase analysis in which we provide different solutions for improved product quality and secure in our case, this technique may not always be taken literally because presented as innovation and novelty. Campiamo why.

When not using the correct responsive design?

When we talk about web Development for mobile face delicate as a chapter in the analysis phase we need to anticipate technical problems and solutions that must be good not only for “ iPhone ”but for all major operating systems and devices available, some examples?Android, iOSx, Windows Mobile, Symbian and company. We will list a series of questions to ask yourself before you start developing a project with this technique:

  • How bad my site?
  • This question has in mind rimbombarvi nauseam, most mobile websites are designed as a separate product because the loading speed of a cell that is not usual that we expect on the web. Imagine having a portal with hundreds of images, texts and information. It would be appropriate to use this technique? I leave you the answer.
  • Can I lighten the site by withholding information?
  • The answer is simple: NO ! Even if we use tricks such as “display: none” or “visibility: hidden” does not solve the problem at all because of lightening the objects are hidden but still read the page and then the load time itself remains unchanged.
  • Can I scale images?
  • Although it is a fairly common technique is also a solution completely wrong , would anyone bother to read the policy on the browser, Safari, for example in his guidance officer cites words:

 “You also need to Appropriately sized images. Do not rely on browser scaling. For example, do not put at 100 x 100 image in a 10 x 10 <img> element. Tile small images backgrounds, do not use large background images. “

Translated : It ‘ MUST use the appropriate format images. Do not rely on “browser stairs.” For example, do not resize to 10 × 10 100 × 100 image that is great. Do not use background images in large size .

This is because the CPU of the smartphone, which is not that of a PC is subjected to greater stress when facing this kind of work.

Disturbing elements to the mobile version?
Not all devices are able to interpret correctly video, flash animation, javascript, new technologies such as html5, css3 jquery or so to analyze the presence of these elements in the web desktop version is a thoughtful solution and subsequently decide whether it should proceed or not.

Give the same information is always correct?
Who is geared to mobile Development (web and otherwise) knows that the user’s browsing experience is different than the desktop.For this reason we highlight the main information , ignoring the secondary ones in such a way as to facilitate the navigation mainly because the displays are not large enough and the connection time is much lower than that of a PC. Organize better the arrangement of the information is one of the things that can be done easily via CSS just as in the examples above (via media queries) but how can we reduce the information to the reader? Anyone sailing on smartphones is expected to actually find a text or just an extract mileage more important? Be good at capturing the intentions of your niche audience and act accordingly.

Obviously this should not scare you, I am absolutely in favor of new solutions because the approach represents a fair compromise for what I’m going to accomplish. But who comes close to this approach must be aware of the pros and cons to be addressed so as not to be caught off guard and preserve more than a developing solution being analyzed.


He has over 5 years of experience as Online Media and Marketing Consultant, which allow him to enable companies to enhance and meet their Digital marketing goals. He has experience as both in-house and Agency Digital Marketing Experts. Ha has spent the most recent 4 years of his career focusing building Strong terms of Digital Marketing for his clients. In addition to his strengths on Building Brands and Serving Online Marketing strategy for his clients.

Comments are closed.