¿Cómo hacer que tu sitio sea responsive?

10 consejos para tener un sitio web responsive

2. ¿Cómo crear un sitio web responsive?

Cuando utilizamos el término “responsive” (adaptable), nos referimos principalmente a “responsive design” (diseño web adaptable). Esto significa hacer que un sitio web sea accesible y adaptable en todos los devices: tabletas, smartphones, etc.

Medidas para web responsive

Móvil medio: 375 x 667 px. Smartphone grande: 720 x 1280 px. Ordenador portátil medio: 1366 x 768 px. Ordenador de escritorio medio: 1440 x 900 px.

Si quieres comprobar la optimización movil de una página web, google pone a nuestra disposición una herramienta muy útil, gratuita y sin necesidad de suscribirnos: prueba de optimización para móvil. Simplemente tienes que introducir la URL de la página que quieras inspeccionar y clicar en el botón «ejecutar prueba».

El diseño responsivo es un enfoque del diseño web que hace que el contenido de la web se adapte a los diferentes tamaños de pantalla y ventana de una variedad de dispositivos.

Cuando utilizamos el término “responsive” (adaptable), nos referimos principalmente a “responsive design” (diseño web adaptable). Esto significa hacer que un sitio web sea accesible y adaptable en todos los devices: tabletas, smartphones, etc.

¿Qué son los frameworks para la creación de sitios web responsivos? Los frameworks CSS son herramientas al servicio de los diseñadores de interfaces de usuario (UI) front-end que cuentan con una serie de estilos básicos a partir de los cuales iniciar un proyecto de desarrollo web.

Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo, lo que se conoce diseño líquido o responsive.

Ventajas de un diseño web responsive

Reduce los costes de creación y mantenimiento: Ya que no se debe hacer un portal por cada dispositivo y las actualizaciones sólo se deben efectuar una vez. Mejora el SEO: Aparece sólo una única URL en los resultados de búsqueda, evitando redirecciones y los fallos que estas causan.

Principales ventajas del diseño responsive

La principal diferencia es que el diseño responsive se adapta literalmente. En lo que respecta al diseño adaptativo, se hace un diseño para cada dispositivo (varias resoluciones preestablecidas como ordenador de escritorio, tableta y móvil y todas sus casuísticas).

10 Herramientas y recursos para un excelente diseño web...

El tamaño estándar recomendado para el diseño de páginas web es el SVGA de 800 x 600 píxeles, a fin de brindar soporte a los usuarios que aún utilizan esta resolución de pantalla. Generalmente en nuestras computadoras utilizamos resoluciones más amplias (1024 x 768px, 1280 x 1024px, etc.)

Hasta hace un tiempo la resolución más popular era 1024×768 pixeles pero eso ha cambiado en los últimos años y ahora el tamaño más común es 1366×768, en segundo lugar un tamaño mucho mayor 1920×1080.

Con Google Chrome

Optimizado (predeterminada): Optimiza la capacidad de una app para realizar trabajos en segundo plano, según la forma en que el usuario interactúe con la app. Restringida: Evita completamente que una app se ejecute en segundo plano. Las apps podrían no funcionar como deberían.

La función de Optimización rápida mejora el rendimiento de tu teléfono al identificar las aplicaciones que usan batería excesiva. También borra elementos innecesarios de la memoria, elimina archivos innecesarios y cierra aplicaciones que se ejecutan en segundo plano.

El meta tag viewport y lo que hace. Técnicas efectivas usadas en el diseño web responsive para adaptarse a dispositivos móviles y tabletas. Herramientas que ayudan a simular y monitorear la experiencia del usuario en dispositivos móviles y tabletas.

Es decir, el diseño web receptivo consiste en un modelo que se adapta a cualquier clase de pantalla que el usuario emplee para acceder al contenido, más allá del tamaño del dispositivo.

"wrap_content" le indica a la vista que establezca el tamaño necesario para ajustar el contenido dentro de esa vista. "match_parent" hace que la vista se expanda lo más posible dentro de la vista principal.

Para hacer que una imagen sea responsiva, tienes que dar un nuevo valor a su propiedad de anchura. La altura de la imagen se ajustará automáticamente. Lo importante es saber que siempre debes utilizar unidades relativas para la propiedad de anchura, como el porcentaje, en lugar de las absolutas, como los píxeles.

El diseño web implica trabajo relacionado con el layout y diseño de páginas online, así como la producción de contenido, aunque generalmente se aplica a la creación de sitios web. En este caso, los diseñadores web crean las páginas utilizando lenguajes de marcado como HTML o XML.

La metaetiqueta viewport

Esta metaetiqueta informa a los navegadores de los dispositivos móviles que deben establecer el ancho de la ventana gráfica al ancho del dispositivo y escalar el documento al 100% de ese tamaño, de modo que el documento se mostrará al tamaño optimizado para esos dispositivos móviles.

Un framework de CSS es una biblioteca de código predefinido, diseñada para implementar estilos y diseños rápidos y consistentes en un sitio web. Traen código preescrito y reusable para elementos y componentes de diseño comunes, que se aplican fácilmente al HTML base.

8 de los mejores frameworks PHP para el desarrollo web

• Laravel.
• CodeIgniter.
• Symfony.
• Zend.
• Phalcon.
• CakePHP.
• Yii.
• FuelPHP.