Das Web-Design responsivo es una gran solución para nuestro problema de pantallas múltiples, pero es difícil acceder a él desde la perspectiva de la impresión. Sin tamaño de página fijo, sin milímetros ni pulgadas, sin restricciones físicas contra las que luchar. Diseñar en píxeles solo para computadoras de escritorio y dispositivos móviles también ist die Vergangenheit, ya que cada vez más dispositivos pueden abrir un sitio Netz. Por lo tanto, aclaremos algunos principios básicos del diseño web responsivo.
Responsive Webdesign vs. adaptiv
Es mag gleich erscheinen, ist es aber nicht. Beide Ansätze ergänzen sich, daher gibt es keinen richtigen oder falschen Weg, dies zu tun. Lassen Sie den Inhalt entscheiden.
Der Fluss
A medida que los tamaños de pantalla se hacen más pequeños, el Inhalt comienza a ocupar más espacio vertical y todo lo que está debajo se empujará hacia abajo, se llama flujo. Puede ser difícil de entender si está acostumbrado a diseñar con píxeles y puntos, pero tiene mucho sentido cuando se acostumbra.
Relative Einheiten
El lienzo puede ser un escritorio, una pantalla móvil o cualquier cosa intermedia. La densidad de píxeles también puede variar, por lo que necesitamos unidades que sean flexibles y funcionen en todas partes. Ahí es donde las unidades relativas como porcentajes son útiles. Entonces, hacer algo con un ancho del 50% significa que siempre ocupará la mitad de la pantalla (o ventana gráfica, que es el tamaño de la ventana abierta del Browser).
Schnittpunkte
Los puntos de interrupción permiten que el diseño cambie en puntos predefinidos, es decir, tener 3 columnas en un escritorio, pero solo 1 columna en un dispositivo móvil. La mayoría de las propiedades CSS se pueden cambiar de un punto de interrupción a otro. Por lo general, donde pones uno depende del contenido. Si se rompe una oración, es posible que deba agregar un punto de interrupción. Aber Vorsicht: Es kann schnell chaotisch werden, wenn es schwer zu verstehen ist, was was beeinflusst.
Maximal- und Minimalwerte
Manchmal ist es großartig, dass sich Inhalte über die gesamte Breite eines Bildschirms erstrecken, wie auf einem mobilen Gerät, aber es ist oft weniger sinnvoll, denselben Inhalt über die gesamte Breite Ihres Fernsehbildschirms zu haben. Deshalb helfen die Min / Max-Werte. Zum Beispiel würde eine Breite von 100% und eine maximale Breite von 1000 px bedeuten, dass der Inhalt den Bildschirm ausfüllt, jedoch 1000 px nicht überschreitet.
Verschachtelte Objekte
Erinnerst du dich an die relative Position? Es wäre schwierig, viele Gegenstände voneinander abhängig zu machen. Daher ist es viel verständlicher, ordentlicher und ordentlicher, die Gegenstände in einen Behälter zu wickeln. Hier können statische Einheiten wie Pixel helfen. Sie sind nützlich für Inhalte, die Sie nicht skalieren möchten, z. B. Logos und Schaltflächen.
Zuerst mobil oder Desktop
Technisch macht es keinen großen Unterschied, ob ein Projekt von einem kleineren Bildschirm zu einem größeren (zuerst mobil) oder umgekehrt (zuerst Desktop) startet. Die Zukunft sind jedoch mobile Geräte. Menschen beginnen oft an beiden Enden gleichzeitig, sodass Sie wirklich sehen müssen, was für Sie am besten funktioniert.
Webfonts vs Systemfonts
Willst du eine haben Zukunft oder Didot de aspecto genial en tu sitio web? ¡Usa webfonts! Aunque se verán impresionantes, recordemos que cada uno se descargará y cuantas más tengas en tu web, más tardará en cargar la página. Las fuentes del sistema, por otro lado, son muy rápidas, excepto cuando el Nutzername no lo tiene localmente, recurrirá a una fuente predeterminada.
Bitmap gegen Vektorbilder
Hat Ihr Symbol viele Details und einige ausgefallene Effekte? Wenn ja, verwenden Sie eine Bitmap. Wenn nicht, sollten Sie ein Vektorbild verwenden. Verwenden Sie für Bitmaps ein JPG, PNG oder GIF. Für Vektoren ist die beste Wahl eine SVG- oder Symbolschriftart. Jeder hat einige Vor- und Nachteile. Betrachten wir jedoch die Größe: Kein Bild sollte ohne Optimierung online sein. Eine Seite mit sehr schweren Fotos, die nicht nur die Benutzererfahrung verschlechtert, sondern auch Ihre organische Positionierung afectado. Los vectores, por otro lado, a menudo son pequeños, pero algunos Browser más antiguos no lo admiten. Además, si tiene muchas curvas, puede ser más pesado que un mapa de bits, así que elija con prudencia.
