HTML5/CSS3 Tutorial: Responsive Webdesign erstellen // deutsch [#1]

HTML5/CSS3 Tutorial: Responsive Webdesign erstellen // deutsch [#1]



hey leute schön dass wir mit dabei sein zu einem neuen video hier bei html world und weil euch so viele da draußen gab die sich das gewünscht haben machen wir heute das video welches eigentlich anschließt an das letzte video wir beschäftigen uns mit responsive webdesign also mit webseiten die sich an dem gerät des besuchers anpassen somit haben wir eine webseite die optimal läuft auf smartphones auf tablets auf desktop-pcs und so weiter und so fort und wie so was geht und wie ihr sowas machen könnte das zeige ich euch heute und ihr seht hier schon am bildschirm die webseite die wir heute erstellen wollen wir haben also ganz klassischen header bereich mit einem titel der website wir haben eine menüzeile eine navigation und ein zweisprachiges layout mit einem linken bereich wo wir praktisch ein artikel simulieren möchten und einem rechten bereich over eines sidebar haben möchten um ganz unten noch eine futter leiste mit ein paar informationen per richtigen links und so weiter und so fort und ihr seht eigentlich auch schon in welche richtung das ganze mal gehen wird nämlich mit dem ansatz eines wordpress templates denn wir werden mit diesem template jetzt oder mit diesem design immer weiterarbeiten das immer weiter verfeinern und verbessern in den nächsten videos bis wir irgendwann mal bei einem fertigen wordpress templates sind wenn ihr also keine videos verpassen wollte und wenn ihr wissen wollt wie man aus diesem seien nachher ein fertiges wordpress komplett erstellt dann solltet ihr diesen kanal auf jeden fall abonnieren ich schauen uns das mal an wie jetzt das system arbeitet wenn ich die webseite langsam zusammen schiebe wenn ich also simuliere als würde es an einem smartphone oder einen tablet angeschaut werden hier sehen wir ja die da stand noch perfekt und wir passen das jetzt immer so langsam an und ziehen das jetzt mal so angaben zusammen ihr seht jetzt schon hier ab diesem punkt erreicht sehr praktisch die die grenzen unseres content bereich ist und nun schwenkt er um und zieht sich weiter zusammen passt sich also der breite des bildschirms an im nächsten schritt müssen via logischerweise irgendwann mal die sidebar wegpacken weil die irgendwann nebeneinander so klein sind dass die sidebar einfach nicht mehr schön aussieht und was natürlich noch passieren müsste hier die menüleiste müssten sich auch irgendwann wegklappen weil sie sonst nicht mehr sauber dargestellt wird schauen uns an was noch passiert werden das ganze hier weiter zusammenschieben wir sehen doch wird es so dargestellt noch wird es nur dargestellt und jetzt klappt sich die sidebar weg und zwar klappte sich hier nach unten das heißt wir haben immer noch denselben content allerdings nun in einer blog ansicht also in einem einstelligen layout wenn das ganze nun noch weiter zusammen ziehen dann sehen wir hier auch schon den sprung zu einem menü button hier oben wie wir ihn an smartphone kennen wir ziehen jetzt mal ganz zusammen so wäre in etwa die darstellung an einem smartphone und wenn wir nun hier auf diesen button klicken ganz leidet sich da unten das menü auf bzw das kennen wir ja von ganz ganz vielen blogs webseiten im internet die mit wordpress laufen ja fast zu einem solchen standard entwickelt das ist dann so geöffnet wird es gibt auch noch andere variationen wo die menü das dann so es leidet wird von links nach rechts solche finessen sind natürlich auch möglich wir machen jetzt hier erst mal die ganz normalen und einfachen vater oder weg eines storkow mit jake rennie ja das wollen wir also heute aufbauen in zwei teilen im ersten teil werden wir nur mal das html aufbauen da die grundstruktur aufbauen für alle leute die vielleicht noch nicht so hundertprozentig fit sind mit html 5 elementen mit semantik von html5 wenn wir dort noch mal alle sämtlichen elemente oder text verwenden die man so ein html5 zur verfügung hat und im zweiten teil wenn wir uns dann um css kümmern damit erfährt die website so dargestellt wird wie hier ihr seht allerdings findet ihr unten auf eine beschreibung befindet uns eine live view könnten dies ganze packages downloaden und sofort schaut einfach mal eine infobox wenn ihr irgendetwas sucht so und wir fangen mal an so sieht im moment auf die seite aus mit der wendung anfangen wollen also einfach in einem schlichten weiß und das skript sieht so aus wir haben hier schon mal ein ganz normales grundgerüst vorbereitet im heckbereich auch schon einen titel versehen und auch schon die anbindung zu einer css datei die man mir hier in diesem ordner liegt hier im v zwei ordner sehen also hier das html dokument wir sehen hier das css dokument welches wir hier eingebunden haben außerdem haben schon checks fertig vorbereitet also die ganz normal datei von jacko hier eingebunden und schon mal ein skript vorbereitet ich habe es diesmal ins html gepackt weil es wirklich nicht viel ist man könnte natürlich dass jake berry auch natürlich auslagern in eine separate javascript ansonsten haben wir hier noch ein image es ordner mit dem artikel bild welches ihr hier seht dass es also dieses bild hier dann haben wir noch eine kleine grafik nämlich die menus grafik ich auch mal öffnen kann ist nichts spektakuläres ist einfach eine png datei mit drei schwarzen balken das ist alles so sei es also unsere struktur der webseite wir können das jetzt aber auch mal weg machen damit wir noch mehr platz haben für unser skript als erstes müssen wir eine ganz wichtige sache hier oben im heckbereich noch hinzufügen und zwar eine meta angabe namens report dies dafür zuständig dass wir sagen wir möchten unseren konnte immer an dem skalieren welches wir verwenden als auch an smartphones tablet einen desktop-pc wenn wir diesen meter angaben vergessen dann wird diese skalierung und seine webseite nicht vorgenommen und dann funktioniert das ganze das passive design nicht also ein ganz wichtiger punkt schreibe hier meta name fioport dann schreien wir konnten und definieren nun hier holst angepasst an der breite des gerätes des devices dann sagen wir noch angaben zum zur skalierung die immer auf maximal sein soll also immer die größe 1 und den nscale sagen wir auch auf 1,0 nun können wir noch sagen dass wir es nicht erlauben möchten dass der user die website nicht kein und herauszoomen kann das müsst ihr selber entscheiden ob ihrem user das ganze zu lassen möchte dass er dort weiter an es kann ja auch durchaus sinn machen wenn man irgendwelche irgendwelche contente wie zb in bilder oder so was rein so meine stimme hat zb eine bildergalerie auf seiner webseite ist zum beispiel fotograf und hat eigentlich nur bilder dann kann es sinn machen für den user dass er in die website ein zoom rein tun kann müsst ihr selber entscheiden ob ihr das wollt oder nicht geben falls ihr einfach yes oder no eingeben das unsere erste zeile kulti wir heute geschrieben haben und nun sind wir erst einmal fertig im heckbereich und bauen hier die struktur unserer webseite auf als erstes erstellen wir zur orientierung diese weise leistet die in der desktop an sich ja eigentlich keine funktion hat die nur dann eine funktion hat wenn wir in der mobilen ansicht sind und dann unseren manual backen dort drin hat wir machen das ganze mit einer session schreibt die menü machen dann eine auflistung und schreiben hier klaus when i button when you bauen dann hielt das bild ein und zwar dass viele die png datei und sind nun in diesem bereich schon fertig warum mache ich das ganze zu einer auflistung bin jetzt gleich einige von euch sagen macht ja keinen sinn ist doch sowieso nur einen link mit einem bild das ist sozusagen gedankliche vorbereitung falls man das ganze nochmal weiterentwickeln würde in richtung ein wordpress template und man möchte da hatten die obere leiste zum beispiel noch weitermachen zu sein social networks facebook twitter und so weit dann zuvor oder man möchte vielleicht die berühmte wordpress suche mit einbauen wie irgendwelche solche elemente könnte man dann ganz einfach als weitere auflistung punkte hier einfügen und dann läuft das schon so wir gehen weiter und erstellen unserem herrn mit dem titel auf das ist total simpel wir schreiben hier hätte dann machen ein vereinstag für eine überschrift und schreiben ihr html world blog das war der bereich schon das klingt relativ fix nun baumwolle unsere navigation auf ihr seht schon erste teil ist wirklich noch sehr sehr einfach alles fällt dir eine struktur der webseite ist die wieder aufbauen insofern wird eigentlich erst der zweite teil wenn es ums ssg spannender und will natürlich auch ein wenig komplexer ein wenig länger das video so wir haben nun die navigationsbereich auch hier erstellt wieder eine auflistung mit unseren auflistung punkten machen also hier jetzt unsere unserem nutzen dank eben hier der ganzen sache auch einen einer klasse den ersten punkt gehen wir einer klasse nämlich mehr möchten hier nachher diesen anstieg zeigen hier diesen strich haben dass der praktisch gerade aktiv ist auf dieser web seite befinden wir uns gerade diese option gibt es auch in wordpress heißt das kann man hier auch so 11 in wordpress übernehmen wenn irgendwann das template bauen so wir gucken uns das hier und machen es 234 weitere menüpunkte nun hier tutorials videos unity und müssen jetzt hier entsprechend die aktive klasse entfernen und die soll ja nur beim ersten der fall sein jahrhundert habe ich hier noch das index falsch geschrieben so nun haben wir das ganze auch das ist also schon unsere applikation nun können wir schon weitergehen wie in den männerbereich wir machen eine neues action mit der ewigen mail und das ist ja sozusagen ich hier der gesamte bereich von hier bis da der hier entsprechend ganz untergeht und der kippe sozusagen die ersten rahmen vor wie groß der maine bereich sein soll ihr seht ja dass hier der obere bereich noch alle in einer breite von 100 prozent vorhanden sind ab hier machen wir praktisch eine einschränkung mit einer breite von 980 pixel in der maximalen breite und dazu brauchen wir nun unsere sektion main die das ganze sozusagen ein rand so darin können wir dann den nächsten befehl machen und zwar artico das heißt hier bauen wir unseren artikel auf hier dass es sozusagen linke bereich unserer webseite wir schreiben hier mit einem h 2 1 lieber spritzt das ist ein titel und führen wir noch einige absätze reihen die ich mir immer aus dem aktuellen oder samba fertigen skript raus kopieren so also das ist nicht london einfach drei absätze mit einem neuen epson text von 100 wörtern das also nicht großartig ist und damit haben wir immer sie den bereich auch schon fertig nun gehen wir weiter und machen noch die seitenleiste benutzen wir den tag und schreiben hier nun section denn ihr seht ihr das hier die einzelnen felder noch mal mit einem mit einem abstand versehen sind und das haben wir einfach so gelöst dass wir hier ein sections noch mal stellen für jeden bereich einer einzelnen section und das können wir nun also hier machen jede sektion besteht aus einem titel und einem content wenn ihr falle es ist eine auflistung von artikeln normalerweise auch noch flink werden das habe ich mir hier mal gespart wahlweise wäre nach dem auflistung tag noch einen eine verlegung in ein a tec aber das lassen jetzt einfach mal weg das sind ja sozusagen eine detail so hier haben wir nun also ganz normale auflistung auf populäres sections und so weiter und so fort wir stellen nur noch eine weiteres action zack die auch wieder eine überschrift hat wo wir eins schreibt ein textfeld hier machen wir einen absatz reihen den ich mir auch wieder aus dem fertigen skript raushole so und dann hier rein was ihr seht schon die webseite und die struktur der webseite ist superschnell aufgebaut mit ein bisschen html können wir ganz schnell unsere website aufbauen machen jetzt auch das fashion bereich mit den kategorien wie gesagt alles im prinzip nachempfunden wem es später auch bei wordpress aussehen können hier würden wir dann mit dem widget arbeiten vielleicht arbeiten einige forschung mit wordpress und dann könnte man hier das kategorie which verwenden welches ja diesen konnten wir jetzt hier statisch eingeben dann selbstständig automatisiert erstellen würde und damit haben wir dann unsere sidebar so nun haben wir das so weit fertig und können am ende noch unsere fußleiste machen aus als noch einen futter auf hier auch mit einer auflistung und können dann hier schreiben und kopie nicht dollar sondern und hobby für das sonderzeichen 2014 html world und dann machen wir hier noch einige aufwendungen führen kontakt und rechtliches also wie datenschutz und das im person ihr seht wir haben jetzt relativ schnell durchgezogen weil ich denke dass einige von euch so weit auch kenntnisse schon haben dass sie das verstehen ist auch ein prinzip ja nicht komplex ist wir arbeiten hier nur konsequent mit html elementen also mit sessions mit dem header mit dem nerv tag mit artikeln und citrix und mit guter tag und ansonsten ist es auch ganz triviale html code mit dem auflösungs punktuell als wir arbeiten nicht vom fleck sind arbeiten um überschriften mit auflistungen und mit absätzen und mit bildern natürlich das ist alles was behebung weiterverwenden und schaut dass uns einfach nochmal in ruhe angesagt das steht nach unten zum download bereit und dann denke ich mal werdet ihr das auch ganz schnell verstehen was wir hier so gemacht haben so wenn wir uns das ganze nochmal hier ansehen dann sieht das ganze so aus ich habe noch vergessen dem artikel ein wild zu geben das fehlte noch das müssen wir noch fix hiermit ein baum den ie images artikel bild so das war's kann man noch mal neu laden und dann sehen wir hier im prinzip unserer webseite hey wir sind praktisch und fertig so sieht unsere webseite aus zwei schick und die attacke als grundgerüst und aus diesem sagen wir mal noch recht schlichten und unschönen design wenn du dieses detail anschauen das alles dann im zweiten teil jetzt wird also nur noch um rein des css gehen um die gestaltung der webseite und so weiter und so fort damit wir eine expansive stallone hinkriegen dass alles im zweiten teil ich hoffe über dran

