Pero siempre se puede mejorar y es por esta razón que me propuse listar al menos 7  pequeños, grandes errores que la mayoría de los bloggers cometemos al crear el diseño de nuestro blog; y creanme que hasta a los mejores les pasa.

Mostrar el Index como Posts Recientes

Hace un tiempo escribí como mostrar posts recientes en WordPress, pero no fue hasta hace poco que un comentario me hizó darme cuenta  que hay un pecado que todos comentemos cuando utilizamos este recurso en nuestro theme.

Incluimos los posts de la portada, en conclusión creamos una sección nada usable para el visitante, pues mostramos lo mismo que hay en nuestro Index.

Pero como en todo, hay una forma de corregirlo, usando el parametro offset, que se encargará de excluir el número de posts de nuestra portada de los artículos que tomará WordPress para mostrar, un ejemplo:

<ul>
<?php $lastposts = get_posts('numberposts=5&offset=5');
foreach($lastposts as $post) : setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

¿Una nueva ventana para cada enlace?

Personalmente no me gusta el uso de target=”_blank”, la mayoría se va por el hecho de creer que si los usuarios abren una página por ventana no se irán del sitio.

Tremendo error, como webmaster tu controlaras el sitio pero no debes interferir en como el usuario interactua con él, siempre se debe dejar que el lector administre el destino de los links que abre.

Usar bloques de texto extensos

Si la buena comunicación verbal es usando frases cortas, porque la escrita habría de ser diferente, si escribes en parrafos extensos la idea se pierde y asustas al lector, información dosificada es mejor aceptada que impactante y larga.

Ocultar ú omitir datos

A veces creemos que es tan redundante poner datos como: la fecha, el autor o las etiquetas del post, que simplemente las eliminamos.

Sin considerar que esos pequeños detalles influyen en la intectividad del usuario con el sitio, como en la decisión de comentar o el seguimiento de un topic mediante las tags.

No aprovechar toda la anatomía del blog

Lugares como la sidebar, el footer o el header son mayormente discriminados colocando sólo las categorías, los créditos y el logo respectivamente.

He aquí algunas tecnicas y consejos que pueden ayudarte a hacer mejor el diseño de esas secciones de tu blog:

- Tecnicas para mejor tu Sidebar si usas WordPress

- Colección de hacks para los comentarios en WordPress

Y ustedes, ¿que otros “pequeños, grandes errores en el diseño de un blog” consideran que hay o han visto? estoy deseoso de leer sus comentarios y si de paso quieren criticar el diseño de este su blog que mejor.

Y aunque no me considero un experto en el tema, tengo unos cuantos consejos, técnicas y trucos CSS que he ido guardando a lo largo del tiempo, mismas que comparto a continuación:

Trabaja por secciones

Ejemplo aplicado al style.css de un theme WordPress, divide tu hoja en secciones: Estilos Globales o Generales, del Contenedor principal, Sidebar…

/* Global */
body { font: 14px/1.6 Arial, Helvetica, Verdana, sans-serif; }
/*Area de Contenido */
#wrap-post { width: 600 px;  float: left; }

CSS Shorthand, el mejor amigo de tu hoja estilos.

El principio básico del asunto según la W3C es que CSS esta compuesto por 2 cosas: un selector y una declaración y en cada declaración hay una propiedad y un valor, basandonos en esto los shorthands serían propiedades con valores condensados o comprimidos, ejemplo práctico:

/* Propiedad margin sin shorthand */

.elemento {
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 5px;
}

/* Propiedad margin usando shorthand */
.elemento { margin: 10px 5px 20px 10px; } 

Para entender mejor esto, les recomiendo leer la Guía del CSS Shorthand.

Agrupa selectores

Tienes 2 o más selectores y las mismas reglas, no escribas lo mismo 2 veces.

