Hands-on: Responsive Development

Das Ziel:
Klippen bei der Entwicklung von responsiven Webseiten kennen, erkennen, priorisieren und umschiffen.
Zu­ordnung:
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.
Dauer:
1-Tages-Training
Zeit:
9:00 – 18:00 Uhr, Mittagspause von 13:00 – 14:00 Uhr
Teil­nehmer:
minimal 3, maximal 4
Ziel­gruppe:
Umsetzende Webdesigner, Webentwickler, Webmaster
Voraus­setz­ungen:
Erfahrungen in der Umsetzung von Webseiten, HTML- und CSS-Kenntnisse, Teilnahme am Training “Responsive Webdesign Basics” empfohlen.
Zertifi­kat:
Für jeden Teilnehmer wird eine Teilnahmebestätigung inklusive der Seminarinhalte erstellt.
Kurs­material:
Die Teilnehmer erhalten Zugriff auf die Folien, Notizen und Linksammlungen auf Spacedeck.

 
Sie können sich online oder über ein PDF-Formular für diesen Kurs anmelden!

  • Inhalte

    Die folgenden Inhalte werden in dem Workshop behandelt:
    • 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. device-width
        • landscape vs. portrait
    • Besonderheiten von Smartphones und Tablets
      • Touch-Screens 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
      • SVG-Sprites einsetzen
    • Typographie: Web- und Iconfonts richtig laden und einsetzen
      • Verwendung von Webfonts
      • Webfont-Icons 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.
  • Für wen das Seminar geeignet ist

    Der Seminarplan ist speziell für Frontend-Developer sowie umsetzende Web-Designer bzw. Mediengestalter zusammengestellt. Sie erhalten vielfältige Tipps für die Umsetzung und Einblicke in die Besonderheiten mobiler Browser und ein verbessertes Verständnis zum Umgang mit Vorlagen der Designer und Konzepter. Wenn Sie sich für Ihre Mitarbeiter eine stärkere inhaltliche Ausrichtung auf einzelne Gewerke wünschen, könnte ein Inhouse-Training mit individuellem Seminarplan für Sie interessant sein.
  • Aufbau des Seminars

    An diesem Tag können Sie Ihr eigenes Projekt mitbringen und wir bearbeiten gemeinsam ihre konkreten Fragestellungen.
  • Arbeitsmittel

    Für Notizen wird ein „Beutebuch“ gestellt. Vordrucke, Stabilos und Copics stehen zur Verfügung. Ein Rechner wird nicht dringend benötigt, Sie können jedoch gerne die Wirkung einzelner Codezeilen in Ihren Projekten direkt testen.
  • Preise

    Kategorie
    netto  
    brutto
    Normalpreis
    510 €  
    606,90 €
    Ermäßigt*
    470 €  
    559,30 €
    Frühbucherpreis**
    420 €  
       499,80 €

    * Der ermäßigte Preis gilt für Studenten, AGD-Mitglieder und selbständige Designer die bei Designer-Dock gelistet sind (Bitte Nachweis beilegen).
     
    ** Bei Anmeldung bis sechs Wochen vor dem Termin wird ein Frühbucherrabatt gewährt.
     
    Einzelne Rabattaktionen für bestimmte Termine finden Sie über der Terminübersicht, die auf jeder Seite sichtbar ist. Sie sind nicht mit dem Frühbucherrabatt und anderen Vergünstigungen kombinierbar. Skonto wird nicht gewährt.
  • Fachbegriffe und Stichworte

    Responsive Webdesign, Media Queries, Progressive Enhancement, Adaptive Images, Retina Bilder, plattformübergreifendes Design, Workflow, Tablet-Besonderheiten, Typographie im responsive Webdesign, UX-Design, Screendesign, Konzeption, Umsetzung, Usability, Wireframes, Smartphones, Mobiltelefone, Handys, iPhone, Android, Webkit-Browser, Weiterbildung, Fortbildung, Mitarbeiterschulung, Mitarbeiterqualifizierung, Seminar, Training, Workshop, Kurs, Theorie, Know-How, Praxisbezug, praktische Arbeit, praktischer Projektbezug
  • Termine 2016

    04.03.
    in Berlin
    11.03.
    in Hannover
    27.05.
    in Berlin
    10.06.
    in Hannover
    01.07.
    in Köln
    02.09.
    in Hannover
    11.11.
    in Hannover
    18.11.
    in Frankfurt
    25.11.
    in Berlin