Feliz Navidad, feliz año, felices fiestas y bla, bla, bla…
Al fin! Aquí está el nuevo diseño de Inkoherence.
Es un diseño optimista… optimista en el sentido que lo he desarrollado pensando que la inmensa mayoría de los lectores de este blog tienen banda ancha, navegan como mínimo a 1024 x 768 píxeles y, preferiblemente, no utilizan Internet Explorer 6.
Y es que la nueva versión del blog, carece de posiciones fijas en el navegador de Microsoft. La explicación para esto es simple: no he sabido implementar la compatibilidad del trinomio PNG’s transparentes, links y posiciones fijas en Internet Explorer. Supongo que podría llegar a lograrlo mediante javascript, pero sinceramente, no tengo ganas de seguir batallando con un programa obsoleto. Aún así, la página es totalmente usable desde Explorer, la única carencia es que el fondo de la página no permanece fijo al hacer scroll.
En cuanto a la resolución minima de 1024, según las estadísticas de la web, menos de un 5% de los visitantes utiliza resoluciones inferiores a ésta. Además, no es una decisión arbitrária. He aprovechado el mayor espacio útil para aumentar el tamaño de la fuente a 14 píxeles. Y es que, este artículo de Minid me ha convencido, un tamaño de letra superior a 11 o 12 píxeles mejora enormemente la legibilidad, y por consiguiente la experiencia del usuario.
También he implementado un par de nuevas funcionalidades de las que adolecía escandalosamente el CMS: la posibilidad de añadir links en los comentarios, y un rss para los mismos.
Como siempre espero, tanto como vuestras críticas y sugerencias, que os guste.
Buen re-diseño… sigue siendo algo similar al anterior, pero se nota que es nuevo.
Una recomendación: fija los tamaños de las fuentes usando ems, no píxeles. Hay muchas razones para esto, pero las principales son que aumenta la accesibilidad/usabilidad y ofrece tamaños que son consistentes entre distintas resoluciones de pantalla
Otra cosa: los enlaces permanentes del feed no apuntan a las páginas individuales de los posts. Por ejemplo, para esta misma nota:
Enlace del feed: http://www.inkoherence.com/index.php?id=95
Permalink en el blog: http://www.inkoherence.com/index.php?noticia_id=95
Eso; felicitaciones!
muy guapo el diseño, abusando de glowazo-bloom effect, pero guay!!!, molan los png’s transparentes,que te han salvado el culo para hacer la sombra sin usar javascript :P
Mola tambien que siempre quede la TAG-cloud i el titulo de la web con el buscar, visibles…todo a mano y a la vista, si señor!!.
si, la programación web es muy sufrida, se supone que lo que se inventó el señor Tim Berners-Lee era la solución al problema : "esto se vé diferente en este otro ordenador"
x’DDD evolución inversa
Hola!
Caray buen trabajo! Enhorabuena.
Un rediseño manteniendo el atractivo y bien planteado.
De verdad felicidades, el diseño con Firefox y Opera parecen funcionar bien.
Críticas constructivas :
Bien por el aumento de tamaño de la tipografía, como ya te han comentado, valora usar tamaños relativos en lugar de píxeles (em ó %).
Aunque el IE 7 ya está implementado no descartes los problemas con versiones anteriores, un gran número de usuarios (snif!) aún lo consideran el navegador habitual y muchos no lo han actualizado.
Como comentas, los png’s e IExplorer (versiones 6 ó menores) no son muy amigos.
Aunque has conseguido usar la transparencia en ie, como ya dices, te desactiva la posición fija del fondo de pantalla y la cabecera.
Pero lo que es peor es que queda inutilizado uso del formulario de los comentarios.
Nosotros estuvimos trabajando duramente con eso en un desarrollo de una web, la solución no es fácil, requiere varios hacks y algunos no validan, te paso algunos enlaces al respecto a ver si te pueden ayudar.
http://www.chavalina.net/comentar.php?idpost=343
http://www.twinhelix.com/css/iepngfix/demo/
http://www.csslab.cl/?p=65
http://www.cristalab.com/tips/21618/png-con-transparencia-alpha-png32–en-internet-explorer
Respecto a tu decisión sobre la resolución, es cierto, la gran mayoría ya usa resoluciones a 1024px o superiores. Lo mejor para no descartar al resto es decantarse por soluciones con estructura líquida.
Muchos ánimos con tu nuevo diseño,
el "problema" es que es un saco sin fondo,
y siempre encuentras algo que se puede mejorar,
no dejes de jugar!
Muchísimas gracias a todos por vuestras felicitaciones, críticas y sugerencias.
- Los links de los rss ya están solucionados, ahora apuntan correctamente.
- El escribir comentarios en explorer ahora también funciona, había olvidado un position:relative en los input’s y textarea’s del div dónde se esctiben los comentarios
En cuanto lo de utilizar medidas .em en lugar de px para las fuentes, tengo mis dudas. Por lo que yo sé, y que conste que nunca trabajo con medidas .em, éstas aumentan o disminuyen su tamaño en función de la resolución utilizada por el usuario. Esto lo veo lógico para webs con diseños liquidos o elásticos, pero en páginas con diseños fijos no lo veo adecuado. Me explico, si todo el diseño va a permanecer a un tamaño fijo de pixeles, y los gráficos que lo conforman NO van a aumentar o disminuir según la resolución, ¿por qué habría de hacerlo el texto? este diseño quedaría muy raro con ciertos tamaños de fuente. No sé si me explico o si las concepciones de las que parto respecto las medidas .em son correctas…. ¿?
Supongo que la solución óptima sería convertir el diseño en elástico, pero para ello tendría que ser vectorial. Algo que podría llegar a conseguir sin a penas modificar el aspecto visual del diseño a través de flash y sus efectos de sombras y desenfoques gaussianos porque el formato svg, creo que aun está un poco verde… Aún así es algo que me reservo para una hipotétic y futuro rediseño ;-)
Ah! Me he dado cuenta de otro error todavía sin solucionar, los links con urls que contienen variables no se linquean correctamente. A ver si lo arreglo pronto.
Lo dicho, gracias a todos! No hay mejor beta tester que los propios usuarios… ;-)
Arreglado el problema con los links en las url’s que pasan paramentro a través de "?"!!!
A partir de ahora este tipo de links aparecerán correctamente.
:-)
También le he quitado un poco de transparencia a los png’s de las cajitas con los comentarios, así se leen mejor.
Muy bonito todo. Te felicito.
Gracias mini-d! Y también por tu artículo. Realmente siempre he tenido un cierto temor a que enferme mi vista. Sobretodo porqué también paso muchas horas al día delante del monitor. Además, creo que un diseño atractivo no tiene por que ser sinónimo de una tipografía pequeña. Eso es un tópico que hay que desterrar.
Passa, Inkoherence felicidades por el diseño, sobretodo por el mejor posicionamiento de la sección contactar (jejejejejje).
Solo un par de cosas, el orden de los comentarios es un poco lioso para seguir una conversación, tiene su lógica pero no me mola.
Yo también leí el post de MiniD y me gusto porque tiene mas razón que un santo, normalmente letra pequeña en gris sobre fondo blanco (chungo). El gris de tu texto, con la capa transparente y las imágenes de fondo, no ayuda mucho. Quizás el texto en gris un poco + oscuro, se leería mejor.
Y otra cosilla, no estaría mal en el post añadir alguna captura de pantalla del diseño anterior, seguro que hay gente que no tiene la referencia de como era este blog hace unos días.
A10
Pues no te creas, que quitar la sección contactar de allí ha sido todo un trauma para mi… XDDD… pero se me comía demasiado espacio. Además, ahora que hay elementos fijos, a 1024 ni se veía.
En cuanto al orden de los comentarios, sabía que era una deicisón un tanto "sui generis", pero siempre me ha fastidiado tener que bajar todo el scroll para leer lo último que he escrito. Aunque no sea lo habitual creo que así tiene más sentido y es más intuitivo. De todas formas, apunto tu crítica. Si hubiera mucha gente que se quejara lo cambiaría.
En cuanto al blanco de los comentarios, tienes razón. Sigue siendo demasiado transparente y las letras demasiado claras. A ver si luego tengo un momento e intento solucionarlo.
Gracias por tus constructivas críticas!