Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 19. September 2010 16:32

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Nützliche Links für Webdesigner

Da immer wieder Fragen zum Layout kommen, die eher allgemeiner Natur sind und häufig ahnen lassen, dass der Fragende über keinerlei Erfahrungen im Bereich Webdesign verfügt, hier eines vorab:

  • CMS Made Simple nimmt einem nicht die Aufgabe des Webdesigners ab.

  • Es ist ein Content Management System. Diese dienen zur Verwaltung von Inhalten.

  • Es bedeutet nicht "Website Made Simple".

Natürlich kann man mit den mitgelieferten Standard-Templates bzw. den Templates, die hier zum Download bereit stehen, schnell und einfach eine Webseite ohne Webdesign-Kenntnisse erstellen. Möchte man aber Änderungen am Layout vornehmen oder selbst ein Template erstellen, sind Grundkenntnisse im Bereich HTML und CSS zwingend erforderlich.

Im folgenden daher eine Liste mit nützlichen Links zu diesem Thema im weitesten Sinne, die gern erweitert werden kann:

Damit solltet ihr für das eine oder anderen Probleme schneller eine Lösungen finden wink.


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#2 16. November 2010 19:10

Tobias_Gl
probiert CMS/ms aus
Ort: Siegen
Registriert: 09. November 2010
Beiträge: 69
Webseite

Re: Nützliche Links für Webdesigner

Eine weitere schöne Quellst ist:
http://standards.webmasterpro.de/index- … Hacks.html
Dort werden Wege gezeigt um durch selektoren den Internet Explorer bzw. alle außer den Internet Explorer anzusprechen. Somit kann man gezielt die Browser beeinflußen und deklarieren.
Ansonste gibt es ja noch den Weg über Conditional Comments
http://de.wikipedia.org/wiki/Conditional_Comments

Einige Bekannte Hacks wurden auch in YAML eingebracht und dort behoben. Im YAML Buch ist dies sehr gut erklärt auf der Webseite findet man immerhin einige Wege um die bekanntesten Bugs zu beheben.

http://www.yaml.de/de/dokumentation/css … ungen.html

Offline

#3 16. November 2010 21:44

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Danke für deine Ergänzung!


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#4 22. März 2011 02:19

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.137

Re: Nützliche Links für Webdesigner

Da man die meisten Themen und Beiträge im .org-Forum, die von ehemaligen Mitgliedern erstellt wurden nicht direkt verlinken kann, füge ich hier mal weiter ein, was wir drüben schon geschrieben haben:

Was heutzutage natürlich bei kaum einem Layout mehr fehlen darf, sind Grafiken bzw. ganz genau genommen Icons.
Und sei es nur, um im Menü anzuzeigen, dass dieser oder jener Punkt gerade aktiv ist oder Unterunkte enthält.
Darüber haben wir hier ja noch garnichts gebracht.
Bin gerade aktiv auf der Suche nach kostenlosen Icons für eine Webseite und bin bisher über folgende interessante Seiten gestolpert.

Dr.Web:
http://www.drweb.de/magazin/symbole-but … -download/

Suchmaschinen speziell für Icons
http://www.iconfinder.net
http://www.iconlook.com
http://www.iconlet.com
http://icons-search.com
http://www.easyiconfinder.com

Offline

#5 22. März 2011 02:26

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.137

Re: Nützliche Links für Webdesigner

Nützliche Tools

Zwar schon mehrfach im Forum erwähnt, aber irgendwie doch nicht allen bekannt. .  .

Nummer eins: Firefox
Das ist nicht nur ein Tool, sondern ein verdammt guter Web Browser, der sich durch verschiedene AddOns um sehr nützliche Funktionen erweitern lässt.
Im folgenden einige ausgewählte Firefox AddOns:

Firebug
Damit kann man jedes Element genau analysieren und dessen Eigenschaft - wie z.B. Stylesheets - ändern und das Resultat im Browser testen.
Die Änderungen werden nicht gespeichert sondern gelten nur für aktuelle Anzeige im Browser.
Ist man mit dem Resultat zufrieden, kann man die Stylesheets kopieren und in sein Seiten Styleshet einfügen.

Pixel Perfect
Ist eine Erweiterung für Firebug. Damit kann man ein Bild (z.B. ein Screendesign) als transparentes Bild über seine Seite legen und dann die Stylesheets seiner Seite auf den Pixel genau an das Bild anpassen.

