Diseño web sensible (RWD). Una plantilla para Blogger | Oloblogger Realmente no sé si esto de "sensible" será una traducción correcta o no, pero con esa palabra me refiero al diseño web que los ang...

3 de abril de 2012

Diseño web sensible (RWD). Una plantilla para Blogger

Realmente no sé si esto de "sensible" será una traducción correcta o no, pero con esa palabra me refiero al diseño web que los angloparlantes adjetivan como responsive y que utilizan para catalogar los sitios que reaccionan a ciertas cosas. En concreto principalmente a una, al tamaño de la ventana desde la que se está visualizando.


Por ejemplo, el término Responsive Web Design (RWD) se utiliza para sitios que están diseñados con columnas de medidas variables (porcentuales) y que se encogen o estiran según la ventana. Las de este tipo han existido desde casi siempre, son sencillas de contruir e incluso Blogger las ha incluído habitualmente entre sus diseños prefabricados.

Pero lo que pretende este tipo de diseño es que los usuarios puedan acceder sin problemas a todo el contenido, con una única fuente, desde aparatos con resoluciones tan dispares como una pantalla panorámica de un ordenador de sobremesa, un notebook, un iPad o un smartphone y sobre todo, que en todos ellos se vea bien. Por cierto ¿por qué les llaman teléfonos inteligentes si no son capaces de hacer más que un ordenador convencional? Marketing, supongo; bueno, seguro.


Además de columnas porcentuales existen otros medios para poder conseguir que una web se adapte a los distintos contenedores en los que se puede encontrar. Pensad que con el texto el tema es relativamente sencillo, pues siempre se adapta a su capa contenedora, pero que con las imágenes, lo fácil es lo contrario y que con el cambio de medidas lo normal es que estas se desborden o se queden demasiado canijas si hemos sido excesivamente prudentes.

A modo sólo de breve enumeración, además de las propiedades max-width y min-width, para las imágenes se pueden usar sistemas como esconder y revelar parte de ellas, imágenes compuestas que se deslizan o fondos escalables.


Captura plantilla sensible

Captura plantilla sensible en una resolución menor Captura plantilla sensible en una resolución menor



Claro está que con CSS3, todo esto y alguna cosa adicional resultan más fáciles. Existen las llamadas media queries (consultas multimedia) con las que se pueden detectar dónde se quiere mostrar la información (pantalla, impresora, etc.) y en función también de la resolución, aplicar unas propiedades CSS u otras e incluso escoger una hoja de estilo completa distinta.

Pero lo que mejor resultado dará es sin duda la combinación un poco de todo, de manera que una misma web pueda pasar de tres columnas a una, la cabecera cambie de sitio y el tamaño de la fuente se haga mayor o menor, dependiendo de la resolución del dispositivo.


Sobre esto hay mucha tela que cortar y escaso conocimiento por mi parte -excepto el que me permitió hacer lo justito en este mismo sitio- así que no voy a abundar más en el tema y simplemente os voy a pasar un enlace en el que podréis descargar una plantilla para Blogger que se adapta perfectamente a cualquier entorno.

Es la que corresponde a las capturas anteriores dónde podéis ver cómo la fotografía, la disposición del menú principal, la descripción del blog y las columnas, han cambiado de tamaño o sitio. En el siguiente botón y cambiando el tamaño de la ventana de vuestro navegador, la podéis ver en acción.


La plantilla es obra de 54Blogger y en el enlace anterior tenéis el enlace para descarga e información (en inglés) sobre cómo configurar algunos elementos. Indican que la subida de la plantilla se debe hacer desde el viejo editor, pero yo he probado desde el nuevo y no he tenido problemas.

Hay algunas pegas con el acceso a la configuración de entradas desde la sección Diseño del Escritorio, pero si no vais a trastear mucho en esa parte, no debería ser un inconveniente mayor.

También se explica qué clases usar y qué ajustes hacer, para que las imágenes "respondan" como deben.


