Cómo diseñar el sitio web de una sola página perfecta
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 usted podría pensar que nunca se podrían hacer sin varias páginas. Existen muchas razones para usar un sitio de una sola página, desde la facilidad de mantenimiento hasta las necesidades de ancho de banda reducido.
Si está abordando un sitio más corto, uno que normalmente tiene un puñado de páginas, considere usar una sola página y vea si facilitará el proyecto y lo hará más fácil de usar. Siga leyendo para obtener más información sobre los beneficios, cuándo (y cuándo) utilizarlos 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 cada proyecto. Pero hay una serie de razones para usarlos si es posible.
Son intuitivos de usar
Por defecto, 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 una rara excepción, simplemente desplazarse traerá a sus visitantes de una sección a la siguiente.
Nunca tendrá que preocuparse de que sus visitantes se vean atrapados en varias capas de navegación, buscando infinitamente lo que necesitan. El uso de un encabezado u otros enlaces de navegación a menudo es útil si hay varias secciones en la página, pero incluso sin ellas, el sitio es utilizable.
Puede ser más rápido y más fácil de mantener
Si bien este no es un hecho, un sitio de una sola página bien codificada probablemente será más rápido de codificar que un sitio de varias páginas. El proceso de diseño a veces puede tomar menos tiempo, aunque eso depende de qué tan compleja 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 perfectamente juntas. 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 puede ser más fácil también. Cuando solo tiene que lidiar con una sola página, el mantenimiento es más sencillo, siempre que su código esté bien escrito para empezar.
Estás obligado a simplificar
Este construye el punto anterior. Cuando solo tiene una sola página para trabajar, debe simplificar las cosas para sus componentes más esenciales. No más páginas y páginas de propaganda de marketing inútil. Tienes que llegar al punto de inmediato.
Mejor potencial de SEO
Los enlaces entrantes de calidad son una parte importante de lo bien que se desempeña 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 aún 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 de historias puede aumentar la acción
Los sitios de una sola página a menudo usan un ángulo de narración de cuentos 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, por lo que esto tiene beneficios obvios para la experiencia del usuario. Hemos estado leyendo y escuchando historias desde que éramos niños, por lo 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 se preguntará si esta página o esa debería ser un padre o un hijo. No más menús de navegación y submenús. Todo está en una página. Y si decides incluir enlaces de navegación, o simplemente dejar que los usuarios se desplacen, depende de ti y de si crees que se agregará a la experiencia del usuario o no. Simplemente no es una opción cuando un sitio tiene varias páginas.
Ancho de banda reducido
Aunque ya no se trata de un problema para el alojamiento, considere cuántos usuarios acceden a su sitio mediante dispositivos móviles en estos días. Los usuarios con planes de datos limitados aprecian disminuir la cantidad de ancho de banda que su sitio toma.
Eliminar 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 hacerlo funcionar bien en una pantalla más pequeña, incluso con un diseño receptivo. Un sitio de una sola página, por necesidad, no es complejo. Hacer el diseño receptivo es generalmente más fácil. La navegación simplificada y los cambios similares también facilitan el 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 puede pasar a Internet, o un azote excesivo y engañoso en nuestros navegadores. Pero independientemente de dónde te encuentres, 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 se muestran como efectivos o peores: difíciles de usar. La clave es decidir si el efecto de desplazamiento de paralaje que desea utilizar es algo que realmente mejorará la usabilidad del sitio, o si solo desea usarlo porque se verá bien.
Otra cosa que debe considerar si decide que desea usar el desplazamiento de paralaje es si debe usar JavaScript o una técnica de CSS simple 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 y única para todos. Hay muchas veces en las que no debe usar un diseño de una página, mientras que en muchas otras hay un sitio de una sola página que tiene más sentido que uno de varias páginas.
Si está configurando un sitio que solo tendrá 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 dar al sitio general un aspecto más moderno, y si es ligero en cuanto al contenido, 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. Estas son, en la mayoría de los casos, una sola página, a menudo con un formulario para el registro de un boletín informativo. 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 geniales. Si solo está vendiendo un producto, ya sea un producto físico o uno 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 una buena opción para un sitio de una sola página, pero aún puede serlo. De acuerdo, lo evitaría para sitios que tienen más de una docena de productos, pero una simple tienda en línea puede mantenerse fácilmente en una sola página, con ventanas modales para cargar detalles del producto y el proceso de pago.
Cuando no se utiliza un sitio de una sola página es bastante sencillo: los sitios que son grandes, complejos o por defecto necesitan grandes cantidades de información no son adecuados para un sitio de una sola página. En esos casos, está mucho mejor con una estructura de sitio más tradicional.
Sitios híbridos
Si bien hay muchos sitios geniales 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 utilizar ajax, ventanas modales y similares, en realidad contienen varias páginas de contenido.
El sitio de Dang & Blast es un gran ejemplo de esto.
Estas pueden ser una gran solución si simplemente no puede hacer que todo encaje en una sola página.
Algunos sitios tipo de "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 su mensaje enfocado 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 de buen diseño todavía se aplican en sitios de una sola página, como lo son con cualquier buen diseño de sitio web. Pero hay algunas cosas adicionales que debe tener en cuenta, algunas de las cuales ya se mencionaron anteriormente.
Mantenlo simple
Intentar hacer un diseño que sea demasiado complejo para el contenido que intentas presentar no te favorece a ti ni a tus usuarios. En su lugar, simplifique tanto su diseño como su contenido tanto como sea posible, al mismo tiempo que presenta lo que necesita.
Los enlaces de navegación siguen siendo útiles
El hecho de que los usuarios puedan desplazarse para navegar por su sitio web no significa que sea la forma más fácil 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 tiene que ser una sección larga. De hecho, no debería ser. Divida su contenido en secciones lógicas y secciones para que los usuarios puedan encontrar mejor lo que están buscando.
Haz algo con todo ese fondo
Los sitios de una sola página tienden a tener fondos grandes. De acuerdo, a veces esos fondos se dejan sin formato o con un patrón repetitivo; 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 que ser una sola imagen. Puede ser una serie de imágenes, si eso se adapta 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 enfocaremos en los que se destacan.
Pure CSS Parallax Scrolling : Este artículo de Keith Clark explica cómo crear una técnica de desplazamiento de paralaje usando solo CSS. Esta es una gran opción si no desea usar JavaScript (o realmente no sabe cómo).
Skrollr : "Parallax desplazándose por el resto de nosotros". Es una biblioteca independiente que funciona con dispositivos móviles y de escritorio. No se requiere jQuery, simplemente 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.
Una página web Wireframes : 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í .
One Page Love : One Page Love es la principal galería de páginas web de una página, con más de 5000 sitios de ejemplo y agrega más todo el tiempo. También cuentan con montones de plantillas y otros recursos.
Iniciar Bootstrap : Start Bootstrap tiene una gran selección de temas de Bootstrap gratuitos de una página. Hay temas para agencias, autónomos, portfolios, páginas de inicio y más.
Plantillas de One Page Love : Además de su amplia galería, One Page Love también ofrece plantillas gratuitas y premium.
One Page Mania : One Page Mania ofrece una galería de sitios únicos y plantillas 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 único y definitivo 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í.