Adobe Muse CC Responsive Web Design | Tutorial | German

Adobe Muse CC Responsive Web Design | Tutorial | German



hallo und damit herzlich willkommen zu einem weiteren top news tutorial lange ist das letzte video her und inzwischen hat sich viel bei adobe – getan es ist eine neue version draussen und diesmal kein kleines update wie sonst vielleicht immer sondern ein richtig großes update mit richtig coolen neuen features die ich euch heute zeigen will nicht alle davon aber einige werden wir heute in diesem video behandeln und man sieht dass gleich schon hier auf dieser seite von adobe news es gab vorher eine beta phase wo vielleicht der ein oder andere schon mal mitgemacht hat ich habe da nicht mitgemacht und habe mir das jetzt erst angeguckt die letzten zwei tage und will euch so ein bisschen zeigen was dieses neue update so so kann ja hier steht schon der titel des videos responsive webdesign und zwar mit adobe news da gabs vorher mal einige widgets und jetzt ist es sozusagen offiziell draußen und ich muss echt sagen es funktioniert richtig gut also ich hab da ein bisschen mit ausprobiert und wenn man sich da ein bisschen rein fuchs dann funktioniert das ganz gut ich habe bis jetzt weiß einseitige bild gebaut aber ja wenn wir ja heute sehen und wenn man jetzt erstmal so runter scrollt sieht das erst mal nicht sonderlich spektakulär aus man sieht da nicht was zeug für die responsive sein soll aber ist ja klar wenn man hier diese seite größer und kleiner macht dann sieht man schon was sich da verändert also wir haben hier die die seitenteile die blätter die sich der größe des ganzen anpassen und hier haben wir so breakpoint an denen das ganze noch mal kleiner wird damit das dann auf den jeweiligen bildschirm passt ja mal gerade das tablet view und dvu und den landscape-modus form vom tablett ja so soll das ganze funktionieren und ich habe mir mal eine saite herausgesucht die ich momentan ziemlich cool fände und an der man das ganz schön zeigen kann tumblr nennt sich diese seite der eine oder der andere wird sich vielleicht schon kennen oder erkennt vielleicht auch templer ich habe ja schon öfter gehört kommt damit aber noch nicht so viel anfangs für die zwangsweise gar nichts anfangen soll heute aber auch nicht interessieren heute geht es eigentlich nur um diese seite also wir haben hier eine homepage website natürlich wir können hier noch auf andere seiten wenn man hier drauf liegt aber erstmal geht es nur um diese seite und wenn ich hier unter scrollen dann öffnet sich immer eine neue seite hier die immer so schön groß gestaltet ist mit seinem zum flachen design also ich finde sie richtig modern und mir gefällt die richtig gut und deswegen hab ich mir gedacht das möchte ich nach bilden in der top news ganz so wie es hier ist ist es nicht möglich war es mir nicht so möglich aber ich denke ich bin sehr nach angekommen und das ganze design und das so ein bisschen ausprobieren hat ganz gut geklappt natürlich haben wir hier auch die möglichkeit die ganze sache kleiner zu machen und wir sehen dass es sich dann an passt die seite bis zu einem gewissen punkt funktioniert das ganz gut und hier wird zum beispiel auch dass das das templar logo dort immer kleiner als an bestimmten breakpoint und wir haben dies registrieren und einloggen was immer so an der seite mit geht und wie das ganze funktioniert zeige ich euch gleich und ich habe hier mal mein beispiel und wenn man hier darauf vergessen ist ein anderes bild aber das ist bei tumblr wenn man hier die seite aktualisiert auch immer ein anderes bild aber im grunde sieht die seite schon mal ziemlich ähnlich aus dieses templer mit le clos und einloggen und das ganze ich habe die seite jetzt nur vom design her nachgebaut nicht von der funktionalität das heißt wenn man hier immer kann man nicht auf einloggen klicken da müsste halt dann button hin zum zusammen login links und hier um die suche funktioniert auch nicht es geht nur darum dieses design hiernach zu machen wenn man hier zum beispiel auf die seitenteile klickt kommt man auch immer weiter runter zu den verschiedenen kategorien zu den verschiedenen menüpunkten genauso wie bei tumblr so hier sehen wir schon mal ein unterschied wenn ich hier draufklicken dann scrollt das so die ganze zeit runter und geht an die anderen seiten über bei teplice das so dass sich dann nur eine seite bewegt ich weiß nicht genau wie die das gemacht haben funktioniert auf jeden fall anders als in der top news aber es auch nicht weiter schlimm also wir haben ja wie gesagt hier diesen diesen anfangs bildschirm und dann kann man ja noch aufgehen was ist tumblr und das ganze das coole bei der templer seite ist auch noch dass sie nicht nur in der in der breite responsive ist sondern auch in der höhe und das haben wir weil tobi – momentan noch nicht dass es noch nicht möglich aber vielleicht kommt das oder ich weiß nicht wie es geht es gibt eine einstellung die heißt die breite und höhe aber die kann man nicht ausgehen und ich weiß genau warum muss ich mir noch mal genau informieren ich hab nicht rausgefunden wie das geht aber immerhin schon mal die die breite und ich möchte euch hier nochmal eine seite zeigen wo man das ganz gut nachvollziehen kann also links und in der beschreibung und auch zu der seite dann könnt ihr euch die mal in groß angucken und zwar ist die us-bonds test nett und dort kann ich hier einfach meine seite angehen das ist mein eine url und ich habe es ganz auf einem business catalyst und dort kann ich mir jetzt also meine seite angucken wie sie ihre response funktioniert so wer vorher mit adobe – gearbeitet hat weiß dass so wie diese seite hier gemacht ist dass das in news einfach nicht möglich ist quasi unmöglich und diese ganze seite ist ohne widgets imstande komplett mit stock sozusagen adobe – ohne irgendwelche widgets ich habe ein rettet dabei dass das horizontale scrollen verhindert aber das ist nicht mehr notwendig das habe ich nur gemacht weil nicht das cooler findet aber dass sonst ist das alles ohne widgets also alles in die top news machbar so wir haben ja also oben links hier dieses tumblr logo mit der suche das erstmal somit geht und dann an der seite stehen bleibt und dann wird nur noch dass ihr kleiner eine seite die suche sozusagen das einloggen bleibt immer rechts das templer logo immer schön mittig und die ampel sehen wir schon diesen breakpoint einmal der dann diesen seitenstreifen hier ausblendet weil er sonst über das logo vom templer drüber gehen will können wir einmal nach unten scrollen da kamen die breakpoint besser sehen und da haben wir so viele kleine gesten die ich gemacht habe und hier können wir auch den jailbreak ganz gut wir haben hier die die templer dieses den text der an das erste mitglied mit sich immer ausgerichtet und einander seite stehen bleibt und jetzt zum beispiel der breakpoint und wir haben nur noch zwei kästen das layout ändert sich also so dass es auch auf dem desktop auf dem von funktion also auch auf dem handy das gleiche haben wir hier auch hier haben wir dass der text einer seite ist und dann ab einem gewissen breakpoint nach oben geht so dass man sich das auf dem handy besser angucken kann und ja in diesem portal werde ich euch ein bisschen in das neue adobe news einführen und als beispiel um da ein bisschen hereinzukommen werden wir heute diese erste seite hier machen und daran kann man schon das eine oder andere neue erklären also die frontpage werden wir als erstes machen und da haben wir schon ein paar sachen die die responsive sind und die wir anpassen müssen okay das was von hier erstmal und ich würde sagen wir sehen uns gleich in der top news so in der dom hughes angekommen seht ihr dann meine fertige seite hier dies also alles zu untereinander gemacht wie man das von von news kennt was ihr vielleicht auffällt was anders ist sind hier oben diese kleinen streifen hier und das sind wie gesagt diese breakpoint und wenn ich jetzt hier auf einen drauf clique sieht man immer was ich an diesem breakpoint verändert und man kann hier auch diesen regler an der seite noch verstehen das mache ich jetzt nicht weil die seite schon so voll ist das mein pc schwierigkeiten bekommt das ganze zu berechnen vor allem wenn noch die aufnahme läuft aber es zeige ich euch gleich in einer leeren seite wo wir dann das neue direct die sein werden also legen wir direkt los und erstellen eine neue seite dazu können wir oben auf datei und dann neue seite gehen wie wir das schon kennen und dann sehen wir schon gleich eine veränderung die neu ist wir haben hier ein anderes menü etwas weniger man kann hier aber noch die anderen einstellungen aufrufen wie man sie kennt wir sind so diese abstände design abstände aber das lasse ich alles so weil da braucht man eigentlich nichts verändern zumindest erstmal nicht und eine spalte ist ja auch richtig mehr brauchen ich dazu mindestens auch nicht und das wichtige was vielleicht erstmal hier eingestellt werden kann ist dieses kleine fältchen dort kann ich variable breite auswählen und feste breite variablen breit ist das hier mit diesem response if design und feste breite ist ganz einfach das alte was wir schon kennen also wenn ihr jetzt der seite haben wollte die nicht responsive ist sondern einfach eine mit fester breite einer von seite und einer tablet seite dann nehmt ihr dort die feste breite ansonsten nimmt ihr die variable seite wir nehmen die variable seite waren wir ja diesen service points of design haben wollen und diese teile hier halt auf die verschiedenen größen anpassen wollen auf diese verschiedenen haltepunkten die sich zumeist in der deutschen version wir drücken einfach mal hier auf ok und dann wird schon unsere neue seite erstellt hier das design hat sich ein bisschen geändert aber da solltet ihr eigentlich mit klar kommt da ist eigentlich fast genauso wie vorher so was sehen wir jetzt hier wir sind hier so einen komischen regler dem man hier so hin und her schieben kann und da kann man sozusagen der live preview sehen wie sich die sachen auf der seite verändert dann haben wir hier oben momentan ein sohn inhalte punkt an dem sich das ganze ausrichtet bevor wir anfangen schiebe ich mein haltepunkt erst mal größer das hätte man vorher schon machen können ich mache aber jetzt da ich für meine seite eine eine breitere standard breite brauche das liegt ganz einfach daran dass wir machen das mal auf 17 50 oder so er passt so ganz wichtig ist es nicht was es so genaues das ist schon relativ breit das liegt daran dass wir hier auf der seite ganz weit links und ganz weit rechts dieses templar logo haben und hier dieses registrieren bzw damit ihr obst gold da es normalerweise dieses einlagen logo was wir hier aussehen templer und einloggen womit fangen wir an ich würde sagen wir fangen an mit diesem hintergrund hier den wir hier erst mal gestalten wollen sie erst mal die seite hier weiter nach unten denn wir wollen ja erstmal ein bisschen platz haben und bevor wir hier irgendwelche heiter punkte hier einführen weil die kann man sich nämlich hier so mit diesem plus hinzufügen das sind diese breakpoint dass wir das ganze auf kompletter breite ich hatte am anfang diese breakpoint gemacht und meine sachen direkt im auf diese breakpoint eingepasst aber ich finde das ist immer umständlich und deswegen fangen wir erstmal an alles zu design in einer breite und zu aller erst sich hier einmal einen kasten der ja mein ganzen bildschirm ausfüllen soll und jetzt seht ihr vielleicht schon eine veränderung in der obersten leiste denn hier hat sich was getan wir haben wir dieses verankern was vorher nur dieses kästchen hier war wo man oben unten links rechts verankern konnte gibt es jetzt noch dieses das ist so eine art ausrichten so eine responsive position sozusagen nach welche richtung er sich ausrichtet soll immer in der mitte immer rechts immer links zeige ich aber euch gleich nochmal als erstes lassen wir das ganze weil das brauchen wir nicht weil hier dieses fällt ja 100 prozent der breite ausfüllt deswegen musste ich dass er nichts ausrichten und da haben wir das schon dieses alte zeichen hier 100 prozent der breite findet man jetzt wenn man hier auf diesem fall geht auf an browser breite anpassen oder man zieht einfach wie gewohnt links und rechts an die seite und dann hat man schon die ganze hier gehen wir ganz einfach wieder auf fläche bild hinzufügen und führen jetzt einen bild hinzu und das können wir ganz normal bearbeiten wie sonst auch immer schön skalieren damit die ganze aus gibt es ganz ausgefüllt wird okay das hat ja schon mal ganz gut funktioniert und auch nicht sonderlich schwer bis jetzt haben wir noch nichts wirklich neues gemacht das ist ja mehr oder weniger jetzt responsive also so wie wir das von tobias kaehne hat sich nicht viel verändert was ich jetzt allerdings tut ist wenn wir den kleinen ein log button machen wie wir den hier sehen dieses einloggen hier da haben wir das erste mal richtig dieses responsive design wenn wir es verwenden und dafür ziehe ich mir einfach mal einen den text kasten und schreibe hier rein einloggen so hätte ich jetzt hier zum beispiel meinen ein log button den noch ein ganz klein bisschen hier nach unten verschieben mit diesem werkzeug an der seite so damit das passt und einmal die ecken ein bisschen abrunden und schon hätte ich meinen ein log daten fertig und jetzt können wir gleich mal sehen was das hier eigentlich macht und was wir gleich noch verändern müssen denn wir können jetzt hier mal diesen regler hier an der seite schieben einer seite hier hin und herschieben und wir sehen wenn die browser breite weiter auseinandergeht passiert erstmal gar nichts das bleibt erstmal stehen wenn ich das allerdings hierhin schiebe und dann sehen wir dass sich das mit beweg mit dem browser also mit der rechten seite und sich auch die form verändert und zwar wird das responsive im verhältnis zu der breite hier auch das kästchen kleiner und das wollen wir nicht wir wollen ja den die logo button so behalten wir wollen nur dass er mitglied und deswegen verändern wir hier oben in dieser leiste hierbei skalieren gehen wir einfach auch ohne man schon sehen wir findet sich dieser button nicht mehr jetzt haben wir das problem dass der button aus dem bild aus dem bereich des sichtbaren hinausgeht und das wollen wir auch nicht und deswegen klicken wir hier noch einmal auf und jetzt kommt dieses werkzeug hier jetzt können wir einmal an die rechte seite bin das ist das was wir eigentlich haben wollen das immer rechts bleibt wir können es aber auch an die mitte bin dann bleibt es erst mal so und wir können links an bin dann geht es hier auch raus so was wir aber haben wollen ist natürlich rechts an pin und genau jetzt allerdings noch ein problem und zwar wollen wir ja wenn dieser bildschirmbereich hier größer als das wird möchte ich aber auch dass das logo zur rechten seite mithin geht also soll da nicht einfach stehen bleiben soll er soll es nach rechts mit hingehen und dafür gibt es da oben diesen pfeil und wenn man da hat darauf klickt dann ändert sich die richtung des files und dann wird das ganze nach außen hin weiter berechnet so jetzt habe dieses einloggen logo hier was nach außen hin immer mit geht und nach innen hin immer mit geht das genau das was wir für diese seite hier haben wollen weil das ja später auf einem breiten bildschirm auch gut aussehen sollte dieses logo soll soll sich weit nach rechts mit bewegen so das funktioniert jetzt erstmal kommen wir zur nächsten sache und das ist die suchleiste und bevor ich das richtig machen mit diesem templer logo können wir einmal hier in den rechteckigen quadrat machen wir mal und wie machen wir den quadrat einfach die shift taste halten und ein viereck ziehen und dann haben wir ein quadrat so dann nehme ich jetzt einfach mal irgendeine farbe um euch das zu zeigen hier auf dieser höhe da kommt später unser tempel logo rein und hier kommt unsere suchleiste ein dass unsere suchleiste und die nehmen wir auch meine an einer farbe und das seht ihr schon die standardeinstellungen ist immer so dass sich das ganze immer responsive die gesten verändern die größe der kästen die skalierung und dafür haben wir halt ihr diese felder und dann können das halt immer hier anpassen eingehoben einfach auch hier ohne das was wir hier ausgewählt haben da stand vorher responsive breite jetzt gehen wir auch ohne und dann sehen wir dass sich die breite also das quadrat nicht mehr verändert und das genau das was wir wollten so jetzt können wir hier einfach mal das tumblr logo einfügen das hat er jetzt nur so gefärbt um das besser zeigen zu können da habe ich einfach mal eine png datei aus photoshop und die kann ich jetzt hier einfach passen skalieren und schon habe ich dieses tumblr logo natürlich wollen wir den hintergrund entfernt weil den weil wir den hier nicht brauchen und das soll ja später unsere suchleiste werden ich habe jetzt natürlich keine echte suchleiste sondern einfach mal nimmt wenn ich nehme jetzt hier einfach einen weißen kasten runde denen ein bisschen ab hier mit zwei oder sowas und fährt das ganze in weiß soll ja nur als beispiel dienen damit ihr seht wie das ganze dann aussehen kann als nächstes will ich sagen fügen wir hier in der mitte dieses tumblr ein lock screen hinzu und ich gucke mir das einfach hiervon weil das ganze hier eigentlich nur einen kasten ist dazu habe ich hier die in der widget bibliothek in der standardmäßig von news.de die mitgeliefert wird kann man hier und auf schaltfläche gehen und dann auf status fläche und wenn man sich das ganze hier mal raus löscht und nur diese fläche hier benutzt dann kann man das ganz gut als als kasten benutzen weil jetzt kann ich hier drinnen in diesen kasten kann ich bilder einfügen kann ich text einfügen kann ich andere kästen wieder einfügen und dann kann ich aber diese ganzen einzelne bilder die hier alle einzelnen das ist das aller kassen das eigene kasten aber diese innerhalb dieser schaltfläche und deswegen kann ich die behandeln als wären sie ein objekt und das geht ziemlich einfach damit und dann kommt man nicht durcheinander und deswegen kann ich hier dieses objekt einfach einfügen hier das wäre dann bei euch vielleicht auch in den kasten oder andere sachen und hier oben gehe ich wieder auf skalierung ohne und damit dass damit die breite sich nicht verändert weil ich möchte dass die breite gleich gleich bleibt und hier bei dieser verankerung gehe ich in der mitte also diese verankerung hier an diese franken ist im grunde nichts anderes als einen punkt an dem sich dieses objekt ausrichten soll also immer in der mitte des browsers immer an der rechten seite im an der linken seite und im gegensatz zu diesem fall alten verankern werkzeug was wir hier noch haben bleibt dieses objekt dann nicht nicht stehen also hier müssen wir bei diesen oberen sachen bei die ja mit scrollen sollen beziehungsweise nicht mit scrollen sollen hier sehen wir welche nach unten scrollen bleibt es einfach gepennt und diese pin option können wir hier noch festmachen und da wären wir erst mal mit ich aus und hier auch mittig und dann seht ihr das ist gewinnt und bleibt erstmal in der mitte stehen als nächstes würde ich hier noch die die suchleiste erstmal ohne machen so dass sie auch fest bleibt das ist dieser ganze punkt den wir hier sehen am anfang bleibt das alles immer mittig und erst ab diesem punkt wo ist die seite des browsers berührt geht das mit und geht nicht darüber das gleiche haben wir hier bis zu dem punkt und da fügen wir gleich ein break point ein und dann geht das ganze mit als nächstes haben wir hier unten noch diese kleine leiste hier die wir noch schnell einfügen dass hier das nichts anderes als in den text fällt bei mir auch ohne verlinkung und dort seht ihr schon dass ich hier die links ausrichten lasse damit das immer am linken rand bleibt so geht die anzeige dort da unten mit dem support und nutzer bedingungen immer am linken rand mit als nächstes fühlen wir jetzt diese punkte hier an der seite hinzu diese menü optionen und das auch kein budget das ist sogar nicht mal ein eingebautes widget von adobe news sondern es sind einfach ganz normale rechtecke mit abgerundeten ecken und daraus macht man ja dann kreise also ihr nehmt euch hier dieses rechteck werkzeug drückt shift und macht dann so einen kasten hier geht dann hier auf die kanten drauf um diese kann abzurücken und gibt hier irgend eine hohe zahl an die ausreicht um die kanten abzurunden so dass ein kreis entsteht dann könnt ihr hier die kontur auf 3 oder sowas machen also ein bisschen höher und bei mir ist es dann die farbe weiß bei mir ist jetzt ein bisschen zu groß aber dass sie gleichzeitig dass er eben nur dann haben wir habe ich beim 1 kreisen zonen rollover state den sieht man nur ganz leicht dadurch werden die kreise ein bisschen bisschen stärker das heißt erstmal die deckkraft runtermachen auf 50 prozent oder sowas und dann kann man hier auf diesen ball aber state gehen und die deckkraft hoch machen das kennt ihr schon da hat sich nichts verändert eine sache die sich doch verändert hat die ziemlich cool ist sind hier diese übergänge und wenn ihr diesen übergang greinacher anmache dann habe ich so einen zu einem leichten fällt also ich stelle das mal auf 0 2 und machen wir hierbei aktiv auch eine farbe rein und nachher kann ich diesen kreis hier dann mit einem anker verbinden ich kann hier also einen anker unten an die seite ran machen und wenn ich diesen kreis dann damit verbinde und ich dort nach auf diesen kreis drauf clique ist dass wien im menü wenn dieser anker diesen den kopf der seite berührt den kopf des browsers dann wird dieser kreis hier aktiv also ausgefüllt und ich habe jetzt die fed auf 02 man kann das für jedes einzeln einstellen bei mir ist jetzt alles auf 0 2 und man sieht dass hier gleich bei rollover wird das kein bisschen heller ich mache noch mal eben kurz nennt kasten rein damit man das noch mal deutlicher sieht mit dem mit dem feld was ich meine und bei rollover einfach mal eine andere farbe und dann dieses verblassen an mache kann ich mal hier auf die seiten vorzugehen so seht ihr dass dieses so redet und hier auch dieser fällt hier ist dieser fällt beim runtergehen zum beispiel nicht an das sieht man wenn ich hier draufklicken dann auf rollover gehe und dann auf diesem normalen state bin sehe ich das hier dass ich ihr das verblassen nicht angekreuzt haben und deswegen war das gar nur beim rausgehen und ich beim runtergehen dann haben wir hier noch verschiedene easings also wie das ganze feld ich lasse das hier einfach mal auf beschleunigt und ich lösche dass sie auch mal wieder weil das bräuchte gar nicht wir haben hier also diese gruppe mit diesen ganzen kreisen wichtig gemacht habe und nachher dann alle einzeln verlinkt und hier habe ich verlinke ich mal eben den ersten kreis direkt mit 1 und wenn ich dann darauf clique werde ich dann nachher hier runter scrollen und dann wird das ganze aktiv wenn ich jetzt darauf gehe seht ihr dass dieser punkt sich dann ausfüllt also kann man das hier mit diesen punkten an der an der seite machen so wir haben jetzt hier dieses einlagen der die suchleiste natürlich habe ich das jetzt nicht als angepasst ist viel zu groß und passt auch nicht wirklich aber so ist das ungefähr so muss das wir haben natürlich das ganze noch überhaupt nicht angepasst so wäre das jetzt bei der all bei dem alte tobi news wir hätten so selbst dann ganz gut aus so wie wir es haben wollen aber wenn ich jetzt einen kleineren browser habe oder kleineres browserfenster dann sind irgendwann die sachen an der seite raus und ich kann dort nichts mehr sehen und das ist halt blöd und das ist das was ich jetzt mit dem neuen hier anders machen kann also wir haben hier unsere seite fertig und jetzt fange ich erst an mir die verschiedenen breakpoint zu setzen aus dem ganz einfachen grund dass ich am sonst nur am nach besser bin und nicht wirklich vorankommen das hatte ich zwischenzeitlich und das ist echt nervig also fangen wir jetzt an unsere breakpoint zu setzen als erstes versucht das hier ganz ein bisschen mutiger zu machen zu damit ich jetzt genau gleichzeitig auf diese kannte hier treffe also ich sehe das hier ist diese könnte von dem templar logo und dass diese kante von dem einloggen und hier wäre der punkt an dem das design kaputt geht also ihr sucht euch immer die punkt da ab die der stelle wo das design kaputt geht oder wo er halt einen breakpoint 6 volt um das design zu verändern so wir haben jetzt hier diese stelle wo dieses tumblr logo links rüber gehen würde und das einloggen rechts rüber und hier können wir jetzt was verändern als allererstes setzen wir jetzt hier einen neuen breakpoint beziehungsweise haltepunkt und dazu gehen wir einfach auf dieses plus hier drauf und dann erstellt sich so ein schöner haltepunkten und wir können jetzt hier hin und her klicken so und erst mal tut sich da nicht viel weil wir ja noch nichts verändert haben das heißt im grunde bleibt alles gleich und das soll auch so wenn wir jetzt hier in diesem haltepunkt drin ist und wir uns ein bisschen reingeschoben haben können wir übrigens immer wieder auf eine freie fläche klicken und schon sind wir wieder innerhalb des haltepunkts an der richtigen stelle da wo dieser breakpoint ist so an dieser stelle könnten wir jetzt das templer logo weiter nach innen verschieben damit das design wieder funktioniert und dass ein lob ein logo auch weiter nach entschieden damit das wieder funktioniert und wenn wir jetzt einmal hier die seiten benutzen sehen wir dass wir an diesem punkt den nächsten projekt haben und alles geht nach innen so können wir das natürlich machen so haben wir es aber bei unserem eigentlichen hier nicht gemacht man sieht dass hier einmal so hier sehen wir dass dieser breakpoint nicht das ganze weiter nach hinten schiebt sondern dass dieser breakpoint einfach nur die sachen an dem rand hält also immer an der an dem linken beziehungsweise immer am rechten rand und das können wir ganz einfach nicht mach mal hier zurück und gehe hier auf dieses einloggen und dort sehen wir hier unser fan kann war ja in der mitte wir wollen jetzt aber allerdings rechts an und jetzt haben wir das dieses einloggen die ganze zeit mit geht also genau das was wir haben wollen das gleiche wollen wir hier bei den templer logo haben wir wollen dass es jetzt links dran hält immer links bleibt so und immer mit geht und jetzt können wir uns überlegen ob es sinnvoll ist diese suchleiste eventuell auch zu verkleinern und dazu können wir hier diese responsive breite anklicken und jetzt sehen wir je mehr wir enger die seite wird desto kleiner wird auch diese suchleiste und ihr seht schon auch irgendwann geht dieses design wieder kaputt also unsere gestaltung wo das einloggen in die suchleiste reingeht und an dieser stelle könnten wir jetzt ganz einfach noch einen breakpoint setzen und wir haben ja auch an der seite wo diese punkte in einander gehen und das wollen wir halt eben auch vermeiden indem wir die punkte dann gleich einfach ausblenden werden so ich würde sagen wir machen den breakpoint vielleicht noch einmal hier und verändern das design komplett wir machen hier ein break point einen haltepunkt und verschieben das einloggen vielleicht hier hin obwohl es unnötig ist obwohl wir hier schon einmal einloggen habe aber das ist jetzt egal machen das ganze größer also auf diese größe es geht nur darum dass wir dieses design verändern wollen und die templer suchleiste kommt jetzt hier über die gesamte warte dann nehmen wir uns am besten nur einmal dieses weiße suchleiste aus und machen die größer und packen das ganze in die mitte genau so wie das hier auch einmal mit ich ausrichten das heißt wir haben noch ein break point wo sich noch mal alles verändert so sehr schön und hier nochmal das ganze design und ihr seht schon hier passen unsere einstellung nicht mehr das macht gar keinen sinn mehr wir müssen nicht mehr links das einloggen ausrichten und das template logo muss auch nicht mehr rechts links aus gericht werden und das einloggen rechts meinte ich sondern wir müssen das jetzt mit ich ausrichten weil wir das ja ganze zentriert haben das heißt wir gehen hier auf die verankerung in der mitte und bei dem einloggen auch in die mitte warum benutze ich ihr dieses werkzeug nochmal ganz einfach weil wir ja beim scrollen wollen dass diese sachen gepinnt sind möchte ich jetzt dass das ganze mit nach oben scrollt benutze ich hier diese option hier ich kann hier also genauso hier auch dies mit ihrer auswählen dann zu gold allerdings das ganze mit nach oben und ich sie ist nicht mehr und es ist nicht gewinnt aber ich möchte das gewinnt ist also bleibt das so so werden sie jetzt veränderung des des designs und hier sehen wir das macht auch keinen sinn hier mehr mit der suchleiste ich möchte nicht mehr dass die mit kleiner geht bzw ich könnte mir vorstellen dass ich das erstmal ohne mache und dann würde ich müsste ich hier ab diesem punkt spätestens nochmal eine breakpoint setzen und genau das werden wir auch tun wir werden uns hier diese stelle heraus suchen wo das design wieder kaputt gehen würde also irgendwo hier oder was machen hier einen neuen haltepunkt und löschen hier einfach mal dass ihr weg jetzt nicht entfernt rücken oder löschen oder sowas weil dann ist das auf den anderen punkten auch weg wir machen hier ein rechtsklick drauf und gehen auf im haltepunkt ausblenden das heißt nur in diesem haltepunkt wird dieses objekt ausgeblendet in allen anderen ist es noch da genau so wie es sein soll so und jetzt ist es weg genauso wie wir das haben wollen als nächstes würde ich sagen geht zum beispiel mal dieses einloggen noch mit weg weil das brauchen wir nicht mehr und gehen hier auf inhalte punkt aus bild nicht in anhalt punkt sondern nur in dem haltepunkt als nächstes könnten wir zum beispiel die suchleiste hierhin verschieben das tumblr logo hier oben hin dass tabaluga vielleicht ein bisschen vergrößern so zum beispiel die suchleiste ein bisschen richtig positionieren hier und jetzt könnten wir zum beispiel bei der suchleiste sagen die soll responsive in der breite sein also jetzt geht das ganze in der breite mit die suchleiste und wir haben hier ein paar verschiedene designs gemacht die mit den verschiedenen breakpoint im innern über ineinander übergehen und sich zwischen diesen breakpoint auch verändern können also ein richtig schönes response if design haben wir hier entwickelt das richtig gut funktioniert wir können uns das einmal in der seite anschauen so sieht unsere seite hier aus ich könnte vielleicht ein ander hintergrund nehmen weil der hier so hell ist man das mit dem logo so schlecht sieht aber wir sehen jetzt dieses einloggen logo was immer mit geht bis zu diesem break point an dieser stelle bricht das ganze um in ein anderes design und noch mal und schon haben wir das tempo logo oben und wir haben hier praktisch eine mobile website und an dieser stelle haben wir hier dieses templer logo was wäre da drüber geht was hier sinnvoll ist hier geht das ja mit an dieser stelle halte es nicht mehr für sinnvoll und deswegen würde ich dass er jetzt hier das hier auswählen hier oben damit das nicht mehr darüber geht genauso wie hier würde ich auch dass ihr auswählen so gucken uns das ganze noch einmal an wir haben am anfang geht des tumblr logo noch mit bis es auf diesen rand trifft bleibt dort hängen das einloggen geht auch von rechts mit bis die sich immer näher kommen und bevor die aufeinandertreffen wechselt das design um damit wieder besser passt er springt sozusagen einmal um jetzt könnten hier an der seite diese punkte hier in dieses templar logo reingehen und deswegen löschen wir dass daraus mit diesem haltepunkt entfernen und wir verändern das design noch mal komplett damit wir schlussendlich für eine mobile seite einen praktisch ist design haben und das kann komplett anders aussehen als das was wir in dieser breiten seite haben also wie gesagt man kann hier ziemlich coole sachen mitmachen ich hab euch jetzt nur ein bisschen was gezeigt von dem was möglich ist dort ich würde sagen probierte einfach mal rumprobiert da sachen aus verschiedenste und nur wenn man sich damit ein bisschen auseinandersetzt kann auch richtig funktionieren und sonst würde ich sagen erst leid da schaut beim einem kanal vorbei wenn ihr fragen habt schreibt sie in die kommentare und wenn es irgend etwas nicht verstanden hat schreibt auch in die kommentare und soll ich sagen auf dem mist video und auf ca

