-
¿Cómo podemos hacer que el sitio web sea mejor, más adecuado para los estándares del W3C y que tenga una buena experiencia de usuario? Este es un problema al que se enfrentan muchos productores de páginas web, y también es algo que todo el mundo quiere saber. El webmaster de Netgather ha llegado a los siguientes resultados. En el trabajo práctico a largo plazo, espero que pueda ser útil para todos. Por favor critique y corrija cualquier deficiencia.
1. Comprender la temática del sitio web, aclarar el contenido que se muestra en el sitio web y la mayoría de los grupos de navegación.
Si desea crear un sitio web que sea útil para los usuarios, primero debe considerar el contenido y las funciones del sitio web. ¿Qué necesitan los usuarios durante todo el diseño? Todo debería hacerse en torno a este aspecto. Si los usuarios no pueden obtener lo que quieren rápidamente, o su sitio no es fácil de usar, entonces el sitio es un fracaso. Los usuarios se sentirán decepcionados y es posible que nunca vuelvan a iniciar sesión en su sitio web. Un pequeño ejemplo: si desea crear un sitio web de acciones, pero el tamaño de fuente del sitio web es de 12 píxeles, piénselo, la cantidad de personas mayores que se jubilan en casa y especulan con acciones no es pequeña, incluso si su sitio web El contenido no importa cuán bueno o incisivo sea, es imposible para ellos acercar una lupa al monitor y mirar su sitio web. El resultado será simplemente que perderá una gran cantidad de usuarios.
2. Combinación de colores razonable
Para un diseñador web, el proceso de diseño es a la vez doloroso y alegre. Después de determinar qué tipo de sitio web desea crear, tendrá que pasar por un proceso de selección de colores y diseño para reflejar el tema de manera más razonable. Personalmente, creo que si no estás creando un sitio web súper personalizado, la combinación de colores no es una tarea difícil. Primero, identifica el color principal. De hecho, las características del color de la industria no son muy importantes. Es solo la percepción que la gente tiene de una industria la que crea la relación entre la industria y la combinación de colores. Por ejemplo, si está creando el sitio web de un hotel, por supuesto que no puede ser rojo. ? En realidad, todo se reduce a la percepción de la gente, porque ambos pensábamos que el rojo era un color festivo y, por tanto, inadecuado para una funeraria. Por ejemplo, el azul es generalmente mejor para sitios web tecnológicos o basados en tecnología, el rosa es mejor para sitios web femeninos, etc. En segundo lugar, los colores auxiliares y los colores de acabado para confirmar el color principal de un sitio web también son necesarios. Los colores auxiliares utilizan principalmente la misma combinación de colores y combinaciones de colores adyacentes. La misma combinación de colores se obtiene cambiando la transparencia, saturación, aclaración u oscurecimiento del color principal. La combinación de colores adyacentes se basa en el color principal tomando colores adyacentes en la rueda de colores, como el rojo y el naranja. El color de acabado generalmente es bastante diferente del color principal. Generalmente se usa en el contenido o botones más importantes de la página web. Su función es atraer la atención del usuario y eliminar la fatiga visual de la página web. Es razonable evitar demasiada apariencia, de lo contrario será contraproducente.
3. Buen diseño web
Los elementos que se deben tener en cuenta en el diseño de una página web son prioridades claras, coordinación y orden, respeto por los hábitos visuales de los usuarios y una disposición razonable del contenido. Muestre primero lo que los usuarios quieren tanto como sea posible y preste atención a los posibles comportamientos de orientación de los usuarios. Como dice el refrán: Una buena memoria no es tan buena como un mal bolígrafo Al diseñar la interfaz de un sitio web, primero debemos usar un lápiz para dibujar el diseño del sitio web y luego usar un software de dibujo para crearlo y modificarlo después de lograrlo. efecto deseado. Los detalles determinan el éxito o el fracaso en las representaciones del diseño, utilice la menor cantidad posible de bloques de color grandes, resalte la navegación y tenga secciones claras para lograr un efecto limpio, conciso, ordenado y coordinado. Por ejemplo, la barra de navegación debe agregarse apropiadamente con un efecto de mouse; las líneas de la página web deben evitar demasiada diferencia de color; el contorno y la sombra no deben ser demasiado obvios, si están presentes o no, es lo mejor; imágenes y textos; el espacio entre las secciones de la página web debe ser razonable y uniforme; los estilos de texto del mismo nivel deben estar unificados y se deben respetar las características físicas de la vida diaria (por ejemplo, la luz se vuelve más brillante). por un lado y más claro por el otro, o como una cinta que envuelve un objeto, el punto de giro debe sobresalir ligeramente y tener una sombra sutilmente redondeada)...
Una vez confirmada la producción de las representaciones de la página web, comenzaremos la producción de la página html.
4.Título y meta de la página web
El título y el meta de la página web deben basarse en las columnas básicas y las páginas de contenido. No utilice el mismo formato para todo el sitio. No es necesario agregar palabras clave, lo que evita que la etiqueta del encabezado tenga poco efecto. apilamiento de palabras clave.
5.Uso de etiquetas h1-h6
La etiqueta h1 de una página web solo se puede utilizar una vez. En la página de inicio, la página del canal y la página de lista de un sitio web, la etiqueta h1 se puede utilizar para el nombre del sitio web, el nombre del canal y el nombre de la lista de columnas, respectivamente. Sin embargo, en la página de detalles del artículo de un sitio web, la etiqueta h1 debe. utilizarse en el título del artículo. Las etiquetas h2-h6 se pueden usar repetidamente en una página, cumpliendo a su vez con la jerarquía del sitio web.
6.Archivos CSS
Intente importar archivos CSS desde el exterior mediante enlaces y escriba un reset.css que utiliza con frecuencia para restablecer el estilo CSS. Evite el uso de *{}. Escriba un estilo en una línea para reducir el tamaño del archivo. Intente utilizar definiciones de clase y reduzca las definiciones de identificación. Intente evitar técnicas de pirateo de CSS para diferentes navegadores.
7.Optimización de imágenes de fondo.
Además del contenido real del sitio web, las imágenes utilizadas en el marco deben definirse en el archivo CSS tanto como sea posible. De acuerdo con la situación real, las imágenes de fondo deben fusionarse tanto como sea posible para mejorar la velocidad de carga. Es mejor no colocar una imagen muy pequeña en un área más grande.
Diseño 8.div+css para reducir el anidamiento de páginas
El propósito de utilizar el diseño div+css es reducir el código de la página, hacer que la estructura del sitio web sea jerárquica y separar el contenido y la presentación. Reducir el anidamiento no sólo es amigable para los motores de búsqueda, sino que también ayuda a reducir el tamaño de la página y facilita el mantenimiento y las modificaciones posteriores.
9. Optimizar la página js
Los archivos JS que se pueden fusionar se fusionan en uno, lo que reduce los bucles a gran escala y las referencias jerárquicas excesivas, y mejora la velocidad de carga y ejecución.
10. Evite enlaces inactivos y conexiones vacías
Qué frustrante sería para los usuarios si al hacer clic en un artículo que querían solo se abriera "Esta página no se puede mostrar".
11. Texto y gráficos apropiados
No llenes deliberadamente tu sitio web con imágenes. Los motores de búsqueda no reconocen imágenes excepto el atributo alt. Agregar imágenes en ubicaciones adecuadas puede ayudar a atraer visitantes y eliminar la fatiga de leer textos largos.
12. Requisitos para imágenes de páginas web
Agregue atributos alt y atributos de ancho y alto a las imágenes de la página web. No comprima las imágenes deliberadamente para garantizar que la visualización de la imagen no se deforme.
13. Pruebe su sitio web en diferentes navegadores.
Para permitir que más personas naveguen por su sitio web normalmente, pruebe su página con diferentes navegadores convencionales para asegurarse de que su sitio web pueda funcionar normalmente.
14. Pasó la verificación W3C.
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
Espacio personal del autor tomate.