Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2015-03-26T09:51:52Z t3n Redaktion http://t3n.de/tag/webdesign Spaß mit Scrum: Startup veröffentlicht quelloffenes Kartenspiel http://t3n.de/news/scrum-planungspoker-karten-projektmanagement-602314/ 2015-03-26T09:51:52Z
Planungspoker ist ein beliebtes Mittel zur Aufwandsschätzung. Jetzt hat ein Startup ein sehr schickes Scrum-Kartendeck für diesen Zweck erstellt und unter der Creative-Commons-Lizenz veröffentlicht.

Planungspoker ist ein beliebtes Mittel zur Aufwandsschätzung. Jetzt hat ein Startup ein sehr schickes Scrum-Kartendeck für diesen Zweck erstellt und unter der Creative-Commons-Lizenz veröffentlicht.

Scrum: Planungspoker zur Aufwandsschätzung

Beim Planungspoker (auch Scrum-Poker genannt) geht es darum, den Aufwand für ein geplantes Feature zu schätzen. Wie der Name bereits andeutet, bedient ihr euch dabei eines speziellen Kartendecks. Darauf befinden sich Zahlenwerte. Je höher der Wert, desto höher der geschätzte Aufwand. Ziel ist es, dass alle Teammitglieder eine Schätzung abgeben. Nach Abklärung genereller Fragen zu der geplanten Funktion muss jedes Teammitglied eine Karte mit seiner Schätzung verdeckt vor sich ablegen. Anschließend sollten die Karten möglichst zeitgleich aufgedeckt werden.

Die Idee dahinter: Durch das zeitgleiche Aufdecken soll niemand durch den Schätzwert eines Kollegen beeinflusst werden, um so eine möglichst realistische Schätzung abzugeben. Kann ein Teammitglied den Aufwand partout nicht einschätzen, kann er oder sie auch eine Fragezeichenkarte ablegen. Außerdem gibt es im Regelfall auch eine Karte, auf der sich eine Kaffeetasse befindet. Sie zeigt an, dass jemand eine Pause braucht. Nach dem Aufdecken können die Teammitglieder ihre Schätzungen untereinander diskutieren.

Scrum: So hübsch kann Planungspoker aussehen. (Foto: Redbooth)
Scrum: So hübsch kann Planungspoker aussehen. (Foto: Redbooth)

Projektmanagement mit Scrum: Startup veröffentlicht schickes Planungspoker-Kartendeck

Es gibt verschiedene Hersteller, die spezielle Kartendecks für diesen Einsatzzweck herstellen. Die meisten davon sind zwar funktional, letztlich aber nicht sonderlich hübsch. Das kalifornische Startup Redbooth schien mit dem Design der verfügbaren Kartendecks ebenfalls nicht zufrieden und hat daher ein eigenes Planungspoker-Kartenspiel entworfen. Damit auch andere Unternehmen etwas von den schicken Karten haben, hat Redbooth die Karten unter der Creative-Commons-Lizenz CC BY 3.0 veröffentlicht.

Wer möchte, kann sich die Scrum-Poker-Karten von GitHub herunterladen. Die Karten stehen dort wahlweise im PNG- oder im SVG-Format zum Download bereit. Ihr könnt sie also entweder selbst Ausdrucken oder bei bedarf eine Druckerei dafür engagieren. Letzteres ist vermutlich sinnvoller, wenn ihr möglichst hochwertige Karten haben wollt. Das ist zwar kostspieliger, als ein normales Kartenspiel oder eine entsprechende App einzusetzen, dafür habt ihr bei eurem nächsten Planungsmeeting aber auch deutlich hübschere Karten zur Verfügung.

Wer sich mit der agilen Methode zum Projektmanagement überhaupt nicht auskennt, sollte einen Blick auf unsere Scrum-Einführung werfen.

via news.ycombinator.com

]]>
Kim Rixecker
t3n sucht freie Autoren (m/w) für das Ressort Design http://t3n.de/news/t3n-sucht-freie-autoren-design-602117/ 2015-03-25T14:45:37Z
Du willst auf freier Basis schreiben, hast einen guten Stil und (Web)Design gehört zu deinen thematischen Steckenpferden? Dann haben wir was für dich: Wir suchen ab sofort freie Autoren zur …

Du willst auf freier Basis schreiben, hast einen guten Stil und (Web)Design gehört zu deinen thematischen Steckenpferden? Dann haben wir was für dich: Wir suchen ab sofort freie Autoren zur Unterstützung unseres Design-Ressort.

Du bist Spezialist für (Web)Design und Usability? Die gängigen Tools und neuesten Trends kennst du aus dem Effeff? Über Farbenlehre weißt du genauso gut Bescheid wie über Homepage-Baukästen oder CMS? Vielleicht hast du ja Lust, für t3n.de zur Feder zu greifen!

Uns faszinieren neue Technologien, das Web und digitale Geschäftsmodelle. Darüber schreiben wir im t3n Magazin und auf t3n.de. Mit viel Liebe zum Detail. Ab sofort suchen wir Autoren oder Autorinnen auf freier Basis für unser Ressort Design.

Als freier Autor oder freie Autorin verfasst du regelmäßig Beiträge für t3n.de und bringst eigene Themenvorschläge ein. Regelmäßig heißt: Du kommst täglich dazu, für uns News, Trendstücke oder nutzwertige Tipps und Tricks zu verfassen.

Wir freuen uns auf deine Bewerbung, wenn ...

  • ... du erste journalistische Erfahrungen und eine gute Schreibe hast.
  • ... du langfristig und auf regelmäßiger Basis für uns schreiben willst.

Bei Interesse freuen wir uns auf deine Bewerbung unter jobs@yeebase.com. Dein Ansprechpartner ist Florian Blaschke.

]]>
t3n Redaktion
Der beste Monitor für Webdesign? So findest du ihn http://t3n.de/news/beste-monitor-fuer-webdesign-601869/ 2015-03-25T07:13:14Z
Der beste Monitor für Webdesign – gibt es den überhaupt? Unser Ratgeber zeigt, worauf ihr beim Kauf achten solltet.

Der beste Monitor für – gibt es den überhaupt? Unser Ratgeber zeigt, worauf ihr beim Kauf achten solltet.

Grafikdesigner, Gamer, Webdesigner oder „ganz normaler“ Nutzer: Die Anforderungen an einen Monitor sind ganz unterschiedlich. Während die einen großen Wert auf schnelle Reaktionszeiten legen, kommt es den anderen eher auf das Aussehen des Screens oder die Auflösung an. Selbst für Webdesigner dürfte es schwer werden, ein einheitliches Anforderungsprofil an eines der für sie wohl wichtigsten Arbeitsgeräte zu definieren.

Die Anforderungen an einen Monitor sind von Webdesigner zu Webdesigner unterschiedlich. (Foto: flickr / Sebastiaan ter Burg)
Die Anforderungen an einen Monitor sind von Webdesigner zu Webdesigner unterschiedlich. (Foto: flickr / Sebastiaan ter Burg)

Allgemeingültigkeit hat nur der Ratschlag, nicht in den nächsten Elektronikgroßmarkt zu wandern und den günstigsten Monitor mitzunehmen. Macht man sich als Webdesigner auf die Suche nach dem für einen selbst am besten geeigneten Monitor, kann es hilfreich sein, sich die folgenden Fragen zu stellen.

Der beste Monitor für Webdesign?

Der beste Monitor für Webdesign bietet freilich eine möglichst hohe Auflösung und punktet auch sonst in allen relevanten Performance-Bereichen. Und dass die neueste Display-Technik verbaut ist, versteht sich ja wohl von selbst. Ein besonders für Webdesign geeigneter Monitor ist farbecht und bietet umfassende Möglichkeiten zur Kalibrierung. Je größer der Screen, desto besser. Außerdem zeichnet sich ein vorzüglicher Monitor durch viele Zusatzfeatures aus und kostet so viel wie ein Kleinwagen der gehobenen Mittelklasse.

Ist das wirklich so?! In den seltensten Fällen dürfte die oben genannte Kombination an Eigenschaften wirklich den perfekten Monitor für Webdesigner beschreiben. Doch was zählt dann?

Welches Panel eignet sich?

Bei Monitoren kommen unterschiedliche Technologien zum Einsatz. Die meisten modernen Displays fallen in eine von vier Kategorien: TN (Twisted Nematic), VA ( Vertical Alignment), IPS (In-Plane-Switching) und PLS (Plane-Line-Switching).

