101 formas de hacer que su sitio web sea más impresionante

Estaba hablando con un antiguo cliente la semana pasada y me dijo: "Nick, sé que necesito ayuda con el sitio, pero no estoy seguro de lo que necesito".

Así que pregunté por ahí. Amigos, familiares, otras personas de negocios ajenas a Internet. Todos ellos dijeron la misma cosa:

“Necesito una lista de verificación. No sé cómo construir un sitio web. Por eso necesito contratar a alguien. Pero todavía quiero saber lo que está involucrado ".

Así que comencé a hacer una lista de todo lo que hemos hecho en AwesomeWeb (y algunas cosas que no hemos hecho).

Aquí está mi promesa ...

… Si arregla todo en esta lista, tendrá uno de los mejores sitios de su industria, si no el mejor.

¿Cómo lo sabes?

En AwesomeWeb, he revisado más de 1000 de los mejores autónomos del mundo. Hasta donde yo sé, nunca he visto un sitio que pueda marcar todas las casillas.

Como propietario de una empresa, utilice esta lista para saber qué debe hacerse. Envíelo a su diseñador o desarrollador. Incluso podrá arreglar algunos de ellos usted mismo.

Como autónomo, use esta lista para hacer que todo lo que cree sea más asombroso. Regrese a los antiguos clientes y diga:

“Estaba revisando lo que construimos y noté que podemos arreglar esto, esto y esto. Puedo hacerlo por $ 500, $ 1000, $ 5000 y puedes esperar estos resultados ... "

La cuestión es…

… Quiero ayudarte a hacer que la Web sea más asombrosa. Empieza aquí, con esta lista.

