Responsiv - schöne Idee, aber in der Praxis?

[alwin]

Hey Leute,

ich bin seit ein paar Wochen dabei, meine lieb gewonnenen statischen PX über Bord zu werfen und mich mit % und EM anzufreunden. Kurz: ich will responsiv werden. Die Idee dahinter find ich gut.

Was ich nicht gut finde, ist, dass meine Seite* nach alter Methode gefühlt schon 100 mal fertig gewesen wäre. Mit den %-und EM-Angaben dauert das alles unendlich lange. Ich hab mal was gelesen von 40%-50% mehr Aufwand als bei einer Seite mit festem PX-Layout. Selbst wenn ich meine Unwissenheit, Lernaufwand, Recherchen im Web abziehe, hab ich jedoch das Gefühl, mit der responsiven Methode >500% Mehr-Aufwand zu haben. Und dabei hab ich mich schon vom pixelgenauen Layout verabschiedet. Das Layout muß auch nicht in jedem Browser gleich aussehen. Und trotzdem ... das dauert alles einfach zu lange. Bin kurz davor, Mr. Responsiv den Laufpass zu geben.

Ist das normal? Geht das anderen auch so?

Alwin

PS: die Webseite, die ich gerade baue, besteht nur aus EINER Seite! Hat ein Top-Menü, ein Banner und 4 Sektionen. Allerdings werfe ich mit ein paar schachbrett-artig angeordneten Bild-Boxen um mich. Die Boxen haben Hover-Effekte mit mittelpunkt-zentriertem Text. Da kracht es ständig ... ich hab mal eine grobe Skizze angehängt. Ich dachte, so was ist simpel und ein guter Anfang ...

 

[cebito]

Ich vermute ja stark, dass dein Kopf sagt Responsive ist schwierig und du deshalb gehemmt bist und umständlich nach Lösungen suchst, die du viel einfacher und effizienter umsetzen könntest, wenn du den Kopf halt frei von diesem Hemmnis hättest. Auch glaube ich, dass Grundkenntnisse bei dir zwar vorhanden sind, du zum Erreichen des Ziels allerdings eher die try&error - Methode nutzt statt klar strukturiert an die Sache zu gehen. Wie gesagt, nur Vermutungen meinerseits.

Dein o.g. Layout wird dir hier natürlich niemand umsetzen, aber wenn du deinen aktuellen Stand online stellst und hier 'nen Link postest, dann bekommst auch Feedback, Hilfe und Tipps.

 

[Gelöschtes Mitglied 133165]

Responsive ist einfach die konsequente Umsetzung der Trennung von Inhalt und Form, wie es eigentlich immer gedacht war. Wenn Du DIch dabei auch mit dem Thema Semantik auseinandersetzt, wird es DIr vermutlich einfacher fallen Dich mit den "neuen" Strukturen zurechtzufinden. Im Grunde ist es ja eigentlich weniger Arbeit als früher: Der Inhalt bleibt immer gleich, er wird nur je nach Anforderung in einer, je nach Gerät angepassten, Weise per CSS-Datei strukturiert. Die Sache mit den % und .em erklärt sich eben auch daraus, dass es eben nicht nur eine Displaygröße in einer standardisierten Auflösung gibt. Während am PC/MAC der User recht einfach die Ansicht seinen Bedürfnissen anpassen kann, kenne ich niemanden, der am Smartphone oder Tablet mal eben schnell Aufflösung oder Schriftgröße ändert. Na klar kann er das Bild mit 2 Fingern größer oder kleiner machen, aber das ist erstens nicht wirkliche Usabilty und zerstört im schlimmsten Fall die Aussage oder den Zweck dessen, was ich aussagen möchte. Daher ist natürlich immer am schönsten, wenn der potenzielle Kunde ein Produkt zu sehen bekommt, das er ohne "Fummelei" auf jeder Platform, entsprechend deren Möglichkeiten aber auch EInschränkungen, sofort intuitiv nutzen kann. Na klar funktioniert auch das gute alte Tabellen-Layout auch heute noch, aber spätestens wenn ich mit unsichtbaren GIF´s und ähnlichen Tricks arbeiten möchte, führt das zu einem nicht verhersehbaren Ergebnis auf den verschiedenen Plattformen. Ich denke da nostalgisch an den Browserkrieg Mitte der 90er-Jahre zurück, wo es immer wieder spannend war zu sehen ob und vor allem wie sich die Websites auf verschiedenen Systemen/Browsern darstellten...

 

