Vorteile des klassischen Workflows Dieser lineare Workflow hat auch deshalb ..." /> Vorteile des klassischen Workflows Dieser lineare Workflow hat auch deshalb ..." /> Vorteile des klassischen Workflows Dieser lineare Workflow hat auch deshalb ..." />

SEO Text Tool: Kostenlos einzigartige Texte schreiben mit dem Artikel Schreiber

Konfiguriere, welchen SEO Text das Tool automatisiert für dich erstellen soll

Schritt 1: Hauptstichwort eingeben
(Thema des Artikels)!

Schritt 2: Nebenstichwort eingeben
(Nuance des Text Inhaltes)!

Schritt 3: Klick auf "Text erstellen"!


Dein neuer Artikel Überschrift:    

Der Workflow im Responsive Webdesign – Wege & Strategien - Webdesign Journal

Sprache:    

Dein Artikel ist in deutscher Sprache geschrieben

Hauptstichwort (Thema des Artikels):    

Webdesign

Nebenstichwort (Nuance des Text Inhaltes):    

responsive Website

Hauptthemen des neuen Artikels:    

Zusammenfassung:    

Und es hat sich gezeigt, wenn zuerst das Design gestaltet wird (manchmal - ganz selten - tatsachlich noch ausfuhrlich in Photoshop, weil Kunde und Agentur es so mochten), wird viel Zeit und Arbeit in >> Pixel<< Details gesteckt. Eine moderne Website besteht aus vielen verschiedenen Komponenten, die zusammen das Design bilden: Navigationen, Inhaltsfelder, Slider, Buttons, Formulare usw. Alle diese Kompontenten werden gestaltet und in unterschiedlichen Zusammenstellungen auf den einzelnen Seiten eingesetzt. Auf unserer Seite hingegen spart es Zeit (manchmal gewaltig), steigert im Einzelfall sogar den,,Profit" (ein wenig) und sorgt unterm Strich dafur, dass,,Deadlines" nicht nur realistisch und haltbar sind sondern am Ende dann tatsachlich auch gehalten werden.

Hilf uns, verlinke uns:    

Weiterführende Links:    


Artikel vorlesen lassen:

Artikel Text:

Der Workflow im Responsive Webdesign – Wege & Strategien - Webdesign Journal
Bildquelle: https://www.pressmyweb.com/wp-content/uploads/2012/09/florian-jamois-webdesigner.jpg    

