Hello All, We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive.

Out of several proposals: 1. use bootstrap (current version of our site) and apply our custom design 2. use topcoat css and apply our custom design 3. use HTML5 boilerplate and apply our custom design and make it responsive I initially started with option 1, which might be overkill for a static site. Tried option 2, but here too, it seems overkill so ended with option 3. Using a blank page, I worked on Home page reapplying Hylke css but: - removing maximun-scale=1.0 because we want to let people zoom if they wish, - replacing 'px' unit to use 'em', - centred logo images, - making sure width is right otherwise you get screw up with iPhone rotate - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) The main points to sort out for UX design is the menu bar and the footer. To me, footer is too huge, even on desktop, could we remove news?

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? Yeah, I tested your branch, the menu on phone still feels "strange". One

Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285

++ Corinne _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Hello All, We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive. Out of several proposals: 1. use bootstrap (current version of our site) and apply our custom design 2. use topcoat css and apply our custom design 3. use HTML5 boilerplate and apply our custom design and make it responsive I initially started with option 1, which might be overkill for a static site. Tried option 2, but here too, it seems overkill so ended with option 3. Using a blank page, I worked on Home page reapplying Hylke css but: - removing maximun-scale=1.0 because we want to let people zoom if they wish, - replacing 'px' unit to use 'em', - centred logo images, - making sure width is right otherwise you get screw up with iPhone rotate - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) The main points to sort out for UX design is the menu bar and the footer. To me, footer is too huge, even on desktop, could we remove news? 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? Feedback welcome, Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 ++ Corinne _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Thanks Corinne. Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. Looks really good, I also tested it with http://mattkersley.com/responsive/ I'll try later on Android, IPhone and IPad. Thanks for looking at this. On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt; wrote: pretty cool! Just tried your branch and it looks good on my iPhone 4s and on my Galaxy S II. -Matthias On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: Hello All, We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive. Out of several proposals: 1. use bootstrap (current version of our site) and apply our custom design 2. use topcoat css and apply our custom design 3. use HTML5 boilerplate and apply our custom design and make it responsive I initially started with option 1, which might be overkill for a static site. Tried option 2, but here too, it seems overkill so ended with option 3. Using a blank page, I worked on Home page reapplying Hylke css but: - removing maximun-scale=1.0 because we want to let people zoom if they wish, - replacing 'px' unit to use 'em', - centred logo images, - making sure width is right otherwise you get screw up with iPhone rotate - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) The main points to sort out for UX design is the menu bar and the footer. To me, footer is too huge, even on desktop, could we remove news? 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? Feedback welcome, Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 ++ Corinne _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev -- Matthias Wessendorf blog: http://matthiaswessendorf.wordpress.com/ sessions: http://www.slideshare.net/mwessendorf twitter: http://twitter.com/mwessendorf _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev -- -- "The measure of a man is what he does with power" - Plato - @abstractj - Volenti Nihil Difficile _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Thanks Corinne. Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. Looks really good, I also tested it with http://mattkersley.com/responsive/ I'll try later on Android, IPhone and IPad. Thanks for looking at this. On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt;wrote: > pretty cool! > > Just tried your branch and it looks good on my iPhone 4s and on my Galaxy > S II. > > > -Matthias > > > On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt;wrote: > >> Hello All, >> >> We've been talking about redesigning our aerogear.org web site. Hylke >> has done a great design job. Now, we 'just' want to make it responsive. >> >> Out of several proposals: >> 1. use bootstrap (current version of our site) and apply our custom >> design >> 2. use topcoat css and apply our custom design >> 3. use HTML5 boilerplate and apply our custom design and make it >> responsive >> >> I initially started with option 1, which might be overkill for a static >> site. >> Tried option 2, but here too, it seems overkill so ended with option 3. >> >> Using a blank page, I worked on Home page reapplying Hylke css but: >> - removing maximun-scale=1.0 because we want to let people zoom if they >> wish, >> - replacing 'px' unit to use 'em', >> - centred logo images, >> - making sure width is right otherwise you get screw up with iPhone >> rotate >> - adding media queries (only 2 breakpoints for now, but need to be >> adjusted with devices tests and your feedbacks) >> >> The main points to sort out for UX design is the menu bar and the >> footer. >> To me, footer is too huge, even on desktop, could we remove news? >> 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? >> >> Feedback welcome, >> Work in progress in >> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >> >> ++ >> Corinne >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> > > > > -- > Matthias Wessendorf > > blog: http://matthiaswessendorf.wordpress.com/ > sessions: http://www.slideshare.net/mwessendorf > twitter: http://twitter.com/mwessendorf > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev > -- -- "The measure of a man is what he does with power" - Plato - @abstractj - Volenti Nihil Difficile _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Thanks so much for looking into this Corrine! I just had a look at the OpenShift instance. It looks good to me responsiveness-wise. I like the menu behaviour. There are still some minor style issues. If you still have time to look into this that would be great, otherwise I can take a look at these be fore we launch the new style: - Logo is centred on the page, it looks more balanced having it stick to the left.

