10 Elementos de diseño que todos los grandes blogs tienen en común Por: Nicholas Tart Temas: Crear mejores sitios web Más publicaciones sobre: Diseño de blogs, Optimización de conversiones, Usabilidad Cada vez que cree algo nuevo, ya sea un producto, un servicio o un sitio web, comience por tomar Un vistazo a lo que otros han creado antes que ustedes.
Para ayudarlo a establecer las bases para el diseño de su blog, he enumerado 10 elementos de diseño que casi todos los grandes blogs tienen en común y cómo puede implementarlos en su blog de WordPress.
Los 10 grandes blogs Para brindarte algunos datos importantes, elegí usar Mashable, TechCrunch, The Next Web, GigaOM, Seth Blog, Copyblogger, Problogger, KISSmetrics Blog, Freelance Switch y The Oatmeal como ejemplos para esta publicación.
Encabezado Los encabezados en nueve de cada diez de estos sitios tenían 100 píxeles de alto o menos. La mayoría de ellos incluían el logotipo y una barra de búsqueda.
Logotipo (10/10) Todos los diez blogs tenían su logotipo en la esquina superior izquierda y lo vinculaban a la página de inicio.
El logotipo de GigaOM.com está en la parte superior izquierda y enlaza con la página de inicio.
Cómo implementar el logotipo con hipervínculos: la mayoría de los temas de WordPress (p. Ej., WooThemes, Thesis, Genesis, etc.) le permiten cargar un logotipo a través de la configuración de diseño del tema y se vincula automáticamente a casa.
Cuadro de búsqueda (6/10) Seis de los diez blogs grandes tenían un cuadro de búsqueda en el lado derecho del encabezado. El blog y Copyblogger de Seth colocaron su barra de búsqueda en la parte superior de la barra lateral. El blog KISSmetrics y The Oatmeal no tienen un mecanismo de búsqueda.
El cuadro de búsqueda de TheNextWeb.com está en el lado derecho del encabezado.
Cómo implementar el cuadro de búsqueda: puede colocar su barra de búsqueda como un widget en el área Apariencia> Widgets de su tema. Si no tiene un encabezado widgetizado, este es el php para el cuadro de búsqueda: Colóquelo dentro de su header.php o el archivo php personalizado de su tema. Si no está familiarizado con php, colóquelo cerca de la parte superior de la barra lateral dentro del área de widgets.
Área de contenido Ocho de los diez grandes blogs presentan el área de contenido a la izquierda y la barra lateral a la derecha. Aquí hay algunos elementos de diseño más comunes dentro del área de contenido.
Botones sociales (Control deslizante) (10/10) Todos los grandes blogs incluyen botones para compartir redes sociales con Me gusta / Compartir de Facebook y Twitter de Twitter, que es el más popular. Los botones +1 de Google y Compartir de LinkedIn también son populares. Los botones Digg, StumbleUpon y Reddit no se muestran tan a menudo como solían estar.
Tanto Mashable como TechCrunch tienen controles deslizantes sociales en el lado izquierdo del contenido que se deslizan hacia abajo a medida que se desplaza hacia abajo en la página. IncomeDiary tiene esto también.
Los iconos para compartir de TechCrunch.com están en el margen izquierdo y se desplazan hacia abajo en la página.
Cómo implementar los botones sociales: si prefieres no codificar los botones en tu tema, te recomiendo Me gusta, Botón Fácil de Twitter y WordPress Google +1 Button plugins. Use el complemento Sharebar para colocar un control deslizante social de desplazamiento en el lado izquierdo de su contenido.
Publicaciones relacionadas (7/10) Siete de cada diez de esos blogs cuentan con un área de publicaciones relacionadas al final de cada publicación. Esto anima a las personas a leer más de sus artículos, pasar más tiempo en su sitio y participar más en su blog o negocio.
FreelanceSwitch.com presenta tres publicaciones relacionadas al final de cada publicación.
Cómo implementar las publicaciones relacionadas: Apoyo totalmente el complemento de Publicaciones similares de Rob Marsh. También necesitará el complemento de la Biblioteca de complementos para que su serie de complementos funcione en su sitio.
Post to Foot Call to Action (5/10) La mitad de los blogs grandes tienen una llamada a la acción muy específica al final del post. Por lo general, la llamada a la acción es para suscribirse o comprar.
Los otros cinco blogs solo lo alientan a compartir, comentar o hacer clic en un anuncio. De una forma u otra, todos tienen un llamado a la acción.
El llamado a la acción de TheOatmeal.com generalmente es para comprar el libro The Oatmeal.
Cómo implementar el llamado a la acción después de un pie de página: como cada tema funciona de manera diferente, es difícil dar instrucciones específicas aquí. Todo lo que tiene que hacer es conectar una tabla de HTML en su tema en la parte inferior de su área de contenido y sobre el área de comentarios.
Barra lateral La barra lateral generalmente tiene aproximadamente la mitad del ancho del área de contenido y, como mencioné anteriormente, la mayoría de las barras laterales están a la derecha.
Opción de inclusión en la barra lateral (8/10) Ocho de cada diez de estos sitios tienen una opción de inclusión dentro de sus barras laterales y cinco de ellos están en la parte superior. Las palabras Actualizaciones gratuitas y Suscripción son los titulares y las llamadas a la acción más frecuentes.
La participación de Copyblogger.com se encuentra en la parte superior de la barra lateral con el titular, ACTUALIZACIONES GRATUITAS, y el llamado a la acción, ÚNASE A NOSOTROS. Cómo implementar el opt-in de la barra lateral: cada proveedor importante de marketing por correo electrónico tiene algún tipo de creador de formularios que difunde HTML. Incruste el HTML en un widget de texto y colóquelo en la parte superior de la barra lateral. Es posible que tengas que jugar con el CSS para que se vea como quieres.
Publicaciones populares (7/10) Presentar sus publicaciones populares es una excelente manera de presentar a un nuevo visitante el mejor contenido de su blog. Siete de los diez promocionan sus publicaciones más populares en su barra lateral.
El blog KISSmetrics presenta sus publicaciones populares en su barra lateral.
Cómo implementar publicaciones populares: use el plugin Popular Post de Rob Marsh para mostrar sus publicaciones más vistas. Instala el complemento y encontrarás un widget de “Publicaciones populares +” que puedes simplemente arrastrar y soltar en la barra lateral.
Enlaces de redes sociales (9/10) Nueve de cada diez blogs incluyen enlaces a sus perfiles de redes sociales, siendo Twitter y Facebook los más populares. Otros notables son YouTube, LinkedIn, StumbleUpon, Flickr y Tumblr.
La barra lateral de Mashable.com presenta el Cuadro Me gusta, +1, Seguir, LinkedIn, YouTube, Stumble y RSS. Cómo implementar los enlaces de las redes sociales: Puede crear un cuadro de “Me gusta” de Facebook aquí. O puedes obtener íconos de redes sociales gratis para hacer tus propios botones aquí.
Productos / Anuncios (9/10) Nueve de cada diez promocionan sus productos o anuncios en la barra lateral, y cinco de ellos presentan ambos. La única razón por la que TheOatmeal.com no lo hace es porque presenta los productos principalmente como un llamado a la acción.
Seth Godin enumera todos sus libros en su barra lateral con lo último en la parte superior.
Cómo agregar productos y anuncios: Presentar sus productos en la barra lateral es tan simple como escribir el HTML y colocarlo en un widget de texto arbitrario. Para mostrar anuncios rotativos en su barra lateral, recomiendo el complemento OIOpublisher.
Pie de página Tradicionalmente, el pie de página se usaba como un lugar para listar enlaces a todos los rincones de su sitio web. Pero la mayoría de los sitios ahora optan por un diseño más minimalista con sus pies de página.
Categorías u otros enlaces (5/10) De los cinco grandes blogs que tienen un pie de página más sólido, todos enumeran los enlaces de categoría u otros enlaces como un área de menú de navegación adicional.
Problogger.net enumera todas sus categorías en su pie de página para ayudar a los visitantes a navegar por el contenido.
Cómo implementar enlaces a pie de página: muchos de los temas de WordPress tienen pie de página con widgets. Si el suyo lo hace, use el widget de texto para colocar HTML dentro de su pie de página. Al igual que en el llamado a la acción del pie de página, es difícil dar instrucciones detalladas aquí porque cada tema es diferente.
¿Más preguntas?
Si desea obtener sugerencias más avanzadas sobre cómo implementar estos elementos de diseño en su blog o temas específicos, deje un comentario a continuación y le indicaré la dirección correcta.
Lea más: ’13 consejos de diseño de blog de nivel experto para principiantes ’69 SHARES FacebookTwitter