<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Hi Hylke<div><br></div><div>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: </div><div><a href="https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389">https://github.com/hbons/aerogear.org/blob/AEROGEAR-1285/css/main.css#L389</a></div><div><br></div><div>Replace</div><div><pre style="word-wrap: break-word; white-space: pre-wrap; "><font face="Helvetica">.feature {
margin: 0 auto;
padding: 1em 3em;
max-width: 50em;
}</font>
</pre></div><div>by</div><div><br></div><div><pre style="word-wrap: break-word; white-space: pre-wrap; "><font face="Helvetica">.feature {
margin: 0 auto;
padding: 1em 1em;
max-width: 50em;
}</font></pre><pre style="word-wrap: break-word; white-space: pre-wrap; "><font face="Helvetica">and remove margin in:</font></pre><pre style="word-wrap: break-word; "><font face="Helvetica"><span style="white-space: pre-wrap;">.features {
/*margin: 3em auto;*/
}
</span></font></pre><div><font face="Helvetica">and you should get the spec you wanted.</font></div><div>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. </div></div><div><br></div><div>++</div><div>Corinne</div><div><br></div><div><br><div><div>On Aug 5, 2013, at 8:32 PM, Kris Borchers <<a href="mailto:kborcher@redhat.com">kborcher@redhat.com</a>> wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><meta http-equiv="content-type" content="text/html; charset=utf-8"><div dir="auto"><div>+0.5 </div><div><br></div><div>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</div><div><br>On Aug 5, 2013, at 7:34, Corinne Krych <<a href="mailto:corinnekrych@gmail.com">corinnekrych@gmail.com</a>> wrote:<br><br></div><blockquote type="cite"><meta http-equiv="Content-Type" content="text/html charset=iso-8859-1"><div>Hi All,</div><div><br></div>#agreed on icons not being meaningful, we could do hyperlinks with text. <div>But to keep footer small, let's not put to much information in the footer. Id you recall we had a huge footer.<div>I'd go for a footer that looks like this one:<div><a href="http://wildfly.org/">http://wildfly.org/</a><br><div><div><br></div><div>wdyt?</div><div><br></div><div>Corinne</div><div><br></div><div>On Aug 5, 2013, at 1:53 PM, Hylke Bons <<a href="mailto:hbons@redhat.com">hbons@redhat.com</a>> wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<div bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix">Great!<br>
<br>
We're nearly there now, I'll fix the remaining issues today.<br>
<br>
I the use of icons in the footer is problematic. Visitors don't
necessarily know what these mean.<br>
<br>
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)<br>
<br>
So I think we should revert back to just using text links... The
social networks can remain as icons.<br>
<br>
Thanks,<br>
<br>
Hylke<br>
<br>
<br>
On 05/08/2013 10:14, Corinne Krych wrote:<br>
</div>
<blockquote cite="mid:5E931126-FFD2-4310-89C6-394895F23D65@gmail.com" type="cite">
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
Hello All
<div><br>
</div>
<div>@Hylke, I've integrated your comments:</div>
<div><br>
</div>
<div>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.</div>
<div>2. menu icon is fixed</div>
<div>3. page padding for paragraph added</div>
<div>4. I've downloaded the fonts locally and honestly it improved
performance when browsing on devices </div>
<div><br>
</div>
<div>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?</div>
<div><br>
</div>
<div>@all, ready for your review guys, PR sent. </div>
<div><br>
</div>
<div>++</div>
<div>Corinne</div>
<div><br>
<div>
<div>On Aug 2, 2013, at 10:59 AM, Corinne Krych <<a moz-do-not-send="true" href="mailto:corinnekrych@gmail.com">corinnekrych@gmail.com</a>>
wrote:</div>
<br class="Apple-interchange-newline">
<blockquote type="cite">
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<div style="word-wrap: break-word; -webkit-nbsp-mode: space;
-webkit-line-break: after-white-space; ">
<div>Hi Hylke!</div>
<div><br>
</div>
I've answered your comets below.
<div><br>
</div>
<div>Taking the latest code in my branch:</div>
<div><a moz-do-not-send="true" href="https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285">https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285</a></div>
<div><br>
</div>
<div>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.</div>
<div><br>
</div>
<div>By tonight i hope to have a general feeling for the
all site. Stay tune.</div>
<div><br>
</div>
<div>Thanks!</div>
<div>++</div>
<div>Corinne</div>
<div><br>
<div>
<div>On Aug 2, 2013, at 10:39 AM, Hylke Bons <<a moz-do-not-send="true" href="mailto:hbons@redhat.com">hbons@redhat.com</a>>
wrote:</div>
<br class="Apple-interchange-newline">
<blockquote type="cite">
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<div bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix">Thanks so much for
looking into this Corrine!<br>
<br>
I just had a look at the OpenShift instance. It
looks good to me responsiveness-wise. I like the
menu behaviour.<br>
<br>
There are still some minor style issues. If you
still have time to look into this that would be
great,<br>
otherwise I can take a look at these be fore we
launch the new style:<br>
<br>
- Logo is centred on the page, it looks more
balanced having it stick to the left.<br>
</div>
</div>
</blockquote>
<div><br>
</div>
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.</div>
<div><br>
<blockquote type="cite">
<div bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix"> - 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)<br>
</div>
</div>
</blockquote>
<div><br>
</div>
<div>I changed the icon with a unicode (triple bar)
much easier to see. Pushed all that to my branch.</div>
<br>
<blockquote type="cite">
<div bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix">- 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<br>
- The platform icons seem to shift a pixel when
you hover them<br>
</div>
</div>
</blockquote>
<div><br>
</div>
<div>nice catch will fix that. it gives a bad
flickering effect indeed.</div>
<br>
<blockquote type="cite">
<div bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix"> - There's no page
padding when scaling down, this makes the text
paragraphs harder to read, because they touch
the screen edge<br>
- Some padding/spacing issue all-round. This is
probably because everything was rebased on
Boilerplate.<br>
</div>
</div>
</blockquote>
<div><br>
</div>
I am actually working on all the other pages. my
initial focus was home page.</div>
<div><br>
</div>
<div>
<blockquote type="cite">
<div bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix"> <br>
I'll try to get a local instance running again
and help out with these things.<br>
</div>
</div>
</blockquote>
<div><br>
</div>
+ 10001</div>
<div>Together we'll have much power, thanks!</div>
<div><br>
<blockquote type="cite">
<div bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix"> <br>
Thanks!<br>
<br>
Hylke<br>
<br>
<br>
<br>
On 01/08/2013 06:40, Daniel Bevenius wrote:<br>
</div>
<blockquote cite="mid:CAFJm-3EH3pPMfk3iSZ+91-RocK48C0F1WXTtZnnEZShHeQhE2A@mail.gmail.com" type="cite">
<div dir="ltr">Looks nice!</div>
<div class="gmail_extra"><br>
<br>
<div class="gmail_quote">On 31 July 2013
18:57, Bruno Oliveira <span dir="ltr"><<a moz-do-not-send="true" href="mailto:bruno@abstractj.org" target="_blank">bruno@abstractj.org</a>></span>
wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px
#ccc solid;padding-left:1ex">
<div dir="ltr">Thanks Corinne.
<div><br>
</div>
<div>Just tried and deployed on
OpenShift <a moz-do-not-send="true" href="http://site-abstractj.rhcloud.com/" target="_blank">http://site-abstractj.rhcloud.com/</a>.
Looks really good, I also tested it
with <a moz-do-not-send="true" href="http://mattkersley.com/responsive/" target="_blank">http://mattkersley.com/responsive/</a></div>
<div><br>
</div>
<div>I'll try later on Android, IPhone
and IPad.</div>
<div><br>
</div>
<div>Thanks for looking at this.</div>
</div>
<div class="gmail_extra">
<div>
<div class="h5"><br>
<br>
<div class="gmail_quote">On Wed, Jul
31, 2013 at 12:54 PM, Matthias
Wessendorf <span dir="ltr"><<a moz-do-not-send="true" href="mailto:matzew@apache.org" target="_blank">matzew@apache.org</a>></span>
wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0
.8ex;border-left:1px #ccc
solid;padding-left:1ex">
<div dir="ltr">pretty cool!
<div><br>
</div>
<div>Just tried your branch
and it looks good on my
iPhone 4s and on my Galaxy S
II.</div>
<div><br>
</div>
<div><br>
</div>
<div>-Matthias</div>
</div>
<div class="gmail_extra"><br>
<br>
<div class="gmail_quote">
<div> On Wed, Jul 31, 2013
at 5:45 PM, Corinne Krych
<span dir="ltr"><<a moz-do-not-send="true" href="mailto:corinnekrych@gmail.com" target="_blank">corinnekrych@gmail.com</a>></span>
wrote:<br>
</div>
<blockquote class="gmail_quote" style="margin:0 0 0
.8ex;border-left:1px #ccc
solid;padding-left:1ex">
<div>
<div>
<div style="word-wrap:break-word">Hello
All,
<div><br>
</div>
<div>We've been
talking about
redesigning our <a moz-do-not-send="true" href="http://aerogear.org/" target="_blank">aerogear.org</a>
web site. Hylke
has done a great
design job. Now,
we 'just' want to
make it
responsive.</div>
<div><br>
</div>
<div>Out of several
proposals:</div>
<div>1. use
bootstrap (current
version of our
site) and apply
our custom design </div>
<div>2. use topcoat
css and apply our
custom design</div>
<div>3. use HTML5
boilerplate and
apply our custom
design and make it
responsive</div>
<div><br>
</div>
<div>I initially
started with
option 1, which
might be overkill
for a static
site. </div>
<div>Tried option 2,
but here too, it
seems overkill so
ended with option
3.</div>
<div><br>
</div>
<div>Using a blank
page, I worked on
Home page
reapplying Hylke
css but:</div>
<div>- removing
maximun-scale=1.0
because we want to
let people zoom if
they wish, </div>
<div>- replacing
'px' unit to use
'em', </div>
<div>- centred logo
images,</div>
<div>- making sure
width is right
otherwise you get
screw up with
iPhone rotate</div>
<div>- adding media
queries (only 2
breakpoints for
now, but need to
be adjusted with
devices tests and
your feedbacks)</div>
<div><br>
</div>
<div>The main points
to sort out for UX
design is the menu
bar and the
footer. </div>
<div>To me, footer
is too huge, even
on desktop, could
we remove news? </div>
<div>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?</div>
<div><br>
</div>
<div>Feedback
welcome,</div>
<div>Work in
progress in <a moz-do-not-send="true" href="https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285" target="_blank">https://github.com/corinnekrych/aerogear.org/tree/AEROGEAR-1285</a></div>
<div><br>
</div>
<div>++</div>
<span><font color="#888888">
<div>Corinne</div>
</font></span></div>
<br>
</div>
</div>
<div>_______________________________________________<br>
aerogear-dev mailing
list<br>
<a moz-do-not-send="true" href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a><br>
<a moz-do-not-send="true" href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a><br>
</div>
</blockquote>
</div>
<span><font color="#888888"><br>
<br clear="all">
<div><br>
</div>
-- <br>
Matthias Wessendorf <br>
<br>
blog: <a moz-do-not-send="true" href="http://matthiaswessendorf.wordpress.com/" target="_blank">http://matthiaswessendorf.wordpress.com/</a><br>
sessions: <a moz-do-not-send="true" href="http://www.slideshare.net/mwessendorf" target="_blank">http://www.slideshare.net/mwessendorf</a><br>
twitter: <a moz-do-not-send="true" href="http://twitter.com/mwessendorf" target="_blank">http://twitter.com/mwessendorf</a>
</font></span></div>
<br>
_______________________________________________<br>
aerogear-dev mailing list<br>
<a moz-do-not-send="true" href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a><br>
<a moz-do-not-send="true" href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a><br>
</blockquote>
</div>
<br>
<br clear="all">
<div><br>
</div>
-- <br>
<div><br>
</div>
</div>
</div>
<span class="HOEnZb"><font color="#888888">-- <br>
"The measure of a man is what he
does with power" - Plato<br>
-<br>
@abstractj<br>
-<br>
Volenti Nihil Difficile </font></span></div>
<br>
_______________________________________________<br>
aerogear-dev mailing list<br>
<a moz-do-not-send="true" href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a><br>
<a moz-do-not-send="true" href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a><br>
</blockquote>
</div>
<br>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
aerogear-dev mailing list
<a moz-do-not-send="true" class="moz-txt-link-abbreviated" href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a>
<a moz-do-not-send="true" class="moz-txt-link-freetext" href="https://lists.jboss.org/mailman/listinfo/aerogear-dev">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a></pre>
</blockquote>
<br>
</div>
<span><menu-icon.svg></span>_______________________________________________<br>
aerogear-dev mailing list<br>
<a moz-do-not-send="true" href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a><br>
<a moz-do-not-send="true" href="https://lists.jboss.org/mailman/listinfo/aerogear-dev">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a></blockquote>
</div>
<br>
</div>
</div>
</blockquote>
</div>
<br>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
aerogear-dev mailing list
<a class="moz-txt-link-abbreviated" href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a>
<a class="moz-txt-link-freetext" href="https://lists.jboss.org/mailman/listinfo/aerogear-dev">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a></pre>
</blockquote>
<br>
</div>
_______________________________________________<br>aerogear-dev mailing list<br><a href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a><br><a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a></blockquote></div><br></div></div></div></blockquote><blockquote type="cite"><span>_______________________________________________</span><br><span>aerogear-dev mailing list</span><br><span><a href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a></span><br><span><a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a></span></blockquote></div>_______________________________________________<br>aerogear-dev mailing list<br><a href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a><br>https://lists.jboss.org/mailman/listinfo/aerogear-dev</blockquote></div><br></div></body></html>