Cómo habilitar la capacidad del teléfono inteligente en los sitios web

El uso de Internet a través de dispositivos móviles ha ido en aumento desde el lanzamiento del iPhone de Apple. Debido a los diferentes tamaños de pantalla de los dispositivos móviles y su interfaz de pantalla táctil, los sitios web no aparecen o funcionan en un dispositivo móvil de la misma manera que aparecen o funcionan en una pantalla de computadora. Para mantener el número de lectores, cree una versión para smartphone de su sitio web utilizando hojas de estilo en cascada.

Limitaciones de la navegación de teléfonos inteligentes

La navegación con teléfonos inteligentes difiere de la navegación por computadora en dos formas significativas. Primero, el tamaño de pantalla disponible en un teléfono inteligente es mucho más pequeño que en una computadora, lo que significa que algunos sitios web aparecerán desordenados o, en algunos casos, ilegibles en un teléfono inteligente. El usuario de un teléfono inteligente tendrá que desplazarse hacia abajo o acercarse a un sitio web que esté optimizado para la visualización de la computadora. En segundo lugar, los teléfonos inteligentes responden a los clics táctiles en lugar del movimiento del cursor, por lo que los elementos del sitio web que cambian según el movimiento del cursor pueden ser problemáticos en un teléfono inteligente. Por ejemplo, los elementos que cambian cuando el cursor se desplaza sobre ellos no se comportarán de la forma deseada en un teléfono inteligente, ya que al no hacer nada en un teléfono inteligente. Además, los menús desplegables pueden ser problemáticos para algunos usuarios de teléfonos inteligentes.

Tamaños relativos CSS

Si está cambiando el tamaño de ciertos elementos en su sitio web, solo necesita cambiar el archivo CSS de su sitio. Para que el teléfono sea legible, cambie sus dimensiones CSS y tamaños de fuente a unidades relativas en lugar de unidades absolutas. Por ejemplo, el ancho y la altura de cualquier elemento específico deben darse en porcentajes en lugar de píxeles. Esto ajustará el tamaño de los elementos en función de un porcentaje de la ventana del navegador o del elemento principal. Para tamaños de fuente, utilice ems en lugar de píxeles. Un em es igual al tamaño de fuente actual en píxeles. Por lo tanto, dos ems es el doble del tamaño de fuente actual, y así sucesivamente. Estos cambios deben guardarse en un archivo CSS separado.

Propiedades de visualización CSS

Para ocultar completamente un elemento de su sitio, agregue la propiedad "display: none" al estilo CSS de ese elemento. La propiedad "display: none" ocultará un elemento por completo de manera que no ocupe espacio en la ventana. Úselo en elementos como menús desplegables o imágenes que ocupan demasiado espacio en la pantalla. Esto permitirá que los otros elementos de su sitio web se acomoden en la ventana como si el elemento oculto nunca hubiera estado allí. Si utiliza esta modificación, asegúrese de que cualquier información importante del elemento oculto esté visible en algún otro lugar de su página.

Redireccionando el navegador

Cuando un dispositivo accede a un sitio web, lee primero la sección del documento HTML. Puede enlazar a varias hojas de estilo CSS en la sección de un documento. Si un dispositivo móvil carga su sitio web, el navegador cargará la hoja de estilo identificada por el atributo media = "handheld" en lugar de la hoja de estilo predeterminada. También puede redirigir el navegador a diferentes hojas de estilo según el tamaño de la pantalla. Esto puede ser útil si desea diseñar su sitio web de manera diferente para diferentes dispositivos móviles. Consulte Recursos para obtener una lista de las dimensiones comunes de la pantalla del teléfono inteligente.

HTML alternativo

Si está cambiando drásticamente la organización y el diseño de su sitio más allá de un nuevo archivo CSS, es posible que desee crear un nuevo archivo HTML con los cambios deseados. Si crea un archivo HTML diferente, debe redirigir el navegador al nuevo archivo HTML si el usuario está viendo el sitio en un teléfono inteligente. Además de detectar el navegador móvil, debe modificar la secuencia de comandos para redirigir a su página HTML alternativa. Consulte Recursos para obtener un enlace a scripts para detectar un navegador móvil.