¿Qué cuidado se debe tener al escribir CSS para una página web cuando también quiero que una página responda, usando CSS?

Si bien el diseño receptivo se realiza en gran medida a través de CSS, la esencia del mismo es exactamente que es diseño : pensamiento cuidadoso, visualización y planificación de cómo desea alcanzar su (s) objetivo (s).

Antes de comenzar a escribir CSS, al menos debe tener un modelo mental de cómo responderá su sitio a los cambios en el tamaño de la ventana gráfica. Dependiendo de su flujo de trabajo, usted u otra persona posiblemente visualizaron este modelo y lo discutieron con un cliente para obtener la aprobación.

Su trabajo es mirar esas imágenes y traducir esto en una estructura abstracta para su CSS. Si comenzara con el escritorio, bajaría de la pantalla más grande a un tamaño más pequeño a través de varios bloques de consulta de medios CSS que representan los diferentes puntos de interrupción visualizados en el diseño.

No empieces a improvisar sin una buena organización. Antes de que te des cuenta, tu CSS se habrá vuelto tan complejo que será muy difícil cambiarlo.

  • Utilice algún tipo de enfoque modular, por ejemplo, dividiendo sus bloques de consulta de medios en varios archivos CSS.
  • Mire conceptos como SMACSS para modularizar aún más su código.
  • Use un preprocesador como SASS.
  • Haz la vida más fácil usando herramientas como CodeKit o Grunt.

¿Qué cuidado se debe tener al escribir CSS para una página web cuando quiero que una página también responda, usando CSS?”

Todo el cuidado.

CSS no es lo único a tener en cuenta. La estrategia de contenido juega un papel importante en la forma en que las cosas pueden / se desarrollarán. Pensar desde una ‘pantalla pequeña primero’: la mentalidad en la que está limitado por un dispositivo ayudará a garantizar que esté entregando el contenido central y no solo la pelusa.

Su hoja de estilo puede comenzar con un diseño simplificado y acumularse a medida que se vuelve ‘feo’ o ya no se adapta al contenido.

Además de CSS, debes pensar en patrones alternativos y cómo lograrlo con JavaScript. Es posible que desee ‘plegar’ parte del contenido o crear menús para navegar por el sitio de manera diferente a un teléfono. Tampoco desea cargar imágenes grandes en un teléfono, en comparación con una computadora de escritorio más elegante. Verificar el tamaño del dispositivo a través de windowWidth y otras consultas puede ayudarlo a tomar decisiones basadas en el contexto.

En algún momento, la naturaleza compleja de un sitio flexible será un poco más difícil de mantener. O no. Si primero trabaja desde una pantalla pequeña y usa un preprocesador elegante como un lápiz, puede crear estilos de letra y mixins para describir claramente su sitio y yo diría que es mucho más fácil de mantener y agradable de trabajar. Flexbox también es una nueva herramienta útil que simplifica algunas de las técnicas de flotación que habíamos estado utilizando durante la última década.

Ejemplo de patrones de tipo de lápiz

Si bien las consultas @media son una herramienta clave para escribir reglas de estilo adaptativo, el marcado de calidad y la organización reflexiva del contenido son probablemente aún más importantes.

Aquí hay una lista de libros cortos sobre los temas:

  • Diseño web receptivo por Ethan Marcotte
  • Diseño Responsive Responsible de Scott Jehl
  • Estrategia de contenido para móviles de Karen McGrane
  • Yendo receptivo por Karen McGrane
  • Diseño receptivo: patrones y principios de Ethan Marcotte