Mostrando entradas con la etiqueta Interfaz. Mostrar todas las entradas
Mostrando entradas con la etiqueta Interfaz. Mostrar todas las entradas

15 abr 2015

Todo lo necesario para no morir en el intento de cambiar a responsive tu blog en Blogger.

Si eres lector habitual de iniciaBlog, habrás notado un cambio importante en la estética, tanto de las entradas como de la página principal del blog. Esto se debe a que he pasado de una plantilla clásica de Blogger, a una plantilla tipo Responsive.

En la foto que acompaña a este artículo tienes representado muchos conceptos, incluido el café (para estar muy despierto) y el boli (para planificar y anotar). Ánimo! ;)

Aplicar una plantilla Responsive en Blogger (El café es un de los aspectos más importantes)
© Marekuliasz - ShutterStock

Qué es una plantilla responsive para Blogger

Una plantilla responsive es aquella que reúne las últimas tecnologías (CSS3, HTML5, JavaScript) y que se suma a un estándar en el diseño y desarrollo de sitios web consolidados desde hace unos años.

Con el auge de los dispositivos móviles (Tablets y SmartPhone), además de otros soporte incluidos las SmartTV, y la velocidad de conexión a Internet, lo que se busca es que el aspecto y la disposición de los contenidos de tu blog se adapten en función del dispositivo desde el que nos conectamos.

De lo que se trata es de ofrecer la mejor experiencia al usuario y tenemos que ser realista, un sitio web no puede ofrecernos la misma interfaz de usuario en un monitor de 27" que en un SmartPhone de 4" o una Tablet de 10". Profundiza más en este concepto en Wikipedia

Además de todo lo señalado, anteriormente a este conceptos, las empresas duplicaban la información de sus portales web para ofrecer una versión mobile del mismo. Como sabes esta es una práctica además de obsoleta, penalizada por Google por ese contenido duplicado.

2 años con ganas de cambiar a Responsive

El diseño responsive no es para nada nuevo. Se trata de una realidad que viene desarrollándose en los últimos años y sinceramente, llevaba mucho tiempo esperando, con la esperanza de que el equipo de Blogger ofrecieran una solución y se actualizarán las plantillas por defecto. Sin embargo, he decidido dar un paso al frente con el fin de que esta experiencia ahora adquirida, te sirva a ti para dar este paso. 

Por qué este cambio debe beneficiarte en tu blog

Por mucho cariño que puedas tener a tu plantilla, se que son muchas las horas invertidas, reuniendo código usando diferentes tutoriales para blogger, debes ser consciente de lo mucho que te estás perdiendo. ¿Seguir manteniendo un sistema obsoleto o adaptarte a una tecnología que lleva consolidada unos años?. ¿Buscar ofrecer a tus lectores, la mejor de las experiencias en función del dispositivo desde el que se conecta o seguir dándole la espalda?.

Un plantilla responsive debe además de lo dicho hasta ahora:
  • Mejorar el posicinamiento
  • Mejorar el tiempo de carga
  • Ofrecer la mejor experiencia de usuario
  • No desprenderte de tu identidad desde los dispositivos móviles
  • Mejorar el número de páginas vistas
  • Salto cualitativo en la imagen que proyectas
  • Como administrador de tu blog, demuestras sensibilidad con las nuevas tecnologias
  • Tu proyecto sigue evolucionando y se adapta a las nuevas exigencias de Google, donde se dice que a partir del 21 de Abril se penalizará aquellos sitios no responsive

El reto para mi en iniciaBlog, era cambiar la plantilla y tratar de conservar mucho de las modificaciones que a través de los diferentes tutoriales publicados he ido aplicando. Si yo lo he podido hacer, tu también ;). A continuación, mira el cambio en el nº de visitas, una vez aplicada la nueva plantilla en iniciaBlog.com:

8 de Abril de 2015, día en el que se aplica la nueva plantilla Responsive en iniciaBlog.com

Pasos a tener en cuenta para seleccionar una plantilla responsive

  1. Piensa en la mejor estructura para tu blog en función de tu temática. No es lo mismo un blog personal que un blog de cine, música, negocios, noticias, etc. En función de la temática posiblemente te interese un tipo de portada diferente.
  2. Busca, busca y busca plantillas. Dedícale tiempo no tengas prisas.
  3. Hazte con 10 plantillas. Cada vez que encuentre una que te guste, copia y pega su dirección para tenerla localizada.
  4. De la selección realizada, elige ahora las 5 mejores plantillas.
  5. Finalmente deberás decidirte por una que cubra tus necesidades.
  6. Debes valorar, la documentación que acompaña a la plantilla.

Plantillas Responsive para Blogger según temática

Listado a plantillas responsive según temática, cortesía de CSS Autor. Puedes descargarlas y también ver una versión online para evaluarda. Cada plantilla tiene una documentación para su instalación, esta es información adicional a toda la proporcionada en este post.

