Diseño responsive

21 junio, 2018

Aunque a lo largo de este artículo profundizaremos bastante más en todo lo que tiene que ver con un diseño responsive, resulta extraño ver cómo hay algunas empresas, tanto grandes como pequeñas, que todavía se resisten a este cambio. Un cambio que es totalmente necesario sobre todo cuando vemos la tendencia de las personas cuando navegan por internet. Una tendencia que se basa principalmente en dos aspectos que son claves.

Cuando hablamos de navegar por internet, podemos observar que ya no solo se navega desde el PC. Es más, a día de hoy ya se utilizan más los dispositivos móviles, como por ejemplo las tabletas y los teléfonos móviles que los ordenadores personales.
Asimismo, por otro lado, aunque pueda parecer raro, cada día la gente tiene menos tiempo para navegar. De ahí la importancia de ser capaces de servir un contenido de un modo rápido y sobre todo sencillo.

Estos argumentos deberían ser más que suficientes para las compañías. A partir de ellos deberían darse cuenta que la adaptación de su página a esta nueva realidad no es algo opcional. Y no solo lo decimos nosotros en este humilde y modesto blog.

Las principales tiendas online del planeta, como pueda ser, por ejemplo, el caso de Amazon, tienen una versión móvil con la que poder comprar en tan solo 5 minutos.
Por otro lado, los principales medios de comunicación del mundo, cada día que pasa invierten más y más recursos en ofrecer una versión móvil que esté a la altura de lo esperado por los usuarios.

A partir de aquí, y de una manera organizada y progresiva, se debería comenzar un proceso de conversión. Del mismo modo que las empresas y los proyectos serios ya no se pueden resistir a la digitalización, el mundo responsive ha llegado para quedarse. Mucho más cuando, si analizamos más datos nos damos cuenta que cada día se venden más dispositivos móviles que ordenadores de sobre mesa. ¿Todavía estamos en posición de pensar que no hay que adaptarse a estas nuevas tecnologías? ¿De verdad creemos que podemos obviar a aquellos usuarios que utilizan los smartphones y las tabletas para navegar? La respuesta es un no rotundo. Así que, tras sentar las bases de todo lo que vamos a ver, no puedes hacer otra cosa que coger papel y lápiz y tomar buna nota de todo lo que vamos a decir Gran parte del éxito de tu compañía o de tu proyecto depende de ello.

Que es un diseño web responsive y en qué consiste

En esencia, un diseño responsive, aunque también se puede denominar como diseño adaptativo, no es otra cosa que una técnica, es decir, un conjunto de acciones que se llevan a cabo sobre un sitio web determinado, y que buscan la correcta visualización en los diferentes dispositivos que nos podemos encontrar a día de hoy. https://www.youtube.com/watch?v=CNXuw5E1j3Y Una vez que se aplica esta técnica que hemos mencionado, no importará si queremos visualizar una página web en un ordenador personal, en una tablet o en un teléfono móvil. Esta se debería poderse ver de una manera idéntica. Es cierto, que siempre habrá matices en función del tamaño disponible, pero el usuario debería poder tener acceso a todas y cada una de sus funcionalidades. Esto es posible ya que los desarrolladores, cuando se incluye el diseño responsive dentro de un sitio web, no hacen otra cosa que redimensionar y colocar los elementos de la página de forma que se adapte al ancho de ese dispositivo. Una recolocación que no solamente tiene que ver con el menú o los textos, sino también con los diferentes elementos multimedia como pueden ser las imágenes y los vídeos. Aunque un poco más adelante vamos a ver con mucho más detalle los beneficios que tiene un diseño web responsive, lo que sí podemos adelantar en este punto del artículo, es que cada día son más los proyectos y las compañías las que se unen a esta tendencia. Aunque bueno, bien pensado, no se debería hablar de tendencia sino de una obligación. Y decimos obligación, porque el que una página web sea responsive, es de vital importancia para que los usuarios tengan una buena valoración de ella. Pero no solo los usuarios, no nos podíamos olvidar de ninguna de las maneras de la repercusión que tiene un diseño responsive en los diferentes motores de búsqueda que conocemos, sobre todo, como no podía ser de otra manera, de Google. Esto es así por algo muy sencillo y muy evidente. Si Google busca que los usuarios tengan una buena experiencia con los resultados que arroja como consecuencia de sus búsquedas, es normal que aquellas páginas que ofrezcan un diseño adaptado a todos y cada uno de los dispositivos que conocemos, tengan un mayor reconocimiento. Esto hace que las páginas que hayan adoptado esta técnica, estén mejor posicionadas acaparando una mayor cantidad de tráfico. Ya lo sabes, independientemente de los beneficios que pueda tener, que ya te decimos que son bastantes, tienes que subirte a la ola del diseño responsive. Tienes que invertir algo de tiempo y de dinero en adaptar tu página web. Aunque la verdad sea dicha, cada día, sobre todo con los sitios web sencillos, es más sencillo tener un diseño completamente adaptado. De hecho, nos atreveríamos a decidir, que cada vez hace falta invertir menos dinero y menos tiempo.

