In diesem Artikel gehen wir sowohl auf die Eigenschaften von PWAs ein und zeigen eine Reihe von Beispielen, wo die Umsetzung besonders gut gelungen ist.
Kategorie: Responsive Design
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 […]
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 […]
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.
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.
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. […]
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.
Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” jedoch definiert eine grundlegende Übereinkunft darüber, dass Webseiten nicht mehr in Photoshop als eine ganze Seite und Pixel für Pixel konzipiert werden, sondern dass man einzelne Komponenten baut, und diese dann zu einem Ganzen responsiv zusammensetzt.
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.
Progressive Web Apps
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.
Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.
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 […]
Google AMP: Accelerated Mobile Pages, ein neuer Standard für mobile Webseiten. Im Jahr 2016 kam der Standard AMP auf den Markt für Webseitenoptimierung im Bereich der mobilen Endgeräte. Hinter dieser neuen Technologie steckt der Internetriese Google, der AMP, was für Accelerated Mobile Pages steht, angeschoben und definiert hat.
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
