SELFPHP: Version 5.8.2 Befehlsreferenz - Tutorial – Kochbuch – Forum für PHP Einsteiger und professionelle Entwickler

SELFPHP


Professional CronJob-Service

Suche



CronJob-Service    
bei SELFPHP mit ...



 + minütlichen Aufrufen
 + eigenem Crontab Eintrag
 + unbegrenzten CronJobs
 + Statistiken
 + Beispielaufrufen
 + Control-Bereich

Führen Sie mit den CronJobs von SELFPHP zeitgesteuert Programme auf Ihrem Server aus. Weitere Infos



:: Buchempfehlung ::

Handbuch der Java-Programmierung

Handbuch der Java-Programmierung zur Buchempfehlung
 

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP  

 

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 
 

Zurück   PHP Forum > SELFPHP > HTML, CSS und JavaScript Help!

HTML, CSS und JavaScript Help! Hier gibt es Hilfe zu HTML, CSS und JavaScript Problemen

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 02.05.2017, 13:18:21
1cK3 1cK3 ist offline
Anfänger
 
Registriert seit: Feb 2017
Alter: 19
Beiträge: 2
1cK3 befindet sich auf einem aufstrebenden Ast
responsive Design - Wie heangehen

Hallo liebe Alle,
Dies ist mein erster Beitrag hier und ich freue mich, einen Raum gefunden zu haben, in den ich diese folgende Frage unterbreiten kann.

Vorgeschichte:
Ich habe ein mir sehr wichtiges Projekt recht stümperhaft (prozedural, nicht responsiv, ohne jegliche Sicherheit) vollendet und dabei PHP gelernt.
Nun soll das ganze nochmal ordentlich und möglichst nach allen Regeln der Kunst gemacht werden.

die Frage:
Doch dieses responsive Design stellt mich doch vor Fragen, deren Beantwortung mir im Selbststudium nicht möglich war.
Ich weiß, wie ich ein Design bastel, das sich durch relative Größenangaben dem Viewport anpasst. Ich weiß, wie ich mit media-queries ein spezifisches Design schreiben kann und ich weiß, dass ich den mobile-first- Ansatz beachten soll.

Aber ich frage mich: Wie kann ich spezielle HTML-/PHP- Elemente für ein spezielles Device (Smartphone) einbauen? Denn gern würde ich spezielle Elemente in Buttons auslagern, zum Beispiel die Navigation. (So wie es https://netzpolitik.org/ tut: Die Navigation verschwindet bei Smatphone-Breite hinter einem Button.)
Wenn ich das aber tu, dann habe ich je nach Situation leere HTML-Elemente (die Navigation/ UL). Blende ich diese via PHP ein oder aus oder wie löst mensch so etwas professionell/ elegant? Gibt es eine Musterlösung? Steh ich auf dem Schlauch?

Die Seite soll aus Gründen der Barrierefreiheit für Skeptiker_Innen ohne JS funktionieren.

vielen Dank im Voraus für Tips und Anmerkungen.
Mit Zitat antworten
  #2  
Alt 03.05.2017, 11:21:28
sysop sysop ist offline
Junior Member
 
Registriert seit: Mar 2004
Ort: wien
Beiträge: 492
sysop befindet sich auf einem aufstrebenden Ast
AW: responsive Design - Wie heangehen

Lösung biete ich dir keine, dafür ist das Thema zu umfangreich.

Generell wird RD (responsive Design) mit CSS(3) gelöst.

Generell funktioniert das so:
Nach Herausfinden der Auflösung des Endgerätes wird eine entsprechendes Stylesheet geladen, dass die Anzeige für das Endgerät optimiert. Relative Grössen, die den Viewport des Endgerätes übersteigen sind zu vermeiden. Die Navigation erfolgt in den meisten Fällen in Form von Listen, die sich beliebig über CSS anpassen und stylen lassen.

In meinen Augen wird dabei eines der wichtigsten Prinzipien der letzten Jahre, genauer gesagt des Internets überhaupt, auf den Kopf gestellt, bzw. ad absurdum geführt.
Habe ich vor ein paar Jahren noch gepostet, dass das Design unabhängig von der Auflösung erfolgen sollte, geht RD genau den umgekehrten Weg und straft meines Aussagen von früher folglich Lügen.
Ansichten im Wandel der Zeit halt...
__________________
Gruss sys ;-)
Ich möchte wie mein Grossvater sterben, lächelnd und schlafend, nicht schreiend und weinend, wie sein Beifahrer.
Mit Zitat antworten
  #3  
Alt 03.05.2017, 14:29:19
1cK3 1cK3 ist offline
Anfänger
 
Registriert seit: Feb 2017
Alter: 19
Beiträge: 2
1cK3 befindet sich auf einem aufstrebenden Ast
AW: responsive Design - Wie heangehen

Hallo Sysop,
danke für die schnelle Antwort.

Ich konnte mein spezifisches Problem tatsächlich lösen. Stichwort: responsive Navigation und Hamburger Button.

Für alle, die ähnliche Probleme haben:
Auf dem mobile wird die Navigation via "checkbox-hack" ein-ausgeblendet (display:hidden vs. display:block), sodass nur der berühmte Hamburger-Button zum Menü führt.
Bei größeren Bildschirmen (media-query) kann mensch die Navigation dann wieder einblenden und formatieren und den Hamburger-Button ausblenden.

display:block und display:hidden seien allerdings bei barrierrefreien Auftrittten nicht geeignet, da sie vom Screenreader ignoriert würden (hab ich gelesen). Aber da gibt es wohl auch Workarounds.

Allen mit dem selben Problem wünsche ich, dass das weiterhilft. Entsprechend würde ich den thread jetzt als gelöst markieren, wüsste ich, wie das geht.
Wie geht das?

liebe Grüße
1cK3
Mit Zitat antworten
Antwort

Stichworte
mobile first, responsive design


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind aus.
[IMG] Code ist aus.
HTML-Code ist aus.

Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Trennung von Logik und Design dempsey PHP Grundlagen 1 05.06.2012 06:41:19
Design - Verbesserungsvorschläge realyreal22 HTML, CSS und JavaScript Help! 11 27.04.2009 18:47:27
Anregungen,(Kritik) zum design [inSane] Off Topic Area 16 11.04.2008 23:40:36
Design der Webseite Schneidoa Off Topic Area 7 31.05.2007 09:20:38
Wie in html design inhalt einfügen? eres PHP Grundlagen 4 16.10.2006 01:24:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:53:13 Uhr.


Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.


© 2001-2017 E-Mail SELFPHP OHG, info@selfphp.deImpressumKontakt