Hallo / Responsive Design (Erste Schritte )

Nicht mit CONTENIDO unmittelbar zusammenhängende Themen, Lob und Kritik.
Antworten
audio_uwe
Beiträge: 4
Registriert: Di 10. Jun 2014, 15:46
Wohnort: Siegen/Freudenberg
Kontaktdaten:

Hallo / Responsive Design (Erste Schritte )

Beitrag von audio_uwe » Mi 11. Jun 2014, 09:14

Hallo Contenido Communitiy,

bin ganz frisch hier im Forum unterwegs und möchte als erstes ein freundliches "Hallo" in die Runde werfen.

zu meiner Person:
Ich arbeite als Werbegrafiker ( Selbsständig & Festangestellt ) für Print & Web.
HTML & CSS verstehe ich gut und ich beschäftige mich auch schon seit ein paar Jahren mit verschieden CMS Systemen ( z.B. wordpress etc. ) allerdings muss ich zugeben das ich als Gestalter oft an Programmiergrenzen stoße die ich einfach nicht alleine lösen kann. Seit einiger Zeit arbeit ich bei einer neuen Firma und bestücke & pflege dort deren Contenido-Website mit Bild & Text.
Das pflegen und aktualisieren funktioniert mittlereile ganz gut. Jetzt würde ich allerdings gerne hier aus dem statischen Design ein Responsive Design machen - gibt es User hier die sich damit schon beschäftigt haben ?
Speziell mit dem Thema : aus einer statischen Seite eine flexible Seite zu machen - und wie geht man da am besten vor / Tips für Erste Schritte ?
Eventuell werde ich dann auch später hier ( wenn ich es nicht blicken sollte ) einen Programmierer ganz offiziell anwerben wollen ( natürlich gegen Bezahlung & Angebot )
Die Seite um die es hier geht:
[WERBUNG ENTFERNT]

(( Auch bin hier derzeit dabei eine Testumgebung aufzubauen - wo ich mich dann "responsive" austoben möchte - gerne mit Eurer Hilfe ! ))

So das war es erst mal im Groben, Ihr müsst warscheinlich Zugang zu den Modulen und Scripten haben um konkret Hilfestellung zu geben,
wenn ich den Testzugang gelegt habe (und ich weiß welche ersten Schritte ich beachten muss) ...später mehr dazu.

Schon mal danke an Alle die sich Zeit nehmen und mir Tips geben können,
lg
Uwe

McHubi
Beiträge: 1005
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Hallo / Responsive Design (Erste Schritte )

Beitrag von McHubi » Mi 11. Jun 2014, 11:11

Hallo Uwe,

die grundsätzliche Frage ist hier, ob Du ein Framework nutzen oder das Ganze über eigene media-queries steuern möchtest. Beides hat seine Vor- und Nachteile.

Ein kurzes Beispiel für eigene media-queries bei einem dreispaltigen Layout, dass seinen Aufhänger an der Schriftgröße (em) setzt. Die Breakpoints werden also daran fixiert, wie viele Zeichen nebeneinander passen:

HTML standard.html

Code: Alles auswählen

<DOCTYPE! html>
<head>
  <title><container id="10100" name="head_001" mode="fixed" default="head_title">head_001</container></title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="standard.css" media="all" />
</head>
<body>

