Kategorien
Responsive Design

WrapPixel – Kostenlose und Premium Dashboard-Templates

Als Gestalter bist du immer auf der Suche nach guten Templates. Sei es als Inspiration oder zum sofortigen Einsatz. WrapPixel hat dabei den Webdesigner, Developer und auch Agenturen im Blick, denen es nach qualitativ hochwertigen Ressourcen verlangt, um sich das Leben zu erleichtern und viel Zeit zu sparen. Jeden Monat kommen bei WrapPixel neue Inhalte dazu, so wird es versprochen. Dabei reicht das Spektrum von preisgünstig bis kostenlos. Allemal gibt es hier so einige Dashboard-Templates zum Mitnehmen. Versprochen!

Dashboard-Templates

Im Bereich der Admin Templates gibt es einige kostenlose und Premium Bootstrap Admin Templates zu entdecken. Die Preise reichen dabei von 12,- bis 18,- Dollar. Auch hier bietet sich die Live Demo an, um sich schnell von der Qualität zu überzeugen. Jedes Dashboard kommt in drei Varianten, ist komplett „Responsive“ umgesetzt und bietet zahlreiche Extras. So sind tausende Icons enthalten, verschiedenste Demos, hunderte Beispielseiten und UI-Elemente sowie Farbschemata in einigen Ausführungen.

Dashboard-Templates

Ob Mini Sidebar, MegaMenu, Range Slider, stylische Tooltips, Tabs oder Treeview: aktuelle Techniken werden hier umgesetzt. Und das ist auch kein Wunder, denn die Templates wurde erst am 10. März 2017 erstellt und haben schon am 28. März 2017 das erste Update erhalten. Die Vorlagen basieren auf Bootstrap in der Version 3.3.7. Als Dateien wurden alle PSDs, HTML, JS und CSS verpackt. Das Layout ist Responsive gehalten (ausgelegt auf IE10+, Firefox, Chrome, Safari und Edge) und gut dokumentiert. Ich empfehle, die kostenlosen Angebote zu testen.

Photoshop-Grundlagen

Als Photoshop-Fan geht mein erster Klick auf der Homepage natürlich auf den Menüpunkt PSD Bundle. Dahinter verbirgt sich ein ganzes Paket an hochwertigen Vorlagen. Mehr als 140 Templates sind derzeit in dieser Kollektion enthalten. Für den einzelnen Nutzer werden dafür günstige 29,- Dollar verlangt, für mehrfache Nutzer mit 89,- Dollar nicht viel mehr. Die Schaltfläche „View Live Demo“ ruft zur Werkschau auf. Und dann dauert es etwas, bis die über 140 Beispiele geladen wurden. Ein Klick auf die Vorschau ruft das jeweilige Template weiter unten groß auf, so dass du leicht die Qualität überprüfen kannst.

Dashboard-Templates

Bei so vielen Photoshop-Dateien gibt es immer eine große Vielfalt zu entdecken. Variationen von Anordnungen, genutzten Farben und Formen, speziellen Inhalten und selbst die Länge der einzelnen Templates variiert. Generell ist die Qualität der einzelnen Grafikvorlagen durchgehend hoch. Hier ist meine Empfehlung, dass du dich selbst einmal von dem Angebot überzeugst und dich durch die gebotenen Templates durch klickst.

Die Themes sind übersichtlich in 15 Kategorien sortiert. Von Admin-Dashboard, über Agenturen, Medizin, eCommerce, Landing Pages, Immobilien, Blogs, WooCommerce, Magazine, Prestashop bis hin zu Blogger-Templates werden also so einige Themen abgedeckt. Allen Templates ist gemeinsam, dass sie sich an dem Bootstrap Grid ausrichten und nur Google Web Fonts einsetzen.

So wird gewährleistet, dass die Umsetzung der Grafiken in eine funktionstüchtige Website auch leicht gelingen kann. Man merkt an allen Ecken und Kanten, dass in die Produktion viel Zeit und Ideen geflossen sind.

Freebies

Und auch wenn so einige Freebies zwischen den kommerziellen Angeboten gelistet werden, gibt es einen eigenen Menüeintrag mit diesem Namen. So siehst du auf einen Blick alle kostenlosen Angebote, wie etwa Dashboard-Templates. Die Qualität ist gleich gut, was sich etwa an der Anzahl der Demos, der UI-Elemente und Fonts, der Dateien und Beispielseiten ablesen lässt, wie natürlich auch an der grafischen Umsetzung.

Manche der Produkte gibt es dann noch in einer Pro-Version mit weiteren Extras. Schnell werden also Premium-Inhalte dazu gebucht. An dem Zeitpunkt des letzten Updates kannst du weiter sehen, dass hier nicht einmalig kostenlose Gimmicks erstellt wurden, sondern der Anbieter auch seine Freebies aktuell hält.

Freebies

Service

WrapPixel verspricht ein Leben lang kostenlose Updates aller Dashboard-Templates und PSD-Dateien. Egal welches Template auch herunter geladen wurde, ob kostenlos oder Premium, du kannst dir aller zukünftigen Updates sicher sein. Wöchentlich werden weitere Produkte veröffentlicht. Bei Problemen steht dir ein 24/7 Support zur Seite. Generell wurden die Templates aber sehr sauber programmiert und dokumentiert, so dass es einfach ist, diese einzusetzen und zu individualisieren.

Über ein Kontaktformular oder dem Live-Chat, der sich in der rechten, unteren Ecke befindet, können auch Fragen vor dem Kauf gestellt werden. Die Bezahlung ist unkompliziert über Kreditkarte oder PayPal möglich. Ein Newsletter informiert über Neuerungen oder du verfolgst diese über die typischen Social Media-Kanäle, wie Facebook und Twitter.

Blog

Den Blog entdecken

Einen Blick wert ist auch das Blog. Hier gibt es von Zeit zu Zeit Giveaways, etwa mit Lizenzen zu einem Produkt. Auch informative Beiträge werden geboten, so zum Unterschied der freien zu den Pro-Versionen, zu Spezifikationen, Tipps zur Geschwindigkeit der Seite oder auch eine Übersicht der schönsten Templates für Admins 2017.

Service

Fazit

WrapPixel ist noch recht neu am Markt und so möchte das Unternehmen natürlich mit Qualität überzeugen. Genügend Konkurrenz ist vorhanden, doch WrapPixel kann dagegen halten mit zahlreichen nützlichen Extras und einem herausragenden Support. Ich empfehle, eines der kostenlosen Templates zu testen, das sich ja auch leicht nachträglich in eine Pro-Version umwandeln lässt.

So kann sich die Basis im Live-Einsatz behaupten und nur bei Bedarf erfolgt dann die Aufrüstung. Zumeist im Flat-Design gehalten und überaus anwenderfreundlich gestaltet lohnen sich allein die Photoshop-Dateien der kostenlosen Demos. Es kann nicht schaden für weitere Freebies diesen Anbieter in den Favoriten zu platzieren.

Kategorien
Design Editoren HTML/CSS Responsive Design

SITE123: Dieser Homepage-Baukasten liefert Websites im Handumdrehen

Heutige Website-Builder sind schon fast zu komplex, als dass sie sich für Otto Normalverbraucher eigneten. SITE123 geht bewusst nicht den Weg maximaler Freiheit und Featuritis, sondern legt Wert auf schnelle Resultate.

Kategorien
Design Responsive Design Webdesign

Responsive Websites erstellen mit Simbla

Die Anforderungen an eine zeitgemäße Website sind in den letzten Jahren stark angestiegen. Da Websites zunehmend mit Smartphone und Tablet aufgerufen werden, ist ein reponsives Webdesign auf der Basis von HTML5 und CSS3 mittlerweile zu einer Minimalanforderung für jede Website geworden, die sich auch nur halbwegs als zeitgemäß bezeichnen möchte. Daher gehört auch beim Website-Bilder Simbla die Erstellung responsiver Weblayouts einfach dazu.

simbla

Einfacher Start mit Template oder Wizard

Es heißt, aller Anfang sei schwer. Beim Simbla-Website-Builder ist dies definitiv nicht der Fall. Willst du eine neue Website erstellen, entscheidest du dich zunächst, ob du mit einem Template oder per Wizard anfangen möchtest. Bei den Templates stehen dir über 75 verschiedene Vorlagen zur Verfügung. Da ist für alle Branchen und Hobbys etwas dabei. So gibt es Templates für klassische Unternehmen sowie für Kreative, für gastronomische Angebote sowie für Immobilienmakler und Tierliebhaber.

Das Besondere: Alle Templates lassen sich anschließend individualisieren. Farben und Schriften passt du ebenso an wie das eigene Logo, welches du hochlädst und einbindest. Außerdem sind die Templates responsiv und setzen auf HTML5 und CSS3. Für dich bedeutet dies, dass du dir keinerlei Gedanken darüber machen musst, ob und wie deine Website auf verschiedenen Geräten aussieht.

Der Wizard: Schnell zur eigenen responsiven Website
Der Wizard: Schnell zur eigenen responsiven Website

Auch bei der Verwendung des Wizards wird stets sichergestellt, dass deine Website responsiv ist. Beim Wizard wählst du keine Vorlage für die Gestaltung. Stattdessen wählst du verschiedene Optionen, aus denen anschließend das Grundgerüst für deine Website gebaut wird. So entscheidest du dich beispielsweise, ob du eine klassische Website mit mehreren Seiten oder einen One-Pager anlegen möchtest.

Am Ende hast du eine leere Website mit entsprechenden Vorgaben und füllst diese mit Inhalt.

Responsiv vom Layout bis zum Inhalt

Hast du das Layout für deine Website festgelegt, muss diese natürlich noch mit Inhalt gefüllt werden. Dazu bietet dir Simbla zahlreiche Widgets an, mit denen du unterschiedliche Inhalte auf den Seiten deiner Website platzierst.

Unter anderem stehen dir verschiedene „Content“-Blöcke zur Verfügung, mit denen du Texte und Bilder hinzufügst. Darüber hinaus gibt es „Multimedia“-Blöcke, die es dir erlauben, Fotogalerien oder Videos in deine Website einzubinden.

Bild-Text-Komposition per Widget einfügen
Bild-Text-Komposition per Widget einfügen

Natürlich sorgt Simbla bei allen Inhalten dafür, dass auch diese responsiv dargestellt werden. So werden Text-Bild-Kompositionen, die in der Desktopansicht nebeneinander angeordnet sind, bei Smartphones automatisch untereinander platziert. Bilder werden jeweils so verkleinert, dass sie maximal die Breite des Displays einnehmen – also nie aus dem sichtbaren Bereich hinausragen.

Wie du eine responsive Website mit Simbla erstellst, ist also keine Frage, mit der du dich an den Webentwickler deines Vertrauens wenden musst. Ganz ohne Kenntnisse in HTML5 und CSS3 legst du hier los und kannst dir sicher sein, dass das Ergebnis auf allen Geräten gut aussieht.

Mobilvorschau deiner Website
Mobilvorschau deiner Website

Im Übrigens gibt es eine Preview-Ansicht, in der du deine Website sowohl für Desktop- als auch für Mobilgeräte darstellen kannst. So wechselst du spielend zwischen einzelnen Geräteansichten und siehst immer genau, wie deine Website auf den unterschiedlichen Geräten aussieht.

Interaktionen mit Online-Datenbank

Eine weitere Besonderheit von Simbla ist die Möglichkeit, eine Online-Datenbank anzulegen und Inhalte daraus auf deiner Website darzustellen. Auch hierbei setzt der Website-Builder keinerlei Kenntnisse in Datenbanken voraus.

Hast du eine Datenbank angelegt, erstellst du eine Tabelle und legst Spalten für einzelne Werte an. Anschließend kannst du beliebig Datensätze erstellen. Das kann ein Produktkatalog oder eine Linkliste sein. Neben einfachen Texten und Zahlen hinterlegst du in deinen Tabellen auch Bilder, HTML-Quelltext und GPS-Koordinaten.

Schnell und einfach eine Online-Datenbank anlegen
Schnell und einfach eine Online-Datenbank anlegen

Über eine spezielle, automatisch angelegte Tabelle, legst du Benutzer an, die sich anschließend über ein Login-Formular in einem geschützten Bereich deiner Website anmelden können. Somit kannst du beispielsweise deinen Kunden ein spezielles Informations- und Serviceangebot anbieten, welches anderen Besuchern deiner Website vorenthalten bleibt.

Wer bereits große Datenmengen hat und diese in die Datenbank von Simbla überführen möchte, nutzt einfach die Importfunktion. Diese erlaubt es dir, Daten als CSV-Datei zu importieren. Im Übrigen ist ein Export deiner Tabellen in eine CSV-Datei möglich.

Um Inhalte der Datenbank auf deiner Website zu nutzen, stehen dir im Website-Builder zahlreiche spezielle Datenbank-Widgets zur Verfügung. So gibt es unter anderem Login-, Logout- und Registrierungsformulare, mit denen sich Benutzer für deine Website registrieren und sich anschließend an- und abmelden können.

Datenbank-Widgets
Datenbank-Widgets

Das „Form to Database“-Widget gibt dir zudem die Möglichkeit, auf deiner Website ein Formular einzubinden, dessen Inhalte in eine deiner Datenbank-Tabellen geschrieben werden.

Natürlich kannst du den Inhalt einer Datenbank einfach als Tabelle auf deiner Website veröffentlichen. Dazu steht dir das Widget „Data Table“ zur Verfügung. Hierbei wählst du aus, welche Spalten auf deiner Website dargestellt werden sollen. Hast du Bilder in deiner Tabelle hinterlegt, bietet sich zudem das Widget „Data Gallery“ an. Mit diesem kannst du spielend einfach eine Bildergalerie mit den Bildern erstellen, die sich in einer deiner Datenbank-Tabellen befinden.

Daten einfach per Diagramm visualisieren
Daten einfach per Diagramm visualisieren

Dank des „Chart“-Widgets ist es dir sogar möglich, Diagramme zu erstellen, welche die Werte deiner Tabelle darstellen. Gerade bei Tabellen mit numerischen Werten kannst du diese sehr schön als Torten-, Balken- oder Kurvendiagramm darstellen. Auch hierbei ist die Konfiguration sehr einfach. Über ein Formular wählst du jene Spalten aus, die beispielsweise für die X- und Y-Achse eines Diagramms berücksichtigt werden sollen.

Zu guter Letzt gibt es noch das „Counter“-Widget, welches dir die Anzahl der Tabellenzeilen oder die Summe von Werten einer Spalte jeweils hochzählt.

Schnell Dashboards mit Diagrammen erstellen

Die verschiedenen Diagramm-Widgets geben dir eine schnelle Möglichkeit, Dashboards mit zahlreichen statistischen Daten zu erstellen. So kannst du fix einen Überblick über registrierte und aktive Benutzer deiner Website erstellen oder andere beliebige Werte aus deiner Datenbank visuell aufbereitet ausgeben.

Beispielhaftes Dashboard mit verschiedenen Zählern und Diagrammen
Beispielhaftes Dashboard mit verschiedenen Zählern und Diagrammen

Weder Kenntnisse in Datenbanken, noch in Programmierung oder HTML- beziehungsweise CSS-Auszeichnung sind notwendig. Und auch bei den Diagrammen wird natürlich sichergestellt, dass diese responsiv sind und auf allen Geräten und Auflösungen ansprechend und übersichtlich dargestellt werden.

