Los sitios web estáticos son páginas web preconstruidas que muestran el mismo contenido a cada beneficiario del sitio web. A diferencia de los sitios web dinámicos, no hay una cojín de datos de back-end que sirva contenido personalizado basado en lo que hacen los usuarios.
Esto significa que los sitios web estáticos tienen tiempos de carga más rápidos, alojamiento más de lance, seguridad más simple y menos responsabilidades de mantenimiento que un sitio dinámico.
Aunque el contenido en un sitio suspenso es de contenido “fijo”, no tiene que ser inmóvil o cansado. Todavía puede unir formularios, videos y género. Por supuesto, hay limitaciones con sitios estáticos, pero los desarrolladores inteligentes generalmente pueden encontrar soluciones para obtener exactamente lo que quieren.
Echemos un vistazo de cerca a nueve ejemplos de sitios web estáticos que son extremadamente efectivos para una variedad de casos de uso comercial.
En cada ejemplo, llamaré al magneto de sitios suspenso o al constructor de sitios web utilizado en cada ejemplo y resaltaré fundamentos de página específicos para servir como inspiración.
Nota: Los principiantes no tendrán problemas para crear un sitio web suspenso simple con un creador de sitios web. Todo es punto y clic, no necesitará codificar nulo.Hay mucho más que conocer si desea crear un sitio arduo utilizando un magneto de sitio suspenso.
1. Freelancer Sitio web suspenso Ejemplo: Sophie Brittain
Construido con Wix
Sophie Brittain, una diseñadora de productos independiente en la ciudad de Nueva York, tiene un sitio web suspenso pulido que muestra su trabajo y facilita la comunicación.
El sitio es súper simple. Estamos hablando de dos páginas, cuatro colores, un par de género de mouseover y menos de 500 palabras en total.
Pero no descuido nulo.
El enfoque del sitio es su trabajo pasado, que se captura en imágenes de incorporación calidad. No hay nulo inventivo en la forma en que se organiza, pero está claro que ha completado proyectos de diseño exigentes para grandes marcas.
Echamos un vistazo muy cercano al sitio web de los trabajadores independientes que contratamos en Bread Sprout. Tal vez echaramos un vistazo a un currículum (tal vez), pero estamos al 100% revisando el sitio web de cualquier escritor, diseñador, desarrollador u otro rol de entendimiento que necesitamos para cumplir.
Si es un desarrollador de pila completa, un sitio dinámico es una excelente guisa de mostrar sus habilidades.
Para cualquier otra persona, los fundamentos de página complejos probablemente se enfocarán en su trabajo.
2. Ejemplo de sitio web suspenso educativo: CSS innovador
Construido con Altuito
CSS innovador es un sitio web suspenso con toneladas de tutoriales y guías para desarrolladores web. Está construido y mantenido por Stephanie Eckles, una ingeniera/educadora con pasión por el avance primero.
La evidencia de la tiento de Stephanie con CSS está en todas partes en este sitio, desde el diseño único de los tutoriales individuales hasta los género de Mouseover destacado. Ella obviamente sabe sus cosas.
En las lecciones más profundas en las lecciones, encontrará contenido bellamente arreglado que explica exactamente cómo distraer la apariencia deseable del sitio web para usted.
Hay algunos anuncios perfectamente ubicados en este sitio, que probablemente proporcionan un poco de ingresos. Pero con los sitios web de educación, generalmente es el contenido pagado (cursos y otros activos digitales) que generan ingresos.
En ese sentido, el CSS innovador es efectivamente un destacado ya que todo el contenido es gratis. Guau. Recomiendo insistentemente verlo si planea hacer alguna codificación manual en su sitio suspenso.
3. Ejemplo de sitio web suspenso de cartera: Johannes Arnold
Construido con PAG.
Los sitios web estáticos son un excelente hogar para las carteras. En nuestro ejemplo destacado, el fotógrafo Johannes Arnold muestra con éxito su trabajo manteniendo el sitio claro y factible de navegar.
Me gusta que no tenga una página separada para su cartera: la página principal es. Puede hacer clic en las imágenes e ir a una página separada con una salón más noble para cada esquema.
No hay distracciones de la fotografía de Johannes. Las imágenes y algunos videos son lo único que rompe el espacio en blanco. Sin colores, género de fondo, ni otros fundamentos de página para interponerse. El único texto más grande que un subtítulo está en su página sobre mí.
Para algunos diseñadores web, tal vez el sitio web es La cartera donde muestra exactamente lo que puede hacer.
Pero para la gran mayoría de las personas que intentan compartir su trabajo, el sitio web es solo el estante que muestra el trabajo pasado. Un estante simple está perfectamente: quieres que las personas se concentren en tu cartera, no en el sitio.
4. Ejemplo de sitio web suspenso multilingüe: Vamos a abreviar
Construido con Hugo
Paciencia, ¿no son malos los sitios estáticos si quieres tener más de un idioma?
Sí, diría que la mayoría de las veces no será su opción más factible. Pero digamos que tiene un montón de tráfico de todo el mundo y desea un sitio web suspenso multilingüe, es complicado, pero se puede hacer.
Let’s Encrypt es una autoridad de certificado que proporciona certificados SSL automatizados y gratuitos para más de 300 millones de sitios web en todo el mundo.
Ahora, cuando tiene que proporcionar un servicio esencial utilizado por millones de personas, necesita un sitio web que pueda subir, un sitio suspenso simple tiene mucho sentido.
Conociendo las dificultades, encrypt trabajamos con el magneto de sitios suspenso Hugo para crear un sitio web suspenso multilingüe. Puede ver los resultados para ver cómo lo hicieron.
Hay un timbre de idiomas con un icono intuitivo que proporciona un menú desplegable de 27 idiomas diferentes.
Al hacer clic en la traducción, simplemente lo dirige a una nueva página (letsencrypt.org/ko, por ejemplo, para coreano) que presenta el mismo sitio pero en el idioma deseado.
Abreviar en ciframos gastaría mucho más hacienda y tiempo en un sitio dinámico. Como una ordenamiento sin fines de interés con un destino en cadena increíblemente de stop tráfico, usar un sitio suspenso más delgado y competente es definitivamente el camino a seguir.
Trabajando con Hugo, Cifrypt pudo suministrar el sitio suspenso que todos amaban y hacerlo accesible para millones más de personas.
5. Ejemplo de sitio web suspenso empresarial: Contenedor de Martin
Construido con Gatsby
Contenedor de Martin Traspaso, alquileres y arriende recipientes de almacenamiento refrigerados y secos en la costa oeste de los EE. UU. Utilizan un sitio web suspenso para atraer a nuevos clientes.
La compañía desarrolla credibilidad de las formas habituales al mostrar su producto y Usando testimonios de clientes felices.
No hay nulo lujoso, pero está un paso por encima de lo principal. No es solo una foto de un trailer, es una salón corta que permite a la familia verla desde múltiples ángulos. Hay nueve logotipos de los principales clientes y cuatro testimonios escritos para hacer clic.
Esta no es una cantidad escandalosa de contenido para alimentarse en un magneto de sitios estáticos. Su negocio ciertamente no necesita múltiples ubicaciones o medio siglo en negocios como Martin Container para poder poner algunas docenas de imágenes y un puñado de testimonios de clientes.
Es un error pensar que necesita un diseño provocativo para hacer un sitio web atractivo. Solo necesitas arribar a los fundamentos y mantenerlo expedito.
6. Ejemplo del sitio web suspenso de la agencia: Wieden Kennedy
Construido con Gatsby
Wieden KennedyEl hércules de la publicidad con clientes como Nike, McDonalds, FIFA tiene un sitio web animado construido con Gatsby.
La sección completa de en lo alto es un video que resalta su zaguero trabajo, y a medida que se desplaza en dirección a debajo, hay más fundamentos animados de página y género de mouseover.
La página de inicio de WK es un gran ejemplo de un sitio web suspenso con mucho movimiento. Sí, cada beneficiario obtendrá la misma experiencia (es afirmar, no hay nulo dinámico), pero está muy remotamente de lo que muchas personas piensan que un sitio web suspenso puede hacer.
Anejo con las animaciones y los género, hubo una serie de otros detalles que pensé que funcionaban muy perfectamente. Por ejemplo, WK tiene sus ubicaciones de oficina en el pie de página con relojes en vivo que muestran la hora restringido. ¿Notó los relojes oscurecidos para las ubicaciones que están fuera del horario comercial?
7. Ejemplo de sitio web suspenso sin fines de interés: Democracia digital
Construido en: Broma
Democracia digital es una ordenamiento sin fines de interés “trabajando en la intersección de los derechos y la tecnología humanos”.
Su sitio web muestra lo que han hecho, comparte sus herramientas y facilita que las personas se involucren.
La evidencia de su trabajo pasado se captura en fundamentos de página simples: imágenes de incorporación resolución, bloques de texto concisos, números gigantes que llaman la atención sobre “70 proyectos en 38 países”.
Hay múltiples opciones para donar o unirse a la comunidad. Con todo el espacio en blanco y el esquema de color simple, los ordenanza de donación naranja homogéneo se destacan sin ser molestos.
Es importante capitalizar estos pequeños momentos en los que cualquiera rebusca en Google el nombre de una ordenamiento o termina en su sitio a través de las redes sociales.
La familia quiere ser parte de poco auténtico. Muéstreles exactamente lo que ha hecho la ordenamiento sin fines de interés y en dirección a dónde se dirige. No se necesitan adornos: una ordenamiento sin fines de interés no apetencia puntos de abono por pagar bienes en un sitio web elegante.
8. Ejemplo de sitio web suspenso de la compañía SaaS: Cipress.io
Construido sobre Figura
Cipress.iouna compañía de prueba front -end, clava los fundamentos y le da un rotación único a su producto utilizando un sitio suspenso.
¡Pero Lars! Hay una opción de chatbot en este sitio, ¿cómo es eso en un sitio web suspenso?
Bueno, si inspecciona el pájaro, encuentra que es un iframe, lo que significa que el chatbot está efectivamente en otro sitio web (dinámico) que procesa las entradas de los visitantes. Otra “acotación” de sitios estáticos que los desarrolladores pueden trabajar con harto facilidad.
Anejo con el chatbot, Cypress.io tiene todas las fijaciones que uno calma de un sitio web SaaS organizado en el Navbar -Producto, precios, etc. Debajo del texto del héroe hay ordenanza para descargar la aplicación y la documentación gratuita de pruebas para siempre para usarla. Un buen toque, aunque casi nada único en SaaS.
En normal, el ámbito de pliegue precursor del sitio es genérico, plausible e instantáneamente inteligible para cualquier persona que haya comprado software.
Cada sitio web de SaaS hace lo mismo, y eso está perfectamente. Los compradores buscan algunas cosas esencia y quieren poder comparar rápidamente sus opciones.
El resto de la página de inicio cubre cómo funciona el producto con un video seguido de un tutorial de productos de estilo scrollytelling. Scrollytelling es demasiado hermoso para mí, pero el enfoque en cómo funciona su producto es inteligente.
El plan imperceptible pagado para Cypress viene con pruebas de 10k por mes. Pequeñas eficiencias para la trámite de colaboración y prueba se suman rápidamente. Los compradores potenciales definitivamente quieren ver cómo conduce en comparación con otros productos.
Construido con Broma
Sistemas de diseño web de EE. UU. (USWDS) publica una cojín de conocimiento para ayudar a otras agencias gubernamentales a que sus sitios web sean más accesibles, valiosos y seguros.
En sinopsis, proporcionan código para desarrolladores, marcas alámbricas para diseñadores y orientación para ayudar a otras agencias gubernamentales a construir mejores sitios web.
Es un sitio web de la cojín de conocimiento muy genérico, en el buen sentido. El esquema de navegación es reconocible. La información se organiza de guisa accesible y dialéctica.
Idealmente, la documentación no necesitará cambiar a menudo, lo que significa que un sitio suspenso debería funcionar perfectamente. Pero no es necesariamente cierto para la cojín de conocimiento de cada empresa.
Si tiene procesos en constante desarrollo, como lo hacemos en un brote rápido, probablemente desee utilizar un software de cojín de conocimiento más tradicional que haga que sea más factible editar, colaborar y divulgar. Para nosotros, en este momento, un sitio web suspenso sería terrible como cojín de conocimiento.
Pero para las grandes empresas, y ciertamente para el gobierno de los Estados Unidos, las herramientas y procesos capturados en la documentación deberían tener una larga vida útil.