Bei den meisten Displays handelt es sich heute um Twisted-Nematic-Panels. Diese Monitore sind preisgünstig und verfügen über gute Reaktionszeiten. Dafür sind sie nicht sonderlich genau und neigen zu Verzerrungen. Damit eignen sich TN-Monitore in der Regel nur bedingt für professionelle Webdesigner. Etwas besser bei der Farbqualität, dem Blickwinkel und den weiteren Aspekten schneiden VA-Panels ab. Entsprechend sind diese Displays auch teurer als Twisted-Nematic-Panels.

Designer, die großen Wert auf Farbqualität und vom Blickwinkel unabhängige korrekte Darstellung legen, sollten sich Bildschirme mit IPS- oder PLS-Panel ansehen. IPS-Panels sind zwar recht kostspielig, aber dennoch oft erste Wahl für Designer. Noch ein wenig teurer, dafür aber in der Regel mit noch mehr Features ausgestattet, sind PLS-Bildschirme.

Spielt die Größe eine Rolle?

(Foto: Apple)
Der beste Monitor für Webdesign: Die richtige Größe ist nicht nur eine Preisfrage. (Foto: Apple)

Größer ist immer besser? Lassen sich doch mit zunehmender Bildschirmdiagonale mehr Details eines Designs erkennen? Eine solche Antwort greift zu kurz, denn es kommt in erster Linie auch auf die Art der Projekte an, die ein Webdesigner in der Regel in der Pipeline hat. Bei der Frage nach der richtigen Display-Größe spielen allerdings auch Aspekte wie beispielsweise die Schreibtischgröße eine nicht unerhebliche Rolle.

Kaufwillige Designer sollten irgendwo bei 27 Zoll anfangen und dann entscheiden, ob es eine Nummer kleiner oder größer sein soll. In den meisten Fällen reichen 27 Zoll aber aus. Diese Monitorgröße ist darüber hinaus nicht nur so dimensioniert, dass sie auf den meisten Schreibtischen Platz findet, sondern sie reißt in der Regel auch kein riesiges Loch in das Budget.

So viele Pixel wie möglich?

Ähnlich wie bei der Größe hört man auch bei der Auflösung häufig ein „Mehr ist besser!“. Mehr Pixel wirken sich in größerem Detailreichtum aus. Mittlerweile nennen viele Nutzer ein Gerät ihr Eigen, das eine deutlich höhere Auflösung als der herkömmliche HD-Fernseher bietet. Wer Designs erstellt, die beispielsweise auf einem Retina-Display oder anderen Screens, die Pixel im Überfluss bieten, betrachtet werden, sollte auch über ein entsprechendes Arbeitsgerät in Form eines hochauflösenden Monitors verfügen.

Wie hoch die Auflösung genau sein muss, kann nur jeder Webdesigner für sich selbst beantworten. Ultra-HD-Displays bieten 3.840 x 2.160 Pixel, während das typische Full-HD-Panel auf 1.920 x 1.080 Pixel kommt. Irgendwo dazwischen liegt Wide-Quad-HD mit 2.560 x 1.140 Pixeln.

Matt oder „glossy“?

Wer schon mal ein Design auf einem matten Display mit dem selben Design auf einem „glossy“ Screen verglichen hat, weiß, dass sich unter Umständen ein erschreckender Unterschied offenbart. Der mag zwar durch eine Kalibrierung als Makulatur erscheinen, aber das sollte man in jedem Fall im Hinterkopf behalten, wenn man sich für die eine oder andere Art Monitor entscheidet.

Viel wichtiger sind bei dieser Frage aber ohnehin ergonomische Überlegungen, denn ein nicht matter Screen sollte wirklich nur dann zum Einsatz kommen, wenn der Arbeitsplatz recht dunkel ist, beziehungsweise wenn kein direktes Licht auf den Monitor fällt. Die Reflektionen auf einem glossy Display können nicht nur Webdesigner wahnsinnig machen.

Sind Farbskala und Kalibrierung nur was für Print und Fotos?

Grafikdesigner, die vornehmlich mit Printprodukten zu tun haben, und Fotografen legen naturgemäß großen Wert darauf, dass Graustufen und Farben auf dem Monitor möglichst exakt so aussehen wie in gedrucktem Zustand. Außerdem muss der Monitor für diese Berufsgruppen in der Regel ein möglichst großes Farbspektrum bieten. Sollte dir das als Webdesigner ebenfalls Kopfzerbrechen bereiten? Jein. Zumindest aber solltest du diese Aspekte nicht völlig außer Acht lassen.

Das t3n Magazin: Wir setzten auch in Zukunft auf die gedruckte Version unseres Magazins.
Wer wie unsere Grafiker auch mit Printrpodukten zu tun hat, sollte beim Monitorkauf noch genauer hinsehen. (Foto: t3n)

Nicht ganz so wichtig ist die Farbskala – auch wenn viele Designer dem Spektrum der darstellbaren Farben übermäßige Bedeutung beimessen. Wer in erster Linie mit Webdesign und nicht mit Print beschäftigt ist, kann diesen Aspekt getrost vernachlässigen. Immerhin spielt es keine Rolle, wie grandios viele unterschiedliche Farben euer Monitor darstellen kann. Viel wichtiger ist, was die Monitore der Nutzer anzeigen. Und das ist in der Regel nicht das Adobe-RGB-Spektrum und schon gar nicht der Wide-Gamut-RGB-Farbraum. Die meisten handelsüblichen Monitore sind auf sRGB ausgerichtet – das sollte entsprechend auch die Mindestvoraussetzung für euren Monitor sein.

Bei der korrekten Darstellung von anzeigbaren Graustufen und Farben sollten auch Webdesigner weniger Kompromisse eingehen. Wer Wert auf höhere Farbqualität legt, sollte nach Monitoren mit einer hohen LUT-Nummer (LookUp-Table) suchen. Wer auch mit Printprodukten in Berührung kommt und besonderen Wert auf die Farbqualität legt, sollte sich die teuren AH-IPS-Panels (Advanced-High-Performance-In-Plane Switching) ansehen und darauf achten, dass der entsprechende Screen über einen hohen LUT-Wert verfügten (beispielsweise 14-bit).

Ob ihr euch für einen Monitor mit eingebauter Kalibrierung oder eine externe Dritthersteller-Lösung (Hardware oder Software) entscheidet, ist in erster Linie eine Preisfrage. In jedem Fall solltet ihr auch über die Qualität eurer Grafikkarte nachdenken. Derartige Überlegungen würden den Umfang dieses Artikels allerdings sprengen.

Welche Anschlüsse und Zusatzfeatures?

Zusatzfeatures kosten extra. So einfach ist das. Daher sollte man sich nicht nur als Webdesigner überlegen, ob man Extras wie eine schnelle Reaktionszeit, einen TV-Tuner, eine eingebaute Webcam oder Touchscreen-Funktionalität braucht. Ein Feature, auf das ihr nicht verzichten solltet, ist die Farbkalibrierung – entweder fest verbaut oder vom Dritthersteller als externe Lösung.

Wer mehrere Monitore in Serie schalten will, sollte auch auf die Anschlussmöglichkeiten achten. (Foto: flickr / Travis Isaacs)
Wer mehrere Monitore in Serie schalten will, sollte auch auf die Anschlussmöglichkeiten achten. (Foto: flickr / Travis Isaacs)

Viel wichtiger als die Zusatzfeatures sind die Anschlüsse des neuen Monitors. Wollt ihr mehrere Displays gleichzeitig verwenden und in Serie schalten, werdet ihr ein Display mit DisplayPort 1.2 oder Thunderbolt-Ein- und -Ausgang brauchen. Im Idealfall solltet ihr euch für einen Monitor mit HDMI, Dual-Link-DVI-Ports und DisplayPort 1.2 entscheiden. Wer ein Auge auf einen Ultra-HD-Monitor geworfen hat, muss den Anschlüssen seiner Grafikkarte zusätzlich erhöhte Aufmerksamkeit schenken. Will man beispielsweise die maximale Auflösung bei 60 Hertz fahren, sollte die Grafikkarte MST (Multistream-Transfer) beherrschen und mindestens über zwei HDMI-Ports oder einen DisplayPort-1.2.-Eingang verfügen.

Was darf der beste Monitor für Webdesign kosten?

Egal mit welchem Budget ihr plant: Der für euch beste Monitor wird kein Schnäppchen sein. Das trifft umso mehr zu, als ihr euch als Webdesigner in einem professionellen Bereich bewegt.

