Okay, ist so technisch gesehen, dass wir unsere Website fertig erstellt haben
.
Wir haben die Homepage,
wir haben die Blog-Seite
und wir haben auch eine Kontaktseite
sowie die Kopf- und Fußzeile.
Aber es gibt eine sehr, sehr
wichtige Sache, um die wir uns kümmern müssen , und
das wird ansprechendes Design sein.
Denken Sie immer daran , dass heutzutage so viele Menschen
ihre Mobiltelefone benutzen, um im Internet zu surfen.
Und wenn jemand stolpert, stolpern
Sie mit dem Mobiltelefon über Ihre Website,
Sie möchten sicherstellen, dass es gut aussieht.
Was wir also im Rest dieses Abschnitts tun werden
, ist, dass ich
Ihnen zeige, wie Sie die Kopfzeile, die Homepage, die Fußzeile und die anderen Seiten rekonstruieren können
,
um reaktionsschnell auszusehen.
Wenn es also auf einem Tablet-Gerät oder auf einem mobilen Gerät angezeigt
wird, sieht es gut aus.
Lambdas gibt Ihnen derzeit eine sehr,
sehr schnelle Demonstration
dies ist für die Tablet-Ansicht.
Sie können sehen, dass ich die Größe meines Bildschirms auf die eines Tablets reduziert
habe.
Und Sie können jetzt sehen, dass es immer noch
sehr, sehr, sehr gut aussieht.
Wir haben keine Probleme mit dem Speicherplatz in der Kopfzeile.
Sieht gut aus.
Abschnitt „Zeugennotizen“ sieht gut aus.
Das Foto sieht gut aus.
Aber wenn ich jetzt bis zur kleinsten Bildschirmgröße scrolle
,
die normalerweise Ihr Mobiltelefon ist.
Lassen Sie mich zurück nach oben gehen, jetzt können Sie
sehen, dass der Header anders aussieht.
Wir haben einen schwarzen Hintergrund.
Wir haben unser Logo.
Wir haben genau hier das Hauptmenü,
das jetzt das Hamburgermenü ist,
das Sie schon oft gesehen haben.
Und wenn ich dann wieder nach unten scrolle,
sieht man, dass es hier bis zur Fußzeile gut aussieht
.
Responsive Design ist daher äußerst wichtig.
Ich zeige Ihnen also, wie Sie
Änderungen an Ihrer Website vornehmen können
, damit sie auf jedem mobilen Gerät gut aussieht.
Lambda erwähnt auch schnell
, dass es bei einem ansprechenden Design einige Konzepte gibt,
die beachtet werden sollten.
Man würde bedeuten, Dinge wie das Reduzieren von Rändern zu tun
, sind Muster, die Sie in der Desktop-Version hinzugefügt haben
.
Zum Beispiel erinnern Sie sich dort mit dem Homepage-Banner.
Für diesen Abschnitt mussten wir eine unverschämte negative Marge hinzufügen
eine unverschämte
, und ich denke, es war
minus zwei bis zwei Pixel, wenn es um mobile Versionen geht.
So reaktionsschnelle Versionen müssen Sie möglicherweise
diese Größe oder Mabou reduzieren
oder vielleicht sogar in bestimmten Situationen die Größe erhöhen.
Eine Anpassung an Imagines oder Muster ist notwendig.
Es gibt auch Zeiten, in denen Sie nur Einstellungsarten von Elementen ausblenden müssen
Einstellungsarten von Elementen ausblenden
wenn sie auf einem mobilen Gerät angezeigt werden, da dies
auf dem Desktop möglicherweise gut aussieht.
Ein Beispiel wäre, dass ein Videoeditor
auf dem Desktop gut aussehen wird.
Aber auf einem mobilen Gerät
ist es möglicherweise nicht unbedingt so großartig.
Dasselbe gilt auch für Animationen.
Und die Maßnahmen werden auf einem Desktop, den Gehwegen auf einem Desktop, gut aussehen
,
aber das Mobiltelefon könnte Probleme haben
, diese Animation anzuzeigen.
Der springende Punkt dieses massiven Designs ist also das Opfer.
Sie nehmen Änderungen vor, entfernen bestimmte Funktionen, so dass
bei der Anzeige auf einem Mobilgerät das Uber-Grid angezeigt wird.
Das war's also für
die sehr schnelle Einführung in das Responsive Design.
Lasst uns jetzt damit anfangen.