[aerogear-dev] aerogear site restyle
Hylke Bons
hbons at redhat.com
Tue Aug 6 12:22:52 EDT 2013
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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.jboss.org/pipermail/aerogear-dev/attachments/20130806/b44a400c/attachment-0001.html
More information about the aerogear-dev
mailing list