Archiv der Kategorie: Internet

‚einundzwanzig.de‘ für den Dortmunder-Stadtwerke-Konzern auf OELcms-Basis relaunched

Optimierung der Webpräsenz ‚einundzwanzig.de‘ – „Mobile, Responsive, Google“ für die Anforderungen und Pflichten von Google sowie die Anpassung der Inhalte für eine optimale geräteunabhängige Ausgabe (Desktop, Pad, Phone) unabhängig vom Gerätehersteller und der Geräteplattform – Responsive Design.

dsw21_relaunchGemäß der letzten Analysen und der daraus resultierenden Briefinggespräche und folgende mit den sich daraus ergebenden weiteren Pflichten, Anforderungen, Optimierungen und Entgegnungen/Anpassungen an das gegenwärtige und zukünftige Nutzerverhalten. Stichwort Nutzererfahrung.

Vertiefung der vorläufigen Analyse, interne Abstimmung, abschließende Festlegung der erforderlichen Maßnahmen und Arbeitsanforderungen und -Schritte, erste Tests am Real-Content, PageSpeed Insights, Geschwindigkeitsoptimierungen.

PageSpeed Insights misst die Leistungsfähigkeit einer Seite auf Mobilgeräten und Desktop-Computern. Eine hohe Bewertung ist besser als eine niedrige und weist auf eine leistungsstarke respektive leistungsschwache Seite hin. Die Bewertung kann sich ändern, wenn neue Regeln hinzugefügt oder die Analysemethoden verbessert werden. Das gilt auch beim Hinzufügen zusätzlicher Inhalte auf Content-Seite.

Vollständige mögliche Optimierung der gegenwärtigen Desktop-Version für die Anforderungen/Pflichten von Google.

Regeln:

  • JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen
  • Antwortzeit des Servers reduzieren
  • CSS reduzieren
  • Bilder optimieren
  • HTML reduzieren
  • JavaScript reduzieren
  • Komprimierung aktivieren
  • Sichtbare Inhalte priorisieren
  • Zielseiten-Weiterleitungen vermeiden
  • Anpassung der Inhalte für die geräteunabhängige Ausgabe für die Kategorien Desktop, Pad, Phone unabhängig von deren Betriebssystem und Internetbrowser als ein einziges Content-Angebot.

Responsive Design:

Usability

Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte,

Die Umsetzung erfolgt mit HTML5 und CSS3. Media Queries erfragen Informationen vom Endgerät. Wie etwa Displaygröße, Auflösung und Format, sowie Eingabegeräte. Inhalt und Layout einer Seite werden strikt getrennt, damit das Responsive Design optimal funktioniert.

Der Viewport definiert den Fokus des Darzustellenden Seiten-Inhaltes. Ist diese Information ausgewertet, lassen sich über CSS3 Media Queries die Inhalte steuern. Auch Schriftgröße und Bereiche wie Header und Footer werden so gesteuert. Seitenleisten für die Darstellung einer Navigation oder Kategorien werden entsprechend positioniert oder komplett ausgeblendet.

Optik:

Es wird der gleiche Inhalt in leicht abgewandeltem Design für verschiedene Endgeräte zur Verfügung gestellt. Für kleine Displays etwa durch die Reduzierung der Elemente. Im Wesentlichen werden die vorhandenen Elemente anders strukturiert dargestellt. Wie auch beim Wechsel zwischen Hoch- und Querformat. Die geänderten Seitenverhältnisse erfahren eine Umstrukturierung der Elemente, wobei deren Funktion erhalten bleibt. Der HTML-Code bleibt unverändert, es wird ein anderes Style-Sheet verwendet. Bei der Umstrukturierung der Seite spielt die Priorisierung der vorhandenen Elemente eine große Rolle. Die Überlegung, welche Elemente auf der Seite nach unten rutschen und welche wegen Unwichtigkeit gestrichen werden können, ist unerlässlich.

  • Keine festen Layout-Grids
  • Keine festen Schriftgrößen
  • Keine festen Bildgrößen

Die Unabhängigmachung von Schriftarten des jeweiligen Endgerätes/Nutzers durch die Verwendung von Google-Fonts zur Gewährleistung der anbieterseits gewünschten Darstellung auf allen Geräten.

Ersetzung sämtlicher Logos, Symbole, Kategorien von einer PNG/GIF/JPG Version auf vektorielle Darstellung (SVG)

Abschließende Optimierung für die Anforderungen/Pflichten von Google der dann angepassten Internetpräsenz (nach Umstellung auf Response Design) für Desktop und Mobile (Pad/Phone)

  • Lesbare Schriftgrößen verwenden
  • Optimale Größe von Links oder Schaltflächen auf Mobilgeräten einhalten
  • Interstitials für die App-Installation vermeiden, durch die Inhalte überdeckt werden
  • Plug-ins vermeiden
  • JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen
  • CSS reduzieren

einundzwanzig.de

Siehe auch hier:

‚PRESSEBOX‘ FÜR DEN DORTMUNDER- STADTWERKE-KONZERN ERSTELLT. RESPONSIVE-WEB AUF OELCMS-BASIS

Advertisements

‚Pressebox‘ für den Dortmunder- Stadtwerke-Konzern erstellt. Responsive-Web auf OELcms-Basis

einundzwanzig.de „Pressebox“

dsw21_pressebox

Eigenständiges Web unterhalb von ‚einundzwanzig.de‘ (ggf. Subdomain). Entwicklung einer entsprechenden optischen Linie, schwarzweiß!

  • Gestaltungskonzept Photoshop
  • Abstimmung
  • Umsetzung der Linie als Templates

Seitenvorlage:

  • Kopfmenü (z.B. Download, Impressum/Kontakt)
  • Sammelanzeige der enthaltenen Artikel

Artikelvorlagen:

  • Layouttext + Anhang (pdf o.Ä.)
  • Bildvorschau + Meta-Daten Anzeige
  • Video (Player Vimeo – dort ist Link und Download enthalten) + Material

Storyorganisation:

  • Übersichtsanzeige (z.B. rechts wie im Blog, verfallen nach Ablauf der Schaltungszeit)
  • Assistent  Neue Story (Seite) im Story-Ordner anlegen

Paket-Technik:

  • Alle Inhalte (also alle Anhänge) der aktuellen Story (Bild, PDF, …) als ZIP verpacken und als
  • Download anbieten (gecached)
  • Ist die Story nicht mehr angezeigt, kann das Paket nicht mehr runtergeladen werden

OELCMS:

  • Installation und Vorbereitung Hintergrundsystem
  • Anbindung
  • Funktionalitäten

Google:

  • Berücksichtigung der entsprechenden Richtlinien analog der Verfahrensweisen einundzwanzig.de
  • Optimierung
  • Prüfung

Pressebox DSW21