Pages Menu
Categories Menu

Posted by on Nov 26, 2012 in Mobile |

Web design adaptive or responsive design

Web design adaptive or responsive design

We are in a mobile world, and increasingly we access Internet from various devices with different needs and situations. As the role designers have full control of what was presented statically fixed, printed, web designing for many encounter resolution screens with different browsers, with ways of interacting ranging from a keyboard, mouse , stylus or fingers. As John Allsop, developer, “we must understand and embrace the idea that the web does not have the same limits and we must design with this flexibility. But first we must accept the ebb and flow of things. “

The adaptive web design, web design responsive English, sometimes not quite correctly translated as “responsive design” has everything to do with it. It is a technique of web design and development, through the use of structures and fluid images and average queries in CSS style sheet allows the website matches the user’s environment, regardless of the device used for navigation.

The term was coined by Ethan Marcotte, who in addition to writing a series of articles on the subject at A List Apart, published a book which he called Responsive Web Design , describing theory and practice. One concept W3C Web had left in 2008 and refers to building a website for all (Web for All), accessible from any device (Web on Everything).

In mobile sites can be the case that the function and content need to be different than the site seen in the desktop version, and that’s where the adaptive design can solve it by removing or reducing the visibility of certain elements.

The adaptive web design involves using HTML and CSS that we achieve a single version that covers all screen resolutions, so the website created is accessible from all devices. Marcotte defined as three technical ingredients for designing adaptive web:

  • Fluid grid (grid fluid): Instead of pixels used percentages to define the widths of the columns or divs.
  • Flexible Images: Pictures are not fixed widths but a maximum (or max-width), which usually is usually displayed at 100% on a desktop computer. Thus, the images are reduced to suit other browser screens or resolutions.
  • Media queries: allow custom CSS consultations based on the minimum and maximum width of a browser (min-max width).


The number of users accessing the web from mobile devices has increased and will continue. A study of Compuware , a software and services provider, shows that 57% of users do not recommend a company with a poorly designed mobile site and that 40% would visit a competitor’s site before using a site optimized for poorly mobile navigation.

The advantages of the adaptive web design are obvious:

  • Better user experience: all users see the site in the best way possible for the device from accessing
  • Lower costs: costs are reduced creation and maintenance: no need to develop applications for different mobile versions
  • More efficient Updates: any update or modification in design is reflected on all platforms, reducing time and errors margins
  • Searches: When doing a search, a URL appears only in the results, which saves redirects and possible failure.
  • Best SEO: Google can better discover your content
  • Accessible to all, including people with different problems of visually impaired

The Boston Globe and other examples

Web design adaptive or responsive design image 2

The Boston Globe The is considered the flagship site of the adaptive web design , partly because it was one of the first major Web sites to adopt the responsive design and also for being the same in the development team that was responsible for its redesign. Besides this, there are other good examples of adaptive designs, starting from the same Marcotte, as expected:

Tags: , , ,