- The menu icon is a bit hard to see (I've attached a quick svg with a colour change, would be nice if we could use that and have it not change shape)

- The news headline ("AG 1.0 is out!") is sticking to the right of the page, it would be better if it kept to the right, but still in the middle of the page for large screen setups - The platform icons seem to shift a pixel when you hover them

- There's no page padding when scaling down, this makes the text paragraphs harder to read, because they touch the screen edge - Some padding/spacing issue all-round. This is probably because everything was rebased on Boilerplate.

I'll try to get a local instance running again and help out with these things.

Thanks! Hylke On 01/08/2013 06:40, Daniel Bevenius wrote: > Looks nice! > > > On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org&gt; wrote: > Thanks Corinne. > > Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. Looks really good, I also tested it with http://mattkersley.com/responsive/ > > I'll try later on Android, IPhone and IPad. > > Thanks for looking at this. > > > On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt; wrote: > pretty cool! > > Just tried your branch and it looks good on my iPhone 4s and on my Galaxy S II. > > > -Matthias > > > On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: > Hello All, > > We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive. > > Out of several proposals: > 1. use bootstrap (current version of our site) and apply our custom design > 2. use topcoat css and apply our custom design > 3. use HTML5 boilerplate and apply our custom design and make it responsive > > I initially started with option 1, which might be overkill for a static site. > Tried option 2, but here too, it seems overkill so ended with option 3. > > Using a blank page, I worked on Home page reapplying Hylke css but: > - removing maximun-scale=1.0 because we want to let people zoom if they wish, > - replacing 'px' unit to use 'em', > - centred logo images, > - making sure width is right otherwise you get screw up with iPhone rotate > - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) > > The main points to sort out for UX design is the menu bar and the footer. > To me, footer is too huge, even on desktop, could we remove news? > 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? > > Feedback welcome, > Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 > > ++ > Corinne > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev > > > > -- > Matthias Wessendorf > > blog: http://matthiaswessendorf.wordpress.com/ > sessions: http://www.slideshare.net/mwessendorf > twitter: http://twitter.com/mwessendorf > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev > > > > -- > > -- > "The measure of a man is what he does with power" - Plato > - > @abstractj > - > Volenti Nihil Difficile > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev > > > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev <menu-icon.svg>_______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Hello All @Hylke, I've integrated your comments: 1. logo is on left on desktop, centred on phone. I think this was a good comprise to make it look good on desktop and phone. 2. menu icon is fixed 3. page padding for paragraph added 4. I've downloaded the fonts locally and honestly it improved performance when browsing on devices I'd like you to revisit the footer icons I've added (doc/jira/email/github/irc). It would be nice if they can look like the twitter/facebook/google+ ones you initially created. wdyt? @all, ready for your review guys, PR sent. ++ Corinne On Aug 2, 2013, at 10:59 AM, Corinne Krych <corinnekrych(a)gmail.com <mailto:corinnekrych@gmail.com>> wrote: > Hi Hylke! > > I've answered your comets below. > > Taking the latest code in my branch: > https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 > > I've also proposed a solution to make the footer much smaller. I used > images. But, I like to have your designer view on that. > > By tonight i hope to have a general feeling for the all site. Stay tune. > > Thanks! > ++ > Corinne > > On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com > <mailto:hbons@redhat.com>> wrote: > >> Thanks so much for looking into this Corrine! >> >> I just had a look at the OpenShift instance. It looks good to me >> responsiveness-wise. I like the menu behaviour. >> >> There are still some minor style issues. If you still have time to >> look into this that would be great, >> otherwise I can take a look at these be fore we launch the new style: >> >> - Logo is centred on the page, it looks more balanced having it >> stick to the left. > > Funny, personally and specially on phone I found centred logo looks > more balance. i remember seeing Passos's comments on this. He > actually wanted it centred too. But I guess it's a mater of taste. I > can change. let's see others comments. > >> - The menu icon is a bit hard to see (I've attached a quick svg with >> a colour change, would be nice if we could use that and have it not >> change shape) > > I changed the icon with a unicode (triple bar) much easier to see. > Pushed all that to my branch. > >> - The news headline ("AG 1.0 is out!") is sticking to the right of >> the page, it would be better if it kept to the right, but still in >> the middle of the page for large screen setups >> - The platform icons seem to shift a pixel when you hover them > > nice catch will fix that. it gives a bad flickering effect indeed. > >> - There's no page padding when scaling down, this makes the text >> paragraphs harder to read, because they touch the screen edge >> - Some padding/spacing issue all-round. This is probably because >> everything was rebased on Boilerplate. > > I am actually working on all the other pages. my initial focus was > home page. > >> >> I'll try to get a local instance running again and help out with >> these things. > > + 10001 > Together we'll have much power, thanks! > >> >> Thanks! >> >> Hylke >> >> >> >> On 01/08/2013 06:40, Daniel Bevenius wrote: >>> Looks nice! >>> >>> >>> On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org >>> <mailto:bruno@abstractj.org>> wrote: >>> >>> Thanks Corinne. >>> >>> Just tried and deployed on OpenShift >>> http://site-abstractj.rhcloud.com/. Looks really good, I also >>> tested it with http://mattkersley.com/responsive/ >>> >>> I'll try later on Android, IPhone and IPad. >>> >>> Thanks for looking at this. >>> >>> >>> On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf >>> <matzew(a)apache.org <mailto:matzew@apache.org>> wrote: >>> >>> pretty cool! >>> >>> Just tried your branch and it looks good on my iPhone 4s >>> and on my Galaxy S II. >>> >>> >>> -Matthias >>> >>> >>> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych >>> <corinnekrych(a)gmail.com <mailto:corinnekrych@gmail.com>> wrote: >>> >>> Hello All, >>> >>> We've been talking about redesigning our aerogear.org >>> <http://aerogear.org/> web site. Hylke has done a >>> great design job. Now, we 'just' want to make it >>> responsive. >>> >>> Out of several proposals: >>> 1. use bootstrap (current version of our site) and >>> apply our custom design >>> 2. use topcoat css and apply our custom design >>> 3. use HTML5 boilerplate and apply our custom design >>> and make it responsive >>> >>> I initially started with option 1, which might be >>> overkill for a static site. >>> Tried option 2, but here too, it seems overkill so >>> ended with option 3. >>> >>> Using a blank page, I worked on Home page reapplying >>> Hylke css but: >>> - removing maximun-scale=1.0 because we want to let >>> people zoom if they wish, >>> - replacing 'px' unit to use 'em', >>> - centred logo images, >>> - making sure width is right otherwise you get screw up >>> with iPhone rotate >>> - adding media queries (only 2 breakpoints for now, but >>> need to be adjusted with devices tests and your feedbacks) >>> >>> The main points to sort out for UX design is the menu >>> bar and the footer. >>> To me, footer is too huge, even on desktop, could we >>> remove news? >>> 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? >>> >>> Feedback welcome, >>> Work in progress in >>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>> >>> ++ >>> Corinne >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org >>> <mailto:aerogear-dev@lists.jboss.org> >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >>> >>> >>> >>> -- >>> Matthias Wessendorf >>> >>> blog: http://matthiaswessendorf.wordpress.com/ >>> sessions: http://www.slideshare.net/mwessendorf >>> twitter: http://twitter.com/mwessendorf >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org >>> <mailto:aerogear-dev@lists.jboss.org> >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >>> >>> >>> >>> -- >>> >>> -- >>> "The measure of a man is what he does with power" - Plato >>> - >>> @abstractj >>> - >>> Volenti Nihil Difficile >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >>> >>> >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> <menu-icon.svg>_______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >> https://lists.jboss.org/mailman/listinfo/aerogear-dev > _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Hi All, #agreed on icons not being meaningful, we could do hyperlinks with text. But to keep footer small, let's not put to much information in the footer. Id you recall we had a huge footer. I'd go for a footer that looks like this one: http://wildfly.org/ wdyt? Corinne On Aug 5, 2013, at 1:53 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: > Great! > > We're nearly there now, I'll fix the remaining issues today. > > I the use of icons in the footer is problematic. Visitors don't necessarily know what these mean. > > For example, where would you go if you want to report an issue? Not everyone is familiar with Jira and its logo. (You could hover and get some kind of clue, but you can't do this on touch devices, and it would be annoying) > > So I think we should revert back to just using text links... The social networks can remain as icons. > > Thanks, > > Hylke > > > On 05/08/2013 10:14, Corinne Krych wrote: >> Hello All >> >> @Hylke, I've integrated your comments: >> >> 1. logo is on left on desktop, centred on phone. I think this was a good comprise to make it look good on desktop and phone. >> 2. menu icon is fixed >> 3. page padding for paragraph added >> 4. I've downloaded the fonts locally and honestly it improved performance when browsing on devices >> >> I'd like you to revisit the footer icons I've added (doc/jira/email/github/irc). It would be nice if they can look like the twitter/facebook/google+ ones you initially created. wdyt? >> >> @all, ready for your review guys, PR sent. >> >> ++ >> Corinne >> >> On Aug 2, 2013, at 10:59 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >> >>> Hi Hylke! >>> >>> I've answered your comets below. >>> >>> Taking the latest code in my branch: >>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>> >>> I've also proposed a solution to make the footer much smaller. I used images. But, I like to have your designer view on that. >>> >>> By tonight i hope to have a general feeling for the all site. Stay tune. >>> >>> Thanks! >>> ++ >>> Corinne >>> >>> On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>> >>>> Thanks so much for looking into this Corrine! >>>> >>>> I just had a look at the OpenShift instance. It looks good to me responsiveness-wise. I like the menu behaviour. >>>> >>>> There are still some minor style issues. If you still have time to look into this that would be great, >>>> otherwise I can take a look at these be fore we launch the new style: >>>> >>>> - Logo is centred on the page, it looks more balanced having it stick to the left. >>> >>> Funny, personally and specially on phone I found centred logo looks more balance. i remember seeing Passos's comments on this. He actually wanted it centred too. But I guess it's a mater of taste. I can change. let's see others comments. >>> >>>> - The menu icon is a bit hard to see (I've attached a quick svg with a colour change, would be nice if we could use that and have it not change shape) >>> >>> I changed the icon with a unicode (triple bar) much easier to see. Pushed all that to my branch. >>> >>>> - The news headline ("AG 1.0 is out!") is sticking to the right of the page, it would be better if it kept to the right, but still in the middle of the page for large screen setups >>>> - The platform icons seem to shift a pixel when you hover them >>> >>> nice catch will fix that. it gives a bad flickering effect indeed. >>> >>>> - There's no page padding when scaling down, this makes the text paragraphs harder to read, because they touch the screen edge >>>> - Some padding/spacing issue all-round. This is probably because everything was rebased on Boilerplate. >>> >>> I am actually working on all the other pages. my initial focus was home page. >>> >>>> >>>> I'll try to get a local instance running again and help out with these things. >>> >>> + 10001 >>> Together we'll have much power, thanks! >>> >>>> >>>> Thanks! >>>> >>>> Hylke >>>> >>>> >>>> >>>> On 01/08/2013 06:40, Daniel Bevenius wrote: >>>>> Looks nice! >>>>> >>>>> >>>>> On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org&gt; wrote: >>>>>> Thanks Corinne. >>>>>> >>>>>> Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. Looks really good, I also tested it with http://mattkersley.com/responsive/ >>>>>> >>>>>> I'll try later on Android, IPhone and IPad. >>>>>> >>>>>> Thanks for looking at this. >>>>>> >>>>>> >>>>>> On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt; wrote: >>>>>>> pretty cool! >>>>>>> >>>>>>> Just tried your branch and it looks good on my iPhone 4s and on my Galaxy S II. >>>>>>> >>>>>>> >>>>>>> -Matthias >>>>>>> >>>>>>> >>>>>>> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>> Hello All, >>>>>>>> >>>>>>>> We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive. >>>>>>>> >>>>>>>> Out of several proposals: >>>>>>>> 1. use bootstrap (current version of our site) and apply our custom design >>>>>>>> 2. use topcoat css and apply our custom design >>>>>>>> 3. use HTML5 boilerplate and apply our custom design and make it responsive >>>>>>>> >>>>>>>> I initially started with option 1, which might be overkill for a static site. >>>>>>>> Tried option 2, but here too, it seems overkill so ended with option 3. >>>>>>>> >>>>>>>> Using a blank page, I worked on Home page reapplying Hylke css but: >>>>>>>> - removing maximun-scale=1.0 because we want to let people zoom if they wish, >>>>>>>> - replacing 'px' unit to use 'em', >>>>>>>> - centred logo images, >>>>>>>> - making sure width is right otherwise you get screw up with iPhone rotate >>>>>>>> - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) >>>>>>>> >>>>>>>> The main points to sort out for UX design is the menu bar and the footer. >>>>>>>> To me, footer is too huge, even on desktop, could we remove news? >>>>>>>> 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? >>>>>>>> >>>>>>>> Feedback welcome, >>>>>>>> Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>> >>>>>>>> ++ >>>>>>>> Corinne >>>>>>>> >>>>>>>> _______________________________________________ >>>>>>>> aerogear-dev mailing list >>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>>> >>>>>>> >>>>>>> -- >>>>>>> Matthias Wessendorf >>>>>>> >>>>>>> blog: http://matthiaswessendorf.wordpress.com/ >>>>>>> sessions: http://www.slideshare.net/mwessendorf >>>>>>> twitter: http://twitter.com/mwessendorf >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>> >>>>>> >>>>>> >>>>>> -- >>>>>> >>>>>> -- >>>>>> "The measure of a man is what he does with power" - Plato >>>>>> - >>>>>> @abstractj >>>>>> - >>>>>> Volenti Nihil Difficile >>>>>> >>>>>> _______________________________________________ >>>>>> aerogear-dev mailing list >>>>>> aerogear-dev(a)lists.jboss.org >>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>> >>>>> >>>>> >>>>> _______________________________________________ >>>>> aerogear-dev mailing list >>>>> aerogear-dev(a)lists.jboss.org >>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>> >>>> <menu-icon.svg>_______________________________________________ >>>> aerogear-dev mailing list >>>> aerogear-dev(a)lists.jboss.org >>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Hi Hylke Regarding the issue you had on you fork branch, on iPhone/Android browsers of the paragraph being shifted to the right. This issue is caused by this line: https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389 Replace .feature { margin: 0 auto; padding: 1em 3em; max-width: 50em; } by .feature { margin: 0 auto; padding: 1em 1em; max-width: 50em; } and remove margin in: .features { /*margin: 3em auto;*/ } and you should get the spec you wanted. Because you're working border-box, padding is taking extra space out out the box and if there is not enough space in the parent container it expands. One thing I would advise is: when designing your site, test it on real devices on iterative steps as often as possible. ++ Corinne On Aug 5, 2013, at 8:32 PM, Kris Borchers <kborcher(a)redhat.com <mailto:kborcher@redhat.com>> wrote: > +0.5 > > I agree the footer was too big but I want to do a full review of all > navigation when i get back before saying +1 > > On Aug 5, 2013, at 7:34, Corinne Krych <corinnekrych(a)gmail.com > <mailto:corinnekrych@gmail.com>> wrote: > >> Hi All, >> >> #agreed on icons not being meaningful, we could do hyperlinks with >> text. >> But to keep footer small, let's not put to much information in the >> footer. Id you recall we had a huge footer. >> I'd go for a footer that looks like this one: >> http://wildfly.org/ >> >> wdyt? >> >> Corinne >> >> On Aug 5, 2013, at 1:53 PM, Hylke Bons <hbons(a)redhat.com >> <mailto:hbons@redhat.com>> wrote: >> >>> Great! >>> >>> We're nearly there now, I'll fix the remaining issues today. >>> >>> I the use of icons in the footer is problematic. Visitors don't >>> necessarily know what these mean. >>> >>> For example, where would you go if you want to report an issue? Not >>> everyone is familiar with Jira and its logo. (You could hover and >>> get some kind of clue, but you can't do this on touch devices, and >>> it would be annoying) >>> >>> So I think we should revert back to just using text links... The >>> social networks can remain as icons. >>> >>> Thanks, >>> >>> Hylke >>> >>> >>> On 05/08/2013 10:14, Corinne Krych wrote: >>>> Hello All >>>> >>>> @Hylke, I've integrated your comments: >>>> >>>> 1. logo is on left on desktop, centred on phone. I think this was >>>> a good comprise to make it look good on desktop and phone. >>>> 2. menu icon is fixed >>>> 3. page padding for paragraph added >>>> 4. I've downloaded the fonts locally and honestly it improved >>>> performance when browsing on devices >>>> >>>> I'd like you to revisit the footer icons I've added >>>> (doc/jira/email/github/irc). It would be nice if they can look >>>> like the twitter/facebook/google+ ones you initially created. wdyt? >>>> >>>> @all, ready for your review guys, PR sent. >>>> >>>> ++ >>>> Corinne >>>> >>>> On Aug 2, 2013, at 10:59 AM, Corinne Krych <corinnekrych(a)gmail.com >>>> <mailto:corinnekrych@gmail.com>> wrote: >>>> >>>>> Hi Hylke! >>>>> >>>>> I've answered your comets below. >>>>> >>>>> Taking the latest code in my branch: >>>>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>> >>>>> I've also proposed a solution to make the footer much smaller. I >>>>> used images. But, I like to have your designer view on that. >>>>> >>>>> By tonight i hope to have a general feeling for the all site. >>>>> Stay tune. >>>>> >>>>> Thanks! >>>>> ++ >>>>> Corinne >>>>> >>>>> On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com >>>>> <mailto:hbons@redhat.com>> wrote: >>>>> >>>>>> Thanks so much for looking into this Corrine! >>>>>> >>>>>> I just had a look at the OpenShift instance. It looks good to me >>>>>> responsiveness-wise. I like the menu behaviour. >>>>>> >>>>>> There are still some minor style issues. If you still have time >>>>>> to look into this that would be great, >>>>>> otherwise I can take a look at these be fore we launch the new >>>>>> style: >>>>>> >>>>>> - Logo is centred on the page, it looks more balanced having it >>>>>> stick to the left. >>>>> >>>>> Funny, personally and specially on phone I found centred logo >>>>> looks more balance. i remember seeing Passos's comments on this. >>>>> He actually wanted it centred too. But I guess it's a mater of >>>>> taste. I can change. let's see others comments. >>>>> >>>>>> - The menu icon is a bit hard to see (I've attached a quick svg >>>>>> with a colour change, would be nice if we could use that and >>>>>> have it not change shape) >>>>> >>>>> I changed the icon with a unicode (triple bar) much easier to >>>>> see. Pushed all that to my branch. >>>>> >>>>>> - The news headline ("AG 1.0 is out!") is sticking to the right >>>>>> of the page, it would be better if it kept to the right, but >>>>>> still in the middle of the page for large screen setups >>>>>> - The platform icons seem to shift a pixel when you hover them >>>>> >>>>> nice catch will fix that. it gives a bad flickering effect indeed. >>>>> >>>>>> - There's no page padding when scaling down, this makes the text >>>>>> paragraphs harder to read, because they touch the screen edge >>>>>> - Some padding/spacing issue all-round. This is probably because >>>>>> everything was rebased on Boilerplate. >>>>> >>>>> I am actually working on all the other pages. my initial focus >>>>> was home page. >>>>> >>>>>> >>>>>> I'll try to get a local instance running again and help out with >>>>>> these things. >>>>> >>>>> + 10001 >>>>> Together we'll have much power, thanks! >>>>> >>>>>> >>>>>> Thanks! >>>>>> >>>>>> Hylke >>>>>> >>>>>> >>>>>> >>>>>> On 01/08/2013 06:40, Daniel Bevenius wrote: >>>>>>> Looks nice! >>>>>>> >>>>>>> >>>>>>> On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org >>>>>>> <mailto:bruno@abstractj.org>> wrote: >>>>>>> >>>>>>> Thanks Corinne. >>>>>>> >>>>>>> Just tried and deployed on OpenShift >>>>>>> http://site-abstractj.rhcloud.com/. Looks really good, I >>>>>>> also tested it with http://mattkersley.com/responsive/ >>>>>>> >>>>>>> I'll try later on Android, IPhone and IPad. >>>>>>> >>>>>>> Thanks for looking at this. >>>>>>> >>>>>>> >>>>>>> On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf >>>>>>> <matzew(a)apache.org <mailto:matzew@apache.org>> wrote: >>>>>>> >>>>>>> pretty cool! >>>>>>> >>>>>>> Just tried your branch and it looks good on my iPhone >>>>>>> 4s and on my Galaxy S II. >>>>>>> >>>>>>> >>>>>>> -Matthias >>>>>>> >>>>>>> >>>>>>> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych >>>>>>> <corinnekrych(a)gmail.com >>>>>>> <mailto:corinnekrych@gmail.com>> wrote: >>>>>>> >>>>>>> Hello All, >>>>>>> >>>>>>> We've been talking about redesigning our >>>>>>> aerogear.org <http://aerogear.org/> web site. >>>>>>> Hylke has done a great design job. Now, we 'just' >>>>>>> want to make it responsive. >>>>>>> >>>>>>> Out of several proposals: >>>>>>> 1. use bootstrap (current version of our site) and >>>>>>> apply our custom design >>>>>>> 2. use topcoat css and apply our custom design >>>>>>> 3. use HTML5 boilerplate and apply our custom >>>>>>> design and make it responsive >>>>>>> >>>>>>> I initially started with option 1, which might be >>>>>>> overkill for a static site. >>>>>>> Tried option 2, but here too, it seems overkill so >>>>>>> ended with option 3. >>>>>>> >>>>>>> Using a blank page, I worked on Home page >>>>>>> reapplying Hylke css but: >>>>>>> - removing maximun-scale=1.0 because we want to let >>>>>>> people zoom if they wish, >>>>>>> - replacing 'px' unit to use 'em', >>>>>>> - centred logo images, >>>>>>> - making sure width is right otherwise you get >>>>>>> screw up with iPhone rotate >>>>>>> - adding media queries (only 2 breakpoints for now, >>>>>>> but need to be adjusted with devices tests and your >>>>>>> feedbacks) >>>>>>> >>>>>>> The main points to sort out for UX design is the >>>>>>> menu bar and the footer. >>>>>>> To me, footer is too huge, even on desktop, could >>>>>>> we remove news? >>>>>>> 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? >>>>>>> >>>>>>> Feedback welcome, >>>>>>> Work in progress in >>>>>>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>> >>>>>>> ++ >>>>>>> Corinne >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> <mailto:aerogear-dev@lists.jboss.org> >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> -- >>>>>>> Matthias Wessendorf >>>>>>> >>>>>>> blog: http://matthiaswessendorf.wordpress.com/ >>>>>>> sessions: http://www.slideshare.net/mwessendorf >>>>>>> twitter: http://twitter.com/mwessendorf >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> <mailto:aerogear-dev@lists.jboss.org> >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> -- >>>>>>> >>>>>>> -- >>>>>>> "The measure of a man is what he does with power" - Plato >>>>>>> - >>>>>>> @abstractj >>>>>>> - >>>>>>> Volenti Nihil Difficile >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> <mailto:aerogear-dev@lists.jboss.org> >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>> >>>>>> <menu-icon.svg>_______________________________________________ >>>>>> aerogear-dev mailing list >>>>>> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>> >>>> >>>> >>>> >>>> _______________________________________________ >>>> aerogear-dev mailing list >>>> aerogear-dev(a)lists.jboss.org >>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >> https://lists.jboss.org/mailman/listinfo/aerogear-dev > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> > https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Hello Guys With Hylke we've been discussing footer recently. I\d like to know your view on our site footer. Do you prefer the one complete with all news details (knowing we already have a news entry in the menu) ? like below https://docs.google.com/file/d/0B3bDL8OwQQUdNVYwTlFIajZ4c2M/edit?usp=sharing or a lean one just with links (no contents of news) like: https://docs.google.com/file/d/0B3bDL8OwQQUdWjBFU3k5WWEtUk0/edit?usp=sharing Feedback welcome ++ Corinne On Aug 6, 2013, at 6:22 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: Thanks again! I've pushed the fix to my branch now. Hylke On 06/08/2013 16:53, Corinne Krych wrote: Hi Hylke Regarding the issue you had on you fork branch, on iPhone/Android browsers of the paragraph being shifted to the right. This issue is caused by this line: https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389 Replace .feature { margin: 0 auto; padding: 1em 3em; max-width: 50em; } by .feature { margin: 0 auto; padding: 1em 1em; max-width: 50em; } and remove margin in: .features { /*margin: 3em auto;*/ } and you should get the spec you wanted. Because you're working border-box, padding is taking extra space out out the box and if there is not enough space in the parent container it expands. One thing I would advise is: when designing your site, test it on real devices on iterative steps as often as possible. ++ Corinne On Aug 5, 2013, at 8:32 PM, Kris Borchers <kborcher(a)redhat.com&gt; wrote: +0.5 I agree the footer was too big but I want to do a full review of all navigation when i get back before saying +1 On Aug 5, 2013, at 7:34, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: Hi All, #agreed on icons not being meaningful, we could do hyperlinks with text. But to keep footer small, let's not put to much information in the footer. Id you recall we had a huge footer. I'd go for a footer that looks like this one: http://wildfly.org/ wdyt? Corinne On Aug 5, 2013, at 1:53 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: Great! We're nearly there now, I'll fix the remaining issues today. I the use of icons in the footer is problematic. Visitors don't necessarily know what these mean. For example, where would you go if you want to report an issue? Not everyone is familiar with Jira and its logo. (You could hover and get some kind of clue, but you can't do this on touch devices, and it would be annoying) So I think we should revert back to just using text links... The social networks can remain as icons. Thanks, Hylke On 05/08/2013 10:14, Corinne Krych wrote: Hello All @Hylke, I've integrated your comments: 1. logo is on left on desktop, centred on phone. I think this was a good comprise to make it look good on desktop and phone. 2. menu icon is fixed 3. page padding for paragraph added 4. I've downloaded the fonts locally and honestly it improved performance when browsing on devices I'd like you to revisit the footer icons I've added (doc/jira/email/github/irc). It would be nice if they can look like the twitter/facebook/google+ ones you initially created. wdyt? @all, ready for your review guys, PR sent. ++ Corinne On Aug 2, 2013, at 10:59 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: Hi Hylke! I've answered your comets below. Taking the latest code in my branch: https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 I've also proposed a solution to make the footer much smaller. I used images. But, I like to have your designer view on that. By tonight i hope to have a general feeling for the all site. Stay tune. Thanks! ++ Corinne On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: Thanks so much for looking into this Corrine! I just had a look at the OpenShift instance. It looks good to me responsiveness-wise. I like the menu behaviour. There are still some minor style issues. If you still have time to look into this that would be great, otherwise I can take a look at these be fore we launch the new style: - Logo is centred on the page, it looks more balanced having it stick to the left. Funny, personally and specially on phone I found centred logo looks more balance. i remember seeing Passos's comments on this. He actually wanted it centred too. But I guess it's a mater of taste. I can change. let's see others comments. - The menu icon is a bit hard to see (I've attached a quick svg with a colour change, would be nice if we could use that and have it not change shape) I changed the icon with a unicode (triple bar) much easier to see. Pushed all that to my branch. - The news headline ("AG 1.0 is out!") is sticking to the right of the page, it would be better if it kept to the right, but still in the middle of the page for large screen setups - The platform icons seem to shift a pixel when you hover them nice catch will fix that. it gives a bad flickering effect indeed. - There's no page padding when scaling down, this makes the text paragraphs harder to read, because they touch the screen edge - Some padding/spacing issue all-round. This is probably because everything was rebased on Boilerplate. I am actually working on all the other pages. my initial focus was home page. I'll try to get a local instance running again and help out with these things. + 10001 Together we'll have much power, thanks! Thanks! Hylke On 01/08/2013 06:40, Daniel Bevenius wrote: Looks nice! On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org&gt; wrote: > Thanks Corinne. > > Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. > Looks really good, I also tested it with > http://mattkersley.com/responsive/ > > I'll try later on Android, IPhone and IPad. > > Thanks for looking at this. > > > On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt;wrote: > >> pretty cool! >> >> Just tried your branch and it looks good on my iPhone 4s and on my >> Galaxy S II. >> >> >> -Matthias >> >> >> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt;wrote: >> >>> Hello All, >>> >>> We've been talking about redesigning our aerogear.org web site. >>> Hylke has done a great design job. Now, we 'just' want to make it >>> responsive. >>> >>> Out of several proposals: >>> 1. use bootstrap (current version of our site) and apply our custom >>> design >>> 2. use topcoat css and apply our custom design >>> 3. use HTML5 boilerplate and apply our custom design and make it >>> responsive >>> >>> I initially started with option 1, which might be overkill for a >>> static site. >>> Tried option 2, but here too, it seems overkill so ended with option 3. >>> >>> Using a blank page, I worked on Home page reapplying Hylke css but: >>> - removing maximun-scale=1.0 because we want to let people zoom if they >>> wish, >>> - replacing 'px' unit to use 'em', >>> - centred logo images, >>> - making sure width is right otherwise you get screw up with iPhone >>> rotate >>> - adding media queries (only 2 breakpoints for now, but need to be >>> adjusted with devices tests and your feedbacks) >>> >>> The main points to sort out for UX design is the menu bar and the >>> footer. >>> To me, footer is too huge, even on desktop, could we remove news? >>> 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? >>> >>> Feedback welcome, >>> Work in progress in >>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>> >>> ++ >>> Corinne >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >> >> >> >> -- >> Matthias Wessendorf >> >> blog: http://matthiaswessendorf.wordpress.com/ >> sessions: http://www.slideshare.net/mwessendorf >> twitter: http://twitter.com/mwessendorf >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> > > > > -- > > -- > "The measure of a man is what he does with power" - Plato > - > @abstractj > - > Volenti Nihil Difficile > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev > _______________________________________________ aerogear-dev mailing listaerogear-dev@lists.jboss.orghttps://lists.jboss.org/mailman/listinfo/aerogear-dev <menu-icon.svg>_______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing listaerogear-dev@lists.jboss.orghttps://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing listaerogear-dev@lists.jboss.orghttps://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Hello Guys With Hylke we've been discussing footer recently. I\d like to know your view on our site footer. Do you prefer the one complete with all news details (knowing we already have a news entry in the menu) ? like below https://docs.google.com/file/d/0B3bDL8OwQQUdNVYwTlFIajZ4c2M/edit?usp=sharing or a lean one just with links (no contents of news) like: https://docs.google.com/file/d/0B3bDL8OwQQUdWjBFU3k5WWEtUk0/edit?usp=sharing Feedback welcome ++ Corinne On Aug 6, 2013, at 6:22 PM, Hylke Bons <hbons(a)redhat.com <mailto:hbons@redhat.com>> wrote: > Thanks again! > I've pushed the fix to my branch now. > > Hylke > > On 06/08/2013 16:53, Corinne Krych wrote: >> Hi Hylke >> >> Regarding the issue you had on you fork branch, on iPhone/Android >> browsers of the paragraph being shifted to the right. This issue is >> caused by this line: >> https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389 >> >> Replace >> .feature { >> margin: 0 auto; >> padding: 1em 3em; >> max-width: 50em; >> } >> by >> >> .feature { >> margin: 0 auto; >> padding: 1em 1em; >> max-width: 50em; >> } >> and remove margin in: >> .features { >> /*margin: 3em auto;*/ >> } >> and you should get the spec you wanted. >> Because you're working border-box, padding is taking extra space out >> out the box and if there is not enough space in the parent container >> it expands. One thing I would advise is: when designing your site, >> test it on real devices on iterative steps as often as possible. >> >> ++ >> Corinne >> >> >> On Aug 5, 2013, at 8:32 PM, Kris Borchers <kborcher(a)redhat.com >> <mailto:kborcher@redhat.com>> wrote: >> >>> +0.5 >>> >>> I agree the footer was too big but I want to do a full review of >>> all navigation when i get back before saying +1 >>> >>> On Aug 5, 2013, at 7:34, Corinne Krych <corinnekrych(a)gmail.com >>> <mailto:corinnekrych@gmail.com>> wrote: >>> >>>> Hi All, >>>> >>>> #agreed on icons not being meaningful, we could do hyperlinks with >>>> text. >>>> But to keep footer small, let's not put to much information in the >>>> footer. Id you recall we had a huge footer. >>>> I'd go for a footer that looks like this one: >>>> http://wildfly.org/ >>>> >>>> wdyt? >>>> >>>> Corinne >>>> >>>> On Aug 5, 2013, at 1:53 PM, Hylke Bons <hbons(a)redhat.com >>>> <mailto:hbons@redhat.com>> wrote: >>>> >>>>> Great! >>>>> >>>>> We're nearly there now, I'll fix the remaining issues today. >>>>> >>>>> I the use of icons in the footer is problematic. Visitors don't >>>>> necessarily know what these mean. >>>>> >>>>> For example, where would you go if you want to report an issue? >>>>> Not everyone is familiar with Jira and its logo. (You could hover >>>>> and get some kind of clue, but you can't do this on touch >>>>> devices, and it would be annoying) >>>>> >>>>> So I think we should revert back to just using text links... The >>>>> social networks can remain as icons. >>>>> >>>>> Thanks, >>>>> >>>>> Hylke >>>>> >>>>> >>>>> On 05/08/2013 10:14, Corinne Krych wrote: >>>>>> Hello All >>>>>> >>>>>> @Hylke, I've integrated your comments: >>>>>> >>>>>> 1. logo is on left on desktop, centred on phone. I think this >>>>>> was a good comprise to make it look good on desktop and phone. >>>>>> 2. menu icon is fixed >>>>>> 3. page padding for paragraph added >>>>>> 4. I've downloaded the fonts locally and honestly it improved >>>>>> performance when browsing on devices >>>>>> >>>>>> I'd like you to revisit the footer icons I've added >>>>>> (doc/jira/email/github/irc). It would be nice if they can look >>>>>> like the twitter/facebook/google+ ones you initially created. wdyt? >>>>>> >>>>>> @all, ready for your review guys, PR sent. >>>>>> >>>>>> ++ >>>>>> Corinne >>>>>> >>>>>> On Aug 2, 2013, at 10:59 AM, Corinne Krych >>>>>> <corinnekrych(a)gmail.com <mailto:corinnekrych@gmail.com>> wrote: >>>>>> >>>>>>> Hi Hylke! >>>>>>> >>>>>>> I've answered your comets below. >>>>>>> >>>>>>> Taking the latest code in my branch: >>>>>>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>> >>>>>>> I've also proposed a solution to make the footer much smaller. >>>>>>> I used images. But, I like to have your designer view on that. >>>>>>> >>>>>>> By tonight i hope to have a general feeling for the all site. >>>>>>> Stay tune. >>>>>>> >>>>>>> Thanks! >>>>>>> ++ >>>>>>> Corinne >>>>>>> >>>>>>> On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com >>>>>>> <mailto:hbons@redhat.com>> wrote: >>>>>>> >>>>>>>> Thanks so much for looking into this Corrine! >>>>>>>> >>>>>>>> I just had a look at the OpenShift instance. It looks good to >>>>>>>> me responsiveness-wise. I like the menu behaviour. >>>>>>>> >>>>>>>> There are still some minor style issues. If you still have >>>>>>>> time to look into this that would be great, >>>>>>>> otherwise I can take a look at these be fore we launch the new >>>>>>>> style: >>>>>>>> >>>>>>>> - Logo is centred on the page, it looks more balanced having >>>>>>>> it stick to the left. >>>>>>> >>>>>>> Funny, personally and specially on phone I found centred logo >>>>>>> looks more balance. i remember seeing Passos's comments on >>>>>>> this. He actually wanted it centred too. But I guess it's a >>>>>>> mater of taste. I can change. let's see others comments. >>>>>>> >>>>>>>> - The menu icon is a bit hard to see (I've attached a quick >>>>>>>> svg with a colour change, would be nice if we could use that >>>>>>>> and have it not change shape) >>>>>>> >>>>>>> I changed the icon with a unicode (triple bar) much easier to >>>>>>> see. Pushed all that to my branch. >>>>>>> >>>>>>>> - The news headline ("AG 1.0 is out!") is sticking to the >>>>>>>> right of the page, it would be better if it kept to the right, >>>>>>>> but still in the middle of the page for large screen setups >>>>>>>> - The platform icons seem to shift a pixel when you hover them >>>>>>> >>>>>>> nice catch will fix that. it gives a bad flickering effect indeed. >>>>>>> >>>>>>>> - There's no page padding when scaling down, this makes the >>>>>>>> text paragraphs harder to read, because they touch the screen edge >>>>>>>> - Some padding/spacing issue all-round. This is probably >>>>>>>> because everything was rebased on Boilerplate. >>>>>>> >>>>>>> I am actually working on all the other pages. my initial focus >>>>>>> was home page. >>>>>>> >>>>>>>> >>>>>>>> I'll try to get a local instance running again and help out >>>>>>>> with these things. >>>>>>> >>>>>>> + 10001 >>>>>>> Together we'll have much power, thanks! >>>>>>> >>>>>>>> >>>>>>>> Thanks! >>>>>>>> >>>>>>>> Hylke >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> On 01/08/2013 06:40, Daniel Bevenius wrote: >>>>>>>>> Looks nice! >>>>>>>>> >>>>>>>>> >>>>>>>>> On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org >>>>>>>>> <mailto:bruno@abstractj.org>> wrote: >>>>>>>>> >>>>>>>>> Thanks Corinne. >>>>>>>>> >>>>>>>>> Just tried and deployed on OpenShift >>>>>>>>> http://site-abstractj.rhcloud.com/. Looks really good, I >>>>>>>>> also tested it with http://mattkersley.com/responsive/ >>>>>>>>> >>>>>>>>> I'll try later on Android, IPhone and IPad. >>>>>>>>> >>>>>>>>> Thanks for looking at this. >>>>>>>>> >>>>>>>>> >>>>>>>>> On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf >>>>>>>>> <matzew(a)apache.org <mailto:matzew@apache.org>> wrote: >>>>>>>>> >>>>>>>>> pretty cool! >>>>>>>>> >>>>>>>>> Just tried your branch and it looks good on my iPhone >>>>>>>>> 4s and on my Galaxy S II. >>>>>>>>> >>>>>>>>> >>>>>>>>> -Matthias >>>>>>>>> >>>>>>>>> >>>>>>>>> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych >>>>>>>>> <corinnekrych(a)gmail.com >>>>>>>>> <mailto:corinnekrych@gmail.com>> wrote: >>>>>>>>> >>>>>>>>> Hello All, >>>>>>>>> >>>>>>>>> We've been talking about redesigning our >>>>>>>>> aerogear.org <http://aerogear.org/> web site. >>>>>>>>> Hylke has done a great design job. Now, we >>>>>>>>> 'just' want to make it responsive. >>>>>>>>> >>>>>>>>> Out of several proposals: >>>>>>>>> 1. use bootstrap (current version of our site) >>>>>>>>> and apply our custom design >>>>>>>>> 2. use topcoat css and apply our custom design >>>>>>>>> 3. use HTML5 boilerplate and apply our custom >>>>>>>>> design and make it responsive >>>>>>>>> >>>>>>>>> I initially started with option 1, which might be >>>>>>>>> overkill for a static site. >>>>>>>>> Tried option 2, but here too, it seems overkill >>>>>>>>> so ended with option 3. >>>>>>>>> >>>>>>>>> Using a blank page, I worked on Home page >>>>>>>>> reapplying Hylke css but: >>>>>>>>> - removing maximun-scale=1.0 because we want to >>>>>>>>> let people zoom if they wish, >>>>>>>>> - replacing 'px' unit to use 'em', >>>>>>>>> - centred logo images, >>>>>>>>> - making sure width is right otherwise you get >>>>>>>>> screw up with iPhone rotate >>>>>>>>> - adding media queries (only 2 breakpoints for >>>>>>>>> now, but need to be adjusted with devices tests >>>>>>>>> and your feedbacks) >>>>>>>>> >>>>>>>>> The main points to sort out for UX design is the >>>>>>>>> menu bar and the footer. >>>>>>>>> To me, footer is too huge, even on desktop, could >>>>>>>>> we remove news? >>>>>>>>> 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? >>>>>>>>> >>>>>>>>> Feedback welcome, >>>>>>>>> Work in progress in >>>>>>>>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>> >>>>>>>>> ++ >>>>>>>>> Corinne >>>>>>>>> >>>>>>>>> _______________________________________________ >>>>>>>>> aerogear-dev mailing list >>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>> <mailto:aerogear-dev@lists.jboss.org> >>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> -- >>>>>>>>> Matthias Wessendorf >>>>>>>>> >>>>>>>>> blog: http://matthiaswessendorf.wordpress.com/ >>>>>>>>> sessions: http://www.slideshare.net/mwessendorf >>>>>>>>> twitter: http://twitter.com/mwessendorf >>>>>>>>> >>>>>>>>> _______________________________________________ >>>>>>>>> aerogear-dev mailing list >>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>> <mailto:aerogear-dev@lists.jboss.org> >>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> -- >>>>>>>>> >>>>>>>>> -- >>>>>>>>> "The measure of a man is what he does with power" - Plato >>>>>>>>> - >>>>>>>>> @abstractj >>>>>>>>> - >>>>>>>>> Volenti Nihil Difficile >>>>>>>>> >>>>>>>>> _______________________________________________ >>>>>>>>> aerogear-dev mailing list >>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>> <mailto:aerogear-dev@lists.jboss.org> >>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> _______________________________________________ >>>>>>>>> aerogear-dev mailing list >>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>> >>>>>>>> <menu-icon.svg>_______________________________________________ >>>>>>>> aerogear-dev mailing list >>>>>>>> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>> >>>>>> >>>>>> >>>>>> _______________________________________________ >>>>>> aerogear-dev mailing list >>>>>> aerogear-dev(a)lists.jboss.org >>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>> >>>>> _______________________________________________ >>>>> aerogear-dev mailing list >>>>> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>> >>>> _______________________________________________ >>>> aerogear-dev mailing list >>>> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org <mailto:aerogear-dev@lists.jboss.org> > https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

+1 for lean version. One thing I noticed is that the "Contribute" link just goes to github.com/aerogear. I think it would make more sense to link to http://aerogear.org/docs/guides/Contributing/ and add some info near the top linking to our github organization. Make sense? On Aug 7, 2013, at 4:51 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: > I like what you did with the "lean" one. > There are some spacing changes to make, but overall I prefer that one. > > Hylke > > > > On 07/08/2013 11:39, Corinne Krych wrote: >> Hello Guys >> >> With Hylke we've been discussing footer recently. I\d like to know your view on our site footer. >> >> Do you prefer the one complete with all news details (knowing we already have a news entry in the menu) ? like below >> >> https://docs.google.com/file/d/0B3bDL8OwQQUdNVYwTlFIajZ4c2M/edit?usp=sharing >> >> or a lean one just with links (no contents of news) like: >> >> https://docs.google.com/file/d/0B3bDL8OwQQUdWjBFU3k5WWEtUk0/edit?usp=sharing >> >> >> Feedback welcome >> >> ++ >> Corinne >> >> >> On Aug 6, 2013, at 6:22 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >> >>> Thanks again! >>> I've pushed the fix to my branch now. >>> >>> Hylke >>> >>> On 06/08/2013 16:53, Corinne Krych wrote: >>>> Hi Hylke >>>> >>>> Regarding the issue you had on you fork branch, on iPhone/Android browsers of the paragraph being shifted to the right. This issue is caused by this line: >>>> https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389 >>>> >>>> Replace >>>> .feature { >>>> margin: 0 auto; >>>> padding: 1em 3em; >>>> max-width: 50em; >>>> } >>>> by >>>> >>>> .feature { >>>> margin: 0 auto; >>>> padding: 1em 1em; >>>> max-width: 50em; >>>> } >>>> and remove margin in: >>>> .features { >>>> /*margin: 3em auto;*/ >>>> } >>>> and you should get the spec you wanted. >>>> Because you're working border-box, padding is taking extra space out out the box and if there is not enough space in the parent container it expands. One thing I would advise is: when designing your site, test it on real devices on iterative steps as often as possible. >>>> >>>> ++ >>>> Corinne >>>> >>>> >>>> On Aug 5, 2013, at 8:32 PM, Kris Borchers <kborcher(a)redhat.com&gt; wrote: >>>> >>>>> +0.5 >>>>> >>>>> I agree the footer was too big but I want to do a full review of all navigation when i get back before saying +1 >>>>> >>>>> On Aug 5, 2013, at 7:34, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>> >>>>>> Hi All, >>>>>> >>>>>> #agreed on icons not being meaningful, we could do hyperlinks with text. >>>>>> But to keep footer small, let's not put to much information in the footer. Id you recall we had a huge footer. >>>>>> I'd go for a footer that looks like this one: >>>>>> http://wildfly.org/ >>>>>> >>>>>> wdyt? >>>>>> >>>>>> Corinne >>>>>> >>>>>> On Aug 5, 2013, at 1:53 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>> >>>>>>> Great! >>>>>>> >>>>>>> We're nearly there now, I'll fix the remaining issues today. >>>>>>> >>>>>>> I the use of icons in the footer is problematic. Visitors don't necessarily know what these mean. >>>>>>> >>>>>>> For example, where would you go if you want to report an issue? Not everyone is familiar with Jira and its logo. (You could hover and get some kind of clue, but you can't do this on touch devices, and it would be annoying) >>>>>>> >>>>>>> So I think we should revert back to just using text links... The social networks can remain as icons. >>>>>>> >>>>>>> Thanks, >>>>>>> >>>>>>> Hylke >>>>>>> >>>>>>> >>>>>>> On 05/08/2013 10:14, Corinne Krych wrote: >>>>>>>> Hello All >>>>>>>> >>>>>>>> @Hylke, I've integrated your comments: >>>>>>>> >>>>>>>> 1. logo is on left on desktop, centred on phone. I think this was a good comprise to make it look good on desktop and phone. >>>>>>>> 2. menu icon is fixed >>>>>>>> 3. page padding for paragraph added >>>>>>>> 4. I've downloaded the fonts locally and honestly it improved performance when browsing on devices >>>>>>>> >>>>>>>> I'd like you to revisit the footer icons I've added (doc/jira/email/github/irc). It would be nice if they can look like the twitter/facebook/google+ ones you initially created. wdyt? >>>>>>>> >>>>>>>> @all, ready for your review guys, PR sent. >>>>>>>> >>>>>>>> ++ >>>>>>>> Corinne >>>>>>>> >>>>>>>> On Aug 2, 2013, at 10:59 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>> >>>>>>>>> Hi Hylke! >>>>>>>>> >>>>>>>>> I've answered your comets below. >>>>>>>>> >>>>>>>>> Taking the latest code in my branch: >>>>>>>>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>> >>>>>>>>> I've also proposed a solution to make the footer much smaller. I used images. But, I like to have your designer view on that. >>>>>>>>> >>>>>>>>> By tonight i hope to have a general feeling for the all site. Stay tune. >>>>>>>>> >>>>>>>>> Thanks! >>>>>>>>> ++ >>>>>>>>> Corinne >>>>>>>>> >>>>>>>>> On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>>>>> >>>>>>>>>> Thanks so much for looking into this Corrine! >>>>>>>>>> >>>>>>>>>> I just had a look at the OpenShift instance. It looks good to me responsiveness-wise. I like the menu behaviour. >>>>>>>>>> >>>>>>>>>> There are still some minor style issues. If you still have time to look into this that would be great, >>>>>>>>>> otherwise I can take a look at these be fore we launch the new style: >>>>>>>>>> >>>>>>>>>> - Logo is centred on the page, it looks more balanced having it stick to the left. >>>>>>>>> >>>>>>>>> Funny, personally and specially on phone I found centred logo looks more balance. i remember seeing Passos's comments on this. He actually wanted it centred too. But I guess it's a mater of taste. I can change. let's see others comments. >>>>>>>>> >>>>>>>>>> - The menu icon is a bit hard to see (I've attached a quick svg with a colour change, would be nice if we could use that and have it not change shape) >>>>>>>>> >>>>>>>>> I changed the icon with a unicode (triple bar) much easier to see. Pushed all that to my branch. >>>>>>>>> >>>>>>>>>> - The news headline ("AG 1.0 is out!") is sticking to the right of the page, it would be better if it kept to the right, but still in the middle of the page for large screen setups >>>>>>>>>> - The platform icons seem to shift a pixel when you hover them >>>>>>>>> >>>>>>>>> nice catch will fix that. it gives a bad flickering effect indeed. >>>>>>>>> >>>>>>>>>> - There's no page padding when scaling down, this makes the text paragraphs harder to read, because they touch the screen edge >>>>>>>>>> - Some padding/spacing issue all-round. This is probably because everything was rebased on Boilerplate. >>>>>>>>> >>>>>>>>> I am actually working on all the other pages. my initial focus was home page. >>>>>>>>> >>>>>>>>>> >>>>>>>>>> I'll try to get a local instance running again and help out with these things. >>>>>>>>> >>>>>>>>> + 10001 >>>>>>>>> Together we'll have much power, thanks! >>>>>>>>> >>>>>>>>>> >>>>>>>>>> Thanks! >>>>>>>>>> >>>>>>>>>> Hylke >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> On 01/08/2013 06:40, Daniel Bevenius wrote: >>>>>>>>>>> Looks nice! >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org&gt; wrote: >>>>>>>>>>> Thanks Corinne. >>>>>>>>>>> >>>>>>>>>>> Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. Looks really good, I also tested it with http://mattkersley.com/responsive/ >>>>>>>>>>> >>>>>>>>>>> I'll try later on Android, IPhone and IPad. >>>>>>>>>>> >>>>>>>>>>> Thanks for looking at this. >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt; wrote: >>>>>>>>>>> pretty cool! >>>>>>>>>>> >>>>>>>>>>> Just tried your branch and it looks good on my iPhone 4s and on my Galaxy S II. >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> -Matthias >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>>>>> Hello All, >>>>>>>>>>> >>>>>>>>>>> We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive. >>>>>>>>>>> >>>>>>>>>>> Out of several proposals: >>>>>>>>>>> 1. use bootstrap (current version of our site) and apply our custom design >>>>>>>>>>> 2. use topcoat css and apply our custom design >>>>>>>>>>> 3. use HTML5 boilerplate and apply our custom design and make it responsive >>>>>>>>>>> >>>>>>>>>>> I initially started with option 1, which might be overkill for a static site. >>>>>>>>>>> Tried option 2, but here too, it seems overkill so ended with option 3. >>>>>>>>>>> >>>>>>>>>>> Using a blank page, I worked on Home page reapplying Hylke css but: >>>>>>>>>>> - removing maximun-scale=1.0 because we want to let people zoom if they wish, >>>>>>>>>>> - replacing 'px' unit to use 'em', >>>>>>>>>>> - centred logo images, >>>>>>>>>>> - making sure width is right otherwise you get screw up with iPhone rotate >>>>>>>>>>> - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) >>>>>>>>>>> >>>>>>>>>>> The main points to sort out for UX design is the menu bar and the footer. >>>>>>>>>>> To me, footer is too huge, even on desktop, could we remove news? >>>>>>>>>>> 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? >>>>>>>>>>> >>>>>>>>>>> Feedback welcome, >>>>>>>>>>> Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>>>> >>>>>>>>>>> ++ >>>>>>>>>>> Corinne >>>>>>>>>>> >>>>>>>>>>> _______________________________________________ >>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> -- >>>>>>>>>>> Matthias Wessendorf >>>>>>>>>>> >>>>>>>>>>> blog: http://matthiaswessendorf.wordpress.com/ >>>>>>>>>>> sessions: http://www.slideshare.net/mwessendorf >>>>>>>>>>> twitter: http://twitter.com/mwessendorf >>>>>>>>>>> >>>>>>>>>>> _______________________________________________ >>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> -- >>>>>>>>>>> >>>>>>>>>>> -- >>>>>>>>>>> "The measure of a man is what he does with power" - Plato >>>>>>>>>>> - >>>>>>>>>>> @abstractj >>>>>>>>>>> - >>>>>>>>>>> Volenti Nihil Difficile >>>>>>>>>>> >>>>>>>>>>> _______________________________________________ >>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> _______________________________________________ >>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>> >>>>>>>>>> <menu-icon.svg>_______________________________________________ >>>>>>>>>> aerogear-dev mailing list >>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> _______________________________________________ >>>>>>>> aerogear-dev mailing list >>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>> >>>>>> _______________________________________________ >>>>>> aerogear-dev mailing list >>>>>> aerogear-dev(a)lists.jboss.org >>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>> _______________________________________________ >>>>> aerogear-dev mailing list >>>>> aerogear-dev(a)lists.jboss.org >>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>> >>>> >>>> >>>> _______________________________________________ >>>> aerogear-dev mailing list >>>> aerogear-dev(a)lists.jboss.org >>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

+1 for lean. On Wed, Aug 7, 2013 at 9:37 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: +1 for the link, I've updated the PR ++ Corinne On Aug 7, 2013, at 1:51 PM, Kris Borchers <kris(a)redhat.com&gt; wrote: > +1 for lean version. > > One thing I noticed is that the "Contribute" link just goes to github.com/aerogear. I think it would make more sense to link to http://aerogear.org/docs/guides/Contributing/ and add some info near the top linking to our github organization. Make sense? > > On Aug 7, 2013, at 4:51 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: > >> I like what you did with the "lean" one. >> There are some spacing changes to make, but overall I prefer that one. >> >> Hylke >> >> >> >> On 07/08/2013 11:39, Corinne Krych wrote: >>> Hello Guys >>> >>> With Hylke we've been discussing footer recently. I\d like to know your view on our site footer. >>> >>> Do you prefer the one complete with all news details (knowing we already have a news entry in the menu) ? like below >>> >>> https://docs.google.com/file/d/0B3bDL8OwQQUdNVYwTlFIajZ4c2M/edit?usp=sharing >>> >>> or a lean one just with links (no contents of news) like: >>> >>> https://docs.google.com/file/d/0B3bDL8OwQQUdWjBFU3k5WWEtUk0/edit?usp=sharing >>> >>> >>> Feedback welcome >>> >>> ++ >>> Corinne >>> >>> >>> On Aug 6, 2013, at 6:22 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>> >>>> Thanks again! >>>> I've pushed the fix to my branch now. >>>> >>>> Hylke >>>> >>>> On 06/08/2013 16:53, Corinne Krych wrote: >>>>> Hi Hylke >>>>> >>>>> Regarding the issue you had on you fork branch, on iPhone/Android browsers of the paragraph being shifted to the right. This issue is caused by this line: >>>>> https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389 >>>>> >>>>> Replace >>>>> .feature { >>>>> margin: 0 auto; >>>>> padding: 1em 3em; >>>>> max-width: 50em; >>>>> } >>>>> by >>>>> >>>>> .feature { >>>>> margin: 0 auto; >>>>> padding: 1em 1em; >>>>> max-width: 50em; >>>>> } >>>>> and remove margin in: >>>>> .features { >>>>> /*margin: 3em auto;*/ >>>>> } >>>>> and you should get the spec you wanted. >>>>> Because you're working border-box, padding is taking extra space out out the box and if there is not enough space in the parent container it expands. One thing I would advise is: when designing your site, test it on real devices on iterative steps as often as possible. >>>>> >>>>> ++ >>>>> Corinne >>>>> >>>>> >>>>> On Aug 5, 2013, at 8:32 PM, Kris Borchers <kborcher(a)redhat.com&gt; wrote: >>>>> >>>>>> +0.5 >>>>>> >>>>>> I agree the footer was too big but I want to do a full review of all navigation when i get back before saying +1 >>>>>> >>>>>> On Aug 5, 2013, at 7:34, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>> >>>>>>> Hi All, >>>>>>> >>>>>>> #agreed on icons not being meaningful, we could do hyperlinks with text. >>>>>>> But to keep footer small, let's not put to much information in the footer. Id you recall we had a huge footer. >>>>>>> I'd go for a footer that looks like this one: >>>>>>> http://wildfly.org/ >>>>>>> >>>>>>> wdyt? >>>>>>> >>>>>>> Corinne >>>>>>> >>>>>>> On Aug 5, 2013, at 1:53 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>>> >>>>>>>> Great! >>>>>>>> >>>>>>>> We're nearly there now, I'll fix the remaining issues today. >>>>>>>> >>>>>>>> I the use of icons in the footer is problematic. Visitors don't necessarily know what these mean. >>>>>>>> >>>>>>>> For example, where would you go if you want to report an issue? Not everyone is familiar with Jira and its logo. (You could hover and get some kind of clue, but you can't do this on touch devices, and it would be annoying) >>>>>>>> >>>>>>>> So I think we should revert back to just using text links... The social networks can remain as icons. >>>>>>>> >>>>>>>> Thanks, >>>>>>>> >>>>>>>> Hylke >>>>>>>> >>>>>>>> >>>>>>>> On 05/08/2013 10:14, Corinne Krych wrote: >>>>>>>>> Hello All >>>>>>>>> >>>>>>>>> @Hylke, I've integrated your comments: >>>>>>>>> >>>>>>>>> 1. logo is on left on desktop, centred on phone. I think this was a good comprise to make it look good on desktop and phone. >>>>>>>>> 2. menu icon is fixed >>>>>>>>> 3. page padding for paragraph added >>>>>>>>> 4. I've downloaded the fonts locally and honestly it improved performance when browsing on devices >>>>>>>>> >>>>>>>>> I'd like you to revisit the footer icons I've added (doc/jira/email/github/irc). It would be nice if they can look like the twitter/facebook/google+ ones you initially created. wdyt? >>>>>>>>> >>>>>>>>> @all, ready for your review guys, PR sent. >>>>>>>>> >>>>>>>>> ++ >>>>>>>>> Corinne >>>>>>>>> >>>>>>>>> On Aug 2, 2013, at 10:59 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>>> >>>>>>>>>> Hi Hylke! >>>>>>>>>> >>>>>>>>>> I've answered your comets below. >>>>>>>>>> >>>>>>>>>> Taking the latest code in my branch: >>>>>>>>>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>>> >>>>>>>>>> I've also proposed a solution to make the footer much smaller. I used images. But, I like to have your designer view on that. >>>>>>>>>> >>>>>>>>>> By tonight i hope to have a general feeling for the all site. Stay tune. >>>>>>>>>> >>>>>>>>>> Thanks! >>>>>>>>>> ++ >>>>>>>>>> Corinne >>>>>>>>>> >>>>>>>>>> On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>>>>>> >>>>>>>>>>> Thanks so much for looking into this Corrine! >>>>>>>>>>> >>>>>>>>>>> I just had a look at the OpenShift instance. It looks good to me responsiveness-wise. I like the menu behaviour. >>>>>>>>>>> >>>>>>>>>>> There are still some minor style issues. If you still have time to look into this that would be great, >>>>>>>>>>> otherwise I can take a look at these be fore we launch the new style: >>>>>>>>>>> >>>>>>>>>>> - Logo is centred on the page, it looks more balanced having it stick to the left. >>>>>>>>>> >>>>>>>>>> Funny, personally and specially on phone I found centred logo looks more balance. i remember seeing Passos's comments on this. He actually wanted it centred too. But I guess it's a mater of taste. I can change. let's see others comments. >>>>>>>>>> >>>>>>>>>>> - The menu icon is a bit hard to see (I've attached a quick svg with a colour change, would be nice if we could use that and have it not change shape) >>>>>>>>>> >>>>>>>>>> I changed the icon with a unicode (triple bar) much easier to see. Pushed all that to my branch. >>>>>>>>>> >>>>>>>>>>> - The news headline ("AG 1.0 is out!") is sticking to the right of the page, it would be better if it kept to the right, but still in the middle of the page for large screen setups >>>>>>>>>>> - The platform icons seem to shift a pixel when you hover them >>>>>>>>>> >>>>>>>>>> nice catch will fix that. it gives a bad flickering effect indeed. >>>>>>>>>> >>>>>>>>>>> - There's no page padding when scaling down, this makes the text paragraphs harder to read, because they touch the screen edge >>>>>>>>>>> - Some padding/spacing issue all-round. This is probably because everything was rebased on Boilerplate. >>>>>>>>>> >>>>>>>>>> I am actually working on all the other pages. my initial focus was home page. >>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> I'll try to get a local instance running again and help out with these things. >>>>>>>>>> >>>>>>>>>> + 10001 >>>>>>>>>> Together we'll have much power, thanks! >>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> Thanks! >>>>>>>>>>> >>>>>>>>>>> Hylke >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On 01/08/2013 06:40, Daniel Bevenius wrote: >>>>>>>>>>>> Looks nice! >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org&gt; wrote: >>>>>>>>>>>> Thanks Corinne. >>>>>>>>>>>> >>>>>>>>>>>> Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. Looks really good, I also tested it with http://mattkersley.com/responsive/ >>>>>>>>>>>> >>>>>>>>>>>> I'll try later on Android, IPhone and IPad. >>>>>>>>>>>> >>>>>>>>>>>> Thanks for looking at this. >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt; wrote: >>>>>>>>>>>> pretty cool! >>>>>>>>>>>> >>>>>>>>>>>> Just tried your branch and it looks good on my iPhone 4s and on my Galaxy S II. >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> -Matthias >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>>>>>> Hello All, >>>>>>>>>>>> >>>>>>>>>>>> We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive. >>>>>>>>>>>> >>>>>>>>>>>> Out of several proposals: >>>>>>>>>>>> 1. use bootstrap (current version of our site) and apply our custom design >>>>>>>>>>>> 2. use topcoat css and apply our custom design >>>>>>>>>>>> 3. use HTML5 boilerplate and apply our custom design and make it responsive >>>>>>>>>>>> >>>>>>>>>>>> I initially started with option 1, which might be overkill for a static site. >>>>>>>>>>>> Tried option 2, but here too, it seems overkill so ended with option 3. >>>>>>>>>>>> >>>>>>>>>>>> Using a blank page, I worked on Home page reapplying Hylke css but: >>>>>>>>>>>> - removing maximun-scale=1.0 because we want to let people zoom if they wish, >>>>>>>>>>>> - replacing 'px' unit to use 'em', >>>>>>>>>>>> - centred logo images, >>>>>>>>>>>> - making sure width is right otherwise you get screw up with iPhone rotate >>>>>>>>>>>> - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) >>>>>>>>>>>> >>>>>>>>>>>> The main points to sort out for UX design is the menu bar and the footer. >>>>>>>>>>>> To me, footer is too huge, even on desktop, could we remove news? >>>>>>>>>>>> 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? >>>>>>>>>>>> >>>>>>>>>>>> Feedback welcome, >>>>>>>>>>>> Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>>>>> >>>>>>>>>>>> ++ >>>>>>>>>>>> Corinne >>>>>>>>>>>> >>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> -- >>>>>>>>>>>> Matthias Wessendorf >>>>>>>>>>>> >>>>>>>>>>>> blog: http://matthiaswessendorf.wordpress.com/ >>>>>>>>>>>> sessions: http://www.slideshare.net/mwessendorf >>>>>>>>>>>> twitter: http://twitter.com/mwessendorf >>>>>>>>>>>> >>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> -- >>>>>>>>>>>> >>>>>>>>>>>> -- >>>>>>>>>>>> "The measure of a man is what he does with power" - Plato >>>>>>>>>>>> - >>>>>>>>>>>> @abstractj >>>>>>>>>>>> - >>>>>>>>>>>> Volenti Nihil Difficile >>>>>>>>>>>> >>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>> >>>>>>>>>>> <menu-icon.svg>_______________________________________________ >>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> _______________________________________________ >>>>>>>>> aerogear-dev mailing list >>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>> >>>>>>>> _______________________________________________ >>>>>>>> aerogear-dev mailing list >>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>> _______________________________________________ >>>>>> aerogear-dev mailing list >>>>>> aerogear-dev(a)lists.jboss.org >>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>> >>>>> >>>>> >>>>> _______________________________________________ >>>>> aerogear-dev mailing list >>>>> aerogear-dev(a)lists.jboss.org >>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>> >>>> _______________________________________________ >>>> aerogear-dev mailing list >>>> aerogear-dev(a)lists.jboss.org >>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >>> >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Thanks for this thorough review! These are the types of things I wanted to catch by doing a good review myself but just haven't had the time with the release coming. I will gladly go through and fix these when I have time but if you feel up to fixing any of them, patches welcome. ;) Thanks! On Aug 9, 2013, at 6:50 PM, Yavuz Selim YILMAZ <yavuzsel(a)buffalo.edu&gt; wrote: > Hi all, > > I don't know if this is the correct thread and place to share this. Let me know if it needs to be somewhere else. > > Tried https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 this branch on my local, and checked with some devices I have over here. The problems listed below from my iPod exists for all devices I tested so far (latest versions of Chrome and Safari for iPod 4th gen and iPhone 5 (on latest iOS), and Chrome and Android Browser for my Nexus S on Android 4.0.4). More tests and devices will come next week if needed. > > 0) Menu button seems a little bit more far away from the left side. (have no screenshot specific to this one, but check item 2 screenshot below). >

> > 1) When you tap on the menu icon, it draws a line under the icon. > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0053.PNG