<div class="box_main">
  <div id="size">
  </div>
  
  <div class="box_header">
    <container id="20100" name="header_001" mode="optional">header_001</container>
  </div>
	
  <div class="box_navigation_breadcrumb">
    <container id="20200" name="header_002" mode="optional">header_002</container>
  </div>
  
  <div class="box_navigation">
	<container id="30100" name="content_1_001" mode="optional">content_1_001</container>
	<container id="30200" name="content_1_002" type="navigation" mode="fixed" default="navigation_main_show">content_1_002</container>
	<div id="navigation">
	  <container id="30300" name="content_1_003" type="navigation" mode="fixed" default="navigation_main">content_1_003</container>
	  <container id="30400" name="content_1_004" mode="optional">content_1_004</container>
	</div>
	<container id="30500" name="content_1_005" mode="optional">content_1_005</container>
  </div>
  
  <div class="box_content">
	<div class="box_content_center">
	 <container id="40100" name="content_2_001" mode="optional">content_2_001</container>
	 <container id="40200" name="content_2_002" mode="optional">content_2_002</container>
	 <container id="40300" name="content_2_003" mode="optional">content_2_003</container>
	 <container id="40400" name="content_2_004" mode="optional">content_2_004</container>
	 <container id="40500" name="content_2_005" mode="optional">content_2_005</container>
	 <container id="40600" name="content_2_006" mode="optional">content_2_006</container>
	 <container id="40700" name="content_2_007" mode="optional">content_2_007</container>
	 <container id="40800" name="content_2_008" mode="optional">content_2_008</container>
	 <container id="40900" name="content_2_009" mode="optional">content_2_009</container>
	 <container id="41000" name="content_2_010" mode="optional">content_2_010</container>
	</div>
	<div class="box_content_right">
	 <container id="50100" name="content_3_001" mode="optional">content_3_001</container>
	 <container id="50200" name="content_3_002" mode="optional">content_3_002</container>
	 <container id="50300" name="content_3_003" mode="optional">content_3_003</container>
	 <container id="50400" name="content_3_004" mode="optional">content_3_004</container>
	 <container id="50500" name="content_3_005" mode="optional">content_3_005</container>
	</div>
  </div>
  
  <div class="box_footer">
    <container id="60100" name="footer_001" mode="optional">footer_001</container>
	<container id="60200" name="footer_002" mode="optional">footer_002</container>
	<container id="60300" name="footer_003" mode="optional">footer_003</container>
  </div>
</div>

</body>
</html>
CSS standard.css

Code: Alles auswählen

/********** general begin **********/
@viewport {
width: device-width;
zoom:1;
}
body {
height: 100%;
font-family: arial,helvetica,sans-serif;
font-size: 1em;
}
div.box_main {
max-width: 70em;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
background-color: yellow;
border: 1px solid yellow;
}
div.box_header,
div.box_navigation,
div.box_content_center,
div.box_content_right,
div.box_footer {
padding: 1%;
}
div.box_header {
background-color: red;
}
div.box_header img {
width: 100%;
}
div.box_navigation_breadcrumb {
padding-left: 1em;
background-color: green;
}
div.box_footer {
text-align: center;
clear: both;
background-color: gray;
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
}
h4 {
font-size: 1em;
}
img {
border: none;
}
.nowrap {
white-space: nowrap;
}
/********** general end **********/



/********** size 0 begin **********/
div.box_header {
}
div.box_navigation {
width: 17%;
float: left;
margin: 1%;
margin-left: 0%;
}
#navigation {
display: block;
}
div.box_content {
width: 80%;
float: left;
margin-top: 1%;
margin-bottom: 1%;
}
div.box_content_center {
width: 73%;
float: left;
margin-left: 0%;
font-size: 0.9em;
}
div.box_content_right {
width: 22%;
float: left;
margin-left: 1%;
}
/********** size 0 end **********/



/********** size 1 begin **********/
@media only screen and (max-width: 52em) {
body {
font-size: 0.9em;
}
div.box_header {
background-color: blue;
}
div.box_navigation {
width: 25%;
}
#navigation {
display: block;
}
div.box_content {
width: 72%;
}
div.box_content_center {
width: 98%;
}
div.box_content_right {
width: 98%;
margin-left: 0%;
margin-top: 1%;
}
h1 {
font-size: 1.2em;
}
h2 {
font-size: 1em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 1em;
}
}
/********** size 1 end **********/



/********** size 2 begin **********/
@media only screen and (max-width: 42em) {
body {
font-size: 0.8em;
}
div.box_header {
background-color: cyan;
}
}
/********** size 2 end **********/



/********** size 3 begin **********/
@media only screen and (max-width: 32em) {
body {
font-size: 0.8em;
}
div.box_main {
margin-top: 0.5em;
}
div.box_header {
background-color: white;
}
div.box_navigation {
width: 98%;
}
#navigation {
display: none;
}
div.box_show_navigation {
display: block;
}
div.box_content {
width: 100%;
margin-top: 0%;
}
div.box_content_center {
width: 98%;
margin-left: 0%;
margin-top: 0%;
}
div.box_content_right {
width: 98%;
margin-left: 0%;
margin-top: 1%;
}
h1 {
font-size: 1.2em;
}
h2 {
font-size: 1em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 1em;
}
}
/********** size 3 end **********/

/* test begin */
@media only screen and (min-device-pixel-ratio: 2) {
body {
background-color: blue;
}
}
/* test end */
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Die NEUAUFLAGE des Buchs zur Version 4.9: CONTENIDO für Einsteiger (4.9)

