<html><head><meta http-equiv="Content-Type" content="text/html charset=iso-8859-1"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><br><div><div>On Jul 31, 2013, at 5:51 PM, Sebastien Blanc <<a href="mailto:scm.blanc@gmail.com">scm.blanc@gmail.com</a>> wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div dir="ltr"><br><div class="gmail_extra"><br><br><div class="gmail_quote">On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <span dir="ltr"><<a href="mailto:corinnekrych@gmail.com" target="_blank">corinnekrych@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word">Hello All,<div><br></div><div>We've been talking about redesigning our <a href="http://aerogear.org/" target="_blank">aerogear.org</a> web site. Hylke has done a great design job. Now, we 'just' want to make it responsive.</div>
</div></blockquote><div><br></div><div style="">Thx for tackling this "issue" </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word">
<div><br></div><div>Out of several proposals:</div><div>1. use bootstrap (current version of our site) and apply our custom design </div><div>2. use topcoat css and apply our custom design</div><div>3. use HTML5 boilerplate and apply our custom design and make it responsive</div>
<div><br></div><div>I initially started with option 1, which might be overkill for a static site. </div><div>Tried option 2, but here too, it seems overkill so ended with option 3.</div><div><br></div><div>Using a blank page, I worked on Home page reapplying Hylke css but:</div>
<div>- removing maximun-scale=1.0 because we want to let people zoom if they wish, </div><div>- replacing 'px' unit to use 'em', </div><div>- centred logo images,</div><div>- making sure width is right otherwise you get screw up with iPhone rotate</div>
<div>- adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks)</div><div><br></div><div>The main points to sort out for UX design is the menu bar and the footer. </div>
<div>To me, footer is too huge, even on desktop, could we remove news? </div></div></blockquote><div style="">+1 the footer is to big , to much "dynamic info", for instance "news" should not be there, a footer is aminly to gather "static links"</div>
<div style=""> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word"><div>For the menu, it looks fine on tablets format but on phone, it's not really accessible. So I implemented topcoat swipe menu using CSS3 transform. Is it UX friendly? wdyt?</div>
<div><br></div></div></blockquote><div style="">Yeah, I tested your branch, the menu on phone still feels "strange". One step could be to have your "swipe" menu having a higher z-index than the rest , this way having your menu coming over the background. Still not sure about this big grey bar where there is only one button to trigger the menu, should be great to have Hylke feedback and proposals on that.</div>
<div style=""><br></div></div></div></div></blockquote><div><br></div><div><font color="#be38f3">+ 1 I'd like to have Hylke's feedback on that too!!</font></div><br><blockquote type="cite"><div dir="ltr"><div class="gmail_extra"><div class="gmail_quote"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word"><div></div><div>Feedback welcome,</div><div>Work in progress in <a href="https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285" target="_blank">https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285</a></div>
</div></blockquote><div><br></div><div style="">Again thx for taking care of this ! </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word">
<div><br></div><div>++</div><span class="HOEnZb"><font color="#888888">Corinne</font></span></div><br>_______________________________________________<br>
aerogear-dev mailing list<br>
<a href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a><br>
<a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a><br></blockquote></div><br></div></div>
_______________________________________________<br>aerogear-dev mailing list<br><a href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a><br>https://lists.jboss.org/mailman/listinfo/aerogear-dev</blockquote></div><br></body></html>