¿Cuáles son los beneficios de una web responsive?

Una vez que ya hemos visto la importancia que tiene un diseño responsive, sin embargo, cabe preguntarse si realmente merece la pena todo lo que vamos a hacer en nuestra página web. Ventajas de un diseño responsive Pues bien, hay que decir que la respuesta es un sí rotundo. Una afirmación que nosotros hacemos de manera categórica pero que nos apoyamos en los siguientes aspectos. Una serie de ventajas que hay que tener muy en cuenta y que son las que nos van a terminar de animar a cambiar la filosofía de nuestro sitio web.

Flexibilidad. Gracias al diseño responsive, el contenido de tu página web será lo suficientemente flexible como para adaptarse sin problemas a cualquier dispositivo. Esto hace que tus usuarios tengan una mayor facilidad de ver lo que públicas sea cual sea el medio que utilicen.
Google lo recomienda. De esto ya hemos hecho una pequeña introducción hace tan sólo unos instantes. De todos modos, hay que hacer de nuevo hincapié en el hecho de que Google nos recomienda dentro de las directrices a seguir para tener un sitio web optimizado. Ya sabes, si quieres estar entre los primeros puestos de sus resultados de búsqueda, tu sitio web tiene que ser responsive.
Mejor experiencia de usuario. Esto es algo indiscutible. No solo vamos a conseguir un buen posicionamiento sino que vamos a hacer que los usuarios estén más tiempo en nuestra página web. Les vamos a proporcionar una mejor experiencia ya que todos los contenidos se van a poder visualizar de mejor manera. Y ya se sabe que a mayor confianza mayores recompensas.
Fácil de gestionar. Gracias a este tipo de diseño adaptativo, no tendremos que hacer dos campañas de SEO, dos campañas de Google AdWords y no tendremos que tener dos enfoques diferentes. Es cierto que tendremos dos tipos de visualizaciones pero tendremos únicamente un esquema de contenidos. Esto facilitará mucho la tarea y únicamente tendremos que tener el foco puesto en una única estrategia para conseguir los objetivos que nos hemos propuesto.
Es rentable. Ya hemos dicho que la teoría que dice que crear un diseño responsive es caro, no se sostiene por ninguna parte. Si bien es cierto que hay que invertir una pequeña cantidad de dinero y de tiempo, basta analizar la cantidad de tráfico que atraemos a nuestro sitio web con el paso del tiempo, para ver qué es rentable invertir estos recursos en adaptar nuestra página web a todo tipo de dispositivos. Un largo plazo que está indicado sobre todo para aquellas personas que tienen un proyecto serio.
No existe contenido duplicado. A pesar de que se puede pensar de que son dos páginas diferentes con el mismo contenido esto no es así. Esto se consigue gracias a las nuevas actualizaciones que Google ha hecho en su algoritmo Panda. Es por ello por lo que podemos estar completamente seguros. La versión de un ordenador personal aun siendo distinta a la versión de un teléfono móvil o de una tableta, no tendrá ningún tipo de problema en lo que se refiere a posibles penalizaciones por contenido.
Mejor construcción de enlaces. Al ser un único proyecto, a pesar de que se visualice de una manera diferente, la construcción de enlaces es única. Nosotros no tendremos que pensar en una versión para ordenador y en una versión adaptada. Únicamente tendremos que centrarnos en crear una estrategia de enlaces de calidad. Los resultados llegarán en forma de una mejora en el posicionamiento que Google nos va a realizar.
Menor porcentaje de rebote. De manera aproximada, se sabe que el 50% de los usuarios aseguran que tienen dificultades al visualizar una página en sus dispositivos móviles. Esto hace que salgan de ella y busquen alternativas. De ahí que sí nosotros realizamos una adaptación perfecta de nuestra página web, reduciremos en porcentaje de rebote y por lo tanto mejor haremos, una vez más, nuestro posicionamiento.
Mayor velocidad. Ya sabemos que el tiempo de carga es vital. Y también es cierto que el tiempo de carga de un dispositivo móvil siempre es mayor que el tiempo de carga en un ordenador personal. Sin embargo este tiempo será mucho mayor si no tenemos una versión adaptada. Esto debería ser un motivo más que suficiente para pasar a la acción, adaptar nuestra página web y reducir ese tiempo de carga tan molesto para los usuarios.
Tasa de conversión más elevada. Una versión adaptada correctamente, hace que las compras, la introducción de correos electrónicos o la consecución de la acción que nosotros queremos por parte del usuario sea más sencilla. Al ser un diseño claro, sencillo y limpio, las personas que visiten nuestra página web no tendrán ninguna clase de problema en entender lo que queremos de ellas.