25 thoughts on “HTML5/CSS3 Tutorial: Responsive Webdesign erstellen // deutsch [#1]”

  1. Prima Tutorial funktioniert am PC tadelos, hochgeladen mit Filzilla ins netz funktioniert alles außer des Mobile menu scrollt nicht nach unten. Kann mir jemand sagen was der fehler ist? Danke

  2. Gutes Video aber bitte fokusier dich auf dein Thema denn die meistens wissen schon wie man mit html und css umgeht. Wollen aber nur wissen wie man das jetzt responsiv macht.

  3. ich bin vielleicht etwas spät aber wäre es möglich das script nochmal irgendwo zum Download zur Verfügung zu stellen ….? Super Tutorial, Workshop!

  4. Hallo,

    könntest Du nicht mal ein Tutorial erstellen wie man ein bestehende Webseite Responsive fähig macht?

  5. Das mit dem slide toggle jquery funktionert leider nicht mehr 🙁 Kann irgendjemand Abhilfe schaffen?

  6. Ist das hier von Dir überhaupt noch aktiv? Mich interessiert bei Seiten mit JQ Mobile sehr, wie kann ich bei einigen Analyse Touls das angezeigte H1 loading entfernen oder verhindert werden kann? Wie baut man sinnvoll eine Suche mit JQ Mobile auf?

  7. Bin gerade auf dieses Tutorial gestoßen finde den Aufbau sehr schön und sehr hilfreich.
    Habe dann gemerkt dass sich einige in den Kommentaren beschweren dass die Links nicht funzen: Hier die aktuelle Webseite die er im Tutorial vorgestellt habe, gerade auf google suche gefunden unter htmlworldblog http://vbx.bplaced.net/responsivedesign/

  8. kann mir jemand sagen an welcher stelle im HTML script er das bildmit dem sonnenuntergang einbaut? sehe nur den menubutton..

  9. htmlworld super tutorial. weiter so

    Suche noch Leute
    zum Austauschen via Skype o.Ä.. Finde es schade, dass es scheinbar keine
    richtige Webdesign Community gibt in der man miteinander quatschen
    kann. Würde mich über Nachrichten freuen. Dann kann man so etwas ja mal
    aufbauen 🙂

  10. Leider sind die notwendigen Dateien nicht mehr verfügbar.
    Schade dass sich so viele Tutorial Leichen hier auf Youtube befinden. Eigentlich könnte man diese unbrauchbar gewordenen Videos auch irgendwann wieder löschen.

    Ich finde es echt supercool wenn sich Menschen soviel Mühe geben solch gute Tutorials zu verfassen. Schade aber, wenn sie sich danach nicht mehr darum kümmern und sich diese Tutorials dann als Dateileichen erweisen. (Dann löscht sie doch einfach wieder)

  11. Also die Header-Datei binde ich via php in meine seite ein, damit es sehr übersichtlich ist was ja auch weiter nicht schlimm ist. Aber wie kann man da die "aktiv"-Klasse der Navigationspunkte automatisch vergeben, dass man halt nicht so viele, große Header-Dateien erstellen muss, nur um überall die Klasse anders zu vergeben?

    Und ist das überhaupt möglich?

  12. Guten Tag,

    ich habe mal eine Frage … Wie sind die Maße des Bildes?
    Und als Hinweis, die Webseite ist schon seit längerer Zeit nicht mehr aufrufbar.

    Mit freundlichen Grüßen
    SelfixPvP

Leave a Reply

Your email address will not be published. Required fields are marked *