Ein geeignetes WQHD-Display mit 27 Zoll kostet derzeit zwischen 700 und 1.200 Euro. Man kann allerdings auch locker weit über 3.000 Euro für einen Monitor hinblättern – sofern es denn mehr als 27 Zoll sein sollen und man sich für ein Ultra-HD-Display entscheidet.

Ergonomie und Fazit

Ergonomie ist wichtig, denn immerhin wird man viele Stunden vor dem neuen Monitor verbringen. Ein höhenverstellbares und dreh- sowie neigbares Display macht sich schnell bezahlt. Gerne darf der Screen auch in das Hochformat rotieren können. Eventuell vorhandene USB-Ports sollten sich entweder an der Front oder der Seite befinden. Nur dann sind sie leicht zugänglich.

Das Billig-Display aus dem Elektronikgroßmarkt ist definitiv keine Option für professionelle Webdesigner. Wer es ernst meint, sucht sich einen Monitor mit ausreichend dimensionierter Performance, einer annehmbar hohen Auflösung bei ausreichenden Dimensionen inklusive modernen Anschlüssen und einer Kalibrierung aus. Bei der Kaufentscheidung solltet ihr euch primär folgende Fragen stellen: Wie arbeitet ihr in der Regel? Welche Art von Projekten fallen regelmäßig an? Auf welche Features könnt ihr bei einem Monitor auf keinen Fall verzichten? Wie viel könnt und wollt ihr ausgeben?

Und welche Tipps habt ihr noch für Designer, die auf der Suche nach einem richtig guten Monitor sind?

]]>
Sébastien Bonset
Mobile Menüs für den Desktop: Wie Responsive Design die Navigation beeinflusst http://t3n.de/magazin/mobile-menues-fuer-den-desktop-237266/ 2015-03-12T09:49:57Z
Die Navigation ist der wichtigste Bestandteil einer Webseite. Ihre Gestaltung ist grundlegend für die Entwicklung von gut nutzbaren Websites. Mit dem Einzug von Responsive Webdesign erblickten viele …

Die Navigation ist der wichtigste Bestandteil einer Webseite. Ihre Gestaltung ist grundlegend für die von gut nutzbaren Websites. Mit dem Einzug von erblickten viele neue Navigationsmuster das Licht der Welt und lösten alte Grundsätze und Standards für die Gestaltung ab. Diese Entwicklung beschränkt sich nicht nur auf , sondern findet sich auch zunehmend auf dem Desktop wieder. Ein Blick auf Navigations-Patterns im mobilen Zeitalter und ihren Einfluss auf Desktop-Websites.

Mit dem Einzug von Mobile und Responsive Webdesign wurden Webworker vor neue Herausforderungen bezüglich der Gestaltung ihrer Websites gestellt. Die Navigation blieb davon nicht unberührt. Daraus resultierten einige spannende Ansätze für die Gestaltung mobiler Navigationen, die wir uns im Folgenden genauer anschauen.

Dropdown mit OS-Picker – Weil einfach einfach einfach ist

Ein Dropdown-Menü in der Kopfzeile einer mobilen Site bietet ausreichend Platz, um Seiten oder Kategorien unterzubringen. Hierbei greift man in der Regel auf ein Select-Element zurück. Der Vorteil bei dieser Methode ist, dass kein Styling für den Inhalt des Dropdowns vorgenommen werden muss, da bei der Auswahl das Betriebssystem die Ausgabe des Dropdowns steuert. Auch kommt diese Lösung mit minimalem JavaScript aus. Viele Einträge können die Auswahl aber schnell unübersichtlich und frustrierend machen.

Toggled Navigation – Der Klassiker

Die Toggled Navigation ist die wohl am meisten verwendete Navigationsart auf mobilen Webseiten. Dafür wird meistens eine Leiste im oberen Bereich der Websites positioniert. Diese ist mit einem Button-Element ausgestattet, das bei Betätigung die Navigation ausfahren lässt. Hierbei wird anders als bei klassischen Dropdown-Menüs keine neue Ebene über den eigentlichen Inhalt gelegt, sondern die komplette Webseite um die Länge der Navigation verlängert. Das Bootstrap-Framework beispielsweise hält eine solche Navigationslösung parat.

Multi-Toggle – Für komplexe Menüstrukturen

Das Multi-Toggle-Menü ist oberflächlich betrachtet eine Ansammlung von verschachtelten Akkordeons. Der Benutzer tippt auf die Hauptkategorie und öffnet so die enthaltenen Unterkategorien. Mit Multi-Toggle Menüs können höchst komplexe Navigationen auf kleinstem Raum untergebracht werden. Durch die Kategorisierung können Benutzer schneller ans Ziel kommen. Sobald ausreichend Nutzfläche für die Darstellung der Webseite zur Verfügung steht, kann dieses Pattern zum klassischen Multi-Level-Dropdown-Menü ausgebaut werden. Technisch gesehen sind unbeschränkt viele Ebenen möglich. So kann allerdings schnell eine unüberschaubare Navigationsstruktur entstehen, die statt zum Surfen einzuladen eher frustrierend wirkt.

Slide Navigation – Schick aber aufwendig

Navigationselemente müssen nicht zwingend untereinander angeordnet sein. Kategorien können auf mehrere Ebenen aufgesplittet und durch zusätzliche Bedienelemente oder einen Swipe durchgeblättert werden, um so Unterpunkte der Navigation darstellen zu können. Dieses Pattern bietet eine gewisse Übersichtlichkeit bei einer weiterhin hohen Detailtiefe, ist technisch jedoch etwas aufwändiger umzusetzen.

Mobile Menues für den Desktop 1
Diesel weckt auf dem Desktop die Neugier mit weichgezeichneten Hintergrundbildern, die sich erst beim Mouse-Over zu erkennen geben. Solche Effekte lassen sich leider nicht auf Mobilgeräten wiedergeben, da hier die Maus fehlt. (Screenshot: diesel.com)

Ein minimalistisches Beispiel hierfür liefert Apple mit seinem kürzlich eingeführten Navigations-Balken, der bei kleineren Screens nicht komplett sichtbar ist, aber mit einem Swipe bewegt werden kann. Eine Slide-Navigation muss sich dabei nicht nur auf einen kleinen Balken beschränken und könnte die volle Bildschirmgröße einnehmen, um Inhalte besser in Szene zu setzen.

Mega Dropdown – Schick aber Platzeinnehmend

Das Mega-Dropdown ist eine aufbereitete Abwandlung der Toggled-Navigation, bei der neben einfachen Textlinks auch mit Icons, Bildern oder einer Kombination aus beidem gearbeitet werden kann. Durch die Größe der einzelnen Elemente lassen sich zwar weniger Links auf der sichtbaren Fläche unterbringen als bei einer einfachen Toggled-Navigation, die optische Verbesserung kann diesen Nachteil aber durchaus ausgleichen.

Off-Canvas Flyout – Viel Platz bei einfacher Orientierung

Beim Off-Canvas-Pattern wird die Navigation außerhalb des sichtbaren Bereichs des Displays untergebracht und durch einen Tap auf einen entsprechenden Button ausgefahren. Dabei schiebt sich die Navigation entweder über den eigentlichen Content oder verschiebt diesen bis an den Rand des Bildschirms, sodass die Orientierung in der Webseite weiterhin möglich ist.

Das Off-Canvas-Flyout stellt Designern viel Raum zur Platzierung von Elementen zur Verfügung und bietet so große Gestaltungsfreiheit.

]]>
Ilja Zaglov
Die 10 beliebtesten Artikel der Woche: IT-Gehälter 2015, Erfolg auf Facebook, Cheat-Sheets für Webdesigner http://t3n.de/news/10-beliebtesten-artikel-woche-64-598036/ 2015-03-07T10:01:42Z
Auch an diesem Samstag wollen wir euch die beliebtesten Artikel der vergangenen Woche nicht vorenthalten. Dieses Mal mit dabei: erfolgreiche Kleinunternehmer auf Facebook, IT-Gehälter 2015 und eine …

Auch an diesem Samstag wollen wir euch die beliebtesten Artikel der vergangenen Woche nicht vorenthalten. Dieses Mal mit dabei: erfolgreiche Kleinunternehmer auf Facebook, IT-Gehälter 2015 und eine Infografik, mit deren Hilfe ihr endlich zum Morgenmensch werden könnt.

1. IT-Gehälter 2015: Was Entwickler, Designer und ihre Kollegen dieses Jahr verdienen

