¿Cuáles son buenos ejemplos de diseño receptivo en aplicaciones web complejas?

DesignModo hizo un artículo llamado “Diseño web receptivo: 50 ejemplos y mejores prácticas”. Cada ejemplo muestra un diseño de escritorio / computadora portátil, tableta y teléfono. Es una empresa muy impresionante. Marqué esto hace un tiempo, pero sigue siendo una de las mejores referencias hasta la fecha. Diseño web receptivo: 50 ejemplos y mejores prácticas. Sin embargo, estoy de acuerdo con Theresa Neil y Daniel Woodard. A menudo, depende de las personas del frente tratar este problema de manera diferente cuando se trata de datos complejos. Una forma de lidiar con el desarrollo a nivel de aplicación es construir todo como un componente independiente y ensamblarlos de acuerdo con qué dispositivo está accediendo a los datos. Si el usuario está en una computadora portátil, se les proporciona un diseño más convencional. Si el usuario está en un teléfono, debe apilar los componentes. Si hay muchos de ellos, entonces debe idear una navegación lógica utilizando conjuntos de herramientas y convenciones para teléfonos inteligentes.

Hola

¿Puedo llamar su atención sobre nuestra aplicación web de encuestas totalmente receptiva Enalyzer? Inicio | Enalyzer

Hemos estado en la industria del software de encuestas durante 15 años, pero creamos una nueva aplicación web 100% receptiva, que lanzamos justo antes del verano. Maneja la interfaz de usuario compleja en una nueva y mi opinión es bastante original. Además de ser verdaderamente receptivos, tratamos de centrarnos en una interfaz de usuario limpia y moderna, donde se presenta el contenido de la encuesta (encuestas + informes). Se aplica tanto para el administrador de encuestas como para los encuestados / lectores de informes.

Si te gusta, échale un vistazo. Proporcionamos un plan gratuito, donde puede inspirarse o simplemente hacer una encuesta si lo necesita, aquí algunas fotos de la aplicación.

BR

Jakob

El término de composición del sitio web de diseño receptivo se identifica con la idea de construir una composición web de una manera que ayude a cambiar el diseño por la determinación de la pantalla de la PC del cliente.

El bosquejo web receptivo es una interpretación de planificación totalmente extraordinaria que el bosquejo web convencional, y los ingenieros (particularmente nuevos) deben pensar en las ventajas y desventajas de la planificación web receptiva. Este blog es un caso poderoso del enfoque, por lo que descubriremos algunas novedades sobre los empleos de la planificación web receptiva. La naturaleza fundamental puede ser elegir consultas de medios para construir un sitio receptivo.

Simon Collision

A pesar del hecho de que en estos días este sitio estático de estilo de marco grisáceo parece algo agotador y aburrido, sin embargo, cuando se descargó, provocó algún tipo de caos con su diseño de primera línea.

La razón principal fue que el creador básicamente centró su consideración en una conducta receptiva que solo estaba aumentando la prevalencia esos días de esta manera, proporcionando a los ingenieros habituales un caso de agente de cómo el diseño de estilo de marco general debería cambiar sin problemas.

Anderson-Wise Architects

Al estar dedicado a un estudio de ingeniería y esbozo, no es sorprendente que el centro principal del sitio sean fotografías que expresan claramente las habilidades, la experiencia y los clientes de la organización.

El punto de llegada incorpora 3 segmentos fundamentales, cada uno de los cuales depende de la base de la imagen. La disposición de adaptabilidad sirve para enmarcar de manera viable una estructura legítima para cada medida de pantalla estándar, lo que hace un flujo de sustancia encantador para los usuarios.

Nuestro producto está disponible a través de dispositivos SAAS y servidores en el sitio, y la herramienta de configuración basada en la web que proporcionamos es totalmente receptiva. (Nuestro producto en sí es imágenes dinámicas del lado del servidor, también conocidas como imágenes receptivas; aquí hay algunas demostraciones si no está familiarizado con ellas).

Nuestra herramienta de configuración incluye administración de cuentas, configuración del servidor, administración de activos y un escritor de guiones interactivo para nuestro producto. Es una aplicación web JavaScript completa y compleja. El contenido se divide en paneles que se pueden redistribuir según el ancho de la pantalla. Debido a que esta es una herramienta para nuestros clientes, no hay una URL pública que pueda mostrarle, pero si tiene alguna pregunta específica, hágamelo saber.

Las personas que construyen SaaS, sistemas complejos, etc., tienen el desafío suficiente para que la aplicación funcione correctamente, vuele y presente datos precisos, se publique a tiempo, esté libre de errores para usar, sea navegable en un navegador normal y presente los datos / objetivos . Agregue cosas como el lanzamiento continuo y es demasiado para lanzar también todo esto bajo una interfaz de usuario que funcionaría de manera receptiva.

Hasta este punto, creo que hemos visto principalmente aplicaciones de tipo tablero y luego aplicaciones móviles que acceden a los datos o una API que permite a otros desarrolladores tratar de obtener los datos.

Un ejemplo de esto podría ser algo como E * Trade o incluso su banco. E * Trade tiene una ventana emergente de Java para cotizaciones en vivo, una interfaz web de escritorio bastante agradable o al menos personalizable con cuadrículas de arrastrar y soltar y visualización de datos personalizada. Luego tienen aplicaciones para iPad, aplicaciones para iPhone y aplicaciones para Android. En su mayoría ofrecen la misma funcionalidad pero con concesiones a la plataforma, es decir, son realmente un sitio web y varias aplicaciones que acceden a los mismos datos.

Mi banco me permite usar mi iPad para depositar cheques con foto.

Si bien esos son ejemplos de B2C, creo que existen las mismas restricciones para los sistemas B2B. Hasta donde yo sé, Salesforce también funciona de esta manera.