audio_uwe
Beiträge: 4
Registriert: Di 10. Jun 2014, 15:46
Wohnort: Siegen/Freudenberg
Kontaktdaten:

Re: Hallo / Responsive Design (Erste Schritte )

Beitrag von audio_uwe » Do 12. Jun 2014, 10:42

Wow....Danke McHubi für Deine schnelle Antwort, die media-queries Geschichte gefällt mir schon sehr gut. Jetzt muss ich nur noch herausfinden wo und wie ich die Boxen dann
richtig im Contenido definiere bzw. umschreibe . Das Layout und Grundgerüst der Interntseite hat vor mir eine Agentur erstellt die jetzt ( leider ) nicht mehr "greifbar" ist, und ich muss mich weiter durchwühlen - wenn die Testoberfläche steht werde ich mich wieder melden über das Forum hier... dankeschön!

audio_uwe
Beiträge: 4
Registriert: Di 10. Jun 2014, 15:46
Wohnort: Siegen/Freudenberg
Kontaktdaten:

Re: Hallo / Responsive Design (Erste Schritte )

Beitrag von audio_uwe » Di 17. Jun 2014, 16:40

Hallo Zusammen,
und weiter gehts/ Responsive geht in die nächste Runde;
gibt es eine gute Vorgehensweise beim Schritt für Schritt anpassen? Ich habe bei meiner umzustrickenden Seite jede Menge Module, Templates und Layouts...
und jede Menge CSS Styles ( Sliderstyle, Style.css usw. ) . Mir fehtl so ein wenig der Anstoß wo und wie ich jetzt taktisch klug anfange und wie ich die Media-Queries schnell und vor allem sauber
plaziere...
Wie würdet Ihr anfangen? Wie geht man vor?
Auf jden Tip freue ich mich..

McHubi
Beiträge: 1005
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Hallo / Responsive Design (Erste Schritte )

Beitrag von McHubi » Mo 23. Jun 2014, 15:20

Hallo Uwe,

1. Frage: Welche Version von Contenido nutzt Du? Wenn es die 4.8er ist: schau mal in punkto Hilfe in meine Signatur. Für die 4.9er kommt da künftig auch noch was. (Falls sich jemand wundert: Ja, diese Hinweise sind von 4fb freigegeben.)
2. Grundsätzliche Vorgehensweise, unabhängig von der Version:
a) Erstelle ein reines HTML-Layout sowie die CSS-Datei "standard.css" mit den grundsätzlichen CSS-Klassen inkl. der Media-Queries (was Du ja schon von mir als Beispiel bekommen hast).
b) Erstelle eine weitere CSS-Datei "module.css" und binde sie wie die "standard.css" im <head> des Layouts ein. Dort hinterlegst Du die für von Dir genutzten Module notwendigen CSS-Klassen. Mach nicht den Fehler und kopier einfach alle CSS-Klassen des Demomandanten. Davon wirst Du zahlreiche Klassen gar nicht benötigen - was die CSS-Datei(en) unnötig kompliziert und unsauber macht.
Anfang
->neuen Container in Layout einfügen
->Modul in den Templates/Vorlagen dem Container zuweisen
->CSS-Klassen des Moduls vom Demomandanten in CSS-Datei kopieren
->Artikel mit dem entsprechenden Template/der Vorlage ggf. mit neuen Inhalten füllen oder bearbeiten
->Artikel im Frontend begutachten und ggf. CSS-Klassen und/oder Layout anpassen
->wieder auf Anfang

Du tastest Dich also Stück für Stück vor. Der Rest ist "Erfahrungssache".
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Die NEUAUFLAGE des Buchs zur Version 4.9: CONTENIDO für Einsteiger (4.9)

audio_uwe
Beiträge: 4
Registriert: Di 10. Jun 2014, 15:46
Wohnort: Siegen/Freudenberg
Kontaktdaten:

Re: Hallo / Responsive Design (Erste Schritte )

Beitrag von audio_uwe » Mo 30. Jun 2014, 11:18

TOP !
Danke , genau das ist der Anstoß den ich gebraucht habe...
zur Zeit sind wir hier dabei das neue Cointenido 4.9er aufzusetzen - dazu haben wir einen Testserver angelgt auf dem ich mich dann austoben kann :-)
( tolles Forum hier - nochmals vielen Dank )

Antworten