Mit Spaß & Teamwork zur goldenen BIENE Von einem Stammtisch, der auszog eine BIENE zu gewinnen Eric Eggert und Sandra Kallmeyer outlinewebdesign.com Mittwoch, 1. Juni 2011
Slide 1
Slide 2
Was ist die BIENE? Barrierefreies Internet eröffnet neue Einsichten Mittwoch, 1. Juni 2011
Slide 3
Mittwoch, 1. Juni 2011
Slide 4
Mittwoch, 1. Juni 2011
Slide 5
Mittwoch, 1. Juni 2011
Slide 6
Was ist der BPSE? Best Practices Stammtisch Essen seit 2009 Mittwoch, 1. Juni 2011
Slide 7
Mittwoch, 1. Juni 2011
Slide 8
Mittwoch, 1. Juni 2011
Slide 9
Mittwoch, 1. Juni 2011
Slide 10
Mittwoch, 1. Juni 2011
Slide 11
Mittwoch, 1. Juni 2011
Slide 12
Mittwoch, 1. Juni 2011
Slide 13
Im Unperfekthaus Mittwoch, 1. Juni 2011
Slide 14
Mittwoch, 1. Juni 2011
Slide 15
Mittwoch, 1. Juni 2011
Slide 16
Mittwoch, 1. Juni 2011
Slide 17
Mittwoch, 1. Juni 2011
Slide 18
Mittwoch, 1. Juni 2011
Slide 19
Mittwoch, 1. Juni 2011
Slide 20
Best Practices? • Workflow & Projektmanagement • Kommunikation (mit Kollegen und Kunden) • Aktuelle Webtechniken • UX & UI • Barrierefreiheit Mittwoch, 1. Juni 2011
Slide 21
BIENE 2009 • Interesse: Wie läuft so eine Preisverleihung ab? • Diskussion: Wie kommen die Preisträger zustande? Für uns waren die Entscheidungen teilweise schwer nachvollziehbar. Mittwoch, 1. Juni 2011
Slide 22
„Reicht doch selber mal was ein!“ — Tomas Caspers Mittwoch, 1. Juni 2011
Slide 23
Mittwoch, 1. Juni 2011
Slide 24
Mittwoch, 1. Juni 2011
Slide 25
Warum die Stiftung? • Bereits Kunde von Klaudia & Oliver • Barrierefreie Basis von Sandra • Kunde lässt uns freie Hand Klaudia • Non-Profit Mittwoch, 1. Juni 2011 Oliver
Slide 26
Klaudia & Oliver • Bereits Kunde von Klaudia & Oliver • Barrierefreie Basis • Kunde lässt uns freie Hand • Non-Profit Klaudia Mittwoch, 1. Juni 2011 Oliver
Slide 27
Warum so ein Projekt? • Aufgabe für den Stammtisch • Spezialgebiete • Gegenseitiges Lernen und Verstehen • Externe Beurteilung der eigenen Leistung Mittwoch, 1. Juni 2011
Slide 28
http://www.flickr.com/photos/5mal5/393077325/ Mut Mittwoch, 1. Juni 2011
Slide 29
„Grundlage […] sind u.a. die BITV sowie weitere international anerkannte Richtlinien wie z.B. die WCAG2. Preiswürdig […] sind Angebote, die die Wettbewerbskriterien erfüllen und darüber hinaus innovative und kreative Lösungen bieten.“ BIENE, biene-wettbewerb.de Mittwoch, 1. Juni 2011
Slide 30
Mut… • sich dem Wettbewerb zu stellen • scheitern zu können • Verantwortung abzugeben • Vertrauen zu haben • Kompetenzen anzuerkennen Mittwoch, 1. Juni 2011
Slide 31
Herausforderung BIENE • Das Team muss das Ziel Barrierefreiheit ständig vor Augen haben • Prüfkriterien gehen über WCAG2 hinaus • Vorauswahl und Feintests durch behinderte Nutzer • Jury ohne Vorkenntnisse zum Thema Barrierefreiheit vergibt letztendlich Preise Mittwoch, 1. Juni 2011
Slide 32
http://www.flickr.com/photos/botheredbybees/245215850 Fleiß Mittwoch, 1. Juni 2011
Slide 33
Team-Organisation • Arbeitsteilung • Alle 2 Wochen: Treffen des BPSE • Dazwischen:
- = Webstandards-Magazin 06/2010 Mittwoch, 1. Juni 2011 (%XVLQHVV7UHQ GV =XVDPPHQDUEHLWLP :HE ,Q7HDP]RQHQ +HHJHUULQIRU PLHUWHXQVZDV PLWVHLQHP &06 2Q3DJHD OOHVPÆJOLFKVHL’ HVLJQHULQ ‘RURWKHD/LQGH QIVFKDXWHVLFK DXhHUGHP GLHYHUVFKLHGHQH Q3ULQWPDWHULDOLHQ GHU6WLI WXQJ DQ XP GDV YLVXHOOH (UVFKHLQXQ JVELOG GHU:HEVLWHHLQ] XRUGQHQ .ODXG LD3LUFO ZDUIËUGHQ.RQ WDNW]XP.XQGH QXQG]X VDPPHQPLW0D [[+LOEHUHUP IËUGLH$E VWLPPXQJGHU,QK DOWHYHUDQWZRUWO LFK :LU WUHIIHQ XQV LP 8QSHUIHNW KDXV q LQ (VVHQ HLQHP JDQ] EHVRQGHU HQ .XO WXU]HQWUXP+LH UNDQQVLFKMHGH UPLWVHL QHP NUHDWLYHQ 3URMHNWJOHLFKZ HOFKHU$UW YHUZLUNOLFKHQ: LUKDEHQKLHUGLH 0ÆJOLFK NHLW HLQHQ NRVWH QORVHQ 5DXP ]X QXW]HQ 8QVHUH 7ËU LVW GDEHL IËU MHGHQ RIIHQ GHU VLFK IËU XQVHUH 1DFKGHPHLQLJH YRQXQVLP’H]H $UEHLW LQWHUHVVLH PEHU UW :LU NÆQQHQ /LQX[3&V ]X*DVWEHLGHU %,(1(3UHLVYHUOHL *URhELOGVFKLUPH KXQJ QLQ XQG %HDPHU EHQXW]HQ 9LHOHVEHVSUDFKH %HUOLQZDUHQXQG QZLUEHLXQVHUH GDYRQEHLP%H KDEHQ ËEHUDOO VW3UDFWLFHV Q7UHIIHQ RIIHQHV NRVWHQORVHV :/$ GLH]ZHLPDOPR 6WDPPWLVFK (VVHQ QDWOLFK{VWDWW 1 XQG QDWËUOLFK W EHULFKWHWH ILQGHQ=X Q GLVNX 6WURP ‘D]XJLEW HVSU V¶W]OLFKH7HUPLQ WLHUWHQ ZLU ËEHU HLVZHUWH)ODWUDWH HVWLPPHQZLUQ GLH YHUVFKLHGH VIËU 6SHL DFK%HGDUI QHQ $QIRU VHQ XQG HWU¶ ËEHU GHQ’LHQVW GHUXQJHQIËUEDUU QNH .DEHOVDODW ‘RRGOH}DE’ LHUHIUHLH6HLWHQV H LQNOXVLYH RUWNÆQ RZRKOLP ‘LHEHVWHQ9RUD QHQZLUXQVHUH )URQWHQGDOVDXF XVVHW]XQJHQIËU KDXI6HUYHUVHLWH /LHEOLQJVWHUPLQHD JHPHLQVD 6FKQHOOZDU QJHEHQ PHV$UEHLWHQD XQG GDGXUFK NODU (LQSUDNWLVFKHV OVR KHUDXVILQGHQ %HLVSLHOPXVVWHK DQ ZHOFKHP HU 7DJGLHPHLVWHQ YRQXQV=HLWKDE HQ $OOHDXIHLQHU 1DFKHLQLJHP6 :HOOH XFKHQILHOGLH( QWVFKHLGXQJ 8P DEHU DXFK DXI GLH 6WLIWX ]ZLVFKHQ GHQ QJ /HEHQVKLOIH 7HUPLQHQ ‘XLVEXUJ HQJHQ.RQWDNW EHLQHP.XQG ]XKDOWHQHQWV HQ]ZHLHU6WDPP FKLHGHQZLU WLVFKPLW XQVDXIRRJOH: JOLHGHU GHUHQ DYHw]XVHW]HQ :HEVHLWH YRQ XQV DQ GLH RRJOH :DYHLVWHLQH$ %,(1(.ULWHULHQ SSOLNDWLRQ]XU DQJHSDVVWXQG NROODERUDWL JOHLFK]HLWLJ YHQ %HDUEHLWXQ QRFKHLQZHQLJY J YRQ ‘RNXPHQW HUVFKÆQHUWZHUG HQ ‘LHVH HQVROOWH ‘RNXPHQWHNÆQ QHQDXVXQWHUVF KLHGOLFKHQ 0HGLHQEHVWHKH ,QGHUUXSSHK Q 7H[WH%LOGHU DEHQZLUGLHEH )OLFNU6HWV VWHKHQGHQ RRJOH0DSVXV 6HLWHQJUËQGOLFK ZXQGVLQGPLW JHSUËIW 6DQGUD DGJHWV| .DOOPH\HU HUZHLWHUEDU’DV RXQG(ULF(JJH %HVRQGHUHDQ: UWT JDEHQLKUHQ DYH -HGH 6HQI ]X %HDUEHLWXQJJHV +70/XQG&66G FKLHKWLQ(FKW]H D]X0DLN:DJQHU LW:LUNÆQ YUHJWH QHQ GHQ &XUVR GLH $QZHQGXQ U GHU DQGHUHQ J YRQ $5,$ DQ 7HLOQHKPHU XQG 2OLYHU VHKHQXQGVLHOLY 6FUHHQVKRWGHV3UR HEHLP7LSSHQEH MHNWHVZ¶KUHQGGHU REDFKWHQ (QWZLFNOXQJ =XGHPLVWGDV: LNL3ULQ]LSLQ.UD IWEHLGHP 0DOJDQ]XQNRP PHU]LHOOLP5DKP HQHLQHV :HEHQWZLFNOHU 6WDPPWLVFKHV VHW]W HLQ EXQWJHZËUIHOWH U+DXIHQHQJDJL HUWHU)UHH ODQFHU HLQ EDUUL HUHIUHLHV 3URMH NW PLWKLOIH GLYHUVHU&RZRU NLQJ7RROVXP .OLFNHQVWDWW7 LSSHQ PLWGHP/LQN&R GHXQWHU
Slide 34
Content • Inhalte waren vorhanden, mussten aber überarbeitet werden • Neu: „Kurz & gut“ • Leichte Sprache angestrebt • Auch hilfreich für flüchtiges Lesen Mittwoch, 1. Juni 2011
Slide 35
(Gute) Alternativ-Texte …das Stiefkind der Barrierefreiheit Max Mittwoch, 1. Juni 2011
Slide 36
Alternativ-Texte Maxx Mittwoch, 1. Juni 2011
Slide 37
„karger Spielplatz vor dem Umbau“ Mittwoch, 1. Juni 2011
Slide 38
„Beine eines hüpfenden Kindes, barfuß auf einem mit kleinen Bällen bedeckten Trampolin“ Mittwoch, 1. Juni 2011
Slide 39
Design & Layout • Gemeinsame Ideenfindung • Ausfeilen des bisherigen Layouts • Spendenbutton • Fluide Grids Sandra Mittwoch, 1. Juni 2011 Doro
Slide 40
Design & Layout • Gemeinsame Ideenfindung • Ausfeilen des bisherigen Layouts • Spendenbutton Sandra Mittwoch, 1. Juni 2011 Doro
Slide 41
Mittwoch, 1. Juni 2011
Slide 42
HTML • Neue HTML5-Elemente (article, section, nav, aside) • Microformats (hCard) • Versteckte Überschriften (Fallback für ARIA Landmark Roles) Sandra • Komplett verlinkte Teaser • Keyboard-Navigation Mittwoch, 1. Juni 2011 Eric
Slide 43
CSS • Hover/Focus • Selektoren • ::before und ::after • Rounded corners Mittwoch, 1. Juni 2011
Slide 44
Moderne Webtechniken: HTML • Neue HTML5-Elemente (article, section, nav, aside) • Microformats (hCard) • Zusätzlich versteckte Überschriften Sandra verlinkte Teaser • Komplett • Keyboard-Navigation Mittwoch, 1. Juni 2011 Eric
Slide 45
• Agentur • Spezialgebiet: Barrierefreiheit • Aktuelle Webtechniken • Kunden: Bildung und KMU Mittwoch, 1. Juni 2011
Slide 46
WAI-ARIA • Landmark roles (auf HTML5-Elementen) • Autocomplete-Suche • Spendenformular Mittwoch, 1. Juni 2011
Slide 47
WAI-ARIA • Landmark roles (auf HTML5-Elementen) • Autocomplete-Suche • Spendenformular Mittwoch, 1. Juni 2011
Slide 48
WAI-ARIA • Landmark roles (auf HTML5-Elementen) • Autocomplete-Suche • Spendenformular Maik Mittwoch, 1. Juni 2011 Marco
Slide 49
<header role=”banner”> <h1><a href=”//”>Stiftung Lebenshilfe Duisburg e.V.</a> <span>für Menschen mit<br />geistiger Behinderung</ span></h1> <form id=”suche” action=”//” method=”get” role=”search”> <div> <label for=”suchen”>Suche</label> <input name=”keywords” id=”suchen” class=”suggest” type=”text” value=”” /> <input type=”submit” value=”Suchen” /> </div> </form> </header> <div id=”wrapper”> <nav role=”navigation”> <h1 id=”navigation”>Navigation</h1> <ul> (…) </ul> </nav> <section id=”content” role=”main”> Mittwoch, 1. Juni 2011
Slide 50
JavaScript • JavaScript-Animationen mit jQuery • Autocomplete-Suche • Formular Mittwoch, 1. Juni 2011
Slide 51
Barrierefreiheit fängt im Backend an • CMS: on-page.de • Entwickelt von Oliver • Der HTML-Code muss wie angeliefert vom CMS generiert werden Mittwoch, 1. Juni 2011
Slide 52
Barrierefreiheit fängt im Backend an • CMS: on-page.de • Entwickelt von Oliver • Der generierte HTMLCode muss wie angeliefert vom CMS ausgegeben werden Mittwoch, 1. Juni 2011
Slide 53
Mittwoch, 1. Juni 2011
Slide 54
Kampfgeist Mittwoch, 1. Juni 2011
Slide 55
Kampfgeist? • Standpunkte diskutieren! Barrierefreiheit ist nicht immer eindeutig bestimmbar. • Durchhalten! Tagesgeschäft muss weiterlaufen. • Regeländerung! Nur noch interaktive Websites zugelassen. Mittwoch, 1. Juni 2011
Slide 56
„Die Seite ist nicht nur technisch hervorragend umgesetzt, sondern war auch eine der Lieblingsseiten der Jury. Schön, intuitiv bedienbar und bis in die Details liebevoll gestaltet. […] Für den gelungenen Webauftritt der Stiftung Lebenshilfe Duisburg nehmen die Stammtischler heute Abend eine BIENE in Gold mit nach Hause. Gut gemacht.“ Robert Stulle, edenspiekermann.de Mittwoch, 1. Juni 2011
Slide 57
Mittwoch, 1. Juni 2011
Slide 58
Mittwoch, 1. Juni 2011
Slide 59
Mittwoch, 1. Juni 2011
Slide 60
Mittwoch, 1. Juni 2011
Slide 61
Mittwoch, 1. Juni 2011
Slide 62
Mittwoch, 1. Juni 2011
Slide 63
Ende. @ScreenOrigami & @yatil Mittwoch, 1. Juni 2011
