Diseño adaptativo: qué es y cómo utilizarlo. Interfaces adaptativas Servicios y herramientas útiles
Por el momento, alrededor del 11-12% de los 100.000 sitios más visitados son responsivos, y no hay duda de que este número aumentará en los próximos años.
A medida que más organizaciones se arremangan para abrazar las realidades de la web multidispositivo, vale la pena considerar algunas estrategias utilizadas para alcanzar el nirvana:
Modernización adaptativaEl rediseño responsivo es el proceso de tomar un sitio web existente solo para escritorio y esencialmente "remodelarlo de manera responsiva".
Daniel Cederholm
Para la mayoría de las organizaciones, ni siquiera se considera la creación a gran escala de un nuevo diseño desde cero. Es por eso que la modernización responsiva es un enfoque popular para crear una buena experiencia para dispositivos móviles.
Ventajas- Relativamente rápido.
Hay bastantes formas de realizar una modernización responsiva; esta estrategia podría consistir en agregar un archivo Small-screens.css al sitio. A pesar de este ejemplo bastante crudo, la modernización adaptativa es una opción atractiva para una gran cantidad de organizaciones porque no requiere reconstruir todo desde cero. - Familiar.
No confunde a los usuarios. Las personas han pasado años acostumbrándose a la interfaz y, al modernizar la existente, las organizaciones mantienen un enfoque familiar al tiempo que mejoran la vida de las personas con dispositivos móviles. - Organizacionalmente más rápido.
Políticamente hablando, modernizar la interfaz es más seguro que empezar desde cero. Habrá menos debate sobre qué tono de verde elegir, qué fotografías triviales usar, y la gerencia no tendrá que torcerse los brazos. Esto permite a los equipos lanzar sitios responsivos más rápido.
- Sólo afecta a una pequeña parte.
Nuevamente, hay muchas opciones para hacer una remodelación, pero el objetivo de la mayoría de ellas es "hacer que se vea bonita". Al centrarse en rediseñar el diseño, los rediseños a menudo pasan por alto una gran cantidad de otros factores que deben considerarse al crear un diseño exitoso para una variedad de dispositivos. - 10 litros de agua en una jarra de tres litros.
Dado que los sitios de escritorio están diseñados sólo para computadoras de escritorio (y a menudo duran mucho tiempo), pueden contener mucho desorden. Y dado que la modernización consiste principalmente en volver a fusionar el diseño, la mayoría de los problemas con el contenido no se tienen en cuenta del todo. - Actuación.
Hay algo extraño en escribir código para admitir mejor dispositivos pequeños. Eliminar cosas innecesarias puede ir demasiado lejos, pero sin centrarse en la productividad, esta no crecerá por sí sola. - El peor soporte.
Las consultas de medios, originalmente diseñadas para computadoras de escritorio, no son compatibles con la mayoría de los dispositivos móviles. - Correcciones temporales.
Me siento muerto cuando escucho a la gente pedirme que "haga responsivo" algo, como si fuera solo una casilla de verificación en el plan del proyecto (que a veces en realidad lo es). Este tipo de pensamiento limitado pierde las oportunidades reales que ofrece el diseño responsivo.
La versión móvil le brinda la oportunidad de plantar una semilla que crecerá a partir de su sitio web heredado.
Con el tiempo, un sitio obsoleto se puede eliminar y el sitio evolucionará desde ser móvil primero, responsivo y teniendo en cuenta las tendencias futuras.
- Menor riesgo.
La mayoría de las organizaciones todavía consideran que el tráfico procedente de dispositivos móviles es una minoría. Por lo tanto, lanzar un sitio web adaptable a dispositivos móviles permite a estas organizaciones probar el terreno sin tener que lanzarse al tema de cabeza. - Una oportunidad para aprender a ser flexible.
Los diseñadores pueden aprender a pensar de forma más flexible. Los desarrolladores aprenderán los innumerables trucos de los dispositivos Android. Los gerentes pueden descubrir cómo alejarse de la perfección de los píxeles. Un sitio móvil responsivo puede ser un excelente entorno de pruebas para el aprendizaje. - Infraestructura.
Los equipos pueden aprender a resolver problemas de gestión de contenidos, como la creación de imágenes, de una vez por todas. - Retire el exceso.
Este enfoque ofrece una gran oportunidad para que los equipos se pregunten "¿realmente necesitamos esto?" y al mismo tiempo centrarse en el rendimiento. ¿Por qué? Porque su objetivo principal es mejorar la experiencia del usuario de su sitio en dispositivos móviles. - El futuro son los sitios web centrados en dispositivos móviles.
Aunque inicialmente carecen de contenido o funcionalidad, con suficiente tiempo y esfuerzo estos sitios móviles pueden eventualmente reemplazar a sus antecesores de página completa.
- Sigue siendo un sitio móvil.
Ya sea responsivo o no, este enfoque aún conserva una gran cantidad de desventajas de los sitios móviles: problemas con la redirección de URL, administración de contenido, contenido consistente, coherencia, optimización SEO y otros. - Correcciones temporales.
Muchos sitios móviles se crean como una curita para detener el sangrado. Estos sitios se crean con el objetivo de descargar el creciente tráfico procedente de dispositivos móviles. Es posible que estas soluciones aún satisfagan las necesidades existentes, pero dadas las tendencias futuras, es poco probable que le salven a largo plazo. - Posibilidad de marchitarse en la vid.
Algunas organizaciones pueden iniciar proyectos de este tipo, llegar a la mitad y luego abandonarlos por completo hasta que se apruebe el presupuesto del año siguiente. - Diseño para pantallas pequeñas.
Dado que el enfoque inicial está en pantallas pequeñas, luego trasladar la interfaz a pantallas más grandes sin perder calidad puede ser un desafío.
Defectos - 50 tonos de imperfección.
Este enfoque puede fallar porque los usuarios tendrán que lidiar con una interfaz Frankenstein que es a la vez antigua y nueva. - La posibilidad de marchitarse en la vid.
Este tipo de proyectos necesitan objetivos finales claros o pueden terminar atrapados en el purgatorio para siempre. - Convivencia técnica.
¿Qué sucede cuando un módulo, que utiliza las últimas tecnologías y técnicas, choca frontalmente con un módulo obsoleto? Hay muchos desafíos arquitectónicos para este enfoque.
Esta es una traducción de un artículo titulado "Responsive Strategy" de Brad Frost. Traducido por UXDepot con la aprobación del autor.
PD de los traductores: Espero que hayas disfrutado el artículo. Estaremos encantados de que nos indique cualquier error en la traducción para que podamos corregirlo lo antes posible. Escríbanos a [correo electrónico protegido], Por favor:)
El diseño adaptable cambia el diseño de la página según el comportamiento del usuario, la plataforma, el tamaño de la pantalla y la orientación del dispositivo y es una parte integral del desarrollo web moderno. Le permite ahorrar significativamente y no tener que dibujar un nuevo diseño para cada resolución, sino cambiar el tamaño y la ubicación de los elementos individuales.
Este artículo analizará los elementos principales del sitio y cómo adaptarlos.
Ajustar la resolución de la pantallaEn principio, es posible dividir los dispositivos en diferentes categorías y diseñarlos para cada una de ellas por separado, pero esto llevará demasiado tiempo y ¿quién sabe cuáles serán los estándares dentro de cinco años? Además, según las estadísticas, disponemos de toda una gama de resoluciones diferentes:
Resulta obvio que no podremos seguir diseñando para cada dispositivo por separado. ¿Pero qué hacer entonces?
Solución parcial: flexibilizar todoPor supuesto, este no es un método perfecto, pero elimina la mayoría de los problemas.
Ethan Marcotte creó una plantilla sencilla que demuestra el uso del diseño responsivo:
A primera vista puede parecer que todo es fácil, pero no lo es. Echa un vistazo al logotipo:
Si reduce la imagen completa, las inscripciones se volverán ilegibles. Por lo tanto, para guardar el logo, la imagen se divide en dos partes: la primera parte (ilustración) se usa como fondo, la segunda (logotipo) cambia su tamaño proporcionalmente.
El elemento h1 contiene una imagen como fondo y la imagen está alineada con el fondo del contenedor (encabezado).
Imágenes flexiblesTrabajar con imágenes es uno de los problemas más importantes cuando se trabaja con diseño responsivo. Hay muchas formas de cambiar el tamaño de las imágenes y la mayoría de ellas son bastante sencillas de implementar. Una solución es utilizar el ancho máximo en CSS:
Img (ancho máximo: 100%;)
El ancho máximo de una imagen es el 100% del ancho de la pantalla o ventana del navegador, por lo que cuanto menor sea el ancho, más pequeña será la imagen. Tenga en cuenta que el ancho máximo no es compatible con IE, así que use ancho: 100%.
El método presentado es una buena opción para crear imágenes adaptativas, pero cambiando solo el tamaño dejaremos igual el peso de la imagen, lo que aumentará el tiempo de carga en dispositivos móviles.
Otra forma: imágenes responsivasLa técnica, introducida por Filament Group, no solo cambia el tamaño de las imágenes, sino que también comprime la resolución de las imágenes en pantallas pequeñas para acelerar la carga.
Esta técnica requiere varios archivos disponibles en Github. Primero tomamos el archivo JavaScript ( rwd-images.js), archivo .htaccess Y rwd.gif(archivo de imagen). Luego usamos algo de HTML para asociar resoluciones grandes y pequeñas: primero una imagen pequeña con un prefijo .r(para mostrar que la imagen debe responder), luego vincule a la imagen grande usando data-fullsrc:
Para cualquier pantalla con un ancho superior a 480 px, se cargará una imagen de mayor resolución ( grandeRes.jpg), y en pantallas pequeñas se cargará ( pequeñoRes.jpg).
El iPhone y el iPod Touch tienen una característica: un diseño creado para pantallas grandes simplemente se reducirá en un navegador de baja resolución sin desplazamiento ni diseño móvil adicional. Sin embargo, las imágenes y el texto no serán visibles:
Para resolver este problema, utilice la metaetiqueta:
Si la escala inicial es igual a uno, el ancho de las imágenes se vuelve igual al ancho de la pantalla.
Estructura de diseño de página personalizablePara cambios significativos en el tamaño de la página, es posible que deba cambiar la disposición general de los elementos. Esto se puede hacer cómodamente a través de un archivo de estilos separado o, más eficientemente, mediante una consulta de medios CSS. No debería haber ningún problema ya que la mayoría de los estilos seguirán siendo los mismos y sólo unos pocos cambiarán.
Por ejemplo, tiene un archivo de estilo principal que especifica #wrapper, #content, #sidebar, #nav junto con colores, fondo y fuentes. Si sus estilos maestros hacen que su diseño sea demasiado estrecho, corto, ancho o alto, puede identificarlo e incluir nuevos estilos.
estilo.css (principal):
/* Estilos básicos que heredará la hoja de estilos secundaria */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Elementos estructurales */ #wrapper( ancho: 80%; margen: 0 auto; fondo: #fff; relleno: 20px; ) #content( ancho: 54%; flotante: izquierda; margen derecho: 3%; ) # barra lateral izquierda (ancho: 20%; flotante: izquierda; margen derecho: 3%; ) #barra lateral derecha (ancho: 20%; flotante: izquierda; )
mobile.css (niño):
#wrapper( ancho: 90%; ) #content( ancho: 100%; ) #sidebar-left( ancho: 100%; claro: ambos; /* Estilos adicionales para el nuevo diseño */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( width: 100%; clear: ambos; /* Estilo adicional para nuestro nuevo diseño */ border-top: 1px solid #ccc; margin-top: 20px; )
En una pantalla ancha, las barras laterales izquierda y derecha encajan muy bien en los laterales. En pantallas más estrechas, estos bloques se ubican uno debajo del otro para mayor comodidad.
consultas de medios CSS3Veamos cómo puedes usar consultas de medios CSS3 para crear diseños responsivos. min-width especifica el ancho mínimo de la ventana o pantalla del navegador a la que se aplicarán ciertos estilos. Si algún valor está por debajo de min-width, los estilos se ignorarán. ancho máximo hace lo contrario.
@media pantalla y (ancho mínimo: 600px) ( .hereIsMyClass (ancho: 30%; flotante: derecha;) )
La consulta de medios solo funcionará cuando el ancho mínimo sea mayor o igual a 600 px.
@media screen y (ancho máximo: 600 px) ( .aClassforSmallScreens ( claro: ambos; tamaño de fuente: 1,3 em; ) )
En este caso la clase ( una clase para pantallas pequeñas) funcionará cuando el ancho de la pantalla sea menor o igual a 600 px.
Si bien el ancho mínimo y el ancho máximo pueden aplicarse tanto al ancho de la pantalla como al ancho de la ventana del navegador, es posible que solo necesitemos trabajar con el ancho del dispositivo. Por ejemplo, para ignorar los navegadores abiertos en una ventana pequeña. Puedes usar min-device-width y max-device-width para esto:
@media screen y (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen y (min-device-width: 768px) ( .minimumiPadWidth ( claro: ambos; margen inferior : 2px sólido #ccc;
Especialmente para iPad, las consultas de medios tienen la propiedad orientación, cuyos valores pueden ser cualquiera de los dos paisaje(horizontal), o retrato(vertical):
@media screen y (orientación: horizontal) ( .iPadLandscape ( ancho: 30%; float: derecha; ) ) @media screen y (orientación: vertical) ( .iPadPortrait ( claro: ambos; ) )
También puede combinar valores de consulta de medios:
@media screen y (ancho mínimo: 800 px) y (ancho máximo: 1200 px) ( .classForaMediumScreen (fondo: #cc0000; ancho: 30%; flotante: derecha;))
Este código sólo se ejecutará para pantallas o ventanas del navegador entre 800 y 1200 px de ancho.
Puede cargar una hoja específica con estilos para diferentes valores de consulta de medios como esta:
javascript
Si su navegador no admite consultas de medios CSS3, entonces el reemplazo de estilo se puede realizar usando jQuery:
$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Si el ancho es menos de 600 px, se utiliza la hoja de estilo móvil if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Si el ancho es mayor que 600 px, se usa la hoja de estilo del escritorio $("link").attr((href: "style.css")); ) ) ));
Visualización de contenido opcionalLa capacidad de reducir y reorganizar elementos para que quepan en pantallas pequeñas es excelente. Pero esta no es la mejor opción. Los dispositivos móviles suelen presentar un conjunto más amplio de cambios: navegación simplificada, contenido más enfocado, listas o filas en lugar de columnas.
Por suerte, CSS nos brinda la posibilidad de mostrar y ocultar contenido con una facilidad increíble.
Pantalla: ninguna;
display: none se utiliza para objetos que deben ocultarse.
Aquí está nuestro marcado:
Contenido principal Una barra lateral izquierda Una barra lateral derecha
estilo.css (principal):
#content( ancho: 54%; float: izquierda; margen-derecho: 3%; ) #sidebar-left( ancho: 20%; float: izquierda; margen-derecho: 3%; ) #sidebar-right( ancho: 20 %; flotante: izquierda; ) .sidebar-nav( pantalla: ninguna; )
móvil.css (simplificado):
#content( ancho: 100%; ) #sidebar-left( mostrar: ninguno; ) #sidebar-right( mostrar: ninguno; ) .sidebar-nav( mostrar: en línea; )
Si se reduce el tamaño de la pantalla, puede, por ejemplo, utilizar un script o un archivo de estilo alternativo para aumentar el espacio en blanco o reemplazar la navegación para mayor comodidad. Así, al tener la posibilidad de ocultar y mostrar elementos, cambiar el tamaño de imágenes, elementos y mucho más, podrás adaptar el diseño a cualquier dispositivo y pantalla.
Cómo utiliza Yandex sus datos y el aprendizaje automático para personalizar los servicios.
Enviar su buen trabajo en la base de conocimientos es sencillo. Utilice el siguiente formularioLos estudiantes, estudiantes de posgrado y jóvenes científicos que utilicen la base de conocimientos en sus estudios y trabajos le estarán muy agradecidos.
Publicado en http://allbest.ru
1. Modernización adaptativa
2. Sitios móviles responsivos
3.Diseño responsivo de forma nativa para dispositivos móviles
4. Estrategia por fases
1. Modernización adaptativa
El rediseño responsivo es el proceso de tomar un sitio web existente solo para escritorio y esencialmente hacerlo responsivo.
Por el momento, alrededor del 11-12% de los 100.000 sitios más visitados son responsivos, y no hay duda de que este número aumentará en los próximos años. A medida que más organizaciones se arremangan para abrazar las realidades de la web multidispositivo, vale la pena considerar algunas estrategias utilizadas para alcanzar el nirvana:
Cuando se trata de sitios ya preparados (particularmente los comerciales), los equipos no siempre tienen la oportunidad de descartarlo todo y construir de nuevo. Para la mayoría de las organizaciones, ni siquiera se considera la creación a gran escala de un nuevo diseño desde cero. Es por eso que la modernización responsiva es un enfoque popular para crear una buena experiencia para dispositivos móviles.
Ventajas:
· Relativamente rápido. Ya que no requiere reconstruir todo desde cero.
· Familiar. No confunde a los usuarios. Las personas han pasado años acostumbrándose a la interfaz y, al modernizar la existente, las organizaciones mantienen un enfoque familiar al tiempo que mejoran la vida de las personas con dispositivos móviles.
· Organizacionalmente más rápido. Actualizar la interfaz es más seguro y sencillo que empezar desde cero.
Defectos:
· Afecta sólo a una pequeña parte. 10 litros de agua en una jarra de tres litros. mucho contenido
· Productividad.
· Peor soporte. Las consultas de medios, originalmente diseñadas para computadoras de escritorio, no son compatibles con la mayoría de los dispositivos móviles.
2. Sitios móviles responsivos
Los sitios web móviles responsivos son la práctica de crear un sitio web separado en el formato "m.yourdomain.ru" utilizando técnicas de diseño responsivo.
La versión móvil le brinda la oportunidad de plantar una semilla que crecerá a partir de su sitio web heredado. Con el tiempo, un sitio obsoleto se puede eliminar y el sitio evolucionará desde ser móvil primero, responsivo y teniendo en cuenta las tendencias futuras.
Ventajas:
· Menor riesgo. El tráfico desde dispositivos móviles es minoritario.
· Un sitio móvil responsivo puede ser un excelente entorno de pruebas para el aprendizaje.
· Eliminar elementos innecesarios. Este enfoque ofrece una gran oportunidad para que los equipos se pregunten "¿realmente necesitamos esto?" y también se centren en el rendimiento.
· El futuro son los sitios web móviles primero. Aunque inicialmente carecen de contenido o funcionalidad, con suficiente tiempo y esfuerzo estos sitios móviles pueden eventualmente reemplazar a sus antecesores de página completa.
Defectos:
· Este sigue siendo un sitio móvil. Ya sea responsivo o no, este enfoque aún conserva una gran cantidad de desventajas de los sitios móviles: problemas con la redirección de URL, administración de contenido, contenido consistente, coherencia, optimización SEO y otros.
· Correcciones temporales. Muchos sitios móviles se crean como una curita para detener el sangrado. Estos sitios se crean con el objetivo de descargar el creciente tráfico procedente de dispositivos móviles. Es posible que estas soluciones aún satisfagan las necesidades existentes, pero dadas las tendencias futuras, es poco probable que le salven a largo plazo.
· Posibilidad de marchitarse en la vid.
· Diseño para pantallas pequeñas. Dado que el enfoque inicial está en pantallas pequeñas, luego trasladar la interfaz a pantallas más grandes sin perder calidad puede ser un desafío.
3. Diseño responsivo de forma nativa para dispositivos móviles
diseño de interfaz de teléfono inteligente
“El móvil primero” es un principio que implica diseñar una interfaz que tenga en cuenta las limitaciones del entorno móvil (pantalla pequeña, poco ancho de banda, etc.), pero aproveche al máximo las pantallas grandes.
Ventajas:
· Comienza con nuevas fuerzas. Primero el móvil: un nuevo comienzo.
· Mejor soporte. Soporte para más dispositivos móviles, especialmente los más antiguos que no admiten consultas de medios.
· Productividad. Si bien el rendimiento del sitio es principalmente una función de su implementación, los diseños responsivos móviles brindan a los equipos la oportunidad de centrarse en el rendimiento desde el principio.
· Teniendo en cuenta todo y de una vez. El diseño móvil primero (a pesar de su nombre) puede acomodar una gran cantidad de resoluciones, en lugar de apuntar solo a una clase de dispositivo.
· Diseño preparado para el futuro.
Defectos:
· Toma mucho tiempo
Cambio de conciencia
· Difícil desde el punto de vista organizativo
· Desconocido
4. Estrategia por fases
Una estrategia de diseño responsivo paso a paso divide una campaña a gran escala en varios pasos. Al igual que con la modernización (estas estrategias no son mutuamente excluyentes), puede que no sea posible hacer un rediseño a gran escala, razón por la cual algunas organizaciones lo hacen paso a paso. Existen varios tipos de creación paso a paso de una interfaz adaptativa: Página por página.
Ventajas:
· Perceptible
· Oportunidad de aprender a ser flexible. Puede aprender todo sobre la creación de interfaces responsivas y luego utilizar este conocimiento para el resto del sitio.
· Mayores posibilidades de lanzamiento
Defectos:
Falta de integridad
· Posibilidad de marchitarse en la vid.
Publicado en Allbest.ru
Documentos similaresPrincipios y métodos para desarrollar interfaces de usuario, reglas para su diseño. Formas clásicas de crear prototipos de interfaces de usuario en Microsoft Expression Blend. Trabajar con texto y gráficos en Expression Blend.
trabajo del curso, agregado 19/03/2012
La historia de la creación de Internet y sus principios clave: protocolos, servicios, servicios. Definición de los conceptos de adicción a Internet, trolling, cyberpunk y censura. Clasificación y ordenación de sitios web, desarrollo de su diseño. Navegadores Mozilla Firefox y Opera.
resumen, añadido el 10/11/2011
Revisión de métodos y herramientas para la creación y diseño de sitios Web. Lenguajes de programación para la creación de sitios web. Análisis de las ventajas y desventajas de los sistemas de gestión de contenidos CMS. Desarrollo de diseño y maquetación de sitios web. Cálculo de costes de desarrollo de productos.
tesis, añadido el 02/06/2016
Análisis de interfaces gráficas de usuario de sistemas modernos de optimización de programas. Creación de un modelo matemático y algoritmo del sistema de control SBkZ_PP, su diagrama arquitectónico-contextual. Documentación técnica del software.
tesis, agregada el 18/04/2012
Revisión y análisis de las tecnologías utilizadas, contenidos y diseño de los sitios web universitarios, incluidos los creados sobre la base de un CMS. Investigación del contenido del sitio web PRIPIT y las necesidades de información de varios grupos de sus visitantes potenciales. Desarrollo de diseño de sitios web.
tesis, agregada el 11/03/2010
Componentes gráficos de pantalla, objetos del sistema y funciones. Un sistema de medios para la interacción del usuario con un dispositivo. Historia de las interfaces gráficas de usuario de las computadoras personales, su clasificación. Sistema de ventana X.
presentación, añadido el 22/05/2012
Seleccionar métodos para construir y diseñar una página de Internet para desarrollar un sitio web para una empresa comercial. Características de trabajar con elementos de diseño web: fuente, títulos, gráficos. Regulación legal de la creación y uso de sitios de Internet.
tesis, agregada el 11/11/2010
Características de las interfaces de interacción de información de sistemas jerárquicos informáticos. El principio de "retroalimentación". Propiedades, simplicidad y reglas para la creación de interfaces hardware-software. Nuevas direcciones en el diseño de sistemas informáticos.
trabajo del curso, añadido el 05/01/2017
Análisis de los medios del negocio de consultoría: una revisión de lenguajes de programación y software para la creación de sitios web, sistemas de información y sitios web de empresas de consultoría. Modelado de procesos de negocio. Desarrollo de una presencia en Internet.
tesis, agregada el 11/04/2012
Desarrollo de un servicio de Internet para crear una interfaz visual para los servicios del sistema de una empresa de hosting. Criterios para evaluar la interfaz y direcciones de desarrollo. Escritorio GlideOS. Selección de arquitectura de servicio, lenguaje de programación y métodos de comunicación.