[alwin]

Hey, danke für Eure spontanen Rückmeldungen

Mein Kopf sagt eigentlich: responsive ist cool. Aber ich hatte nicht so viel Zeit dafür eingeplant. Insofern gibt es von dieser Seite her Druck. Wäre schöner, da entspannter ran gehen zu können. Die "Grundkenntnisse" waren mal ganz gut - bis vor etwa 4-5 Jahren Seit dem ist verflixt viel passiert - jetzt heißt es "nachsitzen"

Ja, try & error kommt gut hin. Zumindest in einigen speziellen Bereichen. Man liest n Haufen Zeugs und friemelt dann das für sich gefühlt beste daraus. Meist klappts. Aber manchmal klemmts dann doch.

Oh, mein Layout möchte ich gern selbst umsetzen. Hatte nicht erwartet, dass das jemand für mich macht Wollte nur hören, ob so ein Layout für einen responsiven Ansatz vielleicht ungünstig ist. Ok, dann stelle ich mal die eine oder andere Frage. Mache ich aber extra in jeweils separaten Threads

Für Trennung von Inhalt und Form hätte ich jetzt eher auf HTML+CSS getippt. Das Neue an responsiv ist doch "nur", dass es sich - wie gesagt - variabel dem Ausgabemedium anpasst. Und das man das bewusst anwendet - ist ja schliesslich keine wirklich neue Technik

Das heißt, für euch ist respsonsiv kein wirklicher Mehraufwand?

Alwin

 

[Pixelverwender]

Ich habe die Erfahrung gemacht, dass Responsive bei Websites mit einer oder wenigen Seiten ganz gut funktioniert. Bei umfangreicheren Websites arbeiten wir jedoch mit mindestens einer weiteren für den Bereich Smartphone & Co. angelegten Version, wobei das Switchen per htaccess erfolgt.
Und ja, Responsive kann durchaus deutlicher Mehraufwand sein.
Viele Kunden bestehen darauf, ein einigermaßen gleichbleibendes Layout zu haben und möchten lieber eine spezielle Version für Mobilgeräte (Smartphones).

 

[alwin]

[...] Bei umfangreicheren Websites arbeiten wir jedoch mit mindestens einer weiteren für den Bereich Smartphone & Co. angelegten Version, wobei das Switchen per htaccess erfolgt.[...]

Und bei welcher Auflösung trennt ihr da? Oder geht das über eine Gerätekennung? (Gibt es sowas?) Ähmm ... htaccess ... was macht ihr da "genau"? Ein mod-rewrite auf eine andere URL? Und was ist der Trigger in der htaccess? Die MediaQuerries sind ja CSS/JavaScript...

Alwin

 

[Myhar]

Dein Layout ist recht unkompliziert, das sollte auch schnell responsive umgesetzt sein.
Für Anfänger empfehle ich diese zwei Bücher als Grundlektüre:
Responsive Web Design von Ethan Marcotte und Mobile first von Luke Wroblewski.

Auch hilft es, wenn du dich mit den in CSS3 neuen Eigenschaften wie border-box und flexbox beschäftigst. Wo sind denn deine größten Probleme bei der Umsetzung?

 

[Rata]

