Hands on: Responsive Development

ZIELGRUPPE

Webdesigner, Webentwickler, Webmaster

VORAUSSETZUNGEN

Erfahrungen in der Umsetzung von Webseiten, HTML- und CSS-Kenntnisse, Teilnahme am Training „Responsive Webdesign Basics“ empfohlen.

DAS ZIEL

Klippen bei der Entwicklung von responsiven Webseiten kennen, erkennen, priorisieren und umschiffen.

ZUORDNUNG

Smartphones, Tablets, Rechner, alte Browser, neue Browser. Die Probleme bei der Programmierung von Webseiten sind mit der sukzessiven Einführung von HTML 5 und CSS 3 noch komplexer geworden. Hinzu kommt, dass sich Webseiten nun an unterschiedliche Gerätetypen anpassen sollen, die verschiedene Formate und Bedienkonzepte mit sich bringen. In diesem eintägigen Workshop werden einige Stolperfallen und Besonderheiten vorgestellt und Lösungsmöglichkeiten aufgezeigt.

THEMEN

DIE GERÄTELANDSCHAFT: ENTWICKLUNGSRELEVANTE UNTERSCHIEDE
  • Unterschiede zwischen den Geräten
    • Größen und Auflösungen
    • Navigationsarten
  • Die optimale Viewport-Einstellung
  • Festlegen der Breakpoints
  • Mediaqueries sinnvoll einsetzen:
    • Width vs. devicewidth
    • Landscape vs. portrait
BESONDERHEITEN VON SMARTPHONES UND TABLETS
  • TouchScreens haben keinen a:hover-Status
  • Format detection vs. Telefonie-Links
  • Hoch- und Querformat
  • iOS Orientation-Change-Fix
VIRTUELLE TASTATUREN BEEINFLUSSEN
  • Input-Types für Formularfelder
LAYOUT-TECHNIKEN UND BROWSERKOMPATIBILITÄT
  • Flexbox und Grids einsetzen
  • Progressive Enhancement mit Modernizr und Featurequeries (und deren Grenzen)
  • Gracefull Degradation im CSS berücksichtigen
SCALABLE VECTOR GRAPHICS
  • SVGs mit CSS manipulieren
  • SVGSprites einsetzen
TYPOGRAPHIE: WEB- UND ICONFONTS RICHTIG LADEN UND EINSETZEN
  • Verwendung von Webfonts
  • WebfontIcons erzeugen und einsetzen (ein- und mehrfarbig)
  • Die Wahl der richtigen Größeneinheit und Werte
BITMAPBILDER IN VERSCHIEDENEN AUFLÖSUNGEN EINBINDEN
  • Verschiedene Ansätze um Bilder in verschiedenen Auflösungen (Stichwort hochauflösende „Retina-Displays“, Adaptive Images)
SKRIPTE FÜR SPEZIALFÄLLE AUSWÄHLEN UND EINSETZEN 
  • Skripte für Spezialfälle (z.B. fittext.js, kerning.js), Vor- und Nachteile
  • Slideshows einbinden (Besonderheiten, Anforderungen)
  • Videos über Youtube oder Vimeo in proportionaler Größe einbinden

Achtung! Frameworks und CMS werden hier nicht berücksichtigt.

Eckdaten

AGD-Redaktion

Keine Gesprächsbeiträge

Hierzu ist es noch ruhig, wenn Sie möchten, starten Sie jetzt ein Gespräch.

Designer finden

Sie suchen einen Kollegen in einem bestimmten Fachbereich? Oder einen Designer für Ihre neue Website oder die Designstrategie Ihres Unternehmens? Dann finden Sie hier deutschlandweit rund 3.000 Kreative: Designer finden.

AGD-Mitglied werden

Die AGD, das deutschlandweit größte Kreativteam, und die Möglichkeiten, die sie ihren Mitgliedern bietet, haben Sie überzeugt. Dann gelangen Sie hier schnell und unkompliziert zum Mitgliedsantrag.

Design kalkulieren

Der VTV Design, die Web App unseres Standardwerkes VTV Design, bietet Ihnen vielfältige Möglichkeiten, Ihre Designprojekte zugeschnitten auf Ihre individuellen Bedürfnisse zu kalkulieren.

Designberatung

Designer aller Disziplinen erhalten hier Beratung und Tipps von AGD-Kollegen zu designrelevanten Themen. Kollegen beraten Kollegen.

Rechtsberatung

AGD-Mitglieder erhalten eine kostenlose juristische Beratung von unserem Justiziar Alexander Koch: 030 - 5552 2926, rechtsberatung(at)agd.de.

Steuerberatung

AGD-Mitglieder können sich mit steuerrechtlichen Fragen hierhin wenden: ECOTAX Ansgar Müller & Partner Steuerberatungsgesellschaft, Bernauer Straße 13, 16515 Oranienburg, Tel: 03301-85606, Fax: 03301-856085

Ich bin AGD-Mitglied, weil…

„Ich bin seit mehr als 20 Jahren in der AGD. Die Gründe dafür haben sich im Laufe der Zeit mehrfach geändert.
Mitglied wurde ich, weil ich am Beginn meiner Selbstständigkeit viel Unterstützung in Form von Tipps und Best practice bekommen habe. Heute kann ich mein Wissen und meine Erfahrungen an die Kolleginnen und Kollegen weitergeben. Durch den Austausch auf Regional- und Bundesebene konnte ich gute Kontakte aufbauen, auf ein qualifiziertes Netzwerk zugreifen, und mir durch Kollaborationen in diesem Netzwerk neue Kunden und komplexere Aufträge erschließen.
Die AGD mit ihren Kolleginnen und Kollegen ist eine wichtige Plattform. Sie ergänzt mein Portfolio perfekt.“

Christhard „Otto“ Landgraf

Neu auf AGD.de

Unterwegs, WissensWertes

KI und Kreativwirtschaft: AGD zu Gast im BMWK

Am 16. April 2024 versammelten sich rund 100 Vertreterinnen und Vertreter der Kultur- und Kreativwirtschaft, darunter auch die AGD, im Bundesministerium für Wirtschaft und Klimaschutz (BMWK) in Berlin. Gemeinsam wurde über die Potenziale, Chancen und Risiken der Nutzung Künstlicher Intelligenz (KI) Diskutiert. Eröffnung des Events & Paneldiskussion  Eröffnet wurde die Veranstaltung durch Michael Kellner, parlamentarischer […]

Weiterlesen
Vergütung

Honoraruntergrenzen bei öffentlichen Aufträgen

In einer selbstbewussten Stellungnahme bezieht der Deutsche Designtag Position zu den geplanten Honoraruntergrenzen für Künstler:innen, die von Einrichtungen der öffentlichen Hand beauftragt werden. Denn hier geht es um nicht viel weniger als die Abschaffung ausbeuterischer Verhältnisse für selbstständige Kreative, wenn sie für öffentliche Auftraggeber:innen arbeiten. Welche Honoraruntergrenze der Deutsche Designtag empfiehlt und warum und was das mit unserem VTV Design zu tun hat, erfahrt ihr in diesem Beitrag.

Weiterlesen

Newsletter

Ja, ich möchte den Newsletter per E-Mail zugesendet bekommen. Die Datenschutzerklärung habe ich zur Kenntnis genommen.

Nachoben