Advertisement
  1. Web Design
  2. Workflow

Lista de verificación para el lanzamiento del sitio de un diseñador web (incluidos los formatos portátiles)

Scroll to top
Read Time: 15 min

Spanish (Español) translation by Esther (you can also view the original English article)

En FHOKE hemos pasado por todo, desde lanzamientos perfectos hasta otros que se han convertido en auténticas pesadillas. A través de nuestras experiencias hemos recopilado una lista, sin ningún orden en particular, del proceso que seguimos antes de lanzar nuestros sitios.

Esto no lo cubre todo, pero debería darte una visión rápida de lo que puedes hacer o añadir a tu propia lista de control.

Para facilitarte la tarea, hemos creado varias versiones de esta lista de comprobación, incluyendo una versión HTML, Markdown, PDF y Evernote. Descárgalas todas desde la cuenta de GitHub de Tuts+.

evernoteevernoteevernote

Lanzamiento exitoso

Después de haber invertido mucho tiempo en un proyecto, el día del lanzamiento está a la vista. Antes de llegar a esa fecha, todavía habrá cuestiones importantes que tendrás que abordar para lograr un lanzamiento exitoso; si las resuelves correctamente, tanto tú como tu cliente estarán contentos.

Recuerda que, antes de mostrarle nada a un cliente, debes asegurarte de que el sitio web se ajusta a las especificaciones originales, es perfecto en cuanto a píxeles con respecto a los diseños que presentaste y cumple con las instrucciones originales.


Contenido

Reúne a un pequeño equipo y revisa el contenido del sitio con un peine de dientes finos: asegúrate de hacerlo bien. Un buen contenido es la piedra angular de un gran sitio.

  • Ortografía: Revisa y vuelve a revisar. Revisa la ortografía. Mejor aún, haz que otros participen. Nunca hay suficientes personas que se aseguren de que el texto es correcto. Busca errores gramaticales y comprueba si hay palabras viudas o huérfanas en los párrafos importantes.
  • Copia: Asegúrate de que la copia real está en su sitio y de que se haya eliminado todo el texto de los placeholder. No hay nada peor que ver lorem ipsum en una declaración de intenciones.
  • Datos de contacto: Parece obvio, pero asegúrate de que sean correctos. Sin ellos, ¿cómo esperas que las personas se ponga en contacto? Comprueba los números de teléfono, las direcciones de correo electrónico y comprueba que funcionan, haz una llamada o envía un correo electrónico y comprueba que sean recibidas.
  • Derechos de autor: Si tienes pensado utilizar una fecha en la información de los derechos de autor, asegúrate de que se actualiza automáticamente a partir de la marca de tiempo en el servidor, y que el propietario de los derechos de autor es correcto.
  • Términos: Si estás proporcionando un servicio o estás involucrado en promociones, entonces necesitas términos disponibles para que los visitantes los lean. Si no estás seguro de cómo deben redactarse, consulta a un abogado para que te asesore. Recuerda: hazlo lo más claro posible. No hay nada peor que sentirse desconcertado por la jerga jurídica.
  • Privacidad: Si usas cookies, capturas datos o distribuyes datos, necesitas una política de privacidad. Sea sencillo y aclare qué datos recopilas y facilite detalles sobre cómo pueden ponerse en contacto contigo para obtener más información.

Funcionalidad

¿Funciona? Puede parecer una pregunta obvia, pero por encima de todo es la parte más importante de un proyecto. Puede que tengas todo lo demás preparado, pero si el sitio no funciona correctamente, ¿de qué sirve lanzarlo?

Es posible que aparezcan pequeños fallos cuando los visitantes utilicen el sitio por primera vez, pero asegurarte de que funciona casi al 100% garantizará el éxito del lanzamiento.

  • Compatibilidad: Comprueba que el sitio funciona en todos los navegadores y plataformas. Especifica al principio del proyecto con el cliente las plataformas para las que construirás y probarás y cíñete a ellas. Usa plataformas como Responsivator y BrowserStack para probar sitios rápidamente, así como en navegadores y dispositivos físicos.
  • Favicon: Es obvio, pero esto puede pasar desapercibido. Considera también la posibilidad de crear un icono para la pantalla de inicio de iOS.
  • Logotipo: ¿El logotipo está vinculado a la página de inicio?
  • Páginas 404: Verifica que las tienes, asegúrate de que señalan formas de que un usuario vuelva a entrar en el sitio o lo dirigen a páginas de interés con enlaces relevantes.
  • Redirecciones: Si estás redirigiendo páginas utiliza redireccionamientos 301 adecuados en lugar de 302.
  • Formularios: Asegúrate de que no se envíen a los buzones de spam, o que devuelvan un error una vez enviados, e incluye un estado de agradecimiento una vez enviado el formulario para que el visitante sepa que ha sido enviado. Por encima de todo, asegúrate de que la dirección de correo electrónico del cliente se especifica cuando el sitio se pone en marcha.
  • Enlaces: ¿Funcionan los enlaces internos de las páginas? ¿Funcionan todos los enlaces externos y se abren en una nueva pestaña si así se pretende?
  • Feeds RSS: Los feeds pueden ser útiles. No hay que limitarse a los artículos, se pueden tener feeds para la mayoría de las páginas, por ejemplo, nuevos trabajos o estudios de casos añadidos a un sitio.

