Responsive Webdesign

    EDIT: 30 11 2014 - Seite vertex.selfhost.bz nicht mehr aktiv.
    reupload -> http://i-stats.net/_Tests/ResponsiveTable/index.html
    --------------------------------


    EDIT: vers 1.1 ResponsiveTables.js



    Phip S. hat mich letztens drauf gebracht und ich find es sehr nice!
    Hier schon mal was es bedeutet: http://de.wikipedia.org/wiki/Responsive_Webdesign


    Ich machs mal kurz und sage:
    Viele übertreiben es. Warum für jede Größe (Smartphone, Tablet ...) eine css ?
    Einfach festlegen ab wann die Seite nicht mehr "normal" dargestellt werden würde und ab diesem Limit eine alternative css nutzen.


    Was mich nervt ist, dass man im Netz keine wirklich guten "Ersten Schritte" findet. Es kommt mir vor, als ob alle nur zeigen wollen, dass sie es können :D
    Deshalb hab ich mal das mMn wichtigste in ein zip gepackt. Sollte einfach zu verstehen sein (well, ich habs verstanden :D so ...).
    zip: html-seminar.de/woltlab/attachment/443/ (getestet in Opera, FF, Chrome, IE)


    Was richtig genial zum Testen ist: http://www.active-value.de/responsive-design-viewer/
    oder auch nen simu: http://www.opera.com/de/developer/opera-mini-simulator


    Hab mal mein Ergebnis hier hoch geladen: http://vertex.selfhost.bz/responsive


    Da aber immer nocht nicht alles so läuft wie es soll:
    Weiß jemand wie ich "inhalt" über "spalterechts" bekomme wenn es die alternative Ansicht anzeigt?

    ja dann kann ja auch mal jemand mit nen handy testen was der unterschid zwische
    max-device-width und max-width ist.


    sind das erste sozusagen css-pixel und das andre die echten pixel?

    Jup da ist man echt in einer schlechten lage wenn es so ist wie ich bis jetzt denke.


    wenn min-width z.b. auf 500px gestellt ist (das Handy sagt dann klar hab ich das) dann macht man ein div was eine breite von 500px hat und es passt nicht auf den bildschirm -.-




    aber device-width ist auch schlecht, da ja dann, das style sich bei pc's, wenn sie die browsergröße ändern, sich die device-width nicht ändert.

    So, dann geb ich zu dem Thema auch mal meinen Senf dazu.. habe mich da vor kurzem auch recht viel mit beschäftigt und das ist bei rausgekommen:


    Bei uns haben die meisten Sachen Klassen wie visible-phone, hidden-tablet etc. - dadurch kann man flexibel steuern was wann angezeigt wird.


    Insbesondere zum Testen empfiehlt sich der Einsatz von LESS, geschickt sind da für diesen Fall z.B. die Variablen, so kann man flexibel mit mehreren Breiten testen und schauen ob es auf allen Geräten passt.


    Zu Smartphones mit hoher Auflösung.. ich habe festgestellt beim Testen, dass hier auf jeden Fall nicht die tatsächliche Pixelzahl zum Tragen kommt - ich vermute, dass da das Smartphone eine andere Pixelzahl vorgibt, um eben mobile Webseiten zu laden und damit das ganze lesbar bleibt. Ist nur eine Theorie, aber irgendwas wird da auf jeden Fall gedreht. Beispielsweise kann man im Chrome auf Android zwischen mobiler und Desktopversion wechseln, sprich man bestimmt welchen User-Agent das Gerät sendet.


    Großes Thema: Bilder. Was macht man mit den Bilder, schließlich soll ja der Desktop-User möglichst große/passende Bilder angezeigt bekommen, dem Smartphone-User mit mobilem Internet möchte man aber kein 2MB großes Bild zumuten.
    Ich benutze da responsive Images - wer sich dafür interessiert kann ja mal googlen. Ist meiner Meinung nach momentan die beste Lösung und vor allem in bestehende Websites perfekt integrierbar, ohne jetzt bei jedem Bild die URL ändern zu müssen.


    weiteres Thema: Navigation. Ich habe die Erfahrung gemacht, dass eine dauerhafte Navigation zwar auf dem Tablet noch funktionieren kann, aber auf dem Smartphone dann schon nicht mehr. Also eine kleine Leiste in den Kopf, wo man links einen Knopf hat der die Navigation öffnet (wer die Facebook App benutzt weiß was ich meine)..
    Gleiches bei einer möglichen Sidebar - halt einen Knopf auf die rechte Seite der Leiste und dort kann dann die Sidebar rausfahren (z.B. gut für Login oder so).


    Klappt natürlich ohne Javascript alles nicht oder nur semantisch inkorrekt (Thema checkboxen zum Klick abfangen)..


    Ansonsten zu deiner Frage cottton: Das wird ohne absolute Positionierung nicht funktionieren, weil die Seitenleiste bei dir im Markup vor dem Inhalt kommt (was irgendwie eh wenig Sinn macht?).. Den normalen Fluss der Seite kann man aber nur durch absolute Positionierung umgehen.


    lg

    Naja, die Anordnung hab ich vom Layout Editor von hier: http://www.html-seminar.de/css-layout-generator.htm
    :D
    Ich glaub aber auch inzwischen mehr als 2 Spalten macht nicht so wirklich Sinn.


    Mit der Nav hast du recht. Hab mir verschiedene Responsiv Designs angesehen und es im Test einfach "kopiert". Aber Auf nem kleinen Display will glaub ich keiner so einen großen Klotz am oberen Rand haben.


    Btw - ich hab mir mal mal Responsive Tables angesehen und da gibts einige schöne Bsp.
    Allerdings war mit da "zuviel jQuery" oder un-dynamisches Gespiele drin. Hab mich dann an divs erinnert: div display:table
    Und die Idee war ganz einfach jeder tr ein hidden Label mitzugeben.
    Das klappt auch. Nur fehlt mir da eine Art Trigger der ein Overflow erkennt.


    Hier mal das Bsp für nen Table: http://vertex.selfhost.bz/responsive/


    Wie könnte man denn den Overflow handlen? (JS?)



    EDIT: nach längerem Suchen muss ich feststellen:
    Alles rund um Responsive Design läuft darauf hinaus eine feste Grenze zu setzen.
    Ab dieser Grenze wird "umgebaut".


    Das mag beim Layout nicht "auffallen". Bei Tables allerdings sehr schnell.
    Ich mag die Idee von Responsive Design. Aber nachdem was ich alles gelesen hab versuchen sich alle die "beste Grenze" zu basteln.
    Die grenze für Tablet, smartphone, und viele gehen sogar nach bestimmten Geräten wie zB iphone.
    Das gibt 3 oder mehr CSS Varianten für alles, was da aufm Bildschirm rumhängt (Bilder, Table, Text, Videos, ...).


    Btw Tables:
    Jedes, aber auch wirklich JEDES Beispiel im netz zeigt Resp.Tables "in best case". Fail!
    Kein einziger Zeigt mal was passiert, wenn die Tabelle mal mehr "im Kasten" hat. Wen zB ein Benutzer einen sehr langen Namen nutzt, und evtl noch eine lange eMail-Adresse. Dann ist nämlich nix mit "umbauen".
    Die Feste Grenze steht, aber ist noch nicht erreicht und wir sind zB noch auf der Tablet Variante - >Table hängt über.
    Oder im Falle die Tabelle hat mal wenig Daten und wir sind im Bereich Smartphones gelandet - dann gibts "schön" umgewandelte Tabellen mit 80% Nix.


    Also mMn geht es nicht ohne JS. Ein "onOverflow" Event gibt es wohl nicht. Aber ich hab mich an mein erstes JS erinnert - der TS3-Container.
    Werd mal versuchen das Ganze so umzugestalten, dass ein Table "on overflow" umschaltet.

    Tabellen? Wirklich?^^ brauchst man doch heutzutage nicht mehr, auch nicht als display:table...


    Das ist ja auch irgendwie der Sinn von responsive design, dass ab ner bestimmten Grenze, wo die normale Webseite nicht mehr passt, umgebaut wird?
    Wir launchen vermutlich morgen unser Projekt mit nem ziemlich guten responsive design - ich kann dann gerne den Link posten wenn Interesse besteht.

    Klar gern =)


    EDIT:
    So, erledigt. Weiß jetzt nicht ob es als "Responsived Design" gilt (aber ist ja nur ein Name), aber ich hab mal ´n JS gebastelt welches wirklich einen oder mehrere Table anpasst.


    Siehe hier: http://vertex.selfhost.bz/responsive/JStableOverflowTest.php
    Und im Gegensatz zu allen anderen im Netz hab ich 3 Tabellen eingefügt mit unterschiedlichen Weiten. Und jede Tabelle "bricht" nur dann ein, wenn sie muss. =)


    Ds Prinzip ist einfach (Umsetzung nicht :D)
    - Div umschließt Table
    - wenn Table größer als Div dann Table "brechen".
    - und andersrum


    :)

    EDIT: Fehler gefunden. Hatte html code vor !DOCTYPE ausgegeben -.-



    So hätte das garnicht aussehen sollen :D
    Ist das vom Smartphome?
    Hab auch gerade gesehen, das der IE damit nicht klarkommt.
    Da muss ich wohl doch nich was dran schrauben :p

    Ohne dem Bug ist es die Aufgabe auf jedem Screen :D


    Brauch mal Hife - ich bekomm das CSS nicht hin: html-seminar.de/woltlab/attachment/445/
    Wie verhindere ich, dass es nicht in den linken Raum "schwappt" ?
    Habs mit nowrap versucht und das funktioniert. Allerdings kann sich dann der Content nicht zusammen schieben.
    Mit zusammen schieben meine ich:


    content cont-
    tent und so


    Mit "nowrap" müsste ich auch noch ne 3te Variante dazu nehmen, bei dem sich dann jeweils der th wieder über die td schiebt :/
    Das wollte ich vermeiden.

    Responsive Webdesign funktioniert nicht bei Tabellen, nur bei DIVs.


    Und du hattest glaube ich oben noch gefragt, wie verhindert werden kann dass sich die rechte Spalte unterhalb von der linken schiebt: Der linken Spalte einfach bei ner kleinen Auflösung ein "float:none" geben.

    das mit dem float ging nicht.
    Aber ich habs jetzt =)
    Wenn nix geht - von vorn :D


    Ich hatte mich auf die "Vorlage" versteift. Hatte den CSS Part von jemandem aus dem Netz abgeguckt.
    War n Fehler. Der hatte versucht mit position:absolute "rum zu tricksen".
    Das Einzige was ich nicht hinbekomme ist ein mir unerklärlicher "empty Space" unter der table caption wenn die Tabelle klein wird.
    Sonst ist es perfekt. Selbst tfoot hab ich berücksichtigt, was ich fast vergessen hätte.
    Hier das (denk ich) fertige Dinges: http://vertex.selfhost.bz/responsive/JStableOverflowTest.php


    btw: Responsive Tables - gibts n paar mit bottom scrollbar wenn es zu eng wird ... da dach ich mir "WHAT?!"
    Wenn ich ne scrollbar will dann doch mir overflow:auto
    Da wolln die mit "festen Grenzen" (@media ...) festlegen, wann die scrollbar kommt? so n Quark :D
    Hab :auto übrigens benutzt, falls User kein JS nutzt.
    Brauch mal Hilfe =)
    Hab es (http://vertex.selfhost.bz/responsive/JStableOverflowTest.php) überarbeitet und jetzt werden die einzellnen Zellen sinnvoller angeordnet, sobald der Platz zu klein wird.
    Allerdings:
    - bekomme ich es nicht hin, dass eMails wie zB "hans-hansen@domain.tld" umgebrochen werden (in erster Tabelle - die Zelle ist größer als alle anderen)


    - hab ich Probleme mit dem Abstand zwischen den Zellen. Bei margin-bottom passt es. Aber rechts gibt es bei Opera und FF ein "von haus aus" margin-right. Bei Chrome nicht, also müsste ich dort ein margin-right einbauen, was es wieder bei den andern Browsern verkackt =/


    Weiß jemand ne Lösung?

    shit, ich hab die falsche eMail kopiert :D
    ich meinte die hier: ole.olsen@domain.tld
    Sieht mir aus, als ob punkte nicht umgebrochen werden.
    Moin ... oder so ...


    Update => html-seminar.de/woltlab/attachment/492/ und bitte mal testen =)
    Einfach beides (.js und .css) auf der Page laden lassen und Browser verkleinern/-größern oder auf mobile ...


    Ich denke es läuft überall. Es sei denn ich hab JS verwendet, was nicht jeder Browser unterstützt ect.


    Note: es schnappt sich "on default" alle tables auf der Page.
    Wenn nicht gewollt, dann:
    - config:addDivWrapIfNotExist => auf false setzen
    - jeden table der auf der page geschnappt werden soll in ein div packen mit der class "normal" (<div class="normal"><table>...)


    Was mir noch fehlt is:
    - evtl "besseres" css ?
    - das hier angesprochene problem: JS element.innerHTML plus input content


    Thanks! =)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden