¿QUÉ ES EL RESPONSIVE WEB DESIGN?
El Responsive Web Design permite crear sitios Web que se adaptan al ancho del dispositivo en que se esté navegando, lo que permite tener un único diseño para PC, mobile y tabletas, es decir, permiten a nuestra página web adaptarse al medio a través del cual un usuario está accediendo a la misma.
VENTAJAS DE CREAR UN SITIO CON RESPONSIVE WEB DESIGN
- Reducción de costos. Se reducen los costos ya que hasta hoy se debe hacer un portal para la Web y otro para dispositivos móviles. Esto origina mayores costos de creación y mantenimiento de la información.
- Eficiencia en la actualización. El sitio solo se debe actualizar una vez y se ve reflejada en todas las plataformas. Cuando tenemos los portales independientes para Web y Mobile se debe realizar la actualización dos veces lo que crea la necesidad de mayor cantidad de recursos y posibilidad de error.
- Mejora la usabilidad y conversión. Esta tecnología aporta a la usabilidad y la conversión. Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante aumenta la conversión.
- Impacto en el visitante. Esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación.
A continuación veremos las distintas acciones a tener en cuenta a la hora de crear una web responsive:
FLEXIBLE LAYOUT
- Contenido fluido (%)
- Tamaño en porcentaje = tamaño/total*100
- box-sizing: border-box. Incluye el padding y el borde en el ancho total (IE8+)
TIPOGRAFÍA
- Usar em, rem, %
- em = tamaño en px/16px
- 24px/16px=1.5em
FLEXIBLE IMAGES CSS
Imagen se ajusta al ancho del contenedor
img, embed, object, video{
max-width:100%;
overflow:hidden;
height:auto;
}
RESPONSIVE VIDEOS
Plugin de jQuery que adapta el tamaño de los embeds de Youtube,Vimeo…
https://github.com/davatron5000/FitVids.js
MEDIA QUERIES
La regla @media nos permite especificar que cierto conjunto de reglas CSS solo deben aplicarse a cierto tipo de dispositivo.
- 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
Aunque media queries dispone de muchas propiedades diferentes, estas son las más importantes:
- 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
Los navegadores de los smartphones emulan la resolución del escritorio (800-980px) para que dejen de hacerlo y cojan el tamaño real que indiquemos hay que añadir este meta:
<meta name="viewport" content="width-device-width, initial-scale=1">
Después de assistir a la presentación de Javier Arques en Frontenders Valencia, hemos realizado este articulo que es un esquema basado en su presentación para tener en cuenta a la hora de crear un sitio responsive. Para más información visitad las fuentes:
http://es.slideshare.net/JavierArquesHernndez
http://www.emenia.es/diseno-web-adaptable-o-responsive-web-design/
Si aun así tienes problemas con tu sitio web en responsive, podemos ayudarte desde Doowebs, diseño tienda online valencia.