Fazit

Die verschiedenen Tarife
Die verschiedenen Tarife

Simbla ist nicht nur für kleine Websites interessant, sondern ebenfalls für umfangreiche Internetpräsenzen, die auf komplexe Datenbanken und zeitgemäße Gestaltung und Technik setzen. Dabei ist alles intuitiv zu bedienen. Neben mehreren kostenpflichtigen Tarifen gibt es für den Einsieg einen kostenlosen Tarif, mit dem du all die vorgestellten Möglichkeiten bereits produktiv einsetzen kannst.

Kategorien
Design Responsive Design Webdesign

Webseiten druckerfreundlich machen und Druckkosten sparen

Verbraucher und Unternehmer entwickeln ein wachsendes Bewusstsein für Nachhaltigkeit. Einige von ihnen haben längst das Sparpotenzial im Bereich Drucken erkannt. Webmaster können diesen Menschen helfen, Druckkosten zu sparen, indem sie eine schlanke Druckversion ihrer Webseite gestalten. Was dabei zu beachten ist, zeigt der folgende Beitrag.

Druckkosten sparen

Druckkosten sparen durch gezielten Einkauf

Die wachsende Verbreitung von Smartphones und Tablets ändert wenig an dem Druckverhalten deutscher Familien. In zwei Drittel aller Haushalte wird ein- bis zweimal wöchentlich mindestens ein Dokument ausgedruckt. Für viele Verbraucher bringt der Ausdruck auf Papier ein Gefühl von Sicherheit mit. Einige wünschen sich lediglich, das Dokument mit Notizen zu erweitern oder es erfüllt gesetzliche Vorschriften. Hinzu kommt, dass Druckerangebote heutzutage Preisregionen erreicht haben, die keinerlei Kopfzerbrechen mehr bereiten.

Verbraucher müssen zum Drucken von Dokumenten allerdings regelmäßig Tinte oder Toner kaufen – eine kostspielige Angelegenheit. Der hohe Verbrauch kann verschiedene Gründe haben: Einerseits achten Menschen selten darauf, wie viel Tinte oder Toner ihr Drucker verbraucht. Auf der anderen Seite verzichten viele Verbraucher auf Sparmöglichkeiten, weil sie ihnen nicht bekannt sind. Sparsam sind spezielle Produkte, wie sie auf tonerpartner.de in Form von kompatiblen oder recycelten Druckerpatronen zu finden sind. Bei Ersteren handelt es sich um hochwertige Nachbauten, die zum jeweiligen Druckermodell passen, aber weniger als Originaltoner kosten. Recycelte Kartuschen sind rekonditionierte oder wieder befüllte Patronen.

Hohen Druckkosten beim Verbraucher können jedoch auch konzeptionell schon vermieden werden. Webmaster können einen Beitrag leisten, indem sie schlanke Druckversionen ihrer Webseite anbieten.

Webseiten werden immer aufwändiger

In der Anfangszeit des World Wide Web waren Webseiten sehr simpel gestaltet: Ein Großteil der Onlinepräsenzen bestand überwiegend aus Text. Die Navigation erfolgte mithilfe einer simplen Liste mit Verlinkungen.

Durch die rapide Entwicklung des Internets sind Webseiten heute immer aufwändiger und funktionsreicher. Hinzu kommen Werbeanzeigen, die zahlreichen Projekten im Internet als Finanzierungsmöglichkeit dienen. Viele Elemente einer Webseite sind auf einem Ausdruck nicht gewünscht. Einerseits stören sie den Lesefluss, andererseits verbrauchen sie unnötig Tinte oder Toner.

Wer eine Webseite ausdruckt, interessiert sich in den seltensten Fällen für das Design oder Layout, sondern den Inhalt – meist ein bestimmter Artikel. Der Besucher des Portals möchte folglich nur die Textpassage ausdrucken, also die Überschrift, die Zwischenüberschriften, alle Textabschnitte, Fußnoten, Tabellen und andere Bereiche, die zum Artikel gehören. Der Rest ist für ihn uninteressant.

Eine geeignete Druckversion auswählen

Webmaster haben die Möglichkeit, eine spezielle Druckversion für ihre Webseite zu realisieren, die unerwünschte Teile entfernt. Dabei müssen sie wissen, dass es verschiedene Möglichkeiten gibt, eine Druckversion zu realisieren. Des Weiteren ist ein wichtiger Hinweis zu beachten: Kunden, die Anzeigen schalten, wünschen sich oftmals, dass diese auch in der Druckversion erscheinen. Auch das Firmenlogo darf nicht immer ohne Rücksprache mit den Verantwortlichen ausgeblendet werden.

Generell erfolgt die Ausgabe einer Druckversion der Webseite über Cascading Style Sheets (CSS). Hier bedienen wir uns des Mediums print:

<link rel="stylesheet" type="text/css"; media="print" href="druckversion.css">

Es ist meist nicht nötig, zwei CSS-Dateien zu erstellen – eine für die Webseite und eine für die Druckversion. Der Code sollte in derselben CSS-Datei untergebracht werden, da auf diese Weise weniger externe Dateien geladen werden müssen und die Serverlast sinkt. In diesem Fall kann man das Styling für die Hauptseite mit @media screen in der CSS-Datei einschränken. Für die Druckversion wird das Styling mit @media print definiert.

Mit der Deklaration display:none besteht die Möglichkeit, Teile der Webseite auszublenden, die nicht in der Druckversion erscheinen sollen, zum Beispiel:

@media print {  
#header {  
  display: none;  
}
#sidebar {  
  display: none;  
}
#footer {  
  display: none;  
}

Desktopversion einer Website

Angepasste Druckversion

Der untere Screenshot zeigt, wie eine Druckversion aussehen kann. Bei huffingtonpost.de hat man sich dazu entschieden, den Header zu entfernen. Es wird lediglich der Artikel ausgegeben. Die Desktopversion zeigt der obere Screenshot.

Druckkosten sparen: Reduktion der Website auf das Nötigste

Wer besonders effizient sein möchte, der wählt eine schwarze Schriftfarbe für den Ausdruck. Empfehlenswert ist diese Einschränkung nicht, da jeder selbst wählen sollte, ob er einen farbigen oder schwarz-weißen Ausdruck wünscht. Beim Design ist es sinnvoll, alles auf das Nötigste zu reduzieren. Hintergründe sind komplett zu entfernen. Die Druckversion sollte lediglich aus Text und maximal den Artikelbildern bestehen.

Genauso wichtig wie die Farbwahl ist die Schriftart. Es gibt Fonts, die für Bildschirme optimiert sind, auf gedrucktem Papier aber weniger gut aussehen. Deshalb ist eine Schriftart mit Serifen empfehlenswert:

@media screen {  
  * {  
    font-family: verdana,sans-serif;  
  }
} 

@ media print{  
  * {  
    font-family: "times new roman",times,serif;  
  }
}

Die Webseite verwendet die Schriftart Verdana ohne Serifen. Für die Druckversion wird der Artikel in Times New Roman mit Serifen ausgegeben.

Druckansicht über ein Skript realisieren

Wer die Druckversion seiner Webseite nicht über CSS realisieren möchte, kann ein Skript verwenden. Das ist beispielsweise bei Wikipedia der Fall. Jeder Eintrag hat eine spezielle Druckversion:

  • https://de.wikipedia.org/wiki/Drucker_(Gerät)
  • https://de.wikipedia.org/w/index.php?title=Drucker_(Gerät)&printable=yes

Der Nachteil dieses Skriptes liegt darin, dass eine neue Seite aufgerufen wird. Darunter leidet die Usability und der Aufwand für den Besucher steigt, da er eine separate Seite aufrufen und diese ausdrucken muss.

Kategorien
Responsive Design Webdesign

Simbla: Websites bauen mit dem neuen Datenbank-Builder

Websites erstellen ohne Kenntnisse in HTML, CSS und JavaScript – viele Homepage-Baukästen versprechen dies. Der Website-Builder Simbla gehört zu jenen Anbietern, die nicht nur schicke Templates zur Verfügung stellen. Das Weblayout ist responsiv und basiert auf dem neuen Standard HTML5. Simbla bietet also alles, was eine zeitgemäße Website haben muss. Jetzt kannst du dank des Datenbank-Builders auch noch umfangreiche und komplexe Daten visualisieren, verwalten und bearbeiten.

simbla

Datenbank erstellen und mit Inhalt füllen

Der Website-Builder von Simbla ist bereits ausgiebig hier vorgestellt worden. Die Macher von Simbla verstehen sich nicht nur darauf, aktuelle Standards umzusetzen. Auch aktuelle Designtrends finden immer wieder Berücksichtigung. So gibt es zum Beispiel neue Templates mit Parallax-Effekt. Statt des statischen Scrollens werden verschiedene Ebenen der Website wie Hintergrund und Vordergrund beim Scrollen unterschiedlich schnell bewegt.

Datenbank in Simbla anlegen
Datenbank in Simbla anlegen

Die ganz große Neuerung ist jedoch der Online-Datenbank-Builder von Simbla. Hiermit hast du die Möglichkeit, ganz einfach eine eigene Datenbank zu erstellen und diese mit Inhalten zu füllen. Dank einer umfangreichen Rechtevergabe hast du zudem die volle Kontrolle darüber, wer Datensätze erstellen, lesen, ändern und löschen darf.

Die Datenbanken stellen einen eigenen Bereich unabhängig der Websites dar. Nachdem du eine Datenbank angelegt hast, definierst du Nutzer, Rollen sowie Tabellen. Dabei gibt es den Standardnutzer „Public“, der für den öffentlichen Zugriff über die Website zuständig ist. Du kannst aber auch weitere Benutzer einrichten, die beispielsweise nur nach einem Login Zugriff haben.

simbla_datenbank_rollen
Rollen und Rechte definieren

Für jeden Benutzer vergibst du unterschiedliche Rechte. So ist es beispielsweise möglich, dem Nutzer „Public“ nur Leserechte für eine Datenbank zuzuweisen und anderen Nutzern auch Schreibrechte. Dabei stehen dir als Rechte „find“ zum Suchen, „get“ zum Anzeigen, „create“ zum Erstellen, „update“ zum Aktualisieren und „delete“ zum Löschen eines Datensatzes zur Verfügung.

Nachdem du Nutzer und Rollen beziehungsweise Rechte zugewiesen hast, erstellst du eine oder auch mehrere Tabellen. Bequem fügst du Spalten hinzu und definierst die Art der Spalte. Möglich sind unter anderem Zeichenketten, Zahlen, Arrays, boolesche Werte und Dateien. Im Gegensatz zu anderen Datenbanken wie MySQL lassen sich Dateien wie Bilder und Dokumente ganz bequem über einen eigenen Typ in eine Tabelle integrieren und später abrufen. Außerdem erhältst du bei Bilddateien eine Vorschau.

Spalten und Typen definieren
Tabelle erstellen, Spalten und Typen definieren

Ganz automatisch werden die Spalten „Id“, „createdAt“ und „updatedAt“ erstellt und gepflegt. Dank der grafischen Benutzeroberfläche ist das Anlegen und auch Verwalten von Datenbanken spielend einfach. So legst du neue Zeilen an und füllst diese mit Inhalt.

Willst du eine Tabelle auch anderweitig verwenden, exportierst du diese mit einem Klick ins CSV-Format. Lediglich eingebundene Dateien werden beim Export ignoriert.

Einfache Webanwendungen mit Datenbanken bauen

Hast du deine Datenbank soweit fertig, kannst du diese in deiner Simbla-Website ganz einfach und bequem einbinden. Dazu musst du in den Website-Einstellungen zunächst einmal die Datenbank auswählen. Anschließend stehen dir dort alle Tabellen der Datenbank zur Verfügung.

„App Widgets“
„App Widgets“

Es gibt spezielle Inhaltselemente, die „App Widgets“, mit denen du ganz einfach eine Datenbankanbindung herstellst. Dafür musst du allerdings in den Pro-Modus wechseln. So erstellst du ein Login für hinterlegte Nutzer oder ein Formular, welches Datensätze in die Tabelle schreibt. Außerdem kannst du natürlich auch ganz einfach den Inhalt deiner Datenbank als Tabelle auf deiner Website darstellen. Dafür wählst du aus verschiedenen Tabellenlayouts aus.

Dank der umfangreichen Möglichkeiten erstellst du ohne großen Aufwand und ohne Kenntnisse in Programmierung und Datenbankabfragen einfache und auch komplexe Website-Applikationen.

Wenn du also beispielsweise Inhalte nur für registrierte Nutzer hinterlegen möchtest, fügst du einfach ein Formular ein, über welches sich Nutzer registrieren können. Eine Verifizierung der E-Mail-Adresse erfolgt automatisch. Die registrierten Nutzer werden dir im Datenbankbereich angezeigt.

Login-Formular
Login-Formular

Über ein Login- und Logout-Formular sorgst du dafür, dass sich registriere Nutzer an- und abmelden können. Außerdem legst du für bestimmte Seiten fest, dass diese nur für angemeldete Nutzer zur Verfügung stehen.

Komplexe Webanwendungen mit JavaScript

Mit dem Datenbank-Builder sind auch weitaus komplexere Webanwendungen möglich. Statt eines der einfachen „App Widgets“ zu verwenden, hast du auch die Möglichkeit, umfangreichere Datenbankabfragen und -operationen durchzuführen. Dazu gibt es eine eigene JavaScript-API.

Dank der API steht dir Simbla als Website-Application-Builder zur Verfügung, mit dem du eigene Abfragen und zum Beispiel komplexe CRM-Systeme erstellst oder auch Bestellabwicklungen und Buchungsanfragen realisierst.

Der Einstieg in die API ist dabei recht einfach. Mit „Simbla.Object.extend()“ greifst du auf eine Datenbanktabelle zu und mit „Simbla.Query()“ erstellst du eine Abfrage, mit der du arbeiten kannst.

var db = Simbla.Object.extend("DatenbankTabelle");
var abfrage = new Simbla.Query(db);

Nun gibt es zahlreiche Möglichkeiten, mit denen du die Abfrage sortieren und eingrenzen kannst. So sorgen „descending()“ und „ascending()“ dafür, dass die Tabelle anhand einer Spalte auf- oder absteigend sortiert wird.

JavaScript-Datenbankabfrage
JavaScript-Datenbankabfrage

Außerdem gibt es zahlreiche Vergleichsmöglichkeiten wie „lessThan()“, „greaterThan()“ und „euqalTo()“ sowie die Möglichkeit, eine Abfrage per „limit()“ auf eine bestimmte Anzahl an Datensätzen zu begrenzen und mit „skip()“ Datensätze zu überspringen.

abfrage.greaterThan("SpalteJahr", 2010);

Per „find()“ werden die zuvor sortieren beziehungsweise eingegrenzten Datensätze gesucht und lassen sich ausgeben.

abfrage.find({
  success: function(db) {
    var ausgabe = "";
    for (var i = 0; i < db.length; i++){
      ausgabe += "<h1>"+ db[i].get("name") + "</h1>";
      ausgabe += "<img src='"+ db[i].get("bild").url() + "'/>";
    }
    $("#dbausgabe").html(ausgabe);
  }
});

Im Beispiel werden die Datensätze per „get()“ in eine Variable und anschließend per „html()“ ins Element mit der ID „ausgabe“ geschrieben.

