Entscheidungshilfe bei Desgin

Madmaxx89 · #1 (**permalink**) 21.01.2013, 17:55

Hallo Liebe Forumsgemeinde,

zuallererst will ich mich mal kurz Vorstellen ich bin der Maximilian und hoffe auf gute und schöne Diskussionen.
Zu meinen Referenzen die sind dann mal gleich null!

Beschäftige mich nun seit ein paar Wochen mit HTML, CSS, PHP und JQuery!
Habe auch schon eine Seite gebastelt (BV Hohenfels)
Nun will ich mir eine Seite erstellen die ich dann als Template nutze!
Habe jetzt lange im Internet geforscht den ich wills diesmal halbwegs professionell angehen! Es geht um verschiedene Darstellungen bei verschiedenen Auflösungen dazu wollte ich die Media Queries verwenden!
Das die Seite praktische auf nem Handy anders aussieht aber gut lesbar und nicht vertikal Scrollbar!
Natürlich gibt es da genügend Informationen im Internet!
mal abgesehen von den media queries hab ich auch dieses hier gefunden Layout 29
ich wollte das nachbauen also leicht abgeändert und habs mit ProtoFluid getestet jedoch haut es nicht hin!

Aber zuvor ich mein Problem genauer Schildere erst mal eine grundsätzliche Frage, was ihr davon haltet oder was mehr oder weniger Professionell ist natürlich hat relativ und absolut seine Vor-und Nachteile!

Mit freundlichen Grüßen
der Max

MrMurphy · #2 (**permalink**) 21.01.2013, 21:08

Hallo,

professionell oder auch nur auf dem aktuellen Stand der HTML5/CSS3-Technik sind leider beide Beispielseiten nicht. Da scheinen dir noch wichtige Grundlagen zu fehlen.

Das die Seite "Layout 29" nicht von dir ist, ist mir klar. Aber mit einem entsprechenden Vorwissen würdest du die niemals als Vorlage aussuchen.

Mit den in den beiden Beispielen gezeigten Fähigkeiten und Möglichkeiten kannst du Hobbyseiten erstellen, mehr sehe ich zur Zeit nicht. Oder halt Seiten für Leute, die in dem Bereich Website gar keine Ahnung haben.

Aber du hast offensichtlich noch nicht alles geschildert, was eine Beurteilung natürlich erschwert.

Das ist kein objektives Urteil, sondern meine ganz persönliche Meinung.

Gruss

MrMurphy

Madmaxx89 · #3 (**permalink**) 21.01.2013, 21:37

Das der erste Link nicht professionell ist, ist mir auch klar.. ist immerhin meine erste Seite!
Der zweite Link das das Layout aucht nicht aktuell ist ist mir auch klar! Deshalb ja meine Frage was ist aktuell und professionell??
Layout Relativ oder Absolut und wie die Umsetzung das die Anzeigen auch für Unterschiedliche Auflösungen ansehbar ist?

efwe · #4 (**permalink**) 21.01.2013, 23:19

Zitat:

Zitat von Madmaxx89

... Layout Relativ oder Absolut und wie die Umsetzung das die Anzeigen auch für Unterschiedliche Auflösungen ansehbar ist?

vielleicht kannst du mit diesem link etwas anfangen?: Responsive Webdesign (1) - Webwork

Thielo · #5 (**permalink**) 22.01.2013, 08:46

Hier meine persönliche Meinung: responsive Design ist so ne Sache. Du hast drei Möglichkeiten:

- eine weitere Seite mit den selben Inhalten, jedoch einem anderen Design. U.U. Wenn via cms gelöst auch selbe Seite anderes Theme

- die gleiche Seite mit einem anderen CSS (Media queries)
Da solltest du jedoch beachten, das du Weißt was du tust.
Das soll nicht negativ klingen, aber du musst dafür u.U. das komplette Mark-Up umschreiben und du solltest auch schon ein Design entwickeln. Wenn man es responsive macht, dann dauert es auch.

- die letzte Möglichkeit: es so lassen.
Hast du wirklich so viel Inhalt, als das es sich lohnt noch ein RD einzubauen, oder gar eine 2. Version anzubieten?

Vielleicht reicht es auch einfach das derzeitige CSS anzupassen und die Seite simpler zu gestalten. Danach kann man immer noch "responsive" denken oder zumindest Ansätze einbringen.

lottikarotti · #6 (**permalink**) 22.01.2013, 11:15

Guten Morgen,

Zitat:

Zitat von Madmaxx89

Das der erste Link nicht professionell ist, ist mir auch klar.. ist immerhin meine erste Seite!

ein erster Schritt in eine gute Richtung wäre der Blick auf die Ergebnisse des W3C-Validators: hier klicken. Scheinbar haben sich doch einige Fehler eingeschlichen. Ebenso stellt sich mir die Frage, wieso du, wenn du's schon "aktuell und professionell" haben willst, nicht den HTML5-Doctype verwendest?

HTML-Code:

<!doctype html>

