→ Blog Categories
responsive-web-design

Responsive Web Design

| Enric Garcia

WHAT IS RESPONSIVE WEB DESIGN?

The Responsive Web Design to create Web sites that cater to the width of the device you are browsing, which allows a single design for PC, mobile and tablets, ie allow our website adapt to the environment through which a user is accessing it.

ADVANTAGES OF CREATING A SITE WITH RESPONSIVE WEB DESIGN

  • Cost reduction. Costs are reduced because until today to do a portal to the Web and other mobile devices. This results in higher costs of creating and maintaining information.
  • Efficiency in the update. The site should be updated only once and reflected on all platforms. When we separate portals for Web and Mobile must upgrade twice which creates the need for more resources and potential for error.
  • Improved usability and conversion. This technology brings to the usability and conversion. There have been studies showing that when it exploits the visitor’s screen conversion increases.
  • Impact on the visitor. This new generation technology being impact on people who see it in action, which will associate the brand with creativity and innovation.

Then we will see the different actions to be taken into account when creating a responsive web:

FLEXIBLE LAYOUT

  • Fluid content (%)
  • Percentage size = size / total * 100
  • box-sizing: border-box. Includes padding and border on the total width (IE8 +)

TYPOGRAPHY

  • Use em, rem,%
  • em = size px/16px
  • 24px/16px = 1.5em

FLEXIBLE CSS IMAGES

Image stretches the width of the container

    img, embed, object, video{
        max-width:100%;
        overflow:hidden;
        height:auto;
    }

RESPONSIVE VIDEOS

JQuery plugin that resizes the embeds from Youtube, Vimeo …

https://github.com/davatron5000/FitVids.js

MEDIA QUERIES

The @media rule allows you to specify that a set of CSS rules should only apply to a certain type of device.

  • CSS 2.1

@media{media type:screen, handheld, print, all, tv, …}
{media feautures:width, orientation,…}
@media print{* {font-family: arial}}

  • HTML

<link rel=”stylesheet” media=”{media type} {media feautures}” href=”/example.css”/>
<link rel=”stylesheet” type=”text/css” media=”print” href=”/arial.css”>

 MEDIA FEAUTURES

Although media queries have many different properties, these are the most important:

  • width

@media screen and (min-width: 400px) and (max-width:700px){ … }

  • device width

@media screen and (device-width: 800px){…}

  • orientantion

@media all and (orientation:portrait) {…}
@media all and (orientation:landscape) {…}

TAMAÑOS BÁSICOS

/*Landscape phones and down */
@media(max-width: 480px) {
}
/*Landscape phones to portrait table */
@media(max-width: 767px) {
}
/*Portrait table to landscape and desktop */
@media(max-width: 768px) and (max-width:979px) {
}
/*Large desktop*/
@media (min-width: 1200px){
}

VIEWPORT

Smartphones browsers emulate the desktop resolution (800-980px) for them to stop and catch the actual size we indicate this target should be added:

<meta name="viewport" content="width-device-width, initial-scale=1"> 

After submitting attend Arques in Frontenders Javier Valencia, we performed this article is a scheme based on his presentation to keep in mind when creating a site responsive. For more information please visit the source

http://es.slideshare.net/JavierArquesHernndez

http://www.emenia.es/diseno-web-adaptable-o-responsive-web-design/