Elementos web de posición fija
El uso de elementos de posición fijos ha crecido en popularidad y se ha convertido en un elemento común en la web.
Esta técnica implica la fijación de algún elemento en el navegador mientras el resto de la página se desplaza. La mayoría de las veces lo encontramos en elementos de encabezado, incluida la navegación principal de un sitio. Este es también un enfoque popular en los sitios de una sola página donde la navegación en la página debe estar siempre presente. También encontramos varios elementos de páginas web bloqueados en el lugar usando tales técnicas.
Hay muchas situaciones que podemos encontrar donde arreglar un elemento en la página es algo bueno, pero todo vuelve a un único propósito. En casi todas estas situaciones, el elemento fijo mantiene una parte crítica de la página frente a los usuarios en todo momento.
La importancia de estos elementos varía, pero hasta cierto punto el objetivo fundamental es mantener una parte de la página perpetuamente en el puerto de visualización.
Cuando considere usar esta técnica, le recomiendo que considere cuidadosamente por qué y cómo lo hace. Tenga en cuenta que cualquier parte de su página que no se mueva automáticamente atraerá mucha atención. Así que asegúrese de ponerlo a trabajar. ¡Vamos a sumergirnos!
Cabeceras fijas
Los encabezados fijos son, con mucho, el elemento de posición fija más común, tanto que de hecho tuve que empezar a agregar a esta colección para evitar demasiadas muestras. En la mayoría de los casos, el encabezado se fija en su lugar para garantizar que la navegación de los sitios esté siempre presente. Como mencioné antes, esto es especialmente cierto cuando se trata de un sitio web de una sola página.
Hay muchas variaciones sutiles en la forma en que puede manejar encabezados fijos, por lo que revisaremos algunas muestras para obtener varias ideas sobre este enfoque.
Pecas y guapo
Esto es lo que consideraría un ejemplo clásico de esta técnica. El encabezado se fija en su lugar mientras se desplaza por el sitio. Esto incluye el logo y los principales elementos de navegación. Además, es un sitio web de una sola página. Al hacer clic en la navegación principal, se desplaza a la parte adecuada de la página.
En un caso como este, el encabezado fijo hace que navegar por el sitio de una sola página sea sencillo. También evita uno de los aspectos más molestos de muchos sitios de una sola página: cuando la navegación está solo en la parte superior de la página, pero se desplaza por años. Como tal, el encabezado fijo no solo se ve bien y mantiene la marca principal del sitio al frente y al centro, sino que también garantiza que el sitio sea fácil de usar.
Mapalong
Este ejemplo usa un encabezado fijo, pero con su propio giro menor. Este sitio también tiene un diseño de página única, pero carece de navegación en la página. En este caso, el encabezado fijo contiene el logotipo principal y un botón de inicio de sesión, ambos elementos muy importantes. Pero, incluso mejor que esto, cuando se desplaza hacia abajo de la página, la llamada principal a la acción se mueve al encabezado a medida que se desvanece. Como resultado, el punto de conversión principal para el sitio siempre está visible. Y, sin embargo, incluso mejor que eso, el acto de la llamada a la acción que se desvanece llama la atención del usuario hacia él, enfatizando aún más el punto de conversión en el diseño. En mi opinión, un uso brillante del enfoque.
Kisko Labs
Otro enfoque inteligente para el encabezado de posición fija es una técnica que llamo deslizamiento y palanca. En el sitio de Kisko Labs solo queda una parte del encabezado. A medida que se desplaza hacia abajo en la página, la navegación principal también se desplaza. Hasta que llegue a la parte superior de la pantalla, se queda allí. Por lo tanto, la navegación se desliza (o se desplaza) normalmente y luego se queda en la parte superior.
Un detalle adicional que es realmente agradable aquí es cómo la navegación resalta la parte de la página que está viendo actualmente. Como se trata de un diseño de una sola página, es útil tener la parte actual de la página identificada como lo haría con el estado normal de "página actual" de cualquier navegación.
Levantar el techo
Una extensión común de este estilo es incorporar cierto nivel de transparencia en la capa adhesiva. En muchos de los ejemplos encontrará aquí que esto se hace simplemente por tener un borde desigual al elemento adhesivo. A veces, esto se hace teniendo un elemento que sobresale de la barra fija, otras veces con un borde irregular. En el sitio Raise the Roof se ha logrado con un borde muy orgánico y casi aleatorio.
En esta muestra, encontramos un resultado visual interesante. Mediante el uso de elementos superpuestos, el sitio crea profundidad visual a medida que los contenidos se desplazan detrás del encabezado. Esto se enfatiza aún más por la luna en el fondo que también está fija. El resultado final es tres capas visuales. Tal profundidad agrega un gran nivel de interés visual y puede crear un diseño visualmente impactante.
Bienvenido al agua
El sitio Bienvenido al agua es una creación bastante inusual. Muy poco de este sitio cumple con las normas de diseño y diseño web. De particular interés para el tema de este artículo es el encabezado fijo. En este sitio, ese elemento fijo sirve como una herramienta de navegación para el sitio. Pero en muchos sentidos tiene más de una sensación de barra de herramientas.
Muestras adicionales de encabezados fijos
Aquí hay algunos ejemplos adicionales de encabezados fijos. Aquí encontrará una amplia gama de estilos y variaciones sutiles.
Tam Cai
Marlon Messam
Big Eye Creative
Balencic Creative Group
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Haz mejores aplicaciones
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Guitarras Holcomb
Trussystem
Pie de página fijo
Quizás el opuesto más obvio al encabezado fijo sería el pie de página fijo. En tales casos, el pie de página está pegado a la parte inferior de la pantalla. A medida que el usuario se desplaza, el elemento permanece en su lugar.
Al igual que cualquier otro elemento fijo, la creación de un punto focal sigue siendo el objetivo principal. Curiosamente, aunque con pies de página como estos, lo más frecuente es que se trate de una función secundaria que sigue siendo un objetivo principal.
Grupo sin plomo
El sitio del grupo sin plomo es un excelente ejemplo de esto. Aquí, el pie de página fijo contiene elementos que están orientados a la acción y afectan al objetivo principal del sitio. En primer lugar, tenga en cuenta que todos los elementos de esta barra son cosas que un usuario puede hacer: promocionarlos en las redes sociales, hacer una llamada telefónica o enviarlos por correo electrónico. En segundo lugar, son los principales elementos de acción que la agencia más probablemente quiere que tomes. O desean que los promocionen o que se pongan en contacto con ellos. Estas son las principales razones para tener un sitio como este. Por lo tanto, tiene sentido fijarlos en su lugar en un pie de página donde recibirán mucha atención.
Envato
El sitio Envato también tiene un pie de página fijo. Aquí, la barra contiene el logotipo principal del sitio, que curiosamente ha sido trasladado aquí desde la esquina superior izquierda típica. Francamente, para una marca como Envato, esto no es un problema. Además, encontrará una serie de menús desplegables que lo lanzarán a sus diversas propiedades web. Esta simple función es su verdadero objetivo. De hecho, es posible que diga que esta página de perfil de negocios no es realmente donde quieren que termine la gente. Como tal, el enfoque en conducirlo de regreso a sus sitios de contenido es prominente e inevitable.
Kiyuco
Para muchos sitios como este, sus programas de marketing por correo electrónico son de vital importancia. Por lo tanto, tener un pie de página fijo que resalte de forma destacada el formulario de registro puede ser de gran ayuda para hacer crecer esas listas de correo. ¿Puede el marketing por correo electrónico ayudarlo a promocionar su sitio durante un período de tiempo más largo y perseguir clientes de manera más efectiva? Si es así, quizás un pie de página fijo como este sería una gran herramienta.
Barras laterales de posición fija
El bloqueo de los elementos de una página web en su lugar no es algo limitado a los encabezados y pies de página, aunque podrían ser los más populares. Parecería que una barra lateral de posición fija es un segundo cercano.
Las barras laterales de lugar fijo a menudo contienen información muy similar a la que encontrarías en un encabezado. Esto incluye cosas como logotipos, navegación y herramientas de redes sociales. Aquí hay algunas muestras para considerar si desea utilizar este enfoque.
Jorge Rigabert
Este hermoso sitio es un ejemplo perfecto del estilo en el trabajo. Aquí, la barra lateral contiene las principales opciones de marca y navegación del sitio. Este tipo de enfoque de barra lateral es excelente porque mantiene la navegación a la vista a medida que se desplaza la página, pero también porque no se cruza con el contenido a medida que se mueve. Aunque esto podría ser una distinción sutil, hace una interfaz increíblemente suave. Sitios como este muestran una elegancia que parece simple, pero es increíblemente difícil de armar.
Más peligros Más héroes
Realmente amo la forma en que funciona este sitio. Los elementos fijos en la barra lateral son las funciones básicas que los propietarios del sitio quieren que tome. ¡Más que nada, quieren que escuches la música! Como tal, la función de "reproducción" prominente y permanentemente en pantalla está lista y en espera. No puedo imaginar un elemento más crítico para el sitio, y para que se muestre tan prominentemente tiene sentido. Y debes amar que no ha sido presentado de manera desagradable; ni siquiera se reproduce automáticamente. Felicitaciones al diseñador que controló esa tentación.
Yowza
A veces es deseable crear un único elemento adhesivo que promueva una función particular. Hemos visto esto con varios comentarios y servicios de soporte que puede conectar a su sitio. En este caso, se ha colocado un botón similar a Facebook en el lateral del sitio. Permanece en su lugar mientras se desplaza por la página. Esto, por supuesto, atrae la atención del usuario hacia el elemento y lo alienta a usarlo. Diría que esto muestra el poder y la importancia de las referencias sociales en un negocio basado en la web como este.
Como nota al margen, me encanta el giro del sitio en el borde superior de 10px que se ha vuelto tan popular. Aquí el elemento simplemente se desplaza por. No es una animación dramática, pero algo al respecto es divertido y agrega una capa de interés y vida al sitio.
Colectivo Fat-Man
Este sitio sigue todos los patrones que hemos encontrado en nuestras muestras anteriores. Pero se destaca de una manera enorme debido a una animación simple. A medida que te desplazas hacia abajo, el personaje de la barra lateral se anima y camina. Este elemento sin ayuda eleva el sitio a una categoría única y memorable. ¿Cómo es que algo tan trivial puede tener tal impacto? Toma este sitio simple y lo llena de maravilla. Muestra que a la agencia detrás le encanta pulir su trabajo con los tipos de toques finales por los que cualquier cliente morirá.
Más elementos de barra lateral fijos
Aquí hay algunos ejemplos adicionales de barras laterales fijas en el trabajo.
Tontos poemas
Colin McKinney
Informante
Esta es Marcela
Consejo Janette D.
Solo logotipo
Un enfoque que no encontramos con frecuencia es un logotipo de posición fija. En este ejemplo, el logotipo se ha bloqueado en su lugar incluso cuando la página se desplaza. Este enfoque atípico mantiene el nombre del sitio en primer plano. Diseños como este pueden ser interesantes de considerar. Es realmente difícil adivinar por qué pudieron haber hecho esto, pero uno solo puede suponer que la marca principal es de importancia crítica. Tal vez tienen mucha competencia similar? Tal vez solo quieren asegurarse de recordar su nombre? De todos modos, es una técnica interesante que vale la pena tener en cuenta si se aplica a su proyecto.
"Volver arriba"
Cuando se trata de páginas realmente largas, una buena característica para agregar es un enlace que lo lleva a la parte superior de la página. Y con elementos adhesivos, puede crear un enlace que permanezca en el mismo lugar en el que se desplaza por la página. Esto es exactamente lo que han hecho las muestras proporcionadas aquí.
Con mayor frecuencia, dicho elemento se coloca justo fuera del diseño. De esta forma, no interfiere con ninguna otra cosa en el diseño a medida que atraviesa la página. También observará cómo estos elementos frecuentemente tienen una flecha apuntando hacia arriba, quizás un elemento obvio para incluir, pero es muy importante tenerlo en cuenta ya que informa a los usuarios rápidamente sobre su propósito.
Este enfoque contrasta un tanto la noción de un encabezado fijo. En este caso, la navegación suele estar solo en la parte superior de la página. Por lo tanto, volver allí es importante ya que permite a las personas rebotar rápidamente en los contenidos de los sitios. En el caso de los sitios de una sola página, esto puede ser un paso adicional molesto.
Overlapps
Este ejemplo demuestra un buen toque adicional en el sentido de que no muestra el retorno al elemento superior a menos que realmente no esté en la parte superior de la página. Tal vez un detalle obvio para incluir, pero como se verá, no siempre es el caso. Parte del poder en este enfoque es que el solo acto de hacerlo llama la atención para asegurar que el usuario lo sepa.
Dos muestras más
Los dos ejemplos siguientes tienen botones para regresar a la parte superior, aunque están visibles todo el tiempo. Es interesante para mí que este elemento se coloque con mayor frecuencia en la esquina inferior derecha de la pantalla. No es la parte más prominente del diseño, por lo que tal vez su naturaleza secundaria sea buena para un elemento menos importante. Sin embargo, notará que el elemento sigue resaltado al romper los bordes y con colores vivos. Supongo que la moral de la historia es considerar su importancia para el uso de su diseño. Si hace toda la diferencia, asegúrese de que sea visible.
Pensamiento comodín
Dusanka y David
Múltiples elementos fijos
En este último ejemplo echaremos un vistazo a un sitio que tiene muchos elementos fijos en la página. En muchos sentidos, este sitio rompe con la mayoría de las normas de diseño y diseño web. Excepto por el logotipo en la esquina superior izquierda, casi nada está en su lugar habitual.
Sin embargo, encontramos algunos elementos con los que estamos familiarizados según este artículo, como la barra lateral fija. Sin embargo, notará que otros dos están lejos de ser típicos. Por ejemplo, el pie de página fijo que contiene algunos enlaces de todo el sitio. Cosas como las políticas de privacidad y los términos y condiciones rara vez garantizan una posición tan destacada en una página. Sin embargo, aquí los encuentra fijados a la página con algunos otros enlaces de navegación bastante importantes.
Realmente me gusta cómo han insertado los enlaces de la cuenta de usuario en la esquina superior derecha. Aquí es donde se colocan con frecuencia, aunque rara vez se arreglan allí independientemente del desplazamiento, como en este caso. Me gusta esto porque garantiza que siempre pueda obtener acceso rápido a las características del miembro del sitio; algo de lo que quizás se beneficiarían algunas otras aplicaciones y sitios web.
En general, este sitio está lejos de ser normal, pero algo funciona increíblemente bien y es fácil de amar. Su diseño inusual no lo hace difícil de usar y el resultado final es una experiencia distinta y placentera.
Recursos
Finalmente, con esta ronda me gustaría incluir algunas prácticas jQuery complementos que abordan la necesidad de fijar elementos a una ubicación específica en una página. Ofrecen diferentes funciones que se adaptarán a las distintas necesidades que pueda tener, así que asegúrese de explorarlas todas para encontrar el ajuste correcto.
Lo bueno es que son todos complementos jQuery y son súper fáciles de implementar. Si desea producir este estilo, al menos lo hará un trabajo fácil.
Meerkat
Meerkat es una de mis herramientas favoritas para este trabajo en particular. Su capacidad de ocultarse lo convierte en una excelente herramienta para mostrar contenido promocional o funciones importantes, como formularios de registro de correo electrónico.
Stickyscroll
Stickyscroll es un complemento que le permite crear elementos que se desplazan con la página hasta que lleguen a la parte superior, y luego se quedan en su lugar. Este complemento también ayuda a garantizar que los elementos no se desplacen hacia una región de pie de página al otorgarle un límite inferior; una buena característica adicional para seguro.
Waypoints
Waypoints le permite activar eventos jQuery cuando un usuario se desplaza a puntos específicos en una página. Esto es útil si desea resaltar o cambiar la navegación para que coincida con la ubicación del usuario en la página. Pero la diversión no termina ahí ya que hay innumerables cosas que podrías hacer en una página o diseño a medida que el usuario se desplaza e interactúa con ella.
Conclusión
Los elementos fijos son ahora un elemento común que los diseñadores pueden poner a trabajar. Las herramientas para lograr tales características y el soporte completo del navegador ya no son un problema.
Como tal, es una gran técnica para guardar en su cinturón de herramientas y extraer cuando sea el momento adecuado. Tales enfoques, por supuesto, no son el tipo de cosa que usas todos los días, pero pueden ser increíblemente poderosos cuando se usan de manera efectiva.