La mayoría de los sitios web que utilizan responsive design lo están usando incorrectamente, lo que genera problemas. El enfoque general de responsive el diseño es perezoso, y si adopta ese enfoque, algunos de sus responsive los sitios funcionarán perfectamente, y muchos de ellos no. Para aquellos que funcionan perfectamente, probablemente será cuestión de suerte.
El concepto de responsive el diseño es simple, pero su misma simplicidad es lo que lleva a las personas a cometer errores tan fácilmente. Los diseñadores con años de experiencia se han acostumbrado a diseñar para el desktop, por lo que normalmente planificarán un diseño basado en un desktop diseño.
Desktop Los diseños se diferencian de los diseños para tabletas y dispositivos móviles porque normalmente tienen varias columnas, normalmente incluyen grandes cantidades de espacios en blanco y todo es simplemente "grande", a falta de una palabra mejor. Si responsive se utilizan técnicas de diseño, se supone que este diseño de varias columnas se divide en una sola columna.
Si eso es todo tu responsive el diseño realmente hace cuando se ve en un dispositivo móvil, es posible que tenga un problema. La magnitud del problema depende de tu actitud, pero los buenos diseñadores se preocupan por una buena UX. Se preocupan aún más por la mala UX. Si su sitio tiene una mala experiencia de usuario y quiere ser un buen diseñador, entonces necesita arreglarlo.
Este problema de contraer un diseño de varias columnas en una sola columna es que no funciona de forma proporcional. Si tiene que encoger algo horizontalmente y no realiza ningún otro cambio, obviamente se expandirá verticalmente.
Vierta agua de un vaso corto y grueso en uno alto y delgado, y el agua tomará la forma del vaso alto y delgado, mientras que el volumen de agua permanece exactamente igual. Lo que los diseñadores deben entender es que con un sitio web, necesitamos el volumen para cambiar. Normalmente no es una buena idea cambiar la forma, pero mantener el contenido exactamente lo mismo. Alguien tiene que ceder.
Alguien que realmente se haya ganado el título de diseñador entenderá que esto representa un problema a resolver, y lo que los diseñadores realmente hacen es encontrar soluciones a los problemas. Por lo tanto, es el trabajo perfecto para usted encontrar la mejor manera de entregar el contenido central del sitio sin convertir la experiencia del usuario en un festival de desplazamiento frustrante. Estas son algunas de las cosas que vale la pena considerar al desglosar un desktop diseño en un diseño móvil:
1. "Mobile First" es estúpido
Lo siento, pero lo es. Todo el mundo está repitiendo esto como un loro, pero como concepto no es muy útil porque si realmente diseñas "móvil primero", será una pesadilla intentar escalarlo de nuevo a un desktop diseño a menos que se quede con un diseño de columna puramente único hasta el final.
El mejor enfoque es diseñar físicamente al menos tres (y hasta 11) diseños diferentes. Los mínimos que puede considerar incluyen:
- Desktop
- Paisaje móvil
- Retrato móvil
Si quieres ser un poco más completo, también debes considerar:
- Tableta de paisaje
- Tableta de retrato
Y la lista completa, si quieres estar absolutamente completo sería:
- Enorme Desktop
- Ordinario Desktop
- Tableta de paisaje grande
- Tableta de retrato grande
- Tableta de paisaje pequeño
- Tableta de retrato pequeño
- Gran paisaje móvil
- Móvil de retrato grande
- Pequeño paisaje móvil
- Pequeño retrato móvil
- Diminuto / Usable
Con tantas posibilidades diferentes, es obvio por qué un enfoque perezoso de “talla única” es tan tentador, pero también es obvio por qué hay tantas formas de arruinarlo.
2. Domina ese extenso pie de página
La desktop el diseño incluye uno de esos enormes pies de página gruesos con un montón de enlaces internos? Genial, eso probablemente será muy útil en un desktop. En un móvil, se ve ridículo, y es algo más que un toque molesto. Puede diseñar pies de página completamente diferentes para cada punto de interrupción del dispositivo. Simplemente haga que esos enlaces de pie de página estén disponibles en un cuadro de diálogo modal y todos ganan.
3. Acepta algunas peculiaridades menores en dispositivos oscuros
Si un dispositivo en particular no es común, entonces no es tan malo si hay algunas peculiaridades en el diseño que aparecen solo cuando se visualiza en ese dispositivo. Cuanto más popular sea un dispositivo, más tendrás que esforzarte para deshacerte de cualquier peculiaridad que aparezca en él.
4. Puedes ocultar contenido que no contribuya al mensaje central.
La parte más importante de un sitio es el mensaje central. Sí, en algunos sitios, la parte más importante es la publicidad y solo existen para entregar esa publicidad, pero si tiene que elegir entre mostrar el mensaje central o mostrar la publicidad, elija el mensaje. Es más probable que Google lo considere como persona non grata si oculta el contenido principal y luego publica un montón de anuncios. Es porque ese contenido principal es en lo que Google lo indexó, y cuando ese contenido no se muestra, Google lo ve como engañoso.
Además, cosas como las imágenes que son puramente decorativas o estéticas, pero que no contribuyen significativamente al mensaje central, son candidatas para la reducción u ocultación del todo.
Algunas personas han propuesto que ocultar contenido es "castigar" a los usuarios de dispositivos móviles, pero esta es una noción un poco absurda. La realidad es que está ocultando el contenido porque está ahí para mejorar la desktop experiencia, pero no contribuye lo suficiente al mensaje central del sitio para que sea necesario
5. Puedes usar fondos alternativos
Recientemente, me dieron una tarea ridícula en la que el propietario del sitio había pagado por un fondo en particular y quería que todo el contenido se adaptara a ese fondo. Los elementos de viñeta tenían que tener un número muy exacto de caracteres, el número total de líneas tenía que ser exacto, etc.
Esta es definitivamente una mala práctica en diseño web, porque deberías nunca diseñar contenido para adaptarse a un diseño. El diseño debe hacerlo estar diseñado para contener el contenido. Si por alguna razón el diseño no puede contener el contenido, entonces se debe rediseñar el diseño, no el contenido. Es muy posible utilizar diferentes fondos para diferentes dispositivos. Eres diseñador. Use su imaginación.
El contenido es la sangre vital de un sitio web, y modificarlo o restringirlo en función de las limitaciones de un diseño es una clara señal de afición por parte del propietario del sitio, y una señal de que el diseño estaba mal diseñado en el primer momento. sitio. Respete sus principios, porque ese cliente va a ser un problema si acepta.
El cliente siempre tiene la razón, excepto cuando ese cliente es un cliente de diseño web. Los clientes rara vez saben qué es lo mejor para ellos, y es importante afirmarse como un diseñador web que sabe cómo entregar el resultado correcto para el cliente. Otrowise te arriesgas a crear otro sitio web abominación.
6. Controle manualmente el orden de colapso (o evite las referencias espaciales dentro del contenido)
Este es un problema complejo. El orden de colapso de un sitio depende del orden en el que se apilan los divs. Debe apilar sus divs en el orden correcto para que colapsen en el orden correcto.
Uno de los problemas que surgen de los creadores de sitios web WYSIWYG de arrastrar y soltar es que normalmente no puede dictar en qué orden se apilan los divs, y en los muy raros casos en que puede hacer eso, su arduo trabajo se deshace cada vez realiza la edición más pequeña y tendrá que volver a ingresar y hackear el código fuente nuevamente.
Si no controlas el orden de colapso, esta imagen explica claramente qué puede salir mal. Además, debe evitar hacer referencias espaciales (como "en la columna de la izquierda"), ya que en un móvil lo que estaba a la izquierda o la derecha se puede desplazar hacia arriba o hacia abajo, más Si hace que el lector piense que es lo suficientemente importante como para desplazarse para ver, entonces tendrán que retroceder de nuevo, y eso no está bien.
7. Es posible que necesite diferentes tamaños de fuente para diferentes diseños
Es fácil controlar el tamaño de fuente con CSS y puede establecer diferentes tamaños de fuente e incluso diferentes tipos de fuentes (si se ven mejor) para tamaños de pantalla particulares. Puede encontrar el tamaño de visualización con consultas de medios CSS, y luego modifica el tamaño de fuente o el tipo de fuente para que tenga valores que muestren el contenido con la máxima ventaja en el tipo de dispositivo al que se dirige.
8. Es mejor usar responsive imágenes
Todas las imágenes deben ser responsive cuando sea posible. Esto trae consigo que en ocasiones se pierda el detalle de una imagen si se reduce demasiado la escala. Una solución a este problema es hacer que se pueda hacer clic en la imagen para que el usuario pueda ver una versión ampliada de la imagen separada del contenido. La forma normal de hacer esto es a través de un cuadro de diálogo modal.
imagen del encabezado cortesía de
Móvil primero solo significa que en la base de código, el css "predeterminado" es para dispositivos móviles y crea cambios para más amplio formats de allí. Realmente no entiendo tu primer punto.