Zitat:

Zitat von Madmaxx89

Der zweite Link das das Layout aucht nicht aktuell ist ist mir auch klar! Deshalb ja meine Frage was ist aktuell und professionell??

Aktuell sind HTML5, CSS3 und Ansätze wie "Mobile First". "Professionell" ist meiner Meinung nach ein sehr dehnbarer Begriff - auch eine Seite die nicht responsive ist, kann professionell aufgebaut sein.

Zitat:

Zitat von Madmaxx89

Layout Relativ oder Absolut und wie die Umsetzung das die Anzeigen auch für Unterschiedliche Auflösungen ansehbar ist?

Responsive Design ist letztlich das Stichwort. Allerdings ist meiner Meinung nach ein sicherer Umgang mit HTML und CSS unumgänglich, wenn man diese Technik erfolgreich einsetzen möchte. Du solltest dich - bevor du dich mit komplexen Bereichen auseinandersetzt - in die Grundlagen einlesen und einarbeiten. Hierbei greift dir Little Boxes unter die Arme. Anschließend kannst du dir Gedanken darüber machen, wie deine Seite aufgebaut sein soll und welche Techniken zum Einsatz kommen. Um den bösen Fall, das Markup komplett umschreiben zu müssen (wie Thielo bereits schrieb) zu vermeiden, ist eine gute Planung vonnöten. Wenn du weißt, was dein Ziel ist, kannst du dein Markup auch entsprechend aufbauen.

In diesem Sinne, frohes lernen!

Mit freundlichen Grüßen,
lotti

Madmaxx89 · #7 (**permalink**) 22.01.2013, 17:58

Erst mal Danke für die Tipps und die Beteiligung!

Ich glaube ihr habt mich falsch verstanden, diese Seite BV Hohenfels war mein erstes Projekt und ist abgeschlossen für mich! Alleine schon die Tatsache das es nicht UTF-8 codiert ist, ist mir sogar mittlerweile klar das das nicht aktueller Stand der Dinge ist! Ich möchte eben eine neue Seite machen und die würde ich gerne ansatzweise Professioneller angehen.. darunter verstehe ich das ich nicht einfach drauf los tippe wie bei der ersten Seite! Ich habe inzwischen mehrere kleine Projekte probiert und denke das es wieder Zeit ist für was größeres! Ich mache das ja um zu Lernen!
Und Ja Responsive Design ist das Stichwort das ich gesucht habe!!

Anbei der HTML aufbau! Ist der nun Aktuell oder halbwegs professionell? Nicht das ich da gleich auf dem falschen Dampfer bin!! Natürlich ist das eigentlich nur der Head!

HTML-Code:

<!DOCTYPE html>
<html>
 <head>
	 <meta charset="UTF-8" />
	 <meta name="keywords" content="" />
	 <meta name="description" content="" />
	 <meta name="author" content="" />
	 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
	 <!--[if IE lte 9]>  
	 <link rel="text/javascript" src="js/modernizr.custom.js" media="">
	 <![endif]-->
	 <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> <!-- Standard CSS -->
	
	<link rel="stylesheet" type="text/css" href="css/smartphones.css" media="screen and (max-width: 350px)" /> <!-- Smartphones -->
	<link rel="stylesheet" type="text/css" href="css/netbooks.css" media="screen and (min-width: 350px) and (max-width: 950px)" /> <!-- Netbooks -->
	
	 <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
	 <script type="text/javascript" src="js/protoFluid3.02.js"></script>
	 <script type="text/javascript" src="js/equalcolumns.js"></script>
	 <script type="text/javascript" src="config/defines.js"></script>
	 
	 <title>Test</title>
	 
 </head>
 <body>
 <div id="outer_wrapper">
	<div id="inner_wrapper">
		<div id="header">
		Header
		</div> <!-- Ende header -->
		
		<div id="content">
		content
		</div> <!-- Ende content -->
		
		<div id="footer">
		footer
		</div> <!-- Ende footer -->
	</div> <!-- Ende inner_wrapper -->
 </div> <!-- Ende outer_Wrapper --> 
 </body>
</html>

jetwes · #8 (**permalink**) 22.01.2013, 18:11

Wenn du dich schon mit html5 auseinandersetzt, dann solltest du auch die entsprechenden Tags verwenden.
Beispiel:

anstatt

HTML-Code:

<div id="header">
		Header
		</div> <!-- Ende header -->

solltest du

HTML-Code:

<header>
  <p>Header</p>
</header>

verwenden.

Schau mal hier rein - da ist ein einfaches Beispiel...

Gruß

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
div table like desgin	Dragonfire	(X)HTML	19	12.05.2012 14:53
Entscheidungshilfe Bewerbungshomepage	Deffcon	Site- und Layoutcheck	9	23.04.2010 23:51
Definition: Desgin, Konzept oder Layout	laborix	Offtopic	5	06.05.2009 19:06
Desgin / Layoutcheck	claude	Site- und Layoutcheck	5	21.11.2004 00:28