Website-Entwicklungstechnologie ist ein sehr facettenreicher Prozess. Dennoch können alle seine Phasen in zwei Hauptkomponenten unterteilt werden - die funktionale und die äußere Hülle. Oder, wie unter Webmastern üblich, Backend bzw. Frontend. Leute, die ihre Websites bei Webentwicklungsstudios bestellen, glauben oft naiv, dass es sich lohnt, sich nur auf die Funktionalität zu konzentrieren, und dies wird die richtige Entscheidung sein. Dies trifft jedoch in sehr, sehr seltenen Fällen zu, normalerweise für Startup-Projekte in der Beta-Testphase. Ansonsten müssen das Grafikdesign und die Benutzeroberfläche lediglich den Webentwicklungsstandards entsprechen und bequem sein.
Der erste Eckpfeiler, dem der Schnittstellendesigner oder Designer gegenübersteht, ist die Breite des Seitenlayouts. Doch dafür muss man Schnittstellen zeichnen. Rein intuitiv ergeben sich zwei Ansätze - entweder erstellen Sie separate Layouts für jede gängige Bildschirmauflösung oder erstellen Sie eine Version der Website für alle Displays. Und beide Optionen werden falsch sein, aber das Wichtigste zuerst.
Standardbreite der Website in Pixelfür Runet
Vor der Entwicklung des adaptiven Layouts war die Entwicklung einer Website mit einer Breite von tausend Pixeln ein Massenphänomen. Diese Zahl wurde aus einem einfachen Grund gewählt - damit die Seite in jeden Bildschirm passt. Und das hat seine eigene Logik, aber nehmen wir an, dass eine Person immer noch mindestens einen HD-Monitor auf einem Desktop hat. In diesem Fall erscheint Ihr Layout wie ein winziger Streifen in der Mitte des Bildschirms, auf dem alles auf einem Haufen zusammengeklebt ist, und an den Seiten gibt es einen riesigen ungenutzten Platz. Nehmen wir nun an, dass eine Person auf einem Tablet mit einem 800 Pixel breiten Bildschirm auf Ihre Website zugreift und in den Einstellungen "Vollständige Website anzeigen" aktiviert ist. In diesem Fall wird Ihre Seite auch falsch angezeigt, da sie einfach nicht in den Bildschirm passt.
Aus diesen Überlegungen können wir schließen, dass eine feste Breite für das Layout definitiv nicht für uns geeignet ist und wir uns nach einem anderen Weg umsehen müssen. Lassen Sie uns die Idee eines separaten Layouts für jede Bildschirmbreite analysieren.
Layouts für alle Fälle
Wenn Sie sich entschieden haben, Layouts für alle Bildschirmgrößen auf dem Markt zu erstellen, dann wird Ihre Website die einzigartigste im gesamten Internet sein. Schließlich ist es heute einfach unmöglich, die gesamte Gerätepalette abzudecken und zu versuchen, für jede Option eine Feinabstimmung vorzunehmen. Aber wenn Sie sich auf die gängigsten Auflösungen von Monitoren und Gerätebildschirmen konzentrieren, dann ist die Idee nicht schlecht. Der einzige Nachteil sind die finanziellen Kosten. Denn wenn ein Interface-Designer, ein Designer und ein Programmierer gezwungen sind, die gleiche Arbeit fünf- oder sechsmal zu erledigen, kostet das Projektunverhältnismäßig höher als der ursprünglich budgetierte Preis.
Daher können nur One-Page-Sites mit einer Fülle von Versionen für verschiedene Bildschirme prahlen, deren Zweck darin besteht, ein Produkt zu verkaufen und sicherzustellen, dass es gut funktioniert. Nun, wenn Sie keinen dieser Landings haben, sondern eine Website mit mehreren Seiten, dann sollten Sie weiterdenken.
Beliebteste Website-Größen
Ein Kompromiss zwischen den beiden Extremen ist das Rendern des Layouts für drei oder vier Bildschirmgrößen. Darunter muss man ein Layout für mobile Geräte sein. Der Rest sollte für kleine, mittlere und große Desktop-Bildschirme angepasst werden. Wie wähle ich die Breite der Website? Nachfolgend präsentieren wir die HotLog-Dienststatistik für Mai 2017, die uns die Verteilung der Beliebtheit verschiedener Gerätebildschirmauflösungen sowie die Dynamik dieses Indikators zeigt.
Aus der Tabelle können Sie entnehmen, wie Sie die Größe der Website bestimmen, die Sie verwenden möchten. Darüber hinaus können wir den Schluss ziehen, dass das heute gebräuchlichste Format ein Bildschirm mit 1366 x 768 Pixeln ist. Solche Bildschirme sind in preisgünstigen Laptops installiert, daher ist ihre Beliebtheit natürlich. Der zweitbeliebteste ist der Full-HD-Monitor, der der Goldstandard für Videos, Spiele und damit für die Erstellung von Website-Layouts ist. Weiter in der Tabelle sehen wir die Auflösung von Mobilgeräten 360 x 640 Pixel, sowie verschiedene Optionen für Desktop- und Mobilbildschirme danach.
Layout entwerfen
AlsoNach der Analyse der Statistiken können wir schlussfolgern, dass die optimale Seitenbreite 4 Variationen hat:
- Laptop-Version mit 1366px Breite.
- Full-HD-Version.
- Ein 800 Pixel breites Layout für die Anzeige auf kleinen Desktop-Monitoren.
- Mobile Version der Website - 360 Pixel breit.
Nehmen wir an, wir haben entschieden, welche Größe für die generierte Quelle für die Site verwendet werden soll. Aber ein solches Projekt wäre immer noch kostspielig. Schauen wir uns also weitere Optionen an, diesmal ohne eine feste Breite zu verwenden.
Layout flexibel gest alten
Es gibt einen alternativen Ansatz, bei dem es sich lohnt, sich nur an die minimale Bildschirmgröße anzupassen, und die Seitengrößen selbst in Prozent festgelegt werden. Gleichzeitig können Oberflächenelemente wie Menüs, Sch altflächen und Logos in absoluten Werten festgelegt werden, wobei der Schwerpunkt auf der Mindestgröße der Bildschirmbreite in Pixeln liegt. Blöcke mit Inh alt hingegen werden entsprechend dem angegebenen Prozentsatz der Breite des Bildschirmbereichs gedehnt. Mit diesem Ansatz können Sie aufhören, die Größe von Websites als Einschränkung für den Designer wahrzunehmen, und diese Nuance gekonnt überwinden.
Was ist der Goldene Schnitt und wie kann er auf das Layout von Webseiten angewendet werden?
Schon in der Renaissance versuchten viele Architekten und Künstler, ihren Kreationen die perfekte Form und Proportion zu geben. Um Antworten auf Fragen zu den Werten eines solchen Anteils zu erh alten, wandten sie sich an die Königin aller Wissenschaften - die Mathematik.
Seit der Antike wurde eine Proportion erfunden, die unser Auge als die natürlichste und eleganteste wahrnimmt,weil es in der Natur allgegenwärtig ist. Der Entdecker der Formel für ein solches Verhältnis war ein talentierter antiker griechischer Architekt namens Phidias. Er berechnete, dass, wenn der größere Teil des Anteils mit dem kleineren zusammenhängt, wie das Ganze mit dem größeren zusammenhängt, ein solcher Anteil am besten aussehen wird. Dies ist jedoch der Fall, wenn Sie das Objekt asymmetrisch teilen möchten. Dieses Verhältnis wurde später Goldener Schnitt genannt, was seine Bedeutung für die Weltkulturgeschichte noch immer nicht überschätzt.
Zurück zum Webdesign
Es ist ganz einfach - mit dem Goldenen Schnitt können Sie Seiten gest alten, die für das menschliche Auge so angenehm wie möglich sind. Wenn wir nach der Definition der Formel des Goldenen Schnitts rechnen, erh alten wir die irrationale Zahl 1, 6180339887 …, aber der Einfachheit halber können wir einen gerundeten Wert von 1, 62 verwenden. Dies bedeutet, dass die Blöcke unserer Seite 62 sein sollten % und 38 % des Ganzen, egal welche Größe die generierte Quelle für die Seite verwendet, die Sie verwenden. Ein Beispiel sehen Sie in diesem Diagramm:
Neue Technologien nutzen
Moderne Website-Layout-Technologien ermöglichen es, die Idee eines Planers und Designers genau zu vermitteln, sodass Sie es sich jetzt leisten können, gewagtere Ideen umzusetzen als zu Beginn der Internet-Technologien. Sie müssen nicht mehr lange überlegen, wie groß die Website sein sollte. Mit dem Aufkommen von Dingen wie blockadaptivem Layout, dynamischem Laden von Inh alten und Schriftarten ist die Entwicklung von Websites viel angenehmer geworden. Schließlich sind diese Technologienweniger Einschränkungen, obwohl sie immer noch da sind. Aber wie Sie wissen, gäbe es ohne Grenzen keine Kunst. Wir empfehlen Ihnen, einen wirklich kreativen Designansatz zu verwenden – den Goldenen Schnitt. Damit können Sie den Arbeitsbereich effektiv und schön füllen, egal welche Seitengrößen Sie in Ihren Vorlagen festlegen.
So vergrößern Sie den Arbeitsbereich der Website
Möglicherweise haben Sie nicht genug Platz, um alle UI-Elemente in einem kleinen Layout unterzubringen. In diesem Fall müssen Sie anfangen, kreativ zu denken oder sogar noch kreativer als zuvor.
Geben Sie maximal Speicherplatz auf der Website frei, indem Sie die Navigation im Popup-Menü ausblenden. Es ist logisch, diesen Ansatz nicht nur auf mobilen Geräten, sondern auch auf Desktops zu verwenden. Schließlich muss der Benutzer nicht ständig nachsehen, welche Überschriften sich auf Ihrer Website befinden – er kam wegen des Inh alts. Und die Wünsche des Nutzers müssen respektiert werden.
Ein Beispiel für eine gute Möglichkeit, das Menü auszublenden, ist das folgende Layout (Foto unten).
In der oberen Ecke des roten Bereichs sehen Sie ein Kreuz, dessen Anklicken das Menü zu einem kleinen Symbol verbirgt und den Benutzer mit dem Inh alt der Website allein lässt.
Dies ist jedoch optional, Sie können die Navigation verlassen, die immer sichtbar ist. Aber Sie können es zu einem schönen Designelement machen und nicht nur zu einer Liste beliebter Links auf der Website. Verwenden Sie intuitive Symbole zusätzlich zu oder sogar anstelle von Textlinks. es ist das gleicheermöglicht Ihrer Website eine effizientere Nutzung des Bildschirmplatzes auf dem Gerät des Benutzers.
Die beste Website ist responsiv
Wenn Sie nicht wissen, welches Layout Sie für die Seite wählen sollen, ist alles ganz einfach für Sie. Um Entwicklungskosten zu sparen und gleichzeitig Ihr Publikum nicht aufgrund eines schlechten Layouts für einige Geräte zu verlieren, verwenden Sie responsives Design.
Responsive Design ist ein Design, das auf verschiedenen Geräten gleich gut aussieht. Dieser Ansatz ermöglicht es, dass Ihre Website auch auf einem Laptop, sogar auf einem Tablet, sogar auf einem Smartphone verständlich und bequem ist. Dieser Effekt wird erreicht, indem die Breite des Arbeitsbereichs des Bildschirms automatisch geändert wird. Indem Sie responsive Stylesheets für Ihre Website verwenden, treffen Sie die bestmögliche Entscheidung.
Was ist der Unterschied zwischen Responsive Design und Website-Versionen
Responsive Design unterscheidet sich von der mobilen Version der Seite dadurch, dass der Nutzer im letzteren Fall einen anderen HTML-Code erhält als beim Desktop. Dies ist sowohl im Hinblick auf die Serverleistungsoptimierung als auch auf die Suchmaschinenoptimierung von Nachteil. Außerdem wird es schwieriger, Statistiken für verschiedene Versionen der Website zu berechnen. Der adaptive Ansatz hat diese Nachteile nicht.
Reaktionsfähigkeit für verschiedene Geräte wird durch ein Layout mit einem Prozentsatz der angegebenen Breite oder durch das Übertragen von Blöcken auf den verfügbaren Platz erreicht (in der vertikalen Ebene auf einem Smartphone statthorizontal auf dem Desktop) oder individuelle Layouts für verschiedene Bildschirme erstellen.
Erfahren Sie in unseren Tutorials mehr über responsives Design und Entwicklung.
