Benutzer, die über Tablets und Mobiltelefone auf das Internet zugreifen, nehmen zu. Wie Sie bereits wissen, reicht es nicht aus, nur eine gute Webseite zu entwerfen, die auf unserem Computer gut aussieht. Sie muss auch auf jedem mobilen Gerät angezeigt werden. Das Problem? Unterschiedliche Bildschirmgrößen und Auflösungen. Deshalb ist es so schwierig, ein Design zu erstellen, das sich an alle Medien (die berühmten) anpasst sich anpassendes Design, übersetzt als adaptives Design).
Hier sind einige Tipps, die Sie beachten sollten, wenn Sie ein Design mit diesen Eigenschaften erstellen. Passt auf!
Tipps für adaptives Design
- Machen Sie eine einfache VorlageMit einfach meine ich nicht langweilig. Ich spreche über die Struktur HTML Ihrer Website: Je klarer es ist, desto besser. Beachten Sie, dass ein Computerbildschirm drei vertikale Spalten aufnehmen kann. Auf dem Bildschirm eines Mobiltelefons passt nur eines. Denken Sie darüber nach und wie Sie die Elemente neu positionieren.
- Beseitigen Sie alles UnnötigeVermeiden Sie jQuery-Effekte, Flash-Animationen und anderen Code, der das Laden Ihrer Seite verlangsamt. Je weniger Inhalte dieses Typs Sie haben, desto schneller wird das Web geladen.
- Definieren Sie einen Stil CSS für jede "Größe"Erstellen Sie beispielsweise eine tiny.css, small.css und big.css, die basierend auf dem Gerät ausgeführt werden, auf dem sie angezeigt wird. Zum Beispiel:
@import url (tiny.css) (Mindestbreite: 300px);
@import url (small.css) (Mindestbreite: 600px);
@import url (big.css) (Mindestbreite: 900px);
- Die am häufigsten verwendeten Auflösungen320px/480px/720px/768px/900px/1024px
- Machen Sie Ihre Vorlage FLEXIBELWann immer Sie können, arbeiten Sie mit Prozentsätzen anstelle von festen Beträgen. Hier sind einige Referenzäquivalenzen: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Typografie Wichtiger als je zuvor Manchmal ist Ihr Gerätebildschirm so klein, dass Sie nur Text sehen. Aus diesem Grund müssen wir die besten Schriftarten auf unserer Website sehr sorgfältig auswählen, damit sie bei einer Verkleinerung nicht an Lesbarkeit verlieren. Darüber hinaus müssen wir wissen, wie wir neutralere Schriftarten mit anderen mit einer Persönlichkeit kombinieren können, die dem Web den erforderlichen Charakter verleiht. Daher ist der erste Tipp, dass Sie Zeit damit verbringen, die Schriftarten auszuwählen, die Sie verwenden möchten.
- Verwenden qualitativ hochwertige BilderWenn der Platz verkleinert wird, werden die Bilder ihn begleiten. Wählen Sie diejenigen aus, die beim Reduzieren nicht an Qualität verlieren und bei Skalierung gleich funktionieren. Ein Bild von geringer Qualität lässt Ihre Website schlecht aussehen.
- Dass deine Bilder immer gesehen werden al completeoVerhindern Sie, dass Ihre Fotos abgeschnitten werden, indem Sie den img-Code (width: 100%;) in Ihr CSS einfügen. Auf diese Weise weisen Sie das Gerät an, die Höhe des Bilds neu zu berechnen, damit seine Breite hundertprozentig sichtbar ist.
- Alles niedrig die gleiche URLVergessen Sie Subdomains wie www.mysite.com/mobile, da dieselbe index.html-Datei im Stammordner für alle Geräte funktioniert (wenn Sie das adaptive Design korrekt ausführen). Sie kennen den Vorteil bereits: Je weniger Subdomains, desto schneller wird die Seite geladen.
- Nutzen Sie die Stützen: Seien Sie einfallsreich Es ist nicht dasselbe, von einem Desktop-Computer auf eine Website zuzugreifen, als von einem iPad oder einem Mobiltelefon. Mit dem ersten navigieren Sie ruhig und gelassen. Mit letzterem tun Sie es in Leerlaufstunden und schließen das Fenster, sobald Sie sich langweilen. Nutzen Sie diese Bedingungen, um den Benutzer zu unterhalten und ihm Spaß in den wenigen Minuten zu machen, die er Ihnen widmen wird. Wenn er nach Hause kommt, beschließt er vielleicht, Sie entspannter zu besuchen.
- Lassen Sie sich inspirieren In digitalen Publikationen werden Sie sich fragen, warum dieser Rat. Sehr leicht: digitale Magazine (gut) wissen, wie man die Unterstützung nutzt und ihr Design ist sehr intelligent. Lassen Sie sich von ihnen inspirieren und erstellen Sie eine Website, die schwer zu verlassen ist.
Mehr Informationen - Digitale Magazine
Quelle - splio960 g, säulenförmig
Es gibt Dinge, denen ich nicht sehr zustimme.
In Punkt 5 ... da 200px = 15,38% und die folgenden ... kann dieser Referenzvergleich nicht ohne ein übergeordnetes Maß durchgeführt werden, ist die Größe pro Pixel kein relatives Maß wie die Prozentsätze!
Geben Sie die Bilder mit der Breite an: 100% falsch, ich denke nicht, dass es eine Empfehlung sein sollte. Die Bilder definieren sie besser mit ihrer Breite und Höhe, sodass der Server weniger Zeit für die Verarbeitung der Informationen benötigt (er muss ihre Größe nicht berechnen) und wir die Ladegeschwindigkeit der Seite verbessern (was im adaptiven oder reaktionsschnellen Web sehr wichtig ist Design).
Ich würde bereits einschließen, obwohl es ein Nasenjob ist ... Bilder für Retina-Bildschirme. Wenn wir reaktionsschnelles Webdesign erstellen möchten, müssen Bilder für die Retina-Anzeige verwendet werden, da ein hoher Prozentsatz der Ansichten von Mobilgeräten und Tablets diese Bildschirme verwendet. Es macht also keinen Sinn, die Mühe in ein Design für sie mit Halbgas zu stecken.
Gut für den Rest
In Punkt 5 stellen sie Sie in einen Kontext und informieren Sie über ein Gesamtlayout von 1300 Pixel mit 3 Spalten, eine von 200, 300 und 1000.
Wenn Sie es an Prozentsätze übergeben, sind es in ihrem Fall wie Sie sagen 15,38% ((200 * 100) / 1300) (Dezimalzahl unten, internationales System: P)
Wenn wir jedoch von einem 500px-Layout sprechen und 3 Spalten haben, eine von 200, eine von 200 und eine von 100px, sind die Prozentsätze nicht mehr gleich, in diesem Fall 200px = 40% ((200 * 100) / 500).
Sie wären: 200px = 40% und 100px = 10%
Komm schon, wie gesagt, sie sind keine Referenz, was Sie angeben, sie sind nur eine Referenz auf einem 1300px-Layout.
Grüße
Was für ein Misserfolg, Sie haben absolut Recht auf der Welt! Danke noch einmal ;)