Creo que comenzaremos a ver movimientos hacia RWD o lo que sea que viene después, pero no creo que haya mucho que ver hoy.

Donde estoy frustrado con cosas como periódicos. El contenido es perfecto para un diseño receptivo (historias, comentarios, imágenes y videos), pero son demasiado vagos para resolver la publicidad, por lo que tienden a tener sitios web bastante basura sobrecargados de anuncios y aplicaciones de pago para tabletas y teléfonos.

Hay grandes sitios web como Starbucks y Microdoft que han hecho el movimiento, pero todavía no son aplicaciones o sistemas en tiempo real.

Creo que los proveedores de contenido tienen pocas razones para no estar en el tren RWD. Creo que pasará un poco más de tiempo antes de que los CRM, financieros y aplicaciones que necesiten mostrar una gran cantidad de datos en tiempo real, de forma segura y también muestren esos datos de manera que puedan manipularse gráficamente, estén listos para hacer el movimiento.

A medida que los dispositivos continúen proliferando, la presión de crear interfaces para teléfonos, tabletas, computadoras de escritorio, televisores, mi automóvil, mi reloj, PS3, PS4, XBOX, etc. evolucionando ahora.

Estoy más en el campamento RWD que en el campamento de aplicaciones, pero todavía hay muchas áreas donde las aplicaciones aún poseen muchas ventajas.

Muchas empresas tienen problemas porque van de la computadora de escritorio a la tecnología móvil. Creo que hubspot hizo un gran trabajo con su sitio receptivo. Si bien no inicié sesión con su portal y vi cómo ejecutaron esa parte, noté que mantuvieron esa funcionalidad en la versión móvil, lo que me dice que probablemente lo lograron. Parece que las empresas no están respondiendo realmente las preguntas correctas, de las que hablé en esta publicación: Cómo construir la arquitectura de información correcta para un sitio web receptivo. Si bien no dicta toda la funcionalidad, diría que la simplicidad es mejor dado el caso de uso móvil. Verificaría cómo Hubspot ejecutó su versión receptiva del inicio de sesión.

He aquí un ejemplo bastante bueno de una nueva empresa de inicio saas TouchVu. TouchVu ha hecho un gran trabajo implementando un diseño receptivo en sus sitios web. TouchVu está adoptando un nuevo enfoque para la creación de sitios web al hacer que sea muy fácil para sus usuarios crear instantáneamente sus sitios web utilizando su página comercial de Facebook. Con solo un clic de un botón, TouchVu toma todo el contenido de una página comercial específica de Facebook y lo entrega en un tema web limpio y profesional. Una vez que se crea el sitio, TouchVu proporciona herramientas simples para personalizar el aspecto del sitio e incluso la capacidad de adjuntar un dominio personalizado. Puede mantener fácilmente su sitio simplemente publicando nuevo contenido en su página de Facebook y su sitio se actualizará automáticamente. TouchVu todavía está en versión beta y es gratis para sus usuarios. Es un concepto genial.

Encuentro interesante el formato de las pantallas de los teléfonos celulares, tabletas y computadoras portátiles y cómo funcionará en términos de uso. El mismo sitio web debería mostrar contenido específico para cada tamaño en lugar del mismo para todos, ya que el uso es totalmente diferente. Intento “trabajar” con mi iPad, pero parece que está diseñado para el consumo de contenido y no para la producción. Estoy de acuerdo con APPLE en que la tableta se compartirá en las PC, pero necesitan vender accesorios (mouse, teclado, etc.) para reemplazarlos realmente.

Dos de las mejores aplicaciones SaaS en lo que respecta al diseño web receptivo en mi experiencia son: Mailchimp y Evernote.

(Creo que Evernote ganó un premio Webby por este motivo).

El Tablero de la campaña de Obama es bastante complejo y también receptivo: http://dashboard.barackobama.com

Hrm, ¿algún otro tomador? No parece mucho.

No puedo agregar mucho más de cómo funciona esto para mí:

Básicamente, hago que la interfaz sea centrada en la acción, cada acción puede tener múltiples representaciones: global / local: barra de herramientas de acción, ms principales como barra de cinta, menú contextual y teclado 100% compatible. Incluso me siento mal cuando tienes que golpear el mouse una vez.

en el lado de renderizado, uso una y otra vez las cuadrículas de datos con siempre un conjunto estándar de acciones (portapapeles, ordenación, diseño, columnas) y diseños de árbol / vista previa / pulgar. Es importante tener un conjunto repetitivo de ellos: diseños y acciones.

luego para los diseños: es genial si sus usuarios pueden arrastrar todos los paneles como quieran, entonces puede ofrecer múltiples ‘ajustes preestablecidos’ pero también dejarlos almacenarlos y recargarlos.

Después de eso, disfrutarás incluso de tu propia aplicación. Por otro lado, está bien también si simplemente funciona.

Hola, hay algunos excelentes ejemplos de sitios web receptivos en los campos de comentarios.

Cuando realiza aplicaciones web, es importante utilizar unidades de medida relativas para que el sitio se adapte a cualquier dispositivo. Eso, junto con algunos puntos de interrupción, lo ayudará a reestructurar el diseño del sitio cuando se encoge / crece para adaptarse al dispositivo.

Cuando crea aplicaciones web que se pueden incrustar en otras páginas, también es importante saber que solo puede controlar su contenedor principal.

Aquí hay un ejemplo de cómo hacer un buen contenido receptivo:
Contenido H5P receptivo.

Si está hablando de aplicaciones web en lugar de páginas, consulte: http://pubanatomy.org

Ninguno de los siguientes ejemplos trata sobre aplicaciones web. Realmente agradecería ejemplos de buenas aplicaciones SAAS