> > > 2) That line under the menu icon doesn't go away when the menu is closed. > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0054.PNG

> > > 3) The same underline appears for the menu items (but as it loads a new page, it does go with the refresh). > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0058.PNG

> > > 4) When side menu is opened, horizontal scroll bar appears, and it scrolls (in a native app which uses sliding menu like the one we have here, when you tap to the main view area, it closes the menu, but in our site the main view area remains there and functional) > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0062.PNG

> > > 5) Some of the pages doesn't have a mobile scaled view (like javadoc pages and community page). > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0056.PNG

> > > 6) When a page has single word which does not fit to a single line, then horizontal scroll bar comes: > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0061.PNG >

> 7) Right margin is either not working, or is set to 0 (same for all pages). > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0059.PNG

> > > 8) Note field seems a little hard to understand when first looked ("Note" header has same font with the note text and "Note" header position is not the best IMO) > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0060.PNG

> > > 9) Some links don't make sense to have on mobile (e.g. download links) > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0055.PNG

> > 10) (this one is specific to my Android device) Menu items don't appear on Android Browser (fine on Chrome for Android), but the menu works, i.e. when I tap where the item supposed to be, it navigates (and actually the menu items appear while loading the next page, but then again disappear as the next page loads): > > https://dl.dropboxusercontent.com/u/7848530/aerogear.org/Screenshot_2013-...