Qué cosas debes tener muy encuenta para evolucionar tu blog hacia responsive

Una vez que tengas localizada la plantilla que deseas aplicar, toma buena nota del siguiente protocolo de actuación:
  1. El cambio es planificado, no debe ser un impulso
  2. Haz una captura de pantalla de la vista inicial de tu blog y de la vista de una de las entradas
  3. Haz una captura de pantalla de la vista diseño de tu blog
  4. Haz una copia de seguridad de tu actual plantilla (esto ya no tiene vuelta atrás pero te sentirás más seguro)
  5. Enumera aquellos elementos que has podido modificar en tu plantilla. Ejemplo
    • Código de los botones de compartir entrada
    • Código para adaptarte a la Ley de Cookies
    • Metaetiequetas en el head de tu plantilla
    • Códigos JavaScript de Google Analytics
    • Códigos de Google Adsense y otros sistemas de monetización
    • Código de las entradas relacionas en tu blog
    • Código de integración con redes sociales, sistemas de comentarios, etc
  6. Haz copia del código HTML/JAVASCRIPT de los diferentes Gadget de tu blog hasta archivos de texto, por ejemplo
  7. Crea un nuevo blog en Blogger y crea algunas entradas de prueba
  8. Importa hasta el nuevo blog tu plantilla descargada, de lo que se trata es de duplicar tu blog
  9. Una vez que lo tengas, trata de aplicar la nueva plantilla a tu blog DUPLICADO, no al original
  10. Avanza y ve resolviendo. Recuerda que la nueva plantilla debe venir con instrucciones.
  11. Cuando has logrado aplicar la nueva plantilla a tu blog duplicado, entonces estás listo para el cambio.
  12. Planifica el mejor horario, e incluso puedes avisar ese día con una entrada en tu blog de que estás haciendo cambios
  13. Prepárate una buena taza de café y a por todas
Espero que este artículo te sirva de guía para aplicar tu nueva plantilla responsive en tu blog. Si tienes cuestiones, dudas o necesitas ayuda, deja tu comentario o contacta conmigo a través del formulario o a través de las redes sociales.

Un abrazo y feliz #blogging #responsive.

8 oct 2012

En este artículo, veremos cómo configurar la vista inicial de tu blog para mostrar un fragmento de texto y una miniatura automática que se genera partir del contenido de cada uno de tus publicaciones.

2 may 2012

Blogger ha cambiado su interfaz por una nueva para todos los usuarios. Esto es algo que ya habíamos anunciado. El objetivo de esta entrada es ayudarte a localizar en la nueva interfaz las opciones que usabas habitualmente en la interfaz anterior.

4 abr 2012

Durante el mes de Abril de 2012, la nueva interfaz de Blogger se convertirá en la interfaz estándar que usarán todos los usuarios. Hasta ahora existía la posibilidad de probar la nueva interfaz y regresar a la interfaz vieja, opción que desaparecerá durante este mes.

5 oct 2011

El pasado 1 de Abril de 2011, Google anunció las "vistas dinámicas para Blogger". Toda una revolución tecnológica dentro del propio Blogger, no solo por su tecnología (html5, ccs3 y ajax) sino por proporcionarnos una nueva forma de explorar nuestro blog.

11 jul 2011

¡La nueva interfaz de blogger ya está aquí!. Para todos los que utilizamos Blogger como gestor de blogs, esta es sin duda una de las noticias más esperadas desde que se anunciara allá por Abril de 2011.

4 may 2011

Google ha anunciado una nueva actualización para su servicio Blogger. Este anuncio se suma a una serie de novedades que hemos ido publicando en iniciaBlog, sobre Blogger en los últimos meses, por lo tanto podemos decir que algo se mueve en Blogger.

25 abr 2011

Llegó la hora de hablar sobre el diseño en general de nuestro blog. Llegados a este punto existen dos caminos, usar el diseñador de plantillas de blogger o incorporar una plantilla prediseñada...

18 abr 2011

Si te fijas, cuando visitamos una web o un blog verás que en la pestaña de navegador aparece un icono que identifica el sitio. Dicho icono es lo que se llama Favicon. Lo que haremos es sustituir el Favicon de blogger por un icono propio para nuestro blog a partir de una imagen jpg, gif o png.

1 abr 2011

Google anuncia en Abril de 2011 una gran novedad denominada Vistas dinámicas para Blogger. Una vez habilitada podrás tener hasta 7 vistas diferentes de tu blog.
¿Cómo poner el botón de...:?

Premio Bitácoras

Aviso Legal

Licencia Creative Commons
iniciaBlog - Te ayuda con Blogger a mejorar tu blog
iniciaBlog se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
Basada en una obra en www.iniciablog.com.

Creado por Jesús Manuel González Fuentes

Política de Privacidad de iniciaBlog | Política de Cookies
2023 © Jesús Manuel González Fuentes es el autor de iniciaBlog.com
Tema creado por Way2themes y adaptado por inciciablog