Que es bootstrap

Con la intención de que no quede algo muy farragoso, se puede decir que Bootstrap es un framework especialmente pensado para confeccionar diseños web adaptados. Entre otras particularidades tiene que ha sido creado por Twitter y a día de hoy es uno de los más utilizados. https://www.youtube.com/watch?v=n4NikRhqCAI Al fin y al cabo, de lo que se trata, es de poder reducir el tiempo a la hora de crear un diseño responsive. Y sin con la ayuda de estas herramientas se puede hacer, pues bienvenidas sean. Sin embargo, creemos que merece mucho la pena hablar de las ventajas que tiene este framework. Unas ventajas que son tan interesantes al punto de que nosotros mismo lo utilizamos siempre que podemos.

Código de abierto. Por encima de todo, y esto es muy importante en los tiempos que corren, tenemos la ventaja de que se trata de un framework de código abierto. Esto no solo nos permite modificarlo según nuestras necesidades sino que también quiere decir que es completamente gratuito. ¿De verdad sigues empeñado en que realizar una versión adaptada de tu página web es caro?
Sencillo de aprender. Tiene una curva de aprendizaje bastante asequible para casi cualquier persona. Esto te va a permitir crear una versión móvil de tu web sin esfuerzo. Además, en el momento en el que te familiarices con algunos aspectos de Bootstrap, lo podrás utilizar con tus clientes con todo lo que ello implica desde el punto de vista de la obtención de beneficios.
Incorpora todo tipo de elementos. Bootstrap permite incorporar numerosos elementos web. Si eres un fanático de HTML5, CSS o Javascript, no te preocupes. Con este framework los vas a poder integrar todo sin ninguna clase de problema.
Un diseño siempre responsive. Gracias a la filosofía con la que se ha creado Bootstrap, tu diseño siempre será responsive. Ya no tendrás que preocuparte de las posibles dimensiones que tengan las pantallas de los dispositivos en los que se va a visiones la página web. Esta estará siempre adaptada con un único diseño.
Grid System. Como de lo que se trata es de ofrecer un sistema de maquetación sencilla, nada mejor que utilizar un sistema por columnas. Unas columnas, las cuales, por cierto, son muy configurables. Nada se te va a resistir. Ahora la forma que quieras que tengan tus proyectos no será un problema en absoluto.
Una gran comunidad detrás. Si hay algo importante en casos como este, es que hay una gran comunidad detrás de Bootstrap. Esto se debe a que al ser propiedad de Twitter son muchas las personas las que pasan mucho tiempo desarrollando nuevas soluciones y compartiéndolas con el resto de la gente. Esto es muy importante ya que gracias a todas estas personas vamos a poder encontrar soluciones para todos los problemas que tenemos.
Vínculos con WordPress o Drupal entre otros. Pero Bootstrap no se queda solo. Sabiendo que a día de hay CMS muy importantes como es el caso de WordPress o Drupal, no duda en ningún momento en tener implementaciones externas para estos sistemas.

Como usar bootstrap

No. No estamos locos. Ya sabemos que utilizar y exprimir al máximo Bootstrap puede dar para mucho. De eso no hay duda. Sin embargo, en poco más de 5 minutos os vamos a dar las indicaciones justas para que comencéis a saber todo lo que os puede ofrecer este framework.

Maquetación. El bueno de Bootstrap nos da algunas clases que tienen una clara orientación a la maquetación. Gracias a ellas vamos a poder crear diseños adaptados a pantallas muy pequeñas. Esto es lo que se conoce dentro del argot como Scaffolding.
Elementos básicos. Este framework, de por sí, ya nos proporciona algunos elementos realmente interesantes. Muy vistosos. Sin embargo, para aquellos que quieran ir un poco más allá también hay buenas noticias. Y es que introduce algunas clases que permite, por así decirlo, decorar un poco el conjunto por lo que el resultado será mucho más vistoso.
Barras de navegación. La barra de menú es un elemento crucial. De hecho es uno de los elementos a los que más atención tenemos que prestar para que el conjunto quede realmente bien. Pues bien, gracias a las facilidades que nos da Bootstrap vamos a poder crear de un modo muy sencillo algunas barras de menú realmente atractivas. De este modo toda la información quedará perfectamente estructurada.