Estándares y validación

Estas dos cosas deben ser consideradas a lo largo del diseño y la construcción para que la experiencia de cada usuario en tu sitio sea lo mejor posible. Puntos a tener en cuenta:

  • Accesibilidad: Es fácil olvidar lo inaccesible que es una página web para algunos usuarios. Has pensado en cómo navegarán por tu sitio las tecnologías de asistencia, como los lectores de pantalla? ¿Haz implementado los roles y estados de WIA-ARIA, o al menos haz considerado el orden de las pestañas de los controles de los formularios?
  • Contraste: Esto es una continuación de nuestro punto sobre la accesibilidad. Utilizando los monitores más modernos es fácil ver sutiles diferencias de color, asegúrate de probar tu sitio en varios dispositivos y ordenadores portátiles para asegurarte de que el diseño es claro y el texto se puede leer con facilidad.
  • Tamaño del texto: Haz que el texto sea claro y fácil de leer, ajusta el interlineado y deja mucho espacio en blanco. Más grande, puede significar mejor, cuando se trata de texto en la web.
  • Etiquetas Alt: Asegúrate de que todas las imágenes tienen etiquetas ALT claras y descriptivas para los discapacitados visuales. No solo eso, sino que sin ellas no se pueden encontrar en los motores de búsqueda.
  • Consistencia: Asegúrate de que los elementos comunes en todo el sitio son consistentes para evitar confundir a tus usuarios. Haz que los botones luzcan como botones, que los enlaces se vean como enlaces, y que los títulos y el texto tengan el mismo tamaño y color.
  • Compatibilidad de dispositivos: Considera cómo se utilizará el sitio web a través de múltiples dispositivos, responsive o no tu sitio web debe funcionar para los usuarios de la web de escritorio y móvil.
  • Validación: Intenta siempre que la validez sea del 100%. Si tu sitio no se valida por completo, no te preocupes, pero asegúrate de entender los errores para eliminar cualquier problema no deseado.
  • JavaScript: Muchas personas que navegan por la web tienen desactivado JavaScript por razones de seguridad. Asegúrate de que tu sitio es totalmente funcional y que los formularios siguen realizando comprobaciones de validación del lado del servidor sin él.
  • Flash: Sí, lo sabemos, ya nadie usa Flash, ¿verdad? Si hay que usar Flash, asegúrate de incluir una imagen de respaldo alternativa en caso de que Flash Player no esté instalado.

Sitemaps (Mapas del sitio)

Asegúrate de incluir los mapas de sitio. Estos ayudan a los motores de búsqueda a indexar correctamente tu sitio web durante el proceso de rastreo.

  • Mapas del sitio en HTML: Aunque no es una práctica tan común como antes, esta forma de mapa del sitio puede tener sus ventajas al ayudar a los visitantes a ver una visión completa de las páginas del sitio. Los enlaces para estos se encuentran normalmente en el pie de página de un sitio.
  • Mapas de sitio XML: Estos solo son utilizados por los motores de búsqueda como Google, Bing y Yahoo. Crea un sitemap XML fácilmente y envíalo a través de las Herramientas para webmasters de Internet. Esto se utilizará para informar a los motores de búsqueda sobre las páginas que has publicado.

Rendimiento