...aber spätestens wenn ich mit unsichtbaren GIF´s und ähnlichen Tricks arbeiten möchte, führt das zu einem nicht verhersehbaren Ergebnis auf den verschiedenen Plattformen. Ich denke da nostalgisch an den Browserkrieg Mitte der 90er-Jahre zurück, wo es immer wieder spannend war zu sehen ob und vor allem wie sich die Websites auf verschiedenen Systemen/Browsern darstellten...

Soooo lange ist das doch gar nicht her, Mitte des ersten Jahrzehntes dieses Jahrhunderts war das...

Oder irre ich mich?
Bemerkung eher, um über den Fortgang der Diskussion zuverlässig unterrichtet zu werden, da klemmt's nämlich noch in der Foren-Software.



Lieber Gruß
Rata

 

[Pixelverwender]

Von mir auch noch ein Buchtipp (vom Autor von „Little Boxes“):

Die .htaccess kann prinzipiell so aussehen:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|iphone|ipod|opera mobile|palmos|webos" [NC]
RewriteRule ^$ http://www.meine-domain.de/mobil/ [L,R=302]

Wobei im Verzeichnis „/mobil“ dann die Version der Website für Kleinst-PCs mit Telefonmöglichkeit steckt.

 

[Gelöschtes Mitglied 133165]

Natürlich ist responsives Webdesign keine "ich schalt mal einfach den Schalter um"-Methode. Aber wie schon gesagt, wenn ich den Inhalt habe und diesen semantisch tagge, ist die Umsetzung wesentlich einfacher (und flexibler) als mit Browserweichen und jeweils passenden Versionen desselben Inhalts zu hantieren. Letzten Endes hat aber eben immer der Kunde recht und auch ich mache manchen nicht systemkonformen "Hack". Das ändert aber nichts daran, dass ich mittlerweile ( ich gebs ja zu, vor 3 Jahren habe ich es verflucht) ein Fan von HTML5 und CS3 bin, obwohl es noch nicht standardisiert ist, Aber endlich gibt es mal mehrer Wege zum Ziel und z.B. für einfache ANimationen brauche ich nicht mehr zu "Flash" zu greifen und zu zittern ob es denn auch auf dem PC/MAC/Linux-Rechner des kunden auch so aussieht wie ich mir das ausgedacht habe,,
Übrigens brauchte ich auch etwas Hilfe und "Überzeugungsarbeit" Stellvertretend empfehle ich:


und natürlich:

Die beiden ersten gibt es teilweise schon unter 10 Euro, also einfach mal stöbern

 

[alwin]

Oh, vielen Dank für die vielen tollen Buchtipps! Da werd ich mal im Buchladen meines Vertrauens stöbern

Auch hilft es, wenn du dich mit den in CSS3 neuen Eigenschaften wie border-box und flexbox beschäftigst. Wo sind denn deine größten Probleme bei der Umsetzung?

Ich dachte border-box und flexbox sind noch mit Vorsicht zu genießen - wegen Browser(in)kompatibilitäten? Kann man die doch schon ruhigen Gewissens verwenden?

