Diseño receptivo en el mundo real (Parte 2: para diseñadores y codificadores)

El diseño receptivo como concepto es un desafío para la mayoría de las personas. En Diseño receptivo en el mundo real Parte 1 , escribí a los dueños de negocios y los tomadores de decisiones sobre cómo el diseño receptivo puede aplicarse a las empresas reales en este momento, por lo que me concentré en la teoría y el concepto de diseño receptivo. El otro lado del diseño receptivo es la implementación, y eso viene con otro conjunto de preguntas y desafíos para los diseñadores y codificadores que necesitan traducir sus patrones y hábitos de pensamiento actuales en soluciones de mentalidad receptiva. En Brolik tenemos varios sitios receptivos en nuestros cinturones, y con una plataforma receptiva que ha estado evolucionando con cada sitio, hemos aprendido algunos trucos que pueden ahorrar tiempo valioso y tal vez incluso todo su proyecto receptivo. Consejo receptivo #1: Use píxeles para márgenes, botones e entradas pequeñas Uno de los conceptos de respuesta básicos es el estilo porcentual. Esto es lo que permite un ajuste general de un diseño a cualquier pantalla. Sin embargo, uno de los aspectos más desafiantes de la implementación de un diseño receptivo es el estilo porcentual. Es fácil tener un menú cubrir un tercio del ancho de su sitio o tener su fuente de encabezado un 150% más grande que la fuente de su párrafo (usando EMS Por supuesto), pero tratar de usar porcentajes para cada último margen, ancho y altura lo volverá loco a usted y a su cliente. Si un botón tiene cinco píxeles de relleno en su archivo de diseño, no hay daño en la codificación de cinco píxeles de relleno en su hoja de estilo. Todavía se verá bien en cualquier dispositivo. Al principio, tratamos de usar porcentajes para todo, pero cuando tiene porcentajes dentro de los porcentajes con casos de borde y cambios únicos, su diseño comienza a ponerse salvaje. Su cuadrícula sufrirá, incluso si solo está en algunos tamaños de pantalla. En particular, comenzará a ver diferencias de tamaño de píxeles y cajas y bordes desalineados ... la pesadilla de un diseñador. En algunos casos, codificar esos pequeños valores de píxeles como píxeles reales puede ayudarlo a su diseño. Si tiene un botón con cinco píxeles de relleno, esos cinco píxeles se verán igual de bien en un teléfono. Y tal vez eso sea más grande de lo que sería el valor porcentual, lo que funciona muy bien para un botón que se presiona con un dedo grande. Recuerde que si se ve bien pero diferente en una pantalla móvil, adáptelo. Después de todo, ¡este es un diseño receptivo! Consejo receptivo #2: Asegúrese de que sus estilos de diseño estén separados de sus estilos de diseño Este nos llevó un tiempo dominar, pero es bastante simple. Cualquier estilos o contenedores que estén definiendo su diseño receptivo (en nuestro caso, es una hoja de estilo separada que usa una cuadrícula de 16 columnas con todas las consultas de medios necesarias) debe estar 100% separado de cosas como bordes, relleno, etc. En nuestro caso, las columnas en su mayoría declaran un ancho porcentual. Si necesita estilos visuales en un elemento de contenedor que esté definiendo el diseño receptivo, simplemente envuelva el DIV de estilo con el diseño Div. Puede agregar un poco de marcado adicional, pero vale la pena la molestia una vez que comience a hacer cambios y ajustes para diferentes ancho de pantalla. do

 


    

        El marcado de estilo se realiza en este div, no a su contenedor.
    

No

 


    Su ancho es del 50%, pero el relleno de 10 píxeles y el borde de 1 píxel se suman a eso.

Consejo receptivo #3: JavaScript "Consultas de medios" En el mundo real, el diseño receptivo nunca funcionará solo con CSS. Los sitios web reales y robustos generalmente tienen una cantidad decente de JavaScript e interacción, cambiando DOM Elementos después de que la página se cargue inicialmente. Construimos algunos "ganchos" de JavaScript en nuestra plataforma que nos ayudan a reaccionar al tamaño de la pantalla para hacer ajustes más avanzados. Esto es crucial para satisfacer a un cliente que solo se preocupa por el producto final y no con el código que entra en él. (¿Quién puede culparlos?) Te dejaré entrar en una forma rápida de lograr esto. Agregue algunas clases a las consultas de los medios en su hoja de estilo. Para mantenerlo básico, una clase .nomobile se ocultará para los tamaños de pantalla móvil,. Notablet está oculto para tabletas y .Nodesktop está oculto para los tamaños de escritorio (definitivamente querrá expandirse en esto). Luego agregue una de cada una de esas clases en su pie de página y use JavaScript para descubrir el tamaño de la pantalla actual en función de cuáles de esos elementos se muestran/ocultan. Para averiguar si está en una pantalla de tamaño móvil, en jQuery, puede hacer