Como se puede observar, Bootstrap no deja nada al azar. Todos y cada uno de los aspectos que hay que tener en cuenta a la hora de adaptar un sitio web, este framework los tiene.

Optimización diferenciada en el diseño responsive

No obstante, llegados a este punto, tenemos que decir que todo lo que hemos dicho hasta ahora es imperfecto. No pasa nada. No hay que tirar el trabajo que ya se ha hecho. De lo que se trata es de optimizar lo que hemos hecho. Diseño responsive Por eso lo que vamos a hacer va a ser mencionar 5 aspectos que serán los que nos van a permitir diferenciarnos de la competencia. Al fin y al cabo el objetivo no es ser como todos sino ser especiales.

Crea siempre un prototipo. Que no te cieguen las ganas por terminar el proyecto. Párate un momento y haz algunos bocetos. Gracias a ellos vas a poder ver pequeñas imperfecciones o posibles defectos. Ahora es el momento de limar todo eso.
Simplicidad. Ni que decir tiene que si quieres que tu sitio proporcione una buena experiencia de usuario, este tiene que ser sobre todo sencillo. De lo contrario el usuario se frustrará y seguramente abandonará tu sitio web sin haber llevado a cabo la acción que tú querías.
Tamaño de las imágenes. Si quieres evitar el tan temido escalado, lo mejor que puedes hacer es trabajar con imágenes que tengan un tamaño estándar. De lo contrario puede ser que tengas muchos problemas y muy complicados de resolver.
No abuses del texto. Es cierto que siempre hemos dicho que el contenido es el rey dentro de cualquier estrategia de marketing. Sin embargo, en las versiones móviles leer no siempre es lo más adecuado. De ahí que te aconsejamos que no utilices más del debido. Apóyate en imágenes, en vídeos o en infografías. Poco a poco tus usuarios te lo agradecerán.
Haz caso a Google. Pocas decisiones hay más inteligentes que esta. Si de lo que se trata es de ganarse su favor, nada mejor que seguir sus directrices. Algo que puedes hacer de una manera muy sencilla gracias a esta página en la que el gran buscador indica cuáles son las directrices a seguir para tener un diseño responsive perfecto.

Ahora mismo no corras a tu framework preferido y te pongas a optimizar todo de una sola vez. Es mejor dar pasos pequeños pero seguros. Así que, de la lista que te hemos dado, aborda el aspecto que te parezca más grave. Así, de manera progresiva, ve abordando todos los posibles defectos de tu sitio web.

Usabilidad de usuario para dispositivos móviles

La usabilidad es algo básico para visualizar una página web en un dispositivo móvil. Hay que tener en cuenta que en los casos de los diseño adaptativos estamos hablando de espacios muy pequeños que poco tienen que ver con la pantalla del ordenador. Todo esto, por supuesto, se tiene que estudiar dentro de un escenario completamente diferente al que nos podemos encontrar dentro de un ordenador personal. Sin embargo, no es tan complicado como podemos pensar. Y si no, presta atención a los 3 aspectos claves de los que vamos a hablar a continuación.

Estructura y distribución. Si en un ordenador personal esto es importante, en un dispositivo móvil lo es aún más. Hay que estudiar los gestos que hace el usuario, dónde dirige habitualmente sus dedos y cuáles son las acciones que suele llevar a cabo. A esto hay que sumarle las limitaciones en cuanto a espacio se refiere. Todos ellos detalles que nos hacen llegar a la conclusión de que lo que mejor será incluir dentro de la primera pantalla la información más importante como por ejemplo, la llamada a la acción.
Contenido VS interfaz. Aquí la premisa es clara. Y sencilla. Hay que mostrar el contenido lo más rápido posible. Navegar con el dedo es complicado. De eso no hay duda. Por eso la navegación tiene que ser ágil. Y tiene que servir para algo. Ya os adelantaos que no van a ser muchos los usuarios los que naveguen durante horas. Te darán una oportunidad de varios segundos. Si no lo has hecho bien, estás perdido.
De este ya hemos hablado un poco hace unos momentos. El contenido debe ser escalable, es decir, debe ir acorde con el tamaño de la pantalla. Solo de ese modo se evitará que el usuario muestre reticencias a la hora de interactuar con nuestra página web.

