<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Hello All,<div><br></div><div>We've been talking about redesigning our <a href="http://aerogear.org">aerogear.org</a> web site. Hylke has done a great design job. Now, we 'just' want to make it responsive.</div><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>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>Feedback welcome,</div><div>Work in progress in <a href="https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285">https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285</a></div><div><br></div><div>++</div><div>Corinne</div></body></html>