#1

inselpirat

Routinier  (482 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ameland-tips.de

Einige Merkwürdigkeiten mit Design Riga

Moin zusammen, habe jetzt mal mein Projekt mit dem responsiven Design Riga aus web 9 erstellt und dabei einige Ungereimtheiten bzw. fehlende Gimmiks entdeckt. Zur Erklärung: Es wurden noch nicht der BB-Code und auch einige andere Dinge eingebaut, daher können Fehldarstellungen auftauchen.

H i e r  die Arbeitsseite

1. Doppelklick nötig um Hauptseiten in der Navi zu öffnen

Es fiel mir beim Klick auf die Hauptseiten in der Navi auf, z.B. einfacher Klick auf "Über uns" nix passiert, einfacher Klick auf die darin befindlichen Unterseiten z.B. "Über uns / Kontakt" und die Seite wird geöffnet. Nach langem probieren habe ich dann festgestellt das die Hauptseiten nur mit einem Doppelklick zu öffnen sind. Das ist auch in der mobilen Ansicht nicht anders. Für mich ist das ungewöhnlich.

2. Google Karten werden bei Benutzung von Akkordeons nur korrekt angezeigt, wenn die Einstellung lautet "Akkordeonbereich beginnen /bei Seitenaufruf geöffnet". Es wird nicht angezeigt wenn die Einstellung "bei Seitenaufruf geöffnet" nicht aktiviert ist. Wie bereits mehrfach berichtet kennt Siquando das Problem seit 8.0 ändert aber nichts.

3. Grafiken welche z.B. in Tabellen angezeigt und in 50x50 pixel angelegt und auch so im Quellcode angegeben sind, werden zu 186x186 skaliert, was diese natürlich erstens viel zu groß und zweitens unansehnlich macht. Hier zu sehen ( unter Ausstattung schauen)

4. Es fehlt die Möglichkeit einen "nach oben" Button zu aktivieren, gerade für Seiten mit viel Text eigentlich ein "Muss" Natürlich kann man den nachträglich einbauen, aber das ist wie schon so oft geschrieben nicht Sinn der Übung. Dafür wirbt Siquando ja mit topaktuellen Designs für die man keine Kenne haben muss.

5. responsive Tabellen; hier gilt es zu üben damit solche Tabellen wie h i e r  zu sehen, vernünftig in der mobilen Ansicht funktionieren. Was die mobile Ansicht aus dieser Tabelle macht - geht jedenfalls gar nicht. Auch hier werden in der Desktopversion die Bilder extrem nach oben skaliert und sehen unansehnlich aus.

und last not least - frage ich mich was das soll und wer das braucht, ein Icon (pdf-logo) ist mit 50x50 px angegeben und auch klar definiert ( <img src="../../images/pdflogo_640.gif" alt="" width="50" height="50" />) das Design macht aber dann dieses davon

Das Icon wird auf sage und schreibe 1098*1098 px skaliert.

Das ist das erste was mir mit der Arbeitskopie so auffiel.

Vielleicht hat ja jemand einen Tipp wie man diese Skalierung verhindern kann, ohne das dann das ganze Design unbrauchbar wird ( Stichwort responsive)

VG

 

#2

harlekin8

Experte  (314 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://relaunch.cooperative-praxis.de

Hi Michael,


zu deinen Grafiken a 50x50;

Trage in der style_content.css folgendes ein:

 img[width="50"]{width: 27.17391304347826%!important}

 ein. (Wenn es interessiert - hier werden sogenannte Attribut-Selektoren benutzt).

Nachdem selben Prinzip kannst du eine Zeile darunter für dein PDF-Logo:

img[src*="pdflogo"]{width: 4.604051565377532%!important}

eintragen. Oder px-Größen, je nachdem was du willst. Mit media queries kannst Du das Responsive steuern. (min-width usw)

Damit sollte es funzen.

Bei der Navigation müsste man an der navigation.js spielen. Z.B. sodass ein Mouseover, das einfache Klickereignis und das einfache Klick-Ereignis, das Doppelklick-Ereignis  ersetzen. Allerdings stellt das Mousover-Event ein Hindernis auf mobile Geräte dar. Kann man zwar dennoch lösen, aber der einfachere Weg ist der im Design hinterlegte Weg.

Bis die Tage !

Ingo


Dieser Beitrag wurde bereits 7 mal bearbeitet, zuletzt von »harlekin8« (12.10.2016, 22:29)
#3

inselpirat

Routinier  (482 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ameland-tips.de

Moin Ingo

das klappt - Danke dir.

Jetzt muss ich nur noch verstehen wie die % Werte zustande kommen, dann könnte ich das selbst erstellen sollte es bei anderen Sachen die gleichen Problem geben.

Das mit der navi.js lass ich lieber - das verstehe wer will - ich nicht. Für den Besucher ist solch ein Verhalten der Navi auf alle Fälle irreführend.

VG

#4

inselpirat

Routinier  (482 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ameland-tips.de

Hallo Ingo,

habe deinen Tipp mit der style_content ausprobiert - jetzt werden die icons wie auch gedacht 50x50 gezeigt. Zumindest auf dem PC.

Ich arbeite ja jetzt schon eine ganze Weile mit dem Bootstrap von Thomas, von daher hatte ich sicher eine gewisse Erwartungshaltung an die Profidesigner von SIQ. Aber was ich jetzt zu sehen bekomme - ehrlich? ohne jedes HTML Wissen ganz einfach ´ne super responsive Seite erstellen - das stelle ich mir irgendwie anders vor.

Auf dem PC werden jetzt zwar die Icons 50x50 dargestellt, aber die Tabellenbreite bleibt bei 100% stehen. Das sieht aus als hätten sich die Icons da irgendwo verloren.

icons.jpg

 

 

Na ja habe ich mir gedacht, dann sehen die wenigstens in der mobilen Ansicht ( sprich Smartphone ) gut aus - ich konnte es echt nicht glauben aber da werden die Icons dann so dargestellt:

icon_smartphone.jpg

 

 

Also wenn ich so etwas ohne weiteres Wissen der Fachleute hier hochlade, denken die Leute doch wer weiß was.

Also ganz ehrlich, professionell sieht irgendwie anders aus, das ist nicht Fisch und nicht Fleisch.

Aber heute schon wieder drei kostenpflichtige Plugs anbieten smile_sad_16.pngsmile_sad_16.png

 

 

 

1016 Aufrufe | 4 Beiträge