Al final de este tutorial, tendrá un borrador de servicio de una página con un orden claro, imágenes utilizables, una ruta de contacto sensata y una lista de verificación que realmente puede probar. Puede ensamblarlo en su creador de sitios web existente o utilizar el plantilla inicial editable HTML suministrado con esta guía.
Usaremos un servicio ficticio de organización de cocinas. Su nombre, oferta e ilustraciones son material de práctica, no una historia real de un cliente. Reemplace cada ejemplo con datos sobre su propio trabajo antes de publicarlo.
Necesita un editor de texto o un documento de notas, el creador de su sitio web o el archivo de inicio y un navegador. Una fotografía aprobada es suficiente para empezar. Si no tienes una, utiliza la ilustración etiquetada para practicar en lugar de fingir que muestra tu trabajo.
1. Escribe el trabajo de la página en una oración.
Utilice esta forma:
"Esta página ayuda a [persona] a comprender [oferta específica] y [el siguiente paso]".
Nuestro ejemplo:
"Esta página ayuda al propietario a comprender una visita para organizar la cocina y a preguntar si se adapta a su espacio".
Mantenga esa oración al lado de la página mientras construye. Para este ejercicio, omita los servicios no relacionados. Puede vincularlos en otro lugar más adelante.
Elija un siguiente paso que realmente pueda apoyar. Una consulta es diferente de una reserva confirmada. Usaremos "Preguntar sobre el restablecimiento de la cocina", porque la disponibilidad y el alcance aún necesitan una conversación.
2. Escribe seis secciones antes de decorarlas.
Abra un documento y agregue estos títulos en este orden. Rellénelos con sus propias palabras o use la copia ficticia a continuación para practicar cómo armar la página.
Sección 1: La oferta
Titular: "Haz que tu cocina sea más fácil de usar".
Explicación: “Una visita organizativa enfocada para ayudarlo a clasificar los artículos cotidianos de la cocina y elegir lugares prácticos para las cosas que usa”.
Botón: "Preguntar sobre un reinicio de la cocina".
Breve expectativa al lado del botón: "Empiece con una pregunta. Los detalles de la cita se acuerdan por separado".
El titular debería decir algo concreto. Si el tuyo puede describir igualmente bien a un preparador físico, un contable y una tienda de muebles, hazlo más específico.
Sección 2: Qué está incluido
Título: “En qué trabajamos juntos”.
Tres balas:
- Identifique las áreas de la cocina que causan mayor frustración.
- Clasifique los elementos acordados y decida cuáles deben estar juntos.
- Organice los artículos cotidianos en lugares que se ajusten a su uso de la habitación.
Límite: "Este ejemplo cubre los servicios de organización, no de limpieza, reparación o eliminación".
Reemplace la lista y el límite con su alcance real. No prometas un servicio porque el ejemplo lo incluye.
Sección 3: Algo que el visitante pueda evaluar
Título: “Una forma sencilla de explicar el enfoque”.
Utilice una imagen aprobada con un título útil. En la página de práctica, una ilustración de estante etiquetada muestra tres grupos: uso diario, uso ocasional y revisión conjunta. Explica la idea sin pretender ser un proyecto terminado.
Si tiene una foto real del proyecto, explique qué es visible y qué trabajo realizó realmente. Si no tiene ningún ejemplo con permiso autorizado, muestre su proceso en su lugar. No inventes un testimonio o un resultado de antes y después para llenar el espacio.
Sección 4: ¿Qué sucede a continuación?
Título: “De la pregunta al plan”.
Tres pasos:
- Describe el espacio y el tipo de ayuda que deseas.
- Analice el alcance, la ubicación, el momento y el costo.
- Confirmar la visita acordada antes de reservarla.
Tus pasos reales pueden diferir. Manténgalos lo suficientemente breves para que los siga un visitante nuevo.
Sección 5: Las preguntas prácticas
Comience con tres preguntas: ¿Dónde está disponible? ¿Qué afecta el costo? ¿Necesito comprar algo primero?
Respóndelas utilizando tus arreglos reales. En la página de ejemplo, estos están visiblemente marcados como elementos para completar, porque una ubicación ficticia o un precio inventado haría que la plantilla fuera menos confiable.
Para una empresa de Hawái, es posible que la respuesta de ubicación deba distinguir una isla, un área de viaje real y un trabajo remoto. Para un servicio en el área de Atlanta, es posible que necesite un límite de viaje realista o un acuerdo de recogida. Escriba la información que cambia si alguien puede utilizar el servicio.
Sección 6: El paso de contacto
Repita la misma acción siguiente desde la apertura. Di qué información es útil y cómo la persona se comunicará contigo.
Para este ejercicio, comience con una dirección de correo electrónico comercial supervisada que pueda publicar. Puede agregar un formulario configurado correctamente más adelante. No recopile documentos o información confidencial simplemente porque su creador ofrece un campo de carga.
3. Ensamble primero una columna
En su creador, cree una página no publicada con esas seis secciones en el mismo orden. Utilice su documentación actual para localizar secciones, niveles de encabezado, configuraciones de imagen y controles de vista previa; sus nombres varían según el producto y la versión.
Si está utilizando el plantilla inicial suministrado, mantenga landing-page-starter.html y la carpeta de activos juntos. Abra el archivo HTML en un navegador para obtener una vista previa. Abra el mismo archivo en un editor de texto sin formato para cambiar el texto de ejemplo entre las etiquetas de contenido, guárdelo y actualice el navegador. No se requiere instalación de paquete, cuenta o comando de compilación.
Comience con un ancho estrecho. Para este ejemplo, utilice estas opciones de diseño:
- Una columna, con 20 píxeles de espacio entre el contenido y cada lado.
- Texto del cuerpo de alrededor de 18 píxeles, con una altura de línea de 1,55.
- Un titular que se ajusta de forma natural en lugar de forzarlo a ocupar una sola línea.
- Aproximadamente entre 40 y 64 píxeles entre secciones principales.
- Un botón sólido y de alto contraste de al menos 44 píxeles de alto, con suficiente espacio para que se ajuste la etiqueta.
- No hay cuadros de altura fija alrededor de los párrafos.
Estos son valores iniciales para este diseño, no estándares universales ni una certificación de accesibilidad. Si el contenido se siente apretado, ajuste el espaciado antes de reducir el texto.
Utilice un título de página principal y títulos descriptivos para las siguientes secciones. Elija niveles de encabezado para la estructura y luego diseñelos. W3C's tutorial de encabezados explica por qué esa organización es importante para la navegación, incluida la tecnología de asistencia.
4. Prepare una imagen que sobreviva a una pantalla pequeña.
Para la imagen de práctica, utilice la ilustración de 1600 × 1000 SVG incluida. Se escala sin necesidad de una fotografía grande. Para su propia foto, comience a partir de un original para el que tenga permiso de uso y haga una copia web separada. Conserva el original.
Una primera exportación práctica para este ejemplo es 1600 × 1000 píxeles, una proporción de 1,6:1. Eso se ajusta a un área de imagen de alrededor de 800 píxeles de ancho con el doble de esa densidad de píxeles. Es un cálculo inicial, no un tamaño requerido para cada sitio web.
Recortar deliberadamente. Mantenga el sujeto importante alejado del borde y luego obtenga una vista previa de la imagen al ancho del teléfono. No estire un retrato hasta convertirlo en un rectángulo ancho. Elija un recorte diferente o deje que la imagen conserve su forma.
Para fotografías, exporte un WebP o JPEG comprimido si su creador lo admite. Compare el resultado con el original en el tamaño que verán los lectores. Un presupuesto de trabajo de aproximadamente 150 a 300 KB para esta única imagen es un objetivo inicial útil, no una regla de aprobación/rechazo. Las necesidades de detalle y calidad varían. Si un archivo tiene varios megabytes, pruebe con dimensiones más pequeñas y una compresión más fuerte, luego inspeccione nuevamente.
Configure la imagen para que se ajuste al ancho disponible conservando sus proporciones. En HTML, el plantilla inicial utiliza un ancho máximo del 100%, alto automático y atributos explícitos de ancho y alto. Esas dimensiones ayudan al navegador a reservar espacio. de google guía de imagen responsiva explica este comportamiento y la diferencia entre ajustar y recortar una imagen.
Escribe el texto alternativo de lo que comunica la imagen. Para la ilustración proporcionada: "Un diseño de estante de práctica agrupa artículos en uso diario, uso ocasional y un grupo para revisar juntos". El título cercano dice claramente que es una ilustración. No ocultes el nombre del servicio, el precio o el botón dentro de una imagen.
5. Haga que el paso de contacto funcione antes de agregar más funciones.
Los botones del plantilla inicial se mueven a la sección de contacto. No envían un mensaje ni crean una cita. La sección de contacto contiene deliberadamente un marcador de posición visible [SU CORREO ELECTRÓNICO COMERCIAL] para que no pueda confundirlo con una dirección comercial laboral.
Reemplace ese marcador de posición con su dirección monitoreada. Para un enlace de correo electrónico en el que se puede hacer clic, utilice la misma dirección en el texto visible y en el destino del correo electrónico del enlace. Mantenga la dirección legible para que alguien pueda copiarla si su dispositivo no tiene una aplicación de correo electrónico configurada.
Si en su lugar utiliza un formulario, configure su destinatario y cualquier configuración de entrega requerida siguiendo las instrucciones actuales de ese proveedor. Asigne a cada campo una etiqueta visible, explique los errores y muestre un mensaje de finalización claro. Luego envíe una prueba etiquetada y autorizada utilizando su propia información y verifique que llegue a la bandeja de entrada deseada. Una página que diga "Gracias" no prueba la entrega.
No coloque un formulario que aparentemente funciona en la página cuando aún se desconoce su destino. W3C's orientación de formularios es una referencia útil para etiquetas, campos necesarios y comentarios.
6. Deja que la versión más ancha crezca a partir de la estrecha.
Ahora aumente el ancho de la vista previa. La versión de escritorio puede colocar el texto de una sección junto a su ilustración y mostrar los tres pasos del proceso uno al lado del otro. Mantenga el orden de lectura lógico cuando esas áreas se apilen nuevamente.
En la plantilla inicial, una consulta de medios CSS introduce diseños más amplios a 48 rem, aproximadamente 768 píxeles con el tamaño base habitual de 16 píxeles. Ese punto de interrupción se adapta al contenido de este ejemplo. Si su título o navegación más extenso necesita más espacio, cambie el diseño donde el contenido lo necesite en lugar de apuntar a un modelo de teléfono.
El plantilla inicial incluye una configuración de ventana gráfica de ancho de dispositivo y utiliza anchos fluidos. MDN guía de diseño responsivo explica las funciones de la ventana gráfica, los diseños flexibles y las consultas de medios.
7. Ejecute esta verificación de pasa/falla
Abra la vista previa real en un navegador, no solo en el lienzo del editor. Marque cada verificación Pasa, Corregido o No aplicable.
- Significado: ocultar la imagen. ¿Aún puedes identificar el servicio, la audiencia y el siguiente paso?
- Pantalla estrecha: con 320 y 390 CSS píxeles de ancho, ¿puedes leer el contenido de una página normal sin desplazarte hacia los lados? ¿Se ajustan las etiquetas de los botones y los datos de contacto largos?
- Zoom: aumenta el zoom del navegador. En una ventana gráfica de 1280 píxeles de ancho, verifique el zoom del 400% como ejercicio de reflujo. El texto y los controles esenciales deberían permanecer disponibles sin desplazamiento bidireccional para este diseño simple. W3C's guía de reflujo explica la relación de 320-CSS-píxeles y las excepciones.
- Teclado: utilice Tab, Shift+Tab y Enter. ¿Puedes ver el control enfocado y seguir cada enlace? ¿El enlace para saltar llega al contenido principal?
- Imágenes: confirme que la imagen se carga, el recorte mantiene al sujeto, el título es preciso y el texto alternativo transmite información útil.
- Contacto: confirma que el botón llega al lugar correcto. Si utiliza un formulario, verifique la recepción de una prueba. Si utiliza un enlace de correo electrónico, verifique el destino sin enviar un mensaje no deseado.
- Hechos: busque en la página y en la fuente los corchetes, "ficticio", "práctica" y "ejemplo". Reemplace o conserve intencionalmente todas las etiquetas de capacitación. No publique alcance, ubicación, precio o pruebas inventadas.
- Teléfono: consulte la página en un teléfono real cuando sea posible. Léelo en tamaño normal y ampliado; prueba el siguiente paso.
Esta es una primera revisión útil, no una auditoría completa de accesibilidad, seguridad o lanzamiento. Anota cualquier cheque fallido con la sección y el resultado que esperabas. Arregle esos elementos y repita las pruebas pertinentes.
Lo que deberías tener ahora
Debe tener un borrador privado completo: seis secciones en un orden deliberado, una imagen que se ajuste, una ruta de contacto que esté probada o claramente marcada como inacabada y un resultado de prueba registrado.
Guarde una copia antes de realizar más cambios. Si aún necesita trabajo, la lista de verificación le dirá qué. No es necesario agregar una animación, un boletín informativo o cinco páginas más para que este ejercicio valga la pena.