Cómo hacer un sitio web antiguo

Supongo que estás hablando de sitios web que se ven un poco aburridos, con colores pastel o imágenes de baja resolución que tienen esta sensación de “Word Art”. Mi consejo para hacerlo es codificar un sitio web utilizando solo la tecnología disponible en su año objetivo.

Por ejemplo, HTML se lanzó antes de CSS y Javascript, por lo que puede intentar deshacerse de los dos últimos a favor de usar solo el primero. Además, recuerde que en los años 90 no había monitores con resoluciones superiores a 640 × 360, por lo que es posible que desee usar jpeg en lugar de png debido a la gran disponibilidad en ese momento.

Y por último, pero no menos importante, recuerde orientar su sitio web a estas computadoras antiguas. Hoy en día damos por sentado 4 GB de RAM y al menos 128 GB de tamaños de disco duro (de hecho, la mayoría de los teléfonos de hoy en día tienen esas especificaciones o incluso mejores), pero en aquel entonces, el espacio en RAM y disco duro era limitado, por lo tanto, debe pensar como si sus visitantes estaban usando una computadora de 4 MB de RAM y 20 MB de disco duro con un procesador limitado.

Con estas y muchas más limitaciones en mente, supongo que ni siquiera tendrá que tratar de hacer que su sitio web sea antiguo, naturalmente terminará sintiéndose así.

¡Esta es realmente una pregunta realmente fascinante! La clave aquí no son las tecnologías específicas, sino los estilos y la estética que adopta su sitio. ¡Tomemos una plantilla Bootstrap como Clean Blog – Bootstrap Blog Theme y haga que parezca retro!

La versión actual y moderna se ve así:

Hice los siguientes cambios:

  • Se deshizo de todo el JavaScript
  • Descartó las fuentes personalizadas, volvió a una fuente Sans-Serif de ancho fijo (Courier New), y bajó la altura de la línea
  • Cambió esa bonita imagen de fondo a algo asqueroso y repetitivo
  • Básicamente, destruye todo el espacio en blanco y haz que el contenido sea 100% ancho
  • Agregue un poco de color desagradable: vea los enlaces y los elementos del menú. Y agreguemos un gradiente incómodo para una buena medida.

Y aquí vamos:

Para comenzar, recomendaría Geocities para Bootstrap. Geocities era como el myspace original, y existe una plantilla de arranque que puede usar para que se sienta como en los 90 nuevamente.

Geo para Bootstrap

Algunas cosas para notar:

  • Comic Sans
  • Color saturado
  • Gifs (y sus alias)
  • Repitiendo fondos

