¿Cómo hacer una web responsive? ¡Transfórmala!

Comparte este artículo

¿Cómo hacer una web responsive? Aquí podrás obtener información sobre esta técnica adaptativa basada en los modelos de la web de hoy, la cual hace que bajo un solo diseño, un portal web se pueda acceder y visualizar correctamente desde cualquier equipo o dispositivo electrónico.

como-hacer-una-web-responsive-2

¿Cómo hacer una Web Responsive?

Índice de Contenido

Hacer una web responsive o sensible a posibles adaptaciones es muy conveniente. Además de garantizar el éxito de funcionar correctamente en internet desde cualquier plataforma electrónica. En las líneas que siguen se esclarece la forma de cómo hacer una web responsive, la cual es concebida desde la misma naturaleza de adaptabilidad de las páginas web. Por lo que al diseñar una página web bajo el modelo responsive, el aspecto o imagen de dicha web será posible que se ajuste y vea según sea el dispositivo electrónico que se esté usando para la navegación.

Para nadie es desconocida la multiforme cantidad de equipos o dispositivos electrónicos que existen en la actualidad para navegar en internet, como: Computadoras, tabletas, celulares inteligentes, laptops, etc. En los orígenes del internet, los desarrolladores de sitios web, se acostumbraron a crear páginas con un ancho común de pixeles. Como por ejemplo en la década de los 90, los monitores que existían tenían una sola medida de pantalla de 14” con un ancho fijo de 640 pixeles. Los diseñadores de página web, acoplaban sus diseños a las dimensiones estándar de los únicos monitores que existían.

Cercano a la entrada del año 2000 y hasta la llegada de la década de 2010 fueron variando los modelos de monitores y los anchos de pixeles. El diseño web se iba ajustando a cada una de las variaciones. Fue a partir del año 2010 que ocurrió la gran revolución tecnológica, provocando un desequilibrio en el escenario del diseño de páginas web. Se introdujo en el ámbito del internet la navegación a través de la telefonía móvil. Esta nueva telefonía usaba navegadores igual que una computadora. Con esta gran revolución tecnológica llego el momento de avanzar hasta lo que se conoce como Responsive Design o Diseño adaptativo de las páginas web.

La importancia de saber cómo hacer una Web Responsive

Es tan importante que los desarrolladores de páginas web conozcan cómo hacer una web responsive; que hasta la empresa Google de gran prestigio en internet lo indica como algo sumamente necesario. Debido a que una página web diseñada bajo el modelo responsive, permite una optimización de navegación, evita los duplicados de contenido y brinda una calidad de imagen extraordinariamente estable. Otros aspectos que revisten de importancia el crear una web responsive son:

  • Con una sola adaptación de lenguaje de marcas de hipertexto (HTML) y el lenguaje CSS se puede lograr abarcar cualquier resolución de pantalla. Evitando así la creación de una página web para cada tipo de dispositivo que permita visitarla o navegar en ella. Este aspecto también reduce en tiempo de diseño.
  • Se adapta automáticamente al navegar, haciendo posible la lectura e interacción en cada visita en concreto.
  • Logran posicionarse mejor y más rápidamente en los motores de búsquedas. Ya que este tipo de diseño evita las duplicidades y los re direccionamientos.
  • Las páginas web creadas bajo este diseño permiten que sus contenidos sean virales más rápidamente, por su forma original y simple de compartirse.

Que es una Web Responsive Design

La web responsive design conocida también como web de diseño adaptable, es una forma de diseñar o desarrollar páginas web. Este sistema tiene la particularidad de permitir que el sitio web creado bajo un único diseño, se pueda visitar o acceder desde cualquier equipo o plataforma electrónica. El nombre responsive, es un término inglés que se refiere a algo que es sensible, adaptable, perceptible, visible, etc.

Esta técnica recibe dicho nombre por la capacidad que tiene este tipo de web de ajustarse a cada medida de ancho de pantalla. Haciendo posible su visualización y funcionamiento correcto, sin hacer distinción en cuanto al dispositivo usado para la navegación.

Esto es posible gracias a la organización de las imágenes y del contenido, así como a la sencillez del menú de la web responsive. Los cuatro calificativos principales que definen y hacen muy popular a este tipo de diseño de páginas web, es que son:

  • Sencillas
  • Económicas
  • Rápidas
  • Y sobre todos los anteriores, son totalmente funcionales

Cómo hacer una Web Responsive Design y su complejidad

La complejidad en lo que se refiere al diseño y desarrollo de páginas web se puede decir que surgió a partir de la década del 2010. Cuando comenzaron a aparecer en el escenario del internet los teléfonos móviles con navegación. Los cuales usaban igual que una pc navegadores como Google, Firefox, Explorer, entre otros. Convirtiéndose de esta forma en nuevas posibilidades de visita a los diferentes sitios de la web. En estos tiempos también comenzaron a aparecer las primeras tabletas electrónicas con acceso a internet.

A partir de allí las necesidades para el diseño de páginas web se hicieron de mayor complejidad. Debido a la gran variedad de tamaños de pantalla que existían para la visualización y funcionamiento de los sitios web. Se debía buscar un tipo de diseño que funcionara para cualquier tipo de dispositivo, y se ajustara automáticamente.

Ya no se podía diseñar para una, dos o tres resoluciones mayoritarias de pantalla. Era preciso comprender que las resoluciones de los dispositivos serían cada vez más variables, además de ser mucho más pequeños que el monitor de una computadora.

Este momento marco el fin de la rigidez del diseño en la web. Y no solo a la gran variedad de dispositivos, sino que además cada uno de ellos poseen características específicas, como:

  • Tamaño de pantalla
  • Resolución de pantalla
  • Potencia de CPU
  • Sistema operativo
  • Capacidad de memoria entre otras.

Se introduce entonces el nuevo modelo de diseño web, cuyo objetivo es que con un solo diseño, fuera posible su visualización correcta cualquiera sea el dispositivo de navegación. Más sin embargo desarrollar este tipo de web posee su grado de complejidad.

¿A qué se debe la complejidad de desarrollar una Web Responsive?

Desarrollar una web bajo el diseño de adaptabilidad denominado responsive posee su grado de complejidad, aún en la actualidad. Debido a dos principales causas, las cuales se indican a continuación:

1-Es una tecnología que no tiene mucho tiempo desarrollándose y por causa de los múltiples medios de aplicación, no ha sido posible determinar cuál pueda ser la mejor de todas las opciones. A cada momento siempre están surgiendo innovaciones en cuanto a este tipo de diseño web a ser desarrolladas. Por tanto es difícil determina el mejor framework o tecnológica de soporte ni tampoco una regla general que asegure la solución a la mayor cantidad de obstáculos posibles. De forma de hacer más simple el desarrollar este tipo de web.

2- La segunda causa, es que el sistema de diseño adaptable no se basa únicamente desde el punto de vista tecnológico. En cuanto a la forma como variara el sitio según las diferentes pantallas o dispositivos. Sino que se debe diseñar haciéndose ya una idea de cómo va a funcionar en cada uno de los posibles escenarios de navegación. Esta causa le añade al modelo responsive de diseño web un alto nivel de complejidad a despejar por parte de las personas que ejercen la función de desarrolladores de sitios.