Web Developer
Ein kleines Tool mit verschiedenen Werkzeugen.
Auch hier kann man sich verwendete Stylesheets anzeigen lassen, diese manipulieren und sich das Ergebnis als Vorschau im Browser ansehen.
Man kann Grafiken deaktivieren und sich ein Bild davon machen wie die Seite aussieht, falls die Grafiken (aus welchem Grund auch immer) nicht geladen werden können und vieles mehr.

HTML Tidy
Zeigt Validierungfehler an und bietet die Möglichkeit eine bereinigte HTML Version auszugeben.

Offline

#6 22. März 2011 02:26

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.137

Re: Nützliche Links für Webdesigner

Nachtrag:

Inzwischen sind die Browser Safari, Chrome bzw. Chromium, Opera und sogar Internet Explorer (zuminedst ab Version 8 ) ebenfalls ganz gut zu gebrauchen und bieten ebenfalls Werkzeuge, die ähnlich dem Firebug das genaue Inspizieren von HTML Elementen ermöglichen. Insbesondere in Hinsicht auf HTML 5 sollte man sich nicht mehr allzusehr stur auf den Firefox verlassen, sondern auch mal andere Browser (allem voran Chromium) zu Rate ziehen.
Ich persönlich neige bei der Entwicklung in letzter Zeit eher dazu, mich auf die Darstellung im Safari und IE zu verlassen, da diese etwas restriktiver bei Fehlerkorrekturen im Makup zu sein scheinen. Invalides Markup wird man dort eher zu Gesicht bekommen als im Firefox.

Offline

#7 22. März 2011 02:28

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.137

Re: Nützliche Links für Webdesigner

Weitere Nuetzliche Firefox-Plugins:
z.b. Validator Damit man auch alle html fehler finden kann. 
Ausserdem waehre vielleicht noch Dust-Me Selectors zu nennen. Das Tool findet ungenutzten CSS code in eingebundenen CSS Files. Wenn man eine Sitemap.xml angelegt hat (natuerlich habt ihr das alle gemacht *G*) kann man auch alle seiten auf einmal durchforsten lassen. SEHR praktisch.

Offline

#8 01. September 2011 18:28

noober
arbeitet mit CMS/ms
Registriert: 26. April 2011
Beiträge: 151

Re: Nützliche Links für Webdesigner

Hier gibts viele Trends, Tips und Tricks rund um Arbeit als Webdesigner und Designer, Webdesign, Coding usw. definitiv ein Bookmark wert:
http://www.smashingmagazine.com


Webdesign Tips & Tricks
http://webdesignerwall.com/

Webdesign Tips & Tricks
http://www.grammiweb.de

Schriften aller Art:
http://new.myfonts.com

Systemschriften im Vergleich + entsprechender CSS
http://www.typetester.org

Offline

#9 12. Juni 2012 09:09

faglork
CMS/ms-Profi
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.151
Webseite

Re: Nützliche Links für Webdesigner

Wer mal ein paar Inspirationen braucht, was heute mit CSS möglich ist:

http://www.csszengarden.com/

--> ist immer dieselbe Seite, nur das Stylesheet ist jeweils anders.

Viele sehr interessante und brauchbare Artikel (englisch):
http://www.alistapart.com/
http://www.456bereastreet.com/
http://meyerweb.com/


Servus,
Alex

Offline

#10 26. November 2014 21:01

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Hier wieder mal ein Link zum Thema CSS (in englisch) - eine Anleitung, wie man saubere, einfach zu handhabende und skalierbare CSS schreibt

http://cssguidelin.es


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#11 29. November 2014 23:31

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.075
Webseite

Re: Nützliche Links für Webdesigner

Danke Super Thread,
da gibt vieles das ich noch nicht kenne.

http://www.google.com/fonts
kann ich noch dazu geben

MfG
Jan


Ubuntu 16.04 mit KDE - LAMP

Offline

#12 29. Januar 2015 23:25

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Noch ein Link - wieder zu CSS, dieses Mal ein Spickzettel zu den CSS-Feinheiten

http://t3n.de/news/erste-hilfe-css-590621/


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#13 17. Februar 2015 23:32

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Twitters Bootstrap - wer kennt es nicht?! Ist es doch eines der am häufigsten genutzten CSS-Frameworks der Welt.

Hier eine Sammlung der besten (kostenlosen) Bootstrap Themes

http://t3n.de/news/kostenlose-bootstrap-themes-593928


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#14 17. Februar 2015 01:12

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.075
Webseite