Consejo de respuesta #4: No tengas miedo de las consultas de medios aleatorias (al final del proyecto) El consejo #4 es importante para finalizar un diseño receptivo. Siempre hay pequeños problemas extraños o problemas de estilo en varios tamaños de pantalla aleatorios. Su diseño puede verse bien en su iMac de 27 ", pero cuando su cliente lo ve en su computadora portátil, el menú cae a dos líneas o un par de botones se quedan fuera de la alineación. Además de los valores de píxeles de codificación dura (consulte el consejo #1), no tenga miedo de agregar muy específicas consultas de los medios para manejar estos casos de borde. No abogaría esto en el comienzo de un proyecto. Esto es para que todo sea hermoso, excepto que es un pequeño caso, donde es un pequeño auxilio que es un auxilio que es una pequeña que es una pequeña consulta de escritorio. La consulta de medios del tamaño de una tableta (por ejemplo). Si intenta regresar y reelaborar la estructura de una sección completa para acomodar esa caja de un solo borde, puede terminar comprometiendo su diseño para la mayoría de los tamaños de pantalla, cuando en su lugar puede hacer un "fijación rápida" solo a donde está roto. Dicho esto, usa esta técnica con discreción. Consejo receptivo #5: Coloque los archivos vectoriales en su diseño de Photoshop siempre que sea posible Al diseñar para responder, debe elegir un tamaño inicial al que diseñe. Si diseña a 1200 píxeles de ancho, no hay razón para que no pueda poder escalar su sitio hasta 1400 píxeles y hacer que funcione también. Por esta razón, he aprendido que cualquier gráfico que sea vectorial para empezar debe colocarse en Photoshop como un objeto inteligente, y luego guardar para la web más grande de lo necesario del archivo vectorial original. Es un pequeño consejo, pero tiene una gran recompensa. Solo recuerda vigilar a los archivos. Esto es útil para algo más que solo hacer que su sitio sea más grande. Por ejemplo, es posible que tenga un logotipo en la parte superior izquierda de un tamaño de pantalla de escritorio que llena todo el tamaño de la pantalla móvil. Si ese ancho de pantalla móvil es más grande que el ancho de su logotipo desde el archivo de Photoshop, entonces perderá calidad en la pantalla móvil. Se tarda un poco más en guardar sus archivos para la web de esta manera, pero vale la pena. Consejo receptivo #6: ¿Tamaño de imagen? El consejo #6 no es un consejo, en realidad. Es más una advertencia de advertencia sobre las imágenes y el tamaño de la imagen. Este es un problema particularmente pertinente cuando se trata de sitios dirigidos por CMS donde su cliente está cargando imágenes a través de una interfaz de administración. Las imágenes en el diseño web receptivo han sido un tema muy discutido en la web. (Leer Parte 1 y Parte 2 de este artículo). No existe una solución única sobre cómo debe tamaño las imágenes, pero es un problema conocido que si usa un tamaño de imagen enorme y se establece una propiedad máxima: 100% de propiedad, está haciendo una injusticia a los usuarios móviles que no quieren que el overheado y el procesamiento de la carga de la gran cantidad de imágenes y se establezcan una propiedad máxima. Cada situación de imagen es diferente, y a veces necesita escalar, otras veces que recorte, y otras veces centra una imagen que es más pequeña que su contenedor. Mi consejo? Solo vigila tus imágenes. Y probar a fondo. Si su sitio es lento en un teléfono, haga algunos alojamientos. Si descubre una gran solución, entonces, deje un comentario aquí y enseñe a todos los demás. (Gracias de antemano.) Me gustaría terminar esto con dos pensamientos para ayudarlo a comenzar con un proyecto de diseño receptivo. Primero es que no importa cuán bueno sea el diseño receptivo, siempre es más fácil quedarse con un Diseño minimalista . Solo estás eliminando posibles problemas. Todos sabemos que no siempre es una opción, especialmente cuando se trabaja para los clientes, pero si puede hacerlo, hágalo. El segundo pensamiento es que no importa cuán desafiante y/o frustrante sea su proyecto de diseño receptivo, nunca pierda de vista el panorama general ... ese diseño receptivo es inteligente, eficiente y fundamentalmente "mejor". En estos días, se está convirtiendo en una tendencia conocida que El diseño es importante , y el diseño receptivo es un buen diseño. Combinar la gran función de receptiva con el gran diseño que está acostumbrado a producir es difícil, pero vale la pena, para sus clientes y para el futuro de la web.