Ejercitarse y adquirir la suficiente destreza para laborar con diseños de web adaptativas o responsive requiere de mayor tiempo, que con cualquier otro tipo de diseño web. Pero se tiene la esperanza que, con el avance en la informática el grado de complejidad sea menor. A fin de que sea cada vez mayor la evolución en este sentido, del personal con conocimientos de sitios web involucrados en los tipos de diseños adaptativos, personal profesional como:

  • Maquetadores
  • Diseñadores
  • Programadores
  • Personal de Marketing comercial y digital

Disminuir el tiempo de diseño

De solventarse las dos anteriores causas, tal vez así se logre disminuir el periodo de desarrollo o creación de una web responsive. Al mismo tiempo de que se logre hacerlo disponible para el uso de las web habituales.

Mientras tanto, a lo que se tiene hasta hoy, puede ser más rápido desarrollar un nuevo diseño web para dispositivos móviles partiendo de cero; que transformar o re-diseñar la web para convertirla en adaptable o responsive. Siempre existirá la esperanza que algún día alguien busque la forma de hacerlo y lo logre, esperemos por eso.

Mientras tanto, ¿Qué se Puede Hacer?

El hecho de que aún resulte muy complejo re-diseñar todo un sitio que tengamos en la web, para hacerla adaptable. No significa que dejemos de hacer algunos pequeños cambios en el sitio. A fin de mejorarlo y hacerlo sensible a la adaptación en diferentes navegadores, así como en diferentes dispositivos electrónicos.

Lo primero que se debe hacer es verificar que tipo de diseño web posee el lugar de navegación. Principalmente verificar:

  • La maquetación del sitio web
  • Cuál es su estructura en cuanto al Html y CSS

Analizando estos dos puntos básicos se pueden establecer que pequeñas modificaciones, se puedan hacer en pro de mejorar el sitio web.

como-hacer-una-web-responsive-5

Consideraciones previas a tener en cuenta para saber cómo hacer una Web Responsive

Si es el caso que ya se tenga un portal web, una página de aterrizaje o un blog de contenido, que fue desarrollado bajo un diseño habitual y se quiera transformar a una web de diseño responsive o de adaptabilidad. Es solo tomar la decisión y dar el primer paso para conseguirlo, ¡Tomar la decisión de hacerlo!

El hecho de transformar un website de diseño convencional a responsive, no significa que todo el trabajo original se vaya a perder. Ya que no se desechara todo el contenido, sino que sufrirá ligeros y pequeños cambios en él. Contenidos como imágenes, textos y algún otro elemento del sitio existente pueden usarse y funcionar de forma correcta con la transformación.

No obstante ante la alternativa de adaptar y mejorar el sitio, es conveniente conocer algunas consideraciones previas que favorecerán la labor a acometer.

Checar el Movimiento de la Web existente

Antes de llevar a cabo cualquier cambio en la web existente, es aconsejable verificar el tráfico que está teniendo. Es decir las estadísticas en cuando a cantidad de personas que visitan el website. En función a esta información se trabajara en la modificación del diseño, con miras a tener un mayor éxito y mejor posicionamiento de búsqueda. El el re diseño y adaptación de la web es conveniente saber sobre las Herramientas SEO, porque son las mejores a la hora de obtener un mejor posicionamiento en la red.

Es Necesario una Buena Inspiración

Se aconseja también echar un vistazo y hacer un análisis de la competencia o páginas de contenidos similares al sitio web al que se le van a aplicar los cambios hacia un diseño de web responsive. Esta visualización previa tiene el objetivo de realizar una labor de investigación para posibles mejoras de contenido. Pero también de cómo funcionan esas páginas similares en diferentes dispositivos. Los aspectos a tomar en cuenta para la selección de los sitios que puedan ser de inspiración o modelos en las mejoras. Serán la facilidad de navegación en esas páginas y las que requieran menos zoom o desplazamiento. Aquí podrás encontrar los mejores trucos para Mejorar SEO con la finalidad de lograr un buen contenido ¡Aplícalos!

El Html Semántico favorece

El uso del Html semántico indica que la maquetación de la web original se estableció de forma correcta. Esto favorece o sirve de gran ayuda, porque fueron usados únicamente los elementos Html indispensables. Teniendo en mente en el desarrollo de la web, la semántica de cada etiqueta por encima del diseño de la misma web. Dejando a las CSS la labor propia del diseño, según las clases y las ID.

Durante el proceso de cómo hacer una web responsive, en las maquetas no necesariamente se tienen que usar adecuadamente elementos como:

  • DIV
  • P
  • UL
  • LI, entre otros

No obstante, si es necesario cumplir el paso de prescindir de todo el diseño de la maqueta. Por cuanto no se puede utilizar un CSS intrusivo, es decir no usar ningún atributo Style dentro del código. Ya que mientras más depurado y con menos DIV, sea el Html, ayudará a que sea más sencillo llevar a cabo las adaptaciones o hacer más sensible a la web. Debido a que se potenciara el CSS en el resultado obtenido.

como-hacer-una-web-responsive-6

Establecer Adecuadamente el Zoom en cómo hacer una web responsive

La elección adecuada del zoom en los navegadores móviles es recomendable para poder lograr la visualización completa de los sitios web. Los navegadores en los dispositivos móviles preexistían antes de que se comenzaran a desarrollar el diseño de web responsive. Para la visualización completa de los websites en estos dispositivos, los navegadores tienen que recurrir a las herramientas de zoom. Por lo que al acceder desde un dispositivo móvil a un website de diseño tradicional. No se estará viendo la resolución natural del móvil, sino que se visualizara una adaptación llevada a cabo por una herramienta zoom hasta ajustarse a un ancho de 960 pixeles.

Debido a que no existía otra forma hacerlo, los desarrolladores fueron creando Html que llevaban a cabo el cambio o ajuste del zoom. Es así, cómo a la hora de llevar a cabo la adaptación de la resolución en los dispositivos, se debe indicar al equipo el uso de otro tipo de escalado. Un tipo adecuado a usar es la etiqueta meta conocida como viewport, la cual se introduce en el head del website. Con esta etiqueta meta se puede detallar el procedimiento que ejecutara el navegador en la web transformada. Véase la siguiente sintaxis, escrita textualmente:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

Esta disposición simbólica de la etiqueta meta viewport es la que con mayor frecuencia se usa en el diseño de web responsive. No obstante, existen muchas otras configuraciones que se puedan usar para este fin. Solo que la sintaxis presentada contiene dos variables que hacen que el navegador móvil se adapte a la web y no al contrario. Estas variables son:

Device-width o ancho del dispositivo

La variable width=device-width se incluye en la configuración para que el ancho en pixeles de la pantalla coincida con el ancho del dispositivo móvil. De esta forma se muestra la resolución propia del móvil.

A fin de brindar el mejor uso posible, los exploradores (browser) de los móviles exhiben la página similar al ancho de una pantalla de escritorio. Este ancho puede variar según sea el dispositivo móvil. Pero frecuentemente suele ser un de aproximadamente 980 pixeles. Posteriormente se busca optimizar la apariencia del contenido agrandando el tamaño de la fuente, así como cambiar la escala del contenido para que se acople a la pantalla del dispositivo.

