En este post vamos a bajar del cielo de las webs corporativas y bajaremos al suelo, al usuario de a pie, y como debería de enfocarse en diseño responsive para las webs de los autónomos, aficionados, tiendas a pequeña escala . . . en resumen, webs a pequeña escala gestionadas normalmente por 1 o 2 personas.
Tengamos en cuenta que el presupuesto disponible es precario, y la contratación de una agencia para el proceso de traslado es inviable. Bien, si contamos con unos conocimientos técnicos medios, la alternativa es hacerlo el proceso nosotros mismos.
Suena bien, ¿verdad?
¡Responsivizate !
Para ello existe una propuesta de editor web responsive: Zeendo
Se trata de una plataforma basada en cloud computing, de forma que todo el trabajo está siempre online y se puede continuar el proceso de edición de la nueva web sin perder ningún cambio, sin tener que descargar ningún tipo de software, y así, desde cualquier lugar, a cualquier hora. Pero sin duda, lo más importante es que está concebido para cualquier usuario sin conocimientos de programación.
Ya podemos empezar a respirar más tranquilos.
¿Como funcionan los editores web?
La base la adaptación se hace a partir de plantillas personalizables creadas en HTML5 y CSS3 que re-colocan los elementos de la web, dependiendo del espacio disponible según la resolución de pantalla. De esta forma discriminan elementos, texto, pestañas del menú, reducen las imágenes de manera que la navegación sea fluida, intuitiva y así se pueda ver de forma optima en todos los dispositivos, sean fijos o móviles.
La tecnología HTML5 y CSS3 son los que nos permitirán lograr un diseño que se adapte al medio. Dentro de las características de CSS3, encontraremos las claves para lograr que nuestros desarrolles se adapten, creando reglas, que responderán según las características y disposición del dispositivo” comenta.
Por ejemplo, es posible crear reglas según el alto o ancho de la pantalla, pero también tendremos la posibilidad de especificar opciones según el dispositivo esté en modo Landscap (horizontal) e o Portrait (vertical) como en el caso de los smartphones o tablets.
En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media y un layout con imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, más ligeras, redistribución de las columnas en el diseño, menos texto, etc.).
Sobra decir lo fácil en que se convierte manejar una web optimizada para el móvil, ya que solo usamos el scroll para subir y bajar, y añadimos funcionalidades táctiles para agrandar y reducir las imágenes, de forma sencilla para el usuario, sin que con ello se nos descomponga la estructura de la web.
¿Qué pasa si necesito algo más potente?
En caso de necesitar una web más compleja que la que nos puede proporcionar Zeendo, podemos hacer uso de la última versión de PrestaShop para crear un ecommerce responsive o WordPress para crear cualquier tipo de web compleja y responsive (Ej. Web corporativa + blog + ecommerce sencillo). En k3bone tenemos planes con las últimas versiones de PrestaShop, WordPress y Joomla! que soportan las plantillas responsive más avanzadas e impactantes.
Responsive para SEO
No sólo se trata de obtener una solución para todos los dispositivos, se trata de ganar puntos en el ránking de los buscadores móviles de manera que ganemos visibilidad y tráfico en nuestro sitio web.
Una web creada con diseño responsive mejora el SEO, las búsquedas a través de dispositivos móviles son diferente a las que se realizan desde un ordenador de escritorio por lo que tener una versión móvil de tu web es bueno, tener una con responsive design es aún mejor, sobre todo porque cuantos más dispositivos alcances a cubrir más tráfico generará tu web.
Tan simple como eso.
Además, buscadores como Google ya están priorizando en el ránking a las websites móviles en búsquedas móviles, como es lógico.
Al tener una sola URL, el contenido se optimiza una sola vez, cada vez que sea necesario. Con lo cual, se facilita en gran medida el trabajo de indexación del algoritmo de Google, con lo que se consigue un mejor ranking. No se duplica contenido.
El diseño responsive se está generalizando a pasos agigantados y eso ha producido varios desarrolladores creen frameworks (aplicaciones preconfiguradas) para que no se tengan que crear las páginas adaptativas desde cero, nos facilitan la vida y hacen que todo el proceso de creación sea mucho más fácil para los desarrolladores.
1) El más generalizados es Bootstrap, un framework creado por el equipo de desarrollo de Twitter y de código abierto, muy usado por desarrolladores freelances.
2) Foundation 3 es otro framework muy popular el cual ellos mismo definen como “el framework más avanzado del mundo»….
3) HTML5 Boilerplate, el framework que usan más marcas conocidas como Google, Microsoft, Nike o el equipo de desarrolladores de Barack Obama.
Paso a paso
Para realizar el cambio a Responsive Design conviene ir poco a poco analizando cada paso dado:
- Comenzar por lo pequeño para ir a lo grande. Empieza por la resolución más pequeña y luego ir subiendo
- Hay que hacer el desarrollo compatible con todos los navegadores, web y móvil.
- ¡Optimizar las imágenes se convierte en una tarea obligatoria!
- El mismo contenido en todas las versiones. Todas las resoluciones son igual de importantes.
- En todo momento debes permitir al usuario ir a la versión completa del sitio web.
Para terminar
¿Cómo saber si se hizo un buen trabajo? La etapa de pruebas o testing es fundamental. Es importante contar con diversidad de dispositivos (en tamaño y tipo de interfaz). El tiempo de pruebas es importante para detectar errores y asuntos que corregir o mejorar, por lo que para hacernos la vida más fácil, y ahorrarnos unos disgustos, existen emuladores y simuladores que nos ayudarán en esta etapa, pero es recomendable contar con variedad de dispositivos físicos para poder evaluar si estamos entregando la mejor experiencia en lo que se refiere a usabilidad, accesibilidad y también en rendimiento.
Nosotros ya estamos rediseñando nuestro sitio web, ¿y tú?
