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:
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> 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> 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> 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>
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> 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>
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> 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> 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