Eine aktuelle gibt einen Ausblick auf die Gehaltsentwicklung im IT-Bereich. Danach plant rund ein Viertel der befragten Unternehmen, den eigenen IT-Mitarbeiter dieses Jahr eine Gehaltserhöhung zu geben.

Unser Artikel: IT-Gehälter 2015: Was Entwickler, Designer und ihre Kollegen dieses Jahr verdienen

2. Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick

Webdesigner und eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten sowie unterschiedliche Programmiersprachen und im Kopf zu behalten. Jede Menge Cheat-Sheets erleichtern die Arbeit ungemein. Wir haben im ersten Teil unserer Übersicht einige der hilfreichsten Exemplare für Webdesigner gesammelt.

Unser Artikel: Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick

3. Boreout im Job? 5 Anzeichen, dass du mehr gefordert werden solltest

Das Geld kommt jeden Monat pünktlich aufs Konto, die Arbeitszeiten sind annehmbar, die Kollegen ganz nett – aber dein Job langweilt dich? Dann solltest du jetzt weiterlesen. Vielleicht droht der Boreout.

Unser Artikel: Boreout im Job? 5 Anzeichen, dass du mehr gefordert werden solltest

4. Facebook für Kleinunternehmer: Wie ein Friseursalon sich eine 6.000-Fangemeinde aufgebaut hat

für Kleinunternehmer? Ohne viel Geld im Rücken wird das nichts, heißt es oft. Doch ein Friseursalon aus Reutlingen beweist das Gegenteil – mit einem kleinen Budget und ganz viel Authentizität.

Unser Artikel: Facebook für Kleinunternehmer: Wie ein Friseursalon sich eine 6.000-Fangemeinde aufgebaut hat

5. Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview]

Smartphones, Tablets und Co. haben unsere Surf-Gewohnheiten im Web radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt – und stellen die Darstellungstechniken von Websites vor komplett neue Herausforderungen. Die Zeiten, in denen Websites mit statischen Inhalten für eine fixe Anzeige optimiert wurden, sind längst vorbei. Die Lösung: Responsive Webdesign. Doch was verbirgt sich genau hinter dem viel gebrauchten Hype-Wort der letzten Jahre? Reine Technik oder doch eher ein Prozess?



Unser Artikel: Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview]

6. Qi: Neue IKEA-Möbel laden Geräte ohne Kabel

IKEA hat eine neue Möbelserie vorgestellt, mit deren Hilfe sich Smartphones oder Tablets künftig ohne Kabel laden lassen sollen. Dafür kommt die „Qi“-Ladefunktion zum Einsatz.

Unser Artikel: Qi: Neue IKEA-Möbel laden Geräte ohne Kabel

7. Neuer Algorithmus: Google sucht nur noch die Wahrheit

Verschwörungstheorien haben derzeit Hochkonjunktur. Bei Google könnte man allerdings bald lange danach suchen müssen, denn der Suchmaschinenriese will Qualität und Fakten bei der Listung der Suchergebnisse den Vorzug geben.

Unser Artikel: Neuer Algorithmus: Google sucht nur noch die Wahrheit

8. Endlich schick: Das ist das neue Samsung Galaxy S6 aus Alu und Glas

Samsung hat wie jedes Jahr sein neues Flaggschiff, in diesem Fall das Galaxy S6 vorgestellt. Abgesehen von technischen Neuerungen haben die Koreaner vor allem beim Design aufgeholt. Das neue Gerät beendet endlich die Ära des Plastik-Smartphones.

Unser Artikel: Endlich schick: Das ist das neue Samsung Galaxy S6 aus Alu und Glas

9. Der frühe Vogel: So wirst auch du zum Morgenmensch [Infografik]

Morgenmuffel haben es nicht nur schwerer im Beruf, zufolge sind sie auch tendenziell unglücklicher und weniger produktiv. Eine zeigt euch jetzt, wie ihr Schlaf- und Aufstehgewohnheiten ändert, um ein echter Morgenmensch zu werden.

Unser Artikel: Der frühe Vogel: So wirst auch du zum Morgenmensch [Infografik]

10. Getty: Hollywood-Star Vince Vaughn posiert für schrecklich geniale Stockfotos

Um eine neue Hollywood-Komödie zu promoten, posiert Schauspieler Vince Vaughn gemeinsam mit seinen Co-Stars für eine Reihe von Stockfotos. Die sind jetzt über Gettys iStock-Plattform verfügbar und können mit gewissen Einschränkungen kostenlos genutzt werden.

Unser Artikel: Getty: Hollywood-Star Vince Vaughn posiert für schrecklich geniale Stockfotos

]]>
Lea Weitekamp
Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview] http://t3n.de/news/responsive-webdesign-potenzial-lobacher-597408/ 2015-03-05T12:45:19Z
Smartphones, Tablets und Co. haben unsere Surf-Gewohnheiten im Web radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt – und …

Smartphones, Tablets und Co. haben unsere Surf-Gewohnheiten im Web radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt – und stellen die Darstellungstechniken von Websites vor komplett neue Herausforderungen. Die Zeiten, in denen Websites mit statischen Inhalten für eine fixe Anzeige optimiert wurden, sind längst vorbei. Die Lösung: Responsive Webdesign. Doch was verbirgt sich genau hinter dem viel gebrauchten Hype-Wort der letzten Jahre? Reine Technik oder doch eher ein Prozess?

Patrick Lobacher, Geschäftsführer der +Pluswerk AG
Patrick Lobacher, Geschäftsführer der +Pluswerk AG

Patrick Lobacher dürfte genau darauf Antworten haben. Der Geschäftsführer der +Pluswerk AG, einem der führenden Agenturnetzwerke Deutschlands, ist Autor zahlreicher Fachbücher zu dem Thema und erfahren im Management von Responsive-Webdesign-Projekten. anders und sehr hat den Experten um eine Einschätzung des Themas gebeten.

Redaktion: Vielen Dank, dass du dir Zeit für ein Gespräch genommen hast. Responsive Webdesign – ein geradezu schillernder Begriff. Was ist die Grundidee dahinter?

Patrick Lobacher: Die Grundidee dahinter ist, dass eine Website in allen möglichen Zugangsgeräten (Desktop, Tablet, Mobile, ...) eine hochwertige Benutzererfahrung (User Experience) bietet – heute und in der Zukunft. Dazu muss sich die Website dem Gerät und der Umgebung, in der das Gerät verwendet wird, anpassen. Das wird als „responsive“ bezeichnet. Dabei wird unter dem Begriff deutlich mehr verstanden als die klassische Definition von Ethan Marcotte aus dem Jahr 2010.

Redaktion: Warum sollten Unternehmen heutzutage auf Responsive Webdesign setzen?

Patrick Lobacher: Einerseits ist nur so sichergestellt, dass ein Webangebot auf allen Zugangsgeräten optimal angesehen und genutzt werden kann. Andererseits sorgt ein Vorgehen gemäß Responsive Design für einen besseren Content, bessere Usability und letztlich auch bessere Performance (sofern die Umsetzung gut gemacht ist). Die Conversion steigert sich erheblich und auch Google honoriert Responsive-Webdesign-Auftritte mit einem höheren Ranking.

Redaktion: Was hat es mit dem Content-First-Prinzip auf sich?

Patrick Lobacher: Um einen Webauftritt optimal für alle Zugangsgeräte zu konzipieren, wird man schnell feststellen, dass man sinnvollerweise beim Kleinstmöglichen anfängt und sich dann langsam auf immer größere Geräte steigert. Dabei kann man – je nach Gerät und Geräteklasse – die Funktionalitäten und natürlich auch den Content selbst anreichern.

Man nennt dieses Vorgehen Progressive Enhancement. Geht man so vor, heißt der Startpunkt auch Mobile First. Hier hat man wenig Platz, daher muss dem Content ein besonderes Augenmerk zuteil werden. Somit konzentriert man sich am Anfang eines Responsive-Webdesign-Prozesses immer auf Content First – also auf den Inhalt der kleinstmöglichen Geräteklasse.

Responsive Webdesign: Eine Mischung aus Strategie und Technik. (Screenshot: andersundsehr.com)
Responsive Webdesign: Eine Mischung aus Strategie und Technik. (Screenshot: andersundsehr.com)

Redaktion: Kann man Responsive Webdesign nicht auch später noch nachrüsten?

Patrick Lobacher: Nein, dies ist aus diversen Gründen nicht möglich, beziehungsweise auch nicht sinnvoll. Natürlich kann man eine Website optimieren, sodass diese auf Tablets und Smartphones sichtbar und bedienbar ist – das würde ich persönlich aber nicht als „responsive“ bezeichnen, sondern eben nur als „optimiert“.