Re: Nützliche Links für Webdesigner

http://www.htmllion.com/templates.html
Freie responsive templates

MfG
Jan


Ubuntu 16.04 mit KDE - LAMP

Offline

#15 17. Februar 2015 08:39

kampkrusty
Server-Pate
Registriert: 03. April 2011
Beiträge: 263

Re: Nützliche Links für Webdesigner

Janl schrieb:

http://www.htmllion.com/templates.html
Freie responsive templates

MfG
Jan

Ich weiß, "einem geschenkten Gaul..." usw., aber die Seiten sind doch alle gleich im Aufbau, oder guck ich schief?


ff-jena-mitte.de

Offline

#16 17. Februar 2015 09:01

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.137

Re: Nützliche Links für Webdesigner

Ich weiß, "einem geschenkten Gaul..." usw., aber die Seiten sind doch alle gleich im Aufbau, oder guck ich schief?

Und?
Da Du in einem anderen Thema nach Beispielen für Media-Queries fragst, sollte genau das Dein Einstieg sein, um das Prinzip zu verstehen.

Ansonsten gäbe es da noch http://mediaqueri.es/
Da kann man sich auch noch eine Menge Inspiration holen.

Offline

#17 17. Februar 2015 09:04

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.075
Webseite

Re: Nützliche Links für Webdesigner

@Kampkrusty,

am Untenseite sind noch Links mit weitere CSS Instruktionen.
Stimmt, Templates sind nicht gerade spannend aber sehr ordentlich so zu sehen.

MfG
Jan


Ubuntu 16.04 mit KDE - LAMP

Offline

#18 27. Juni 2015 14:17

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.075
Webseite

Re: Nützliche Links für Webdesigner

Hier mal ein responsive Design das man in 1.11 und 1.12 so nutzen kann.
XML-Datei laden als Theme.
Wenn ich bei org wieder hoch laden kann geht es auch da.
Life auf http://stajl.xyz

MfG
Jan

responsive6.zip


Ubuntu 16.04 mit KDE - LAMP

Offline

#19 28. Juni 2015 17:54

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Danke fürs Einstellen hier ... erinnert mich daran, dass für die .de eine eigene Theme-Sektion auch nicht schlecht wäre.


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#20 06. Juli 2015 07:22

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Hier mal ein ergänzender Link zu einem CSS-RGBA-Generator für die Berechnung von Farb-Transparenzen

http://www.css3-generator.de/rgba.html


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#21 06. Oktober 2015 10:04

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Interessant - hat doch die US-Regierung einfach mal so einen Webdesign-Standard für deren Behörden festgelegt wink

https://playbook.cio.gov/designstandards/

natürlich mit voller WCAG 2.0 Kompatibilität. In DE als #Neuland undenkbar tongue ...


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#22 06. Oktober 2015 14:07

faglork
CMS/ms-Profi
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.151
Webseite

Re: Nützliche Links für Webdesigner

Zugänglichkeit: Mythen und falsche Vorstellungen

https://yatil.de/zugaenglichkeit-mythen … tellungen/


Servus,
ALex

Beitrag geändert von faglork (06. Oktober 2015 14:08)

Offline

#23 02. November 2015 00:29

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Hier wieder mal eine Regelsammlung für (besseres) HTML, CSS und JavaScript

https://github.com/bendc/frontend-guidelines


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#24 19. April 2016 09:48

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Nützliche Links für Webdesigner

Um das Layout in allen Browsern einheitlich zu bekommen, werden üblicherweise Reset-Stylesheets wie zum Beispiel der von Eric Meyer eingesetzt

http://meyerweb.com/eric/tools/css/reset/

Aktuell stellte sich mir aber die Frage, mit welchen Voreinstellungen genau die gängigen Browser arbeiten - hier das Ergebnis

Firefox - https://mxr.mozilla.org/mozilla-central … s/html.css
Chrome - https://chromium.googlesource.com/chrom … s/html.css
Safari - http://trac.webkit.org/browser/trunk/So … s/html.css
Internet Explorer (ältere Versionen) - http://www.iecss.com/


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#25 26. Januar 2018 12:38

Pepe
hat von CMS/ms gehört
Registriert: 30. August 2017
Beiträge: 15

Re: Nützliche Links für Webdesigner

Das ist ja mal ein Klasse Thread, der mir jetzt erst auffällt.


Niveau sieht nur von unten aus wie Arroganz.

Offline