Seit dem Artikel von Ethan Marcotte hat Responsive Webdesign richtig Fahrt aufgenommen. Responsive Webdesign ist ein zentrales Buzzword, wenn es um Webentwicklung, E-Commerce, UX, SEO und Marketing geht. Seit 2010 hat sich viel verändert. Browser und Techniken haben sich weiterentwickelt. Das Nutzerverhalten hat sich stark verändert, heute sind Nutzer immer und überall online. Aber was ist mit uns, wo bleiben unsere Innovationsstärke und der Mut für neues? Wir, die Websites verkaufen, konzipieren, designen und entwickeln. Entrepreneurship und Innovation erfordern Mut und einen Schritt weiterzugehen als alle anderen - where no man has gone before. Der Vortrag zeigt, dass jetzt der Zeitpunkt ist, innovative HTML- und CSS-Techniken einzusetzen. Der Vortrag richtet sich in erster Linie an Frontend Entwickler und User Experience Designer/Consultants die mehr als Grundkenntnisse in HTML, CSS und JavaScript mitbringen.
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
Seit dem Artikel von Ethan Marcotte hat Responsive Webdesign richtig Fahrt aufgenommen. Responsive Webdesign ist ein zentrales Buzzword, wenn es um Webentwicklung, E-Commerce, UX, SEO und Marketing geht. Seit 2010 hat sich viel verändert. Browser und Techniken haben sich weiterentwickelt. Das Nutzerverhalten hat sich stark verändert, heute sind Nutzer immer und überall online. Aber was ist mit uns, wo bleiben unsere Innovationsstärke und der Mut für Neues? Wir, die Websites verkaufen, konzipieren, designen und entwickeln. Entrepreneurship und Innovation erfordern Mut und einen Schritt weiterzugehen als alle anderen - where no man has gone before. Der Vortrag zeigt, dass jetzt der Zeitpunkt ist, innovative HTML- und CSS-Techniken einzusetzen.
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
Professionelles Arbeiten bedeutet auch, effektiv zu arbeiten. Effektivität bedeutet für Webentwickler, nicht immer das Rad neu erfinden zu wollen oder müssen. Nicolai Schwarz und Dirk Jesse zeigen Best Practices, die bei der Entwicklung eigener Seiten helfen, schneller und besser mit der Aufgabe fertig zu werden.
Vortrag auf der WebTech 2009 in Karlsruhe
Responsive Navigation Patterns - UX und GuidelinesPeter Rozek
Navigation ist nicht mehr auf ein Content, Context oder Component bezogen.
Die Navigation ist eines der Kernelemente einer responsiven Website. Welches Navigationsprinzip ist für die Informationsarchitektur, Bedienbarkeit und User Experience am besten geeignet? Neben der Skalierbarkeit für unterschiedliche Bildschirmgrößen ist die größte Herausforderung, die Balance zwischen Vollständigkeit und Klarheit zu finden. Content First und Mobile First impliziert, die Navigation zu überdenken. User Research und authentische User Journeys liefern valide Entscheidungsgrundlagen für die Priorisierung des Navigationsmodells. Je nach Komplexität sind Navigation Patterns erprobte Modelle, die man einsetzen kann. Ob Off-Canvas, Slidedown oder Hamburger-Icon, welche Vor- und Nachteile diese haben, muss sorgfältig evaluiert werden. Der Vortrag geht diesen Fragen nach und formuliert Guidelines für die Praxis.
Flexbox is a smart new layout mode for CSS that solves many problems we've struggled with for years. It adds a degree of control we didn't have before. No longer will you need to struggle with floats and clearfixes to address page layout challenges they were never designed to handle.
But wait, I hear you say, a new layout mode? Surely the browser support is awful? It's actually quite good, and I will show you how to write future-proof code that will work flawlessly in browsers that support flexbox while providing a fallback to those that don't.
In this talk, I will introduce the flexbox layout module and explain what it's good for (and what's it's NOT good for). I'll give examples of usage, outline a strategy for browser support, and prepare you to use flexbox TODAY!
This is a beginner level talk. You do not need to know anything about flexbox, but a basic understanding of CSS layout will be helpful.
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
Seit dem Artikel von Ethan Marcotte hat Responsive Webdesign richtig Fahrt aufgenommen. Responsive Webdesign ist ein zentrales Buzzword, wenn es um Webentwicklung, E-Commerce, UX, SEO und Marketing geht. Seit 2010 hat sich viel verändert. Browser und Techniken haben sich weiterentwickelt. Das Nutzerverhalten hat sich stark verändert, heute sind Nutzer immer und überall online. Aber was ist mit uns, wo bleiben unsere Innovationsstärke und der Mut für Neues? Wir, die Websites verkaufen, konzipieren, designen und entwickeln. Entrepreneurship und Innovation erfordern Mut und einen Schritt weiterzugehen als alle anderen - where no man has gone before. Der Vortrag zeigt, dass jetzt der Zeitpunkt ist, innovative HTML- und CSS-Techniken einzusetzen.
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
Professionelles Arbeiten bedeutet auch, effektiv zu arbeiten. Effektivität bedeutet für Webentwickler, nicht immer das Rad neu erfinden zu wollen oder müssen. Nicolai Schwarz und Dirk Jesse zeigen Best Practices, die bei der Entwicklung eigener Seiten helfen, schneller und besser mit der Aufgabe fertig zu werden.
Vortrag auf der WebTech 2009 in Karlsruhe
Responsive Navigation Patterns - UX und GuidelinesPeter Rozek
Navigation ist nicht mehr auf ein Content, Context oder Component bezogen.
Die Navigation ist eines der Kernelemente einer responsiven Website. Welches Navigationsprinzip ist für die Informationsarchitektur, Bedienbarkeit und User Experience am besten geeignet? Neben der Skalierbarkeit für unterschiedliche Bildschirmgrößen ist die größte Herausforderung, die Balance zwischen Vollständigkeit und Klarheit zu finden. Content First und Mobile First impliziert, die Navigation zu überdenken. User Research und authentische User Journeys liefern valide Entscheidungsgrundlagen für die Priorisierung des Navigationsmodells. Je nach Komplexität sind Navigation Patterns erprobte Modelle, die man einsetzen kann. Ob Off-Canvas, Slidedown oder Hamburger-Icon, welche Vor- und Nachteile diese haben, muss sorgfältig evaluiert werden. Der Vortrag geht diesen Fragen nach und formuliert Guidelines für die Praxis.
Flexbox is a smart new layout mode for CSS that solves many problems we've struggled with for years. It adds a degree of control we didn't have before. No longer will you need to struggle with floats and clearfixes to address page layout challenges they were never designed to handle.
But wait, I hear you say, a new layout mode? Surely the browser support is awful? It's actually quite good, and I will show you how to write future-proof code that will work flawlessly in browsers that support flexbox while providing a fallback to those that don't.
In this talk, I will introduce the flexbox layout module and explain what it's good for (and what's it's NOT good for). I'll give examples of usage, outline a strategy for browser support, and prepare you to use flexbox TODAY!
This is a beginner level talk. You do not need to know anything about flexbox, but a basic understanding of CSS layout will be helpful.
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...Karionis
Auch wenn die Spezifikation von HTML5 noch nicht abgeschlossen ist, werden die Features dieses neuen Standards der Auszeichnungssprache HTML das Internet der unmittelbaren Zukunft bestimmen. Erfahren sie, wie nun semantisches HTML, Geolocation, Offline-Webanwendungen, Video- und Audio-Elemente, Drag and Drop und Vektorgrafiken in Webseiten integriert werden können.
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...Karionis
Auch wenn die Spezifikation von HTML5 noch nicht abgeschlossen ist, werden die Features dieses neuen Standards der Auszeichnungssprache HTML das Internet der unmittelbaren Zukunft bestimmen. Erfahren sie, wie nun semantisches HTML, Geolocation, Offline-Webanwendungen, Video- und Audio-Elemente, Drag and Drop und Vektorgrafiken in Webseiten integriert werden können.
In Teil 1 der Präsentation "Responsive Contao" stellen Peter Müller und Thomas Weitzel den Layout-Builder (mit Holy Grail) und die mobilen Seitenlayouts vor.
In Teil 2 folgt das Contao Responsive Grid. Im Workshop wurde Contao in der Version 3.0.6 verwendet.
Die Anforderungen für Websites sind heute oft widersprüchlich: verlangt ist ein zeitgemäßes Design und ansprechende Animationen, aber bitte mit offenen Webstandards, damit das ganze auch auf Smartphones und Tablets gut aussieht. Gleichzeitig ist auf Kundenseite aber ein Browser im Einsatz, der seit Jahren nicht mehr aktualisiert wurde. Jonathan Weiß stellt Lösungen vor, um diese Herausforderung zu stemmen und zeigt, welches kaum bekannte Potenzial im Legacy-Browser steckt.
What about Accessibility of Next Generation User Interfaces for People with D...Sven Jenzer
Wie geeignet sind Touch-Screen-Interfaces und andere sogenannte "Next-Generation-User-Interfaces" für Menschen mit Behinderung. Zwei blinde Accessibility-Spezialisten demonstrieren wie sie mit Nokia-Mobiles, GPS und iPhone im Alltag umgehen. Präsentation und Diskussion am Fachgruppentreffen der Software-Ergonomen, dem lokalen Chapter "Human Computer Interaction" der Schweizer Informatikgesellschaft an der ETH Zürich.
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
HTML5 ist langsam, oder? Nein, in der Tat zeigt sich die grundlegende Geschwindigkeit von Cross-Plattform-HTML5-Anwendungen heutzutage in einem sehr positiven Licht. Es gibt aber doch ein paar Fallstricke, in denen sich der Entwickler schnell verfängt, wenn er nicht auf ein paar Punkte achtet. Der Vortrag geht zuerst auf die Vorgehensweise der Performancemessung ein. Anschließend werden die Top Performance-Tipps gezeigt, um nochmal einen ordentlichen Schub an Power herausholen zu können. Lassen Sie uns Gas geben!
Device Agnostic: Geräteunabhängiges Design als UX GrundlagePeter Rozek
Brauchen wir noch starre Designs aus Photoshop für die Gestaltung von Websites? Ignorieren wie damit nicht seit langem die Flexibilität des Webs. Der eigentliche Grundgedanke des Webs ist Informationen unabhängig von Formfaktoren, Bandbreiten und Latenzen zugänglich zu machen. Das denken und designen in Silos von Mobile, Tablet und Desktop hat ausgedient. Content First, Breakpoints in Abhängigkeit einer fluiden Content Experience zu setzten, frühzeitiges Prototyping und schnelles iterieren sollten unser Vorgehen bestimmen. Für eine nachhaltige User Experience sind Coherence, Fluidity und Adaptability entscheidend geworden. Wie können wir Stakeholder davon überzeugen den klassischen visuellen Pfad zu verlassen? Der Vortag beleuchtet die Vorteile einer kontextsensitiven Experience auf und formuliert Empfehlungen für die Kommunikation mit den Stakeholdern.
The first step in every user centered design process is to build Personas as a base of every communication strategy to other team members and stakeholders. Build up a vision of the Product with personas, sketches and persona driven user stories. Optimizing the process of iteratively adapting at the big picture. Personas give the user a face and sketches of the context of use. A persona helps to empathize with the user, understand user behavior and deeper needs. The integration of personas with the individual user behavior makes the product bulletproof. In the beginning for each user centered agile development process three important elements have to be defined, the functions, the utilization context and the user behavior with the product. The talk demonstrate how necessary personas are for the user centered agile approach. Why personas are the foundation for each usability tests and explains step by step how they create a persona. Developers learn to get a better understanding for the user and their needs. Scrum describes how to organize an agile development process but neither exactly defines how to go on nor the needed tools to make the process user-centered.
Cross Device Experience with HTML PrototypingPeter Rozek
Users use different devices at different times of the day. Typical sequential screening activities are, for example, when the user starts on one device and continues his activity on another. The content takes a central position. A sustainable cross-device experience in the context of responsive web design addresses coherence, fluidity and adaptability. The content should adapt to the respective terminal and address the usage context. How can concept, design and development effectively test users' behavioral patterns and meet the device agnostic approach? The talk shows the benefits of HTML prototypes and how they can be effectively combined with other prototyping techniques.
UI animations are a hotspot for the design of interactive and modern web interfaces. For a positive user experience, context-based UI animations can offer real added value. This can concern individual elements or even entire applications. The talk answers which concept and design decisions are to be made for an interactive interface. How can simple and, above all, complex animations be implemented in the frontend? The process for designing a context-sensitive and interactive interface differs from conventional and classical workings. If you are designing complex animations, you go into the field of motion design. In addition to an inspiring UI animation journey, the process is displayed step by step.
Responsive Experience und das Continuum of ScreensPeter Rozek
Responsive Webdesign hat den Anspruch das komplette „Continuum of screens“ mit einer einzigen Plattform abzudecken. Für eine Cross-Device Experience sind die Ansprüche an das strategisch-konzeptionelle „What“ und dass visuelle „How“ sehr hoch. Das denken und designen in Silos von Mobile, Tablet und Desktop versperrt dabei den Blick auf das wesentliche, den Content. Bei der Konzeption steht der Content im Zentrum und welche Handlungsrelevanz hat der Inhalt für den Nutzer. Dabei sind auch die sequenziellen Verhaltensmuster der Nutzer im Umgang mit den Endgeräten zu berücksichtigen. Eine nachhaltige Multi-Device Experience adressiert Coherence, Fluidity und Adaptability. Der Talk gibt Einblicke welche Vorgehensweisen und Entscheidungen uns helfen Komplexität zu minimieren und dem Prinzip von Device Agnostic zu folgen. Um eine gute Website zu erstellen ist es nicht notwendig zu Wissen auf welchem Gerät die Seite angezeigt wird.
Die Grenzen zwischen mobiler und Desktopnutzung sind nicht mehr klar zu unterscheiden. Zentraler Ort der Interaktion ist das Web und nicht das Gerät. Menschen greifen über unterschiedliche Touchpoints auf Produkte und Dienstleistungen zu. Konsistenz und Klarheit unterstützen den Nutzer innerhalb eines Multiscreen-Experience-Umfelds. Das Denken und Designen in den Silos Mobile, Tablet und Desktop versperrt dabei den Blick auf das Wesentliche – auf eine nachhaltige User Experience, die Coherence, Fluidity und Adaptability adressiert. Content First, Breakpoints in Abhängigkeit einer fluiden Content Experience, frühzeitiges Prototyping und schnelles Iterieren führen zum Ziel. Klassische Designprozesse werden oder sind dagegen strategisch bedeutungslos. Der Vortag beleuchtet die Vorteile einer kontextsensitiven Experience und formuliert Empfehlungen für den Workflow und die Kommunikation mit den Stakeholdern.
Talk zur Webinale mit André Scharf und Peter Rozek.
Wenn uns Googles Updates und Algorithmusanpassungen in den letzten Jahres eines gelehrt haben, dann dass es für eine optimale Sichtbarkeit in den Suchergebnissen nicht mehr genügt, die Rankingfaktoren und Lücken der Suchmaschinen richtig auszunutzen. Vielmehr ist aus der Optimierung für Suchmaschinen eine Optimierung für den Nutzer geworden, um diesem die besten Ergebnisse für seine Suchanfrage zu liefern. Doch woher wissen wir, was Nutzer wirklich wollen, und wie schaffen wir es, dass sich die Nutzer auf unserer Website wohlfühlen? Diese Aufgabe erfordert mehr als technisches Verständnis, schließt Design-, Usability- und UX-Elemente ein und darf auch die Vermarktung nicht außer Acht lassen. Wie können wir also die gewohnten Silos durchbrechen, um Nutzer besser abzuholen und glücklich zu machen?
Hassliebe Onlineformulare, Enhance your Form for better UXPeter Rozek
Formulare und das Internet verbindet eine ewige Hassliebe. Zum einen sind sie notwendig und zum anderen scheitert die Conversion Rate nicht selten an einer schlechten Usability. Responsive Webdesign hat die Situation nicht einfacher gemacht. Verschiedene Formfaktoren und Interaktionsmechaniken sind zu berücksichtigen. Einzelne Formulare oder Formularstrecken müssen für den Nutzer verständlich bleiben und bei falschen Eingaben muss das System eine gewisse Fehlertoleranz erkenn und Kontextbezogene Hilfen anbieten. Zusätzlich gilt für unterschiedliche Touchpoints das Formulare scalable und usable sind. Der Vortrag zeigt mit welchen HTML5 und CSS3 Elementen Formulare technisch Robust werden und eine positive User Experience adressieren. Neben grundlegenden Usability Guidelines wird auch ein besonderes Augenmerk auf den Anwendungsfall gelegt. Zielgruppenorientierte Formulargestaltung braucht mehr als die Einbeziehung grundlegender Usability Richtlinien. Valide Use Cases auf Basis von Customer Journey Maps oder Touchpoint Matrix helfen den Fokus auf wesentliche Aspekte zu lenken.
DESIGN THE PRIORITY, PERFORMANCE AND UXPeter Rozek
Page speed is increasingly important for websites. Performance is User Experience and not only a Development Issue. Performance is a process and starts in conception and design.
Responsive Navigation Patterns, UX and GuidelinesPeter Rozek
User have a goal and are on a mission. Navigation is one of the core elements of a responsive website. Which navigation principle is the best for the information architecture, usability and user experience? In addition to the scalability for different screen sizes, it is the major challenge to find the balance between completeness and clarity. The presentation explores these questions and formulated guidelines.
Hightway to Hell - Responsive Webdesign TestenPeter Rozek
Unzählige Browser und Versionen, eine unübersehbare Anzahl an Bildschirmauflösungen und unterschiedliche Geräte machen die Entwicklung und das Testen von responsiven Webseiten nicht einfach. Wie kann man welche Browser verlässlich testen? Das sind Fragen, die sich jeder am Projekt Beteiligte stellen muss. Grundlagen und Strategien für das Testing kann man bereits in der Konzeptions- und Designphase legen. Frühe Tests können an HTML-Mockups oder Prototypen erfolgen. Der Vorteil liegt klar auf der Hand, Funktionen und Verhalten können in unterschiedlichen Browsern und Geräten getestet werden. HTML-Mockups und Prototypen können im Laufe der Entwicklung als Basis für die Finalisierung der Webseite dienen. Regelmäßige Testintervalle steigern die Qualität und helfen Designern, die Machbarkeit von Interaktionskonzepten in HTML und CSS besser zu verstehen.
75. @webinterface
Edge 39 44 8 30
Browsersupport Desktop
11 38 43 7.1 29
Can i use, Stand: 01.08.2015
Supported teilweise Supported nicht Supported
76. Supported teilweise Supported nicht Supported
@webinterface
8.4* 8 40 10 30 42 38 11
iOS Mini
Opera
Mobile
Chrome
Andriod
Firefox
Andriod
Browsersupport Mobile
8* 4.4.4 7 12.1 10
Can i use, Stand: 01.08.2015
91. @webinterface
Edge 39 44 8 30
Browsersupport Desktop
11 38 43 7.1 29
vmax wird nicht supported
Can i use, Stand: 01.08.2015
Supported teilweise Supported nicht Supported
92. @webinterface
8.4 8 40 10 30 42 39 11
iOS Mini
Opera
Mobile
Chrome
Andriod
Firefox
Andriod
Browsersupport Mobile
vmax wird nicht supported
8 4.4.4 7 12.1 10
Can i use, Stand: 01.08.2015
Supported teilweise Supported nicht Supported
99. Für jeden Breakpoint angepasste
und optimierte Bildgrößen.
@webinterface
Fluid Experience
100. <picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, medium@2x.jpg 2x">
<source srcset="small.jpg 1x, small@2x.jpg 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Das geht mit dem picture Element.
101. <picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, medium@2x.jpg 2x">
<source srcset="small.jpg 1x, small@2x.jpg 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Fallback
Für veraltete Browser oder wenn
das Picture Element noch nicht
Supportet wird.
113. @webinterface
… lesen Sie bei Marc Aurel nach.
Bei jedem einzelnen Ding die
Frage, was ist es in sich selbst?
http://images-cdn.moviepilot.com
114. „Responsive design
is not about mobile.
Its not about tablets.
Its not about desktops.
Its about The Web.“
@webinterface
Jeremy Keith
115. „It is the nature of the web to be flexible, and
it should be our role as designers and
developers to embrace this flexibility, and
produce pages which, by being flexible, are
accessible to all. The journey begins by letting
go of control, and becoming flexible.“
@webinterface
John Allsopp, A dao of webdesign
116. "The limits of my language are the
limits of my world."
Ludwig Wittgenstein
@webinterface