Si desea obtener un poco de inspiración para el diseño y ponerse en el estado de ánimo adecuado, cameronsworld es genial ( http://www.cameronsworld.net/ )

Algunas cosas para notar:

  • barras de desplazamiento
  • Clipart
  • volumen visual
  • rareza general

Lo que debe darse cuenta es que Internet era un lugar nuevo y extraño. No era elegante y elegante, era artístico y expresivo. Sin embargo, la expresividad que podía usar se limitaba principalmente a los gifs que podía desenterrar. Los medios en internet eran nuevos. No había suficiente ancho de banda para manejar la transmisión de video, apenas había suficiente ancho de banda para manejar gifs. Los efectos de paralaje no existían. Javascript no era realmente una cosa, y css3 / html5 no era una cosa; así que no hay transiciones, ni animaciones (excepto gifs), sin paralaje, sin fondos de video, sin modales (pero probablemente podría usar ventanas emergentes), (probablemente) sin ajax.

Si quieres ponerte más de humor, navega como en los viejos tiempos: oldweb.today

Más diversión:

Space Jam

Yahoo !: https://web.archive.org/web/1998

La primera página web: el proyecto World Wide Web

Google Beta: https://web.archive.org/web/1999

Esta magia

Las características incluyen: Los GIF animados no son de gatos o personas que se lastiman. Son un intento real de embellecer el sitio web

Márgenes de página mal configurados, combinados con varios divs que no se ajustan a pantallas anchas.

Instrucciones de texto sobre cómo navegar por el sitio web. (haga clic en esta página para conocer nuestro equipo)

Múltiples fuentes (como 3+) que son todo el conjunto predeterminado o gráficos integrados.

Diseño en caja que se ve muy estrecho en una pantalla ancha

Algún tipo de encanto pixelado a todo el asunto, las líneas simplemente no son nítidas y claras.

Texto agregado como imagen en cualquier cosa realmente.

Fotos de stock de personas que hacen el pulgar hacia arriba (sin embargo, hasta el día de hoy, los propietarios de pequeñas empresas aman)

Durante un proyecto escolar demasiado reciente, mis compañeros y yo tuvimos que crear un sitio web desde cero sobre la comida que nos gusta. Podría ser comestible, bebible, básicamente cualquier cosa que pueda consumir. Fue un proyecto individual.

Un amigo mío quería algo con hamburguesas, así que estábamos buscando un buen nombre. Olvidé cómo, pero nos levantamos con Jaws Burgers.

Desafortunadamente eso ya fue tomado por este maravilloso sitio web.

Jaws Jumbo Burgers: solo mirarlo te da un ataque al corazón.

Mi propio sitio de dicho proyecto en realidad puede desencadenar el “eso es tan feo”, así que, para mierdas y risas, eche un vistazo a mi primer pedazo de basura codificado desde cero.

Tiene más, esto es justo lo que podría ajustarse en una captura de pantalla.

Compruébalo aquí. Tenga en cuenta que si prueba el botón de menú, no se cierra solo y si lo abre y cierra demasiado rápido, el orden puede arruinarse para que las tres líneas muestren cuándo está abierto, y una ‘x’ muestra cuando está cerrado.

Probablemente haya algo de blanqueador cerebral cuando termines de reírte de eso 🙂

Este es un sitio web de un fotógrafo local:

Alan Bostock: PÁGINA DE BIENVENIDA

Es tan malo que, de hecho, se ha vuelto a un círculo completo a bueno. ¡Me encanta!
Solo echa un vistazo a los gifs animados y el seguimiento del cursor: ¡tiene todo!

¿Has probado el sitio de viajes en el tiempo …? Puede mirar hacia atrás, por ejemplo, cómo aparecieron los sitios web hace 15 años. Diseño increíblemente malo, incluso las grandes empresas.

Viaje en el tiempo

A veces recibo el comentario de un nuevo cliente que quiere un sitio web “moderno”. ¿Qué diablos es eso? ¿Estás hablando de un tema de WordPress? Por lo general, el cliente no tiene idea de lo que quiere. Puedo comenzar una dirección y terminar otra. Estoy en el medio de uno que definitivamente tiene un aspecto de la vieja escuela, pero eso es lo que el cliente quiere. Y acabo de conseguir un trabajo hoy de un cliente que sacó lo que quiere y es muy antiguo. Gemido. Un ejemplo de un sitio web antiguo y bastante aburrido que se modernizó recientemente fue PayPal. Francamente sencillo, nada que mirar. Pero seguro que tenía funcionalidad y un montón de negocios. De vez en cuando les recuerdo a los clientes que el aspecto de un sitio no necesariamente les trae negocios. He visto algunos sitios bastante feos haciendo un negocio explosivo. Es lo que hay debajo del capó lo que cuenta, así como la publicidad de su sitio web. Es como una niña bonita, si no tiene cerebro, se embota bastante rápido.

Este es mi favorito en la categoría de sitios feos. Two Fat Butchers LLC

Son realmente una gran carnicería y tienen una reputación fantástica … y, francamente, no quisiera que cambiaran el sitio web.

Probablemente su método más fácil sería usar HTML estricto … sin CSS y absolutamente sin JavaScript. Aunque, por supuesto, esto se vería atroz.

Probablemente el mejor ejemplo en el que pueda pensar es ¿Quién es Penny Juice?

Por otra parte, también tienes el glorioso: Space Jam

Este hace honor a su nombre. En realidad, se creó para romper cada regla de diseño web para que sea una especie de herramienta de referencia para diseñadores / desarrolladores web. Aquí está el enlace: ¡El peor sitio web del mundo!

Y una captura de pantalla incompleta:

Mantienen una lista incompleta de los errores en su sitio web, y aquí está: Nueva página 1. Afirman que están trabajando en una edición aún peor (!) Así que es algo de lo que estar entusiasmado …

Aquí hay una buena lista “fea” de la vieja escuela que garantiza que se cuestionen sus habilidades inmediatamente en el primer sitio

  1. Usa MUCHAS imágenes GIF animadas
  2. Utilice imágenes de fondo de pantalla completa de neón brillante
  3. Use TABLAS para su plantilla de diseño de página y deje visible el borde. Para un mejor efecto, configure un borde grueso como 10px o más
  4. Agregue una etiqueta IMG o dos que tenga una referencia de archivo no válida para que vea el cuadrado “X” roto

Sencillo.

Cree páginas web sin CSS ni JavaScript y siga formateando sus páginas usando elementos html como listas, tablas, marcos e iframes (si todavía son compatibles)

Terminarás con un sitio web como craigslist.


Y si está buscando páginas web elegantes con estilo pero muestra un aspecto vintage, intente con ese aspecto retro y desvaído como se muestra aquí:

50 diseños web retro y vintage para inspirarte – Libro de diseño web

¡Buena suerte!

Constrúyalo en una versión realmente antigua de dreamweaver, asegúrese de aprovechar al máximo la etiqueta . ¡Desplazar gifs animados y texto por todas partes es bueno!

Vaya a este sitio web (o este), vea la fuente y aprenda cómo se hace de los profesionales de los sitios web de mierda.

Simplemente use html antiguo y simple, sin CSS en absoluto

No uses ningún CSS, JavaScript. Simplemente use HTML4 y muchas imágenes con diseños de tabla