Re: [aerogear-dev] aerogear site restyle

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