Für die JavaScript-Programmierung gibt es im Website-Builder einen eigenen Editor. Für die HTML-Ausgabe musst du auf einer Seite ein HTML-Inhaltselement platzieren, welches du mit einem Element versiehst, welches die im JavaScript angegebene ID besitzt.

<div id="dbausgabe"></div>

Neue Features erwartet

Derzeit befindet sich JavaScript-API noch im Aufbau. Simbla hat angekündigt, den Funktionsumfang weiter auszubauen. Es ist also davon auszugehen, dass weitere Methoden und Eigenschaften ergänzt werden und somit noch umfangreichere Datenbankabfragen möglich sein werden.

Aber auch der aktuelle Stand der API ermöglicht bereits eine Vielzahl von Abfragen. Dabei ist die Bedienung recht einfach. Wer also Erfahrung in JavaScript hat, wird sich schnell zurechtfinden und eigene Abfragen programmieren können.

Interessant ist der Builder mit seiner eigenen Datenbank und der JavaScript-API sowie den fertigen Inhaltselementen vor allem für jene, die mit Datenbankabfragen und MySQL keine Erfahrungen haben.

Zeitgemäßer Website-Builder für komplexe Webanwendungen

Wer Website-Builder von Simbla hat mit seinem Datenbank-Builder ein ganz besonderes Alleinstellungsmerkmal unter den zahlreichen Baukästen. Hier ist die Anbindung an Datenbanken weit umfassender als bei allen anderen Ansätzen, bei denen du zumeist wenig mehr als ein simples Formular als Datenbank-Anbindung verkauft bekommst.

Die Bedienung von Simbla ist dabei spielend einfach und selbst die eigene JavaScript-API stellt keine große Herausforderung dar.

Wenn du Simbla einmal ausprobieren möchtest, kannst du dir einen kostenlosen Account einrichten und den kompletten Website- und Datenbank-Builder ausgiebig ausprobieren.

(dpe)

Kategorien
Design Responsive Design UI/UX Webdesign

So schlecht funktionieren Hamburger-Menüs und versteckte Navigation

Kleine Displays, wenig Platz – auf Smartphones ist es immer wieder eine Herausforderung, Inhalt und Navigation einer Website unterzubringen. Daher hat es sich mittlerweile etabliert, die Navigation auszublenden und nur ein Hamburger-Icon zu platzieren, welches per Tap die Navigation einblendet. Schon lange wird darüber diskutiert, ob es sinnvoll ist, etwas derart wichtiges wie die Navigation zu verstecken. Die Nielsen Norman Group, die unter anderem Benutzerverhalten erforscht, hat in einer Studie nun herausgefunden, wie sich das Nutzerverhalten bei sichtbaren und per Hamburger-Menüs erreichbaren Navigationsansätzen unterscheidet.

Hamburger-Menüs sind lecker

179 Teilnehmer, sechs Websites

Ziel der Studie war es herauszufinden, wie häufig auf einer Website die Navigation gefunden, beziehungsweise verwendet wurde. Dazu mussten 179 Teilnehmer sechs verschiedene Websites auf unterschiedlichen Geräten aufrufen und nutzen. Dabei hat etwa die Hälfte der Teilnehmer die sechs Websites nur auf einem Desktopgerät aufgerufen, während die andere Hälfte nur auf Smartphones unterwegs war.

Kombinierte Navigation bei der BBC

Bei den Websites handelt es sich um die von 7digital, BBC, Bloomberg Business, Business Insider UK, Supermarkt HQ und Slate. Jede Website hat eine anders gestaltete Navigation. Unterschieden wurde zwischen sichtbarer Navigation, bei der alle Menüpunkte stets erkennbar im Kopf oder Seitenbereich aufgelistet waren, und versteckter Navigation, bei der die Menüpunkte erst über ein Hamburger-Menü oder einen per „Menu“ beschrifteten Button erreicht werden konnten. Außerdem gab es noch eine Kombination beider Varianten, bei der einige Menüpunkte sichtbar waren, während andere über einen „More“-Button als Dropdown-Liste dargestellt wurden.

So ist die Navigation von 7digital auf Desktopgeräten immer sichtbar, während sie auf Smartphones über ein „Menu“-Icon eingeblendet wird. Die BBC-Website verwendet auf dem Desktop eine kombinierte Navigation. Während dort die wichtigsten Menüpunkte sichtbar sind, werden weitere Auswahlmöglichkeiten über ein Dropdown-Menü dargestellt.

Nur per Hamburger-Menü erreichbare Navigation
Nur per Hamburger-Menü erreichbare Navigation

Die Website von Business Insider hingegen setzt sowohl in der Desktop- als auch in der Mobilansicht auf ein Hamburger-Menü, über welches die Navigation erreichbar ist. Im Übrigen gab es keine Website, bei der sowohl in der Desktop- als auch in der Mobilansicht die Navigation immer sichtbar war. Das dürfte vor allem daran liegen, dass es sehr unüblich ist, auf Mobilgeräten die Navigation immer sichtbar darzustellen.

Sichtbare oder teils sichtbare Navigation öfter genutzt

Bei den Teilnehmern, die per Desktopgerät unterwegs waren, wurde die versteckte Navigation nur von 27 Prozent genutzt, während die sichtbare oder kombinierte Navigation von 48 beziehungsweise 50 Prozent genutzt wurde. Auf Mobilgeräten haben nur 57 Prozent die versteckte und 86 Prozent die kombinierte Navigation verwendet.

Sichtnare und nicht sichtbare Navigation bei 7digital
Sichtbare und nicht sichtbare Navigation bei 7digital

Auch bezüglich der Zeit, die zum Navigieren gebraucht wurde, liegt die versteckte Navigation hinten. Während die Teilnehmer auf Desktopgeräten mit versteckter Navigation 31 Sekunden mit der Navigation beschäftigt waren, waren es bei Websites mit sichtbarer Navigation nur 26 Sekunden. Interessanterweise hat die kombinierte Navigation mit 23 Sekunden am besten abgeschnitten.

Auf Mobilgeräten ist der Unterschied zwischen versteckter (26 Sekunden) und kombinierter Navigation (24 Sekunden) geringer. Das dürfte daran liegen, dass es Nutzer auf Mobilgeräten eher gewohnt sind, die Navigation über ein Hamburger-Menü zu erreichen, während auf Desktopgeräten die Hamburger-Menüs nicht so verbreitet sind.

Fazit

Im Ergebnis lässt sich feststellen, dass die versteckte Navigation weniger genutzt wurde, mehr Zeit in Anspruch nahm und auch deutlich weniger Inhalt gefunden wurde. So wurden auf Desktopgeräten nur 54 Prozent und auf Mobilgeräten nur 64 Prozent des Inhalts, der von den Teilnehmern aufgerufen werden sollte, auch tatsächlich gefunden.

Nicht sichtbare Navigation bei Bloomberg

Am besten schnitt die kombinierte Navigation ab, die auf 80 Prozent bei Desktop- und 85 Prozent bei Mobilgeräten kommt. Selbst die komplett sichtbare Navigation liegt auf Desktopgeräten mit 77 Prozent noch drei Prozentpunkte hinter der Kombi-Navigation.

Wenn immer möglich, solltest du also auf eine versteckte Navigation verzichten. Idealerweise zeigst du einige wenige wichtige Menüpunkte immer an und versteckst weniger wichtige Punkte über ein „Mehr“-Icon, welches alle weiteren Punkte zum Beispiel als Dropdown-Liste darstellt.

Die kompletten Ergebnisse der Studie mit zahlreichen Diagrammen und tiefer gehenden Erklärungen findest du auf der Website der Nielsen Norman Group.

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design HTML/CSS Responsive Design Webdesign

Cloudinary: So optimierst du die Ladezeit deiner Bilder

Alle sprechen vom schnellen Internet. Aber es ist nicht nur Sache der Internet-Provider und Mobilfunkbetreiber, für ein schnelles Netz zu sorgen. Als Webentwickler trägst du mindestens in gleichem Maße dazu bei, indem du deine Website so effizient entwickelst, dass unnötig zu ladender Ballast gar nicht erst entsteht. Gerade bei der Bereitstellung von Bildern kannst du dafür sorgen, dass diese so platzsparend sind, dass sie möglichst schnell geladen werden. Und die Bildverwaltung und -optimierung von Cloudinary hilft dir dabei, Bilder so effizient zu erstellen und bereitzustellen, dass diese nochmal deutlich schneller geladen werden.

wordpress-website-speed

Das richtige Bildformat und die optimale Kompression

Die erste Entscheidung, die ein schnelles Laden deiner Bilder beeinflusst, ist die Auswahl des richtigen Bildformates. Neben JPEG, PNG und GIF gibt es noch weitere Formate wie WebP und JPEG-XR. Während WebP allerdings nur von Chrome unterstützt wird, wird JPEG-XR nur im Internet Explorer und Edge dargestellt. Grundsätzlich lässt sich sagen, dass für großformatige und fotografische Bilder das JPEG-Format gut geeignet ist, während eher kleinformatige und grafische Bilder besser als PNG oder GIF erstellt werden sollten, die zudem noch die Möglichkeit der Transparenz mit sich bringen.

cloudinary_format-qualitaet
Schnelle Auswahl des richtigen Bildformates

Mit Cloudinary steht dir eine komfortable Bildverwaltung zur Verfügung, mit der du im Handumdrehen deine hochgeladenen Bilder in beliebige andere Formate umwandelst. Auch die Qualität der Bilder stellst du über einen Schieberegler ein und siehst direkt eine Vorschau. Gerade bei JPEGs hast du einen großen Spielraum und entscheidest je nach Motiv, wie hoch die Qualität beziehungsweise Kompression sein muss, um ein optimales Verhältnis von Bildqualität und Dateigröße zu erlangen.

Passgenaue Größe festlegen

Ebenfalls wichtig und in Zeiten responsiver Weblayouts nicht einfach, ist die Bereitstellung von Bildern in exakt der Größe, in der sie im Browser dargestellt werden. In der Desktopansicht werden Bilder in der Regel deutlich größer dargestellt als auf Mobilgeräten. Statt dieselbe Bilddatei zu verwenden und diese auf Mobilgeräten per CSS kleiner darzustellen, solltest du für unterschiedliche Auflösungen auch jeweils passgenaue Dateien anlegen.

cloudinary_breite
Einfaches Skalieren per URL

Dank des „<picture>“-Elementes und des „srcset“-Attributes gibt dir HTML5 die Möglichkeit, auf unterschiedliche Layouts beziehungsweise Display- oder Fenstergrößen einzugehen und individuelle Dateien auszugeben. Auch hier unterstützt dich Cloudinary und skaliert dir im Handumdrehen Bilder in beliebigen Auflösungen. So sorgst du auf deiner Website dafür, dass unnötig große Bilddateien vermieden werden.

Pixeldichte berücksichtigen

Dank hochauflösender Monitore und Displays musst du als Webentwickler mittlerweile nicht nur für unterschiedliche Weblayouts Bilder bereitstellen, sondern auch für hochauflösende Displays beziehungsweise Monitore. Hier gilt es, Bilder mit mindestens doppelter Pixeldichte bereitzustellen. So erreichst du, dass deine Websites auch auf Retina-Displays gestochen scharf aussehen.

Auch hier gilt, dass hochauflösende Bilder nur dort geladen werden sollten, wo sie erforderlich sind. Bei „einfachen“ Displays sollten auch normal aufgelöste Dateien geladen werden, um unnötige Ladezeit zu vermeiden.

cloudinary_pixeldichte
Doppelte Pixeldichte per „dpr_2.0“ über die URL definieren

Die Kombination aus responsivem Weblayout und unterschiedlichen Pixeldichten ergibt häufig eine recht große Menge unterschiedlicher Bilddateien, die du bereitstellen musst, um alle Darstellungsfälle abdecken zu können. Dank Cloudinary berücksichtigst du ohne weiteres die Vielzahl unterschiedlicher Bilddateien, ohne den Überblick zu verlieren oder manuell Bilder in unzähligen Formaten ausgeben zu müssen.

Bilder richtig cachen

Mit den richtigen Caching-Einstellungen verhinderst du, dass einmal geladene Bilder erneut geladen werden. So sollte über den Header „Cache-Control“ ein möglichst langer Zeitraum eingestellt werden, für den eine Bilddatei im Browser zwischengespeichert werden soll. Cloudinary gibt hier einen Wert vor, der in etwa 30 Tage entspricht.

Cache-Control: public, max-age=2591907

Das heißt, erst nach 30 Tagen wird der Browser eine heruntergeladene Datei erneut anfordern. Falls sich die Bilddatei innerhalb des Caching-Zeitraums ändert, solltest du sicherstellen, dass der Browser dies mitbekommt. Dazu gibt es das sogenannte „ETag“. Über dieses Header-Feld wird ein Hash-Wert übertragen, der sich ändert, sobald sich die Datei auf dem Server ändert. Da das „ETag“ immer abgefragt wird – auch innerhalb des Caching-Zeitraums –, erkennt der Browser durch einen veränderten Hash-Wert, dass sich die Datei auf dem Server geändert hat und lädst diese trotz Caching-Headers herunter.

ETag: "07c35c9716cf1702b22cda61526a0c5a"

Cloudinary erstellt für jede Ressource einen „ETag“, so dass es ein optimales Zusammenspiel mit „Cache-Control“ gibt, um unnötige Downloads zu vermeiden.

cloudinary_caching
„Cache-Control“ und „ETag“-Header

Nutze Sprites und vermeide zu viele Requests

Nicht nur die Größe der Bilder, auch die Anzahl der zu ladenden Dateien bremst die Geschwindigkeit einer Website. Denn jede einzelne Datei, beziehungsweise jeder Request, nimmt Zeit in Anspruch und verlängert das Laden einer Seite. Daher solltest du gerade bei der Verwendung vieler kleiner Bilder diese in einer einzigen Bilddatei unterbringen.

So platzierst du beispielsweise alle auf einer Seite verwendeten Logos in einer PNG-Datei und erstellst einen sogenannten CSS-Sprite. Hierbei wird per CSS nur jeweils ein Ausschnitt aus der Bilddatei dargestellt. Dazu musst du natürlich wissen, an welcher Position innerhalb des Bildes die jeweiligen Logos platziert sind. So werden alle Icons mit einem Request geladen und einfach mehrfach als Ausschnitt dargestellt. Je mehr einzelne Dateien du damit einsparst, desto deutlicher wird der Geschwindigkeitsgewinn auf deiner Website zu spüren sein.

cloudinary_sprites
Schnelle Erstellung von Sprites

Mit Cloudinary erstellst du CSS-Sprites spielend einfach. Lade einfach alle Logos beziehungsweise Bilddateien hoch, die du zu einem Sprite kombinieren willst und weise ihnen jeweils einen identischen Tag – zum Beispiel „logo“ – zu. Anschließend rufst du einfach die URL „http://res.cloudinary.com/demo/image/sprite/logo.png“ auf. Als Dateiname wird einfach der gemeinsam vergebene Tag genommen und als Dateiendung das von dir gewünschte Bildformat.

Cloudinary erstellt automatisch eine Bilddatei, in der alle hochgeladenen Dateien mit demselben Tag platziert sind.

