Kategorien
E-Commerce Responsive Design

Progressive Web Apps (PWA) im E-Commerce mit Magento

Dass Internetseiten auf allen gängigen Endgeräten in allen erdenklichen Größen für den User am besten und ansprechendsten aussehen, dafür sorgt „Responsive Webdesign.“ Mit Verbesserungen und einer erhöhte Nutzerfreundlichkeit steigen nun die PWAs, also die progressiven Web Apps, in den Ring. Magento, führender Anbieter von Online-Shop-Systemen, zählt zu den stärksten Befürwortern dieser neuen Technologie. Daher lohnt […]

Kategorien
HTML/CSS Responsive Design

So integrierst du responsive Videos und iframes in deine Website

Von modernen Apps und Websites erwartet man, dass sie sich an verschiedesten Auflösungen in möglichst idealer Weise anpassen. So ergibt sich ein optimales Benutzererlebnis, ganz egal, welches Gerät oder welche Auflösung genutzt wird. Inhalte, Bilder und Videos sollten sich in gleicher Weise fließend verhalten, um unterschiedliche Viewports bestmöglich zu bedienen. Doch hast du schon einmal […]

Kategorien
Bilder bearbeiten Design Responsive Design Webdesign

Responsives Webdesign: So wählst du die richtigen Fotos für unterschiedliche Formate

Für dich als Webdesigner ist das mobile Internet eine Herausforderung. Websites müssen auf unterschiedlich großen Displays mit verschiedenen Seitenverhältnissen gut aussehen. Zu deinen Aufgaben gehört dabei auch die Auswahl geeigeneter Fotos für responsives Webdesign.

Kategorien
Design HTML/CSS Responsive Design UI/UX Webdesign

Design für Alle: Fünf Richtlinien für barrierearme Websites

Menschen mit Behinderungen sind überdurchschnittlich oft im Internet unterwegs und dabei manchmal auf spezielle Aufbereitungen der Webangebote angewiesen. Diese Aufbereitung geht über die übliche Darstellung am Bildschirm hinaus. Menschen mit einer Einschränkung des Sehvermögens lassen sich Websites oftmals mittels Screenreader vorlesen oder auch in Braille-Schrift ausgeben.

Kategorien
Design Responsive Design

Mobiles Webdesign: 5 mehr oder weniger gute Navigationskonzepte

Mobiles Webdesign hat seine Tücken. Die Gestaltung mobiler Weblayouts für Smartphones stellt Designer immer wieder vor Herausforderungen. Der wenige Platz, der auf den Geräten zur Verfügung steht, will sinnvoll genutzt sein – vor allem für die Inhalte. Die Navigation darf also am Besten gar keinen Platz wegnehmen, soll aber dennoch schnell und intuitiv auffindbar sein. […]

Kategorien
Apps Bilder bearbeiten Design Freebies, Tools und Templates HTML/CSS Icons & Fonts Plugins Programmierung Responsive Design

SVG für alle: Icons, Tools und andere Ressourcen

Im Rahmen des Siegeszugs mobiler Geräte entwickelt sich kontinuierlich neue Technologie für die schönere Gestaltung von Webseiten und Apps. Eine dieser fantastischen mobilen Technologien ist SVG, die Scalable Vector Graphics. SVG erweitert das Konzept von Vektoren über das Niveau von bloßen skalierbaren Bildern hinaus. Tatsächlich ist ein SVG eigentlich XML-basiert, was heißt, dass ein SVG […]

Kategorien
Design Responsive Design UI/UX

Long Scrolling: So geht Seiten-Design heute

Der Vorspann eines jeder Star-Wars-Movies macht es vor. Die Geschichte scrollt in die Unendlichkeit. Die Timelines sozialer Medien funktionieren ähnlich. Wieso sollte es deine Website nicht ebenso tun? Was es beim Einsatz von Long Scrolling zu beachten gibt, erfährst du im folgenden Beitrag.

Kategorien
Design E-Business HTML/CSS Responsive Design SEO UI/UX

7+ SEO-Tipps, die nur der Designer umsetzen kann

Bevor du anfängst, in die muffigen Tiefen des SEO-Gewerbes abzusteigen, solltest du wissen, dass das Design deiner Seite an sich bereits erheblichen Einfluss auf die Suchmaschinentauglichkeit hat. Wenn da geschlampt wurde, läufst du dem optimalen Ergebnis stets hinterher.

Kategorien
Design Programmierung Responsive Design UI/UX Webdesign