So ist klassischer Content eben auf die Betrachtung auf einem Desktop angelegt – sowohl von der Informationstiefe als auch von der Informationsmenge her. Menüs (und andere Navigationselemente) werden meist inflationär verwendet, da „ja genug Platz ist“. Will man zudem die Performance optimal gestalten, muss auch der Quellcode schon initial mit dem Fokus darauf erstellt werden.

Redaktion: Wie verändert sich der Workflow durch Responsive Webdesign?

Patrick Lobacher: Der Workflow muss sich grundsätzlich vom linearen Vorgehen zu einem iterativen, inkrementellen ändern. Früher hat man zuerst ein Design entwickelt und dies mit dem Kunden abgestimmt. Dann hat der Frontend-Entwickler dieses in HTML/CSS umgesetzt und getestet. Nach der Integration in ein CMS hat der Kunde begonnen, den Content einzupflegen.

Das funktioniert aufgrund der Gerätevielfalt und der sich daraus ergebenden Freiheitsgrade nicht mehr. Der Responsive-Design-Workflow enthält daher folgende Schritte: Content-Strategie, Content-Wireframe, Content-Erstellung, Content-Testing, Atomic Design, Linear Design, Prototyping, Device-Testing. Dieser Workflow wird in kleinen Iterationen gegangen und anschließend für die nächsten Elemente erneut durchlaufen, bis das Ergebnis zufriedenstellend ist.

Workflow Responsive Webdesign (Screenshot: andersundsehr.com)
Workflow Responsive Webdesign (Screenshot: andersundsehr.com)

Redaktion: Welche technischen Mittel stehen aktuell zur Verfügung?

Patrick Lobacher: Grundsätzlich gibt es zahlreiche Hilfsmittel, um den Prozess bestmöglich zu begleiten. Angefangen von Tools zum Wireframing (wie Axure, Balsamiq), über Formate zur Content-Erstellung (wie Markdown, AsciiDoc, ...) und Tools zur automatischen Umwandlung in HTML (Pandoc, Jekyll, Dexy, ...) gibt es Hilfsmittel zur Erstellung des Atomic Designs (Patternlab) und zum Testen. Weiterhin existieren vorgefertigte Frameworks, um ein Basis-Grid hinter Responsive Webdesign zu erstellen (Singularity, Foundation, Bootstrap, ...) und auch Anbieter wie Adobe haben die Zeichen der Zeit erkannt und mit Edge Reflow ein leistungsfähiges Tool für den Bereich Responsive Webdesign auf den Markt gebracht.

Redaktion: Ist Photoshop nicht mehr zeitgemäß für Responsive-Webdesign-Projekte?

Patrick Lobacher: Photoshop und ähnliche Tools haben einen entscheidenden Nachteil: Sie erstellen statische Layouts in einem Medium, welches nicht zur Betrachtung im Web vorgesehen ist. Früher war zumindest das Zielformat und das Format des Layouts nahezu identisch – so wurde lange Zeit auf 960 Pixel Breite gestaltet.

Heute hat man theoretisch alle Breiten zwischen 200 und 5000 Pixel zu bedienen – hierfür kann man nicht mehr ernsthaft designen. Zumal auch der Content selbst den Unterschied machen kann – beispielsweise hat eine reale Überschrift verschiedene Längen, sie ist vielleicht sogar zweizeilig, wenn das Display nur klein genug ist.

„Heute hat man theoretisch alle Breiten zwischen 200 und 5000 Pixel zu bedienen.“

 Dann muss entschieden werden, was mit dem Design genau an dieser Stelle passieren soll.

Das alles ist durch statisches Design längst nicht mehr abbildbar. Daher geht man hier – aus Sicht des Designs – einen anderen Weg: Man erstellt ein atomares Design – also zuerst einzelne Elemente, Farben, Schriften und Grundelemente. Diese werden dann sofort im Zielformat – also HTML/CSS/JavaScript umgesetzt und getestet. Erst in diesem Zustand – auch Prototyping genannt – wird das Layout langsam immer kompletter und es funktioniert vor allem. Form follows function ist hier wichtiger denn je.

Redaktion: Welche Testverfahren gibt es und wie werden sie praktisch umgesetzt?

Patrick Lobacher: Grundsätzlich sollte man auf richtigen Geräten testen, da diese oft Bugs besitzen, die man nicht simulieren kann. Da das aber meist sehr aufwändig ist, kann man Tools wie Adobe Edge Inspect verwenden, das es ermöglicht, dass die Website oder die Interaktion auf der Website automatisch an alle angeschlossenen Geräte gesendet wird. Somit hat man eine Vielzahl von Geräten im Überblick.

Ein weiteres Verfahren sind automatisierte Frontend-Tests über zum Beispiel Selenium – hier werden bestimmte User-Journeys (z.B. Menü ausklappen und Seite anwählen, Button klicken, Formular ausfüllen, ...) vordefiniert und dann bei jeder Veränderung des Quellcodes der Website automatisiert getestet. Sobald in einem der Geräte und/oder Browser eine Fehlermeldung aufgetreten ist, wird diese sofort gemeldet. Solche Testverfahren sind natürlich auch im laufenden Betrieb einer Website oder eines Webshops sinnvoll.

Redaktion: Welche Auswirkung haben Responsive-Webdesign-Projekte auf die Gestaltung von Vertragsmodellen?

Patrick Lobacher: Die Vertragsgrundlage muss sich natürlich auch ändern, da in klassischen Verträgen oft als Referenz entweder ein Pflichtenheft und/oder ein Photoshop-Design herangezogen wird, um das „Werk“ (Werksvertrag) ordentlich zu spezifizieren.

„Responsive Webdesign als Begriff wird sicherlich in den nächsten Jahren verschwinden.“

Das kann im Responsive Webdesign natürlich nicht gemacht werden. Man muss also ein Vertragswerk finden, das einerseits den iterativen/inkrementellen Weg abbilden kann und andererseits für beide Vertragspartner ein minimales Risiko festschreibt. Man verwendet hierfür den sogenannten agilen Festpreisvertrag und passt diesen entsprechend dem Projekt an.

Redaktion: Wie viele Breakpoints sind sinnvoll?

Patrick Lobacher: Diese Frage kann man pauschal nicht seriös beantworten. Breakpoints werden immer dann sinnvoll, wenn man größere Änderungen am Layout vornehmen will – man also Content-Choreography durchführen will. Und dies ist immer dann sinnvoll, wenn es der Content verlangt. Der Content bestimmt also die Breakpoints und nichts anderes. Meist wird aber bei der Content-Anordnung auf bewährte Pattern (z.B. Drei-Spalter, Zwei-Spalter) zurückgegriffen.

Daher kann man vage postulieren, dass es sehr wahrscheinlich zu mindestens zwei Breakpoints kommen wird, um große Screens, mittlere und kleine, voneinander zu unterscheiden. Es ist aber auch gut möglich, dass man nur mit einem Breakpoint auskommt oder sogar eine Trennung in Major- und Minor-Breakpoints vornimmt. Am Major-Breakpoint finden dann größere Veränderungen statt und am Minor-Breakpoint eventuell nur kleinere. In der Praxis betrachtet man den Content (der ja zuerst erstellt wird) auf einer kleinen Breite und vergrößert solange die Breite, bis man das Gefühl hat, dass man nun einen Breakpoint benötigt.

Redaktion: Wie ist abschließend gesehen deine Einschätzung: Responsive Webdesign nur ein Hype oder die Zukunft des Web?

Patrick Lobacher: Responsive Webdesign als Begriff wird sicherlich in den nächsten Jahren verschwinden – ähnlich wie Web 2.0 vor ein paar Jahren. Der Prozess und die Technik werden aber die Basis des zukünftigen Webs ausmachen. Die Gerätevielfalt nimmt zu und auch die möglichen Zugangspunkte zum Web. Hier bildet Responsive Design die Basis für eine höchstmögliche User Experience. Zurzeit werden bereits „neue“ Begriffe, wie „adaptive Webdesign“ als Weiterentwicklung von Responsive Webdesign gehandelt – dies drückt aber lediglich aus, dass natürlich auch Responsive Webdesign allumfassend gesehen werden sollte.

Redaktion: Wir danken dir für das Gespräch!

Wer noch mehr Informationen und Hintergründe zum Responsive Webdesign sucht, sollte sich dieses Video anschauen.