Über die URL „http://res.cloudinary.com/demo/image/sprite/logo.css“ erhältst du die passende CSS-Datei, in der für alle Logos eine Klasse angelegt wurde, die den entsprechenden Bildausschnitt darstellt. Einfacher erstellst du CSS-Sprites nicht, zumal der Austausch und die Ergänzung zusätzlicher Bilddateien ebenfalls einfach und kompliziert ist.

Nutze ein Content-Delivery-Network

Neben der Bildoptimierung und -komprimierung, dem richtigen Caching und dem Verhindern zu vieler Requests gibt es noch einen weiteren kritischen Punkt, der zu langen Ladezeiten führen kann: der Server. Gewöhnliche Provider haben oftmals nur einen Serverstandort und sind nicht darauf ausgelegt, große Datenmengen schnell auszuliefern. Content-Delivery-Networks hingegen unterhalten eine Vielzahl an Servern und sind an strategisch wichtige Internet-Knoten angebunden.

Sie liefern daher vor allem große Datenmengen deutlich schneller aus – und das weltweit. Auch hier hast du mit Cloudinary einen großen Vorteil. Denn alle auf Cloudinary gehosteten Dateien werden über das weltweite Content-Delivery-Network von Akamai ausgeliefert. Damit wird sichergestellt, dass deine Bilder überall schnell übertragen werden.

Fazit

cloudinary
Bilder-Cloud-Dienst Cloudinary

Wer schnell sein will, muss also für mehr als kleine Dateigrößen sorgen. Es gibt gleich mehrere Stellschrauben, an denen du für eine optimale Geschwindigkeit drehen musst. Mit Cloudinary hast du jedoch einen Dienst an deiner Seite, der dir viel Arbeit abnimmt und für optimale Ergebnisse sorgt. Und wer mit 75.000 Bildern, 2 Gigabyte Webspace und 5 Gigabyte monatlichen Traffic auskommt, nutzt Cloudinary sogar kostenlos.

Der Artikel ist ein Sponsored Post von Cloudinary.

(dpe)

Kategorien
Editoren HTML/CSS Responsive Design Webdesign

Blisk: Der Browser für Entwickler

Alle modernen Browser sind mittlerweile mit umfangreichen Entwicklerwerkzeugen ausgestattet. Diese helfen dir unter anderem dabei, HTML und CSS zu überprüfen, sowie JavaScript zu debuggen. Auch hast du mit ihnen die Möglichkeit, dein Weblayout für unterschiedliche Auflösungen ausgeben zu lassen. Die Entwicklerwerkzeuge machen die Arbeit für Webdesigner und -entwickler sehr viel einfacher. Doch es geht noch ein Stückchen komfortabler und schneller: Mit Blisk gibt es nun einen Browser, der ganz speziell für Entwickler konzipiert wurde.

blisk

Mobilgeräte immer im Blick

Hast du Blisk heruntergeladen und installiert, dürfte dich der Browser zunächst an Google Chrome erinnern. Das ist nicht verwunderlich. Denn Blisk basiert auf Chromium, dem Quelltext von Chrome, der unter einen freien Lizenz allen zur Verfügung gestellt wird.

Der größte Unterschied zu Chrome und anderen Browser wird erkennbar, wenn du eine Website aufrufst. Denn Blisk stellt eine Website immer doppelt dar. Während in der rechten Bildhälfte die Seite als klassische Desktopansicht aufgerufen wird, erhältst du auf der linken Hälfte eine Mobilansicht.

blisk_browser
Zweigeteiltes Fenster für Mobil- und Desktopansicht

Dabei wählst du aus einer Reihe gängiger Smartphones und Tablets aus. So wechselst du beispielsweise sehr einfach vom iPhone 6 zum Galaxy S3 und siehst, wie deine Website auf beiden Geräten dargestellt wird. Dabei wird die Website innerhalb eines Mockups des jeweiligen Gerätes angezeigt, um ein möglichst realistisches Erscheinungsbild zu bekommen.

Die Darstellung auf den Mobilgeräten steuerst du zudem im Touch-Modus, bei dem eine Bedienung per Taps und Gesten simuliert wird. Zwar unterstützt auch Chrome diese Möglichkeit, aber nicht so schön aufbereitet.

Synchrones Scrollen

Damit du das Aussehen deiner Website optimal auf der Desktop- und Mobilansicht gegenüberstellen kannst, wird deine Website auf beiden Ansichten parallel gescrollt. So ersparst du es dir, jeweils auf beiden Ansichten zu einer bestimmten Position einer Seite zu gelangen.

blisk_browser_menueleiste
Menüleiste, um spezielle Funktionen ein- und ausschalten zu können

Wer das synchrone Scrollen nicht mag, kann es über die Einstellungen auch ganz einfach ausschalten. In der Menüleiste gibt es einen speziellen Button, der dich direkt zum Setup mit den Einstellungen bringt, in denen du diese Funktion ein- und ausschaltest.

Auto-Refresh für veränderte Inhalte

Eine weitere sehr praktische Funktion von Blisk ist das Auto-Refresh. Dieses sorgt dafür, dass der Browser eine Website immer dann neu lädt, wenn sich beispielsweise der HTML- oder CSS-Quelltext der Seite verändert hat.

Hierzu musst du für eine Domain einen sogenannten Watcher einrichten. Dazu gibst du zu einer Domain das Stammverzeichnis mit den lokalen Dateien deiner Website an. Außerdem legst du Dateiendungen fest, auf die reagiert werden soll. HTML-, CSS- und JavaScript-Dateien sind hier standardmäßig angegeben.

blisk_browser_setup
Das Setup für das Auto-Refresh

Immer wenn sich eine dieser Dateien im lokalen Verzeichnis ändert, lädt Blisk automatisch die Website der angegebenen Domain neu. Wer einen eigenen lokalen Server betreibt oder Dateien seiner Webprojekte automatisch vom lokalen Dateisystem auf einen Server speichert, wird sicher Freude mit dieser Funktion haben und sich so mehr als einmal das manuelle Neuladen ersparen.

Weitere Features geplant

Da Blisk noch neu ist, stehen noch nicht alle Funktionen zur Verfügung. So gibt es einige Features, die erst noch implementiert werden müssen. Dazu zählt die Möglichkeit, Screenshots von Websites zu erstellen, sowie eine Video-Capture-Funktion.

Ebenfalls noch in Arbeit ist ein Analytics-Feature, welches die geräteübergreifende Kompatibilität und Perfomance einer Website messen soll.

Klassische Entwicklerwerkzeuge

Natürlich stehen dir in Blisk auch die klassischen Entwicklerwerkzeuge zur Verfügung, wie du sie von Google Chrome kennst. So kannst du in Blisk Elemente überprüfen und hast Zugriff auf Cookies und die Storages deiner Website.

Auch wenn Blisk derzeit noch nicht mit allen Features aufwartet, ist der Browser bereits jetzt eine für Entwickler interessante Alternative zu Chrome. Er macht vieles einfacher, schneller und anschaulicher. Blisk ist zudem kostenlos und wird, wenn er hält, was er verspricht, noch einige interessante Features hinzubekommen.

Derzeit gibt es Blisk allerdings nur für Windows. Apple und Linux sollen jedoch folgen.

(dpe)

Kategorien
Design Responsive Design Webdesign

STRATO Homepage-Baukasten: Übersichtlich, schnell und individuell anpassbar

Viele große Provider bieten in ihren Tarifen mittlerweile eigene Homepage-Baukästen an. So wird jeder im Handumdrehen zum Webdesigner. Da sich diese Baukästen vor allem an wenig erfahrene „Webmaster“ richten, ist natürlich eine übersichtliche und einfache Bedienung wichtig – im Idealfall kombiniert mit größtmöglicher Gestaltungsfreiheit. Strato gehört zu den bekanntesten und größten Webprovidern und bietet mit seinem STRATO Homepage-Baukasten einen schnellen und unkomplizierten Weg, zur eigenen Website zu kommen. Grund genug für mich, den Webseiten-Generator mal genauer zu betrachten.

Übersichtlich, schnell und individuell anpassbar

Schneller Einstieg dank zahlreicher Vorlagen und Importfunktion

Die Einstiegshürden sind gering. Ich begleite dich ein Stück auf dem Weg zur eigenen Homepage. Startest du den Baukasten, wählst du zunächst eine Kategorie und Unterkategorie aus, um ein für deine Website passendes Layout zu bekommen.

STRATO Homepage-Baukasten
Übersichtliche Kategorienauswahl

Die acht Kategorien richten sich an Branchen wie Dienstleistungen, Gastronomie, Handel und Handwerk, aber auch an Vereine sowie Privatpersonen. Zu jeder Kategorie findest du Unterkategorien, die das Thema deiner Website konkretisieren.

Bist du zum Beispiel Fotograf, Friseur oder Finanzdienstleister, findest du unter der Kategorie „Dienstleistungen“ mehrere Unterkategorien speziell für diese Bereiche. Hast du dich für eine Kategorie und Unterkategorie entschieden, gibst du noch einen Titel sowie Untertitel beziehungsweise Slogan an und lässt dir deine Website erstellen.

STRATO Homepage-Baukasten
Fertig gestaltete Website mit Inhaltsvorschlägen

Du erhältst dann eine bereits mit Inhalten hinterlegte und gestaltete Seite, die du nun nach deinen eigenen Wünschen anpassen kannst. Hast du bereits eine Website, bietet dir der Baukasten auch an, die bestehenden Inhalte dieser zu übernehmen. Dazu musst du einfach die Adresse deiner alten Seite eingeben. Danach holt sich STRATO die Inhalte automatisch.

Inhalte bearbeiten und hinzufügen

Da STRATO passend zur ausgewählten Kategorie bereits exemplarisch Seiten und Inhalte angelegt hat, kannst du direkt loslegen. Im Editor navigierst du dich wie gewohnt durch die Website und schreibst Texte direkt ins Layout. Du siehst also direkt, wie der Text auf der Website aussieht, ohne von einem Bearbeitungs- in einen Vorschaumodus wechseln zu müssen.

STRATO Homepage-Baukasten
Textbearbeitung direkt im Layout

Eine Menüleiste gibt dir die Möglichkeit, deinen Text zu formatieren, um ihn fett, kursiv, links- oder rechtsbündig darzustellen. Außerdem fügst du Überschriften, Tabellen und Aufzählungen sowie Links ganz bequem hinzu.

STRATO Homepage-Baukasten
Einfaches Hinzufügen und Verwalten von Seiten

Über das Widget „Webseiten-Struktur“ am linken Rand verwaltest du die einzelnen Seiten deiner Website. Du fügst Seiten hinzu, entfernst sie oder änderst die Reihenfolge. Am rechten Rand findest du ein weiteres Widget, nämlich das „Hilfe-Center“, welches dir schnell zu einzelnen Themen weiterhilft, wenn du trotz der intuitiven Bedienung einmal nicht weiter weißt.

Vielfältige Inhaltselemente: Fotoalben, Videos und Lagepläne

Der Inhalt einer Website sollte natürlich aus mehr bestehen als nur Text. Daher stellt dir STRATO zahlreiche Inhaltselemente zur Verfügung, die du einfach auf deiner Seite platzierst. Du wählst dabei aus zahlreichen Elementen, um beispielsweise Fotos als klassisches Album sowie als Animation oder Diashow darzustellen.

strato-homepage-baukasten_inhaltselemente
Vielzahl von Inhaltselementen vorhanden – Bilder, Videos, soziale Netzwerke

Auch YouTube- und Vimeo-Videos fügst du über ein Inhaltselement einfach deiner Website hinzu. Darüber hinaus erstellst du Downloadbereiche, Kontaktformulare und Lagepläne, die deinen Standort als interaktive Karte – über Microsofts Bing-Kartendienst – darstellen.

STRATO Homepage-Baukasten
Fotos hochladen und im Baukasten verwalten

Alle Inhaltselemente werden einfach per Drag-and-Drop in eine Seite gezogen. Anschließend bearbeitest du die Inhalte des Elementes und konfigurierst sie. Bei einem Fotoalbum lädst du also Fotos hoch oder wählst aus bereits hochgeladenen Fotos jene aus, die im Album präsentiert werden sollen. Je nach Inhaltselement stehen dir verschiedene Einstellungsmöglichkeiten zur Verfügung, um zum Beispiel Farben oder die Art und Geschwindigkeit von Animationen festzulegen.

Design anpassen und individualisieren

Um deine Website individueller zu machen, kannst du das vorgegebene Design jederzeit deinen Vorstellungen anpassen. Beispielsweise änderst du die Farben des Layouts, indem du aus einer Reihe vorgeschlagener Farbkonzepte eines auswählst.

STRATO Homepage-Baukasten
Farben einfach anpassen

Gerade Laien finden hier eine einfache Möglichkeit, stimmige und aufeinander abgestimmte Farben auszuwählen, ohne selbst Farben miteinander kombinieren zu müssen. Dabei kann man immerhin einiges falsch machen. Schau dir auf jeden Fall dazu nochmal diesen Grundlagenartikel an.

STRATO Homepage-Baukasten
Schriften einfach ändern und direkt im Layout anschauen

Auch die Auswahl von Schriften erfolgt nach diesem Konzept. Statt für Überschriften, Navigation und Fließtext jeweils eigene Schriften auszuwählen, schlägt dir der Baukasten stimmige Schriftkombinationen vor. Beim Durchblättern der einzelnen Vorschläge werden diese bereits im Layout angezeigt, sodass du direkt siehst, wie die Schriften auf deiner Website wirken. Weitergehende Informationen zu Web-Typografie findest du hier.

Designanpassung für Fortgeschrittene

Wem es nicht ausreicht, Farb- und Schriftkombinationen vorgeschlagen zu bekommen, kann unter „Einstellungen“ zusätzliche Layout- und Bearbeitungsoptionen für fortgeschrittene Anwender aktivieren. Diese erlauben es dir, Farben und Schriften ganz individuell festzulegen.

STRATO Homepage-Baukasten
Zusätzliche Layout- und Bearbeitungsoptionen

Wer beispielsweise konkrete Vorstellungen oder ein Corporate Design hat, besitzt so die größtmögliche Freiheit, Farben und Schriften selbst zu definieren und kombinieren.

Außerdem ermöglichen dir die zusätzlichen Bearbeitungsoptionen, für jeden Text eine individuelle Schriftart, -größe und -farbe festzulegen. Diese Möglichkeit sollte man aber selbstredend nicht ausreizen.

Wer im Laufe der Anpassungen feststellt, dass ihm das Grundlayout nicht zusagt, kann dieses nachträglich jederzeit ändern. So wechselst du ohne großen Aufwand einfach das Template und erhältst ein komplett neues Design. Farb- und Schriftanpassungen werden auf Wunsch ins neue Design übernommen. Und die Inhalte bleiben ohnehin erhalten.

Soziale Netzwerke, Statistik und Favicon-Editor

Eine gute Gestaltung und die richtigen Inhalte sind zwar wichtig, mittlerweile aber bei weitem nicht mehr alles, was eine Website zu bieten haben muss. Soziale Netzwerke spielen ebenfalls eine große Rolle.

Das weiß man im Hause Strato natürlich ebenfalls. Unkompliziert verknüpfst du deine Website zum Beispiel mit deiner Facebook-Seite und fügst dort einen eigenen Reiter hinzu, der dir hilft, Besucher auf deine Website zu führen. Der Facebook-Reiter kann mit speziellen Inhalten, wie zum Beispiel einem Gewinnspiel, bestückt werden. Dabei hilft dir der „Facebook Page Builder“, mit dem du ohne Vorkenntnisse einen individuellen Reiter mit Inhalt erstellst.

