[aerogear-dev] aerogear site restyle
Hylke Bons
hbons at redhat.com
Wed Aug 7 05:51:09 EDT 2013
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 at redhat.com
> <mailto: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
>>> <mailto: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
>>>> <mailto: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
>>>>> <mailto: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 <mailto: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
>>>>>>>> <mailto: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
>>>>>>>>>> <mailto: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 <mailto: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
>>>>>>>>>> <mailto:corinnekrych at 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 at lists.jboss.org
>>>>>>>>>> <mailto: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
>>>>>>>>>> <mailto: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
>>>>>>>>>> <mailto: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
>>>>>>>>>
>>>>>>>>> <menu-icon.svg>_______________________________________________
>>>>>>>>> aerogear-dev mailing list
>>>>>>>>> aerogear-dev at lists.jboss.org <mailto: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 <mailto:aerogear-dev at lists.jboss.org>
>>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>>>>>
>>>>> _______________________________________________
>>>>> aerogear-dev mailing list
>>>>> aerogear-dev at lists.jboss.org <mailto:aerogear-dev at lists.jboss.org>
>>>>> https://lists.jboss.org/mailman/listinfo/aerogear-dev
>>>> _______________________________________________
>>>> aerogear-dev mailing list
>>>> aerogear-dev at lists.jboss.org <mailto: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 <mailto: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/69835b40/attachment-0001.html
More information about the aerogear-dev
mailing list