Was sind Progressive Web Apps und sind sie besser als native Apps?

Bei so vielen Smartphones brauchst du doch unbedingt eine App. So denken nicht wenige Unbedarfte, im Designerjargon auch als Kunden bekannt. Aber sogar Fachleute empfehlen bisweilen, bei Redesigns direkt auf native Apps zu setzen, anstatt auf eine Website. Warum das falsch ist, erklärt dieser Artikel. Wir schreiben das Frühjahr des Jahres 2018. Es handelt sich […]

Kategorien
Design Responsive Design UI/UX

Navigationsdesign: Ist das vertikale Menü die neue Best Practice?

Bevor du “Nein” schreist, denk mindestens an die neue Smartphone-Generation. Der neue Trend besteht darin, dass die Geräte höher, aber nicht breiter werden. Meinst du nicht, dass wir den so entstehenden Viewport ganz anders nutzen müssen? Ist das horizontale Menü damit weg vom Fenster?

Kategorien
Design Responsive Design Webdesign

Rezepte für Webentwickler: Deine erste PWA mit dem Service Worker Cookbook

PWA, Progressive Web Apps, setzen sich nur dann als Standard gegen die nativen Mobil-Apps durch, wenn sie möglichst breite Unterstützung finden. Dabei kann jede Web-App eine progressive Web-App sein.

Kategorien
Apps HTML/CSS Responsive Design Webdesign

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

Kategorien
Design HTML/CSS Responsive Design Webdesign

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays

Als Apple vor einigen Jahren anfing, seine iPhones, iPads und MacBooks mit hochauflösenden Displays – den sogenannten Retina-Displays – auszustatten, hat das zu einer deutlichen Verbesserung der Darstellungsqualität geführt. Einzelne Pixel sind auf diesen Displays nicht mehr als solche zu erkennen. Mittlerweile sind hochauflösende Displays längst keine Besonderheit mehr. Vor allem aktuelle Mobilgeräte sind schon […]

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 […]

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 […]

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 […]

Kategorien
Boilerplates & andere Tools HTML/CSS Responsive Design

INK: So erstellt ihr responsive E-Mail-Newsletter, die einfach funktionieren

Schon der erste Satz auf der Website des Anbieters Ink verrät uns, was hier das Ziel ist: „Erstellen Sie schnell ansprechende Responsive-HTML-Mails, die auf jedem Gerät und in jeder Software arbeiten. Selbst in Outlook.“ Mit diesem Augenzwinker-Hinweis auf Microsofts Problemkind (in Bezug auf die Darstellung von HTML-E-Mails) soll eines gleich klar werden: mit uns habt […]

Kategorien
Design HTML/CSS Responsive Design Webdesign

Media Queries Level 4: Pointer optimiert Websites für Zeigegeräte

Dank Media Queries lässt sich eine Website unter anderem für verschiedene Auflösungen und Geräteorientierungen gestalten. So ist es möglich, für nahezu alle Geräte ein optimales Aussehen bereitzustellen. Eine Sache konnte bislang jedoch nicht berücksichtigt werden, nämlich das Zeigegerät beziehungsweise der Pointer. Zwar darf man sich bei kleinen Auflösungen relativ sicher sein, dass es sich um ein […]

Kategorien
Design HTML/CSS Responsive Design Webdesign

Kurzvorstellung: Der Pinegrow Web-Editor will das Design beschleunigen

Einer unserer Leser machte uns auf den Pinegrow Web Editor aufmerksam, einen visuellen Web-Editor zur Entwicklung von HTML-Websites. Das klang gut und war somit für uns Grund genug, dem Editor wenigstens eine Kurzvorstellung zu widmen. Pinegrow arbeitet mit den bekannten Frameworks Bootstrap, Foundation, AngularJS und anderen zusammen. Wenn Sie mit HTML-Seiten, Templates oder mit den Frameworks Bootstrap […]

Kategorien
Design HTML/CSS Responsive Design

CSS3: Viewport Units – Neue Einheiten für responsive Designs

Dank prozentualer Angaben ist es ein Leichtes, Webdesigns zu entwickeln, die sich der Breite und bei Bedarf auch der Höhe des Browserfensters anpassen. Gerade wenn es darum geht, eine Website für verschiedene Medien wie Tablets und Smartphones zu entwickeln, ist dies eine gängige Praxis. Textblöcke, Bilder und andere Elemente passen sich so automatisch jeder Größe […]