23 thoughts on “Adobe Muse CC Responsive Web Design | Tutorial | German”

  1. Hey, danke für das Tutorial! Habe aber das Problem, wenn ich jetzt ein Titelbild sozusagen verwende mit einem Button zum runterscrollen, funktioniert das alles auf meinen zwei Bildschirmen (1920×1080 und 1240x1080ca.) ganz gut. Wenn ich das aber am Laptop anschaue, ist der Button zu weit unten, sodass ich für den Button schon scrollen muss, was aber den ganzen Effekt vermiest. Hast du einen Tipp was ich besser machen kann? lg

  2. Super Tutorial, danke!
    Ich habe allerdings bei meinem Projekt, welches ich gerade resposive mache das Problem, dass ich Elemente eines Diashow-Widgets gerne in der Mitte verankern würde, dies aber nicht geht, da die Funktion dafür nicht auswählbar ist. http://prntscr.com/fxt0g5
    Weißt du, ob man das trotzdem irgendwie in der Mitte verankern kann?
    Danke schonmal und LG,
    Felix

  3. hab ne frage auf die ich keine lösung finde. jedesmal wenn ich eine seite baue mit einem bild im hintergrund hab ich unten einen breiten weissen balken den ich nicht wegbekomme. kann mir da wer helfen? wie schaff ich es dass die seite exakt dort aufhört im browser wo mein bild endet und nicht noch nen guten zentimeter weiter geht?

  4. Merci super deine Videos.Leider habe ich Probleme mit dem responsive…. Alles ? richtig gemacht, Deskopansicht super, aber Mobil echt shit.Wie komme ich weiter? Gibst du Hilfestellung?

  5. Tolle Videos, und einfach erklärt.
    Auch ich habe eine Frage: In Muse gibts ja kein "Weiterlesen" Widget oder Ähnliches. Ich hab zwar ein sauteures Widget gefunden, aber meine Frage ist, ob das nicht in Muse realisierbar ist. Die Akkordeon Widgets helfen mir da auch nicht, weil die Texte nach dem "read more" zu lang sind, und ewig gescrollt werden müsste.
    Vielen Dank im Voraus

  6. Hey SB-Designs,
    erstmal großes Dankeschön für die tollen und vor allem hilfreichen Videos! Bei dem Responisve Design kommen bei mir allerdings Fragen auf… Denn, sobald man die variable Breite benutzt, kann man ja keine Bildlaufeffekte mehr verwenden. Nun, wie kann man dieses Problem umgehen? Die Website soll bei verschiedenen Browsergrößen natürlich mit skalieren, allerdings möchte ich die Bildlaufeffekte nicht missen.
    Wie kann man das lösen?

  7. Hallo SB-Designs das Video hat mir sehr geholfen wieder neue Sachen zu entdecken. Bei mir spinnt jedoch seit langer Zeit diese einrastfunktion, sprich ich muss es immer nach Augenmaß oder mit dem Ausrichtenwerkzeug ausrichten. Hast du eine Idee an was das liegt und wie man es wieder an bekommt?

  8. Hey, kann ich die fertige Adobe Muse CC Responsive Website später ganz einfach in ein CMS einbinden, um dem Kunden eine einfach Nachbearbeitung zu gewährleisten? Grüße Daniel

  9. Professor … I bought Animate adobe and adobe muse … I want to make an animation and insert with displacement effect in muse so it can be controlled with the option of … animation. I've done all steps to create it in Animate adobe, export the .oam put it in the folder … but to simply publish the animation is still long and does not stop as the scroll … please can you explain that? Regards my friend

  10. Danke für die Anleitung, Sebastian! Jetzt wage ich mich mal an die Umsetztung.
    Eine Frage: Was macht man, wenn eine Seite besonders viele Elemente hat (Beispiel: http://karo-und-co.com/ )? Funktioniert responsive Design da überhaupt oder bringt man sich nur in Teufels Küche?

  11. Kann man auch z.b. machen, dass wenn ein Haltepunkt erreicht wird ein Bild durch ein anderes ersetzt wird? Oder sollte ich adnn das eine Ausblenden und das andere einblenden?

Leave a Reply

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