Smartphone Support (iPhone, Android, Windows Phone)

  • Moinsen,


    ich möchte das komplette Design auf ein so genanntes "Responsive Design" umstellen. D.h. die Webseite passt sich eurem Device an. Ganz gleich ob iPhone, Desktop oder Tablet.


    Das ganze ist leider richtig viel Arbeit und ich möchte mich bis vermutlich Weihnachten dadrauf konzentrieren.


    Hier erfahrt ihr noch weitere Informationen:



    Beste Grüße,
    Sebastian

  • Auch, wenn du wahrscheinlich schon was zum testen hast, kann ich dir nur Screenfly empfehlen :)
    Viele Möglichkeiten auf einmal, ganz ohne Download ;)

    Nachdem Sebastian OSX User ist, gibt es eine schönere Variante im Safari Browser :)
    CMD + ALT + R für den Responsive mode mit landscape & portrait sowie splitten des Bildschirms
    [Blockierte Grafik: https://i.imgur.com/iEIOvkd.png]

  • Nachdem Sebastian OSX User ist, gibt es eine schönere Variante im Safari Browser
    CMD + ALT + R für den Responsive mode mit landscape & portrait sowie splitten des Bildschirms

    Das is ja cool :) Das kannte ich noch nicht. Danke für den Hinweis.

  • Nun melde ich mich auch einmal zu Wort.


    Als erstes, Sebastian lass dir die Zeit, die du brauchst.
    Als 2. Was wird dann bei der App verbessert (das hast du in den kommentaren erwähnt)

  • Hier ein erster Einblick:



    Bitte um sachliches Feedback.

    Gut es ist erstmal der Anfang, denke mal die kleinen Unstimmigkeiten wirst du noch beheben. Wie z.B. die Abstände & die Tabs der Kategorien sollten in einer Zeile sein.
    Was mir noch aufgefallen ist, was auch bei meiner Redesign Lösung etwas doof ist - ist die flucht der Tabs (AAO & Freie Fahrzeuge).


    Denke es macht mehr Sinn beides auf einer höhe zu haben (Tabs) & den Progress Part ca. 75% des Modals zu geben - damit daneben noch Platz für "Kräfte vor Ort" & sonstiges ist.
    Sonst, super Fortschritt :)

  • Da spricht der Profi :) Aber du hast recht - viele Abstände passen noch überhaupt nicht.


    Ich werde aufjedenfall nochmal mit dir den Kontakt suchen, wenn ich etwas weiter bin.


    Jetzt darf ich allerdings erstmal gefühlt 100 Masken soweit umbauen, dass sie überhaupt erstmal wieder funktionieren. Im Video sieht man ja nur die Masken, die überhaupt schon angefasst wurden - das ist jetzt erstmal nur ne Fleiß-Arbeit. Mein Plan liegt jetzt bei 1,5 Wochen Maskenumbauen und dann das CSS entsprechend anpassen - und da kommst du mit Sicherheit auch nochmal ins Spiel :)

  • Da spricht der Profi :) Aber du hast recht - viele Abstände passen noch überhaupt nicht.


    Ich werde aufjedenfall nochmal mit dir den Kontakt suchen, wenn ich etwas weiter bin.


    Jetzt darf ich allerdings erstmal gefühlt 100 Masken soweit umbauen, dass sie überhaupt erstmal wieder funktionieren. Im Video sieht man ja nur die Masken, die überhaupt schon angefasst wurden - das ist jetzt erstmal nur ne Fleiß-Arbeit. Mein Plan liegt jetzt bei 1,5 Wochen Maskenumbauen und dann das CSS entsprechend anpassen - und da kommst du mit Sicherheit auch nochmal ins Spiel :)

    Hast schon eine Mail bekommen. Was ich vergessen hab zu erwähnen - bei vielen Dingen würde eine 'normale' Seite mehr Sinn machen. Werde dazu noch ein Beispiel machen.
    Freut mich ^^

  • Was mir momentan noch nicht richtig zusagt ist die Wachenleiste unten links. An die Position muss man sich sicher erst gewöhnen aber mein Hauptkritikpunkt ist folgender. Bei mir stehen die RTH-Standorte immer ganz oben um schnell sehen zu können welcher sich bereits im Einsatz befindet, um so die Flugzeiten möglichst gering halten zu können und Langstreckenflüge zu vermeiden. Das würd zukünftig nicht mehr möglich sein, weil schlicht nicht genug Standorte auf dem Bildschirm sein werden. Daher würde ich es begrüßen wenn die Anzeige innerhalb der Liste benfalls überarbeitet wird. Ich könnte mir hier kleinere Wachenüberschriften und Symbole vorstellen oder auch eine zweispaltige Aufteilung. Links das Symboö mit der Detailschaltfläche, darunter in kleiner Schriftgröße den Namen und rechts davon, auf gleicher Höhe beginnend, die Fahrzeuge der Wache. Das Chatfenster könnte dafür etwas schmaler werden. Auch könnte der "Totraum" verkleinert werden, der keine Wichtigen Informationen enthält. BsP die grauen Kästen mit der Überschrift und die Abstände allgemein.

  • Lieber Sebastian,


    der aktuelle Entwicklungsstand vom ReDesign hat mich begeistert. Ich muss ehrlich gestehen, dass ich in den vergangenen Wochen und auch Monaten nicht sehr häufig gespielt habe. Eine Frage der Zeit — aber auch der Lust: Und diese ist mir zeitweise vergangen…


    Warum ist es dazu gekommen?
    Vorab: ich finde es gut, dass das Leitstellenspiel.de auch anderthalb (?) Jahre nach der Veröffentlichung im Entwicklungsprozess steht. Dein Spiel, Sebastian, hat aus meiner Sicht großes Potential und hat mich nach anfänglicher Skepsis definitiv überzeugt.
    Der Fortschritt ist gut, doch die (grafische) Umsetzung hat darunter in meinen Augen darunter gelitten. Immer wieder wurden neue Schaltflächen in die einst aufgeräumte und durchdachte Fläche hinzugefügt, zuletzt — und um ein Beispiel zu nennen — der Button „Fahrzeuganzeige begrenzt! Alle Fahrzeuge laden!“. Er fügt sich nicht harmonisch in das Bild ein, steht irgendwo mitten im Raum und man muss (bei begrenzter/statischer) Fenstergröße erst einmal scrollen, um überhaupt einen Blick auf die freien Fahrzeuge werfen zu können. (Ich muss dazu sagen, ich alarmiere immer noch lieber von Hand und greife nur bei einzelnen Einsätzen auf Züge bzw. AAOs zurück.)


    Es ist Zeit zum Umdenken!
    Deswegen hier erst einmal ein dickes Lob an Dich, Sebastian: Du setzt Dich mit dem gesamten grafischen Konzept auseinander und überarbeitest es völlig. Damit passt Du es natürlich auch an die geänderten Anforderungen im Vergleich zur Version 1 an. Und deswegen möchte ich Dir im Folgenden meine Meinung zur jetzigen grafischen Veränderung mitteilen — das ist, wie wahrscheinlich allgemein bekannt, mein Steckenpferd. Vielleicht helfen Deine Bemühungen dabei, meine Lust auf Leistellenspiel.de wieder zu steigern.


    Aspekt Lesbarkeit
    Als eine der ersten Veränderungen im Vergleich zur derzeitigen Version (im Folgenden V. A & V. B gennant) ist mir die geänderte Typografie aufgefallen. Die Ubuntu ist mit Sicherheit eine starke und einprägsame Schrift. Ich persönlich finde aber, das sie sich eigentlich nur für sehr große Überschriften eignet. Für mich ist das in A ein Grenzfall, insbesondere im Hinblick auf die Smartphone-Nutzung sind Reiter wie „Funksprüche“ oder „Verbandsnachrichten“ nicht mehr so gut zu lesen. Deswegen begrüße ich es, dass Du in B eine klassische serifenlosen Schrift verwendest. Sie ist in den Ausführungen klarer und deshalb einfacher, besser oder auch schneller zu lesen.


    Aspekt Farben
    In Container „Einsätze“ hält nun die Farbe blau Einzug. Eine sehr gute Sache. Das liegt an zwei Dingen: Zum einen finde ich, dass rot und blau sehr gut miteinander korrespondieren. Zum zweiten wirkte die ausschließliche Verwendung von rot in A zu einer Überlastung. Man wird quasi von roten Elementen erschlagen. Das fällt jetzt weg, es wirkt dadurch deutlich aufgeräumter und man kann besser erkennen, dass die einzelnen Einsätze nur Unterkategorien des gesamten Containers sind.
    Was mir bisher negativ aufgefallen ist: Jetzt gibt es statt zwei Farben (rot & grün) eine dritte Farbe. Das stiftet bei mir Verwirrung und bringt kein einheitliches Design mit sich. Inwiefern man dieses Problem aber lösen könnte — dazu habe ich keine konkrete Idee. Ich würde definitiv an der Farbe blau festhalten, alle grünen Elemente aber umzufärben halte ich auch nicht für den richtigen Weg.


    Aspekt Containerstruktur
    Alle großen Schaltflächen sind in unterschiedlichen Containern angeordnet. Das finde ich gut. So werden Funksprüche von Gebäuden, und Einsätze vom Verbandschaf gut abgegrenzt. Durch den Umbau ist es aber aus meinem Blickwinkel zu einer „Ver-Containerung“ im Bereich des Containers „Einsätze“ gekommen. Nun gibt es Container (die einzelnen Einsätze) im Container (die gesamte Schaltfläche). Das wirkt irgendwie nicht stimmig. Ich persönlich würde da bei dem Konzept von A bleiben, es gibt eine Überschrift, die Unterzeile mit der Button-Leiste und dann einzeln in Containern die verschiedenen Einsätze.


    Aspekt Zweispaltigkeit
    In Version A gibt es in „erster Reihe“ drei Spalten: die Karte, die Einsätze und die Gebäudeübersicht. In Version B sind die Gebäude nach unten links gewandert. Für mich keine schöne Anordnung.
    Denn das Nutzungsverhalten von Gebäuden zum Chat und zu den Funkstatus ist bei mir deutlich unterschiedlich: Die letzen beiden nehme ich lediglich zur Kenntnis oder schreibe einzelne Zeilen in die Verbandsnachrichten. Da muss man nicht scrollen. Anders sieht es aber bei den Einsätzen oder den Gebäuden aus: Sobald man mehr als zehn/15 Items hat, muss man scrollen — so ist das zumindest in A. In B wird das nur noch auf die Einsätze zutreffen, bei einem so kurzen Container für die Gebäude muss man sehr viel scrollen. Deshalb ein Punkt, den ich mir an Deiner Stelle noch einmal überlegen würde.


    Aspekt Reiter
    Wie Du in deinem Video gesagt hast, sei die Alarmmaske so gut wie fertig gebaut. Hier finde ich die Zweispaltigkeit auch sehr gut, so erhält man einen besseren Überblick über alle Möglichkeiten zur Alarmierung. Die einzige Anmerkung die ich diesbezüglich noch habe: Es geht gar nicht, dass man die Reiter wie „Alle“ oder „Feuerwehr Löschfahrzeuge“ in zwei Zeilen packt. Das sieht überhaupt nicht aus! Vielleicht kann man ja an dieser Stelle mit Symbolen arbeiten oder die Namen verkürzen?
    Und noch ein kleiner Punkt zu diesen Reitern: Das Verhältnis Schriftgröße zu Höhe der Reiter passt für mich nicht zusammen. In A wirkt das deutlich stimmiger, in B jedoch viel zu hoch. Die würde ich einfach ein wenig niedriger machen. (Das gilt natürlich auch für die AAO.)


    Aspekt Identifikation
    Bisher ist Leitstellenspiel.de eine Wort-Bild-Marke. Für B sieht das aber ganz anders aus: Dort gibt es kein Logo mehr (oder ist das noch geplant?). Das finde ich sehr schade, der einfache Schriftzug wertet das Spiel ab und es gibt keine eindeutige Identifikation mehr — gerade wenn man sich außerhalb von Spiel und Forum bewegt (bspw. bei Facebook).


    Aspekt Auflösung
    Abschließend habe ich noch eine Frage in eigener Sache: Besteht die Möglichkeit, die spieleigenen Icons für Retina-Displays zu optimieren. (Ich sehe ein: die Übertragung auf Karten & eigene Fahrzeug-/Gebäudegrafiken ist zu aufwendig.) Das würde das ReDesign aus meiner Sicht noch einmal aufwerten und würde mir persönlich sehr gut zu pass kommen.
    Und thematisch passt das ja auch zur mobilen Nutzung: viele Smartphones oder TabletPCs haben ja mittlerweile ein solches Display verbaut.


    Ich hoffe, einige meiner Bemerkungen finden bei Dir und natürlich auch in der Community Anklang.


    Liebe Grüße und ein erholsames Wochenende,


    GermanModell

  • Durch den Umbau ist es aber aus meinem Blickwinkel zu einer „Ver-Containerung“ im Bereich des Containers „Einsätze“ gekommen.

    Jup, gefällt mir auch nicht. Da muss ich noch ran.

    Ich würde definitiv an der Farbe blau festhalten, alle grünen Elemente aber umzufärben halte ich auch nicht für den richtigen Weg.

    Ich habe mir das wie folgt gedacht:
    Blau = Infomeldungen
    Grün = Erfolgsmeldungen
    Rot = Fehler bzw. wichtige Hinweise


    Aspekt Reiter

    Jup, da muss noch was getan werden.

    Aspekt Auflösung

    Alles was mir in Retina-Auflösung vorliegt, wird demnächst dann auch Hochauflösend ausgegeben. Leider sind das nicht alle Icons...