Diseño web responsive. Diseño web para dispositivos móviles. Teléfono: 607 225 146. Posicionamiento natural, SEO, SEM, SMO, Social Media. Diseño de páginas web y posicionamiento en Google.
La cada vez mayor utilización de dispositivos móviles para navegar y consultar información en Internet, nos obliga a adoptar una visión del diseño web orientada a estos dispositivos para no dejarlos de lado respecto al masivo uso que representa entre los usuarios.
Debido a esto, en LINK hacemos diseño de páginas web optimizados para smartphones y tablets.
Vamos a poner un poco de luz sobre los conceptos asociados a esta tecnología de diseño de páginas web.
DEFINICIÓN DE DISEÑO WEB ADAPTATIVO
A modo conceptual, el diseño web adaptable, también conocido como daptativo (responsive web design y de siglas RWD) es un concepto de diseño y programación de entornos web orientados a la adaptación (cómo se muestra el contenido y apariencia del diseño web en la multitud de dispositivos actuales de consulta).
Se basa en maximizar los potenciales usuarios y destinatarios que podrán ver el contenido de nuestra web de forma independiente al dispositivo (aparato que utilicen). Hoy en día es posible conectarte a Intrenet en dispositivos de caractarísticas y pantallas muy divergentes, entre ellas: libros electrónicos, portátiles, ordenadores de sobremesa, tabletas, teléfonos móviles, etc.
Por supuesto, cada dispositivo tiene sus características especíicas y unas ventajas competitivas respecto a otro. Entre las variables que afectan a este modelo conceptual de diseño adaptativo son la capacidad de memoria ram del dispositivo, la potencia del procesador, la resolución y tamaño de plantalla, etc. Con esta tecnología de diseño de páginas web adaptativas evitamos el problema habitual hasta ahora: tener que diseñar una web distinta pensada en cada dispositivo en concreto donde la visualización del contenido esté optimizada para mostrarse corractamente en el mismo.
Fundamentos técnicos en diseño web adaptativo:
PRIMER PRECEPTO: Diseño basado en utilización de unidades relativas en lugar de unidades absolutas.
En lugar de usar unidades fijas como los píxeles para acotar dimensiones, es mucho mejor la utilización de valores relativos porcentuales: % o em. Esta recomendación aplica a conceptos tan dispares como el uso de fuentes, imágenes, layers (capas), etc.
La base técnica para hacer uso de unidades relativas es sencilla: buscamos el tamaño de contenido respecto al ancho total del dispositivo donde se visualice nuestro diseño, por tanto, es evidente que será mucho más sencillo y práctico utilizar parámetros relativos. Así te será más cómodo adaptar tu web a diferentes resoluciones.
SEGUNDO PRECEPTO: Utilizar meta viewport en la codificación de nuestra página web.
Este meta tag html5 se utiliza para controlar cómo se muestra el contenido de nuestra web en los dispositivos móviles. De este modo, podemos asegurarnos que el contenido se ajusta al ancho disponible del dispositivo.
Ejemplo de tag viewport:
En el ejemplo indicamos que el contenido a mostrar en el dispositivo móvil tendrá el ancho de pantalla del dispositivo donde visualizamos la web y que la escala mínima y máxima del mismo será 1.
TERCER PRECEPTO: Utilización de directivas contenidas en hojas de estilo CSS3.
Ejemplo: uso de la clase CSS3 @media
Esta clase CSS permite reconocer características del dispositivo que visualiza nuestra página web, pudiendo aplicar hojas de estilo específicas en función de las características particulares de cada uno de los dispositivos que nos visitan (equivale al diseño de antaño de reconocer mediante javascript el tipo de navegador y características de resolución y, en función de éstas, redireccionar a una u otra).
Algunas propiedades concretas de esta clase:
1) width y height: (dimensiones de ancho y alto del navegador del dispositivo usado)
2) device-width y device-height: (dimensiones de ancho y alto del dispositivo móvil -> tablet, ipad, móvil, etc.)
3) orientation: (orientación del dispositivo en vertical u horizontal -> para formato apaisado: orientation:portrait, para formato vertical: orientation:landscape)
Hoy en día tanto la adaptabilidad a móviles para ser contenido visualizable en dispositivos móviles, como la relevancia de este tipo de diseño conceptual para mejorar el posicionamiento en Google hacen imprescindible plasmar todo tipo de proyecto y presencia en Internet teniéndolo en cuanta.
LINK | Diseño de páginas web y posicionamiento en Internet
Teléfono: 607 225 146
Web: http://www.linkposicionamientoweb.com