Genau die ganzen Boxen sind z.B. ein zentrales Problem. In der Desktop Variante (siehe Grafik oben) haben einige Boxen eine Hover-Fläche. a) das Hover und das Zentriert macht an sich schon Ärger. Das ist eine <div>-Schlacht vom Feinsten. Text kann man nur horizontal zentrieren. Fürs Vertikale (vertical-align:middle) braucht man ein separates <div>. Die Hover-Ebene ist das nächste div - absolut positioniert. Der Text darin soll auch zentriert sein - Zack und die nächsten 2 divs. Dann sollen die Boxen nebeneinander aufgereiht sein (display:inline-block). Da muß eine Hülle für die eigentliche Box her, da die Box selbst vom display her eine Tabelle sein muß. Ich habs erstmal hinbekommen. Ist aber ein riesen Gewusel.
b) in der Mobile Variante müssen ein paar der Boxen weg, sonst ist es zu viel, was man nach unten scrollen muß. Damit muss dann alles reduziert und umgebaut werden. Statt Hover (Smatphone => nix Hover) soll der Text neben den Grafiken stehen. => quasi Tabellen-Layout (aber ohne <table> ) Damit gibt es mind. 2 HTML Struktur: eine kleine für die Smarties und eine große für den Rest. Die große HTML-Struktur braucht kein Mobile. Also separat laden, wenn der Browser groß genug ist. Man nehme Ajax und lade sich das ganze dynamisch in ein div-Tag. Klappt soweit auch ganz prima. Bis auf die Tatsache, dass all die schönen Hovers keine Höhe mehr kennen und dann auf ein Minimum zusammenschrumpfen. Wenn ich das Browserfenster kurz zusammen schiebe und wieder vergrößere, dann gehts. Aber auch nicht immer. Manchmal sind die Hover-Boxen 4, 10 oder 20px kleiner als die Hauptbox. Ja nach Lust und Laune. .. und damit bekomm ich dann langsam schlechte Laune

[...]
Die .htaccess kann prinzipiell so aussehen:

[...]
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|iphone|ipod|opera mobile|palmos|webos" [NC]
[...]

[...]

Ah, stimmt - der User_Agent. Ganz aus den Augen verloren. Trifft der denn zuverlässig? Ich meine mich dunkel zu erinnern, dass der nicht immer korrekt gesetzt sein muß.

[...] wenn ich den Inhalt habe und diesen semantisch tagge, [...]

Du meinst die neuen HTML5-Tag Article, Section & Co? (Heißen die so?) Die hab ich bisher immer nur im Vorbeiflug aus den Augenwinkeln gesehen. Auch noch ein Punkt auf der to-update-list Aber helfen denn die inhaltlichen Strukturen bei Layout-Strukturen wie den Boxen? Ist es denn nicht "fast" egal, ob ein Text/Bild in so einer inhaltlichen benannten Struktur steckt? Wenn ich das ganze in einer Box darstellen will, muß ich doch auch diese Tags in weitere div-Schachteln packen. Sind die inhaltlichen Tags nicht vorallem für google gedacht?

Alwin

 

[Gelöschtes Mitglied 133165]

