Soporte IT Experto para negocios en Los Angeles

2. Mi sitio web no se ve bien en los teléfonos Inteligentes ni en los Tablets

Si su sitio web no se ve bien en los teléfonos inteligentes ni en los tablets entonces posiblemente su sitio web no es responsive o ha instalado algún plugin o creado una tabla que no es responsive y por lo tanto le crea algún conflicto.

Lo primero que debemos hacer es probar o emular de manera online los dispositivos donde deseamos correr o probar nuestros sitios.
Para eso les sugiero el uso de algunas herramientas prácticas.

Herramientas para probar si un sitio web es responsive:

1. Responsinator

La herramienta nos permite probar los media queries definidos de sitios web en 12 equipos diferentes, incluyendo los Iphones, Ipad, Crappy Android, Android Nexus 4, Kindle. De esta manera podemos probar como funciona nuestro sitio web en los diferentes devices. Este sería nuestro primer paso. Verificar como funciona nuestro sitio web en los diferentes equipos.

Una vez reconozcamos donde está el problema, vamos directamente y lo arreglamos, lo cuál ocurre cuando nuestro sitio web es Responsive, pero no lo es para un determinado dispositivo o no se visualiza como deseamos. Por lo general esto sucede, porque no tenemos este dispositivo definido en nuestro estilo.

Pasamos a mencionar 3 puntos imprescindibles para los sitios web responsive.

1. Media Query y Media Query Listeners (Es lo que me permite establecer condiciones escalables para la visualización de los sitios en diferentes dispositivos)

2. Diseño flexible, basado en grid que usa tamaños relativos (sustitución de píxeles por % y em como medidas de tamaños relativos)

3. Imágenes y Media flexibles a través de cambio de tamaño y CSS dinámicos.

Para que nuestro sitio web sea Responsive debemos asegurarnos que se cumplan los puntos anteriormente comentados.


1. El sitio debe estar maqueteado o se debe maquetear utilizando unidades relativas como son: % y em.

El % y el em sustituyen a los píxeles usados comunmente en los sitios.

Disign Fluido

Según mostramos en nuestra figura el total de nuestro width o ancho es 1200, por lo que eso significa que el 100% de nuestro ancho son 1200 píxeles y dentro de este contenedor encontramos un elemento de 520 píxeles. Para que nuestro sitio contenga un estilo fluido debemos dividir el elemento entre el contenedor que es lo mismo que decir 520/1200, el resultado lo multiplicamos por 100 y nos queda que % ocupa el elemento que tenemos del 100% de nuestro contenedor. Esta cuenta nos da cómo resultado que 520/1200 x 100 = 43.33. Que lo traducimos como el 43.33% y es lo que nos permite que cuando un elemento superior o contenedor se adapte todos los elementos que están dentro del mismo se adapten proporcionalmente a su tamaño.

Lo mismo sucede con las fuentes, pero la diferencia es que la medida de proporción se da en "em". Si nuestra fuente es 24px originalmente al 100% y tenemos un título de 16px, entonces se divide 16/24 que es igual al 66.66%.

2. Media Queries

Nos permite crear una serie de condiciones que se establecen, para que nuestro sitio web se visualice correctamente en todo dispositivo. Los Media Queries forman parte de los CSS3 e inspeccionan las características físicas del medio o dispositivo que va a mostrar nuestro sitio web. De esta manera podemos pensar en establecer condiciones específicas para cada uno de ellos independientemente.

por ejemplo si nuestro dispositivo se muestra en una resolución de 480 el ajuste quedaría de la siguiente manera en el código.

@media screen and (max-width: 480px) {
/* Aquí van las reglas CSS necesarias */
}

El tipo de medio utilizado o media type en este caso "screen" se define de la siguiente manera "@media screen" que se combina a través de un "and" con el Media Querie que en este caso es "max-width: 480px". Y los estilos correspondientes van aplicados dentro de los corchetes.

Podemos hacer lo mismo para varias resoluciones de pantallas que son los estándares usados por los diferentes dispositivos.

- 320 px
- 480 px
- 600 px
- 768 px
- 900 px
- 1200 px

Existen muchas maneras de jugar con las condiciones para tener un mejor manejo sobre el uso de nuestro sitio en determinados dispositivos.