Para experimentar y ver cómo funcionan las tripas, supongo que usareis un blog de pruebas, pero si vuestra intención es utilizarla como plantilla definitiva, creo que sería conveniente asimismo probarla primero en un blog auxiliar.

Ah...Y la web de 54Blogger también es sensible. Bastante, por cierto. Sólo probad y observar la parte superior del blog.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

29 comentarios :

  1. Me gusta un diseño fluido, por que puede adaptarse a las distintas resoluciones, pero se debe ser muy cuidadoso en el diseño, para que este cumpla su cometido y no se dificulte la lectura.

    Creo que no hay uno mejor o peor, y dependerá del tipo de Diseño y la audiencia.

    Cuando usas un diseño fluido, habrá que cuidar los anchos de videos, imágenes y otro contenido, y para un usuario común de un blog, puedes ser complicado mantener.

    Hay un montón de artículos de diseñadores web profesionales que abordan el tema del diseño fluido y fijo, y donde hacen mención de los pros y los contras, te dejo algunos:

    http://www.evolutionarydesigns.net/blog/2011/07/18/fluid-vs-fixed-design-which-is-better/
    http://designfestival.com/resizing-fixed-fluid-or-responsive-layouts/

    ...y este de Smashing, aunque más viejo (data del 2009) y habla del diseño fijo, fluido y elástico...

    http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

    Un buen diseño fluido debería eliminar la barra de desplazamiento horizontal en la ventana del navegador (scroll), no en este caso.

    ...jaja un sueno húmedo es que el navegador tuviera la capacidad de transformar un diseño tomando en cuenta la resolución de pantalla en que sea visto, y más aun si hubiera opciones avanzadas que el usuario pudiera controlar en ese sentido, tal vez en un futuro ¿por qué no? por ahora, tendremos que conformarnos con la función de "zoom" para ampliar una página.

    Saludos ;)

    ResponderEliminar
    Respuestas
    1. Karla, eres un pozo de sabiduría. Echaré un vistazo a esos enlaces. Gracias

      Eliminar
    2. Perdón Oloman, me disculpo, ya que ahora veo que no hablamos de lo mismo.

      No quiero justificarme, cuando escribo un comentario lo hago después de haber leído todo el post y haber entendido el mensaje de quien lo escribe, pero debo decir (tener el valor) que no fue así.

      De una pasada rápida, asumí que te referías al diseño fluido, cuando en realidad hablabas del diseño responsivo o adaptable. Es una buena lección ya que precisamente ayer me sentía un poco frustrada ya que a veces noto que no leen completos mis posts...no volverá a pasar :)

      Buen fin de semana ;)

      Eliminar
    3. No problemo. No me gusta andar con tecnicismos así que como para mí todo eso viene a ser lo mismo con pequeñas diferencias, entendí que te referías en general a todo lo que se refiere a diseño flexible ;)

      Eliminar
  2. Leyendo este tipo de cosas, que hasta la fecha no tenía ni ideas de que existían, siento que la plantilla de mi blog y yo somos de la edad de piedra :S

    Además es un placer leer los comentarios (como el de Karla), preguntas y respuestas de la gente. Se aprende también mucho.

    ResponderEliminar
    Respuestas
    1. :D No creo que sea así, precisamente lo que vienen a explicar Karla es que no hay un diseño mejor que otro (ni más moderno) de forma genérica. Como siempre, todo dependerá del fin para el que se cree. Y sí, se aprende mucho de los comentarios de los demás. Ahora voy a por este de abajo que también aporta lo suyo ;)

      Eliminar
  3. la traduccion correcta al español es "Diseño web adaptable", saludos!

    ResponderEliminar
    Respuestas
    1. Ahora que nos proporcionas esta segunda versión, ya puedo empezar a comparar:
      - "Diseño web adaptable" 490.000 resultados en Google
      - "Diseño web sensible" 569.000 resultados en Google
      Parece que esto de que tengamos que importar las palabras del inglés hace que cada uno lo traduzca como le parece ¿alguna posible traducción más para poder seguir comparando?

      Eliminar
  4. Una observación que creo importante hacer en ésta plantilla. Me parece que es una plantilla SEO. Es decir lo típico: nombre post | nombre blog y los cambios pertinentes H1 y H2. ¿es cierto o falta alguna otra modificación?.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Pues sí, no me había dado cuenta. El título del blog está con H1, los de los posts con H2 y las fechas sin nada. Para mi gusto cambiaría también los títulos de los gadgets (ahora están con H2) y les pondría H3 o H4, ya que creo que no son relevantes.

      Eliminar
  5. Oloman lo que no estoy muy seguro es es tema del SEO del título. De acuerdo en que cambia el orden pero ¿lo ves correcto?. El más correcto que he visto hasta ahora es el que expones en uno de tus posts. http://www.oloblogger.com/2012/01/optimizar-seo-para-blogger-evitar-meta.html

    Y si me permite otra duda: ¿titulo del post con h1 o h2?. Veo que tu optas por el h1. No son muchos (2 como mínimo) para el robot de google?.
    Saludos y gracias por compartir todo lo que sabes.

    ResponderEliminar
    Respuestas
    1. Realmente no creo que nadie pueda asegurar hoy por hoy al 100% qué opción es mejor, pero la opinión mayoritaria es la que yo expuse.

      De todas formas ahora hay sistemas mejores -o al menos más eficientes- que vienen de serie. Echa un vistazo a estas tres entradas:
      * http://www.oloblogger.com/2012/03/una-cal-y-otra-de-arena-las-nuevas.html#uds-search-results
      * http://www.oloblogger.com/2012/03/nueva-etiqueta-meta-para-descripcion-en.html
      * http://www.oloblogger.com/2012/04/ajustando-de-nuevo-el-titulo-y-la.html

      Lo de los encabezamientos igual. Encuentras opiniones tanto de H1 como de H2, pero lo importante creo que es que no se use otro inferior (H3, H4, etc.) Con los títulos de los gadgets (y también con las fechas) creo tener bastante claro que no debe venir muy bien usar H2 que es como vienen en las plantillas Blogger.

      Y dicho todo esto, repito que es sólo una opinión que no puedo siquiera contrastar y dudo de que alguien pueda hacerlo, por lo que cada uno que haga lo que quiera, dentro de unos límites ;)

      Eliminar
  6. Hola buenas, estoy buscando una persona que realice plantillas personalizadas para un blog. Ya que en blogger todas son muy sosas y me gustaría saber si usted las hace y si me enviaría un presupuesto.

    Aquí te dejo mi email.

    Saludos

    sergio.senor.galan@gmail.com

    ResponderEliminar
    Respuestas
    1. Prueba a contarme lo que quieres por aquí. Quizás tengas suerte ;)

      Eliminar
  7. como hago para que las entradas de esta plantilla no se vean de 2 en 2

    http://preview.coolbthemes.com/?coolbthemes=http://kangismagz.blogspot.com/

    ResponderEliminar
    Respuestas
    1. ¿De dos en dos? No se a qué te refieres, pues ahí salen un montón de sumarios de entradas a la vez. En cualquier caso mejor sería verla montada en algún sitio y no en la demo.

      Eliminar
  8. Querido Oloman, te escribo en este post algunas dudas que tengo respecto a diseño de blogs y que talvez tú me puedas solucionar. En mi blog (Tus Confesiones 2), en la sección de gadgets y mediante código HTML quise añadir una imagen (PNG) cortada en partes en donde algunas de esas partes direccionan a URLs distintas (cada parte a una URL distinta). El problema es que entre esas partes que componen la imagen en su totalidad se produce un espacio horizontal que no he podido eliminar, aún colocando border="0" en cada img y utilizando tablas con cellpadding="0" y cellspacing="0". Te pido si puedes ayudarme con esta duda que me frena a realizar cambios que me encantaría realizar.
    Ante todo muchísimas gracias.
    Te saluda Atte. Marcos, dueño y creador de Tus Confesiones 2.

    ResponderEliminar
    Respuestas
    1. Y abusando de tu confianza Oloman, también quisiera saber si puedes pasarme algún truco para añadir encuestas independientes en cada entrada. Ya sean las que ofrece blogger (que sólo he podido añadirlas como un gadget al blog en gral) o alguna gratuita de algúna página que ofrezca este servicio. Muchísimas gracias.

      Eliminar
    2. Hola. Para lo de las imágenes esto sería una chapucilla, pero seguro que te funciona. Dentro del STYLE de la imagen inferior (la más grande) incluye un margen superior negativo. Quedaría así:
      style="padding:0;margin:-4px 0 0;cursor: pointer; width: 288px; height: 96px;"

      También podrías usar una única imagen mapeada. En el enlace cómo hacerlo.

      Sobre las encuestas, hace algún tiempo vi algunos servicios gratis, pero ahora no recuerdo cuáles eran los mejores. Tendrás que usar Google y probar algunos hasta encontrar el que te guste.

      Eliminar
  9. Querido Oloman, te agradezco de corazón tu ayuda y vuelvo a recurrir a tí para más. Esta vez tengo una consulta que involucra los dominios. La consulta es la siguiente:
    Mi blog cuenta con varias secciones, así como tu blog, y para tres de estas secciones tuve que adquirir tres blogs más (debido a que en dos de ellos quería colocar sólo encuestas y el otro cambiaba en parte el diseño de la plantilla). Estos tres blogs nuevos cuentan con un dominio "blogx.blogspot.com", mientras que el blog principal cuenta con un "mipagina.com.ar".
    Cómo no me gusta mucho que al pasar de uno al otro cambie el dominio de "mipagina.com.ar" a "blogx.blogspot.com", quisiera saber si existe una manera de "tapar" el dominio de blogger y que a cada uno de estos blogs se llegue mediante por ej. mipagina.com.ar/blogx
    Esto me será de mucha ayuda, y ante nada quisiera decirte MUCHAS GRACIAS¡¡¡

    ResponderEliminar
    Respuestas
    1. Bueno, eso no se puede hacer que yo sepa. Lo más normal sería que hicieras lo mismo que para tu blog principal, es decir, conseguir un par de dominios .com.ar y asignarlos a esos dos blogs con dominios blogspot. Me suena haber leído que son gratuitos así que no deberías tener ni costes.

      De todas formas hay maneras para hacer que ciertas páginas de tu blog (si no son muchas), se vean con otro aspecto sin necesidad de tener que crear nuevos blogs. Echa un vistazo a artículos relacionados con "condiciones" o "condicionales".

      Eliminar
  10. Hola Oloman, necesito tu ayuda urgentemente, ¿es posible adaptar una pagina web "con sus archivos en formato HTML.Internet" para Blogger? es decir la carcasa. la Plantilla Web sitie esta creada en HTML5 y CSS3.

    ResponderEliminar
    Respuestas
    1. Hay un amigo que reta siempre a cualquiera que dice lo contrario, para que le proponga una web de la plataforma que sea que no se pueda replicar en Blogger, así que la respuesta es sí; sí se puede pasar cualquier plantilla a Blogger.

      Eliminar
  11. ¿Cómo podría hacer para que la cabecera, el menú y el pie de página de esta plantilla ocupen el ancho total de la página, Oloman?

    ResponderEliminar
    Respuestas
    1. Desapareció la demo Jorge, así que como no recuerdo todo su código y no la puedo ver, no te puedo decir ¿la tienes montada en alguna dirección que me puedas pasar?

      Eliminar
  12. Hola! He estado intentando hacer responsive una plantilla básica de blogger pero no consigo quitar ese espacio en blanco a la derecha cuando navego desde el móvil. Como podría hacerlo?
    Por cierto, que es esto: ?
    Es impresicindible o se puede subsituir por otra cosa?

    ResponderEliminar
    Respuestas
    1. No se ve lo que querías mostrar Ana. Si quieres poner código en un comentario primero tienes que pasarlo a texto plano.

      Eliminar