> > > Regards, > > --- > Yavuz Selim Yilmaz > SUNY at Buffalo > Computer Science and Engineering > PhD Candidate > > On Aug 7, 2013, at 1:08 PM, Daniel Passos <daniel(a)passos.me&gt; wrote: > >> +1 for lean. >> >> >> On Wed, Aug 7, 2013 at 9:37 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >> +1 for the link, I've updated the PR >> >> ++ >> Corinne >> >> On Aug 7, 2013, at 1:51 PM, Kris Borchers <kris(a)redhat.com&gt; wrote: >> >>> +1 for lean version. >>> >>> One thing I noticed is that the "Contribute" link just goes to github.com/aerogear. I think it would make more sense to link to http://aerogear.org/docs/guides/Contributing/ and add some info near the top linking to our github organization. Make sense? >>> >>> On Aug 7, 2013, at 4:51 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>> >>>> I like what you did with the "lean" one. >>>> There are some spacing changes to make, but overall I prefer that one. >>>> >>>> Hylke >>>> >>>> >>>> >>>> On 07/08/2013 11:39, Corinne Krych wrote: >>>>> Hello Guys >>>>> >>>>> With Hylke we've been discussing footer recently. I\d like to know your view on our site footer. >>>>> >>>>> Do you prefer the one complete with all news details (knowing we already have a news entry in the menu) ? like below >>>>> >>>>> https://docs.google.com/file/d/0B3bDL8OwQQUdNVYwTlFIajZ4c2M/edit?usp=sharing >>>>> >>>>> or a lean one just with links (no contents of news) like: >>>>> >>>>> https://docs.google.com/file/d/0B3bDL8OwQQUdWjBFU3k5WWEtUk0/edit?usp=sharing >>>>> >>>>> >>>>> Feedback welcome >>>>> >>>>> ++ >>>>> Corinne >>>>> >>>>> >>>>> On Aug 6, 2013, at 6:22 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>> >>>>>> Thanks again! >>>>>> I've pushed the fix to my branch now. >>>>>> >>>>>> Hylke >>>>>> >>>>>> On 06/08/2013 16:53, Corinne Krych wrote: >>>>>>> Hi Hylke >>>>>>> >>>>>>> Regarding the issue you had on you fork branch, on iPhone/Android browsers of the paragraph being shifted to the right. This issue is caused by this line: >>>>>>> https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389 >>>>>>> >>>>>>> Replace >>>>>>> .feature { >>>>>>> margin: 0 auto; >>>>>>> padding: 1em 3em; >>>>>>> max-width: 50em; >>>>>>> } >>>>>>> by >>>>>>> >>>>>>> .feature { >>>>>>> margin: 0 auto; >>>>>>> padding: 1em 1em; >>>>>>> max-width: 50em; >>>>>>> } >>>>>>> and remove margin in: >>>>>>> .features { >>>>>>> /*margin: 3em auto;*/ >>>>>>> } >>>>>>> and you should get the spec you wanted. >>>>>>> Because you're working border-box, padding is taking extra space out out the box and if there is not enough space in the parent container it expands. One thing I would advise is: when designing your site, test it on real devices on iterative steps as often as possible. >>>>>>> >>>>>>> ++ >>>>>>> Corinne >>>>>>> >>>>>>> >>>>>>> On Aug 5, 2013, at 8:32 PM, Kris Borchers <kborcher(a)redhat.com&gt; wrote: >>>>>>> >>>>>>>> +0.5 >>>>>>>> >>>>>>>> I agree the footer was too big but I want to do a full review of all navigation when i get back before saying +1 >>>>>>>> >>>>>>>> On Aug 5, 2013, at 7:34, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>> >>>>>>>>> Hi All, >>>>>>>>> >>>>>>>>> #agreed on icons not being meaningful, we could do hyperlinks with text. >>>>>>>>> But to keep footer small, let's not put to much information in the footer. Id you recall we had a huge footer. >>>>>>>>> I'd go for a footer that looks like this one: >>>>>>>>> http://wildfly.org/ >>>>>>>>> >>>>>>>>> wdyt? >>>>>>>>> >>>>>>>>> Corinne >>>>>>>>> >>>>>>>>> On Aug 5, 2013, at 1:53 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>>>>> >>>>>>>>>> Great! >>>>>>>>>> >>>>>>>>>> We're nearly there now, I'll fix the remaining issues today. >>>>>>>>>> >>>>>>>>>> I the use of icons in the footer is problematic. Visitors don't necessarily know what these mean. >>>>>>>>>> >>>>>>>>>> For example, where would you go if you want to report an issue? Not everyone is familiar with Jira and its logo. (You could hover and get some kind of clue, but you can't do this on touch devices, and it would be annoying) >>>>>>>>>> >>>>>>>>>> So I think we should revert back to just using text links... The social networks can remain as icons. >>>>>>>>>> >>>>>>>>>> Thanks, >>>>>>>>>> >>>>>>>>>> Hylke >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> On 05/08/2013 10:14, Corinne Krych wrote: >>>>>>>>>>> Hello All >>>>>>>>>>> >>>>>>>>>>> @Hylke, I've integrated your comments: >>>>>>>>>>> >>>>>>>>>>> 1. logo is on left on desktop, centred on phone. I think this was a good comprise to make it look good on desktop and phone. >>>>>>>>>>> 2. menu icon is fixed >>>>>>>>>>> 3. page padding for paragraph added >>>>>>>>>>> 4. I've downloaded the fonts locally and honestly it improved performance when browsing on devices >>>>>>>>>>> >>>>>>>>>>> I'd like you to revisit the footer icons I've added (doc/jira/email/github/irc). It would be nice if they can look like the twitter/facebook/google+ ones you initially created. wdyt? >>>>>>>>>>> >>>>>>>>>>> @all, ready for your review guys, PR sent. >>>>>>>>>>> >>>>>>>>>>> ++ >>>>>>>>>>> Corinne >>>>>>>>>>> >>>>>>>>>>> On Aug 2, 2013, at 10:59 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>>>>> >>>>>>>>>>>> Hi Hylke! >>>>>>>>>>>> >>>>>>>>>>>> I've answered your comets below. >>>>>>>>>>>> >>>>>>>>>>>> Taking the latest code in my branch: >>>>>>>>>>>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>>>>> >>>>>>>>>>>> I've also proposed a solution to make the footer much smaller. I used images. But, I like to have your designer view on that. >>>>>>>>>>>> >>>>>>>>>>>> By tonight i hope to have a general feeling for the all site. Stay tune. >>>>>>>>>>>> >>>>>>>>>>>> Thanks! >>>>>>>>>>>> ++ >>>>>>>>>>>> Corinne >>>>>>>>>>>> >>>>>>>>>>>> On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>>>>>>>> >>>>>>>>>>>>> Thanks so much for looking into this Corrine! >>>>>>>>>>>>> >>>>>>>>>>>>> I just had a look at the OpenShift instance. It looks good to me responsiveness-wise. I like the menu behaviour. >>>>>>>>>>>>> >>>>>>>>>>>>> There are still some minor style issues. If you still have time to look into this that would be great, >>>>>>>>>>>>> otherwise I can take a look at these be fore we launch the new style: >>>>>>>>>>>>> >>>>>>>>>>>>> - Logo is centred on the page, it looks more balanced having it stick to the left. >>>>>>>>>>>> >>>>>>>>>>>> Funny, personally and specially on phone I found centred logo looks more balance. i remember seeing Passos's comments on this. He actually wanted it centred too. But I guess it's a mater of taste. I can change. let's see others comments. >>>>>>>>>>>> >>>>>>>>>>>>> - The menu icon is a bit hard to see (I've attached a quick svg with a colour change, would be nice if we could use that and have it not change shape) >>>>>>>>>>>> >>>>>>>>>>>> I changed the icon with a unicode (triple bar) much easier to see. Pushed all that to my branch. >>>>>>>>>>>> >>>>>>>>>>>>> - The news headline ("AG 1.0 is out!") is sticking to the right of the page, it would be better if it kept to the right, but still in the middle of the page for large screen setups >>>>>>>>>>>>> - The platform icons seem to shift a pixel when you hover them >>>>>>>>>>>> >>>>>>>>>>>> nice catch will fix that. it gives a bad flickering effect indeed. >>>>>>>>>>>> >>>>>>>>>>>>> - There's no page padding when scaling down, this makes the text paragraphs harder to read, because they touch the screen edge >>>>>>>>>>>>> - Some padding/spacing issue all-round. This is probably because everything was rebased on Boilerplate. >>>>>>>>>>>> >>>>>>>>>>>> I am actually working on all the other pages. my initial focus was home page. >>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> I'll try to get a local instance running again and help out with these things. >>>>>>>>>>>> >>>>>>>>>>>> + 10001 >>>>>>>>>>>> Together we'll have much power, thanks! >>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> Thanks! >>>>>>>>>>>>> >>>>>>>>>>>>> Hylke >>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> On 01/08/2013 06:40, Daniel Bevenius wrote: >>>>>>>>>>>>>> Looks nice! >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org&gt; wrote: >>>>>>>>>>>>>> Thanks Corinne. >>>>>>>>>>>>>> >>>>>>>>>>>>>> Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. Looks really good, I also tested it with http://mattkersley.com/responsive/ >>>>>>>>>>>>>> >>>>>>>>>>>>>> I'll try later on Android, IPhone and IPad. >>>>>>>>>>>>>> >>>>>>>>>>>>>> Thanks for looking at this. >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt; wrote: >>>>>>>>>>>>>> pretty cool! >>>>>>>>>>>>>> >>>>>>>>>>>>>> Just tried your branch and it looks good on my iPhone 4s and on my Galaxy S II. >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> -Matthias >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>>>>>>>> Hello All, >>>>>>>>>>>>>> >>>>>>>>>>>>>> We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive. >>>>>>>>>>>>>> >>>>>>>>>>>>>> Out of several proposals: >>>>>>>>>>>>>> 1. use bootstrap (current version of our site) and apply our custom design >>>>>>>>>>>>>> 2. use topcoat css and apply our custom design >>>>>>>>>>>>>> 3. use HTML5 boilerplate and apply our custom design and make it responsive >>>>>>>>>>>>>> >>>>>>>>>>>>>> I initially started with option 1, which might be overkill for a static site. >>>>>>>>>>>>>> Tried option 2, but here too, it seems overkill so ended with option 3. >>>>>>>>>>>>>> >>>>>>>>>>>>>> Using a blank page, I worked on Home page reapplying Hylke css but: >>>>>>>>>>>>>> - removing maximun-scale=1.0 because we want to let people zoom if they wish, >>>>>>>>>>>>>> - replacing 'px' unit to use 'em', >>>>>>>>>>>>>> - centred logo images, >>>>>>>>>>>>>> - making sure width is right otherwise you get screw up with iPhone rotate >>>>>>>>>>>>>> - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) >>>>>>>>>>>>>> >>>>>>>>>>>>>> The main points to sort out for UX design is the menu bar and the footer. >>>>>>>>>>>>>> To me, footer is too huge, even on desktop, could we remove news? >>>>>>>>>>>>>> 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? >>>>>>>>>>>>>> >>>>>>>>>>>>>> Feedback welcome, >>>>>>>>>>>>>> Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>>>>>>> >>>>>>>>>>>>>> ++ >>>>>>>>>>>>>> Corinne >>>>>>>>>>>>>> >>>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> -- >>>>>>>>>>>>>> Matthias Wessendorf >>>>>>>>>>>>>> >>>>>>>>>>>>>> blog: http://matthiaswessendorf.wordpress.com/ >>>>>>>>>>>>>> sessions: http://www.slideshare.net/mwessendorf >>>>>>>>>>>>>> twitter: http://twitter.com/mwessendorf >>>>>>>>>>>>>> >>>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> -- >>>>>>>>>>>>>> >>>>>>>>>>>>>> -- >>>>>>>>>>>>>> "The measure of a man is what he does with power" - Plato >>>>>>>>>>>>>> - >>>>>>>>>>>>>> @abstractj >>>>>>>>>>>>>> - >>>>>>>>>>>>>> Volenti Nihil Difficile >>>>>>>>>>>>>> >>>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>> >>>>>>>>>>>>> <menu-icon.svg>_______________________________________________ >>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> _______________________________________________ >>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>> >>>>>>>>>> _______________________________________________ >>>>>>>>>> aerogear-dev mailing list >>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>> >>>>>>>>> _______________________________________________ >>>>>>>>> aerogear-dev mailing list >>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>> _______________________________________________ >>>>>>>> aerogear-dev mailing list >>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>>> >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>> >>>>>> _______________________________________________ >>>>>> aerogear-dev mailing list >>>>>> aerogear-dev(a)lists.jboss.org >>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>> >>>>> >>>>> >>>>> _______________________________________________ >>>>> aerogear-dev mailing list >>>>> aerogear-dev(a)lists.jboss.org >>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>> >>>> _______________________________________________ >>>> aerogear-dev mailing list >>>> aerogear-dev(a)lists.jboss.org >>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev _______________________________________________ aerogear-dev mailing list aerogear-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/aerogear-dev

