Cómo diseñar el sitio web perfecto de una sola página
Los diseños de una sola página pueden ser una técnica excelente para abordar sitios web más pequeños, incluso aquellos que quizás no creas que se podrían hacer sin varias páginas. Hay muchísimas razones para usar un sitio de una sola página, desde la facilidad de mantenimiento hasta la reducción de las necesidades de ancho de banda.
Si está abordando un sitio más corto, uno que normalmente tendría un puñado de páginas, considere usar una sola página y vea si hará que el proyecto sea más fácil y más fácil de usar. Siga leyendo para obtener más información sobre los beneficios, cuándo (y cuándo no) usarlos y algunas de las mejores prácticas que debe seguir.
Los beneficios del diseño de una sola página
Obviamente, los diseños de una sola página no son ideales para todos los proyectos. Pero hay una serie de razones para usarlos si es posible que se ajusten.
Son intuitivos de usar
De forma predeterminada, todo lo que un usuario necesita saber para navegar por un sitio de una sola página es cómo desplazarse. Puede incluir flechas u otras pistas de navegación, pero con raras excepciones, el simple desplazamiento llevará a sus visitantes de una sección a la siguiente.
Nunca tendrá que preocuparse de que sus visitantes se queden atrapados en múltiples capas de navegación, buscando sin cesar lo que necesitan. El uso de un encabezado u otros enlaces de navegación suele ser útil si hay varias secciones en la página, pero incluso sin ellas, el sitio es utilizable.
Puede ser más rápido y fácil de mantener.
Si bien este no es un hecho, un sitio de una sola página bien codificado probablemente será más rápido de codificar que un sitio de varias páginas. El proceso de diseño a veces puede llevar menos tiempo, aunque eso depende de lo compleja que sea la página.
Un sitio de una sola página también puede imponer ciertas restricciones de diseño que aceleran el proceso una vez que tiene un diseño básico en mente. Más que un sitio de varias páginas, un sitio de una sola página debe tener secciones que funcionen juntas a la perfección. Ese tipo de restricción realmente puede acelerar el desarrollo de la página una vez que haya definido claramente lo que puede y no puede hacer.
El mantenimiento también puede ser más sencillo. Cuando solo tiene que ocuparse de una sola página, el mantenimiento es más ágil, siempre que su código esté bien escrito para empezar.
Estás obligado a simplificar
Este se basa en el punto anterior. Cuando solo tiene una página para trabajar, debe simplificar las cosas a sus componentes más esenciales. No más páginas y páginas de propaganda de marketing inútil. Tienes que ir al grano de inmediato.
Mejor potencial de SEO
Los enlaces entrantes de calidad son una gran parte del rendimiento de un sitio web en los motores de búsqueda. Si bien los motores de búsqueda no son necesariamente la mayor fuente de tráfico para muchos sitios, en general son importantes.
Al tener solo una página, solo tiene una página vinculada. Eso puede aumentar la importancia del sitio en lo que respecta a los motores de búsqueda.
La narración puede aumentar la acción
Los sitios de una sola página a menudo utilizan un ángulo de narración en el que los sitios de varias páginas no son tan buenos. Esto puede aumentar las conversiones e inspirar a los visitantes a tomar medidas.
Las personas están acostumbradas a seguir historias, tanto en línea como fuera de ella, por lo que esto tiene beneficios obvios en la experiencia del usuario. Hemos estado leyendo y escuchando cuentos desde que éramos niños, así que es algo que nos resulta natural.
Más fácil de organizar
No hay más listas interminables de páginas y subpáginas para organizar. No más preguntas si esta página o esa página debería ser un padre o un hijo. No más menús y submenús de navegación enormes. Todo está en una página. Y si decide incluir enlaces de navegación, o simplemente dejar que los usuarios se desplacen, depende de usted y si cree que se agregará a la experiencia del usuario o no. Esa no es una opción cuando un sitio tiene varias páginas.
Ancho de banda reducido
Si bien esto ya no es un problema tan grande en el extremo del alojamiento, considere cuántos usuarios están accediendo a su sitio utilizando dispositivos móviles en estos días. Los usuarios con planes de datos limitados aprecian la disminución de la cantidad de ancho de banda que ocupa su sitio.
Elimina los sitios móviles
El diseño receptivo, por supuesto, no se limita a sitios de una sola página. Pero cuanto más complejo es un sitio, más difícil es hacer que funcione bien en una pantalla más pequeña, incluso con un diseño receptivo. Un sitio de una sola página no es necesariamente complejo. Hacer que el diseño sea receptivo es generalmente más fácil. La navegación simplificada y cambios similares también facilitan un diseño que funciona bien en pantallas pequeñas.
¿Paralaje o no paralaje?
Dependiendo de su punto de vista, el desplazamiento de paralaje es lo mejor que le ha pasado a Internet o un flagelo engañoso y usado en exceso en nuestros navegadores. Pero independientemente de dónde se encuentre, no parece que vaya a desaparecer pronto.
Personalmente, siento que hay un momento y un lugar para el desplazamiento de paralaje. Algunos sitios de una página realmente pueden beneficiarse del efecto, mientras que otros parecen ser truculentos o, peor aún, difíciles de usar. La clave es decidir si el efecto de desplazamiento de paralaje que desea usar es algo que realmente mejorará la usabilidad del sitio, o si solo desea usarlo porque se verá genial.
Otra cosa a considerar si decide que quiere usar el desplazamiento de paralaje es si usar JavaScript o una técnica simple de CSS para hacerlo. Consulte la sección de recursos para obtener más información sobre ambas opciones.
Cuándo usar un sitio de una sola página y cuándo no
Si bien hay muchos beneficios para los sitios de una sola página, no son una solución perfecta para todos. Hay muchas ocasiones en las que no debe usar un diseño de una página, mientras que hay muchas otras ocasiones en las que un sitio de una sola página tiene mucho más sentido que uno de varias páginas.
Si está configurando un sitio que de todos modos solo tendría un puñado de páginas, entonces un sitio de una sola página podría ser perfecto. Condensar todo en una página puede darle al sitio en general un aspecto más moderno, y si de todos modos tiene poco contenido, entonces un sitio de una sola página puede hacer que parezca que tiene más contenido.
Otro ejemplo común del sitio de una página es el sitio web previo al lanzamiento. En la mayoría de los casos, son de una sola página, a menudo con un formulario para suscribirse al boletín. En la mayoría de los casos, la información proporcionada al público durante el prelanzamiento se puede organizar fácilmente en una sola página, por lo que tiene sentido considerar este estilo primero al diseñar estas páginas.
Los sitios de comercio electrónico de un solo producto son otro lugar donde los sitios de una sola página pueden ser excelentes. Si solo vende un producto, ya sea físico o digital, ¿por qué molestarse con varias páginas? Un sitio simple de una sola página puede ser una herramienta de ventas mucho mejor.
Puede pensar que un sitio de comercio electrónico más complejo no es adecuado para un sitio de una sola página, pero aún puede serlo. Por supuesto, lo evitaría para sitios que tienen más de una docena de productos, pero una tienda en línea simple se puede mantener fácilmente en una sola página, con ventanas modales para cargar los detalles del producto y el proceso de pago.
Cuándo no usar un sitio de una sola página es bastante sencillo: sitios que son grandes, complejos o predeterminados necesitar tener grandes cantidades de información no es adecuado para un sitio de una sola página. En esos casos, estará mucho mejor con una estructura de sitio más tradicional.
Sitios híbridos
Si bien hay un montón de excelentes sitios de una sola página, también hay muchos sitios de tipo híbrido. Dan la impresión de una sola página, pero al usar ajax, ventanas modales y similares, en realidad contienen varias páginas de contenido.
El sitio Dang & Blast es un gran ejemplo de esto.
Éstos pueden ser una gran solución si simplemente no puede bastante haz que todo encaje en una sola página.
Algunos sitios «hacen trampa» cuando se trata de una sola página. Tienen una sola página para su sitio web principal, pero luego tienen un blog en otro dominio (a veces un sitio alojado en Tumblr o WordPress.com). No hay nada de malo en esto, y puede ser una forma de mantener enfocado su mensaje en su sitio principal, sin renunciar a los beneficios de tener un blog.
Mejores prácticas para sitios de una sola página
La mayoría de los principios del buen diseño siguen siendo aplicables en sitios de una sola página, como lo son con cualquier buen diseño de sitios web. Pero hay algunas cosas adicionales que debe tener en cuenta, algunas de las cuales ya se han mencionado anteriormente.
Mantenlo simple
Tratar de hacer un diseño que sea demasiado complejo para el contenido que está tratando de presentar no le está haciendo ningún favor a usted ni a sus usuarios. En su lugar, simplifique tanto su diseño como su contenido tanto como sea posible, sin dejar de presentar lo que necesita.
Los enlaces de navegación siguen siendo útiles
Solo porque los usuarios lata Desplácese para navegar por su sitio web, no significa que sea la forma más sencilla de hacerlo. Esto es especialmente cierto si tiene una página larga con muchas secciones. A menos que haya una muy buena razón para no incluirlos, agregar enlaces de navegación a secciones particulares hace que su sitio sea más fácil de usar.
Divide tu contenido
Una sola página no significa que todo tenga que ser una sección larga. De hecho, no debería ser así. Divida su contenido en partes y secciones lógicas para que los usuarios puedan encontrar mejor lo que buscan.
Haz algo con todo ese trasfondo
Los sitios de una sola página tienden a tener fondos grandes. Por supuesto, a veces esos fondos se dejan planos o con un patrón repetido; pero otros sitios de una página aprovechan todo ese espacio para hacer algo creativo. Esto también puede ayudar a dividir su contenido, como ya se mencionó. Tu fondo no tiene por qué ser una sola imagen. Puede ser una serie de imágenes, si eso se ajusta mejor a su contenido.
Recursos para sus sitios de una sola página
Existen cientos de recursos, incluidas plantillas, para sitios de una sola página; pero aquí nos centraremos en los que se destacan.
Desplazamiento de Parallax con CSS puro: Este artículo de Keith Clark explica cómo crear una técnica de desplazamiento de paralaje utilizando solo CSS. Esta es una gran opción si no desea utilizar JavaScript (o no sabe realmente cómo).
Skrollr: “Parallax scrolling para el resto de nosotros”. Es una biblioteca independiente que funciona con dispositivos móviles y de escritorio. No se requiere jQuery, solo JavaScript antiguo.
Stellar.js: Stellar.js es otra biblioteca de desplazamiento de paralaje fácil de usar. Ofrece muchas opciones de configuración y compatibilidad con iOS.
Wireframes de sitios web de una página: Este conjunto de wireframes para diseños de una sola página puede ser un excelente punto de partida si no está seguro de cómo estructurar su sitio. Se pueden descargar gratis. Hay un segundo juego que puedes descargar aquí.
Amor de una página: One Page Love es la principal galería de sitios web de una página, con más de 5000 sitios de ejemplo y agregando más todo el tiempo. También cuentan con toneladas de plantillas y otros recursos.
Iniciar Bootstrap: Start Bootstrap tiene una gran selección de temas Bootstrap gratuitos de una página. Hay temas para agencias, autónomos, carteras, páginas de destino y más.
Plantillas de amor de una página: Además de su extensa galería, One Page Love también ofrece plantillas gratuitas y premium.
Manía de una página: One Page Mania ofrece una galería de sitios y plantillas únicos que puede descargar o comprar.
Conclusión
Los diseños de una sola página pueden ser una excelente opción para muchos tipos diferentes de sitios web. Si bien no son el todo y el final del diseño de sitios pequeños, vale la pena considerarlos en muchos proyectos. Considere las razones para usar una sola página y luego considere las razones para no hacerlo y decida a partir de ahí.