STRATO Homepage-Baukasten
„Facebook Page Builder“

Für Suchmaschinen fügst du Schlagworte sowie eine Beschreibung deiner Website hinzu. Auf Wunsch wählst du ein spezielles Bild aus, welches soziale Netzwerke wie Facebook darstellen, wenn deine Website dort geteilt wird.

Da eine ordentliche Statistik zu einer Website gehört, unterstützt der STRATO Homepage-Baukasten Google Analytics und andere Statistikdienste. Dazu fügst du einfach den entsprechenden Tracking-Code in ein Feld ein.

STRATO Homepage-Baukasten
Integrierter Favicon-Editor

Um das Angebot des Homepage-Baukastens komplett zu machen, gibt es bei STRATO sogar einen Favicon-Editor. Dieser ermöglicht es dir, ein Favicon direkt im Baukasten zu gestalten.

Vorschau und Veröffentlichen

Auch wenn dir im Editor des Homepage-Baukasten die Website bereits so dargestellt wird, wie Besucher sie sehen, gibt es eine eigene Vorschaufunktion. Diese hat nicht nur den Vorteil, dass dir die Seite ohne Widgets und Menü des Editors angezeigt wird.

STRATO Homepage-Baukasten
Vorschau für Desktop- und Mobilgeräte

Du siehst dort zudem, wie deine Website auf unterschiedlichen Geräten dargestellt wird. Neben der klassischen Desktop-Ansicht siehst du, wie deine Website auf Tablets und Smartphones aussieht. Du kannst bequem zwischen Portrait- und Landscape-Modus wechseln.

Da viele der Templates responsiv gestaltet sind, wird dafür gesorgt, dass deine Website auf allen mobilen Geräten problemlos und ansprechend präsentiert wird. Im Übrigen kannst du auf Wunsch für Mobilgeräte eine eigene Website ausgeben lassen, die beispielsweise nur ausgewählte Seiten ausgibt.

Gerade bei sehr komplexen Seiten kann es von Vorteil sein, auf der Mobilseite nur eine Auswahl von Inhalten auszugeben.

STRATO Homepage-Baukasten
Veröffentlichung mit QR-Code für dein Smartphone

Ist deine Website gestalterisch und inhaltlich fertig, wird sie über einen Knopfdruck veröffentlicht und ist über deine bei STRATO gehostete Domain erreichbar. Du kannst deine Website jederzeit wieder deaktivieren und stattdessen einen frei definierbaren Hinweis ausgeben lassen.

Damit du deine veröffentlichte Website direkt auf dem Smartphone aufrufen kannst, wird dir ein QR-Code mit Link angezeigt.

Fazit

Der STRATO Homepage-Baukasten richtet sich vor allem an unerfahrene Anwender. Zielgruppenorientierte Vorlagen und Vorschläge zu Struktur und Inhalten deiner Website helfen dir, einen schnellen Einstieg zu finden.

Die zusätzlichen Gestaltungs- und Bearbeitungsoptionen machen es darüber hinaus möglich, Layout und Inhalte ganz individuell zu gestalten.

Die zahlreichen inhaltlichen Möglichkeiten erlauben es dir, eine zeitgemäße Website zu erstellen, die auch auf Mobilgeräten gut aussieht und funktioniert. Die Verknüpfung mit Facebook und die Unterstützung von Analysetools, wie Google Analytics, machen den STRATO Homepage-Baukasten zu einem besonderen Highlight unter den Homepagebaukästen.

Disclaimer: Der Beitrag wurde nicht von Strato gesponsort. 

(dpe)

Kategorien
(Kostenlose) Services Design Editoren Essentials HTML/CSS Responsive Design UI/UX

Die 50+ besten Tools und Ressourcen für Webentwickler

Webentwicklung ist einer der schönsten Berufe überhaupt, allerdings auch einer der anspruchsvollsten. Denn man muss ständig am Ball bleiben, aktiv dazu lernen und kann sich nicht auf den Lorbeeren von gestern ausruhen. Es gilt, sich auf neue Anforderungen einzustellen. SEO-Grundkenntnisse sind gefragt, neue Techniken wie responsives Webdesign sind zu erlernen, Websites optimieren zu können ist wichtig, und natürlich neue Arbeitsweisen in der Erstellung von Websites kennenzulernen. Damit du im Spiel bleibst, haben wir dir hier eine Liste der besten Tools und Ressourcen für Webentwickler zusammengestellt.

Die besten Tools und Ressourcen für Webentwickler

Lebenslanges Lernen: Ressourcen für Webentwickler

Newsletter für Webentwickler

Newsletter für Webentwickler

Diese Newsletter bieten dir die besten Artikel zu Webentwicklung und Performance und sind redaktionell aufbereitet. So kannst du sicher sein, nur wirklich nützliche Dinge in deinem Posteingang zu finden.

  • Web Development Reading List – erscheint einmal wöchentlich und bringt dir neue Ressourcen und Tools nahe.
  • Web Operations Weekly – Der Newsletter zu Web-Applikationen, Performance, Webentwicklung, Server-Technik und Tipps.
  • WEB TOOLS WEEKLY – Der Newsletter zu den neuesten Tools für Webentwickler und Webdesigner. Hauptsächlich wird Front-End-Design behandelt.
  • freshbrewed.co – Einmal wöchentlich kommt der Newsletter zu Front-End- und UX-Design.
  • Dr. Web Newsletter – natürlich darf unser reanimierter Newsletter an dieser Stelle auch nicht fehlen. Abonnenten erhalten alle ein bis zwei Wochen schnelle Tipps und Infos für den Alltagsgebrauch.

Communities für Webentwickler

communities

Jeder Webentwickler steckt mal fest und weiß nicht weiter. Da ist es gut, wenn man sich an andere Menschen wenden kann, die schnell und unbürokratisch helfen. Hier sind einige Communities speziell für Webentwickler und Webdesigner.

Tools für den Gebrauch online und offline: Ressourcen für Webentwickler

Website Speed Test Tools

website-speed-test-tools

Die Geschwindigkeit einer Website ist ein kritischer Faktor für das Ranking deiner Website im Google-Index. Schnelle Ladezeiten bedeuten oftmals bessere Absprungraten, eine bessere allgemeine Benutzerfreundlichkeit und höhere Konversionsraten. Nutze also diese kostenlosen Tools zum Testen und Optimieren der Ladezeit deiner Website.

  • Website Speed Test:  Das relativ neue Speed-Test-Tool von KeyCDN mit einer „Wasserfall“-Darstellung der Ergebnisse und einer Vorschau der Website. Empfehlenswert.
  • Google PageSpeed Insights: PageSpeed Insights analysiert deine Website und gibt dir viele gute Tipps, wie du die Performance deiner Website verbessern kannst.
  • Google Chrome DevTools: Erklärt die in Google Chrome eingebauten Entwickler-Tools eingehend.
  • WebPageTest: Dieses Tool gibt dir die Möglichkeit, die Performance deiner Website von vielen Orten der Erde in echten Browsern wie Firefox, IE und Google Chrome zu testen.
  • Pingdom: Eines der besten Tools zum Testen der Ladezeit einer Website. Verschiedene Orte können eingestellt werden.
  • GTmetrix: Gibt dir einen Einblick über die Geschwindigkeit deiner Website und eine Menge Tipps, wie du sie verbessern kannst.

Collaboration Tools

Collaboration Tools

Diese Tools erleichtern die Zusammenarbeit von Teams, die zusammen an einem Auftrag arbeiten. Denn viele Teams bestehen mittlerweile aus Mitarbeitern, die über ganz Deutschland oder sogar über die ganze Welt verstreut leben und arbeiten. In Kontakt bleiben und sich gegenseitig absprechen ist also besonders wichtig. Mit diesen Tools kann man die Mitarbeit und den Arbeitsablauf bedeutend effizienter gestalten.

  • Slack: Eine Messaging-Anwendung für Teams, die an einem Auftrag arbeiten. Die App verspricht, dein Arbeitsleben einfacher und produktiver zu gestalten.
  • Trello:  Trello ist ein flexibler und visueller Weg, um Teams miteinander zu organisieren. Die Software basiert auf »Karten«, die kommentiert werden und auch mit Prioritäten versetzt werden können. Schnell und einfach zu erlernen.
  • Glip: Glip bietet dir Echtzeit-Messaging mit integriertem Aufgabenmanagement , Videokonferenzen, gemeinsame Kalender und vieles mehr.
  • Asana: Mit diesem Collaboration-Tool können Teams ihre Arbeit verfolgen und bisherige Ergebnisse einsehen. Perfekt um zu sehen, wo das Projekt gerade steht.
  • Jira: Jedes Mitglied deines Software-Teams kann seine Arbeit planen, Ergebnisse verfolgen und die Software anschließend freigeben.

Code Sharing und Experimente

Code Sharing

Manchmal hat man eine wirklich gute Unterhaltung auf Skype oder per Google-Hangouts mit einem anderen Entwickler und möchte mal eben ein Stückchen Code miteinander teilen, damit der Gesprächspartner einen Blick darauf werfen kann. Große Teamtools wie Slack können das natürlich, doch wenn du kein Mitglied eines Teams bist, ergeben sie keinen Sinn. Denn dafür existieren einige gute und schnelle Alternativen. Doch auch schnelle Experimente sind manchmal wichtig, darum findest du dafür Tools in dieser Liste.

  • JS Bin:  Ein Tool, um mit Programmier- und Auszeichnungssprachen zu experimentieren. Du kannst HTML, CSS, JavaScript, Markdown, Jade und Sass benutzen.
  • JSfiddle: Ein Tool, um deinen in JavaScript, HTML oder CSS Code direkt im Broser testen zu können.
  • codeshare: Teile deinen Code in Echtzeit mit anderen Entwicklern.
  • Dabblet: Ein interaktiver „Spielbereich“, um dir schnelles Testen von CSS- und HTML-Snippets zu ermöglichen.

Diff-Checker-Tools

diff-checker

Die „Diff-Checker“ helfen dir, Unterschiede zwischen Dateiversionen zu visualisieren und wenn gewünscht, zusammenzuführen. Manchmal kann es hilfreich sein, eine solche visuelle Darstellung zu sehen.

  • Diffchecker: Ein Online-Tool zum schnellen Vergleichen von textbasierten Dateien. Nützlich, wenn du unterwegs bist und einen schnellen Vergleich zwischen zwei Dateien benötigst.
  • Beyond Compare: Ein Programm zum Vergleichen von Dateien und Ordnern mit einfachen, leistungsfähigen Befehlen, die den Fokus auf den Bereich legen, der dich interessiert. Dinge, die dich nicht interessieren, kannst du ausblenden.

Markdown-Editoren

markdown-editoren

Markdown ist eine Auszeichnungssprache mit einer einfachen Syntax, die dann auf die Schnelle in HTML konvertiert werden kann. Anmerkung: Markdown-Editoren lassen sich für Schreibarbeiten und einfachen Code nutzen.

  • StackEdit: Ein kostenlos zu nutzender Online-Editor für Markdown.
  • Dillinger: Dillinger ist ein Cloud-fähiger HTML5 Markdown-Editor.
  • Mou: Markdown-Editor für Entwickler, die Mac OS X nutzen.
  • Texts: Ein einfacher Text-Editor für Markdown. Erhältlich für Windows und Mac OS X.
  • MarkdownPad: MarkdownPad ist wohl der beste Markdown-Editor für Windows. Er kann direkt mit einer Live-Preview neben dem Eingabebereich dienen.
  • ByWord: ByWord ist der klare Favorit im Dr. Web-Team, wenn es um Editoren für den Mac geht.
  • Sublime Text: In diesem Artikel auf Dr. Web erklärt Peter Müller, wie er mit Sublime Text seinen Markdown-Traumeditor gefunden hat.

CSS Preprocessors

css-preprocessors

Ein CSS Preprocessor ist im Grunde eine Script-Sprache, die CSS erweitert und zu regulärem CSS kompilieren kann. CSS Preprocessors erleichtern dir die Arbeit mit CSS. Hier ein Grundlagen-Artikel zu Sass und Less.

  • Sass: Eine sehr ausgereifte, stabile und leistungsfähige professionelle CSS-Erweiterung.
  • Less: Eine Erweiterung zu CSS, die auch rückwärts kompatibel mit CSS ist. Dies macht das Erlernen zu einem Kinderspiel.
  • Stylus: Eine neue Sprache, welche dir eine effiziente, dynamische und ausdrucksstarke Weise CSS zu generieren bietet. Stylus unterstützt sowohl eingerücktes als auch reguläres CSS.

Front-End-Frameworks

user-interface

Die Arbeit mit Frameworks wird immer beliebter, denn einen bereits vorbestimmten Rahmen, ein vorgefertigtes Paket zu nutzen, kann die Arbeit erleichtern und lässt dich schneller zum Ergebnis kommen. Die Frameworks bestehen in der Regel aus einigen Dateien und Ordnern, wie CSS, HTML-Beispiele und JavaScript. Twitters Bootstrap-Framework ist eines der beliebtesten Frameworks überhaupt und Grundlage sehr vieler anspruchsvoller Websites. Doch auch andere Frameworks verdienen es, getestet zu werden.

  • Bootstrap: Ein HTML, CSS, und JS Framework für das Entwickeln von responsiven, mobile-first Websites.
  • Foundation: Eine Familie von responsiven Front-End-Frameworks, die es dir erleichtern sollen, responsive Websites, Apps und E-Mails zu entwickeln.
  • Semantic UI: Ein Framework zum Entwickeln von responsiven Websites mit semantischem, leichtverständlich zu erfassenden HTML.
  • uikit: Ein leichtgewichtiges und modulares Framework zum Entwickeln von schnellen und leistungsfähigen Web-Schnittstellen.

Git: Clients und Services

git-clients

Git ist ein Quellcode-Management-System für Software und Webentwicklung. Es bietet dir eine verteilte Versions-Kontrolle. Seinen großen Vorteil spielt Git beim Arbeiten in Teams aus, denn es können Code-Änderungen nachverfolgt und vom Entwicklungs- bis zum Live-Stadium gebracht werden. Es ist ein Weg das Chaos zu minimieren und sicherzustellen, dass nichts Online geht, was nicht getestet wurde.

  • SourceTree: Ein kostenloser Git und Mercurial Client für Mac und Windows. Ein git-Client für Teams – Bitbucket – ist ebenfalls erhältlich.
  • GitKraken (Beta):  Ein freier und intuitiver, schneller und für alle Plattformen zu bekommender Client.
  • Tower 2: Versionskontrolle mit Git – leichtgemacht. Das verspricht diese App. Nur für Mac.
  • GitHub Client: Ein einfacher Weg, um an Projekten auf GitHub und GitHub Enterprise mitzuwirken.
  • Gogs: Ein einfacher Git-Client zum Selbsthosten.
  • GitLab: Hier kannst du deine privaten und öffentlichen Projekte kostenlos hosten.

Ergänzende Links zum Beitrag:

(dpe)

Kategorien
Design Responsive Design Webdesign

Google Resizer hat dein responsives Design im Blick