Un sitio más rápido es un sitio mejor clasificado. También reducirá las tasas de rebote de las páginas si consigues reducir los tiempos de carga: ¿quién quiere esperar a que se carguen las páginas?

  • Comprueba la velocidad del sitio: Puedes utilizar servicios como Google Page Speed para comprobar los tiempos de carga de las páginas de tu sitio.
  • Tamaño de las imágenes: Mantén tus imágenes lo más pequeñas posible. Aunque la velocidad de la red es mejor que nunca, nadie quiere esperar a que se cargue una página de 10 Mb. Comprimir las imágenes solo mejorará los tiempos de carga de las páginas.

  • SEO

    Una buena optimización de los motores de búsqueda significará que tu sitio web trabajará más y logrará un mayor éxito que un sitio que utilice pocas o malas técnicas. Haz una buena investigación y el resto caerá en su sitio.

    Esta lista no es en absoluto exhaustiva y, si quieres saber más, te recomendamos que leas los artículos recientes Search Engine Optimization FAQ y A Web Designer's SEO Checklist.

    • Búsqueda de palabras clave: Asegúrate de que te diriges al grupo demográfico y al mercado adecuados. Es importante hacerlo bien para atraer tráfico relevante a tu sitio. Realiza una investigación con Google AdWords y comprueba qué palabra clave (o término de búsqueda) tiene el mayor potencial de tráfico y la menor competencia y equilibra estos dos factores.
    • Títulos y descripciones de las páginas: ¿Tienen todas las plantillas los títulos de página y los metadatos necesarios basados en tu investigación de palabras clave? Cuando te centres en una palabra clave en particular, intenta ponerlas al frente de las descripciones y considera usar tanto la forma singular como la plural.
    • Etiquetas Alt de las imágenes: ¿Las imágenes principales del sitio contienen etiquetas alt relevantes y descriptivas? El uso de descripciones cortas ayudará. Y recuerda que debes elegir un nombre de archivo descriptivo en lugar de palabras y números al azar para estas imágenes.
    • Palabras clave: Incorpóralas en los títulos, las descripciones y los textos.
    • Contenido: Si el contenido es bueno, funcionará para optimizar y complementar el SEO. Una buena densidad de palabras clave dentro del texto funciona bien, así que utiliza tanto formas singulares como plurales de palabras clave en tu texto. No sobrecargues el contenido ni lo pienses demasiado, hazlo de forma natural y solo añade cuando y si es relevante. Los motores de búsqueda también prefieren páginas de contenido más largas, así que intenta que el contenido tenga más de 300 palabras, pero céntrate más en la calidad que en la cantidad.
    • URLs: Asegúrate de que las URL del sitio están limpias. El uso de una URL descriptiva en lugar de una compuesta por números o palabras al azar ayudará a la optimización de motores y a que los visitantes encuentren una página a la que quieran volver, y considera la posibilidad de incluir una palabra clave en la URL si es relevante.

    Análisis

    No importa lo pequeño que sea un sitio, tener el análisis web en funcionamiento te permitirá obtener información valiosa sobre cómo mejorar tu sitio web en el futuro..

    • Seguimiento: Con un buen SEO en marcha, utiliza códigos de seguimiento para medirlo. Herramientas como Google Analytics (gratuitas) o servicios como Hubspot, GoSquared o KISSmetrics (de pago) proporcionarán información valiosa.

    Seguridad

    Es posible que tengas muchas cosas que no quieres que el mundo conozca. Por ejemplo, los medios cargados por los usuarios o los datos de las tarjetas de crédito de los compradores.

    • Protege las páginas sensibles: Protege las páginas o carpetas sensibles para que no se indexen en los motores de búsqueda colocando archivos robots.txt y excluyéndolas desde las Herramientas para webmasters de Google. Considera también si necesitas utilizar un archivo .htaccess para desactivar la vista de carpetas dentro de los directorios.
    • Certificados de seguridad: Cuando se desarrolla un sitio web de comercio electrónico, o un sitio que maneja información sensible de los visitantes, el nivel de seguridad será primordial. Asegúrate de utilizar protocolos como el cifrado SSL para protegerte del robo de información no deseado. También se ha demostrado que mostrar sellos como TRUSTe, puede aumentar la credibilidad de un sitio.

    Hosting y copias de seguridad

    Encontrar un proveedor de hosting web puede ser difícil y saber lo que necesitas puede ser aún más difícil de entender. Hay muchas opciones y planes de precios entre los que elegir, pero asegúrate de escoger un proveedor que satisfaga tus necesidades, no uno que ofrezca más de lo que necesitas pagar.

    • Tipos: Hosting compartido, hosting para revendedores, hosting en la nube, hosting VPS y servidores dedicados. ¿No estás seguro de lo que significan? Entonces lee estos consejos rápidos.
    • Copias de seguridad: Asegúrate de utilizar un proveedor que te proporcione copias de seguridad diarias y semanales de tu servidor y asegúrate de realizar también copias de seguridad locales.
    • Monitorización: Configura servicios como Pingdom u otras herramientas de monitorización de servidores para controlar la salud de tu servidor.

    Legal

    Antes de empezar cualquier proyecto, debe haber un contrato firmado. El contrato debe describir claramente los resultados y procesos del proyecto para que ambas partes tengan claro al 100% lo que se conseguirá como resultado final. Como parte de ese contrato, asegúrate de que se ha acordado lo siguiente para cubrir cualquier circunstancia imprevista.

    • Derechos de imagen/contenido: Indica claramente que cualquier contenido o imagen suministrada por ti sigue siendo responsabilidad del cliente. Deja claro que no te responsabilizarás de la publicación de contenidos e imágenes sobre los que no tienen derechos. Asimismo, enseña al cliente que debe utilizar imágenes o contenidos pagados o con derechos de uso.
    • Términos de pago: Establece unas condiciones de pago justas y escalonadas en hitos claramente definidos de un proyecto (al final de la fase de diseño, antes de que comience el desarrollo, por ejemplo), y no pases nunca a la siguiente fase de un proyecto hasta que no hayas recibido el pago acordado.
    • Plazos: Establece plazos razonables que sean justos para tu cliente y manejables para ti y tu equipo. Declara claramente que no serás responsable de ninguna pérdida o daño como resultado de un retraso en el calendario causado por el cliente. Es una buena idea utilizar algo como Basecamp para gestionar tus proyectos, de modo que todo el trabajo y las conversaciones queden registradas por si las necesitas en el futuro.
    • Derechos de propiedad intelectual: Esto será diferente dependiendo de quién seas, de lo que ofrezcas o del proyecto en cuestión. Establece claramente lo que te pertenece a ti y al cliente una vez que el proyecto se haya completado y el pago se haya realizado en su totalidad. Considera los derechos de cualquier software o código escrito por ti que no quieras vender, o cualquier cosa similar de la que creas que debes conservar los derechos.

    Resultados

    En el contrato del proyecto se explica claramente lo que el cliente recibirá físicamente una vez terminado el proyecto. Lo que recomendamos es lo siguiente.

    • Sitio web en vivo: Esto es lo mínimo. Asegúrate de que su sitio web esté activo y funcione como es debido.
    • Guía de estilo: Una simple guía de estilo es extremadamente beneficiosa para cualquier propietario de un sitio web, los puntos a considerar incluyen:
      • Estilos de fuente
      • Tamaños de imagen
      • Tono de voz
      • Colores
      • Estilo de las imágenes
      • Colores
    • Activos e iconos: Todos los iconos, ilustraciones o infografías diseñados y creados para el sitio web pueden ser útiles para tu cliente en el futuro. Facilítales los archivos en diferentes formatos para que puedan utilizarlos en presentaciones o futuros trabajos de diseño.
    • Copia fuera de línea: Si el cliente lo solicita, proporciona una copia del sitio. Recuerda que los sitios web son un documento vivo que debe actualizarse y mejorarse continuamente, por lo que, a menos que el sitio sea estático, tendrás que hacer copias de seguridad fuera de línea regularmente para el cliente.

    ¿Cuándo lanzarlo?

    Recuerda: no entregues nunca un proyecto o unos expedientes sin haber firmado y sin haber liquidado los pagos pendientes. No tendrás vuelta atrás en este punto si lo haces sin ninguna de estas cosas. Entregar un proyecto sin pagar es el equivalente a que el dueño de una tienda deje salir a un cliente con un carrito lleno de productos con la promesa de que "le pagará más tarde".

    Ahora que todo está en su sitio, estás listo para lanzarlo. Pero, ¿cuándo deberías hacerlo? Hacemos todo lo posible para no lanzar un sitio en los dos días siguientes al fin de semana. A veces, esta práctica tiene que ser descartada, pero siempre intentamos que el lanzamiento sea de lunes a miércoles. De este modo, se pueden eliminar los errores que surjan durante la semana de trabajo. Tratar de arreglar esto durante un fin de semana en el que ni tú ni tus desarrolladores están cerca solo te causará dolores de cabeza cuando tengas un cliente que necesita que su sitio sea completamente funcional. Confía en nosotros, solo aprenderás por las malas si no adoptas este enfoque.


    Mantenimiento continuo

    Así que haz lanzado el sitio, está funcionando muy bien y el cliente está contento, ¿ahora qué? Tienes que asegurarte de que sigue funcionando sin problemas. Las cosas pueden salir mal o fallar, la seguridad del servidor puede verse comprometida o puede caerse. Asegúrate de estar preparado para cualquier eventualidad.

    • Copias de seguridad: Siempre, siempre, asegúrate de que hay copias de seguridad. Realiza al menos dos copias de seguridad diarias, una por la mañana y otra 12 horas después, para limitar la cantidad de datos que pueden perderse.
    • Control de versiones: Prueba a ejecutar un proyecto a través de Git, es un gran sistema de control de versiones para equipos de desarrolladores que trabajan en colaboración. El historial del código fuente se guarda, lo que significa que puedes consultar o volver a versiones anteriores cuando lo necesites. Para una introducción a Git lee este artículo en profundidad Easy Version Control with Git.
    • Análisis: Para poder sugerir mejoras en el futuro, pide que te incluyan en el sistema de análisis del cliente, de esta manera puedes monitorear el tráfico y las estadísticas del sitio para el cliente y sugerir mejoras durante el siguiente mes y año después del lanzamiento.

    ¿Algo más?

    Si tienes algún punto adicional que crees que debería añadirse a la lista, ¡menciónalo en los comentarios!

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.