SlideShare a Scribd company logo
1 of 68
Download to read offline
jQuery Conference 2015 in Berlin
Accessibility, 

Mobile 

and Responsive
@webinterface
jQuery
Image from: http://www.kinderfilmwelt.de
Peter Rozek
Work at ecx.io (Digital Agency)
Skills:
UX
Usability
Accessibility
Frontend
@webinterface
@webinterface
Accessibility = 

Dark Side
@webinterface
Mobile First
Responsive
@webinterface
Where are the Elements of Surprise
between
Accessibility

Mobile First

Responsive Design
@webinterface
Designing for Responsiveness,
Mobile First and for Accessibility
are not the same thing.
A responsive site is designed and coded to
respond to devices with different screen sizes. Is
not automatically accessible.
@webinterface
Responsive design is an additional
way that you can apply to solving
accessibility issues.
@webinterface
Responsive Web design, mobile
first and accessibility are ways of
making a site flexible.
@webinterface
Myth:

Accessibility = less
and

Technological Restrictions
@webinterface
Designing with

progressive enhancement
@webinterface Source: http://www.amazon.de/
@webinterface
User
Experience
Browser Capabilitis
Basic Advanced
@webinterface
Think and Design about
Device Agnostic
Think about
Interactivity
@webinterface
Content is design for
Readability
Think about Design
(Color, Contrast)
Semantics
@webinterface
Design is like Water
@webinterface
Interactivity is like Water
@webinterface
@webinterface
A device-agnostic approach also
takes into account infinite
combinations of screen resolution,
input method, browser capability
and more…
@webinterface
Learn from people
about their needs and
preferences.
@webinterface
Accessibility is often as part of person`s need.
Mobile First is opportunity, focus and innovation.
Responsive Design is clear goals, frequent
communication, and solid collaboration.
User Experience build personas of what users
are like and what they want and need.
@webinterface
A simple example about the
combinations of Responsiveness,
Mobile First and Accessibility.
@webinterface
type=“email“ type=“url“
Source: http://diveintohtml5.it/forms.html
@webinterface
type=“email“
type=“url“
Accessible

Experience
Semantically
Mobile First
Responsive First
@webinterface Source: http://www.smashingmagazine.com/2014/05/....
In <form> Not in <form>
Semantically
Mobile First
Responsive First
@webinterface
In <form>
Accessible

Experience
@webinterface
Perceivable
Robust
Operable
Understandable
Source: http://www.w3.org/TR/WCAG20/
@webinterface
Inclusion
Soziologie:
Diversity as normality
Web:
Diversity of the Devices is
normality
Accessibility:
Flexibility and universal 

UI-design
@webinterface
Benefits of Inclusion
@webinterface
Automatically adjust to user’s device
Designing first for mobile focuses on key features and accessibility
Capabilities
Progressive enhancement
Inherent inclination to follow web standards
Scalable and operable
@webinterface
Device
Agnostic
Technical 

Solution
Inclusion
Strategy
Progressive
enhancement
@webinterface
In the context 

of the Accessibility 

is not new.
@webinterface
What is Accessibility?
@webinterface
Essential things about
the documentation.
WCAG (Web Content Accessibility Guidelines)
WAI-ARIA (Accessible Rich Internet Applications)
Image from: http://www.ew.com/@webinterface
Robust Operable
Perceivable Understandable
WCAG 2.0 and the 4 Principles
@webinterface
What is Accessible
JavaScript?
@webinterface
Without semantically
and accessible markup
there is no accessible
Javascript!
Source: http://www.w3.org/TR/wai-aria/
@webinterface
What is Accessible JavaScript?
You use it fully with keyboard
You use it with user defined colours
You use it with Screenreader
@webinterface
Accessible JavaScript
for a Screenreader with
WAI-ARIA
Source: http://www.w3.org/TR/wai-aria/
@webinterface
Using WAI-ARIA to be optimized
for a Screenreader.
You can use it the same way as without a
Screenreader.
A Screenreader gets additional information about
actual state and how it works.
Source: http://www.w3.org/WAI/intro/aria
@webinterface Source: http://www.webpagetest.org/
@webinterface
Accordion header:
role=tab
aria-selected (is header selected or not)
aria-expanded (is selected header open or not)
optional: aria-controls
Accordion content:
role=tabpanel
aria-labelledby (with header)
aria-hidden (is content visible open or not) 
@webinterface
Enhancing Forms
@webinterface
<label for=“lastName“> Last Name * </label>
<input id=“lastName“ type=“text“ aria-required=“true“>
Required Fields
aria-required
@webinterface
<label for=“emailAddress“> E-Mail Address * </label>
<input id=“emailAddress“ type=“email“ aria-describedby=“emailFormat“ aria-
required=“true“>
Input-level Instructions and Expected Data
Format
<div class=“instruction“ id=“emailFormat“>
Example: name@domain.de
</div>
aria-describedby
@webinterface
<label for=“emailAddress“> E-Mail Address * </label>
<input id=“emailAddress“ type=“email“ aria-describedby=“emailFormat“ aria-
required=“true“ aria-invalid=“true“>
Validation and Error Messaging
<div class=“instruction“ id=“emailFormat“>
Example: name@domain.de
</div>
<div role=“alert“>
<label for=“emailAddress“ class=“error“>
Please enter a valid email address.
</label>
</div>
aria-invalid and role=“alert“
@webinterface
Button controlled input with live feedback
aria-live="assertive" and aria-controls
<label for="number">Current value</label>
<input id="number"
type="text"
role="alert"
aria-live="assertive"
readonly
value=„0">
<button type=„button" title="add 10" aria-controls=„number“>
Add
</button>
<button type=„button" title="subtract 10" aria-controls=„number">
Subtract
</button>
@webinterface
Button controlled input with live feedback
$('[aria-controls="number"]').on('click', function() {
var button = $(this);
$('#number').val(function(i, oldval) {
return button.is('[title*="add"]') ?
parseInt(oldval, 10) + 10 :
parseInt(oldval, 10) - 10;
});
});
JavaScript
@webinterface
Think about interaction
@webinterface Source: http://hanshillen.github.io/jqtest/#goto_dialog
Fully accessible with keyboard:
@webinterface
<div role=„alertdialog“
aria-labelledby="dialogTitle“
aria-describedby=„dialogDesc“>
<h2 id=„dialogTitle">
Your personal details were successfully updated
</h2>
<p id=„dialogDesc">
You can change your details at anytime in the user account section.
</p>
<button>Close</button>
</div>
Design patterns alertdialog
<div role="dialog" aria-label="Password Confirmation“ aria-
describedby="dialogDesc">
Source: http://www.w3.org/TR/wai-aria-practices/#dialog_modal
@webinterface
Dialog role is used when the user is expected to
provide data.
Alertdialog role is used to announce the
contents of a dialog to the user.
@webinterface
User should either explicitly dismiss the dialog
(for example, selecting "Cancel" or pressing ESC)
or close it by taking a positive action, such as
selecting "OK" or "Submit".
When the dialog is displayed, focus should be
placed on an active element within the dialog.
Modals Focus Management
Source: http://juicystudio.com/article/custom-built_dialogs.php
@webinterface
The viewport must
permit zooming
@webinterface
Do not add parameters like:
“maximum-scale=1.0” 

or 

“user-scalable=no”
@webinterface
Optimal code looks like this:
<meta 

name="viewport"
content="width=device-width, 

initial-scale=1.0" />
@webinterface
Fluid Layout
@webinterface
Browser zoom and fluid
experience with Flexbox
flex-wrap: wrap;
@webinterface
Use em, viewport units or % for
layout, not pixels.
width: 60em;
width: 60vw;
width: 60%;
@webinterface
Last Words
@webinterface
„You are not your user.
Watch people interact
with your site“
Peep Laja, @conversionxl
@webinterface
Not building for browsers
Not building for devices
Building for users
@webinterface
Focus accessibility,
responsiveness and mobile first
efforts on delivering quality user
experiences.
@webinterface
Designing for accessibility, 

is not about disability, 

is not about restrictions, 

is create a pleasurable digital
experiences.
@webinterface
„Design the Priority 

not the Layout!“
Ethan Marcotte
Image from: http://www.space538.org/events/ethan-marcotte
„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
Image from: https://responsivedesign.is
@webinterface
Making Flexibility 

Your Goal.
Thanks
@webinterface
…dear Ellen
@webinterface
peter.rozek@ecx.io

More Related Content

Viewers also liked

Paul wu zbrush_workshop_cht
Paul wu zbrush_workshop_chtPaul wu zbrush_workshop_cht
Paul wu zbrush_workshop_chtChris Chen
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlagePeter Rozek
 
Ani chat 02_louis_visualcreation
Ani chat 02_louis_visualcreationAni chat 02_louis_visualcreation
Ani chat 02_louis_visualcreationChris Chen
 
Animation in UI UX
Animation in UI UXAnimation in UI UX
Animation in UI UXChris Chen
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content ExperiencePeter Rozek
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensPeter Rozek
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenPeter Rozek
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-AnimationsPeter Rozek
 
Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)Val Head
 
Performance and UX
Performance and UXPerformance and UX
Performance and UXPeter Rozek
 
[UX Series] 6 - Animation principles
[UX Series] 6 - Animation principles[UX Series] 6 - Animation principles
[UX Series] 6 - Animation principlesPhuong Hoang Vu
 
Animating the UI - Angie Terrell
Animating the UI - Angie TerrellAnimating the UI - Angie Terrell
Animating the UI - Angie TerrellAngie Terrell
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingPeter Rozek
 
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]Kate Rutter
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXPeter Rozek
 

Viewers also liked (18)

Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Paul wu zbrush_workshop_cht
Paul wu zbrush_workshop_chtPaul wu zbrush_workshop_cht
Paul wu zbrush_workshop_cht
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
Ani chat 02_louis_visualcreation
Ani chat 02_louis_visualcreationAni chat 02_louis_visualcreation
Ani chat 02_louis_visualcreation
 
Content Amid Chaos
Content Amid ChaosContent Amid Chaos
Content Amid Chaos
 
Animation in UI UX
Animation in UI UXAnimation in UI UX
Animation in UI UX
 
Animation in UX
Animation in UXAnimation in UX
Animation in UX
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
[UX Series] 6 - Animation principles
[UX Series] 6 - Animation principles[UX Series] 6 - Animation principles
[UX Series] 6 - Animation principles
 
Animating the UI - Angie Terrell
Animating the UI - Angie TerrellAnimating the UI - Angie Terrell
Animating the UI - Angie Terrell
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
 
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 

Similar to jQuery: Accessibility, Mobile und Responsive

Making Learning Products Accessible
Making Learning Products AccessibleMaking Learning Products Accessible
Making Learning Products AccessibleMagic Software
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Emagination ®
 
Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1Srinivasu Chakravarthula
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
 
Show & tell - A more accessible accordion
Show & tell - A more accessible accordionShow & tell - A more accessible accordion
Show & tell - A more accessible accordionDan Dineen
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesPeter Rozek
 
Full-Stack-Web-Development.pptx
Full-Stack-Web-Development.pptxFull-Stack-Web-Development.pptx
Full-Stack-Web-Development.pptxRonakBothra8
 
Accessible & Usable Web Forms. Your How To Guide!
Accessible & Usable Web Forms. Your How To Guide!Accessible & Usable Web Forms. Your How To Guide!
Accessible & Usable Web Forms. Your How To Guide!Rabab Gomaa
 
Website Accessibility: The Internet is for Everyone
Website Accessibility: The Internet is for EveryoneWebsite Accessibility: The Internet is for Everyone
Website Accessibility: The Internet is for EveryoneCarie Fisher, MS, CPWA
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkRachel Cherry
 
A Complete Guide To Progressive Web App.pdf
A Complete Guide To Progressive Web App.pdfA Complete Guide To Progressive Web App.pdf
A Complete Guide To Progressive Web App.pdfCerebrum Infotech
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web appsAlexandre Marreiros
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Peak Usability
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalothegeniusca
 

Similar to jQuery: Accessibility, Mobile und Responsive (20)

Making Learning Products Accessible
Making Learning Products AccessibleMaking Learning Products Accessible
Making Learning Products Accessible
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Accessibility part 2
Accessibility part 2Accessibility part 2
Accessibility part 2
 
Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
Show & tell - A more accessible accordion
Show & tell - A more accessible accordionShow & tell - A more accessible accordion
Show & tell - A more accessible accordion
 
WTF R PWAs?
WTF R PWAs?WTF R PWAs?
WTF R PWAs?
 
Always on! ... or not?
Always on! ... or not?Always on! ... or not?
Always on! ... or not?
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
 
Full-Stack-Web-Development.pptx
Full-Stack-Web-Development.pptxFull-Stack-Web-Development.pptx
Full-Stack-Web-Development.pptx
 
Accessible & Usable Web Forms. Your How To Guide!
Accessible & Usable Web Forms. Your How To Guide!Accessible & Usable Web Forms. Your How To Guide!
Accessible & Usable Web Forms. Your How To Guide!
 
Website Accessibility: The Internet is for Everyone
Website Accessibility: The Internet is for EveryoneWebsite Accessibility: The Internet is for Everyone
Website Accessibility: The Internet is for Everyone
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
 
A Complete Guide To Progressive Web App.pdf
A Complete Guide To Progressive Web App.pdfA Complete Guide To Progressive Web App.pdf
A Complete Guide To Progressive Web App.pdf
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalo
 

More from Peter Rozek

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership Peter Rozek
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile developmentPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Peter Rozek
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Peter Rozek
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesPeter Rozek
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenPeter Rozek
 
Responsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesResponsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesPeter Rozek
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or diePeter Rozek
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Peter Rozek
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätPeter Rozek
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices Peter Rozek
 
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignHandliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignPeter Rozek
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend EntwicklerBarrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend EntwicklerPeter Rozek
 

More from Peter Rozek (17)

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile development
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 
Responsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesResponsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und Guidelines
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or die
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
 
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignHandliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile Webdesign
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend EntwicklerBarrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
 

Recently uploaded

Free scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirtsFree scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirtsrahman018755
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirtrahman018755
 
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfStatistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfOndejSur
 
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?Linksys Velop Login
 
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxProduction 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxChloeMeadows1
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsrahman018755
 
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's GuideBug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's GuideVarun Mithran
 
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkkaudience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkklolsDocherty
 
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.Tortogel
 
Development Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appsDevelopment Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appscristianmanaila2
 
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan
 
Reggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirtsrahman018755
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebJie Liau
 
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyDamar Juniarto
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfappinfoedgeca
 
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital PresenceCyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital PresencePC Doctors NET
 

Recently uploaded (17)

Free scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirtsFree scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirts
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirt
 
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfStatistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdf
 
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?
 
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxProduction 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptx
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's GuideBug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's Guide
 
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkkaudience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
 
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
 
Development Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appsDevelopment Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of apps
 
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdf
 
GOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdfGOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdf
 
Reggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirts
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
 
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
 
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital PresenceCyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
 

jQuery: Accessibility, Mobile und Responsive