Esto pudiera ocasionar que a los usuarios les parezca algo incoherente o confuso y tengan entonces que presionar dos veces para hacer zoom y poder relacionarse con el contenido. Hacer uso de la variable de la etiqueta meta viewport: width=device-width demanda una acción en el diseño de ajustar el ancho. De forma tal que la página pueda realizar el reajuste del contenido para acoplarlo a diferentes dimensiones de pantallas, sea que se visualice en un pequeño celular o en el monitor de una PC.

Initial-Scale o Escala Inicial

La variable initial-scale= se incluye en la configuración para determinar una escala relacional entre los pixeles del CSS y los del móvil según sea el dispositivo. En la configuración mostrada arriba se indica para la escala inicial: initial-scale=1.0. Aquí la sintaxis está indicando que la relación entre los pixeles es 1:1, se lee un pixel CSS es a un pixel del dispositivo. Se le indica entonces la orden al navegador del móvil que adopte este valor para el zoom y será el que use el dispositivo. No obstante veamos las dos opciones siguientes:

  1. Cuando la variable initial-scale es igual a 1.0 se refiere a una visualización sin zoom, porque es uno es a uno.
  2. Mientras que si initial-scale=2.0, la variable se refiere a un zoom ampliado al doble de su tamaño en toda la página.

Por tanto la opción adecuada para usar en una web diseñada para adaptarse al ancho de un móvil, sería la primera. De esta forma se le ordena al dispositivo no aplicar ningún zoom. Pero también, pueden darse casos en que la mejor opción será no incluir o aplicar esta variable. Dejando de esta forma que el mismo móvil sea el que adapte por su cuenta el zoom, al width que se haya indicado en el diseño.

Configuraciones básicas de Viewport – Ejemplos de aplicación:

Sea que se tenga un ancho o width de 500 pixeles y se da una orden de initial-scale, la web adopta la apariencia de un ancho de pantalla de 500 pixeles. No obstante en el móvil se visualizará su configuración original con una relación equivalente aproximada de 320 pixeles de los 500 pixeles totales de la web.

Ahora bien, si por el contrario no se da una orden de initial-scale, se visualiza la web de forma completa, es decir los 500 pixeles, bajo un zoom adaptado. La sintaxis de estas dos típicas configuraciones de la etiqueta viewport, quedarían textualmente de la siguiente manera:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

La configuración anterior sería para una web con diseño responsive adaptado adecuadamente a la resolución del móvil. Mientras que para una web que no se haya adaptado del todo a la resolución del móvil, la configuración quedaría de la siguiente forma:

<meta name=”viewport” content=”width=[Pixeles del mínimo ancho para visualizar bien la web]” />

Además de las típicas, existen algunas otras configuraciones. Una de ellas es diseñar una web con el ancho de un móvil, aplicando zoom. Pero este tipo de diseño resultaría muy extraño y confuso para el usuario.

Cómo Hacer una Web Responsive – Las Media Queries

Cuando se quiere saber cómo hacer una web responsive o una página adaptable, se debe saber que hay que aplicar el sistema conocido como media queries. Esta técnica permite establecer mediante una condición, diferentes formas o estilos según sea la resolución de la pantalla. Pero, ¿Qué son las Media Queries?

Las Media Queries

Las medias queries es una técnica que consiste en establecer sentencias CSS. Con la cuales se pueden realizar declaraciones aplicables a los diseños web, siempre y cuando se cumplan ciertas condiciones ya dadas o establecidas. Estas sentencias de las media queries es posible aplicarlas básicamente en dos puntos de la web:

  • Primero, en el llamado al archivo CSS, precisando en cada uno cuales son las condiciones para cargarlo. Ejemplo:

<link rel=”stylesheet”; media=”screen and (min-width:320px) and (max-width:480px)”; href=”css/mobile.css” />

  • Segundo, en el mismo archivo CSS, estableciendo un espacio aparte donde se incluyan fracciones de CSS a emplear.. Ejemplo:

@media screen and (min-width:320px) and (max-width:480px){

/*Style Declarations For This Width Range */

En realidad las media queries son una poderosa herramienta que admiten la posibilidad de salir del diseño web responsive, para acometer otros diferentes asuntos dentro de la web. Bien vale la pena documentarse más adelante, un poco más sobre esta técnica de las media queries.

Mientras tanto, por ahora es suficiente conocer dos puntos sobre el sistema de media queries:

  1. La forma de realizar las declaraciones de las media queries en el archivo CSS
  2. Como actualizar con la dotación de la técnica de media queries a los exploradores de internet de la vieja usanza

como-hacer-una-web-responsive-7

Declaración de Media Queries

En párrafos anteriores se pudo observar las dos maneras de ejecutar las media queries. Primeramente en una página de estilo externa y la segunda forma escribir directamente en la página de estilos.

En el contexto de cómo hacer una web responsive de diseño, se debe entender que una media querie es una declaración CSS usada a forma de indicador para estar al tanto de cuándo se debe efectuar otra declaración de estilo en función a las medidas o valores del móvil u otro dispositivo donde se vaya a visualizar la web.

Ejemplo, la forma de realizar la declaración de una fracción de CSS, que se encuentra en el interior de un condicional definido por una media querie, posee la siguiente configuración de sintaxis:

@media screen and ([CONDICION]) {

/* Nuestras nuevas reglas con este ancho o menos de pantalla */

}

De igual forma según sea el ancho de la pantalla se pueden generar tres tipos de declaraciones de media queries. Así se podrá estar seguro de su aplicación en cada caso

-La primera declaración es para ser aplicada únicamente en aquellas resoluciones que sean menor a un ancho de pixeles = X:

@media screen and (max-width:[ANCHO]px) {

/* Nuestras nuevas reglas con este ancho o menos de pantalla */

}

-La segunda declaración es para ser aplicada únicamente en aquellas resoluciones que sean mayor a un ancho de pixeles = X:

@media screen and (min-width:[ANCHO]px) {

/* Nuestras nuevas reglas con este ancho o más de pantalla */

}

-La tercera declaración es para ser aplicada en aquellas resoluciones tengan un ancho comprendido entre un rango de pixeles definido entre X y Y:

@media screen and (min-width:[ANCHO X]px) and (max-width:[ANCHO Y]px) {

/* Nuestras nuevas reglas con este ancho o más de pantalla */

}

¿Cuál de las tres?

La decisión se basara según el gusto del desarrollador. Más, sin embargo lo frecuente es aplicar la primera declaración de media querie mostrada arriba. Solo que se recomienda que se aplique acumulativamente. De forma tal que, cada vez que se haga el ancho menor se van modificando los elementos del diseño.

omo-hacer-una-web-responsive-8

Hacer compatible las Media Queries con internet Explorer

Internet Explorer fue uno de los primeros browser o exploradores que existieron en la red. Por lo que es muy factible que este navegador no soporte o sea compatible con muchos sistemas, parámetro o técnicas de uso frecuente por parte de los usuarios de la red. Pero es mucho el personal técnico en desarrollo web, metidos de lleno en la búsqueda de innovaciones. Los cuales han creado una gama de librerías para habilitar y hacer compatibles a esto antiguos navegadores.

Para hacer compatible a las versiones menores a la número nueve (9) del internet Explorer. Es solo aplicar la siguiente librería javascript: css3-mediaqueries-js.

Al colocar el siguiente script en el head del website, se podrá trabajar con medias queries, sin ningún inconveniente.

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

Puede ser que el resultado obtenido no sea el más perfecto, pero permite un buen grado de compatibilidad por lo general.

Cómo hacer una Web Responsive – Los diseños base

Pueden existir diferentes formas de adaptar una web y transformarla, no obstante una web responsive tiene tres bases o forma de concepción de diseño en la actualidad. Anteriormente se mostró los avances de los desarrolladores con algunos nuevos detalles para aplicar en estos diseños. Se viene de la costumbre de desarrollar websites caracterizados como rígidos o fijos. Para pasar a websites diseñados en responsive, cambiando esa característica de rigidez.

Al día de hoy se pueden encontrar un sinfín de dispositivos electrónico con los que se puede navegar en la web. Y con el pasar del tiempo cada vez será mayor la cantidad. Los desarrolladores de websites requieren que estas webs puedan adaptarse correctamente a esa gran gama de dispositivos.

Los diseños base para simplificar la labor

Una forma de hacer más simple la labor del diseño responsive es dividir o clasificar en tres grupos bases para poder saber cómo acometerlos. Estos tres grandes grupos clasificatorios son:

  1. Pantallas grandes: En las cuales el website tiene el espacio suficiente y aún más para poder ser visualizada de forma completa sin ningún inconveniente
  2. Viejas o pequeñas pantallas: En las cuales la web, no encuentra el ancho adecuado para su visualización completa, es decir no cabe en el marco de la pantalla. Incluso se muestra una incómoda barra inferior, sin utilidad alguna que más bien deja ver aún menos el contenido.
  3. Pantallas de los dispositivos móviles: La web encuentra en estos dispositivos un espacio tan pequeño que solo con el diseño general, es posible leer la información de su contenido.

Entonces si se quiere transformar el diseño y maqueta original de una web a uno actualizado que se pueda usar y sea viable. Lo que se requiere es dar solución a estos tres grupos bases. El grado de dificultad para la obtención de la solución dependerá en general de cómo se haya formulado la maqueta. Pero, en general con la tecnología de hoy en día se pueden lograr algunos cambios en las webs.

como-hacer-una-web-responsive-9

Cómo hacer una Web Responsive para pantallas grandes – Solución

En este punto base por lo general no representa ninguna mayor dificultad. Debido a que la web fue diseñada para ser visualizadas en estos formatos de pantalla de gran tamaño. Lo estándar en la actualidad es que los websites se basen en un marco central de ancho de pantalla en pixeles de 960. De forma tal, que al ser cargada en los móviles con el zoom adaptado, se acople en la mayoría de ellos de forma correcta. Pero en los casos de las web más viejas ese marco central de ancho en pixeles seguramente fue diseñado para pantallas de un ancho de 1024 pixeles. En cualquiera de los casos, para este grupo base lo razonable es que se use contenedores como lo indica la siguiente sintaxis:

#main { width:960px; margin:0 auto; }

Esta configuración admite establecer un contenedor “main” que permita ser centrado en la web. Junto a este contenedor se pueden adicionar diferentes backgrounds, para enriquecer la apariencia exterior de la web. Desarrollando un poco su diseño para evitar en lo posible una página negra-blanca.

En definitiva en este nivel de pantallas grandes, no se hace gran cosa para la transformación de la web. Aunque cabe la posibilidad de que existan usuarios de la web que quieran visualizarla desde la TV con una gran pantalla y además a corta distancia de visualización.

Estos casos requieren realizar grandes cambios como en el grupo base de los móviles. Pero como por lo general no son mucho los que acostumbran usar la tv para navegar, los desarrolladores no acostumbran invertir mucho tiempo en estas adaptaciones. Si se quiere aun así trabajar en este tipo de adaptaciones se recomienda establecer normativa similar a las aplicada en el grupo de los móviles, indicadas más adelante.

Cómo hacer una Web Responsive para pantallas pequeñas – Solución

A partir de este grupo base de diseño, es que se inicia la complejidad de la trasformación de la web a adaptar. El escenario es el siguiente una página creada para funcionar en un ancho de pantalla determinado. Que de hecho, un número de personas la visitan desde equipos ajustados a ese ancho. Pero también se tienen un gran porcentaje de personas a considerar, que cuentan para visitar la web dispositivos con resoluciones menores a las del diseño.

En este grupo de clasificación se debe hacer la separación de los dispositivos de resoluciones de pantallas menores a la de diseño, de los dispositivos móviles. Pues estos casos son analizados en el tercer caso de diseño. Por lo que se debe partir de una definición clara del punto donde termina el dispositivo de pantalla pequeña y el punto donde inicia el dispositivo móvil.

Para las pantallas pequeñas de igual forma se debe disminuir la resolución de la web original para adaptarla a esos dispositivos. Solo que se debe estar claro hasta donde se va a llevar a cabo esta disminución, sin pasarse. De forma que no se llegue a conglomerar gran cantidad de elementos en las pantallas pequeñas restándole apariencia a la web.

Información necesaria para establecer los límites

A continuación se comparte información de los dispositivos móviles. La cual resultara de gran importancia a la hora de poder establecer los límites de cuando deja de ser una pantalla pequeña, para pasar a ser un dispositivo móvil. De esta forma se facilitará la decisión.

Datos sobre los móviles:

  • Los móviles usados de forma vertical, que es la forma que con mayor frecuencia se usa. Por lo general adopta una resolución de 320 pixeles de ancho.
  • En la posición horizontal el móvil la resolución se acomoda al tamaño verdadero de la pantalla del dispositivo. Esta resolución por lo general se encuentra aproximadamente entre los 400 y 600 pixeles de ancho.
  • Por su parte en las tabletas la resolución va a depender del dispositivo. Por lo general, tomando en cuenta la estadística de los modelos de mayor venta, la resolución se encuentra sobre los 600 pixeles de ancho. Pudiendo llegar incluso a los 1024 pixeles de ancho.

Los límites de ancho de pantalla

El límite de ancho mayor estándar a adoptar en el diseño de web responsive en esta clasificación, de acuerdo a la anterior información es de hasta un ancho de 400 pixeles. A partir de esta medida de ancho se debe iniciar drásticamente el cambio en la visualización de la web, así como su funcionamiento básico experimentara ciertos cambios.

Más, sin embargo algunos desarrolladores establecen para este límite un ancho de 600 pixeles. Creando a partir de esta resolución, adaptaciones intermedias entre pantallas pequeñas y dispositivos móviles.

Por el lado del límite menor, se establece para adoptar un mínimo de ancho de pantalla de hasta 320 pixeles. De todas formas queda a criterio del desarrollador web de establecer un rango mayor a estos límites dados. Pero no es recomendable pretender cubrir todos los dispositivos de pantalla pequeña.

Principales estilos de navegación en la solución de pantallas pequeñas

Con lograr al menos captar estos tres estilos principales de navegación, podrá ser suficientes en la solución de adaptación a pantallas pequeñas. Los cuales son indicados a continuación:

  • Dispositivos móviles usados en forma vertical: En este caso la pantalla del dispositivo solo permite lectura y navegación muy simplificada establecida en un rango de resolución entre 320 y 400 pixeles.
  • Los dispositivos móviles usados en forma horizontal y las tabletas: En este caso ya se puede lograr una visualización horizontal tradicional. Sin embargo, es necesario fijarse que la navegación se genera al tacto y no con clics. Según esto se deben evitar acciones: onMouseOver en 400, 600 o 800 pixeles.
  • Dispositivos de mesa: En estos casos el diseño de la web normal, funciona sin ninguna novedad con pantallas de ancho sobre los 800 pixeles.

Dicho todo lo anterior, se entiende como pantalla pequeña una variedad de pc, dispositivos móviles en horizontal y tabletas. Esta diversidad reviste a este grupo de una suave complejidad para adaptar la web a un diseño responsive. En este caso resulta de gran importancia para la simplificación de la labor, el trabajo de maquetación llevado a cabo por bloques. A fin de unir los tres tipos de dispositivos en una única acción.

Si se llega a definir claramente a partir de que ancho se considera una pantalla de móvil. Se esclarece el formato de pantalla intermedia a visualizar. A fin de transformar los bloques de la maqueta actual para que cambien de tamaño según sea la pantalla y puedan funcionar además de visualizarse correctamente.

Contenedores de anchos globales

Los contenedores globales dentro del sitio web cumplen la función de señalar o indicar los anchos globales. Es decir que con estos elementos se puede centrar y estipular un ancho específico al sitio web. Ellos otorgan a la configuración una cierta flexibilidad al cambiar de un ancho fijo a un máximo o tope de ancho. Quedando establecido en la declaración inicial para el marco de la web, cambiando de width a max-width. De igual forma se establece el ancho mínimo según los rangos establecidos anteriormente, con la declaración min-width. Así pues, se podrá controlar los anchos de aquellos dispositivos que se pensaban no estaban dentro del control. Tomando el rango de los límites de ancho de pantalla indicados anteriormente; la sintaxis de la declaración quedaría de la siguiente manera:

#main {max-width:960px; min-width:320px; margin:0 auto;}

Para las pantallas grandes la solución es la misma. Más, sin embargo, cuando paulatinamente la web vaya disminuyendo de tamaño simultáneamente lo irá haciendo el marco central de ancho.

Ejemplo práctico

A continuación se muestra un ejemplo práctico sobre la configuración para una transformación del marco de ancho. En dicho ejemplo se tiene una web con un ancho de 1080 pixeles, el cual es aplicado a los elementos de cabecera, contenido principal y footer. Lo primero a hacer será indicar ese ancho en los diferentes bloques de contenedores globales, ya no como ancho fijo, sino como ancho máximo de página. En cuanto a las sentencias, dependerán de la cantidad de bloques de este tipo que se vayan a usar. Veamos entonces las siguientes sintaxis:

#header #top {position:relative; max-width:1074px; min-width:320px; height:115px; margin:0 auto; […]}

[…]

#header ul.menu {position:relative; max-width:1008px; min-width:320px; height:95px; […]}

[…]

#aux-main{position:relative; max-width:1008px; min-width:320px; margin:0 auto; […]}

[…]

#footer ul {max-width:768px; min-width:320px; margin:10px auto;}

Contenedores Interiores

Desde este punto se profundizara un poco más en el cómo hacer una web responsive transformándola. Casi seguro que la página a ser transformada este conformada por un diseño o layout, fraccionado en diferentes elementos, por ejemplo, podrían ser:

  • Una cabecera al cien por ciento de ancho
  • Un contenido ocupando parte considerable del ancho
  • En una parte del lateral una o más sidebars o barras laterales
  • Ocupando el cien por ciento del ancho, un pie de página

Por lo que se tendrán varios contenedores que a lo mejor tengan un ancho fijo que definan columnas en la página. Dichos contenedores pueden haberse transformado en columnas mediante la aplicación de diversas técnicas, como por ejemplo:

  • Floats en la mayor cantidad
  • Display:inline en algunos casos
  • Display:box en otros de ellos

El siguiente paso a realizar será entonces, poder transformar esos elementos en declaraciones no tan precisas. De forma que el contenedor principal no calibre con exactitud la declaración original señalada. O lo que es lo mismo, se debe cambiar de pixeles a valores porcentuales en todos aquellos elementos que hagan referencia a un espacio en el ancho del sitio web, como los siguientes:

  • Widths
  • Max-widths
  • Margins y
  • Paddings

Con la labor de maquetación previamente realizado, este paso se vuelve realmente sencillo. Ya que solo es hacer una división, para poder determinar lo que corresponde la medida en pixeles del elemento contenedor en valores porcentuales. El porcentaje por tanto se calculará, aplicando la siguiente ecuación matemática:

[Px de ancho elemento interior] / [Px de ancho elemento padre] * 100

Es un buen método para los desarrolladores de web, acostumbrarse a trabajar la maqueta de la web con medidas en porcentajes, porque ya este paso estaría solventado.

El cálculo de porcentajes

El siguiente paso a realizar es el cálculo de porcentajes. En esta parte se puede presentar algo fastidioso en cuanto al columnado. Porque el columnado previo fue desarrollado con elementos float y cuando se disminuye el marco, la barra lateral pasa a ubicarse debajo del contenido. No obstante se procede a aplicar la ecuación antes mencionada. Y de esta forma se realizan los cálculos de porcentaje de cada elemento dentro del DIV de contenedor global. El cual según lo mencionado anteriormente contaba con un ancho de 1080 pixeles. Pasando esas medidas a valores porcentuales, se obtiene entonces la siguiente sintaxis:

#main #content {float:left; width:63.9880952%; margin:30px 0 0 1.98412698%; }

[…]

#main #sidebar {float:left; margin:20px 0 0 3.47222222%; width:28.7698413%; }

Como se puede observar se han transformado tanto los anchos como los márgenes horizontales. De esta forma el sitio web mantendrá una apariencia cuadrada. Otro punto importante a destacar es la cantidad de decimales indicados en los porcentajes. Cuyo fin es de que el cálculo sea lo más preciso posible al valor original en pixeles.

Solución para elementos interiores sueltos que aumentan de tamaño

En el proceso de transformación de la página web cabe la posibilidad de encontrar en la maqueta ciertos elementos sueltos que por su tipología pueden crecer por encima de lo que es su contenedor global máximo, max-width. Estos elementos se pueden detectar jugando con el tamaño del navegador, a medida que se detecten se van corrigiendo. Otra forma rápida de corregir o evitar estos elementos, es seleccionar los contenedores y dar la orden de que ningún elemento interior crezca por encima de la medida del mismo contenedor.

En el ejemplo que se viene desarrollando se aplica esta última forma de corrección, dentro del contenido principal y de la barra lateral. Así se podrán solucionar por sí solo, ciertos problemas que puedan surgir de widgets. De acuerdo a esto la configuración para solucionar los elementos interiores sueltos, quedaría de la siguiente forma:

#main #content {float:left; width:63.9880952%; margin:30px 0 0 1.98412698%; }

#main #content * {max-width:100%}

[…]

#main #sidebar {float:left; margin:20px 0 0 3.47222222%; width:28.7698413%; }

#main #sidebar * {max-width:100%}

Elementos Posicionados en Absoluto

Para todos aquellos elementos que se encuentren posicionados en absoluto en la página web a transformar. Se les debe aplicar el mismo proceso anterior con los anchos, adaptándolos a valores en porcentajes en el eje de abscisas para variar su ancho. Suponiendo que en el ejemplo que se viene desarrollando, se disponga de algunos elementos posicionados en absoluto en la cabecera. A esos elementos se deben adaptar sus posiciones, a fin de que no queden flotando en el aire al momento de disminuir las dimensiones de la web. Para ello la configuración sería de la siguiente manera:

[…]

#header #top p.breadcrumb {position:absolute; top:90px; left:3.72439479%; color:white;}

[…]

#header #top p.like { position:absolute; top:10px; left:54.0037244%; }

[…]

#header #top div.vcard{position:absolute; top:11px; right:5.49348231%;  width:27.9329609%;}

Aplicando las Media Queries en elementos interiores

Al adaptar los anchos de la página, cabe la posibilidad que existan elementos que por su contenido no encuentren espacio en el re-diseño. Estos pueden entorpecer, al hacer que las adaptaciones se visualicen mal. A fin de evitar esta situación incómoda, se hace uso de simples media queries que permitan la modificación drástica del CSS, al producirse algunas dimensiones específicas.

Las media queries son una herramienta muy portentosa con las que se pueden hacer muchos artificios. En esta oportunidad se aplicaran para definir ciertas condiciones referentes al ancho de pantalla, y desde donde el CSS cambiará. Para esto traeremos a la memoria la siguiente sintaxis:

@media screen and (max-width:[ANCHO]px) {

/* Nuestras nuevas reglas con este ancho o menos de pantalla */

}

Esta declaración de media queries concretamente busca adaptar el diseño a diferentes resoluciones. Por lo que puede servir más que nada para ocultar ciertos elementos secundarios, que al darse anchos específicos de pantalla puedan molestar más que asistir al usuario. Además de servir para hacer pequeños acoples, de forma que algunos elementos puedan caber en el re-diseño en diferentes escenarios.

Para ejemplarizar lo dicho, se esconderán algunos elementos de resoluciones por debajo de 800 y 600 pixeles. Que en un supuesto están obstaculizando que se pueda ver correctamente el contenido de la página principal de la web a adaptar. Según la siguiente sintaxis:

@media screen and (max-width: 800px) {

#header #top p.like,

#header #top p.breadcrumb,

#header #top div.vcard p.twitter,

#header #top div.vcard p.linkedin,

#header #top div.vcard p.delicious,

#header #top div.vcard p.google,

.vcard h2{ display:none;}

}

@media screen and (max-width: 600px) {

#sidebar .twitter {display:none;}

}

Como se puede observar se están ocultando en resoluciones menores a 800 pixeles:

-Los like

-El breadcrumb

-Botones sociales, entre otros

Desde 600 pixeles hacia abajo se están eliminando los últimos tweets del sidebar

Las Media Queries también permiten modificar algunos estilos

Como ya se pudo observar las media queries permiten ocultar algunos elementos interiores. Pero también permiten realizar cambios en algunos estilos. Esta particularidad se puede usar, si un elemento además de no adaptarse en cuanto al ancho, no se quiere o no se desea hacer desaparecer u ocultar. Si se presenta esta situación en la web que se quiere transformar. Se buscara entonces mediante el uso de media queries, cambiarle sutilmente el estilo, a fin de que se adapte.

Suponiendo que en la web que se está trabajando, los botones sociales estén causando este tipo de problema. Y se decida cambiar sutilmente su formato, mediante la eliminación de iconos y disminuyendo el tamaño de la fuente, cuando la página baje de 960 pixeles de ancho. La configuración entonces sería la siguiente:

@media screen and (max-width:960px) {

#header #top div.vcard p {font-size:9px;}

#header #top div.vcard p.twitter a,

#header #top div.vcard p.linkedin a ,

#header #top div.vcard p.delicious a,

#header #top div.vcard p.google a {background:none; padding:0;width:50%; float:left;}

}

Qué Hacer con los Menús

¿Qué pasa con los menús, dentro del proceso de cómo hacer una web responsive en pantallas pequeñas? La respuesta a esta interrogante es que es un problema algo complejo de solucionar. Debido a que se trata de un conjunto de elementos que por lo general se presentan algo largos, y además el menú en sí, no es el contenido principal de la web. No se puede permitir por tanto que al abrirse la página en pantallas pequeñas, el menú ocupe mucho espacio.

En los dispositivos de uso al tacto, puede resultar molesto para el usuario, que se le aparezcan una lista de diminutos links, por lo que achicar los links no sería la solución más viable. Una alternativa que si puede resultar favorable es sustituir el menú por un elemento select. El cual representa un control que muestra un menú de opciones, donde el usuario puede seleccionar cómodamente. El elemento select reduce largos listados de menú en un pequeño bloque, por tanto su uso es ideal para dispositivos como tabletas y móviles.

Al hacer este remplazo en el nuevo diseño responsive es recomendable utilizar el plugin de jquery tinynav. El cual es sencillo y de gran compatibilidad, a este plugin se les refieren todos los elementos UL del menú. Y este a su vez adiciona al inicio del listado un elemento select con las características indicadas. Posteriormente el paso que queda hacer es ocultar el UL o el select con las medias queries, hasta lograr una solución favorable.

Procedimiento con el elemento select

El procedimiento de remplazar el menú por un elemento select, se hará mediante el plugin mencionado arriba. El cual deberá ser colocado en la cabecera sobre el listado de links. Así pues, cuando la página comience a bajar a resoluciones menores de 800 pixeles de ancho, los links se remplazaran por el select. Luego es seguir los siguientes pasos:

  • Agregar el script y en el ready del plugin jquery establecer la llamada al nuevo elemento. Según lo siguiente:

$(“.menu ul”).tinyNav();

Esta configuración agrega el select en cada uno de los listados de links del menú superior

  • Indicar al CSS básico que oculten los nuevos elementos select, con la siguiente declaración:

.tinynav { display: none }

  • Hacer uso de una media querie adecuada y dentro de ella agregar el formato del select y la orden de ocultar el propio listado. Quedando la configuración como sigue:

@media screen and (max-width: 800px) {

#header ul.menu li ul {display:none}

.tinynav { display: block; position:absolute; bottom:5px; width:79%; margin-left:15%}

}

De esta forma ya se habrá sustituido el menú de la web por un elemento select, al bajar la resolución de pantalla a menos de 800 pixeles de ancho.

Backgrounds de Bloques en cómo hacer una Web Responsive 

En este punto de la adaptación de la web, dependiendo de cómo sea la maqueta será el grado de dificultad. Al diseñar la web, en el punto CSS por lo general los bloques son decorados con fondos de imágenes. En el proceso de decoración se recure a una vasta cantidad de técnicas. De las cuales unas resultan más sencillas que otras a la hora de re-dimensionar.

Algunas soluciones

Es por esto que según sea la técnica usada el procedimiento podrá ser menos o más sencillo. Incluso se puede dar el caso que el fondo que tenga la web, pierda su objetivo al ocultarse los bordes. Resultando en estos casos un gran problema a superar. A continuación algunas soluciones a esto:

  • Modificar la mayor cantidad de los fondos posibles a estilos CSS3. Los cuales se adaptaran muy bien a los cambios. Actualmente es simple lograr que sean compatibles la mayoría de los exploradores, cuando se usan bordes redondeados, con sombras o con degradados. Con las tres situaciones CSS es difícil que los diseños requieran de gran cantidad de imágenes para establecer los bloques.
  • Prescindir de imágenes de fondo, para sustituirlas en lo posible por el CSS3 más próximo a como las media queries y los anchos adaptables hagan su función
  • De ser el caso de fondos que ya dominen la situación de un bloque. Se recomienda duplicar en el bloque este estilo y buscar que se distinga poco el background original

Otras soluciones a tres tipos de imágenes de fondo que pueden resultar molestas son:

  • Imágenes con bordes en el marco de la página, que aun quedando fuera de la parte que se visualiza, el resultado final no molesta, por tanto se deja
  • Iconos en ciertos títulos, que se soluciona ocultándolos con las media queries cuando comiencen a resultar molestos
  • El background global de la cabecera si incluye el cuadro blanco donde va el nombre del autor de la web. Para esto se podrá repetir el mismo estilo en el cuadro de autor de forma que se oculte un fondo con el otro al disminuir la dimensión de la página.

Cómo hacer una Web Responsive para pantalla móvil – Solución

Ya se pudo ver anteriormente varios aspectos sobre cómo hacer una web responsive en pantallas pequeñas. Con estos conocimientos se puede pasar de un diseño de web rígido con un ancho fijo de 1080 pixeles a un diseño bastante adaptable a pantallas pequeñas, de un gran número de dispositivos. Pero falta la solución del diseño responsive para las pantallas de los móviles.

Con la aplicación de lo que se vio para las pantallas pequeñas en el diseño para los móviles, los cambios hacen que se vea aceptable. Más debe ser perfeccionado, ya que resulta muy poco práctico para los móviles el diseño de dos columnas con elementos aglutinados en la cabecera

Por tanto es propio iniciar el proceso para lograr una visualización correcta en los dispositivos móviles. Es importante destacar que el uso de la navegación en un móvil no es el mismo que en una web normal. Se pudiera querer entonces ir más allá que simples cambios de adaptabilidad de ancho de pantalla u ocultación de elementos.

La etiqueta Viewport en este caso

El elemento viewport resulta una buena herramienta en la adaptación de la web a los móviles. Primeramente porque el viewport sirve para señalar al móvil la forma como se quiere que trabaje su zoom, cuando el dispositivo muestre el sitio web. Dicho esto se puede presentar básicamente dos opciones, indicada a continuación:

Opción 1: Para los websites con diseño responsive acoplado adecuadamente a las resoluciones móviles, se tiene lo siguiente:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

Esta opción es la más ideal, pero también la más laboriosa. Debido a que, al disminuir los anchos de columnas por debajo de 500 o 400 pixeles, los anchos se vuelven totalmente imposibles de manejar. Por lo que se tiene que ejecutar cambios radicales en la visualización de la web.

Opción 2: Si es el caso de websites que aún no se hayan adaptado perfectamente a la resolución de un móvil, se tiene lo siguientes:

<meta name=”viewport” content=”width=[Pixeles del mínimo ancho para visualizar bien la web]” />

Esta otra opción puede resultar más expedita. Debido a que solamente se indica en el diseño que el móvil se logre visualizar en la resolución deseada. Es decir la web seguirá siendo la página normal solo que en una versión más disminuida o adaptada.

Posibles consecuencias

Si se opta por la segunda opción pueden surgir dos inconvenientes con la web a adaptar o a diseñar en responsive.

Primero: La viewport en este caso funcionaria de forma global en todos los navegadores móviles. Dado el caso por ejemplo, que se indique una etiqueta viewport de 500 pixeles de ancho, dará como resultado que en los dispositivos Ipad con un ancho alrededor de los 800 pixeles se muestre una página a solo 500 pixeles de ancho. Dejando de aprovecharse el cien por cien del espacio disponible.

Segundo: Siguiendo con el caso de indicar una viewport de 500 pixeles de ancho. En este caso las resoluciones de 320 pixeles de ancho, el contenido de la web que se esté trabajando se mostraran en modo muy reducido. Por tanto si no se hacen algunos ajustes resultara infuncional. Por otra parte si se hacen ciertos ajustes para adaptar los menús o fuentes, se modificará de igual forma la versión de la web para visualizarse en una tableta, caso pantalla pequeña. En conclusión la solución de indicar un ancho fijo con una etiqueta viewport podrá ser la más rápida pero deja de ser eficaz.

Viendo las consecuencias de elegir la opción 2 de la etiqueta viewport, hace que la opción 1 sea la más recomendada. De esta forma se deja que el propio móvil muestre la resolución que este en la capacidad de hacer, al usar el viewport indicado arriba como opción 1 en el Head de la página

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

Con esta decisión de visualización, posteriormente es trabajar en la media querie, para versión móvil. Para ello se requiere pasar de columnas a bloques con un cien por cien de ancho. Además eliminar, comprimir ciertos elementos, ajustar fuentes así será amigable la lectura a 320 pixeles de ancho.

Eliminando columnas

Como ya se mencionó anteriormente para la adaptación responsive en móviles es necesario perfeccionar el diseño en el aspecto de las dos columnas a fin de evitar el aglutinamiento de elementos en la cabecera. Para este proceso se eliminara columna colocando una superpuesta de la otra, pero existen dos escenarios que se pudieran presentar:

Que las columnas ya se encontraran ordenadas en el Html: Si este es el caso, ya se están presentando en la forma deseada para los móviles. Solo se requerirá hacer desaparecer los Floats o modificar el display:inline-block o display:box, para remplazarlo por un display:block normal. Mediante la aplicación de la siguiente sintaxis:

@media screen and (max-width: 400px) {

#content {display:block; float:none; }

}

Si las columnas no se encontraran ordenadas: En este escenario se debe trabajar con posiciones absolutas para que los bloques inferiores ocupen la parte superior de la página. Así como usar márgenes para mover los bloques superiores hacia el inferior, a fin de que no se traspongan. Ejemplo, suponiendo la siguiente distribución:

<div id=”main”>

<div id=”content”></div>

<div id=”sidebar”></div>

</div>

En esta estructuración se desea que en el móvil los elementos de la barra lateral sidebars, se ubiquen previo a los content. Entonces la CSS se presenta como sigue:

@media screen and (max-width: 400px) {

#main {position:relative; width:100%; }

#content{margin-top:80px; width:100%; float:none;}

#sidebar{height:80px; position:absolute; top:0; width:100%; float:none; }

}

Para visualizar el segundo escenario, en el que se tenga que recurrir a posiciones absolutas en la versión móvil, se presenta el siguiente ejemplo de estructura

@media screen and (max-width: 450px) {

#main #sidebar  {display:block; float:none !important; width:100%; position:absolute; top:-80px; margin:0 !important; border-bottom:1px solid #aaa; padding:0 0 20px 0;}

#main #content {float:none; width:auto; margin:100px 0 0 0; }

}

En este caso también se sitúa un cambio a 450 pixeles de ancho en versión móvil.

Ajustando Fuentes

Otro aspecto que se debe acometer en la adaptación responsive en la versión de móviles es el ajuste de las fuentes. Debido a que, cuando la web fue diseñada se hizo pensando en monitores grandes. Al pasar a las versiones de móviles que cuentan con pequeñas pantallas en vertical, los websites por lo general no se pueden leer o visualizar cómodamente. Los titulares de la web ocupan mucho espacio, el texto del contenido por el tamaño de la fuente dificulta su lectura. De acuerdo a esto, es necesario revisar todas las fuentes llevándolas a una configuración viable de visualización en la pantalla de un móvil.

A continuación se muestran ajustes en cuanto a este aspecto, donde se modificaron las fuentes del menú, se disminuyó el tamaño fuente de títulos y se aumentó las del contenido. Obsérvese la siguiente configuración:

  #header ul.menu li,

#header ul.menu li.analytics,

#header ul.menu li.development {background:none;}

#header ul.menu li h4 {margin:30px 0 0 0px; font-size:12px; text-indent:10%;}

 

#main #content .hnews h3 a,

#main #content .hnews h1 a{ font-size:22px; }

#main #content .hnews .entry-content {font-size:16px;}

Otros ajustes en cuanto a la estética y estilos

Hecho todo el proceso anterior de cómo hacer una web responsive en el diseño para la versión de los móviles. Lo que queda es dar los últimos retoques en cuanto a la apariencia y estilo de la web. En este caso se puede re-diseñar aquellos estilos que no se adapten a la nueva versión y desechar los que lleguen a tener cabida en ella. De igual forma se pueden mover algunos elementos como el sidebars por ejemplo, para posicionarlos en otra ubicación, o también realizar cambios de márgenes, entre otros ajuste. A fin de lograr finalmente una web móvil bonita y lista para funcionar.

¿Cómo hacer una Web Responsive? – Los testing y las pruebas

Cuando se está diseñando no solo en lo que se refiere a desarrollo web, sino que en toda creación o estructuración de algo nuevo. Existe una etapa de testing o pruebas, donde se podrá comprobar los resultados, si estos son óptimos o requieren de mejoras.

Dicho esto es conveniente realizar un chequeo o prueba luego de haber ejecutado todo el procedimiento anterior. Estas pruebas deberían realizarse según se vayan ejecutando los pasos y poder verificar los cambios que se van logrando en cada uno. De igual forma es necesario realizar los dos siguientes chequeos en el funcionamiento de la web

Ir probando en el navegador

A medida que se vaya trabajando en el diseño responsive se debe ir ajustando el ancho de la pantalla. A fin de ir comprobando las nuevas adaptaciones, las cuales van adoptando nuevas formas. De igual forma se podrán detectar pequeños fallos y así hacer poder realizar los ajustes en las media queries usadas. Para la comprobación de los anchos de pantalla, se tienen las siguientes dos formas de hacerlo:

  • Actuar en directo quitando la maximización del navegador para ir probando con su ancho.
  • Hacer uso de elementos como ISH una herramienta útil para llevar a cabo estos ajustes de testeo con sencillos mandos.

Evitar la caché móvil

Los dispositivos móviles por su propia naturaleza cachan datos más allá de los que son necesario, incluso más de lo que haría un navegador habitual. En los habituales por lo general es suficiente ejecutar CTRL+F5 para inducir a cargas sin cache. Mientras que en los móviles se dificulta una acción de este tipo, inclusive ciertos exploradores cuentan con la opción de desactivar la caché. A fin de facilitar un mejor trabajo sin la caché se recomienda lo siguiente:

  • Trabajar con variables en la llamada Css, como por ejemplo:

“/styles.css?version=xxxx”

Haciendo la modificación en cada caso específico el número de versión. A fin de que la URL sea diferente y así no utilice la caché.

  • Laborar directamente en el navegador. Aumentando suavemente la mínima resolución móvil, entre 420 y 450 pixeles. De esta forma se podrá causar que se visualice en el navegador al ser encogida lo suficiente. Otra forma es mediante el uso de herramientas que redimensionen páginas webs.

Con estas acciones, sin duda se obtendrá un resultado más práctico y cómodo a la hora de realizar las pruebas.

¿Cómo Hacer una Web Responsive? – Conclusión

En todo lo anterior se pudo conocer algunas técnicas, herramientas tecnológicas y procedimientos que con frecuencia se aplican en el diseño de una web responsive. Todo este conocimiento de igual forma se puede aplicar en una web existente que se quiera llevar a un diseño adaptativo. Sin tener que trabajar en la construcción de una web nueva.

Por tanto a la siguiente interrogante ¿Haciendo todo lo aprendido, se logra hacer una web con diseño responsive? Obviamente la respuesta es un No rotundo. ¿Por qué? Porque solo se consiguió hacer una web sensible a las adaptaciones, que en su origen no lo era. Ya que fue concebida bajo una naturaleza rígida o fija.

Posibles consecuencias o errores

Durante el proceso de adaptar una web tradicional o una más sensible a los cambios, puede llevar a cometer algunos errores y por ende surgirán ciertas consecuencias, veamos:

-Se tienen que eliminar ciertos elementos que cuando se creó la página eran de vital importancia. Por otro lado la acción de eliminarlos se hizo en base a la apariencia y no por la importancia del contenido a transmitir al visitante de la web.

-Posiblemente no se haya conseguido la perfección en el aspecto visual en general. Pudiendo solo mejorar la ya existente. Caso totalmente diferente de si se creara una web desde el principio.

-Dependiendo de la maqueta de la web original se podrá llegar o no al final de la adaptación a los cambios. Con algunas maquetas los desarrolladores en este intento, solo podrán realizar soluciones intermedias.

Finalmente sobre el diseño responsive

Finalmente lo que se llevó a cabo solo fueron simples detalles. Resaltando la importancia de que se trabajó para obtener una maqueta adaptable a un diseño que de origen no lo era. Cuando se lee Responsive Design se entiende que se está hablando de diseño y no así de una labor de maquetación. Por lo que, como hacer una web responsive debe originarse desde el contexto de un diseño nuevo original.

No obstante poder mostrar una web que puede cambiar y adaptar a la resolución de un móvil, partiendo de una que era rígida es un logro bastante grande y útil. Lo explicado aquí no implica que ya se esté capacitado en lo que se refiere a diseño responsive. Para ello se necesita indagar mucho más.

Por cuanto se necesitaría mucho más fundamento, conocimiento y aprendizaje de diferentes procesos más generalizados, más técnicos.

Cómo hacer una Web Responsive – Consejos finales

Para culminar es importante saber que el diseño responsive es lo actual de la web. Este tipo de diseño web requiere de una nueva forma de pensar. El desarrollar estas webs puede resultar más fácil siguiendo los siguientes consejos enunciados:

  • Piensa en móvil primero: Al diseñar conviene iniciar primero por adaptarse al tamaño pequeño de la pantalla de un móvil. Así después ir ajustando el contenido a las pantallas de tamaños mayores. Debido a que, al diseñar pensando en un teléfono móvil, se puede ser más objetivo con el contenido que se debe mostrar en la página, quedando solo lo que realmente es importante presentar.
  • NO optimizar el diseño para un móvil o tableta específico
  • Seguir los estándares y buenas prácticas: Como por ejemplo, no usar estilos CSS definidos en el propio archivo, dentro de las etiquetas Html.
  • Evitar ser esclavo del píxel en el diseño: Tener en cuenta que los elementos encuentran la posición que les corresponde. Esto porque atienden a la fluidez de los contenedores y al dimensionamiento. Cuando se dé el caso que no se visualice como se quiere, solamente arreglar la disposición de los elementos aplicado las media queries.
(Visited 18 times, 1 visits today)

Deja un comentario