via www.andersundsehr.com

]]>
anders und sehr
Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick http://t3n.de/news/cheat-sheets-fuer-webdesigner-596526/ 2015-02-27T15:40:29Z
Webdesigner und Entwickler eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten Software sowie unterschiedliche Programmiersprachen und Frameworks im Kopf zu …

Webdesigner und eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten sowie unterschiedliche Programmiersprachen und im Kopf zu behalten. Jede Menge Cheat-Sheets erleichtern die Arbeit ungemein. Wir haben im ersten Teil unserer Übersicht einige der hilfreichsten Exemplare für Webdesigner gesammelt.

Es spielt keine Rolle, ob du blutiger Anfänger oder eingefleischter Vollblut-Webdesigner bist. Es spielt auch keine Rolle, seit wie vielen Jahren du mit einem bestimmten Framework oder einer Software arbeitest – ab und an musst du die Doku wälzen oder im Handbuch nachschlagen. Wesentlich häufiger wirst du allerdings auf Cheat-Sheets oder Schnellreferenzen zurückgreifen. Das ist kein Beinbruch, denn bei der Komplexität vieler Anwendungen kann sich kaum ein Webdesigner alle Tastaturkürzel und andere Details merken.

Cheat-Sheets für Webdesigner: Farben und Typografie

Eher an Einsteiger richten sich die Cheat-Sheets, bei denen es um Farblehre und Theorie geht. (Foto: CardPrinting.us)
Eher an Einsteiger richten sich die Cheat-Sheets, bei denen es um Farblehre und Theorie geht. (Foto: CardPrinting.us)

RGB Colour Codes: Das PDF gibt einen Überblick über alle RGB-Farbcodes. Link zum Cheat-Sheet

RGB vs. CMYK: Die Infografik zeigt unter anderem, wo die Stärken und Schwächen von RGB und CMYK liegen. Link

Web Safe Color Chart: Mit den hier aufgeführten Farben kann bei einem Einsatz auf einer Webseite nichts schief gehen. Link

Pantone Number: Für alle, die eine Schnellreferenz für Pantone-Nummern als PDF benötigen. Link

Color Codes Matching Chart HTML: Hier gibt es Codes für CMYK- und RGB-Farben. Link

So you need a typeface: Der durchaus humoristische Ansatz zur Wahl der richtigen Schrift geht davon aus, dass die Wahl auf der Art des Projekts basiert. Link

Cheat-Sheets: Bildbearbeitung und andere Software

Unter den Cheat-Sheets finden sich auch Kurzanleitungen wie eine Referenz zum Stiftwerkzeug von Photoshop. (Foto: trainingonsite.com)
Unter den Cheat-Sheets finden sich auch Kurzanleitungen wie eine Referenz zum Stiftwerkzeug von Photoshop. (Foto: trainingonsite.com)

Adobe Photoshop CS6 Keyboard Shortcuts Cheat Sheet: Der Name verrät es schon – ein Cheat-Sheet mit Tastaturkürzeln für Photoshop CS6. Link Weitere Cheat-Sheets für Photoshop findet ihr auf t3n.

Photoshop Toolbox Reference: Photoshop bietet eine Fülle von unterschiedlichen Werkzeugen. Mit Hilfe dieser Schnellreferenz lassen sich die einzelnen Funktionen der Tools nachschlagen. Link

Photoshop CS6 Brush Guide: Vergessen, wie das mit den Pinseln in Photoshop CS6 war? Kein Problem mit dieser Kurzanleitung. Link zum Cheat-Sheet

Adobe Illustrator CS6 Shortcuts Cheatsheet: Das Cheat-Sheet gibt Auskunft über in Illustrator CS6 verwendbare Tastaturkürzel. Link

Indesign CS6 Tools Panel: Diese praktische Ressource führt alle Werkzeuge von Indesign inklusive Shortucts und Modifizierungen auf. Link

Pen Tool Technique: Wie das mit dem Stiftwerkzeug in Photoshop, Illustrator und Indesign funktioniert, zeigt dieses Cheat-Sheet. Link

Adobe Creative Suite Toolbar Shortcut Wallpapers: Bei Hongkiat kann man sich Hintergrundbilder in unterschiedlichen Größen herunter laden. Deren Inhalt: Shortcuts zu Photoshop, Illustrator, Indesign und Flash. Link zu den Cheat-Sheets

GIMP Cheat Sheet: Für alle Photoshop-Verweigerer bietet sich GIMP an. Für die Software existieren natürlich ebenfalls Cheat-Sheets. Link

Sketch Shortcuts: Die alternative Bildbearbeitung Sketch verfügt über eine Reihe von Shortcuts, die dieses Cheat-Sheet übersichtlich aufführt. Link

Cheat-Sheets für Webdesigner: HTML

Eine Art interaktives Wörterbuch für HTML. (Foto: workflower.fi)
Eine Art interaktives Wörterbuch für HTML. (Foto: workflower.fi)

HTML5 Cheat Sheet: Ein Cheat-Sheet zu HTML5 gehört in die Sammlung jedes Webdesigners. Link

HTML Vocabulary: Das interaktive Cheat-Sheet versteht sich als Wörterbuch für HTML. Einfach auf den Begriff rechts klicken und die entsprechenden Fragmente werden im Code links hervor gehoben. Link

HTML Elements Index: Die Websiet listet alle HTML- und XHTML-Elemente auf. Link

CSS-Cheat-Sheets

Unter den CSS-Cheat-Sheets finden sich auch einige zu Frameworks. (Foto: bootstrap cheat sheets)
Unter den CSS-Cheat-Sheets finden sich auch einige zu Frameworks. (Foto: bootstrap cheat sheets)

CSS Vocabulary: Das interaktive Cheat-Sheet versteht sich als Wörterbuch für CSS. Einfach auf den Begriff rechts klicken und die entsprechenden Fragmente werden im Code links hervor gehoben. Link

CSS Cheat Sheet: Das Cheat-Sheet von OverAPI behandelt unter anderem Selektoren, CSS3 Box, Animationen und mehr. Link zum Cheat-Sheet

Responsive Web Design Cheat Sheet: Wer sich die Frage nach den besten Breakpoints für sein Design stellt, ist mit diesem Cheat-Sheet gut bedient. Link

The complete Font Awesome 4.3.0 icon reference: Das Cheat-Sheet beinhaltet jedes Font Awesome 4.3.0 Icon, jede CSS-Klasse und Unicode. Link

Foundation-5 Cheat Sheet: Bei diesem Dokument handelt es sich um eine umfassende Referenz zu Foundation 5. Link zum Cheat-Sheet

Master Cheat Sheet for Bootstrap 3: Das Cheat-Sheet zum Framework Bootstrap 3 lässt sich als PDF herunter laden. Link

Bootstrap Glyphicons: Das interaktive Cheat-Sheet zeigt für jedes Bootstrap Glyphicon HTML Tag, Unicode HTML Entity und CSS Rule. Link

Cheat-Sheets für JavaScript und JQuery

Klassische Kurzreferenz – in diesem Fall für JavaScript. (Foto: OverAPI)
Klassische Kurzreferenz – in diesem Fall für JavaScript. (Foto: OverAPI)

JavaScript Cheat Sheet: Das Cheat-Sheet zu Javascript von OverAPI ist umfassend. Link

JavaScript Regex Cheatsheet: Wer häufiger Regular Expressions für JavaScript nachschlagen muss, könnte sich für diese Referenz interessieren. Link

jQuery Quick API Reference: Die API-Referenz lässt sich für unterschiedliche Versionen von jQuery einsehen. Link

Cheat-Sheets für SEO und Socialmedia

Webdesigner müssen zu einem gewissen Grad auch fit in SEO sein. (Foto: MOZ)
Webdesigner müssen zu einem gewissen Grad auch fit in SEO sein. (Foto: MOZ)

On-Page SEO Cheat Sheet: Ein interaktives Cheat-Sheet für alle Webdesigner, die auch suchmaschinenoptimierte anbieten wollen. Link

The Web Developer’s SEO Cheat Sheet: Sehr umfangreiches und empfehlenswertes Cheat-Sheet von Moz zum Thema SEO. Link

Social media cheat sheet: Es gilt ein Bild auf mehreren sozialen Netzwerken zu posten. Wer sich nicht sicher ist, welche Maximalabmessungen erlaubt sind. Findet mit diesem Cheat-Sheet Hilfe – auch zu Fragen wie beispielsweise die maximale Dateigröße gibt es Antworten. Link

CMS-Cheat-Sheets