Dank zahlreicher mobiler Gerätetypen müssen zeitgemäße Websites für unterschiedliche Auflösungen und Orientierungen gestaltet werden. Um zu sehen, wie eine Website auf einem Tablet, Smartphone oder klassischem Monitor aussieht, ist es jedoch nicht notwendig, immer alle Geräte parat zu haben. Mit Google Resizer gibt es ein praktisches Webtool, das dir eine Website im Handumdrehen für verschiedene Gerätetypen und Auflösungen darstellt.

Google Resizer

Adresse eingeben und loslegen

Google Resizer ist denkbar einfach zu bedienen. Du gibst einfach die Adresse der Website ein, die du auf ihre Responsivität testen möchtest, und erhältst direkt eine Darstellung deiner Website auf den drei gängigen Geräteklassen Desktop, Tablet und Smartphone. Per Iframe wird die Website in der entsprechenden Auflösung des jeweiligen Gerätes dargestellt. Du kannst also wie gewohnt durch deine Website navigieren und jede Seite ausgiebig testen.

google-resizer1
Darstellung auf Desktop, Tablet und Smartphone auf einem Blick

Google hat sein Tool speziell für sein Material Design entwickelt. Es soll Webdesignern und -entwicklern helfen, Breakpoints sowie responsive Raster auf den verschiedenen Auflösungen zu prüfen. Aber auch jede andere Website, die nicht auf Googles Material Design beruht, bietet sich an, um sie per Google Resizer auf ihre Darstellung auf verschiedenen Geräte zu testen.

Verschiedene Desktopauflösungen berücksichtigen

Neben der gemeinsamen Darstellung aller drei Geräte gibt es für Desktop und Mobilgerät noch jeweils eigene Seiten. Bei der Desktopseite wird dir ein Lineal mit gängigen Auflösungen dargestellt. Von 1600 Pixel bis 480 Pixel Breite stehen insgesamt sieben verschiedene Breiten zur Auswahl. Per Klick in das Lineal wechselst du einfach die Auflösung und deine Website wird entsprechend angepasst.

google-resizer2
Darstellung auf dem Desktop mit unterschiedlichen Breakpoints

So siehst du schnell, wie sich deine Website verhält, wenn sie auf größeren oder kleineren Monitoren beziehungsweise Browsergrößen dargestellt wird. Die Größen sind aus den Richtlinien von Googles Material Design entnommen. Dort sind sieben Breakpoints definiert, die entsprechend benannt sind. So gibt es zwischen „Window xsmall“ und „Window xlarge“ verschiedene Breakpoints.

Für Mobilgeräte testen

Wie deine Website auf Mobilgeräten wie Smartphones und Tablets aussiehst, prüfst du über eine eigene Seite. Auch hier findest du wieder ein Lineal mit gängigen Auflösungen – hier allerdings speziell solche, wie sie auf Smartphones und Tablets vorhanden sind. So testet du deine Website zum Beispiel auf einem klassischen Smartphone mit einer Auflösung von 360 Pixel in der Breite.

google-resizer3
Darstellung auf einem Smartphone

Neben der Darstellung im Portrait-Modus bietet dir Google Resizer auch den entsprechenden Landscape-Modus an. Die größte angebotene Auflösung sind hier 1024 Pixel Breite, was einem gängigen Tablet entspricht.

Entwicklertools oder Google Resizer verwenden

Die meisten Webentwickler dürften mit den Entwicklertools vertraut sein, die es unter anderen im Chrome und auch im Firefox gibt. Auch diese bieten Möglichkeiten an, eine Website für verschiedene Auflösungen zu testen. Zusätzlich eröffnen die Entwicklertools die Möglichkeit, Touchdisplays zu simulieren und eine programmierte Gestensteuerung direkt am Desktop zu testen.

Google Resizer kann hier (leider) nur responsives Design testen, was für einen umfangreichen Test einer Website in der Regel zu wenig ist. Dennoch ist Google Resizer ein gutes Werkzeug, um Kunden das responsive Design einer Website zu präsentieren. Auch die Zusammenarbeit mit Designern, die mit den Entwicklertools nicht vertraut sind, erleichtert das Tool. Denn Google Resizer ist übersichtlich gestaltet und einfach zu bedienen.

Wenn es „nur“ darum geht, ein responsives Weblayout auf seine korrekte Darstellung zu prüfen oder es zu präsentieren, stellt Google Resizer eine gute und schnelle Möglichkeit dar.

(dpe)

Kategorien
Design HTML/CSS Responsive Design Webdesign

Wix 2016: Neuer Editor, Musik-Store und mehr

Mit Wix ist seit Jahren ein Homepage-Baukasten auf dem Markt, der das Erstellen ansprechender und zeitgemäßer Websites vereinfachen und professionalisieren will. Zahlreiche Vorlagen und umfangreiche Bearbeitungsmöglichkeiten zeichnen Wix aus. Da sich Trends und Techniken gerade bei Webdesign und -entwicklung schnell ändern, hat Wix soeben einen rundum erneuerten Editor mit neuen Features herausgebracht. So unterstützt Wix nun auch den Trend, Videos als Hintergrund einzusetzen, sowie das nach wie vor sehr beliebte Parallax-Scrolling.

Wix 2016: Neuer Editor, Musik-Store und mehr

Vorlage für Branche auswählen und loslegen

Hast du dich kostenlos bei Wix angemeldet, wählst du zunächst aus den zahlreichen Vorlagen eine aus. Diese sind in Kategorien sortiert und erlauben es, eine Vorlage für eine entsprechende Branche auszuwählen. Wer lieber ohne vorgegebene Gestaltung loslegen möchte, greift auf eine leere Vorlage zurück. Hierbei wird lediglich ein Grundlayout vorgegeben, welches die Anordnung der einzelnen Elemente grob festlegt.

wix_templates
Template-Galerie

Während einige Vorlagen kostenlos sind, sind andere nur mit einem Abonnement erhältlich. Die Vorlagen sind alle per HTML5 ausgezeichnet und responsiv gestaltet. Auf der Vorschauseite findest du sowohl eine Desktop- als auch eine Mobilansicht für die Vorlagen. Hast du dich für eine entschieden, wechselst du einfach in den Editor, um eine Website auf Grundlage der Vorlage zu bearbeiten.

Editor mit übersichtlichem Gestaltungsraster

Der Wix-Editor besticht mit seiner übersichtlichen Oberfläche. Eine Website ist bei Wix üblicherweise in Kopfzeile, Streifen und Fußzeile eingeteilt. Während in der Kopfzeile unter anderem die Navigation untergebracht ist, ist der sogenannte Streifen der Bereich, der für die Inhalte vorgesehen ist. Die einzelnen Bereiche werden mit Rasterlinien voneinander getrennt.

wix_editor
Übersichtlich gestalteter Editor

Die Elemente einer Seite kannst du nach Belieben verschieben und skalieren. Die Bearbeitungsleiste hilft dir, Elemente automatisch an den Rasterlinien auszurichten und in den Hinter- beziehungsweise Vordergrund zu verschieben. Viele der Funktionen wirst du vermutlich aus anderen Anwendungen kennen.

Außerdem gibt es für jedes ausgewählte Element ein Bearbeitungsmenü. Für Texte stehen umfangreiche Möglichkeiten, Schrift und Text zu formatieren bereit. Du wählst aus zahlreichen Webschriften eine aus, definierst Schriftgröße und -farbe frei und bestimmst die Ausrichtung deines Textes. Außerdem kannst du einem Text auch verschiedene Schlagschatten hinzufügen.

wix_text
Integrierte Textverarbeitung

Für Bilder gibt es ebenfalls eine Vielzahl an Bearbeitungsmöglichkeiten. Du kannst Bilder zuschneiden, ausrichten und spiegeln. Dank vorgegebener Effekte bringst du ein Bild in unterschiedliche Farbstimmungen. Auch klassische Korrekturen, um Helligkeit, Kontrast und Sättigung einzustellen, sind vorhanden.

wix_bild
Integrierte Bildbearbeitung

Insgesamt sind die Möglichkeiten, Texte und Bilder zu bearbeiten, sehr umfangreich und einfach anzuwenden. Wer sich etwas mit Textverarbeitung und Bildbearbeitung auskennt, wird sich problemlos zurechtfinden.

Videos und Parallaxeffekt für Seitenhintergrund

Ein Trend der letzten Zeit ist es, Websites mit formatfüllenden Hintergrundbildern und auch -videos zu versehen. Der neue Wix-Editor unterstützt diesen Trend. Aus einer Vielzahl an hochwertigen Bildern und Videos, die Wix zur Verfügung stellt, wählst du einfach eines aus. Bilder und Videos, die du als Hintergrund verwendest, werden automatisch so skaliert, dass sie immer die gesamte Fläche des Browserfensters einnehmen.

Zu den Videos gehören sowohl gefilmte Aufnahmen als auch per Computer gerenderte Effekte. Dazu zählen stimmungsvolle Naturaufnahmen, Menschen während der Freizeit und bei der Arbeit sowie animierte dreidimensionale Texturen.  Die Länge der Videos variiert von einigen wenigen bis zu 30 Sekunden. Zusätzlich kannst du ein Video noch mit einem dezenten Muster überlagern.

wix_video
Video als Hintergrund einbinden

Ob ein Video in einer Schleife abgespielt werden soll, ist ebenso einstellbar, wie die Abspielgeschwindigkeit. Gerade für Hintergrundvideos bietet sich oft eine reduzierte Geschwindigkeit an. Die auf Wix bereitgestellten Videos eignen sich alle zum Abspielen in einer Schleife. Sie sind so geschnitten, dass es bei der Wiederholung nicht zu scharfen, sichtbaren Bildwechseln kommt.

Entscheidest du dich für ein formatfüllendes Bild als Hintergrund, kannst du hier zusätzlich einen Parallaxeffekt hinzufügen. Hierbei wird das Hintergrundbild während des Scrollens langsamer bewegt als der Rest der Seite. Es entsteht der Eindruck, Hinter- und Vordergrund seien räumlich getrennt. Sind Vorder- oder Hintergrund dazu noch unscharf, entsteht ein 3D-Effekt, der beim Parallax-Scrolling häufig eingesetzt wird.

wix_parallax
Parallaxeffekt bei Hintergrundbildern möglich

Du kannst natürlich auch deine eigenen Videos hochladen, solange diese nicht größer als 50 Megabyte sind. Da mobiles Datenvolumen meist endlich ist, sorgt Wix dafür, dass auf Mobilgeräten Hintergrundvideos nicht abgespielt werden.

Grenzenlos Inhalte hinzufügen: Texte, Bilder, Videos

Gutes Aussehen ist auch bei einer Website nicht alles. Entscheidend sind natürlich die Inhalte. Auch hier hat Wix einiges zu bieten. Texte und Bilder gehören hier nur zu einigen der zahlreichen Möglichkeiten. Der Editor stellt dir bei Texten eine Vielzahl an exemplarischen Formatierungen bereit, die du nach Belieben anpassen kannst.

Bei Bildern lädst du entweder selbst welche hoch oder wählst aus der großen Sammlung von Wix aus. Neben Fotos stehen auch Cliparts zur Verfügung. Wer weder auf seinem eigenen Rechner noch bei Wix fündig wird, kann auch direkt aus dem Editor heraus beim Stockanbieter Bigstock schauen und Fotos für seine Website lizenzieren. Gewährst du Wix Zugriff auf dein Facebook- oder Instagram-Profil, bindest du ganz bequem die dort hochgeladenen Fotos in deine Website ein.

wix_inhalte
Zahlreiche Inhaltstypen verfügbar

Neben einfachen Bildern lassen sich umfangreiche Galerien erstellen. Per Klick wird das ausgewählte Bild dann als Layer in vergrößerter Darstellung über den Inhalt der Seite gelegt.

Zur Einbindung von Videos unterstützt Wix die beiden großen Videoplattformen YouTube und Vimeo. Du gibst einfach die Adresse des jeweiligen Videos ein und hast je nach Plattform noch unterschiedliche Layoutmöglichkeiten.

Neben Texten, Bildern und Videos stehen dir eine Vielzahl weiterer Inhalte zur Verfügung. Du kannst Formulare, Listen, sowie Menüs anlegen. Auch Verlinkungen zu sozialen Netzwerken fügst du spielend einfach in deine Website ein.

Selbst einen eigenen Shop, sowie ein eigenes Blog legst du dank Wix im Handumdrehen an. Wie in anderen Blogsystemen erstellt du Beiträge, kategorisierst sie, bereitest sie zur Veröffentlichung vor und lässt sie kommentieren.

Musik einbinden und verkaufen dank Wix Music

Ebenfalls neu im neuen Editor ist Wix Music. Hiermit lädst du deine eigene Musik hoch und bindest diese über einen Player auf deiner Website ein. Wer als Musiker seine Musik lieber selbst vertreiben möchte, statt über die großen Musikplattformen, erhält mit Wix Music alles, was er braucht.

Zum Trend zurück zu mehr Sound hatten wir hier bei Dr. Web erst kürzlich geschrieben.

wix_music1
Alben anlegen und Musik hochladen

Du erstellst ein Album samt Cover und lädst deine Musikdateien hoch. Anschließend kannst du deine Musik über einen Player direkt in deine Website einbinden. Natürlich stellt dir Wix auch gleich einen Musikshop zur Verfügung, über den der Vertreib deiner Musik läuft. Du legst den Kaufpreis fest oder entscheidest dich dafür, deine Musik kostenlos anzubieten.

Wix Music ist als Basispaket kostenlos. Willst du den Kauf jedoch über PayPal abwickeln, benötigst du das Premiumpaket für etwa 10 US-Dollar im Monat. Dafür nimmt Wix keinerlei Provision für die Einnahmen, die du mit deinen Verkäufen erzielst.

wix_music2
Player einbinden und einrichten

Über eine detaillierte Statistik wirst du zudem noch über angehörte und heruntergeladene, beziehungsweise gekaufte Musik auf dem Laufenden gehalten.

Eigene Domain und Premiumpakete

Ist deine Website soweit fertig, ist es Zeit für die Veröffentlichung. Standardmäßig wird sie über eine Subdomain von Wix verfügbar gemacht. Du kannst sie aber auch mit einer eigenen Domain verknüpfen oder direkt bei Wix eine Domain registrieren.

Um eine eigene Domain nutzen zu können, benötigst du eines der Premiumpakete. Diese sind ab etwa vier Euro im Monat erhältlich. Insgesamt gibt es vier verschiedene Premiumpakete. So variieren Bandbreite und zur Verfügung stehender Speicherplatz und je nach Paket stehen dir weitere Funktionen wie der Shop zur Verfügung.

Fazit

Wix gehört mit seinem zahlreichen Features, der großen Auswahl an anspruchsvollen Vorlagen und der einfach zu bedienenden Oberfläche zu den besten Website-Buildern, die es derzeit gibt. Durch die Unterstützung zeitgemäßer Techniken und Trends ist Wix auch für den professionellen Einsatz durchaus geeignet.

Mit Wix erstellst du sehr individuelle Websites und bist äußerst flexibel, was die Gestaltung und die Inhalte betrifft. Auch wer sich nicht mit Webentwicklung auskennt, erstellt mit Wix ansprechende und zeitgemäße Webprojekte.

Musiker haben einen besonders triftigen Grund, sich Wix näher anzusehen.

(dpe)

Kategorien
Design Responsive Design Webdesign

Simbla 2016: Responsive Websites für jedermann