Añadir que si no tienes claro el objetivo del a usabilidad es porque seguramente no te has planteado cuál es realmente la misión de tu página web. Aunque esto pueda parecer algo trivial, si sabes cuál es el objetivo y, lo que es mejor, lo que quieres de tus usuarios, podrás optimizar mucho mejor la versión adaptada de tu página web.

Las mejores plantillas para WordPress adaptables

El momento de elegir una plantilla de WordPress nunca es sencillo. No nos vamos a engañar. Todos sabemos, y tú también lo sabes, que son centenares las veces las que miras una y otra vez las distintas plantillas que tienes a tu disposición. Cada una con sus pros y sus contras. Todas muy bonitas en apariencia pero, ¿qué es realmente lo que tenemos que buscar en ellas?

Principales cualidades y funcionalidades. No escojas aquellas que tenga muchas funcionalidades. Escoge aquella que tenga las funcionalidades que a ti te interesa. ¿De qué te sirve, por ejemplo, que puedas configurar un “slider” si no lo vas a utilizar? Prioriza aquellas plantillas que se adaptan a tu y a tu objetivo. Solo de ese modo estarás más cerca de lo que quieres.
Opiniones de los usuarios. Cada día que pasa esto es más importante. Cada vez son más las personas las que comienzan su propio negocio online. De ahí que utilicen plantillas de WordPress. Y de ahí que muchas de esas personas dejen su comentario. Analiza los comentarios. Infórmate sobre sus puntos fuertes y sobre sus debilidades. De ese modo podrás ver si algunos ya han tenido dificultades con esas plantillas.
Soporte y actualizaciones. ¿Alguna vez no has sabido configurar una plantilla? ¿En alguna ocasión algo no te ha funcionado Seguro que sí. Pues bien, por todo eso el tener un buen soporte es algo vital para la buena salud de una plantilla. Pero no solo. También hay que valorar el hecho de que sean muchas las actualizaciones que llegan cada poco tiempo. Así te asegurarás que tu plantilla va a funcionar como debe en todo momento.

Y para muestra un botón. A continuación te vamos a dejar algunas plantillas responsive de manera que seas tú mismo el que decidas si es la que más te interesa o no.

Sydney

Esta es una plantilla que se adapta a la perfección a los que necesitan un alto grado de personalización. Y es que con ella vas a poder tener acceso a un sinfín de recursos más propios de una plantilla profesional. Además, no descuida para nada lo básico. En ella podemos encontrar la integración de todos los iconos sociales, podemos integrar formularios de correo electrónico y otros tantos elementos.

Flash

¿A quién no le gustan las plantillas con aspecto Premium? Gracias a esta plantilla respondive para WordPress la vas a poder tener. Su principal característica es con solo arrastrar y soltar vas a poder configurar todas las páginas que necesites. Pero Flash quiere ir un poco más allá y por eso integrar algunos elementos que no pueden faltar en un sitio web actual como puede ser el caso de los blogs corporativos. A esto, además, hay que añadirle el hecho de que es totalmente gratuita por lo que no habrá que invertir nada de dinero en ella.

Shopera

¿Necesitas una tienda online? ¿Necesitas que esta sea lo más sencilla posible? ¿Necesitas que se adapte a la perfección a los dispositivos móviles? Si es así, esta plantilla es la que estabas buscando. Sencilla, pensada para los que se inician en los ecommerce tiene los elementos suficiente como para incluso los programadores más avezados le puedan sacar partido.

Striker

Novatos. Blogueros. Dos términos que pueden echar para atrás pero que no deberían hacer eso. Más que nada porque esas personas podrán encontrar en Striker a su fiel aliado. Una plantilla totalmente responsive que es perfecta para los que están empezando. Con una interfaz realmente sencilla y atractiva. Podrás personalizar la barra de menú, el logotipo, el fondo y los iconos sociales. Gracias a todas sus propiedades no dejarás nada al azar y podrás captar tanto público como quieras. Y todo ello con la ventaja de que cuenta con una gran documentación lo que te permitirá sacarle todo el partido posible.

Virtue

Esta plantilla es un clásico. La inmensa mayoría de personas que nos dedicamos a esto, en algún momento, la hemos utilizado. Es sencilla, rápida y con todo lo necesario para que el proyecto en cuestión tenga un aspecto profesional desde el primer día. Gracias a su filosofía podrás crear cualquier diseño que te propongas. No en vano su núcleo está basado en Bootstrap. Además, no solo la puedes utilizar para crear una página web corporativa sino que la puedes utilizar para generar ingresos a través del comercio electrónico o a través de un blog de calidad. Tú eliges.