Branding impresionante

  1. Obtén un logo profesional . Es raro encontrar un sitio web o un blog con un gran logo. Así que es una buena forma de generar credibilidad instantánea.
  2. Sube un favicon listo para retina (el ícono cuadrado en la pestaña de tu navegador). La mayoría de los sitios tienen favicons de 16 × 16 píxeles. En las pantallas de retina, están borrosas. Utilice X-Icon Editor para generar un favicon de 64 × 64 píxeles.
  3. Utilice siempre imágenes listas para retina . Simplemente asegúrese de que la imagen sea dos veces más grande que su contenedor, luego redúzcala.
  4. Utilice 2-3 colores como máximo . Debe tener un color de fondo, un color de llamada a la acción y un color de acento.
  5. Al elegir una paleta de colores, comience con colores complementarios o tríados . Ajuste desde allí. Las buenas combinaciones de colores te dan un diseño que cuenta una historia.
  6. Nunca use negro verdadero (# 000000). El negro puro no existe, por lo que parece fuera de lugar en línea. El negro, en realidad, es siempre un tono oscuro de otro color.
  7. Nunca uses un gris neutro (por ejemplo, #cccccc) si quieres que tu diseño tenga personalidad. Agregue un tinte de amarillo para brindar calidez, rojo para dar energía o azul para generar confianza.

Tipografía impresionante

  1. Elija una fuente premium . Utilice un servicio como Typekit. Se ha dicho que el 95% de la web es tipografía. Ir con una fuente premium es la forma más fácil y económica de causar una buena impresión.
  2. Utilice 2 o 3 fuentes como máximo . Más es complicado y ralentiza el tiempo de carga. Elija una fuente de encabezado y una fuente de párrafo. Una más si quieres una fuente para casos especiales.
  3. Establezca un tamaño de fuente de cuerpo de 16 píxeles como mínimo . Cualquier cosa más pequeña es difícil de leer en pantallas grandes. Escale hasta 12px en dispositivos móviles.
  4. Elija una escala tipográfica como la cuarta aumentada, la quinta perfecta o la proporción áurea. Use la escala para establecer tamaños de fuente para el texto de su párrafo, H4, H3, H2 y H1. Base sus alturas de línea y márgenes de texto en esta escala.
  5. Diseñe otros elementos tipográficos como citas en bloque, listas con viñetas, listas numeradas, leyendas, texto de ayuda, alertas, texto resaltado, ejemplos de código, abreviaturas e incluso direcciones.
  6. Instale una fuente de icono personalizada como Font Awesome en lugar de usar imágenes para elementos comunes como logotipos de redes sociales, botones de navegación y gráficos interactivos. Una fuente de icono se carga más rápido, se escala infinitamente y le da la libertad de cambiar su color como desee.

Diseños impresionantes

  1. Usa la regla de los tercios para un diseño básico. Divida su diseño en tercios horizontal y verticalmente, luego alinee los puntos clave de enfoque donde las líneas se cruzan.
  2. Mantenga una cuadrícula vertical con un sistema de cuadrícula. Divida su interfaz en diseños de 8, 12 y 16 columnas con generosos canales entre las columnas.
  3. Mantenga un ritmo vertical constante con una cuadrícula de línea de base . El espacio entre líneas de texto es tan importante como el espacio entre bloques de contenido. Cada línea de texto debe tener un margen inferior que se encuentre en la línea de base.
  4. El espacio en blanco es lujoso. Está ahí para crear espacio para respirar y equilibrio. Atraiga la atención de sus lectores hacia lo más importante.
  5. Equilibre los elementos visuales de su sitio como los botones, entradas, formularios, titulares, etc. Debería poder difuminar sus ojos y seguir el camino que desea que tomen sus usuarios.

Interfaces de usuario impresionantes

  1. Utilice botones de llamada a la acción grandes y llamativos . Cada página debe tener un objetivo. Casi siempre es hacer clic en un botón. Asegúrese de que ese botón no se pueda perder.
  2. Agregue estados activos y de desplazamiento a sus enlaces, botones, entradas y áreas de texto. Si elige aclarar los botones al pasar el mouse, también debe aclarar los enlaces y los bordes de sus entradas.
  3. Sea consistente con el estilo de la forma . Todas las áreas de texto y los campos de entrada deben tener el mismo estilo. Los mismos colores de borde, colores de fondo, al pasar el mouse, en activo, texto de marcador de posición, texto activo, etc. Asegúrese de que los índices de tabulación estén configurados correctamente para que pueda pasarlos en el orden correcto.
  4. Cambie el color de los enlaces visitados para que el usuario sepa que ha estado en esa página antes.
  5. Una vez que tenga su logotipo, colores, tipografía, diseño y tamaños de imagen, establezca una guía de estilo . Las buenas interfaces de usuario se crean con componentes consistentes que siempre tienen el mismo estilo.

Increíble experiencia de usuario

  1. Agregue microinteracciones a botones y otros campos. Por ejemplo, un botón "Subir" debería cambiar a "Subiendo" o "Procesando" después de hacer clic en él.
  2. ¡Sin desplazamiento de gatos ! Nunca te metas con el comportamiento predeterminado del navegador. Puede pensar que es bueno desplazarse dos veces más rápido de lo normal, pero no lo es.
  3. Deshazte del control deslizante de tu página de inicio . Disminuyen las conversiones y existen mejores formas de mostrar más información en un espacio reducido.
  4. Nunca use una puerta de bienvenida . Cuando visita su página de inicio por primera vez, el usuario espera ver su página de inicio.
  5. Utilice titulares, subtítulos, párrafos iniciales, listas y leyendas para que su contenido se pueda escanear fácilmente. La mayoría de las personas que visitan una página web la escanean antes de decidirse a leerla.
  6. Agregue texto descriptivo de marcador de posición a todos sus formularios, entradas y menús desplegables. Si desea que alguien complete un campo de cierta manera, dígaselo. Para los campos desplegables o seleccionados, haga que la primera opción sea descriptiva. "Seleccionar año" es mejor que "2016".
  7. Agregue validación HTML5 en sus formularios para dejar en claro cuándo hay un error en el formulario después de que un usuario intenta enviarlo.
  8. Haga que sus sitios web sean accesibles para personas con discapacidad visual evitando nombres de enlaces imprecisos, reduciendo el desorden, usando puntuación, manteniendo un diseño simple, agregando texto alternativo a las imágenes, usando texto más grande y manteniendo un alto contraste entre el texto y los colores de fondo.
  9. Revise su sitio en busca de enlaces rotos con BrokenLinkCheck.com. Repare los enlaces rotos para que la gente no se enoje cuando haga clic en ellos.

Desarrollo impresionante

  1. Asegúrese de que su sitio esté optimizado para dispositivos móviles para que se muestre de manera receptiva en cualquier dispositivo. Los sitios debidamente optimizados para dispositivos móviles se cargan más rápido, tienen una clasificación más alta y brindan a sus usuarios una mejor experiencia.
  2. Genere y muestre el tamaño de imagen óptimo . Si carga una imagen grande, como la imagen de una publicación de blog, y desea mostrarla en otros lugares del sitio, como la barra lateral, asegúrese de mostrar la versión en miniatura de la imagen en lugar de la imagen de tamaño completo.
  3. Agregue etiquetas alt y de título a todas las imágenes y enlaces . Si por alguna razón una imagen no se carga, su sitio mostrará el texto alternativo en su lugar. Además, cuando pasa el cursor sobre los enlaces, el navegador muestra la etiqueta del título de ese enlace.
  4. Utilice una d en lugar de y para poner el texto en negrita y cursiva. Tienen el mismo efecto, pero tienen una diferencia fundamental. es un estilo. es una indicación de cómo se debe entender algo.
  5. Corrija HTML descuidado . Cuando copia y pega contenido en un editor WYSIWYG (como la vista visual en WordPress), agrega muchos intervalos innecesarios y estilos en línea. Con el tiempo, su sitio se volverá ilegible.
  6. Hablando de eso, elimine los estilos en línea de su HTML. El 99% de las veces, sus reglas de estilo deben ir en un archivo CSS para que pueda actualizar todas las instancias de un componente al mismo tiempo en lugar de página por página, línea por línea.
  7. Utilice variables de Sass en lugar de CSS para mantener la coherencia de los colores y otros componentes en su sitio. ¿Quieres cambiar un color y cada tono de ese color? Actualice una línea en lugar de cientos.
  8. Enlace a enlaces permanentes, no a URL, en caso de que cambie de dominio. Por ejemplo, al vincular a una determinada página, su HTML debería leer, en lugar de. Lo mismo ocurre con las fuentes de imágenes y los fondos CSS. Si no hace esto y coloca el sitio en un nuevo dominio, todas sus fuentes se vincularán a páginas y archivos que ya no existen.
  9. Desarrolle un complemento o herramienta personalizada para proporcionar una funcionalidad única a su sitio. El software personalizado es difícil de mantener, pero le dará una ventaja competitiva sobre sitios similares.
  10. Pruebe la compatibilidad entre navegadores asegurándose de que su sitio se muestre correctamente en Chrome, Firefox, Safari, Internet Explorer y otros navegadores. Las versiones anteriores de IE son notoriamente malas para mostrar sitios web. Utilice BrowserStack y verifique manualmente.
  11. Utilice el servicio de validación de marcado de W3C para encontrar errores evidentes en su HTML. Tenga en cuenta que la mayoría de los sitios no tienen HTML perfectamente válido. No es la máxima prioridad, pero le dará una buena idea si hay algún error.
  12. Configure un entorno de prueba para realizar cambios en su sitio web actual. Idealmente, debería tener un sitio de producción, que todos vean, y un sitio de prueba, donde su desarrollador realiza cambios. Una vez que los cambios estén listos para implementarse, lleve el sitio de ensayo a producción.
  13. Muestra el año actual en el pie de página de derechos de autor . Cuando ve un sitio con derechos de autor antiguos, asume que ya no está activo. Utilice un script PHP o similar para mostrar el año actual en lugar de texto estático (por ejemplo, © -).

Optimización de motores de búsqueda impresionante

  1. Elija una frase de palabras clave por página para la que desea que esa página se clasifique. Concéntrese en optimizar todos los aspectos de esa página para esa palabra clave. No en el sentido de poner esta palabra clave en cada oración. Solo sé inteligente acerca de cómo quieres que se clasifique.
  2. Establezca etiquetas de título ricas en palabras clave en cada página. El título se muestra como el enlace azul en los resultados de búsqueda de Google. Límite de 55 caracteres.
  3. Incluya una y solo una etiqueta H1 por página. En la mayoría de los casos, será igual a su etiqueta de título.
  4. Incluya muchos H2, H3 y H4 en el contenido de su página para crear subtítulos y jerarquía visual.
  5. Optimice su página para una palabra clave específica incluyéndola en el título, H1, subtítulos y en el primer tercio del contenido.
  6. Su meta descripción se muestra en los resultados de búsqueda como la descripción debajo del enlace. Asegúrese de incluirlo en cada página e incluir la frase de palabras clave.
  7. Su enlace permanente , que es la URL después del dominio (es decir, dominio.com/ enlace permanente aquí/ ), debe incluir la frase de palabras clave separada por guiones.
  8. Google considera la edad del dominio en su algoritmo porque es probable que un dominio que está registrado durante muchos años sea un recurso de mayor calidad. Registre su dominio con varios años de anticipación. Si registró su dominio durante 10 años, entonces se toma en serio su negocio.
  9. En promedio, el primer resultado en la SERP (página de resultados del motor de búsqueda) para cualquier palabra clave determinada conduce a una página con más de 2000 palabras por página . Al escribir una publicación de blog o crear una página que desee clasificar bien, intente alcanzar al menos 2000 palabras.
  10. Siempre cree un mapa del sitio como un archivo sitemap.xml y colóquelo en su directorio raíz para que se muestre en domain.com/sitemap.xml. Le dice a Google dónde se encuentran todas sus páginas y debería actualizarse automáticamente cuando agrega contenido nuevo. Envíelo a Google a través de Herramientas para webmasters.
  11. Agregue su sitio web Herramientas para webmasters de Google para que pueda ver cómo Google indexa su sitio y mantenerse actualizado si hay algún problema crítico.
  12. Para ayudar a que sus imágenes se clasifiquen, siempre cambie el nombre de sus imágenes y otros archivos antes de subirlos a su sitio web (por ejemplo, rank_for_this_keyword_phrase.png).
  13. Incluya un archivo robots.txt en su sitio para indicar a los rastreadores web qué páginas deben y qué no deben indexar.
  14. Agregue un redireccionamiento canónico para apuntar a la versión sin www a la versión www de su sitio web, o viceversa.
  15. Investigue e integre palabras clave LSI (indexación semántica latente) en cada página para ayudar a clasificar la página para la frase de palabras clave principal. Encuentre las palabras clave de LSI buscando en Google su frase de palabras clave y buscando los enlaces "Búsquedas relacionadas con ...".
  16. Asegúrese de vincular activamente su contenido . Todas las páginas de su sitio deben ser accesibles mediante tres o menos clics desde la página de inicio.
  17. Agregue datos estructurados en páginas relevantes para ayudar a Google a indexar adecuadamente su contenido. Los tipos de página que necesitan datos estructurados personalizados incluyen personas, productos, eventos, organizaciones, películas, libros y reseñas. Utilice Schema Creator para generar datos estructurados.
  18. Consulte PageSpeed ​​Insights de Google para asegurarse de haber solucionado todos los problemas comunes que ralentizan la velocidad de su página. Cuanto más rápido se cargue su sitio, mayor será su clasificación.

Velocidad de página impresionante

  1. Mantenga el peso de la página por debajo de 2 MB . Utilice tools.pingdom.com para comprobar el peso de la página de sus páginas de destino principales. Cualquier valor superior a 2 MB es demasiado pesado.
  2. Mantenga las solicitudes de página por debajo de 50 . Cada archivo e imagen en una página determinada es una solicitud HTTP. Cuanto menor sea el número de solicitudes, más rápido se cargará. La página web promedio tiene 70 solicitudes. Utilice GTmetrix para ver sus solicitudes.
  3. Diseñe elementos de página con CSS en lugar de imágenes de fondo . Nunca use una imagen para mostrar un botón, formulario u otro componente común en su sitio. CSS se carga más rápido y es más flexible en diseños receptivos.
  4. Optimice las imágenes antes de subirlas a su sitio. Herramientas como TinyPNG pueden reducir el tamaño de los archivos de imagen en un 80–95% sin perder resolución o calidad de imagen.
  5. Configure una red de distribución de contenido para alojar sus imágenes y otros archivos más grandes en varios lugares del mundo. Los CDN almacenan y entregan sus archivos desde servidores ubicados estratégicamente para maximizar la velocidad de carga según la ubicación física de su visitante.
  6. Minimice JavaScript, HTML y CSS mediante el uso de herramientas de compilación y compresión antes de cargar archivos en su sitio web. Para JavaScript, use Closure Compiler. Para HTML, use HTML Minifier. Para CSS, use YUI Compressor.
  7. Mueva el código JavaScript que bloquea la representación al pie de página . Los únicos guiones que deben colocarse en el encabezado son los que afectan inmediatamente al diseño de la página (por ejemplo, fuentes personalizadas).
  8. Evite los redireccionamientos de páginas de destino . Los redireccionamientos desencadenan una solicitud HTTP adicional que retrasa la presentación de la página.
  9. Aproveche el almacenamiento en caché del navegador estableciendo fechas de vencimiento para las páginas y los tipos de página que no se actualizan con frecuencia. El almacenamiento en caché del navegador indica al navegador que cargue las páginas descargadas anteriormente desde el disco local en lugar de hacerlo a través de la red.
  10. Habilite la compresión gzip en la configuración de su servidor. La compresión puede reducir el tiempo de respuesta transferido en un 90%, lo que mejora el tiempo hasta la primera renderización de sus páginas.
  11. Habilite Keep-Alive en la configuración de su servidor para permitir que la misma conexión TCP envíe y reciba múltiples solicitudes HTTP, reduciendo así la latencia para solicitudes posteriores.
  12. Actualice a un servidor dedicado o servicio de alojamiento premium para mejorar el tiempo de respuesta del servidor. Cuando utiliza un entorno de alojamiento compartido, su sitio suele ser uno de los cientos en el mismo servidor. Si alguno de esos cien sitios está experimentando mucho tráfico, reducirá la velocidad de su página.

Diseño gráfico impresionante

  1. Obtenga una portada de libro electrónico personalizada para su bono de suscripción. No son difíciles de crear y pueden marcar una gran diferencia en su tasa de conversión.
  2. Diseñe un gráfico o una ilustración personalizados para su página de inicio o páginas de ventas. Una buena ilustración hecha específicamente para su sitio es una manera fácil de hacer que su sitio sea más memorable.
  3. Cree una serie o una personalizada de diseños de imágenes de características de publicaciones de blog . Esa es la imagen que se difunde en Facebook, Twitter, Pinterest, etc. Cuando un usuario ve cierto tipo de imagen asociada con una publicación de blog, debe saber que fue escrita por usted.
  4. Muestre ilustraciones de avatar personalizadas o caricaturas para usted y cada miembro de su equipo. Las caricaturas personalizadas pueden ser menos costosas que contratar a un fotógrafo profesional cada vez que agregas a alguien a tu equipo. Además, es un buen regalo para un nuevo miembro del equipo.
  5. Las infografías personalizadas que muestran datos y otro contenido de forma visual tienden a generar más tráfico que el equivalente de la publicación del blog. A las personas les gusta compartir infografías en sitios como Pinterest o volver a publicarlas en sus propios sitios con un vínculo de retroceso a su sitio.
  6. Si produce un video o una serie de videos, debe tener una introducción y / o salida de video personalizada para darle un toque profesional. Sin mencionar otros gráficos de video o animaciones que ayudarán a que su marca se destaque.

Seguridad web impresionante

  1. Instale un certificado SSL para permitir una conexión segura desde un servidor web a un navegador. La mayoría de los programas de pago requieren un certificado SSL si acepta tarjetas de crédito. Google ha dicho que un certificado SSL mejorará su clasificación de búsqueda.
  2. Mantenga su software y complementos actualizados . Cuando WordPress y otro software CMS lanzan una actualización, normalmente es para reparar una vulnerabilidad. Si no lo hace, es solo cuestión de tiempo antes de que su sitio sea pirateado.
  3. Configure una puerta de inicio de sesión de autenticación doble para sus páginas de administración. La mayoría de los trucos comienzan con la página de inicio de sesión.
  4. Busque y elimine el malware . Si su sitio ha sido pirateado antes, probablemente agregaron archivos corruptos que no son fáciles de encontrar. Si no lo elimina de inmediato, es posible que Google incluya su sitio en la lista negra, lo que acumula su clasificación y advierte a los usuarios que se vayan cuando lo visiten.
  5. Nunca deje su nombre de usuario de administrador como "admin". Elimine la cuenta de administrador predeterminada y cree una nueva con un nombre de usuario diferente.
  6. Regularmente una copia de seguridad de bases de datos y sitios Web archivos . La mayoría de los complementos y software de respaldo solo respaldan su base de datos, que incluye los datos y el contenido. Pero si pierde su sitio, deberá tener una copia de seguridad de los archivos para restaurarlo.

Contenido impresionante

  1. Cree una página de error 404 personalizada que se mostrará cada vez que un usuario intente visitar una página que no existe. Use la página 404 para dirigirlos de regreso a la página de inicio o ayudarlos a encontrar lo que están buscando.
  2. Aparte de su página de inicio, su página acerca de es probablemente la página más visitada de su sitio. Asegúrese de que lo represente a usted y a su empresa.
  3. Una página de contacto ayudará a las personas a contactarlo, pero también generará confianza entre usted, sus visitantes e incluso Google. Al determinar cómo clasificar su sitio, los bots encontrarán su página de contacto y buscarán un correo electrónico, número de teléfono y dirección. La información de contacto le dice a Google que el sitio es un poco más confiable.
  4. Es bueno tener formularios de suscripción distribuidos estratégicamente en todo su sitio, pero también es inteligente tener una página de compresión con nada más que una suscripción de alta conversión. Cuando desee que alguien se suscriba, enlace a esa página.
  5. Cuando alguien se suscribe a su lista, asegúrese de enviarlo a una página de confirmación pidiéndole que confirme su correo electrónico. Si no confirman su correo electrónico de inmediato, es posible que lo olviden y nunca regresen.
  6. Después de que hagan clic en el enlace de confirmación en el correo electrónico, envíelos a una página de agradecimiento donde puedan ver lo que sigue. Es una página que todos los suscriptores verán y solo verán una vez, por lo que es una oportunidad perfecta para ofrecerles un trato o animarlos a realizar una compra.
  7. Su sitio web o tema debe tener una plantilla de página de destino que pueda usar cuando necesite que sus usuarios realicen una acción específica.
  8. Si vende algo, asegúrese de tener una página de ventas atractiva . Empiece con un titular. Haz espacio para tu discurso. Tal vez agregue un video de ventas. Y dirija a las personas que compren al final de la página.

Redes sociales impresionantes

  1. Limite la cantidad de botones de redes sociales en sus publicaciones y páginas porque cada botón ejecuta un script que agrega tiempo de carga adicional a la página. Solo incluya los botones 1–5, por ejemplo, Facebook, Twitter, LinkedIn, Pinterest, Google+, etc., donde su contenido se comparte con mayor frecuencia.
  2. Cree gráficos de redes sociales para su página de Facebook, cuenta de Twitter y canal de YouTube. Los gráficos personalizados causan una impresión positiva inmediata que alentará a los visitantes nuevos a que les guste, sigan y se suscriban a su página, perfil o canal.
  3. Configure las etiquetas META de Open Graph de Facebook para asegurarse de que su contenido se comparta correctamente en Facebook. Use el depurador de Facebook para verificar su página de inicio, publicaciones y otras páginas para ver cómo se muestran cuando alguien comparte esa URL.
  4. Configure Twitter Cards para adjuntar automáticamente fotos y videos enriquecidos a sus tweets cuando se comparte una URL en su sitio. Empiece a utilizar Twitter Cards aquí.
  5. Configure fragmentos de Google+ para personalizar lo que ven las personas cuando su sitio se comparte en Google+. Utilice la guía de fragmentos para generar el código. Incluso si su sitio no recibe mucho amor de Google+, Google sabrá si agrega los metadatos correctamente y eso debería tener algo de peso.
  6. Guarde los íconos de redes sociales en su sitio que enlazan con sus perfiles. Hazlos pequeños o solo muéstralos en el pie de página. El propósito del marketing en redes sociales es hacer que las personas vuelvan a su sitio, no al revés.

Muy bien, ¿qué me estoy perdiendo? ¿Hay algo que haga como autónomo o propietario de un negocio para hacer que sus sitios sean más impresionantes?

Me encantaría escuchar tus comentarios. Deja un comentario o tuitea @wntart .

Si cree que más personas deberían ver esta lista, recomiéndela. ¡Hagamos la web más asombrosa!

Salud,

Mella

PD: Si necesita ayuda con algo de esta lista, contrate diseñadores aquí o desarrolladores aquí. ¡Tenemos los mejores autónomos del mundo y están felices de ayudar!

Si quieres unirte a AwesomeWeb como autónomo para conseguir más clientes, regístrate aquí.