Wer sich mit WordPress-Templates beschäftigt, findet ebenfalls Hilfe in Form von Kurzreferenzen. (Foto: Build Your Own Blog)
Wer sich mit WordPress-Templates beschäftigt, findet ebenfalls Hilfe in Form von Kurzreferenzen. (Foto: Build Your Own Blog)

Ghost Cheat Sheet: Webdesigner, die mit dem CMS Ghost zu tun haben, sollten sich das entsprechende Cheat-Sheet ansehen. Link

The Time Saving Copy/Paste WordPress Cheat Sheet: Wer sich mit dem Entwickeln, Aktualisieren und Warten von WordPress-Templates beschäftigt, findet in diesem Cheat-Sheet die gängigsten Funktionen und kann sie per Copy&Paste verwenden. Link

Joomla! 3.x templates cheatsheet: Dieses Cheat-Sheet liefert Informationen rund um Joomla-Templates. Link

Noch mehr Cheat-Sheets

Fehlt euch noch eine Kategorie oder habt ihr weitere Empfehlungen für Cheat-Sheets innerhalb der einzelnen Kategorien? Dann lasst uns das doch in den Kommentaren wissen, denn wir werden diesen Artikel regelmäßig aktualisieren. In einem zweiten Teil wollen wir für euch für Entwickler empfehlenswerte Cheat-Sheets sammeln.

]]>
Sébastien Bonset
Die 10 beliebtesten Artikel der Woche: Interview mit Stewart Butterfield, Tutorials für Webentwickler und Martin Weigerts E-Commerce-Kolumne http://t3n.de/news/10-beliebstesten-artikel-woche-592313/ 2015-02-07T10:00:43Z
Besondern gerne gelesen wurde in der vergangen Woche die Kolumne von Martin Weigert über den Niedergang des stationären Handels. Zudem haben wir euch zehn Tutorials für Webdesigner- und Entwickler …

Besondern gerne gelesen wurde in der vergangen Woche die von Martin Weigert über den Niedergang des stationären Handels. Zudem haben wir euch zehn für Webdesigner- und gezeigt und schöne UI-Schmankerl zum Nachmachen vorgestellt. Mehr Themen der vergangenen Woche haben wir wie immer in unserem Wochenrückblick für euch.

1. Warum ich manchmal doch Angst um die Zukunft meiner Daten habe

Lange war mir egal, dass Informationen über mich permanent in irgendwelchen Datenbanken landen. Mir war nicht ganz klar, wie man mir damit würde schaden können. Bis mir ein Kneipenerlebnis die Augen geöffnet hat. 

Unser Artikel: Warum ich manchmal doch Angst um die Zukunft meiner Daten habe

2. Du arbeitest mit zwei Monitoren? Hier findest du schicke Desktop-Hintergründe

Einen Rechner mit mehr als einem Monitor zu betreiben, ist heute keine Seltenheit mehr. Wir verraten euch, wo ihr die schicksten Desktop-Hintergründe für euer Multi-Monitor-Setup findet.

Unser Artikel: Du arbeitest mit zwei Monitoren? Hier findest du schicke Desktop-Hintergründe

3. „Es ist fast ein Wunder, dass überhaupt jemand Slack nutzt!“ – Slack-Gründer Stewart Butterfield im Interview

Nachdem er erfolgreich verkauft hat, will er jetzt seinen nächsten Dienst groß machen. Wir haben Slack-Gründer Stewart Butterfield zum in München getroffen.

Unser Artikel: „Es ist fast ein Wunder, dass überhaupt jemand Slack nutzt!“ – Slack-Gründer Stewart Butterfield im Interview

4. Der Niedergang des stationären Handels ist ein neuer Anfang [Kolumne]

Der lokale Handel sieht sich durch den immer stärker unter Druck gesetzt, meint Martin Weigert in seiner „Weigerts World“. Wahrscheinlich sei, dass traditionelle Geschäfte eines Tages den gleichen Seltenheitswert haben werden wie heute Schallplatten. Das stelle uns als Gesellschaft vor Herausforderungen, einen Grund für Fatalismus gebe es aber nicht.

Unser Artikel: Der Niedergang des stationären Handels ist ein neuer Anfang [Kolumne]

5. 10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 6)

, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und -designer sind. Hier kommt der sechste Teil.

Unser Artikel: 10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 6)

6. Number26: Die Girokonto-Revolution?

Nur wenige Produkte sind so essentiell wie das Girokonto. Ohne Girokonto kein Zahlungsverkehr. Das Startup Number26 will Europas modernstes Girokonto sein. Der Teufel liegt jedoch im Detail.

Unser Artikel: Number26: Die Girokonto-Revolution?

7. So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 2)

Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort inspirierende UX/UI-Schmankerl, von denen ihr euch was abschauen könnt.

Unser Artikel: So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 2)

8. Wieder eine Absage? 9 mögliche Gründe, warum du den Job nicht bekommen hast

Eine Bewerbung ist eine Prüfung der besonderen Art, von ihrem Erfolg oder Nicht-Erfolg hängen ganz existenzielle Dinge ab. Gerade deswegen zermartern sich Menschen auch den Kopf, wenn es wieder mal nicht geklappt hat. Wir liefern die wahren Gründe für die Absage.

Unser Artikel: Wieder eine Absage? 9 mögliche Gründe, warum du den Job nicht bekommen hast

9. SpiderOak, Tor und Co. – 5 Tipps und Tools von Edward Snowden für mehr Privatsphäre im Netz

Edward Snowden hat nicht nur die Massenüberwachung durch die Sicherheitsdienste aufgedeckt, er hat immer wieder auch Tipps gegeben, wie man seine Daten schützen kann. Der Autor Daniel Kuhn fasst zusammen.

Unser Artikel: SpiderOak, Tor und Co. – 5 Tipps und Tools von Edward Snowden für mehr Privatsphäre im Netz

10. Harte Arbeit für die Augen: 7 Tipps für Bildschirmarbeiter

Immer mehr Menschen sitzen täglich für längere Zeit am Computer sei es auf der Arbeit oder in der Freizeit beim PC-Spielen oder Surfen. Die Beanspruchung für die Augen wächst dabei stetig. Hier erfahrt ihr warum diese Belastung sogar krank machen kann und was ihr dagegen tun könnt.



Unser Artikel: Harte Arbeit für die Augen: 7 Tipps für Bildschirmarbeiter

]]>
Melanie Petersen
So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 2) http://t3n.de/news/schoen-webdesign-ui-schmankerl-teil2-591063/ 2015-02-01T14:27:14Z
Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort …

Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort inspirierende UX/UI-Schmankerl, von denen ihr euch was abschauen könnt. Kennt ihr das auch? Einige Websites fühlen sich irgendwie besser an als andere – hier ein Autocomplete und dort wird ein Klick gespart. In unserer neuen Serie zeigen wir euch geniale Lösungen für gängige UI-Probleme, die ihr so noch nicht gesehen habt. Denn: Gutes UI-Design sieht man nicht.

Unsere liebsten UI-Schmankerl

Bildschirmfoto 2015-01-30 um 10.14.53

Unser Leser Nico Saborowski hat uns im letzten Teil dieser Serie auf eine nette Anzeige der ungefähren Lesezeit bei allfacebook.de hingewiesen. Danke dafür!

trello-2

Trello achtet besonders auf Details: Das Favicon ändert sich entsprechend der Hintergrundfarbe des Boards. Sehr praktisch wenn man auf mehreren Boards gleichzeitig arbeitet. Leider werden die unterschiedlichen Icons nur in Chrome richtig angezeigt.

ui-schmankerl-2

Wenn ihr versucht, das Google-Männchen innerhalb von Area 51 zu platzieren, könnt ihr das nicht und das Männchen verwandelt sich in ein UFO samt Piloten. Ein Beweis, dass Google von Außerirdischen geführt wird? Ich weiß es nicht, aber es ist ein nettes UI-Feature.

Bildschirmfoto 2015-01-30 um 09.43.27

Der Kalender von Sunrise hat kontext-sensitives Labeling, das heißt: Die App erkennt automatisch anhand von Keywords, welcher Aktivität ihr nachgehen wollt und ändert dementsprechend das Icon in der Kalenderansicht. Recht praktisch und auch sehr schön umgesetzt.

Bildschirmfoto 2015-01-30 um 09.53.07

Google Maps zeigt euch den Schatten von hohen Gebäuden in Echtzeit an. Ein kleines Detail, das zwar nicht wirklich hilfreich ist, wenn man auf der Suche nach einer bestimmten Adresse ist – trotzdem ein nettes Feature und eine Feinheit, die das UX aufwertet.