Du musst Dir im Design-Prozess überlegen was passieren soll. Ein Screen-Design (auch wenn es nur das ALyout ist) sieht auf einem Smartphone immer aus wie ein Mäusekino. Es ist in diesem Fall immer besser sich ein neues Konzept durch den Kopf gehen zu lassen als etwas bereits fertiges zu "verarzten": Ich habe das gerade ind er Übergangsphase bis zum erbrechen durch. Fakt ist alle Browser in den Versionen der letzten 1,5 Jahre verstehen HTML 5 ztumindest soweit, als dass Dein Design nicht zum Teufel geht. Vielleicht fehlt mal ein Schatten oder eine runde Ecke, aber am grundsätzlichen Design ändert sich nichts (Es sei den der User verzichtet bewusst auf CSS, aber das kannst Du eh nicht beeinflussen. Jeder Browser hat ein CSS-Sheet eingebaut, das auch bei der besch..ten Rechnerkonfiguration noch ansehnliche Ergebnisse erzeugt. Problemfälle sind im Allgemeinen nur Behörden, da sich der Admin dort oft krampfhaft an den Grundsatz: "Never touch a running system" hält

 

[alwin]

Fakt ist alle Browser in den Versionen der letzten 1,5 Jahre verstehen HTML 5 ztumindest soweit, als dass Dein Design nicht zum Teufel geht.

Ok, das klingt schon mal sehr beruhigend
Gilt das auch für CSS3?

Ein Screen-Design (auch wenn es nur das ALyout ist) sieht auf einem Smartphone immer aus wie ein Mäusekino. Es ist in diesem Fall immer besser sich ein neues Konzept durch den Kopf gehen zu lassen als etwas bereits fertiges zu "verarzten"

Du meinst erst gar kein ScreenDesign anfangen? Aber wie dann loslegen? Irgendwomit muß man ja starten ...

 

[Myhar]

Informiere dich, auf welchen Seiten du Informationen findest, welche CSS/HTML/JS Funktionen, Attribute, Eigenschaften, wasauchimmer du in welchen Browsern verwenden kannst. Verlasse dich hier nicht auf die Aussage einzelner Forennutzer. Denke auch daran, dass du, je nach Besucher, nicht alle Browser unterstützen musst. Wird deine Seite 100000 Besucher am Tag haben, dann musst du mehr Browser unterstützen als wenn du mit 10 Besuchern anfängst.
Für CSS kann ich zB nur caniuse.com empfehlen.

 

[afr0kalypse]

Kleiner Ausflug in die verschiedenen Ansätze:
Fixed: Hast du ja schon. Einfach ein auf px basierendes festes Layout.
Fluid: Dein Layout in prozentualen Angaben. So skalieren Spalten schonmal bei unterschiedlicher Browsergröße.
Adaptive: Verschiedene Layouts, die je nach breakpoints durch mediaqueries einfach umbrechen. Diese können auch wunderbar mit px umgesetzt werden.
Responsive: Eine Mischung aus Adaptive und Fluid, wird meistens mit Fluid Grid Systemen umgesetzt. Übrigens ist so ein Grid genau das, was du für deine Seite brauchst. Dann lässt die sich recht fix umsetzen.

 

[alwin]

Für CSS kann ich zB nur caniuse.com empfehlen.

Wow, eine prima Seite! Danke für den Tipp

Übrigens ist so ein Grid genau das, was du für deine Seite brauchst. Dann lässt die sich recht fix umsetzen.

Ich bin tatsächlich schon paar mal über diese Grids gestolpert. Konnte mich allerdings noch nicht so recht mit anfreunden. Da scheint es auch Angebote wie Sand am Meer zu geben. Worauf sollte man denn bei der Auswahl achten? ... falls man das so pauschal sagen kann?!

Alwin

 

[sendi]

ich würde media-queries empfehlen, ich finde dort es dann übersichtlicher. Einfach für 3 Größen anlegen und fertig

 

[afr0kalypse]

Ich bin tatsächlich schon paar mal über diese Grids gestolpert. Konnte mich allerdings noch nicht so recht mit anfreunden. Da scheint es auch Angebote wie Sand am Meer zu geben. Worauf sollte man denn bei der Auswahl achten? ... falls man das so pauschal sagen kann?!

Ich kann dir das hier empfehlen mal durchzulesen. Vielleicht bastelst du dir dann einfach ein eigenes Grid so habe ich es zumindest gemacht.
http://webdesign.tutsplus.com/artic...eezed-responsive-grid-system--webdesign-14888

 

[Steve007]

Bevor Du mit einer Responsive-Website anfängst, solltest Du Dir genau darüber im Klaren sein, wer nachher Deine User sein werden. Ist die Website für die breite Masse oder für Technik-Freaks, die immer die neueste Hardware (Smartphone, Tablet usw.) haben. Eine genaue Planung und Skizzen zum Seitenaufbau helfen hier immens Zeit zu sparen. Es gibt gute Tutorial-Video-Trainings zu diesem Thema von "Video2Brain" oder "Galileo-Computing".

 

[alwin]

Ich kann dir das hier empfehlen mal durchzulesen.

Hey, danke! Das ist echt spannend. Hat auch nochmal für etwas Wind im Nebel gesorgt. Werd das mal ausprobieren.

Es gibt gute Tutorial-Video-Trainings zu diesem Thema von "Video2Brain" oder "Galileo-Computing"

All right. Werd da auch noch mal in der Richtung stöbern.

An der Stelle mal so zwischendurch ein herzliches Danke für die vielfältigen Hinweise, Anregungen und Tipps
Alwin