<span style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">Hi everyone,</span><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">In our push to implement the updated UI Options design, Heidi and I have been doing <span class="il" style="background-color:rgb(255,255,204)">research</span> into <span class="il" style="background-color:rgb(255,255,204)">carousel</span> content sliders so it will match these wireframes: <a href="http://wiki.fluidproject.org/display/fluid/%28Floe%29+UI+Options+Design+High+Fidelity%2C+C.1" target="_blank" style="color:rgb(17,85,204)">http://wiki.fluidproject.org/display/fluid/%28Floe%29+UI+Options+Design+High+Fidelity%2C+C.1</a></div>
<div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
For the UI Options <span class="il" style="background-color:rgb(255,255,204)">carousel</span>, the following are requirements:</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<ul><li style="margin-left:15px">ability to specify a number of items to be displayed</li><li style="margin-left:15px">navigation of <span class="il" style="background-color:rgb(255,255,204)">carousel</span> using keyboard, gestures, and pointing</li>
<li style="margin-left:15px">show a fragment of the next or previous item if more content is outside the view of the <span class="il" style="background-color:rgb(255,255,204)">carousel</span></li></ul></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">In our <span class="il" style="background-color:rgb(255,255,204)">research</span>, we investigated the following jQuery plugins: <a href="http://kevinbatdorf.github.io/codaslider/" target="_blank" style="color:rgb(17,85,204)">Coda Slider</a> / <a href="http://liquidslider.kevinbatdorf.com/" target="_blank" style="color:rgb(17,85,204)">Liquid Slider</a>, <a href="http://gmarwaha.com/jquery/jcarousellite/" target="_blank" style="color:rgb(17,85,204)">jCarousel Lite</a>, and Hans Hillen's <a href="http://hanshillen.github.io/jqtest/#goto_carousel" target="_blank" style="color:rgb(17,85,204)">accessible jQuery UI<span class="il" style="background-color:rgb(255,255,204);color:rgb(34,34,34);background-repeat:initial initial">Carousel</span></a>.<br>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
Of these plugins, Hans Hillen's accessible jQuery UI <span class="il" style="background-color:rgb(255,255,204)">Carousel</span> looks the most promising because it has a natural keyboard interaction, and appropriate ARIA markup (tested this in Voice Over and NVDA).</div>
<div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
For gesture based navigation, we will need to investigate adding a component that supports this interaction (i.e. jQuery mobile swipe).</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">For displaying panel fragments of the next / previous item in the <span class="il" style="background-color:rgb(255,255,204)">carousel</span> view, we can use CSS styling on the left and right arrows to imitate these fragments. This will make implementation simpler and be visually similar to our wireframes. The disadvantage with this approach is that the fragment will not show any actual content of the next or previous panel, so clipping icons and text as seen in the wireframe will not be seen. We talked with Joanna Vass about this approach and she said it should be okay.</div>
<div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
We have begun testing jCarousel in an actual UI Options implementation to see how it performs. The ongoing work can be found in this branch:<br></div><div style="background-color:rgb(255,255,255)"><font color="#222222" face="arial, sans-serif"><span style="font-size:12.499999046325684px"><a href="https://github.com/jhung/infusion/commits/FLUID-4972">https://github.com/jhung/infusion/commits/FLUID-4972</a></span></font></div>
<div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
If you have feedback or suggestions, please let us know!</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><br></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
- Jon</div><div><br></div>-- <br><p style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><b style="font-size:12.499999046325684px"><span style="font-size:10pt;font-family:Tahoma,sans-serif">JONATHAN HUNG</span></b></p>
<div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<span style="font-size:10pt;font-family:Tahoma,sans-serif">INCLUSIVE DESIGNER, IDRC<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">T:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169776000" style="color:rgb(17,85,204)">416 977 6000 x3951</a><u></u><u></u></span></p>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<b><span style="font-size:10pt;font-family:Tahoma,sans-serif">F:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169779844" style="color:rgb(17,85,204)">416 977 9844</a><u></u><u></u></span></p>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<b><span style="font-size:10pt;font-family:Tahoma,sans-serif">E:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a href="mailto:jhung@ocadu.ca" style="color:blue" target="_blank">jhung@ocadu.ca</a><u></u><u></u></span></p>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<b><span style="font-size:10pt;font-family:Tahoma,sans-serif">OCAD UNIVERSITY</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">Inclusive Design Research Centre<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">205 Richmond Street W, Toronto, ON, M5V 1V3<u></u><u></u></span></p>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.ocadu.ca/" style="color:blue" target="_blank">www.ocadu.ca</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.idrc.ocad.ca/" style="color:blue" target="_blank">www.idrc.ocad.ca</a></span></p>
</div>