Hero Banner - Diseño receptivo [cerrado]

El "diseño" receptivo por su propia naturaleza debe ser extremadamente minimalista para que las cosas puedan realinearse y reubicarse fácilmente.

También es justo decir que aquellos que podrían hacer el mejor diseño receptivo no están (todavía) interesados ​​en él. Las herramientas simplemente no están listas.

Así que lo están haciendo aquellos sin mucha creatividad y capacidad de resolución de problemas en el diseño, gente más orientada al código que juega con el diseño. Por lo tanto, es (en esta etapa) increíblemente simple y simplista.

Para ser justos con aquellos que intentan hacer un "diseño receptivo", no hay muchas herramientas disponibles para hacer cualquier forma de diseño y experimentación receptivos serios a menos que sepa cómo codificar. Y las capacidades de codificación y diseño instintivo son propiedades casi mutuamente excluyentes.

ACLARACIÓN : Quienes son suficientemente competentes con el código para ser significativamente experimentales y exploratorios a través del medio, generalmente no se inclinan por el diseño visual, ni son instintivamente capaces de un buen diseño. Y viceversa.

Quizás la mejor herramienta actual es Storyboards en el nuevo Xcode 7, pero tiene una curva de aprendizaje mucho más allá de los intereses y pasiones de la mayoría de los diseñadores, y no está diseñado para el trabajo web. Está diseñado para crear aplicaciones receptivas para diferentes tamaños de pantalla y secciones en los mundos de iOS y OS X, pero para experimentar con ideas de diseño es probablemente la mejor herramienta del momento, salvo que realmente aprendas a codificar.

Casi es mejor elegir las relaciones de aspecto y los tamaños para los que le gustaría diseñar, y partir de ahí manualmente. Mayor dolor inicial para una carrera de finalización mucho más fácil.

Si por "banner héroe" (5) te refieres al encabezado de un sitio web, entonces es principalmente una cuestión de CSS y de querer cargar la misma imagen para todos los dispositivos; su ejemplo parece usar CSS y no un simple banner web . Hay algunas razones por las que un desarrollador usaría exactamente el mismo banner de héroe para todos los dispositivos además de ser más rápido de implementar (1, 2), pero cada dispositivo puede tener fácilmente su propio banner de héroe y no hay muchos límites de diseño en este caso. Es una cuestión de posibilidad, tiempo/presupuesto y prioridades.

Pero si te refieres a una sección con CSS y HTML, por ejemplo , la razón es el tiempo y el presupuesto, los desarrolladores suelen usar Bootstrap y, en otras ocasiones , algunos prefieren no usar jquery para cambiar el tamaño de sus galerías, por ejemplo (1, 2).

Ya puede obtener muchas formas diferentes de crear un diseño receptivo. E idealmente, el diseño no debe sobrecargarse con imágenes. (2) Es normal que el diseño sea minimalista y no tenga demasiadas imágenes grandes; se carga más rápido.

Simplemente se necesita más código CSS personalizado para cada dispositivo si decide usar otra forma de implementar un diseño receptivo, pero no hay una "mejor" manera y se puede hacer cualquier cosa. Y dado que existen soluciones como Bootstrap, es un buen atajo para usar que ya tiene formas predefinidas para hacer que el contenido "fluya"; lotof dev lo usará porque ahorra mucho tiempo, pero muchos sitios web terminan teniendo un estilo similar también. Lo importante es que quede bien en cada dispositivo, cargue rápido y si es posible, que luzca bonito también. También tiene el beneficio para el desarrollador de tener solo un contenido de sitio web para administrar.(3)

La otra forma de no estar limitado por esto es crear un sitio web con una computadora portátil, una tableta y una versión móvil, con un diseño distinto para cada uno. Las corporaciones a menudo usan esto si su prioridad es presentar el diseño de la mejor manera posible para cada dispositivo (por ejemplo, promociones, concursos). En este nivel, es un poco menos complicado crear una versión para cada dispositivo de forma independiente. Pero esto también podría hacerse usando diferentes hojas de estilo. (3, 4)

Ciertamente verá muchos sitios web con un diseño receptivo diferente.

Estos son algunos ejemplos de diferentes diseños receptivos:

http://stephencaver.com/

http://foodsense.is/

http://www.bk.com/

http://www.timhortons.com

http://hogash-demos.com/kallyas_joomla/index.php?option=com_content&view=featured&Itemid=156

Algunas referencias:

(1) La estrategia es una evolución de una estrategia de diseño web anterior conocida como "degradación elegante", en la que los diseñadores crearían páginas web para los navegadores más recientes que también funcionarían bien en versiones anteriores del software del navegador. Se suponía que la degradación elegante permitiría que la página se "degradara" o permaneciera presentable incluso si ciertas tecnologías asumidas por el diseño no estuvieran presentes, sin molestar al usuario de un software tan antiguo. Desafortunadamente, la actualización a menudo no es posible debido a las políticas del departamento de TI, el hardware antiguo y otras razones (por ejemplo, sitios web del gobierno). La actitud de "solo actualizar" también ignora las elecciones deliberadas del usuario y la existencia de una variedad de plataformas de navegador;, o donde la compatibilidad con el sonido o el color y el tamaño de pantalla limitado , por ejemplo, son muy diferentes del típico navegador gráfico de escritorio.

(2) "Aunque muchos editores están comenzando a implementar diseños receptivos, un desafío constante para RWD es que algunos anuncios publicitarios y videos no son fluidos . Sin embargo, la publicidad de búsqueda y la publicidad gráfica (banner) admiten la orientación de plataformas de dispositivos específicos y diferentes formatos de tamaño de anuncios. para computadoras de escritorio, teléfonos inteligentes y dispositivos móviles básicos".

(3) Jody Resnick, presidente de Trighton Interactive, declaró en su entrevista con Forbes: “Los sitios web receptivos simplifican el marketing en Internet y el SEO. En lugar de tener que desarrollar y administrar contenido para varios sitios web, las empresas con sitios receptivos pueden adoptar un enfoque unificado para la administración de contenido porque solo tienen un sitio receptivo para administrar.

(4) "Se pueden usar diferentes URL de página de destino para diferentes plataformas, o se puede usar Ajax para mostrar diferentes variantes de anuncios en una página. Las tablas CSS permiten diseños híbridos fijos + fluidos".

(5) Imagen destacada es un término utilizado en el diseño web para un tipo específico de banner web. Una imagen de héroe es una imagen de banner grande, colocada de manera destacada en una página web, generalmente en el frente y en el centro.

Editar: se agregó una referencia para el banner de héroe en caso de que el elemento haya sido mal nombrado en la pregunta. Se agregaron algunas referencias de Wikipedia que ya han sido aprobadas por desarrolladores profesionales y citando expertos en el tema.

En mi opinión, este patrón se hizo famoso debido a la gran cantidad de temas receptivos disponibles en Internet. Además, muchos diseñadores principiantes, este lo he visto personalmente, siguen patrones comunes para diseñar un sitio web rápidamente, y este es simple, fácil y rápido de crear.