Bildschirmfoto 2015-01-30 um 09.55.11

Wie auch bei Trello fungiert das Logo von Ello als Ladeindikator. Ein kleines, aber nettes Feature, das den Nutzer auf das Logo lenkt und das Interface ruhiger wirken lässt. Gerade, wenn man kein Freund von Overlays ist.

Bildschirmfoto 2015-01-30 um 10.08.23

Slack ist in aller Munde – teilweise zurecht. Das Team-Kommunikations-Tool zeigt nette Sprüche oder Erinnerungen während des Ladevorgangs an. Habt ihr eigentlich schon zwei Liter Wasser getrunken? Sitzt ihr eigentlich in einer ergonomischen Position?

Bildschirmfoto 2015-01-30 um 10.09.08

Das Dokumentations-Tool für Entwickler readme hat ein nettes Feature bei der Passwort-Eingabe. Wechselt ihr in das Eingabefeld für das Passwort, verdeckt sich das Maskottchen die Augen. Och, wie süß!

Bildschirmfoto 2015-01-30 um 10.17.59

„Bilder sagen mehr als tausend Worte“, hat sich wohl tumblr.com gedacht, als das Team die neuesten Verbesserungen im GIF-Format kommuniziert hat. Sieht nicht nur gut aus, bringt die Veränderungen auch gut auf den Punkt.

Bildschirmfoto 2015-01-30 um 10.23.44

Ein weiteres Schmankerl beschert uns Slack: Farben im Hex-Format werden direkt im Chat angezeigt. Ideal für etwaige Pipetten von Bildbearbeitungssoftware.

Wenn euch diese UI-Schmankerl gefallen haben: Hier geht es zurück zum ersten Teil.

Wo habt ihr euch das letzte mal gedacht: „Hm, so hätte ich das auch lösen können.“? Oder welche Finesse habt ihr entdeckt?

]]>
Mario Janschitz
HTML5 Days 2015: Sechs Workshops von Responsive Webdesign bis asynchrones JavaScript [Sponsored Post] http://t3n.de/news/html5-days-2015-sechs-workshops-590325/ 2015-01-29T09:30:20Z
Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten …

Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten deutschsprachigen HTML5-Experten. Im Interview erzählt Christian Wetz was für ihn die spannendsten Entwicklungen im Bereich HTML5 und JavaScript sind.Jens Grochtdreis, Peter Kröner, Thorsten Rinne, Sebastian Springer und Christian Wenz leiten die Workshops. Zusammen mit den parallel laufenden JavaScript Days und AngularJS Days können Teilnehmer aus insgesamt 24 Workshops auswählen.

Themen der HTML5 Days sind Responsive Webdesign, Modulare Webentwicklung mit SAAS, asynchrones JavaScript, Modernisierung von Legacy Applikationen auf HTML5 sowie Kommunikations-APIs von JavaScript und HTML5. Alle Infos finden Interessenten auf www.html5-days.de.

Christian Wenz auf den HTML5 Days 2105

wenz_christian_html5-days-2015-(2)Christian Wenz ist Berater, Trainer und Autor zu Webthemen. Er ist Autor und Koautor von über 100 Büchern (unter anderem "JavaScript: Das umfassende Handbuch"), in zehn Sprachen übersetzt, ASP.NET MVP und ASPInsiders-Mitglied sowie Inhaber verschiedener Microsoft-Zertifizierungen. Er unterstützt seit vielen Jahren Mittelständler und Groβkonzerne in den Bereichen Web-Performance, Web-Security und mobiles Web.

Thomas Wießeckel: Christian, die Kommunikation mit JavaScript war in der Vergangenheit arg eingeschränkt - seit HTML5 sich immer weiter verbreitet, gibt es jedoch Licht am Ende des Tunnels. Was hat sich in den letzten Jahren getan?

Christian Wenz: Eine ganze Menge. JavaScript wurde ja bekannterweise in sehr kurzer Zeit erstellt und so ist es verwunderlich, dass es überhaupt ein Sicherheitskonzept gibt. Für heutige Webanwendungen ist dieses Modell allerdings immer wieder ein Hindernis. Glücklicherweise gibt es alte und neue Workarounds. In Sachen Kommunikation gab es in JavaScript lange Zeit wenig – und das, was es gab, war kaum bekannt. Mit der Einführung von XMLHttpRequest hat sich hier etwas getan, in Verbindung mit den Sicherheitseinschränkungen konnte man viel machen, aber eben nicht alles. Neue Protokolle und Standards und auch performantere Kommunikationsmöglichkeiten sind Aspekte, die viele Web-Applikationen bereichern können. Darum geht es auch bei den HTML5 Days.

Thomas Wießeckel: Einige der von dir genannten Features sind nicht neu - und dennoch nicht sonderlich verbreitet. Woher kommt das deiner Meinung nach?

Wenz: Die am häufigsten eingesetzte Kommunikationstechnologie ist wohl XMLHttpRequest und die reicht in vielen Fällen auch aus. Außerdem gibt es immer mehr Frameworks, die selber zwischen Client und Server die beste Kommunikationstechnologie aushandeln, so dass man nicht mehr notwendigerweise einen Einblick braucht, was im Hintergrund passiert. Das finde ich schade und auch bedenklich, erklärt aber auch, wieso einige der Lösungen einen geringeren Bekanntheitsgrad haben. Das will ich im Workshop auf den HTML5 Days ändern.

Thomas Wießeckel: Nun gibt es für viele Probleme entweder die "richtige" aber mächtige Lösung - und einige Workarounds, zum Beispiel die Nutzung von Local Storage als Kommunikationsmöglichkeit über Tabs hinweg. Welche weiteren spannenden Beispiele kennst du noch?

Wenz: Die Messaging-API von JavaScript ist meiner Meinung nach eines der am meisten unterschätzten Features der Sprache – auch wenn die Schnittstelle selber auch für Webworker Pate stand. Die Verwendung von Web-Storage ist auch ein gutes Mittel für Datenaustausch und -persistenz, weil Cookies für Single-Page-Applications meist nicht der optimale Weg sind.

Thomas Wießeckel: Wie schätzt du diesen Forscherdrang der Entwickler ein - ist das der Schub, den die Browserhersteller benötigen, um alle (offenen) Features endlich umzusetzen?

Wenz: Das ist ein typisches Henne-Ei-Problem. Unterstützt man offene Features zu einem frühen Zeitpunkt, mag das gut fürs Ego sein, aber schlecht für die Browserunterstützung der Anwendung. Andersherum haben Browserhersteller möglicherweise weniger Motivation, Features zu implementieren, die bei der Konkurrenz nur wenig Anwender finden. Ich denke dass heutzutage vieles Framework-getrieben ist – bei aktuellen Browsern wird auf die neuesten Features gesetzt, für ältere Systeme gibt es Polyfills. Das entbindet Entwickler nicht von der Pflicht, sich mit den dahinter liegenden Techniken zu beschäftigen, aber es verbreitert die Zielgruppe der Anwendung.

Thomas Wießeckel: Welches der bestehenden und vielleicht noch kommenden APIs findest du am spannendsten?

Wenz: Spannend finde ich WebRTC, aber bis das wirklich überall funktioniert, wird das noch ein wenig dauern. Ansonsten stelle ich bei Kunden immer wieder fest, dass ein Framework, das standardmäßig WebSockets verwendet und als Fallback-Lösung XMLHttpRequest implementiert, in vielen Anwendungsfällen der beste Ansatz ist.

Thomas Wießeckel: Auf den HTML5 Days hältst du einen Workshop zu den Kommunikations-APIs von JavaScript und HTML5. Was erwartet die Teilnehmer darin?

Wenz: Im Wesentlichen die Themen, die wir bei den vorherigen Fragen schon diskutiert hatten. Der Fokus liegt ein wenig stärker auf den „Unsung Heroes“. Beispielsweise geht es auch um WebSockets, aber nicht als Hauptthema. Dafür diskutieren wir verschiedene Ansätze, die Same-Origin-Policy der Browser zu umgehen, von alten Ansätzen wie JSONP bis hin zu neueren Standards wie CORS. Auch Exoten wie etwa Server-Sent-Events kommen vor, aber prinzipiell ist natürlich alles mit unzureichendem Browser-Support für die Praxis nur wenig relevant.

Erfahre mehr über die HTML5 Days 2015

]]>
t3n Redaktion