Mittlerweile als moderne Technik etabliert, beschreiben zahlreiche Tutorials Umsetzungsvorschläge für Responsive Webdesign; dennoch stößt man in Projekten mit einem skalierbaren Layout auf immer gleiche Schwierigkeiten. Häufig haben mobile Geräte eine deutlich schwächere technische Ausstattung als der heimische Desktoprechner, sodass Fragen der Performance auf unterschiedlichen Devices in den Vordergrund gerückt werden. Gerade bei Bildern tauchen Begriffe wie "Responsive Images" oder "Adaptive Images" immer wieder auf. Welche Lösungen wann Sinn ergeben und wie man mit Retina-Screens umgeht, wie der aktuelle Stand des HTML5-Responsive-Image-Elements ist und wie man eine schlanke Bilder erstellt, werden in der Präsentation gezeigt.
Die deutsche Variante meines Talks "Rapid prototyping with jQuery" gibt eine Einleitung ins Prototyping und geht dann weiter über Lösungsansätze, Einsatzmöglichkeiten und Vorteilen von Prototypen.
Mittlerweile als moderne Technik etabliert, beschreiben zahlreiche Tutorials Umsetzungsvorschläge für Responsive Webdesign; dennoch stößt man in Projekten mit einem skalierbaren Layout auf immer gleiche Schwierigkeiten. Häufig haben mobile Geräte eine deutlich schwächere technische Ausstattung als der heimische Desktoprechner, sodass Fragen der Performance auf unterschiedlichen Devices in den Vordergrund gerückt werden. Gerade bei Bildern tauchen Begriffe wie "Responsive Images" oder "Adaptive Images" immer wieder auf. Welche Lösungen wann Sinn ergeben und wie man mit Retina-Screens umgeht, wie der aktuelle Stand des HTML5-Responsive-Image-Elements ist und wie man eine schlanke Bilder erstellt, werden in der Präsentation gezeigt.
Die deutsche Variante meines Talks "Rapid prototyping with jQuery" gibt eine Einleitung ins Prototyping und geht dann weiter über Lösungsansätze, Einsatzmöglichkeiten und Vorteilen von Prototypen.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
4 pillars of visualization & communication by Noah Iliinskyiliinsky
A version of my standard "how to do visualization" talk from summer 2016. This version points out that the same process works for most modes of communication as well.
With growing influence of web and more time spend by users staying connected - what would be the future of television? This is my guess how the Television will adapt to going influence of Internet.
Presentatie over het migreren van email naar Microsoft Office365 met praktische voorbeelden en cases gepresenteerd op I'MTECHReady sessie op 29/10/2013.
[Case study] Benton Public Utility District: Reducing labor costs while impro...Schneider Electric
Project Type:
Operational utility solutions
Applications:
Provide a graphical view of a utility’s infrastructure and tools that support cost reduction through simplified planning, analysis and operational response times.
Propriatary technology for manufacture of solid or hollow optical fiber from a soft glass melt in arbitrary lengths appropriate for telcom or laser fabrication applications. Contact Flow Pharma, Inc. 650 462 1440
Responsive Webdesign ist grad der heiße Scheiß, allerdings ist Responsive Webdesign mehr, als eine Desktopwebsite in eine mobile Ansicht zu quetschen. Es muss ein neuer Prozess her. Der alte Workflow "Auftrag bekommen > Recherche > Design erstellen > Abnahme > Design umsetzen" funktioniert so nicht mehr. Im Responsive-Webdesign-Prozess müssen alle Beteiligten eines Webprojekts von der ersten Sekunde an enger zusammenarbeiten. Zudem müssen frühzeitige und häufige Testphasen und Implementierungsstrategien gefunden werden.
Vortrag vom 18.07.2013 im Rahmen des Langen Donnerstags in Dortmund. Thema war die technische Seite von responsive Design, sowie das vorstellen nützlicher Tools und Seiten.
Links zu den genannten Seiten und Tools gibt es gebündelt unter
www.falconwhite.de/unter-der-haube
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
4 pillars of visualization & communication by Noah Iliinskyiliinsky
A version of my standard "how to do visualization" talk from summer 2016. This version points out that the same process works for most modes of communication as well.
With growing influence of web and more time spend by users staying connected - what would be the future of television? This is my guess how the Television will adapt to going influence of Internet.
Presentatie over het migreren van email naar Microsoft Office365 met praktische voorbeelden en cases gepresenteerd op I'MTECHReady sessie op 29/10/2013.
[Case study] Benton Public Utility District: Reducing labor costs while impro...Schneider Electric
Project Type:
Operational utility solutions
Applications:
Provide a graphical view of a utility’s infrastructure and tools that support cost reduction through simplified planning, analysis and operational response times.
Propriatary technology for manufacture of solid or hollow optical fiber from a soft glass melt in arbitrary lengths appropriate for telcom or laser fabrication applications. Contact Flow Pharma, Inc. 650 462 1440
Responsive Webdesign ist grad der heiße Scheiß, allerdings ist Responsive Webdesign mehr, als eine Desktopwebsite in eine mobile Ansicht zu quetschen. Es muss ein neuer Prozess her. Der alte Workflow "Auftrag bekommen > Recherche > Design erstellen > Abnahme > Design umsetzen" funktioniert so nicht mehr. Im Responsive-Webdesign-Prozess müssen alle Beteiligten eines Webprojekts von der ersten Sekunde an enger zusammenarbeiten. Zudem müssen frühzeitige und häufige Testphasen und Implementierungsstrategien gefunden werden.
Vortrag vom 18.07.2013 im Rahmen des Langen Donnerstags in Dortmund. Thema war die technische Seite von responsive Design, sowie das vorstellen nützlicher Tools und Seiten.
Links zu den genannten Seiten und Tools gibt es gebündelt unter
www.falconwhite.de/unter-der-haube
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
Das Whitepaper gibt einen Überblick über Chancen und Herausforderungen bei der Einführung von Reponsive Webdesign. Welche Möglichkeiten bringt die Anpassung eines Webauftritts an verschiedene Endgeräte mit sich? Wie kann ein einheitliches Nutzererlebnis geschaffen werden? Welche Besonderheiten bringen die einzelnen Projektphasen mit sich?
2011 - CMS-Inhalte für mobile Endgeräte / Responsive DesignJohannes Waibel
Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte:
3 Implementierungsvarianten werden aufgezeigt & beurteilt:
a) Responsive Design
b) „Eigene“ mobile Website(s) und
c) Mobile Applikation(en)
Namics Fachveranstaltung vom 3. März 2011.
Next Generation Content Management.
Mobile und Trends.
Von:
Johannes Waibel, Senior Consultant, Namics AG
Marcel Albertin, CTO und Partner, Namics AG
Wie aus: "Wir wollen einen Relaunch" eine nutzerorientierte, responsive Website wird, und welche Herausforderungen dabei auftreten. Eine Betrachtung des Prozesse, der Tools und Ergebnisse aus Agentursicht.
http://www.uxhh.de/roundtable/archiv/index.html#Feb14
Was sind die Trends im Webdesign 2014?
Die erste Ausgabe des datenwerk Kochbuchs gibt einen Überblick und zeigt Beispiele zu grundlegenden Trends im Webdesign der heutigen Zeit.
Workshop auf der Jahrestagung 2014 des Bundesverbands Hochschulkommunikation in Konstanz, am 25.9.2014.
Immer mehr Menschen sind unterwegs online. Muss deshalb jedes digitale Angebot auch mobil nutzbar sein? Langfristig: Ja! Mittel- und kurzfristig wäre es zwar wünschenswert, ist aber in vielen Hochschulen unrealistisch. Denn wer seinen letzten Website-Relaunch 2012 ins Netz gestellt hat, hatte das Thema bei Projektstart noch nicht auf dem Schirm. Heute bringt der massive Ruf nach „Mobilmachung“ viele Kommunikationsabteilungen unter Zugzwang. Was tun, wenn keine Mittel für einen erneuten Relaunch vorhanden sind? Wenn zudem die IT-Abteilung meldet, dass die technischen Grundlagen für responsives Design nicht gegeben sind? In unserem Workshop möchten wir verschiedene Wege zum mobilen Internetangebot vorstellen und miteinander vergleichen. Wir zeigen gelungene Beispiel und geben einen kurzen Einblick in die technischen Grundlagen, ohne zu sehr ins Detail zu gehen. Und wir diskutieren das Für und Wider pragmatischer Übergangslösungen.
Von der Werbestrategie zur Umsetzung von Erfolgreichen Webseits. Was muss ich bei Fotos, Inhalten, Usability, Text usw. beachten. Tipps für die Praxis. Viele Links und Hinweise.
Vortrag für http://www.etourism-fitness.com. EU Projekt zur Förderung von eTourismus. Mehr Gäste durch das Web
Praxis-Bericht über Entstehung der ImmobilienScout24-App. Präsentation-Inhalt lässt sich als Leitfaden für die Entwicklung von Apps im Allgemeinen verwenden.
Responsive Web Design ist mehr als nur der Einsatz flexibler Raster und Break Points. Wir zeigen die Elemente von Responsive Web Design und erklären den Unterschied zum Adaptive Design. Wir zeigen den Responsive Design Prozess, der sich vom klassischen Designprozesses zum Beispiel durch "mobile first" und den iterativen und agilen Ablauf.
Die Antwort auf die Herausforderungen des mobilen Webs ist Responsive Design.
Doch was verbirgt sich hinter diesem neuen Design Ansatz und welches sind die
Benefits die ich daraus ziehe? Referent: Dani Kalt (CEO, CS2 AG)
WCM im Jahr 2013 und danach - der Stand der DingeBernd Burkert
Slides meines Vortrags bei der ShareConf 2013 in Düsseldorf:
Der Web Content Management (WCM) Markt wandelt sich 2013 wohl stärker denn je und die Rolle von WCM in der Unternehmens-IT wird an Gewicht gewinnen. Viele WCM-Verantwortliche suchen nach neuen Strategien und Produkten, um der veränderten Lage Rechnung zu tragen. WCM Produkte die sich nicht anpassen sind vom Aussterben bedroht. Der Vortrag will den aktuellen Stand im Markt aufzeigen, die Teilnehmer für die anstehende Herausforderungen sensibilisieren und Orientierungshilfen bieten.
Das Konzept: Für jeden verständlich und übersichtlich, gemacht für Designer, Template-Entwickler und IT.Alle Anforderungen, alle Besonderheiten für mobile Optimierung müssen spezifiziert sein und dabei soll alles auch noch so einfach wie möglich aufbereitet sein. Gar nicht so einfach, oder?
Web Content - Wer nichts zu sagen hat, bleibt draussenMichael Rottmann
Dabei sein ist im Internet lange nicht mehr alles. Spätestens seit in sozialen Medien jeder Publizist sein kann und will, müssen wir als Leser laufend Relevantes von Irrelevantem trennen. Wir gehen radikaler und ungeduldiger mit Webinhalten um, und lassen alles links liegen, was werbend, nicht schnell erfassbar oder nicht zielführend ist. Selbst Suchmaschinen steigern Ihre Ansprüche.
Für Unternehmen ist der Umgang mit Online-Inhalten oft eine neue Herausforderung: Heute werden Texte aus Print-Broschüren oder Katalogen 1:1 auf die Website kopiert. Webmaster sind aber oftmals nur für das Publizieren der Inhalte zuständig; was fehlt sind Redaktions-Ressourcen, Prozesse und das Wissen über Online-Texte.
Praxis-Bericht über Entstehung der ImmobilienScout24-App. Präsentation-Inhalt lässt sich als Leitfaden für die Entwicklung von Apps im Allgemeinen verwenden.
11. “
...I see the Web getting more focused
on ideas and moving away from
technologies as the primary focus.
Now we’re able to engage in
questions about concept, ideas,
delivery, experience.
— Matthew Smith, SquaredEye
12. Es geht um neue Denkweisen und
neue Designansätze.
18. Umgebungen, in der Webseiten
dargestellt werden können, sind nicht
mehr überschaubar.
19. Wir können nicht für jedes Gerät eine
zugeschnittene Version der Webseite
basteln.
20. “
Instead of building separate sites for
each device, we build one site that
adapts to each device. That’s the idea
behind Responsive Design.
— Chris Armstrong
21. Was ist “Responsive Web Design”?
Eine Technik, mit der Webseiten sich an die
verfügbare Umgebung anpassen lassen.
22. Was ist “Responsive Web Design”?
Umgebung ist gegeben durch Viewport,
Ausgabegerät und seine Orientierung.
23. Was ist “Responsive Web Design”?
Technisch gesehen: fluides Layout mit einer
erweiterten progressiven Verbesserung.
35. Fluid Images
• Wir liefern Bilder in der maximalen Größe
und skalieren sie für jeweilge Auflösungen.
HTML: <img src="image.jpg" alt="Desc" />
CSS: img { max-width: 100%; }
ie.css: img { width: 100%; }
• Weitere Ansätze:
Sliding Composite Images (Zomigi.com), Image Crop
(Zomigi.com), ResponsiveImages.js, ResponsiveImages-alt
36. CSS3 Media Queries: Basics
Mit Media Queries kann man u.a. Breite,
Höhe und Orieniterung des Geräts “abfragen”.
37. CSS3 Media Queries: Basics
• In HTML:
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (max-
width: 450px)" href="small.css" />
• Oder in CSS (Inline CSS?):
@media screen and (orientation: landscape) {
.iPadLandscape {
width: 685px; } }
38. CSS3 Media Queries: Support
IE 9.0+ iOS Safari 3.2+
Firefox 3.5+ Opera Mini 5.0+ Opera
Safari 4.0+ Mobile 10.0+
Chrome 9.0+ Android Browser 2.1+
Opera 10.6+
Legacy browsers: JavaScript-Bibliotheken, wie etwa
css3-mediaqueries.js, respond.js
47. Responsible Responsive Design
“Befreites Design”: es macht keinerlei
Annahmen über die verfügbare Umgebung.
In Praxis:
Breakpoint Graphs, Order-Independent Layouts,
Content Reference Wireframing.
48.
49. Media Queries: Responsive Alles
Responsive Design bezieht sich nicht nur auf
Layouts und Bilder, sondern auch auf Videos,
Navigation, Buttons, Graphen, Tabellen...
50.
51.
52. Aber es gibt ein Problem mit
CSS3 Media Queries...
53. Media Query ist nicht gut genug
Da Media Queries CSS sind, werden alle
Seiteninhalte immer heruntergeladen, auch
wenn sie nicht angezeigt werden.
U.a. auch Flash und HD-Filme sowie JavaScripts und große Bilder. Bis auf Opera, laden Browser immer
Elemente, die mit display: none ausgeblendet werden.
55. Server-Side Media Queries
Lösung: Client-side Media Queries + Server-
side Media Queries.
Erste Ansätze:
ResponsiveImages.js (.htaccess, data-fullsrc)
ResponsiveImages-Alt (cookies)
56. Wir entwickeln uns vom Design von Web-
Seiten über das Design von Komponenten
zum Design von adaptiven Systemen.
57. Wie wäre es, wenn wir nicht in Pixel, sondern
in Systemen denken, bei denen Designs auf
Verhältnissen und Proportionen basieren?..
74. Mobile Web ist (viel) anders
• Mobile Nutzung ist (oft) schwierig
- Begrenzte Aufmerksamkeit
- Eingabe schwierig
- Schlechte Verbindung
- Beschränkte Bandbreite
- Kein Stromanschluss
- Physischer Kontext
• Aktive Nutzung in der “Zwischenzeit”
Zuhause (84%), Warteschlangen (80%), Unterwegs
90. “
Most websites, especially informa-
tional ones, focus more on what they
want to show rather than what the
user wants to see when they get there.
— Chris Coyier
93. Design for Mobile in Praxis
• Der Weg sollte einfach sein:
Desktop version + Media Queries = Mobile version
• Aber viele Geräte unterstützen Queries nicht...
Desktop version = Mobile version (Ouch!)
• ...Aber ist es überhaupt der richtige Ansatz?
94. Wie wäre es, wenn wir immer mit einer
mobilen Version anfangen?..
95. Mobile First
• Allgemeine Konzeption der Website
1. Mobile-first layout und IA
2. Grundlegendes CSS Gerüst
3. Enhanced CSS mit JavaScript back-up
4. Baue die Desktop-Version auf (ggf. neue Features)
5. Responsive Content (Bilder, Tabellen, Werbung)
6. Performance Optimierung (display: none ist böse)
7. Testing ist müüüüüüühsam
• Neuer Content wird erst in Mobile eingefügt
96. Und es gibt genug Tools, mit denen man
dies leicht bewerkstelligen kann.
106. Mobile First: Nützliche Tools
• Prioritized Features List
Weise Features Priorität zu, ohne Layout zu betrachten
• Mobile UI Design Patterns
Mobile-Patterns.com, Pttrns.com, Androidpatterns.com
107.
108. “
Losing 80% of your screen space forces
you to focus. You need to make sure
that what stays on the screen is the
most important set of features. There
simply isn’t room for content of
questionable value. You need to know
what matters most.
— Mike Rundle
109. Mobile Web ist innovativ
• Neue Gesichtspunkte
- Bildschirmauflösung und Pixeldichte
- Touch targets and sizes
- Push: Real-time notifications
- Gesten, Biometrik, Haptik
- Application Cache und Local Storage
- Geolocation, Gyroscope, Accelerometer
Bald mit HTML5 Device APIs möglich!
118. Doch dafür müssen Inhalte auf ihren
Geräten vernünftig präsentiert werden.
119. “
2011 is the year of the reader. If so, we
can also expect an overdue backlash
against reader-hostile practices like
splitting content across multiple
pages and intrusive advertising.
— Cennydd Bowles
120. Was ist Online Content?
Im Web, Content ist alles was Nutzern
sinnvolle Informationen bereitstellt.
142. Content Transformation im Web
• Leser entfesseln Content auf eigene Faust
Instapaper, Readability, Flipboard
• In Social Media kursieren oft m.-Links
Desktop-Traffic sinkt
• Online Branding transformiert sich
“Go where the users go”
143.
144. “
The existence of these new reader-
empowering tools should be taken as
a warning …and a challenge—how
can we design for our content in such
a way that the reader won’t need or
want to reach for Readability or
Instapaper?
— Jeremy Keith
145. Wie können wir Content verbessern?
Adaptive UX (“Content ist eine App”)
Baseline erstellen + Kontextauswahl bereitstellen:
• Low Bandwidth Mode
• Stress Mode (Zeitdruck, Akku fast leer)
• Thumb Mode
• Distraction Mode
• Privacy Mode
• Verschiedene Lesepräferenzen
• ePUB, Mobipocket-Versionen
146.
147.
148. Wie können wir Content verbessern?
Content First
Maximum Content, Minimum Everything Else
• Nützliche und attraktive Inhalte
für die Zielgruppe produzieren
• Sorgfältige Aufbereitung und Produktion
• Weniger Marketing, mehr Klartext
• Publishing Policy erarbeiten
• Editorial Work, Guidelines and Styleguides
149. Wie können wir Content verbessern?
Content Manager einstellen (!)
150. Prinzipien des guten Content
Designs
Guter Content ist passend.
gepflegt.
nützlich.
deutlich.
skalierbar.
konsistent.
benutzerfreundlich.
• Bücher
Erin Kissane, “The Elements of Content Strategy”
Kristina Halvorson, “Content Strategy for the Web”
171. Sichtbares Design
• Visuelle Kommunikation
Ziel: Inhalte durch emotionale Reize unterstützen
• ...oft auf Kosten der Angemessenheit.
“Trends Trap”, “Design for Design”
• Wirkt sehr dominant und einprägend
...und kann deshalb sein Ziel leicht verfehlen.
172. “
The unhealthy preoccupation with
contests and awards is a common
mistake that leads designers into
unprofessional practices and distorts
functional ideals. [...] Most of this
activity hovers around decoration
and daring.
— Andy Rutledge
173. Unsichtbares Design
• Fokus auf Lösung von Problemen
Trends werden gezielt ignoriert, Usability first
• “Design the experience, visual is an afterthought”
Strikte Trennung von Funktion und Darstellung
• Redesign nur wenn absolut notwendig
Erzwinge, dass das Design unsichtbar wird
183. “
Good designers can see both the forest
and the trees, the visible and invisible
halves of design.
— Francisco Inchauste
184.
185. Zusammenfassung
• Responsive Web Design
• Media Queries (client-side, server-side)
• Goldlöckchen und die drei Bären
• Design von adaptiven Systemen
• Mobile First
• Maximum Content, Minimum Navigation
• Storytelling
• Unsichtbares Design