Vorteile des klassischen Workflows Dieser lineare Workflow hat auch deshalb funktioniert, weil die surfende Zielgruppe recht klare Voraussetzungen hatte. Es gab sicherlich immer schon unterschiedliche Monitore, aber eine minimale Bildschirmgrosse gab den Rahmen vor, den die meisten erfullen konnten, dazu sassen sie am Schreibtisch vor dem Desktop-PC. Dazu kam, dass der Designentwurf und die fertige Website statisch waren. Und so war der alte Workflow auch deshalb,,beliebt", weil fur den Webdesigner/-programmierer und den Kunden alle Schritte gut nachzuvollziehen waren. Die einzelnen Disziplinen (Konzeption, Design und Technik) konnten gut getrennt voneinander arbeiten, einer nach dem anderen kam zum Zuge, die Arbeitsschritte waren klar getrennt. Und der Kunde konnte zuerst eben ein eindeutiges Design sehen und wusste genau wie seine fertige Website einmal aussehen wird. Der alte Workflow - im mobilen Web unbrauchbar Die Einfuhrung des iPhones im Jahre zweitausendsieben wird gerne als Beginn des mobilen Internets bezeichnet. Uber die Jahre haben die mobilen Endgerate eine solche Verbreitung gefunden, dass die oben beschriebene Kernzielgruppe so nicht mehr existiert. Besucher betrachten mit unzahligen unterschiedlichen Geraten und damit auch unzahligen unterschiedlichen Viewports die Website. Eine statische Website sieht dann bei sehr grossen Monitoren verloren aus. Auf eher kleineren Monitoren wird die Website verkleinert dargestellt und man muss hinein zoomen, um die Inhalte lesen zu konnen. Teilweise erscheint ein horizontaler Scrollbalken oder die Inhalte sind horizontal verdeckt. Ungunstig: Die Website wird zu klein dargestellt und die Inhalte sind kaum erkennbar. Nach dem heranzoomen muss man die Inhalte dann horizontal scrollen. Egal, welcher dieser Falle auftritt, ein statisches Layout, dass fur eine feste Breite gestaltet und umgesetzt wurde, ist hier naturlich denkbar ungeeignet. Will man also den alten Workflow fur die neuen Rahmenbedingungen anpassen, hiesse das nicht mehr nur einen Entwurf fur eine fixe Breite zu gestalten, sondern mehrere unterschiedliche Breiten zu definieren und fur diese unterschiedliche Entwurfe zu gestalte, z.B. kleine und grosse Desktop-Ansicht und jeweils eine Tablet- und eine Smartphone-Version in Portrait- und Landscape-Modus): Diese fur einzelne Viewports optimierten Designs mussten dann einzeln abgenommen und umgesetzt werden. Als Ergebnis hatte man dann nicht eine statische Seite, sondern mehrere, die eben fur unterschiedliche Viewports erstellt wurden. Ein kleines Rechenbeispiel: zwei Designentwurfe fünf Seitentypen drei Break-Points = dreißig PSD-Dateien Das ist noch ein eher bescheidenes Beispiel. Man kann sich leicht ausrechnen, was bei deutlich komplexeren Websites mit mehr Seitentypen und mehr Breakpoints fur ein Aufwand entstehen wurde. Bei Anderungswunschen musste dann nicht eine Ansicht, sondern immer mehrere angepasst werden, was schnell in einem enormen zeitlichen Mehraufwand und Mehrkosten enden wurde. Und wird statt fur eine feste Breite fur mehrere optimiert, bleiben doch weiterhin unzahlige Breiten unbeachtet. Dazu macht sich spatestens hier der grosse Nachteil von statischen Design-Entwurfen negativ bemerkbar: Sie sind eben statisch und nicht dynamisch. Und solche Aspekte wie Animationen, Interaktionen lassen sich damit nicht wirklich gut simulieren. Kurz zusammengefasst:Der lineare Workflow ist fur das mobile Web und responsive Websites ineffizient! Ein anderer Workflow - eine andere Vorgehensweise Aus diesem Grunde hat sich nun das Responsive Webdesign (abgekurzt gern auch mal nur RWD genannt) durchgesetzt. Also eine flexibles Design, das verschiedene (alle) Viewports berucksichtigt. Doch mit einem Grafikprogramm lasst sich dieser Flexibilitat nicht vernunftig beikommen. Fixe pixelgenaue Designs sind nicht mehr praktikabel und auch nicht mehr wunschenswert. Dieser Veranderung betrifft aber nicht nur die pixelschubsenden Designer. Ein responsiver Workflow betrifft alle am Projekt Beteiligten. Denn es geht nicht nur darum, Designs jetzt eben nicht mehr pixelgenau umzusetzen und flexibel darzustellen, es geht viel mehr um das grosse Ganze. Ein responsiver Workflow beginnt schon mit der Konzeption und bezieht regelmassig alle am Projekt beteiligten ein. Im Idealfall arbeiten Entwickler, Designer und Konzepter von Anfang an zusammen. Eventuell vereinen sich die drei Tatigkeitsbereiche auch in einer Person. Und dann ist da ja noch der Kunde. Er wartet (ja, manchmal auch heute noch) auf bunte Photoshop-Designs im JPG- oder PDF-Format. Hier hilft Erklarung und Aufklarung! Die Bedeutung responsiver Webseiten und veranderter Arbeitsablaufe mussen erklart werden. Sicherlich nicht in allen Einzelheiten. Den Kunden interessieren (meistens) keine Breakpoints, und er muss sie auch nicht kennen. Er muss die Bedeutung kennen fur den Endkunden. Dieser soll die Seite hinterher nutzen (konnen), egal, wo und wie und mit welchem Gerat. Responsive Webdesign ist dafur gemacht, dem Endanwender die Nutzung der Webseite in jeder Situation zu ermoglichen und zu erleichtern. Content first Zur Aufklarung gehort also, dem Kunden klarzumachen, dass die Inhalte das Wichtigste sind, dass diese am besten vor dem Design und der Umsetzung feststehen (nicht unbedingt alle Texte bis ins Letzte ausformuliert, aber zumindest deren Art, Bedeutung, Umfang und benotigter Platz). Der Kunde muss und soll dann auch nicht mehr auf Bilddateien warten, sondern kann recht fruh im Browser die Entstehen der Website mitverfolgen. Dies legt den Schwerpunkt weg vom rein asthetischen Empfinden einer Bilddatei hin zu der Interaktion mit der Website und den Inhalten. Durch den veranderten Ablauf wird auch haufig der Kundenkontakt intensiver. Regelmassigere Abstimmungen und weniger,,bose " Uberraschungen bei den,,grossen " Abnahmen sind das Ergebnis, wenn der Kunde bei vielen Entscheidungen fruher dabei ist und die Zwischenergebnisse verfolgen und Einfluss nehmen kann. Aus der Praxis Regelmassig habe ich die >> Diskussion<< uber den Projektablauf: Erst das Design, dann die Umsetzung oder das Design bei der Umsetzung. Und es hat sich gezeigt, wenn zuerst das Design gestaltet wird (manchmal - ganz selten - tatsachlich noch ausfuhrlich in Photoshop, weil Kunde und Agentur es so mochten), wird viel Zeit und Arbeit in >> Pixel<< Details gesteckt. Bei der technischen Umsetzung und der Betrachtung im Browser sind dann aber meistens all diese Details unwichtig. Der Kunde kann klicken und achtet auf andere Sachen, aber kaum noch auf die ihm vorher ach so wichtigen Design-Aspekte. Der neue responsive Workflow Die,,Losung", um den Workflow fur responsive Websites anzupassen, besteht darin den Ablauf aufzubrechen und schon moglichst fruh mit der technischen Umsetzung zu beginnen. Es ist ein agiler Ablauf, der gerne auch iterativ genannt wird. Das bedeutet, dass der Workflow in kleinen Schritten gegangen wird. Zwischendurch werden die einzelnen Schritte immer wieder besprochen und getestet und so lange wiederholt, bis das Ergebnis zufriedenstellend ist und zum nachsten Schritt gegangen werden kann. Im einzelnen kann ein klassischer responsiver Workflow folgendermassen aussehen: eins Projektrahmenbedingungen Zuerst sollten die Rahmenbedingungen des Projektes festgelegt werden. Dazu gehort unter Umstanden auch dem Kunden den folgenden Ablauf zu erklaren und ihm zu verdeutlichen, wie sich Design und die technische Umsetzung sprichwortlich gemeinsam entwickeln. Die Entscheider auf Kundenseite werden festgelegt, damit klar ist, wer spater einzelne Schritte abnimmt. Man einigt sich zudem auf die wichtigsten Gerate und Browser, die spater vollumfanglich getestet werden und auf die benotigten Breakpoints (also die Stellen, an denen das Design/die Inhalte ihr Aussehen bedeutend andern konnen). Auch Design-Aspekte werden besprochen, also ob es optische Vorgaben gibt, ob ein Moodboard vorhanden ist oder erst entwickelt werden muss. Da es keine, oder zumindest nicht mehr so viele eindeutige klare Zwischenergebnisse gibt, kann es sein, dass der Vertrag auch eher,,agil" sein muss. Also unter Umstanden auch flexibel, was den Zeitrahmen und den Aufwand betrifft. Mitarbeit des Kunden Nicht selten, dass Kunden den Aufwand der Erstellung einer Website unterschatzen. Und zwar nicht nur den Aufwand beim Auftragnehmer, sondern auch ihren eigenen. Ja, der Kunde sollte, besser muss, mitarbeiten. Er sollte nicht nur den Projektstartschuss geben und ab und zwischendrin ein paar Designs absegnen. Beim responsiven Workflow muss er regelmassig aktiv mitarbeiten. Klar, dass sollte eigentlich auch unabhangig davon von der Art des Workflows sein, damit man sich kontinuierlich austauschen und die Richtung abgleichen kann. Beim responsiven Workflow ist dies aber eben besonders notwendig. Dies sollte man dem Auftraggeber zu Beginn des Projektes, am besten auch schon vor Auftragerserteilung klar machen. Nicht wenige Projekte, die sich verzogern und (fast) alle aus einem Grund: Der Kunde muss noch liefern (Inhalte, Feedback). 2. Konzeption / Content Strategie Nach dem Motto,,Content first" werden zuerst die Inhalte (sofern vorhanden) gesammelt, bewertet und gegliedert. Es wird eine Art Inhalts-Inventur gemacht. Dabei wird auch deutlich, wo noch Inhalte erstellt werden mussen. Hier mussen die Ziele der Website, die Unternehmensziele und die Erwartungen und Bedurfnisse der Zielgruppe, wie auch die deren Nutzungsverhalten berucksichtigt werden. Aufgrund der Inventur ergeben sich dann Seiten-Strukturen, so dass die Navigationen festgelegt werden konnen. Nicht selten wird dabei der Inhalt auch fur den kleinstmoglichen Viewport erstellt/optimiert (,,Mobile First") und dann bei Bedarf fur grossere Gerate mit Inhalten und Funktionalitaten erweitert. drei Wireframes - Die Content Choreographie Aufgrund der Inhaltsanalyse konnen Wireframes erstellt werden, um so die Inhaltsstruktur der einzelnen Seiten herauszuarbeiten und die Grundlage fur die Umsetzung zu haben. Bei Wireframes geht es nicht, um gestalterische Aspekte wie Farben oder Typografie, sondern alleine darum welche Position die Inhalte auf der Seite einnehmen sollen. Dabei wird fur jeden wichtigen Breakpoint ein Wireframe erstellt, um die wichtigen Anderungen der Inhaltsdarstellung zu visualisieren. Die Content Choreographie zeigt an, wie sich die Inhalte uber einzelne Breakpoints verandern. 4. Prototyp Aufgrund des Wireframes kann der erste interaktive Klickdummy mit HTML und CSS erstellt werden. Der Prototyp verdeutlicht die Struktur, die Flexibilitat und die gesamte Funktionalitat der Website. Der erste Prototyp ist noch nicht fein ausgearbeitet. Hier geht es erstmal darum, die Semantik, die Struktur und die Funktionalitaten der Website testen zu konnen, was ein grosser Vorteil gegenuber einem statischen Entwurf in einem Grafikprogramm ist. Da hier noch keine Gestaltung vorhanden ist, konnen eventuelle Korrekturen schnell vorgenommen werden und haben noch keine Auswirkungen auf das Design, was doppelte Korrekturen vermeidet. Wenn der Prototyp in allen Testszenarien zufriedenstellend lauft, kann das Design entwickelt werden. Am lebenden Objekt nenne ich das gerne. Im Gegensatz zu statischen Entwurfen lauft der Prototyp im Browser und passt sich bereits an verschiedene Displaygrossen an. So kann er in unterschiedlichen Situatonen mit unterschiedlichen Eingabe-/Bedienungsgeraten und auf unterschiedlichen Displays und mit verschiedenen Ausrichtungen eines Gerats (z. B. Hoch- oder Querformat) in verschiedenen Browsern getestet werden. Aus statischer Theorie wird lebendige Praxis 5. Design - Look & Feel erarbeiten Anders als beim alten Workflow wird nicht gleich ein vollstandiges, fein ausgearbeitetes Design entworfen, sondern es werden nach und nach einzelne Elemente ausgewahlt und gestaltet. Damit der Designer nicht vollig im,,luftleeren" Raum gestalten muss, kann er sich Hilfsmittel wie Moodboards oder Style Tiles einsetzen. Beide dienen dazu, die optische Richtung und die gewunschte Wirkung der Website zu visualisieren, nicht aber das fertige Design. Die Stilrichtung kann auch schon iterativ mit dem Kunden parallel besprochen und entwickelt werden. Und wenn man sich zusammen fur einen Stil entscheiden hat, kann dieser nach und nach auf den voll funktionsfahigen Prototypen angewendet werden. Style Tile: Style Tiles sind im Grunde eine Art konkreteres Moodboard. Hier werden alle relevanten grafischen Elemente der Website zusammengefasst. Dazu konnen Typo, Bilder, Icons, Farben, Buttons usw. gehoren. Hiermit lassen sich auch recht schnell verschiedene Stilrichtungen entwerfen, die sich dann gut vergleichen lassen. Entscheidend ist, dass es eben nur eine Designrichtung ist und kein fertiges Layout. sechs Testen und Besprechen Der Prototyp wird nun von den Entwicklern und Designern (manchmal ist ist auch beides in einer Person vereint) ausgearbeitet. Es wird in verschiedenen (vorher festgelegten) Browsern und Geraten ausfuhrlich getestet und optimiert. Design und Code werden parallel entwickelt und der Prototyp durchlauft nun normalerweise diverse Korrekturschleifen. Dieser Prozess wiederholt sich so lange, bis die Website fertig ist. Mit dem Auftraggeber werden in einem iterativen Prozess in einzelnen Zwischenschritten nach und nach alle Komponenten erarbeitet und besprochen. Es findet also eine Art regelmassiges,,Dreiergesprach" statt. Die Kommunikation wird hier zu einem ganz entscheidenen Erfolgsfaktor. Durch die schon geleistete Vorarbeit ist der Aufwand fur das Testing nun deutlich kleiner und es mussen nun weniger,,grosse" Zwischenergebnisse freigegeben werden, die lange besprochen werden mussen, sondern eher viele kleinere Schritte. Hier ist aber eben auch eine gewisse Flexibilitat moglichst bei allen Projektbeteilgten notwendig, damit spontane Anderungen und Erkenntnisse einfliessen und umgesetzt werden konnen. Keine Seiten designen, sondern Komponenten Es geht darum keine vollstandigen Seiten mehr zu gestalten, sondern einzelnen Modulen. Eine moderne Website besteht aus vielen verschiedenen Komponenten, die zusammen das Design bilden: Navigationen, Inhaltsfelder, Slider, Buttons, Formulare usw. Alle diese Kompontenten werden gestaltet und in unterschiedlichen Zusammenstellungen auf den einzelnen Seiten eingesetzt. Dieses Vorgehen nennt sich Atomic Design, da man die einzelnen Inhaltselemente aus einzelnen,,Atome" zusammengesetzt sind. 4. Abnahme und Launch Nach der endgultigen Abnahme durch den Auftraggeber erfolgt eine eventuelle Einpflege des Frontend-Gerustes in ein Content Management System und die Onlinestellung. Konzeption, Design und Technik arbeiten,,Hand in Hand" und entwickeln Prototypen, die regelmassig getestet werden. Wie bei einer Waschmaschine werden die einzelnen Ablaufe,,durchgeschleudert" bis sie fertig sind. Der grosse Unterschied ist, dass bei diesem responsiven Ablauf die technische Umsetzung wesentlich fruher erfolgt. Die konkrete Anwendung, die Interaktion des Anwenders, kann so viel fruher uberpruft und angepasst werden. Responsive Strategien Das Vorgehen eine responsiven Website zu erstellen, ist aber auch mit oben aufgezeigten Workflow nicht zwangslaufig einheitlich. Es gibt sehr unterschiedliche Vorgehensweisen und auch sehr unterschiedliche Vorstellungen, was denn responsiv uberhaupt genau ist. Nicht jeder meint immer das Gleiche damit. Und vor allem das Ziel, eine responsive Webseite umzusetzen, kann sehr unterschiedliche Ergebnisse hervorbringen. Adaptive Layout vs. Responsive Layout Eine Webseite kann man ganz allgemein unterscheiden zwischen responsiv (reaktionsfahig) und adaptiv (anpassungsfahig). Responsive Webseiten setzen also auf ein flexibles Raster. Im Zusammenhang mit Media Queries wird erreicht, dass der zur Verfugung stehende Platz optimal ausgenutzt wird, da sich das Layout uber die volle Breite erstreckt. Einzige Ausnahme ist eine fixe Grenze bei sehr grossen Auflosungen (max-width), so dass das Layout nicht zu breit wird. Ein Umbruch des Layouts, also ein Breakpoint mit Media Queries, wird dann gesetzt, wenn das Design und die Inhalte danach verlangen. So wird beispielsweise die Hauptnavigation dann hinter einem Hamburger-Icon,,versteckt", wenn der Platz nicht mehr ausreicht. Ein responsives Webdesign ist daher eher,,im Fluss", flexibel. Ein adaptives Layout dagegen wird von Anfang an fur bestimmte Bildschirmgrossen optimiert. Im Grunde sind es starre Gestaltungsraster wie fruher mit dem 960-Pixel-Raster, nur jetzt eben mehrere fur unterschiedliche Auflosungen. Spezifische Ausgabegerate stehen im Mittelpunkt und nicht der Inhalt bzw. die Inhaltsdarstellung. Meistens sind es haufig genutzte und beliebte Gerate wie das iPhone und iPad, deren Auflosungen fur Breakpoints herhalten mussen. Fur diese Gerate ist die Darstellung dann optimiert, aber nicht fur Gerate, die eine etwas grossere oder kleinere Auflosung haben. Wahrend reaktionsfahige (responsive) Layouts also stufenlos auf jede Grossenanderung des Browsers reagieren konnen, sind anpassungsfahige (adaptive) Layouts nicht so flexibel und reagieren nur an bestimmten Punkten (Breakpoints). Der Einsatz adaptiver Layouts lohnt sich vor allem dann, wenn man entscheidend unterschiedliche Inhalte, Funktionen, Darstellungen bei unterschiedlichen Endgeraten haben mochte. Die sog. User Experience kann deutlich erhoht werden, da das Gerat und damit auch ein bestimmtes Nutzungsszenario im Vordergrund steht. Das folgende Beispiel verdeutlich dies gut: Adaptive Webdesign am Beispiel der Website : Einmal das Desktop-Angebot und die mobile Ansicht. Graceful Degradation oder: Desktop First Bei der Erstellung einer responsiven Website gibt es im Grunde zwei Wege: von gross nach klein oder umgekehrt. Der typische Webdesigner entwickelt an einem modernen Arbeitsplatz mit grossem Bildschirm und modernen Browser. Von diesen Voraussetzungen ausgehend, wird die neue Seite erstellt, optimiert und dann nach und nach fur kleinere Auflosungen und auch altere Browser angepasst. Dieses Vorgehen nennt sich Graceful Degradation (deutsch etwa,,wurdevolle Herabstufung"). Dieses Vorgehen mutet zuerst einmal logisch an. Die neuesten Technologien und Effekte werden eingesetzt, und das Design sieht bei viel Platz (also auf grossen Bildschirmen) wunderbar aus. Je kleiner die Auflosung und je alter der Browser, desto eher kommt es zu Kompatibilitatsproblemen. Moderne Techniken werden nicht mehr oder nicht vollstandig unterstutzt (zum Beispiel bestimmte CSS3-Anweisungen), und auf kleineren Auflosungen funktioniert das Layout nicht mehr. Entweder werden dann Inhalte ausgeblendet, per JavaScript funktionstuchtig gemacht, oder sie funktionieren ganz einfach gar nicht mehr. Inhalte und Funktionalitaten werden so allmahlich,,abgespeckt". Fur die Zuganglichkeit einer Webseite ist dieses Vorgehen denkbar schlecht. Altere Browser, kleinere Bildschirme und langsame Gerate/Verbindungen werden bei diesem Vorgehen abgestraft. Dieser Ablauf ergibt sich auch, wenn eine bestehende, nicht-responsive Website nachtraglich mobiltauglich gemacht werden soll. Man nennt diesen Prozess dann auch,,Responsive Retrofitting", da das Desktop first-Konzept schon zwangslaufig vorher feststeht. Eine schematische Darstellung von Graceful Degradation. Zuerst wird fur grosse Bildschirme und moderne Browser entwickelt. Vorteile des Graceful Degradation : Entspricht eher dem gewohnten Arbeitsablauf und Umfeld des Webdesigners. Moderne Systeme, Techniken und Features konnen eingesetzt und ausgereizt werden. Progressive Enhancement oder: Mobile First Den umgekehrten Weg beschreitet die progressive Verbesserung (englisch Progressive Enhancement). Die Idee ist, eine Website auch fur Endgerate nutzbar zu machen, die nur uber eingeschrankte Funktionalitaten verfugen (zum Beispiel keine vollstandige Unterstutzung von CSS3 oder JavaScript). Eine Webseite soll mit jedem Browser und jedem Gerat bedienbar und zuganglich sein. Dabei wird meistens von einer moglichst kleinen Auflosung und einem,,schwachen" System ausgegangen und die Seite hierfur optimiert. Das Prinzip,,Mobile First" geht dann noch einen Schritt weiter und so stehen hier Mobilgerate mit wenig Raum, langsamerer Datenubertragung und potenziell starker abgelenkten Nutzern im Vordergrund. Schrittweise wird die Website dann fur grossere Auflosungen und,,starkere" Systeme erweitert. Hier konnen dann auch komplexere Technologien und Layouteigenschaften zum Einsatz kommen. Eine schematische Darstellung von Progressive Enhancement. Von Mobile first wird die Seite nach und nach fur grossere und auch modernere Gerate erweitert. Dies klingt passenderweise sehr nach den Ansatzen,,Mobile first" und,,Content first" und damit so, als ob Progressive Enhancement die bessere Variante ist und damit auch die modernere. Inhalt, Darstellung und Verhalten - In dieser Reihenfolge sollte gearbeitet auf kleineren Displays wenig Raum vorhanden ist, fuhrt dieses Vorgehen zwangslaufig zu relevanteren Inhalten, guter Performance und funktionalem Design. Inhalt, Darstellung und Verhalten sollten in dieser Reihenfolge berucksichtigt werden. Das auf kleineren Displays wenig Raum vorhanden ist, fuhrt dieses Vorgehen zwangslaufig zu relevanteren Inhalten, guter Performance und funktionalem Design. Nachteile des Progressive Enhancement : Fazit des Workflows und der Strategie im Responsive Webdesign Der Wandel des Webs bringt auch einen Wandel des Prozesses mit sich. Die Herausforderungen, die der Wechsel zu einem responsiven Workflow mit sich bringt, sind dabei nicht zu unterschatzen: Die Anforderungen an die Projektbeteiligten steigen. Projektmanager, Konzepter, Designer und Entwickler mussen Hand in Hand arbeiten, sich einbringen und erganzen. Websiteerstellung wird immer mehr zur Teamarbeit (was es eigentlich schon immer war). Sind all die Tatigkeiten in einer Person vereint, dann besteht sicherlich kein Abstimmungsbedarf (ausser nach wie vor mit dem Kunden), aber die Anforderungen sind fur einen Einzelnen sicherlich grosser. Auch der Kunde muss flexibler werden, mehr mitarbeiten, sich uber Inhalte (und damit uber die Ziele, Zielgruppen, Inhalte seiner Webseite) fruhzeitig Gedanken machen, was ja grundsatzlich nicht verkehrt ist. Design und Code sollten parallel bearbeitet und entwickelt werden. Das Ergebnis ist eine grossere Einheit. Und die alte Designformel,,form follows function" findet nun Anwendung, da Design, Funktionen und die Struktur den Anforderungen des Inhalts folgen. Diese Veranderungen sind vermutlich auch ein Grund, warum sich dieser neue Workflow auch nach Jahren immer noch nicht flachendeckend durchgesetzt hat (wenn er es denn uberhaupt jemals tun wird). Nicht nur die Website, auch der Workflow, Arbeitnehmer und Auftraggeber mussen flexibler werden. Die Ergebnisse eines responsiven Workflows sprechen im Idealfall aber fur sich - in Form einer Website, die ihre Anwender glucklicher macht, weil sie in allen erdenklichen Situationen zuganglich und gut bedienbar ist. Es gibt eigentlich keine sinnvolle Alternative zu dem responsiven Workflow. Designer, Entwickler, Agenturen und Kunden mussten und mussen dabei auch immer wieder umdenken. Die Anforderungen und Arbeitsablaufe haben sich verandert. Nicht nur an die Auftragnehmer, auch an die Auftraggeber. Kunden sind jetzt eher Partner, mit denen man konstruktiv und regelmassig zusammenarbeiten muss und darf. designletter abonnieren & als Dankeschon die WEBDESIGN-CHECKLISTE erhalten mit uber neunzig Checkpunkten fur Dein nachstes Projekt: Schliesse dich uber zwei Komma fünf sechs Newsletter-Abonnenten an Keine Sorge, Spam gibt es hier nicht, stattdessen regelmassig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu: (Beispiele, Datenschutz, Analyse und Widerruf) Leave this field empty if you're human: Autor:Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen - in Schulungen und mit Artikeln in diesem Blog. Ahnliche Artikel: 18 Kommentaremal wieder ein grossartiger Artikel, fur Leihen und deren besseres Verstandnis (gute Aufklarungsarbeit deinerseits! ). Aber auch fur unseres Gleichen, von denen - ich unterstelle - viele bereits responsive oder adaptable Design basierte Webprojekte nach dem,,Rapid-Prototyping" Verfahren umsetzen. Diese Art der Projektumsetzung spart Auftraggebern nicht nur Geld, sie bindet sie sehr fruh in den Prozess,, NEUE WEBSEITE MACHEN " ein. Fordert dadurch meiner Ansicht nach auch deren Verstand und Weitblick fur die Sache. Auf unserer Seite hingegen spart es Zeit (manchmal gewaltig), steigert im Einzelfall sogar den,,Profit" (ein wenig) und sorgt unterm Strich dafur, dass,,Deadlines" nicht nur realistisch und haltbar sind sondern am Ende dann tatsachlich auch gehalten werden. Ich denke, du erlebst das in deiner Agenturpraxis (hahnsinn) ahnlich. Ich hatte vor kurzem einen Prasentationstermin bei einem Kunden aus dem Baugewerbe. Was wie aussehen soll (Navi, Contentstruktur & Design, ausgeblendete Elemente ab einem bestimmten Breakpoint, usw.) war vorher schon besprochen. Der Dienst (Basis: WP- mit einem Premiumtheme) wurde zum ersten Mal einem grosserem Mitarbeiter Team prasentiert. Alle waren begeistert, bis auf eine Dame - die einfach ein Problem mit einer Vertikal-Navigation hatte. Und dies mit Worten zum Ausdruck brachte die ein wenig unfair waren. Aber egal. Womit niemand der Anwesenden gerecht hat, dass ich so reagiere : Ist ein Argument, sehen wir es uns doch einfach,,schnell" mit einer Horizontal-Navigation an. Ich habe mich eingeloggt, das Ganze uber die entsprechenden Theme-Options umgestellt und gezeigt. Im Endeffekt hat die Kriterien verstanden, warum wir die Vertikale gewahlt haben und hat dies dann auch Kund getan - wertschatzend. Mit dem Spruch (den du Martin sicherlich schon sehr oft gehort hast),,naja, sie sind ja die Profis, ich bin nur Leihe". Meine Antwort darauf war: dieser Internetdienst ist nicht fur Profis gemacht, sondern fur Leihen. Genau deshalb sind uns solche Feedbacks sehr wichtig. Bei jemanden wie dir gehe ich davon aus, dass du dich mit,,Websitebutler",,,thegrid" & Co. schon beschaftigt hast, wahrscheinlich auch mit dem,,Watson" Projekt (IBM). Weiter vermute ich, dass du,,Rukzuk" (von Seitenbau) ebenfalls kennst. Jenes (,,ultimative") design-CMS, bei dem Flyeralarm (damals) als Aktionar einstieg und ordentlich Werbung dafur machte - fur eine gewisse Zeit. Jetzt wurde daraus die Sparte,,FLYERALARM Creatives" -> die meisten davon arbeiten glaube ich eher mit WordPress und Typo3, evtl. auch mit Contao aber nicht mit rukzuk. Ich meine jedenfalls: Noch mussen wir uns keine grossen Sorgen machen, dass wir,,ausgedient" haben. Dass wir als Dienstleister wachsam sein mussen, ist klar.

Artikel Video:    

Text mit Freunden teilen:    www.facebook.com

Wir entwickeln eine intelligente Sprach-Software. Universal einsetzbar in SEO, Marketing und Robotic. Mit Email anmelden!    



Der Artikel Schreiber "Text Generator" schreibt Artikel und generiert dir kostenfreien Unique Text für dein Content Marketing, dein SEO oder Suchmaschinen Marketing - Kreatives Schreiben als Software Algorithmus!



Du benutzt die erstellten Texte auf deine eigene Verantwortung! Wir übernehmen keine Haftung für die erstellten Textartikel!

© 2018 - 2019 -