[aerogear-dev] aerogear site restyle

Sebastien Blanc scm.blanc at gmail.com
Wed Aug 7 05:41:47 EDT 2013


I like the lean one ! IMO in the footer there shouldn't be dynamic elements
(like a news feeds)



On Wed, Aug 7, 2013 at 11:39 AM, Corinne Krych <corinnekrych at gmail.com>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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at gmail.com>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 at 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 at 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 at lists.jboss.org
>> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>>
>
>
>
> _______________________________________________
> aerogear-dev mailing listaerogear-dev at lists.jboss.orghttps://lists.jboss.org/mailman/listinfo/aerogear-dev
>
>
>  <menu-icon.svg>_______________________________________________
> aerogear-dev mailing list
> aerogear-dev at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>
>
>
>
>
> _______________________________________________
> aerogear-dev mailing listaerogear-dev at lists.jboss.orghttps://lists.jboss.org/mailman/listinfo/aerogear-dev
>
>
>  _______________________________________________
> aerogear-dev mailing list
> aerogear-dev at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>
>
>   _______________________________________________
> aerogear-dev mailing list
> aerogear-dev at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>
>  _______________________________________________
> aerogear-dev mailing list
> aerogear-dev at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>
>
>
>
> _______________________________________________
> aerogear-dev mailing listaerogear-dev at lists.jboss.orghttps://lists.jboss.org/mailman/listinfo/aerogear-dev
>
>
>  _______________________________________________
> aerogear-dev mailing list
> aerogear-dev at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>
>
>
> _______________________________________________
> aerogear-dev mailing list
> aerogear-dev at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.jboss.org/pipermail/aerogear-dev/attachments/20130807/f8041bfc/attachment-0001.html 


More information about the aerogear-dev mailing list