Dank zahlreicher Baukästen und Website-Builder ist es möglich, sich im Handumdrehen – und ohne Kenntnisse in HTML, CSS und JavaScript – eine eigene Website zusammenzustellen. Oftmals mangelt es diesen Websites an gestalterischer, aber auch technischer Qualität. Simbla ist ein Website-Builder, der sich sowohl an Profis richtet, die selbst per HTML auszeichnen können, als auch an Laien, die einfach per Drag-and-Drop eine Website bauen möchten. Die mit Simbla erstellten Websites sind darüber hinaus vollständig responsiv und somit für die Darstellung auf Mobilgeräten wie Tablets und Smartphones geeignet.

Simbla 2016

Mit Template oder leerer Seite starten

Hat man sich kostenlos beim Simbla Website-Builder angemeldet, kann direkt die erste Website angelegt werden. Wer nicht selbst gestalten möchte, kann eines der vielen kostenlosen Templates verwenden. Die Templates sind mit exemplarischen Inhalten ausgestattet und haben eine Live-Demo, so dass man vorab einen guten Eindruck von Aussehen und Funktionalität bekommt.

Alle Templates sind kategorisiert, so dass du schnell das richtige für dein Projekt auswählen kannst. So gibt es Branchenkategorien unter anderem für Gastronomie, Technologie und Immobilien. Damit findest du im Vorfeld bereits ein für deine Branche passendes Template und passt dieses später einfach deinen eigenen Wünschen an.

New Templates Grid Simbla 2016
Galerie mit Templates

Wer lieber ohne Templates arbeitet, startet mit einer komplett leeren Website und baut diese ohne Vorlage selbst auf.

Masterseiten definieren und Seiten anlegen

Egal, ob man mit Template oder einer leeren Seite beginnt: Alle Inhalte der Website sind modular konzipiert. Es gibt Header- und Footer-Elemente, in denen beispielsweise Logo und Navigation sowie Links zu sozialen Netzwerken untergebracht sind. Alle Elemente sind bereits gestaltet. Farben und Schriften sind also bereits in einem Theme hinterlegt. Über eine Palette wählst du ganz einfach aus verschiedenen Themes eines aus. Aber du kannst das Aussehen aller Elemente natürlich nach Belieben ganz individuell anpassen. Farben, Schriften, Größen und Positionen definierst du weitestgehend frei.

Jedes auf einer Seite platzierte Element besitzt mit „Edit“ und „Design“ zwei Menüpunkte, um Funktionalität beziehungsweise Aussehen anzupassen. Beim Header besteht so die Möglichkeit festzulegen, ob dieses beim Scrollen fixiert sein, oder per Fade- beziehungsweise Slide-In eingeblendet werden soll.

Je nach Element stehen weitere Menüpunkte zur Verfügung. Bei einer Navigation bestimmst du unter anderem das Aussehen der einzelnen Menüpunkte. Diese lassen sich als einfacher Text, als Text mit Rahmen oder als Text auf abgerundetem Rechteck darstellen. Schrift und Farben (auch für Hoverzustände) sind ebenfalls definierbar. Bei der Auswahl einer Schrift stehen die Systemschriften sowie eine Vielzahl von Webschriften zur Verfügung.


Masterseite anlegen mit festen Elementen

Natürlich können in einem Website-Projekt mehrere Seiten angelegt werden. Diese fügst du im Header- oder Footer-Bereich einer Navigation hinzu. Alle Seiten lassen sich individuell gestalten und mit Inhalt füllen. Es besteht zudem die Möglichkeit, sogenannte Masterseiten anzulegen. Dort werden dann feste Bereiche definiert, die auf allen Seiten identisch sein sollen. Dank einer Masterseite ist gewährleistet, dass alle Seiten diese festen Bestandteile beinhalten. Es ist auch möglich, mehrere Masterseiten für eine Website anzulegen.


Aussehen eines Elementes festlegen

Jede Masterseite enthält einen „Dynamic Content“-Bereich. Dieser dient als Platzhalter, um dort auf den einzelnen Seiten später die individuellen Inhalte zu platzieren.

Vielfältiger Inhalt: Texte, Bilder, Videos und Intros

Für die Inhalte deiner Seiten stehen dir eine Vielzahl von Elementen zur Verfügung, mit denen du Texte und Bilder in unterschiedlicher Darstellung einbindest. Es gibt klassische Vorlagen, um Texte und Bilder zu kombinieren. Für Teamvorstellungen gibt es ebenfalls Vorlagen, bei denen Bilder mit entsprechenden Bildunterschriften möglich sind.


Intro-Element

Da Videos eine immer größere Rolle spielen, stellt dir Simbla auch hierfür einige spezielle Inhalte-Elemente zur Verfügung. So kannst du sowohl YouTube-Videos als auch eigene HTML5-Videos von einer beliebigen Quelle einbinden. Auch den beliebten Trend, Videos als Hintergrund einzubinden, unterstützt Simbla. Dazu steht dir eine eigene Bibliothek mit zahlreichen Videos, aus denen du auswählen kannst, zur Verfügung. Außerdem hast du die Möglichkeit, Videos in einer Endlosschleife oder nur einmalig abspielen zu lassen.

Für die Darstellung von Bildern gibt es ein neues Karussell-Element, mit dessen Hilfe du Bilder als Bilder-Slider darstellst. Du wählst dabei einfach Bilder aus und entscheidest dich für einen Slider- oder Fade-Effekt für den Wechsel der Bilder. Die Zeit für den automatischen Wechsel stellst du individuell fest. Auch das Aussehen der Pagination sowie der Navigationspfeile kannst du auswählen.

simbla2016_karussell
Einstellungen für Bilderkarussell

Für die Gestaltung deiner Startseite gibt es spezielle Intro-Elemente . Hierüber kannst du sehr eindrucksvoll mit großformatigen Bildern und prägnanten Überschriften Aufmerksamkeit erregen. Auch Videos, Links und Slider platzierst du sehr einfach in so einem Intro.

Volle Breite für Inhalte

Alle Inhalte, die du hinzufügst, werden standardmäßig in voller Breite des Browserfensters dargestellt – so, wie man es von vielen zeitgemäßen Websites kennt. Du kannst die Breite und Höhe der einzelnen Container deiner Inhalte auch anders darstellen.

simbla2016_container
Anpassbare Größe für Container

Wenn dir eine klassische Darstellung mit Begrenzungen an den seitlichen Rändern lieber ist, stellst du dies einfach ein. Ebenso kannst du die Höhe der Container anpassen. So kann ein Container eine automatische Höhe einnehmen oder die volle Fensterhöhe. Zwischengrößen von winzig, über klein bis groß sind ebenfalls möglich.

Dank der Einstellungsmöglichkeiten für die Containergrößen bist du sehr flexibel, was die Darstellung und Gestaltung deiner Website angeht.

Inhalte per Text- und Bildbearbeitung hinzufügen


Integrierte Bildbearbeitung

Hat man eine Seite in ihren Grundfesten angelegt, geht es an die Fleißarbeit. Texte und Bilder müssen eingebunden werden. Dank integrierter Textverarbeitung und Bildbearbeitung gelingt dies schnell und ist dazu noch unkompliziert.


Integrierte Textverarbeitung

Mit der integrierten Bildbearbeitung werden Bilder beschnitten und vergrößert beziehungsweise verkleinert. Du kannst das Bild drehen und einen Ausschnitt definieren. Bildmaterial steht einem über eine eigene Mediengalerie mit zahlreichen kategorisierten Fotos zur Verfügung. Natürlich ist auch das Hochladen eigener Bilder oder der Verweis auf externe Quellen möglich.

Texte gibst du direkt im Website-Builder ein. Dank einer integrierten Textverarbeitung stehen dir gängige Formatierungsmöglichkeiten zur Verfügung. Schriftart und -größe, sowie -farbe lassen sich ebenso definieren wie die Textausrichtung. Auch Aufzählungen, Einrückungen und Textlinks sind möglich.

Pro-Modus für mehr Möglichkeiten

Standardmäßig wird Simbla in einem Modus ausgeführt, der die gestalterische und inhaltliche Bearbeitung ausschließlich über eine grafische Bedienoberfläche ermöglicht. Im Pro-Modus stehen dir weitere Funktionen für eine weitergehende Bearbeitung zur Verfügung.

So kannst du beispielsweise die einzelnen Elemente eines Bereiches – Container, Reihen und Zeilen – individuell bearbeiten. Der Pro-Modus wird einfach über eine Schaltfläche ein- und ausgeschaltet. Er sollte von erfahrenen Nutzern verwendet werden, da die komplexen Bearbeitungsmöglichkeiten auf Kosten der Übersichtlichkeit gehen. Allerdings hat man im Pro-Modus die volle Kontrolle über alle Inhalte.


Darstellung im Pro-Modus

Außerdem gibt es im Pro-Modus ein spezielles HTML-Element. Dieses erlaubt es, eigenen HTML-Quelltext in die Seite einzubinden. Alles, was Simbla als fertiges Inhaltselement nicht anbietet, kann auf diese Weise selbst ausgezeichnet werden.

Individuelles CSS, JavaScript und Media-Queries

Wem die vielseitigen Möglichkeiten, Inhalte bereitzustellen und zu gestalten, nicht ausreichen, kann selbst noch ganz individuell CSS und JavaScript per Editor eingeben. Vor allem die Möglichkeit, eigenes JavaScript zu hinterlegen, gibt dir sehr viele Freiheiten.

Über den Media-Queries-Editor bearbeitest du CSS sogar für spezielle Geräte-, beziehungsweise Browsergrößen. Standardmäßig sind Pixelangaben für Tablets und Smartphones hinterlegt. Aber auch die Angabe einer individuellen Auflösung ist möglich.

Responsive Vorschau

Das Besondere an Simbla ist – wie bereits erwähnt – das responsive Design aller Websites. Es gibt eine Preview-Seite, welche die Website wahlweise als Desktop-, Tablet- oder Smartphone-Version ausgibt. Bilder werden im responsiven Layout entsprechen verkleinert dargestellt. Das Menü wird per Burger-Icon eingeblendet und in Spalten angeordnete Inhalte werden untereinander dargestellt.


Vorschau für verschiedene Geräte

Beim Anlegen und Gestalten einer Website mit Simbla muss man sich selbst keinerlei Gedanken über die Darstellung auf Mobilgeräten machen. Gerade Laien und semi-professionellen Webdesignern dürfte dieser Ansatz sehr entgegen kommen.

Kostenloser Plan und kostenpflichtige Pläne

Eine einfache Website, die wenig Speicherplatz benötigt, kann kostenlos angelegt werden. Wer allerdings mehr als 300 Megabyte Speicherplatz und Bandbreite benötigt, muss auf einen der kostenpflichtigen Pläne umsteigen. Diese kosten zwischen 72 und 288 Euro im Jahr und verfügen über mehr Speicherplatz und Bandbreite.

Außerdem hat man bei den kostenpflichtigen Plänen die Möglichkeit, die Website über eine eigene Domain zu erreichen. Ansonsten muss man sich damit begnügen, dass die Website unter „sites.simbla.com/NameDerWebsite“ aufzufinden ist.

Fazit

Simbla beeindruckt mit seiner einfach zu bedienenden grafischen Oberfläche. Trotz der vielen inhaltlichen und gestalterischen Möglichkeiten ist alles übersichtlich gehalten. Dank des Pro-Modus haben erfahrene Nutzer noch sehr viel mehr Möglichkeiten, ein Webprojekt zu individualisieren.

Der Quelltext wird per HTML5 ausgegeben und jede Seite ist responsiv gestaltet – optimiert für Desktopgeräte, Tablets und Smartphones. Wer beruflich nichts mit Gestaltung und Webentwicklung am Hut hat, wird mit Simbla ebenso zurechtkommen und Freude dran haben, wie erfahrene Webentwickler und professionelle Designer.

Simbla definiert sich als „Easy Website Builder„, wobei das Easy nicht misszuverstehen ist. Simbla ist einfach zu verwenden, bietet aber nicht nur einfache Funktionalitäten.

(dpe)

Kategorien
Design HTML/CSS Responsive Design Webdesign

Benutzerfreundlichkeit für moderne, responsive Website-Layouts

Modernes Webdesign verzichtet auf die Methoden, mit denen wir gestern eine Website erstellt haben. Wer braucht noch XHTML und CSS2, wenn uns schon lange moderne HTML5- und CSS3-Techniken zur Verfügung stehen? Natürlich es kann es für den einen oder anderen Altgedienten schwierig sein, sich von tief verwurzelten Techniken zu trennen und einem neuen Workflow begeistert entgegenzusehen. Dennoch werden auch gestalterisch Starrsinnige auf Dauer nicht an der Erkenntnis vorbei kommen, dass modernes und zugängliches Webdesign mehr Liebe zum Detail erfordert, wenn Benutzerfreundlichkeit über alle Geräte die Maxime ist.

Benutzerfreundlichkeit für moderne, responsive Website-Layouts

Die folgenden Design-Tipps sind  gedacht für jene, die sich mit dem Konzept der Zugänglichkeit im (responsiven) Webdesign beschäftigen möchten. Dabei werde ich nicht mehr von einem responsiven Webdesign sprechen, denn ich halte diesen Begriff für veraltet. Responsives Webdesign sollte heute bereits als Normalität angesehen werden. Daher spreche ich im folgenden nur noch von Webdesign oder von Webentwicklung und meine dabei stets responsive Ansätze. Heute sollte jede Website in einer ansprechenden Art und Weise in Handarbeit gestaltet werden, um ein möglichst großes Publikum erreichen zu können.

Vernünftig zu lesende Schriftarten verwenden

Text auf einer Website ist das wichtigste Element, denn jede Website transportiert eine Botschaft zu den Lesern. Wenn jedoch Besucher mit weniger guten Augen die Website besuchen und den Inhalt nicht erfassen können, ist das schlecht. Die einzige Botschaft, die dann transportiert wird, ist: »wir müssen leider draußen bleiben«. Daher ist es wichtig, der Schriftart, der Schriftgröße, dem Kontrast und der Zeilenhöhe ebenso Aufmerksamkeit zu widmen, wie dem Freiraum zwischen den Absätzen. All diese Dinge spielen eine wichtige Rolle bei der Lesbarkeit von Texten.

Schriftarten auf  Websites sollten sich in der Größe der Bildschirmauflösung anpassen können. Dies kann man schnell mit einer entsprechenden CSS-Notierung der Schriftgrößen in REM erreichen. Hier solltest du einige Tests machen, denn zu kleine Schriften auf einer Smartphone- oder Tablet-Ansicht zerstören schnell die Wirkung des Designs.

Perfekt gewählte Schriftgrößen im Responsive Webdesign

Als Beispiel nehmen wir uns hier die Website der Todoist-App. Die Seite verwendet verschiedene Schriftarten und Größen in Verbindung mit einem „Hero“-Hintergrundbild. Auf kleineren Geräten wird das Hintergrundbild anders gesetz. Die Smartphone-Ansicht unterscheidet sich allerdings signifikant. Was gut zu sehen ist, ist, dass sich die Schriftgrößen wunderbar anpassen.

Ein weiteres wirklich gutes Beispiel ist die Website von MightyText. Auch hier kann man beobachten, wie sich die Schriftgröße und die Zeilenhöhen einer kleineren Bildschirmauflösung  anpassen. Das nenne ich gelungenes (responsives) Webdesign.

MightyText

Gelungene Interaktionen

