Die Qual der Wahl mit den CSS Einheiten px vs. em vs. %

Eine Frage, die oft gestellt wird, wenn man mit CSS arbeitet ist die Wahl der richtigen CSS Einheit bei den Größenangaben. Es gibt hier px, cm, %, em, rem,ex und viele mehr. Was haben diese  CSS Einheiten zu bedeuten und wann verwendet man diese? Diese Frage betrifft nicht nur User, die direkt CSS Code schreiben, sondern auch Anwender von Visual Tools wie Dreamweaver & Co. In diesem Artikel möchte ich diese Fragen klären.

(mehr …)

Kategorien: CSS, Web und Web Design.

Adobe Muse – eine Alternative zu Dreamweaver?

In den letzten Blogbeiträgen habe ich einiges zu Dreamweaver geschrieben, vor allem, wie man mit der neuesten Version von Dreamweaver einfach responsive Websites erstellen kann. Adobe hat aber noch weitere Produkte im Programm um Webseiten zu erstellen. Eines dieser Produkte ist Adobe Muse. Was aber kann dieses Produkt und wie unterscheidet es sich von Dreamweaver.

Einer der wesentlichsten Unterschiede ist, dass Muse ist im Gegensatz zu Dreamweaver ein echtes WYSIWYG Tool ist, bei dem man seine Website mit Drag an Drop zusammen bauen kann. Man hat dabei keinerlei Berührung mit HTML, CSS und Java Script. Ist ein solches Tool aber wirklich für den praktischen Einsatz brauchbar und wie sieht es hier mit der Unterstützung mobiler Geräte aus? Diese Fragen werde ich in diesem Artikel beantworten.

(mehr …)

Kategorien: Web Design.

Responsive Design mit Dreamweaver CC 2015 und Bootstrap Tutorials – Teil 3 und 4

Vor einigen Tagen habe ich den ersten und zweiten Teil meiner neuen Tutorial Serie „Responsive Design mit Dreamweaver CC 2015 und Bootstrap“ online gestellt. Jetzt ist es soweit – die Teile 3 und 4 sind ebenfalls online. Da Adobe bei der Erstellung von responsive Websites auf das Framework Bootstrap umgestellt hat, hat sich bei der Erstellung einer responsive Site doch einiges – zum Glück zum Vorteil verändert. Die Tutorial Serie zeigt Schritt für Schritt, wie man dabei vorgeht. In den Teilen eins und zwei wurden die Grundlagen erklärt und das Basis Gridsystem in Dreamweaver erstellt. In den Teilen drei und vier geht es um die Inhalte, im speziellen um das Einfügen verschiedenster Elemente und das anschliessende Formatieren.

(mehr …)

Kategorien: Allgemein, Trainings, Tutorials und Web Design.

Responsive Design mit Dreamweaver CC 2015 und Bootstrap Tutorials – Teil 1 und 2

In meinem Artikel „Warum du mit Dreamweaver CC jetzt endlich rasch und einfach responsive Websites erstellen kannst“ habe ich die Neuerungen von Dreamweaver bei der Erstellung von responsive Websites vorgestellt. Jetzt gibt es die versprochenen Tutorials. Im ersten Teil stelle ich vor, wie responsive Gridsysteme arbeiten und wie Bootstrap bei der Erstellung von Gridsystemen funktioniert. Im zweiten Teil zeige ich dann, wie man dieses Gridsystem praktisch mit Dreamweaver erstellt und an die unterschiedlichen Device Größen anpasst.

(mehr …)

Kategorien: Trainings, Tutorials und Web Design.

Warum du mit Dreamweaver CC jetzt endlich rasch und einfach responsive Websites erstellen kannst

Die Zeiten der Speziallösung für responsive Websites in Adobe Dreamweaver sind vorbei. Adobe hat scheinbar erkannt, dass es besser ist auf Standards zu setzen statt mit Druck eigene Lösungen die nur Probleme bereiten einzuführen.

Dreamweaver hat für responsive Websites bisher immer eine eigene CSS Datei erstellt in der alle Regeln über Position und Größe der Elemente bei unterschiedlichen Breiten definiert waren. Eine Wiederverwendung der CSS Datei für andere Seiten im selben Projekt war nur schwer möglich. Scheinbar hat Adobe erkannt, dass dieser Weg dringend verbessert werden musste. Das Ergebnis ist nun in der aktuellen Version Dreamweaver CC.2015 zu sehen.

(mehr …)

Kategorien: Web Design.

Mobile Websites mit jQuery Mobile und Dreamweaver erstellen

Neben dem responsive Webdesign ist das Erstellen von „echten“ mobilen Websites eine weitere Möglichkeit Inhalte für mobile Nutzer aufzubereiten.

Beim Responsive Design wird eine Website bei unterschiedlichen Größen dem Medium angepasst, aber immer der selben Inhalte darstellt. Anders wird bei „echten“ mobilen Websites eine eigene mobile Version erstellt, die in Inhalt und Layout für das mobile Erlebnis ausgelegt sind.

Zum Erstellen einer solchen mobilen Websites gibt es mittlerweile eine Menge unterschiedliche  Frameworks. Eines der bekanntesten ist jQuery Mobile. Gerade in Zusammenarbeit mit Dreamweaver bietet sich dieses Framework ideal an, da Dreamweaver viele Funktionen zum Erstellen und zur Bearbeitung bereitstellt.

In meinem mehrteiligen Videotutorial zeige ich, wie von Grund auf eine mobile Website auf Basis von jQuery Mobile erstellt und mittels Themeroller designed wird. Dabei wird in diesem Training ein komplettes kleines Webprojekt umgesetzt.
(mehr …)

Kategorien: Mobile, Mobile Development, Trainings, Web Design und Web Development.

Responsive Websites mit Dreamweaver erstellen

Responsive Webdesign war einer der Webdesign Trends 2013 und ist immer noch ein aktuelles Thema. Responsive Design wird bald kein Trend mehr sein, sondern normaler Alltag im Webdesign. Zunehmend wird das Internet mobiler und kaum ein Website Betreiber wird es sich in Zukunft leisten können auf diese mobilen Nutzer zu verzichten. In manchen Bereichen ist der mobile Zugriff bereits jetzt schon höher als der von Desktopgeräten. Umso mehr müssen sich Webdesigner dafür rüsten diese neue Technik auch für Ihre Projekte umsetzen zu können.

Mit Adobe Dreamweaver ist dies bereits seit einiger Zeit möglich. Wie es genau funktioniert zeige ich in meinem 2 teiligen Videotraining.

(mehr …)

Kategorien: Trainings, Tutorials, Web Design und Web Development.