.bloque { background: #FFF; padding: 15px; margin-top: 10px; }
.articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Agrupalos de esta forma:

.bloque, .articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Menos espacio es igual a más rápido.

La optimización del CSS apunta a la compresion de éste, entre menos espacio hay entre tus selectores, más rápido cargará el navegador tu página. Por ende es mejor escribir las declaraciones como lo hice en el anterior ejemplo, sin espacios en blanco.

Espero que esta serie de tips te ayude a escribir hojas de estilo más optimizadas.

Incluso para los que no somos profesionales en este campo pero tenemos algún emprendimiento en internet es bastante correcto que nos esforzemos por crear un sitio con accesibilidad y usabilidad total, ¿cómo lograrlo?, a continuación algunos recursos y consejos.

1.  Sigue las reglas y los estandares

Lograr que un blog o sitio sea cross browser no es fácil, pero el seguir los estandares de la W3C ayuda bastante a cumplir el objetivo.

Usable y Accesible

2.  No uses hacks, mejor usa Fixes

Lo puedes hacer manualmente o usando IE6 CSS Fixer.

3.  Optimiza tus imágenes

No es secreto que el tiempo de carga influye mucho para los usuarios; y es que son las imágenes las que más demoran en mostrarse, por ello es bueno siempre bajarles unos bytes con algún software para optimizar imágenes o herramientas web como Smush.it.

4. No te olvides del iPhone

Furor que causo el 3G y el iPhone es ya uno de los medios de entrada a internet que más adeptos gana dia a dia, por eso no es bueno olvidarse de él, checa como se ve tu sitio en el iPhone y si tienes un blog corriendo con WordPress optimizalo para el juguete favorito de Apple.

5. No uses tanto Flash y JavaScript

Dado que son lenguajes que para su interpretación y lectura son necesarios algunos reproductores y habilitación de opciones es recomendado usarlos sólo cuando es necesario, así se evita la falta de elementos en tu sitio web si el usuario no cuenta con tales cosas y se aligera un poco más el peso final de la página.

Kernel Web en el iPhone

6. Describe tus elementos

Imágenes con el atributo ALT, enlaces con title y buen anchor text, descripciones de videos y multimedia.

7. Genera contenido legible, usable y escaneable

El contenido lo es todo, más alla de si el diseño es bueno, el contenido es el rey, hacer contenido usable y de calidad es una directriz no escrita, pero que es bueno seguir para hacer de la web una herramienta optima y completa.

8. Prueba y Comprueba

Nada más sabio que el arreglar y romper, tanto para aprender, como para mantener una website en optimo estado, usa los recursos que la web de brinda para asegurarte de que tu trabajo esta bien hecho:

• Hera, completa y muy buena herramienta que rescate de las entrañas de Webmaster Libre una suerte haberla visto.
• CrossBrowserTesting, visualiza tu website en tiempo real en todo navegador.
• IE Collection, todos los enemigos de los estandares (IE6,7 y 8 ) en uno sólo , para comprobar si se ve bien tu sitio y nada más.

El Radical Image Optimization Tool, es practicamente una navaja suiza en esto de los gráficos, ya que te ofrece la  posibilidad de:

• Optimizar tus imágenes JPEG, GIF y PNG, comprimiendolas y ahorrando valiosos bytes o hasta megabytes.
• Trabajar en vista dual, pudiendo observar en todo momento la imagen original y al lado la que vas modificando.
• Decidir si se desea mantener los metadatos (comentarios, IPTC, XMP de Adobe, EXIF perfiles, perfiles ICC).
• Modificar el tamaño de la imagen mediante el uso de filtros resample conocidos (por ejemplo: Lanczos3, Catmull Rom, bicúbicos, etc).
• Definir transparencia en regiones especificas así como reducir tono, color, contraste y brillo de cada imagen.

Un gran freeware sin duda, mas para los que tenemos un blog o sitio web y nos es muy útil optimizar las imágenes.

Enlace | RIOT

Debido a que consta de varios módulos con los que podras: limpiar tu ordenador de archivos basura, corregir las entradas huerfanas del registro, desinstalar programas, desfragmentar tu disco duro, optimizar los procesos de arranque del sistema y la memoria RAM y hasta cuenta con una herramienta para encriptar y desencriptar archivos.

Tiene tantas caracteristicas que pareciera ser un TuneUp Utilities gratis, por lo que Glary Utilities es una aplicacion muy recomendable si quieres que tu PC este a punto y libre de la basura que Windows y otros programas producen a diario en el ordenador.

Pero por mas que sepamos usar muy bien el Photoshop y logremos crear obras de arte, los bytes de las imágenes casi siempre tienen valores elevados que no se pueden reducir ni con Photoshop ni Fireworks, ya que si se hace se pierde la calidad de nuestras creaciones.

Es por eso que considero a Smush una gran herramienta para diseñadores y webmasters, ya que mediante un pack de scripts optimiza y reduce el peso de tus imágenes, la herramienta es muy completa, se puede utilizar de forma online, instalar como extensión en Firefox o bookmarklet y hasta subir personalmente las imágenes a las que les queramos reducir su tamaño.

Para optimizar y reducir los bytes de nuestras ilustraciones basta con seleccionar un metodo de los antes mencionados y hacerle smush a estas, la verdad que he probado la herramienta y a veces las reducciones llegan a ser de hasta 17% y sin perder la calidad pues lo que hace es apretar lo mas posible los octetos de las imágenes, lo que da menos peso pero igual calidad, la recomiendo apliamente, yo ya la empezé a usar .

Enlace | Smush