Hi, Response inline. Regards, --- Yavuz Selim Yilmaz SUNY at Buffalo Computer Science and Engineering PhD Candidate On Aug 12, 2013, at 5:27 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: > Hello Yavuz > > Thanks for looking into it with such great details! > My response embedded in your original mail. > > ++ > Corinne > On Aug 10, 2013, at 2:30 AM, Kris Borchers <kris(a)redhat.com&gt; wrote: > >> Thanks for this thorough review! These are the types of things I wanted to catch by doing a good review myself but just haven't had the time with the release coming. I will gladly go through and fix these when I have time but if you feel up to fixing any of them, patches welcome. ;) >> >> Thanks! >> >> On Aug 9, 2013, at 6:50 PM, Yavuz Selim YILMAZ <yavuzsel(a)buffalo.edu&gt; wrote: >> >>> Hi all, >>> >>> I don't know if this is the correct thread and place to share this. Let me know if it needs to be somewhere else. >>> >>> Tried https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 this branch on my local, and checked with some devices I have over here. The problems listed below from my iPod exists for all devices I tested so far (latest versions of Chrome and Safari for iPod 4th gen and iPhone 5 (on latest iOS), and Chrome and Android Browser for my Nexus S on Android 4.0.4). More tests and devices will come next week if needed. >>> >>> 0) Menu button seems a little bit more far away from the left side. (have no screenshot specific to this one, but check item 2 screenshot below). >>> > > On phone AeroGear logo is centered whereas on web side, logo is on left. It was a 'design' choice (discussed in this thread) > >>> >>> 1) When you tap on the menu icon, it draws a line under the icon. >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0053.PNG > > Agreed. I've just removed the underline on hover. > >>> >>> >>> 2) That line under the menu icon doesn't go away when the menu is closed. >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0054.PNG > > see 1) > >>> >>> >>> 3) The same underline appears for the menu items (but as it loads a new page, it does go with the refresh). >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0058.PNG > > I like the effect here. I think it looks nice. Personal view though. I'll be interested in hearing from Hylke. > >>> >>> >>> 4) When side menu is opened, horizontal scroll bar appears, and it scrolls (in a native app which uses sliding menu like the one we have here, when you tap to the main view area, it closes the menu, but in our site the main view area remains there and functional) >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0062.PNG > > Interesting point. > The menu CSS are from Topcoat. > > Here is an example of menu with Topcoat > http://codepen.io/piatra/pen/ofeDd > > Indeed content is shifted. Is it a real problem the shifted aspect on UX point of view? > If so, another interesting fwk to investigate could be http://sidetap.it/ > >>> >>> >>> 5) Some of the pages doesn't have a mobile scaled view (like javadoc pages and community page). >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0056.PNG > > Community page is a noble embedded iFrame. Nable provide an API to embed forum in web site. Their page is quite responsive until a size that would fit tablet (width 640px) but smaller it doesn't fit anymore. > In the actual aerogear.org, we have the same problem. It would be nice to do better, I've opened a JIRA for this. Ideas welcome. > https://issues.jboss.org/browse/AEROGEAR-1300 > >>> >>> >>> 6) When a page has single word which does not fit to a single line, then horizontal scroll bar comes: >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0061.PNG >>> > > Good catch! > I prefer not to apply break words property (word-break:break-all) on paragraph element in CSS because for normal text it's not nice to break in a middle of a word. I've modified the markdown page for this example and put a spec on application: and didRegister….. (incredible long names in Objective-C). > > As Hylke mentions it for correct usage of <h1>, <h2> I would say the same for long names. Be aware of them in paragraph section. In <pre> section, CSS breaks on words. > >>> 7) Right margin is either not working, or is set to 0 (same for all pages). >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0059.PNG > > Hylke did work on adding extra spaces on his branch. PR to be sent. > >>> >>> >>> 8) Note field seems a little hard to understand when first looked ("Note" header has same font with the note text and "Note" header position is not the best IMO) >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0060.PNG > > Added CSS for [NOTE]. > Table will be display with bold for 'Note' label. label at top of column, > >>> >>> >>> 9) Some links don't make sense to have on mobile (e.g. download links) >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/IMG_0055.PNG > > This brings us to Responsive content. Do we want to deliver the same content for small screen? > I like this post from Bergie: > http://bergie.iki.fi/blog/mobile-first-web/ quoting "Mobile users should get the same content" > Once again, I'd like to have Hylke's view on that point. > If needed we can open a JIRA for this. > >>> >>> 10) (this one is specific to my Android device) Menu items don't appear on Android Browser (fine on Chrome for Android), but the menu works, i.e. when I tap where the item supposed to be, it navigates (and actually the menu items appear while loading the next page, but then again disappear as the next page loads): >>> >>> https://dl.dropboxusercontent.com/u/7848530/aerogear.org/Screenshot_2013-... > > Puzzled on that one > May I ask you which Android you're on? > @passos do you get into same behaviour? > > One thing to know is that the menu is based on Topcoat menu and used CSS3 transition. Browser has to support CSS3 for best rendering. > I've tested on my old android phone (Android 2.3.3), the transition is not applied but you see the menu hovering on top of the page, which is still useable. It's on Nexus S with Android 4.0.4. And it only happens with Android Browser, with Chrome on the same device it works fine. > >>> >>> >>> Regards, >>> >>> --- >>> Yavuz Selim Yilmaz >>> SUNY at Buffalo >>> Computer Science and Engineering >>> PhD Candidate >>> >>> On Aug 7, 2013, at 1:08 PM, Daniel Passos <daniel(a)passos.me&gt; wrote: >>> >>>> +1 for lean. >>>> >>>> >>>> On Wed, Aug 7, 2013 at 9:37 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>> +1 for the link, I've updated the PR >>>> >>>> ++ >>>> Corinne >>>> >>>> On Aug 7, 2013, at 1:51 PM, Kris Borchers <kris(a)redhat.com&gt; wrote: >>>> >>>>> +1 for lean version. >>>>> >>>>> One thing I noticed is that the "Contribute" link just goes to github.com/aerogear. I think it would make more sense to link to http://aerogear.org/docs/guides/Contributing/ and add some info near the top linking to our github organization. Make sense? >>>>> >>>>> On Aug 7, 2013, at 4:51 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>> >>>>>> I like what you did with the "lean" one. >>>>>> There are some spacing changes to make, but overall I prefer that one. >>>>>> >>>>>> Hylke >>>>>> >>>>>> >>>>>> >>>>>> On 07/08/2013 11:39, Corinne Krych wrote: >>>>>>> Hello Guys >>>>>>> >>>>>>> With Hylke we've been discussing footer recently. I\d like to know your view on our site footer. >>>>>>> >>>>>>> Do you prefer the one complete with all news details (knowing we already have a news entry in the menu) ? like below >>>>>>> >>>>>>> https://docs.google.com/file/d/0B3bDL8OwQQUdNVYwTlFIajZ4c2M/edit?usp=sharing >>>>>>> >>>>>>> or a lean one just with links (no contents of news) like: >>>>>>> >>>>>>> https://docs.google.com/file/d/0B3bDL8OwQQUdWjBFU3k5WWEtUk0/edit?usp=sharing >>>>>>> >>>>>>> >>>>>>> Feedback welcome >>>>>>> >>>>>>> ++ >>>>>>> Corinne >>>>>>> >>>>>>> >>>>>>> On Aug 6, 2013, at 6:22 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>>> >>>>>>>> Thanks again! >>>>>>>> I've pushed the fix to my branch now. >>>>>>>> >>>>>>>> Hylke >>>>>>>> >>>>>>>> On 06/08/2013 16:53, Corinne Krych wrote: >>>>>>>>> Hi Hylke >>>>>>>>> >>>>>>>>> Regarding the issue you had on you fork branch, on iPhone/Android browsers of the paragraph being shifted to the right. This issue is caused by this line: >>>>>>>>> https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389 >>>>>>>>> >>>>>>>>> Replace >>>>>>>>> .feature { >>>>>>>>> margin: 0 auto; >>>>>>>>> padding: 1em 3em; >>>>>>>>> max-width: 50em; >>>>>>>>> } >>>>>>>>> by >>>>>>>>> >>>>>>>>> .feature { >>>>>>>>> margin: 0 auto; >>>>>>>>> padding: 1em 1em; >>>>>>>>> max-width: 50em; >>>>>>>>> } >>>>>>>>> and remove margin in: >>>>>>>>> .features { >>>>>>>>> /*margin: 3em auto;*/ >>>>>>>>> } >>>>>>>>> and you should get the spec you wanted. >>>>>>>>> Because you're working border-box, padding is taking extra space out out the box and if there is not enough space in the parent container it expands. One thing I would advise is: when designing your site, test it on real devices on iterative steps as often as possible. >>>>>>>>> >>>>>>>>> ++ >>>>>>>>> Corinne >>>>>>>>> >>>>>>>>> >>>>>>>>> On Aug 5, 2013, at 8:32 PM, Kris Borchers <kborcher(a)redhat.com&gt; wrote: >>>>>>>>> >>>>>>>>>> +0.5 >>>>>>>>>> >>>>>>>>>> I agree the footer was too big but I want to do a full review of all navigation when i get back before saying +1 >>>>>>>>>> >>>>>>>>>> On Aug 5, 2013, at 7:34, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>>>> >>>>>>>>>>> Hi All, >>>>>>>>>>> >>>>>>>>>>> #agreed on icons not being meaningful, we could do hyperlinks with text. >>>>>>>>>>> But to keep footer small, let's not put to much information in the footer. Id you recall we had a huge footer. >>>>>>>>>>> I'd go for a footer that looks like this one: >>>>>>>>>>> http://wildfly.org/ >>>>>>>>>>> >>>>>>>>>>> wdyt? >>>>>>>>>>> >>>>>>>>>>> Corinne >>>>>>>>>>> >>>>>>>>>>> On Aug 5, 2013, at 1:53 PM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>>>>>>> >>>>>>>>>>>> Great! >>>>>>>>>>>> >>>>>>>>>>>> We're nearly there now, I'll fix the remaining issues today. >>>>>>>>>>>> >>>>>>>>>>>> I the use of icons in the footer is problematic. Visitors don't necessarily know what these mean. >>>>>>>>>>>> >>>>>>>>>>>> For example, where would you go if you want to report an issue? Not everyone is familiar with Jira and its logo. (You could hover and get some kind of clue, but you can't do this on touch devices, and it would be annoying) >>>>>>>>>>>> >>>>>>>>>>>> So I think we should revert back to just using text links... The social networks can remain as icons. >>>>>>>>>>>> >>>>>>>>>>>> Thanks, >>>>>>>>>>>> >>>>>>>>>>>> Hylke >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> On 05/08/2013 10:14, Corinne Krych wrote: >>>>>>>>>>>>> Hello All >>>>>>>>>>>>> >>>>>>>>>>>>> @Hylke, I've integrated your comments: >>>>>>>>>>>>> >>>>>>>>>>>>> 1. logo is on left on desktop, centred on phone. I think this was a good comprise to make it look good on desktop and phone. >>>>>>>>>>>>> 2. menu icon is fixed >>>>>>>>>>>>> 3. page padding for paragraph added >>>>>>>>>>>>> 4. I've downloaded the fonts locally and honestly it improved performance when browsing on devices >>>>>>>>>>>>> >>>>>>>>>>>>> I'd like you to revisit the footer icons I've added (doc/jira/email/github/irc). It would be nice if they can look like the twitter/facebook/google+ ones you initially created. wdyt? >>>>>>>>>>>>> >>>>>>>>>>>>> @all, ready for your review guys, PR sent. >>>>>>>>>>>>> >>>>>>>>>>>>> ++ >>>>>>>>>>>>> Corinne >>>>>>>>>>>>> >>>>>>>>>>>>> On Aug 2, 2013, at 10:59 AM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>>>>>>> >>>>>>>>>>>>>> Hi Hylke! >>>>>>>>>>>>>> >>>>>>>>>>>>>> I've answered your comets below. >>>>>>>>>>>>>> >>>>>>>>>>>>>> Taking the latest code in my branch: >>>>>>>>>>>>>> https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>>>>>>> >>>>>>>>>>>>>> I've also proposed a solution to make the footer much smaller. I used images. But, I like to have your designer view on that. >>>>>>>>>>>>>> >>>>>>>>>>>>>> By tonight i hope to have a general feeling for the all site. Stay tune. >>>>>>>>>>>>>> >>>>>>>>>>>>>> Thanks! >>>>>>>>>>>>>> ++ >>>>>>>>>>>>>> Corinne >>>>>>>>>>>>>> >>>>>>>>>>>>>> On Aug 2, 2013, at 10:39 AM, Hylke Bons <hbons(a)redhat.com&gt; wrote: >>>>>>>>>>>>>> >>>>>>>>>>>>>>> Thanks so much for looking into this Corrine! >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> I just had a look at the OpenShift instance. It looks good to me responsiveness-wise. I like the menu behaviour. >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> There are still some minor style issues. If you still have time to look into this that would be great, >>>>>>>>>>>>>>> otherwise I can take a look at these be fore we launch the new style: >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> - Logo is centred on the page, it looks more balanced having it stick to the left. >>>>>>>>>>>>>> >>>>>>>>>>>>>> Funny, personally and specially on phone I found centred logo looks more balance. i remember seeing Passos's comments on this. He actually wanted it centred too. But I guess it's a mater of taste. I can change. let's see others comments. >>>>>>>>>>>>>> >>>>>>>>>>>>>>> - The menu icon is a bit hard to see (I've attached a quick svg with a colour change, would be nice if we could use that and have it not change shape) >>>>>>>>>>>>>> >>>>>>>>>>>>>> I changed the icon with a unicode (triple bar) much easier to see. Pushed all that to my branch. >>>>>>>>>>>>>> >>>>>>>>>>>>>>> - The news headline ("AG 1.0 is out!") is sticking to the right of the page, it would be better if it kept to the right, but still in the middle of the page for large screen setups >>>>>>>>>>>>>>> - The platform icons seem to shift a pixel when you hover them >>>>>>>>>>>>>> >>>>>>>>>>>>>> nice catch will fix that. it gives a bad flickering effect indeed. >>>>>>>>>>>>>> >>>>>>>>>>>>>>> - There's no page padding when scaling down, this makes the text paragraphs harder to read, because they touch the screen edge >>>>>>>>>>>>>>> - Some padding/spacing issue all-round. This is probably because everything was rebased on Boilerplate. >>>>>>>>>>>>>> >>>>>>>>>>>>>> I am actually working on all the other pages. my initial focus was home page. >>>>>>>>>>>>>> >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> I'll try to get a local instance running again and help out with these things. >>>>>>>>>>>>>> >>>>>>>>>>>>>> + 10001 >>>>>>>>>>>>>> Together we'll have much power, thanks! >>>>>>>>>>>>>> >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> Thanks! >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> Hylke >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> On 01/08/2013 06:40, Daniel Bevenius wrote: >>>>>>>>>>>>>>>> Looks nice! >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> On 31 July 2013 18:57, Bruno Oliveira <bruno(a)abstractj.org&gt; wrote: >>>>>>>>>>>>>>>> Thanks Corinne. >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Just tried and deployed on OpenShift http://site-abstractj.rhcloud.com/. Looks really good, I also tested it with http://mattkersley.com/responsive/ >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> I'll try later on Android, IPhone and IPad. >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Thanks for looking at this. >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> On Wed, Jul 31, 2013 at 12:54 PM, Matthias Wessendorf <matzew(a)apache.org&gt; wrote: >>>>>>>>>>>>>>>> pretty cool! >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Just tried your branch and it looks good on my iPhone 4s and on my Galaxy S II. >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> -Matthias >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> On Wed, Jul 31, 2013 at 5:45 PM, Corinne Krych <corinnekrych(a)gmail.com&gt; wrote: >>>>>>>>>>>>>>>> Hello All, >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> We've been talking about redesigning our aerogear.org web site. Hylke has done a great design job. Now, we 'just' want to make it responsive. >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Out of several proposals: >>>>>>>>>>>>>>>> 1. use bootstrap (current version of our site) and apply our custom design >>>>>>>>>>>>>>>> 2. use topcoat css and apply our custom design >>>>>>>>>>>>>>>> 3. use HTML5 boilerplate and apply our custom design and make it responsive >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> I initially started with option 1, which might be overkill for a static site. >>>>>>>>>>>>>>>> Tried option 2, but here too, it seems overkill so ended with option 3. >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Using a blank page, I worked on Home page reapplying Hylke css but: >>>>>>>>>>>>>>>> - removing maximun-scale=1.0 because we want to let people zoom if they wish, >>>>>>>>>>>>>>>> - replacing 'px' unit to use 'em', >>>>>>>>>>>>>>>> - centred logo images, >>>>>>>>>>>>>>>> - making sure width is right otherwise you get screw up with iPhone rotate >>>>>>>>>>>>>>>> - adding media queries (only 2 breakpoints for now, but need to be adjusted with devices tests and your feedbacks) >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> The main points to sort out for UX design is the menu bar and the footer. >>>>>>>>>>>>>>>> To me, footer is too huge, even on desktop, could we remove news? >>>>>>>>>>>>>>>> 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? >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Feedback welcome, >>>>>>>>>>>>>>>> Work in progress in https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285 >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> ++ >>>>>>>>>>>>>>>> Corinne >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> -- >>>>>>>>>>>>>>>> Matthias Wessendorf >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> blog: http://matthiaswessendorf.wordpress.com/ >>>>>>>>>>>>>>>> sessions: http://www.slideshare.net/mwessendorf >>>>>>>>>>>>>>>> twitter: http://twitter.com/mwessendorf >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> -- >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> -- >>>>>>>>>>>>>>>> "The measure of a man is what he does with power" - Plato >>>>>>>>>>>>>>>> - >>>>>>>>>>>>>>>> @abstractj >>>>>>>>>>>>>>>> - >>>>>>>>>>>>>>>> Volenti Nihil Difficile >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> <menu-icon.svg>_______________________________________________ >>>>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>>> >>>>>>>>>>>> _______________________________________________ >>>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>>> >>>>>>>>>>> _______________________________________________ >>>>>>>>>>> aerogear-dev mailing list >>>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>>> _______________________________________________ >>>>>>>>>> aerogear-dev mailing list >>>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> _______________________________________________ >>>>>>>>> aerogear-dev mailing list >>>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>>> >>>>>>>> _______________________________________________ >>>>>>>> aerogear-dev mailing list >>>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>>> >>>>>>> >>>>>>> >>>>>>> _______________________________________________ >>>>>>> aerogear-dev mailing list >>>>>>> aerogear-dev(a)lists.jboss.org >>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>>> >>>>>> _______________________________________________ >>>>>> aerogear-dev mailing list >>>>>> aerogear-dev(a)lists.jboss.org >>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>>> >>>>> _______________________________________________ >>>>> aerogear-dev mailing list >>>>> aerogear-dev(a)lists.jboss.org >>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>> >>>> >>>> _______________________________________________ >>>> aerogear-dev mailing list >>>> aerogear-dev(a)lists.jboss.org >>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>>> >>>> _______________________________________________ >>>> aerogear-dev mailing list >>>> aerogear-dev(a)lists.jboss.org >>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >>> >>> _______________________________________________ >>> aerogear-dev mailing list >>> aerogear-dev(a)lists.jboss.org >>> https://lists.jboss.org/mailman/listinfo/aerogear-dev >> >> _______________________________________________ >> aerogear-dev mailing list >> aerogear-dev(a)lists.jboss.org >> https://lists.jboss.org/mailman/listinfo/aerogear-dev > > _______________________________________________ > aerogear-dev mailing list > aerogear-dev(a)lists.jboss.org > https://lists.jboss.org/mailman/listinfo/aerogear-dev

So, after a very painful and productive sprint, the restyle branch landed master! Congratz to all involved on this, with special thanks to Hylke and Corinne :) There's some small issues reported by Yavuz (which did an amazing review) that we'll address in separate JIRAs \o/