Image Image Image Image Image Image Image Image Image Image á
Scroll to top

Top

3 Comentarios

Responsive Web Design, tu web adaptada a todos los dispositivos

Responsive Web Design, tu web adaptada a todos los dispositivos
Zumo de Marketing

Durante la última semana se ha celebrado el Mobile World Congress 2013 en Barcelona, el congreso más importante sobre tablets y smartphones o teléfonos inteligentes del mundo.

Cada vez son más los visitantes a nuestras páginas web que usan estos dispositivos móviles para navegar e informarse sobre un producto o los servicios que se ofrecen en el mercado online.

Esto demuestra que cada vez más tenemos que optimizar nuestras páginas web para estos dispositivos. Optimizar o adaptar las páginas web a tamaños inferiores de pantalla tiene el nombre de Responsive Web Design (RWD), un trabajo que deben realizar los diseñadores y posteriormente controlar los programadores.

Los navegadores de los smartphones están generalmente más actualizados que los de escritorio y eso hace que podamos programar para crear una web Responsive en HTML5 o usar propiedades CSS3 sin preocuparnos de si se verá correctamente o tendrá un funcionamiento óptimo. Esto se debe a que los móviles de este tipo ya son los más vendidos y son con los que navega más gente, con lo que están más que preparados para esta programación RWD.

Cada vez más las plantillas de los CMS más famosos como WordPress, Prestashop, Joomla que surgen son Responsive.

Aunque si lo que quieres es crear tu Landing Page Responsive a continuación te mostramos el código CSS que debes utilizar para que tu página web se muestre correctamente en los smartphones más comunes.

Introduce esto en tu archivo CSS:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Si no dispones de un Smartphone o de una tablet y quieres comprobar que funciona puedes usar páginas que te muestran cómo se verá el site en los diferentes dispositivos, como por ejemplo Responsinator.

Puedes encontrar más información sobre los diferentes dispositivos y qué CSS poner para los nuevos teléfonos o tablets que van saliendo (iPad, iPad mini, iPhone…) en la web de Stephen Gilbert.

Comentarios

  1. Ahora la web responsiva esta de moda, pero también es verdad que una web con buena respuesta, siempre convierte más. Me ha gustado mucho la web responsinator. Saludos!

  2. Marketing Online

    Quizás deberías escribir un poco más sobre el método paso por paso, creo que no quedó muy claro para el visitante promedio, sin embargo me gustó. El link que dejaste a la página para ver tu sitio en un smartphone esta muy bueno.

    Y tienes toda la razón, como el mercado está evolucionando, al igual que las tecnologías, tenemos que adaptarnos, de lo contrario, se reduce considerablemente nuestros números de visitas

  3. La web responsive es la tendencia.

    Muchas gracias por la informacion.

Envíanos tu comentario