Der überwiegende Teil moderner Mibilnutzer hat kein Problem im Umgang mit einem modernen Smartphone oder Tablet. Touch, Swipe, Tippen und Halten und die anderen Techniken sind vielen Menschen bereits in Fleisch und Blut übergegangen. All diese Techniken sind Teil einer gelungenen, mobilen Benutzeroberfläche. Damit diese Techniken auf einem Smartphone gut funktionieren, bedarf es jedoch einiger Anpassungen. Einfach nur die Bilder und die Textgrößen anpassen, reicht nicht.

Browser-Kompatibilität prüfen

Die Browser-Kompatibilität ist heute nicht mehr die katastrophale Bedrohung von einst. Allerdings sollte trotzdem ein Test der Website mit allen mobilen Browsern erfolgen. Das Ziel ist hierbei, eine nahtlose Schnittstelle auf so vielen Geräten und Browsern wie nur möglich zu gestalten.

Optimal zu bedienende Navigation gestalten

Die Navigation ist eines der wichtigsten Elemente im Webdesign. Hier muss zuerst eine Form eines Navigations-Menüs gefunden werden, das gerade auf kleineren Bildschirmen mit Touch-Bedienung gut funktioniert. Auch hier kann Todoist wieder als Beispiel dienen. Die Seite verwendet ein modernes, verstecktes Menü. Erst bei Bedarf klappt der User das Menü auf und kann es ohne Probleme auch mit weniger filigran konstruierten Fingern auf einem Smartphone-Bildschirm nutzen. Eine Navigation dieser Art bietet eine hervorragende Benutzerfreundlichkeit.

Das vorbildliche Navigations-Menü von Todoist

Benutzerfreundlichkeit: Trenne dich vom Unwesentlichen

Responsive Benutzerfreundlichkeit heißt im Klartext Geschwindigkeit, Effizienz und Klarheit. Bei einer Website, die für große Bildschirme erstellt wurde, hat man ausreichend Raum für Elemente. Du kannst zwei Sidebars verwenden, etliche Werbebanner, viele Widgets und so weiter. Kurzum: Wenn man möchte, kann man das Layout vollstopfen. Abgesehen davon, dass dies auch bei einer für normale Bildschirme designten Website keine gute Idee ist, wird dieses Vorhaben bei einer für mobile Anwendung vorgesehenen Website total scheitern.

Ein responsives Design stellt auf einem Smartphone-Bildschirm alle Elemente untereinander dar. Um eine Website auf die Anwendung mit mobilen Geräten zu optimieren, heißt es, sich vom Unwesentlichen zu trennen. Nicht benötigte Inhalte sollten also entfernt werden.

Diese Elemente sind auf kleinen Auflösungen verzichtbar

Noch mal: für eine wirklich gut auf mobile Ansichten optimierte Website brauchen wir Geschwindigkeit, Effizienz und Klarheit. Alles nicht wirklich benötigte muss also weg. Zuerst einmal könnte das die Sidebar sein. Sie enthält zumeist nichts Wichtiges für Smartphone-User. Auch der Footer sollte entmüllt werden. Ist er überhaupt nötig? Oder ist nur die Anzeige der beiden wichtigen Links »Kontakt und Impressum« wirklich nötig? Ich tendiere immer zu letzterem.

Social-Sharing-Links können am unteren Ende des Bildschirms responsiv angebracht werden. Extragroße Banner gehören definitiv verkleinert und Werbung sollte nur sehr sparsam eingebunden werden. Vielleicht kann sogar nur ein sehr schnell ladender Werbeblock oberhalb des Logos Verwendung finden.

Auf kleinen Bildschirmen alles unwesentliche weglassen

Auf der Beispielseite ist nur ein einzelnes Werbeelement eingebunden, welches zudem noch auf Geschwindigkeit optimiert wurde. Es besteht lediglich aus einer verlinkten Grafik. Geschwindigkeit ist sehr wichtig auf den mobilen Ansichten, denn nicht jeder Smartphone-User hat das Hochgeschwindigkeitsnetz LTE zur Verfügung. Lädt die Website zu lang, wird der Vorgang abgebrochen und deine vielleicht sehr interessante Website nicht besucht.

Die Flexibilität der Inhaltsbereiche

Bei der Gestaltung eines ansprechenden Layouts solltest du stets deinem Instinkt vertrauen. Das beinhaltet auch das Nachdenken über die einzelnen Inhaltsbereiche. Wie werden sie sich bei einer bestimmten Auflösung verhalten? Versuche stets, die Website aus den Augen eines Besuchers zu sehen. Hierbei sind die Inhaltsbereiche sehr wichtig, denn sie müssen sich flexibel den einzelnen Auflösungen anpassen. Dabei funktionieren große Full-Size-Layouts nur selten ohne erhebliche Anpassungen auf kleineren Bildschirmen.

Hier bist du als Designer besonders gefragt, denn bereits in der Planungsphase einer Website sollten die mobilen Ansichten berücksichtigt werden.

Ein Beispiel sehr guter Flexibilität

Die Website von Storify bietet ein hervorragendes Beispiel für die Flexibilität der einzelnen Inhaltsbereiche. Wenn du diese Website scrollst, wirst Du viele Blockelemente bemerken, die abwechselnd links oder rechts aneinander liegen. Doch sobald die Website mit mobilen Geräten angesehen wird, ändern sich diese Bereiche und gliedern sich untereinander an. Die unwesentlichen Elemente werden ausgeblendet, nur das Wesentliche bleibt in der Ansicht auf mobilen Endgeräten erhalten.

Die Website auf großen Bildschirmen
Storify in der Ansicht auf großen Bildschirmen
Die Website auf einem Smartphone betrachtet
Storify auf kleinen Bildschirmen

Wenn das Layout schrumpft, braucht es mehr Finesse, um es ansprechend darstellen zu können. Du wirst mit Sicherheit nicht immer die perfekte Lösung finden. Doch es ist deine Aufgabe, einen gut funktionierenden Kompromiss im Sinne der Benutzerfreundlichkeit zu finden.

Benutzerfreundlichkeit und die Mobile First Strategie

Ein wirklich empfehlenswertes Buch zum Webdesign unserer Tage ist »Mobile First« von Luke Wroblewski. Es ist gut zu lesen und beschreibt anschaulich das Konzept hinter dem Mobile-First-Gedanken. Zumeist ist es wesentlich einfacher, mit einem ansprechenden mobilen Design für Smartphones zu beginnen, um sich dann langsam über die Tablets zu den großen Monitoren für Notebooks und PCs hochzuarbeiten.

Diese Art der Herangehensweise zwingt Dich, zuerst über die wichtigsten Schlüsselelemente nachzudenken. Danach bekommst du dann die Freiheit, je nach wachsendem Bildschirm ergänzende Elemente hinzuzufügen. Mobile First heißt, nur die wichtigsten Design-Elemente zu gestalten, und nach und nach daraus die Full-Size-Version zu entwickeln. So arbeitet die Website auf jeder Bildschirmauflösung optimal benutzerfreundlich.

Fazit

Mit der richtigen Herangehensweise ist (responsives) Webdesign bedeutend einfacher. Es ist erstaunlich, welche Ergebnisse man erreichen kann, wenn zuvor genau bedacht wurde, wie die Website auf welcher Auflösung aussehen soll. Webdesign ist keine leichte Aufgabe in der heutigen Zeit. Umso wichtiger ist es, stets am Ball zu bleiben und sich täglich den neuen Herausforderungen zu stellen. Denn statische Websites locken heute keinen Hund mehr hinter dem Ofen hervor. Hierzu braucht es Kreativität, Planung und die Sicht aus der Perspektive eines Besuchers.

Links zum Beitrag:

(dpe)

*= Affiliate Link: Dr. Web erhält eine Provision für Verkäufe über diesen Link. Für den Käufer ist das Produkt dadurch weder billiger noch teurer.

Kategorien
Design Responsive Design Webdesign

Adobe Content Research Report: Immer mehr Geräte zum Surfen im Einsatz

Dass das mobile Internet stetig an Bedeutung gewinnt, dürfte kaum jemand in Frage stellen. Smartphones und Tablets werden immer häufiger genutzt, um Websites zu besuchen. Adobe hat in einer internationalen Umfrage nun genauer hinterfragt, wie viele unterschiedliche Geräte Internetnutzer verwenden und wie viele Informationsquellen genutzt werden. Im Content Research Report hat Adobe die Ergebnisse der Umfrage zusammengefasst.

adobe-content-research-2015

Durchschnittlich fünf Geräte und elf Informationsquellen

In der internationalen Umfrage wurden im Oktober 2015 je 1.000 Konsumenten in den USA, dem Vereinigten Königreich, Frankreich, Deutschland, Australien und Japan befragt. Dass Nutzer sich nicht mehr nur auf ein Gerät beschränken, wenn es ins Internet geht, überrascht kaum. Aber die Studie sorgt dennoch für einige Überraschungen. So sind es in Deutschland durchschnittlich fünf verschiedene Geräte pro Nutzer, mit denen Zeit im Internet verbracht wird.

Dabei sind der klassische Desktoprechner und das Notebook mit 78 Prozent nach wie vor die Geräte, die am häufigsten verwendet werden. Es folgen Smartphones mit 69 und Tablets mit 26 Prozent. Bei der Generation der „Millenials“, die zwischen 1977 und 1998 geboren sind, ist der Anteil der Smartphones bei 71 Prozent und der von Desktoprechnern und Notebooks nur bei 67 Prozent. Hier überwiegen also Mobilgeräte, was wenig überrascht und dem Trend entspricht, den man seit Jahren feststellen kann.

adobe-content-research-2015_devices
Anzahl der Geräte und Informationsquellen

In der Umfrage hat Adobe auch nach den Quellen gefragt, die Internetnutzer besuchen, um nach Informationen zu fahnden. Hier sind klassische Suchmaschinen mit 64 Prozent nach wie vor ganz vorne. Es folgen Messaging-Dienste wie WhatsApp mit 57 Prozent und soziale Netzwerke wie Facebook mit 47 Prozent. Das klassische Fernsehen als Informationsquelle liegt mit 34 Prozent noch vor E-Mail-Newslettern, die bei 30 Prozent liegen.

Zwei Geräte gleichzeitig im Einsatz

Bei der Frage, mit welchem Gerät der Durchschnittsnutzer sich im Internet bewegt, setzen viele auf mehr als ein Gerät. Durchschnittlich sind bei den deutschen Befragten zwei Geräte gleichzeitig im Einsatz.

Insgesamt nutzen 86 Prozent der befragten Deutschen mehr als einen Screen, wenn sie im Internet unterwegs sind.

Gute Gestaltung wichtig

Adobe hat sich in seiner Umfrage auch mit der Frage beschäftigt, wie wichtig den Nutzern die Gestaltung von Inhalten ist – vor allem dann, wenn man nur 15 Minuten Zeit hat, um Inhalte zu konsumieren. Hier ist es 49 Prozent der befragten Deutschen wichtig, dass etwas „schön gestaltet“ ist.

Schlechte Gestaltung ist für viele auch ein Grund, das Gerät zu wechseln oder eine Website ganz zu verlassen. So wechseln 47 Prozent das Gerät und 30 Prozent verlassen eine Seite, wenn die Gestaltung nicht ansprechend ist.

Auch zu lange Ladezeiten und zu langatmige Inhalte sind Gründe, das Gerät zu wechseln oder eine Website komplett zu verlassen.

Was Webdesigner berücksichtigen sollten

Die Umfrage von Adobe zeigt, wie bedeutend die Gestaltung einer Website und die Aufbereitung von Inhalten auf einer Website ist. Gerade auf mobilen Geräten ist es wichtig, dass eine Website so gestaltet ist, dass Inhalte schnell bereitstehen und schnell konsumiert werden können.

Zu einer guten Gestaltung gehört natürlich, dass die Navigation übersichtlich und leicht zugänglich ist und dass Texte gut lesbar und Bilder für das jeweilige Gerät entsprechend skaliert sind.

Kompletter Report kostenlos

Der komplette Content Research Report von Adobe ist kostenlos als PDF-Datei erhältlich. Es gibt ihn in einer internationalen Version sowie in einer speziellen für den deutschen Raum zugeschnittenen Version. Letztere umfasst 28 Seiten, auf denen sehr anschaulich die Ergebnisse präsentiert und erläutert werden.

(dpe)

Kategorien
Boilerplates & andere Tools Design Essentials HTML/CSS Programmierung Responsive Design Webdesign

15 Webseiten voller kostenloser Bootstrap-Themes

„Wer suchet, der findet.“ In Kenntnis der intelligenten, nahezu allumfassenden Suchmaschine Google ist es ziemlich schwer, dieses Zitat zu bestreiten. Wenn die Zeit allerdings gegen dich spielt, wirst du um effiziente Wege, den Prozess etwas zu verkürzen, kämpfen. In diesem Fall sind Verzeichnisse, Sammlungen und Artikel mit einem schnellen Zugang zu einer Masse von hilfreichen Links und Ressourcen, die dich schnell mit den benötigten Elementen versorgen, sehr willkommen. So baust du dir einen Werkzeugkasten auf, der immer weiter gefüllt werden kann. Der folgende Artikel könnte ein Teil dieses Kastens sein.

websitesfreebootstrap-teaser_DE

Wenn du auf der Suche nach ein paar gutaussehenden, professionell angefertigten Bootstrap-Schablonen bist, die entweder als Startpunkt für eine weitere Umwandlung zu einem CMS-Theme, oder schnell individualisiert und angepasst als eine simple, dennoch funktionelle Webseite benutzt werden können, dann ist unsere Liste sicherlich hilfreich. Heute haben wir 15 Ressourcen mit kostenlosen Bootstrap-Themes zusammengestellt.

BootstrapZero

BootstrapZero
Features: Bootstrap-Themes, Starter-Themes, zugängliche Vorlagen

ThemeForces

themeforces
Features: Bootstrap-Themes, WordPress-Themes

GrayGrids

graygrids
Features: Webseiten-Vorlagen, Verwaltungsthemes

UniqueCrown

unique crown
Features: zugängliche Vorlagen

The Bootstrap Themes

the bootstrap themes
Features: Startseiten, Portfolio-Vorlagen

Graphberry

graphberry
Features: Startseiten, Portfolios

ShapeBootstrap

shape bootstrap
Features: Verwaltungs- und Firmenschablonen, WordPress-Themes, Joomla-Vorlagen

Bootswatch

bootswatch
Features: viele verschiedene lebhafte Themes

Start Bootstrap

start bootstrap
Features: Einseiter, Startseiten, Portfolio-Vorlagen

Design Bootstrap

design bootstrap
Features: Portfolios, Themes, Codeschnipsel

Template Garden

template garden
Features: Vorlagen für Multipage-Websites, Portfolios

WebThemez

webthemez
Features: verschiedene Bootstrap-Vorlagen

W3 Layouts

w3 themes
Features: enorm viele verschiedene Bootstrap-Themes und HTML-Vorlagen

Bootstrap Taste

bootstrap taste
Features: zugängliche Bootstrap-Themes

Black Tie

blacktie
Features: kostenlose und erstklassige Bootstrap-Vorlagen und WordPress-Themes

Wenn ihr noch andere zuverlässige Ressourcen kennt, die Entwicklerkollegen helfen können, teilt sie mit uns im Kommentarbereich.

(dpe)