Etwas Abstand zum Objekt oder ein gutes Weitwinkelobjektiv sorgen dafür, dass große Gebäude im Ganzen abgelichtet werden können. Trotzdem kommt es zu Verzerrungen, wie etwa verschobene Horizonte oder gebogene Linien. In Photoshop kannst du diese Fehler leicht ausbügeln und einige weitere Optimierungen vornehmen. Auch Camera RAW und Adobe Lightroom bieten uns dazu Lösungen an.
Text-Tutorials sind recht beliebt, um bei Einladungen, dem eigenen Poster oder einem Banner im Netz schnell zu guten Ergebnissen zu gelangen, wenn sehenswerte Überschriften gefragt sind. Da kann der Schriftzug glühen wie Magma, kalt aus Eis geformt sein oder wie süßer Honig fast zufällig ein Wort ergeben. Aber auch die zahlreichen 3D-Effekte sind erstaunlich.
Ab der Version 75 wird Chrome das sogenannte “Lazy-Loading” nativ unterstützen. Das kündigt Addy Osmani, einer der führenden Entwickler hinter dem Browser in seinem Blog an. Aktuell ist allerdings noch die Version 73.
Damit wird Chrome voraussichtlich ab Juni 2019 das nachrangige Laden von Bildern und iFrames unterstützen, die einen bestimmten HTML-Tag zugeordnet bekommen haben, nämlich:
<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="..." />Dabei zeigt loading="lazy" dem Browser an, dass dieses Bild nachrangig geladen werden kann. Es lohnt sich also, fortan diesen Wert für alle Bilder auf einer Seite hinzuzufügen.
Es wird sich sicher auch eine Entwicklerin finden, welche dafür eine WordPress-Plugin erstellt, so dass dieser Vorgang rückwirkend und für alle bereits bestehenden Bilder per einmaligem Knopfdruck vorgenommen werden kann. Sobald wir da fündig werden, werden wir den Namen dieses Plugins nachliefern. Falls ihr schon fündig geworden sein solltet, könnt ihr das auch gerne in den Kommentaren bekunden!
Dasselbe Prinzip des loading="lazy" wird auch für die iFrames dieser Welt gelten, sodass die HTML-Tags wie folgt aussehen sollten:
<iframe src="https://www.youtube.com/embed/einhuebschesvideo" loading="lazy"></iframe>Eine Vielzahl von Webseiten enthalten oft eine hohe Anzahl von Bildern, welche oftmals noch nicht einmal für die Darstellung am Bildschirm optimiert sind. Das führt dazu, dass alle Bilder zusammengenommen meist mehr Ladevolumen und -zeit beanspruchen als die eigentlichen textbasierten Inhalte. Wir schrieben unter anderem diesen Beitrag dazu.
Die Crux des Ganzen ist dabei, dass viele dieser Bilder sich nicht im sichtbaren Bereich des Bildschirms befinden, sondern oft erst im weiteren Bildlauf zu sehen sind, sobald man also nach unten scrollt.
Von daher müssten diese zunächst nicht sichtbaren Bilder anfangs gar nicht erst geladen werden, solange sie nicht zu sehen sind. Die Bilder zu laden, kurz bevor sie in den sichtbaren Bildschirmbereich kommen, würde völlig genügen.
Diese Problem soll nun mit der Einführung des Tags und Attributs loading="lazy" behoben werden.
Bisher ist es gängige Praxis, extra ein JavaScript zu laden, nur um die Auswirkungen von Offscreen-Bildern auf die Seitenladezeiten zu begrenzen, und um den Abruf dieser Bilder solange zu verzögern, bis die Nutzer in die Nähe der zu ladenden Bilder kommen.
Addy Osmani zeigt in seiner Ankündigung sehr gut auf, welchen Effekt die Benutzung des Lazy-Loadings auf die Seitenladezeit haben kann.
Folglich kann das nativ-verzögerte Laden dazu beitragen, dass alle Inhalte, welche sich oben im sichtbaren Bereich befinden, deutlich schneller angezeigt werden. Sowohl die Gesamtladezeit als auch das Ladevolumen einer Website werden dadurch erheblich reduziert.
Damit die Bilder (und Videos) aber nicht erst geladen werden, wenn sie sich bereits im sichtbaren Bereich befinden, eine Sache die eher als störend empfunden wird, werden die mit dem loading="lazy" Tag versehenen Bilder bereits im Hintergrund geladen, bevor sie in den sichtbaren Bereich kommen. Somit bleibt der Gesamteindruck einer Seite auch in dieser Hinsicht ungetrübt.
Für Entwickler ist es wichtig zu wissen, dass nicht nur die ordinären <img> und <iframe> Tags unterstützt werden, sondern auch die responsiven Bildformate à la <srcset> und <picture>.
Zum Abschluss noch eine Liste mit Beispielen:
<!-- Hier das Standard-Schnipsel, welches das Bild erst dann lädt, wenn die Nutzer in die Nähe des Bildes scrollen: -->
<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="Eine süße Katz hat eine süße Fratz und zeigt dem Spatz ihre Tatz"/>
<!-- Hier das responsive <picture> Bildformat, dass meist nur von versierten Entwicklern eingesetzt wird. Der <img> im Beispiel wird dabei nur für ältere Browser, die mit den neuen responsiven Bildformaten nichts anfangen können, beibehalten. -->
<picture>
<source media="(min-width: 40em)" srcset="ein-grosses-bild.jpg 1x, ein-grosses-bild-in-hd.jpg 2x">
<source srcset="ein-kleines-bild.jpg 1x, ein-kleines-bild-in-hd.jpg 2x">
<img src="das-bild-für-alte-browser.jpg" loading="lazy">
</picture>
<!-- Hier das Beispiel mit dem srcset Format, bei welchem nur die Bildgröße spezifiziert wird -->
<img src="small.jpg"
srcset="ein-grosses-bild.jpg 1024w, ein-mittelgrosses-bild.jpg 640w, ein-kleines-bild.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="Mein süsser Spatzfratz" loading="lazy">
<!-- Hier ein Beispiel für ein iFrame. Das kann z.B. eine Karte von Google Maps oder ein eingebettetes Video sein -->
<iframe src="video-player.html" loading="lazy"></iframe>Zu guter Letzt sei noch gesagt, dass Browser, die den loading="lazy" Tag nicht unterstützen, diesen einfach ignorieren. Das ist das Schöne an HTML: Nicht unterstützte Attribute werden einfach ignoriert und tun keinem weh.
Wer das neue Feature schon heute probieren möchte, kann dies tun, indem er/sie chrome://flags in die URL-Leiste eingibt, und dann “Enable lazy frame loading” sowie “Enable lazy image loading” aktiviert. Danach gilt es noch, den Chrome-Browser neu zu starten und los geht es.
Als weiterführenden Artikel und für mehr Details dazu, wie die Implementierung im Detail erfolgt, lohnt es sich, Addy Osmanis Beitrag zu lesen.
Beitragsbild: Depositphotos
Heutzutage können auch kleine Unternehmen als Global Player tätig sein. Weltumspannende Paketdienste, das Internet und international tätige Geldtransfer-Dienstleister machen es möglich. Um international erfolgreich zu verkaufen, muss man sich jedoch ein tragfähiges Konzept schaffen und überlegt vorgehen.
Seit der Einführung der HTML5-Videos ist das Abspielen von Videos ganz ohne Plug-ins möglich. Doch HTML5-Videos bieten weit mehr, als Videos nativ im Browser darzustellen. Mit der Track-Funktion lassen sich sogar Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machst du Videos für Hörgeschädigte und alle, die gerade keine Lautsprecher zur Verfügung haben, zugänglich.
Was Navigationsgeräte schon lange können, können nun auch die Browser. SpeechSynthesis aus der Web-Speech-API erlaubt es, Texte mit einer menschlichen Sprechstimme auszugeben. Dabei stehen Stimmen für mehrere Sprachen zur Verfügung – teilweise auch mehrere Stimmen pro Sprache. Per Knopfdruck können sich deine Besucher den Text eines HTML-Dokumentes einfach vorlesen lassen.
Wir alle haben hunderte Fotos auf dem Rechner liegen und wissen nichts damit anzufangen. Dabei reichen oft wenige Schritte in Photoshop, um aus einer guten Aufnahme ein außergewöhnliches Foto zu zaubern. Wir geben drei Beispiele und regen zum Ausprobieren an. So kommst du in wenigen Schritten zu interessanten Varianten deiner schönsten Bilder.
Wer einem Hobby intensiv nachgeht, der benötigt irgendwann auch genau darauf zugeschnittene Ausrüstung – so verhält es sich auch beim Gaming. Doch benötigen Zocker wirklich spezielle Mäuse, und wie findest du heraus, welche die richtige für dich ist? Wir haben uns einmal eingehend damit beschäftigt, von welchen Faktoren es abhängt, welche Gaming-Mäuse zu dir passen, und wie du vor dem Kauf mögliche Kandidaten herausfiltern kannst.
Warum genau benötigen Gamer eigentlich besondere Eingabegeräte – tun es nicht auch die normalen Büromäuse und –tastaturen? Die Grundfunktionen einer Zocker-Maus unterscheiden sich schließlich nicht groß von denen einer standardmäßigen Maus.
Dennoch gibt es diese recht teuren Geräte, und sie haben wie beispielsweise kostspielige, aber extrem leistungsfähige Monitore für Mediendesigner ihre Existenzberechtigung. Mehrere Faktoren heben Gaming-Geräte von der grauen Masse ab:
Damit all diese Faktoren möglichst gut erfüllt werden, kommt natürlich einiges an technischer Finesse zusammen, daher auch der höhere Preis.
Um für jeden Spielertyp die passende Maus anzubieten, variieren die Hersteller bei ihren Modellen mit allen möglichen technischen Eckdaten, wodurch eine extreme Vielzahl verschiedenster Geräte entsteht. Wer nun auf der Suche nach einem Nager ist, hat daher die Qual der Wahl. Wir haben zusammengefasst, wie du bestimmst, welche Eigenschaften für dich wichtig sind, und somit die richtigen Kandidaten für dich herausfiltern kannst. Nachdem du das Feld so eingegrenzt hast, kannst du die optimalen Mäuse für deine Ansprüche beispielsweise im Vergleichstest von Only4gamers herauspicken.
Um den Findungsprozess eines Eingabegerätes zu starten ist es wichtig, zu Beginn die eigenen Ansprüche festzuhalten. Denn: Es gibt keine „beste Maus“, und auch keine klare Kaufempfehlung, die pauschal für einen bestimmten Spielertyp die richtige sein wird. Wer nur ab und zu eine Runde Solitaire spielt ist auch mit dem Trackball aus dem Büro noch gut bedient. Doch auch bei Spielern moderner Multiplayer-Titel können sich noch deutliche Unterschiede herauskristallisieren – die Kaufentscheidung ist in jedem Fall sehr individuell.
Denn wichtig ist, dass die Maus sich für dich persönlich auch bei intensiverer Nutzung immer gut anfühlt – blind einer Kaufempfehlung zu folgen, kann daher ein Fehler sein.
Dabei gibt es zahllose unterschiedliche technische Merkmale, denen du unterschiedliche Relevanz für deine Kaufentscheidung zuordnen kannst:
Unabhängig von der Art der Spiele, die du spielst, oder deinem eigenen Anspruch an Leistung, ist dieser Faktor für jeden Spieler essentiell. Die Haptik des Gerätes muss passen, und vor allem muss sich die Maus gut anfühlen. Da eine Gamingsession gerne mal mehrere Stunden dauern kann, ist es Pflicht, dass der Nager gut in der Hand liegt.
All das entscheidet darüber, wie groß und schwer das Gerät sein sollte.
Einer der offensichtlichsten Unterschiede bei Gaming-Mäusen ist die Anzahl der verfügbaren Tasten. Um sich zwischen einer einfachen Maus mit drei Tasten und einem programmierbaren 18-Tasten-Monster zu entscheiden reicht es aber nicht, pauschal zu fragen, welche Art Spiele damit bedient werden sollen.
Auch ein typisches MMO, das von Spielern das Nutzen zahlloser Hotkeys verlangt, kann theoretisch problemlos mit einer einfachen Maus und allen weiteren Funktionen auf der Tastatur bedient werden. Genauso bevorzugen viele ambitionierte Shooter-Spieler eine Maus mit wenigen Tasten, um sich nur darauf zu konzentrieren, die Ziele präzise anvisieren zu können. Doch wenn du anderes gewöhnt bist, kannst du die Ausnahme dieser Regel sein.
Es ist also wichtig, dass du für dich selbst entscheidest, wie viele Tasten du effektiv nutzen wirst. Jeder Spieler ist anders, und hat daher auch ganz individuelle Anforderungen. Du dürftest selbst am besten wissen, ob du beispielsweise bei Starcraft 2 Probleme hast, sämtliche Aktionen nur mit einer Hand ausführen zu müssen (denn was Profis in schnellen Strategiespielen auf der Tastatur leisten ist fast unvorstellbar), und die linke Hand daher gerne mit mehr Hotkeys auf der Maus entlasten würdest.
Sensorik: Hardcore-Spieler mit Ambitionen oder „Casual“?
Wenn du nur einmal im Monat eine Runde mit den Arbeitskollegen daddelst, fallen deine Anforderungen deutlich anders aus als die eines Profispielers (oder denjenigen, die erst noch einer werden wollen). Selbstverständlich soll auch für spontane Sessions deine Maus möglichst präzise sein, aber auch die Sensoren, die noch kleinere Mäkel haben wie beispielsweise einige der noch verbauten Laser-Sensoren, sind heutzutage so zuverlässig, dass du keinen Unterschied spüren wirst.
Die Faustregel: Alle Sensoren, die von den bekannten Herstellern verwendet werden sind zumindest sehr gut – die hochwertigsten optischen Abtaster sind jedoch extrem makellos. Erst Spieler mit Profi-Ambitionen werden diese geringfügigen Unterschiede überhaupt spüren beziehungsweise die Vorteile zu schätzen wissen. Auch zu beachten – die extrem hohen DPI-Zahlen, mit denen geworben wird, sind nicht zwingend notwendig. Präzision ist für viele Spieler wichtiger, als eine hohe Geschwindigkeit.
Wenn du beispielsweise eher für den Spaß an der Sache spielst, kann diese Entscheidung für dich ein breites Spektrum an Modellen eröffnen, so dass du möglicherweise bezüglich anderer Aspekte das idealere Gerät für dich finden kannst. Beispielsweise verzichten viele Profispieler auf kabellose Mäuse, doch die Nachteile sind mittlerweile bei den aktuellsten Geräten so gering, dass es für dich die absolut richtige Wahl sein kann, wenn du dich hin und wieder auch mal zurücklehnen möchtest.
(Beitragsbild von Robert-Owen-Wahl auf Pixabay)
Die Conversion-Rate bezeichnet die Erfolgsquote für Onlineshops. Also den relativen Anteil der Website-Besucher, die Produkte kaufen. Finden sich im Verkaufsprozess Conversion-Killer, also UX-Elemente, die den Kunden abschrecken, wandert die Quote in den Keller. Mit Conversion-Boostern, im Grunde Verkaufstricks, kannst du die Quote hingegen steigern. Nur ein paar Kleinigkeiten können dabei über den wirtschaftlichen Erfolg eines Webshops entscheiden.
In einem Orchester müssen Musiker und Instrumente optimal aufeinander abgestimmt sein und perfekt harmonieren – gelingt dies nicht, wird jedes Konzert ein wildes Durcheinander von Klängen und Tönen. Ähnlich verhält es sich mit den Marketinginstrumenten im sogenannten Marketing-Mix. Dabei geht es um den gezielten, koordinierten und wirtschaftlichen Einsatz des zur Verfügung stehenden Instrumentariums, um die grösstmögliche Wirkung zu erzielen.
Gerade komplexe Webanwendungen setzen der Rechenleistung des Clients häufig zu. Vor allem auf mobilen Geräten ist es wichtig, besondere Vorsorge dafür zu treffen, dass alles flott läuft. Mit der neuen User-Timing-API können Ladezeiten einfach und vor allem präzise per JavaScript getestet werden. Denn die Messwerte beziehen ihre Werte der High-Resolution-Time-API, welche Zeiten auf die Mikrosekunde genau messen kann. Mit der Navigation-Timing-API ist es zudem möglich, Ladezeiten einer Website anhand vordefinierter Messpunkte zu ermitteln. Dank der komplexen und teils präzisen Messmöglichkeiten können Entwickler gut feststellen, an welchen Stellen innerhalb einer Anwendung es hakt.
Es gibt zwei großartige Methoden, Videos schneller ablaufen zu lassen, als es die Zeiger auf der Uhr so vorgesehen hatten. Einmal gleich in deiner Kamera oder aber nachträglich in einer Software, die Video-Bearbeitung zulässt, wie etwa Adobe Premiere. So lassen sich zeitintensive Abläufe auf wenige Minuten reduzieren, um diese dennoch zu präsentieren, wenn auch etwas gestrafft. Sieh die Welt mit anderen Augen!
Google bietet weit mehr als nur die altbekannte Suchmaschine. Eine breit gestreute Variante von frei und kostenlos zu nutzenden Tools kann dir das Leben als Seitenbetreiber sehr erleichtern. Google bietet dir Tools zum Verbessern der SEO-Eigenschaften deiner Website, zur Verbesserung deiner Produktivität und auch zum Geldverdienen. In diesem Artikel stellen wir dir einige der besten, kostenfreien Google-Tools vor, die du kennen solltest.
Regelmäßige Leserinnen und Leser des Dr. Web Magazin kennen den großartigen Bildoptimierer TinyPNG aus den Niederlanden. Viele, so wie ich, werden den Schrumpf-Service fest in den Arbeitsalltag aufgenommen haben. Über 70% Ersparnis in der Dateigröße bringt TinyPNG zuverlässig, ohne sichtbar die Qualität zu beeinträchtigen. Das bedeutet indes nicht, dass der Dienst alternativlos wäre. Ich habe diesen und ein paar andere für euch näher betrachtet.
Onlineshops machen ähnliche Fehler wie andere Unternehmen auch: Zu oft liegt der Fokus ausschliesslich, mindestens aber zu stark auf der Gewinnung neuer Kunden. „Diesen Monat schon wieder 50 Neukunden gewonnen“, so oder ähnlich lauten oft alleinige Erfolgszahlen. Welche Qualität von Kunden man gewinnt, ob es zu Folgekäufen kommt, welche und wie viele Produkte in den Warenkorb gelegt werden, wie oft Kunden einkaufen und viele Parameter mehr werden zu wenig beachtet. Vor allem aber wird für die Erhebung und Verbesserung dieser Parameter zu wenig getan…
Die besondere Wirkung von Farben spielt eine große Rolle im Webdesign, denn Farben berühren die Sinne, lösen Gefühle aus und bleiben im Gedächtnis. Durch Farben ausgelöste Emotionen sind sehr wichtig für die Bildung einer Marke. Ohne die richtige Farbe wäre manches moderne Unternehmen nicht so groß geworden sein. Daher bringen wir dir heute die gängige Farbenlehre näher. Wir erklären Farben und ihre Wirkung auf die menschliche Psyche und geben dir Tools für optimale Farbgebungen an die Hand. Den Abschluss bilden Beispiele von in diesem Sinne optimal gestalteten Webseiten.