<div dir="ltr">I like the lean one ! IMO in the footer there shouldn't be dynamic elements (like a news feeds)<div><br></div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On Wed, Aug 7, 2013 at 11:39 AM, Corinne Krych <span dir="ltr"><<a href="mailto:corinnekrych@gmail.com" target="_blank">corinnekrych@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word"><div>Hello Guys</div><div><br></div><div>With Hylke we've been discussing footer recently. I\d like to know your view on our site footer. </div>
<div><br></div><div>Do you prefer the one complete with all news details (knowing we already have a news entry in the menu) ? like below</div><div><br></div><div><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'">
<span style="text-decoration:underline;letter-spacing:0px"><a href="https://docs.google.com/file/d/0B3bDL8OwQQUdNVYwTlFIajZ4c2M/edit?usp=sharing" target="_blank">https://docs.google.com/file/d/0B3bDL8OwQQUdNVYwTlFIajZ4c2M/edit?usp=sharing</a></span></div>
<div style="margin:0px;font-size:11px;font-family:'Lucida Grande'"><br></div><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'"><span style="font-family:Helvetica;font-size:medium">or a lean one just with links (no contents of news) like:</span></div>
<div style="margin:0px;font-size:11px;font-family:'Lucida Grande'"><br></div><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'"><span style="letter-spacing:0.0px"><a href="https://docs.google.com/file/d/0B3bDL8OwQQUdWjBFU3k5WWEtUk0/edit?usp=sharing" target="_blank">https://docs.google.com/file/d/0B3bDL8OwQQUdWjBFU3k5WWEtUk0/edit?usp=sharing</a></span></div>
</div><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'"><span style="letter-spacing:0.0px"><br></span></div><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'"><span style="letter-spacing:0.0px"><br>
</span></div><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'"><span style="letter-spacing:0.0px">Feedback welcome</span></div><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'">
<span style="letter-spacing:0.0px"><br></span></div><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'"><span style="letter-spacing:0.0px">++</span></div><span class="HOEnZb"><font color="#888888"><div style="margin:0px;font-size:11px;font-family:'Lucida Grande'">
<span style="letter-spacing:0.0px">Corinne</span></div></font></span><div><div class="h5"><div><span style="letter-spacing:0.0px"><br></span></div><br><div><div>On Aug 6, 2013, at 6:22 PM, Hylke Bons <<a href="mailto:hbons@redhat.com" target="_blank">hbons@redhat.com</a>> wrote:</div>
<br><blockquote type="cite">
<div bgcolor="#FFFFFF" text="#000000">
<div>Thanks again!<br>
I've pushed the fix to my branch now.<br>
<br>
Hylke<br>
<br>
On 06/08/2013 16:53, Corinne Krych wrote:<br>
</div>
<blockquote type="cite">
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" target="_blank">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" target="_blank">kborcher@redhat.com</a>>
wrote:</div>
<br>
<blockquote type="cite">
<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" target="_blank">corinnekrych@gmail.com</a>>
wrote:<br>
<br>
</div>
<blockquote type="cite">
<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/" target="_blank">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" target="_blank">hbons@redhat.com</a>>
wrote:</div>
<br>
<blockquote type="cite">
<div bgcolor="#FFFFFF" text="#000000">
<div>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 type="cite">
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 href="mailto:corinnekrych@gmail.com" target="_blank">corinnekrych@gmail.com</a>>
wrote:</div>
<br>
<blockquote type="cite">
<div style="word-wrap:break-word">
<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 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>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 href="mailto:hbons@redhat.com" target="_blank">hbons@redhat.com</a>>
wrote:</div>
<br>
<blockquote type="cite">
<div bgcolor="#FFFFFF" text="#000000">
<div>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>
- 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>-
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>
- 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>
<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>
<br>
Thanks!<br>
<br>
Hylke<br>
<br>
<br>
<br>
On 01/08/2013 06:40,
Daniel Bevenius wrote:<br>
</div>
<blockquote 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 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 href="http://site-abstractj.rhcloud.com/" target="_blank">http://site-abstractj.rhcloud.com/</a>.
Looks really
good, I also
tested it
with <a 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><br>
<br>
<div class="gmail_quote">On
Wed, Jul 31,
2013 at 12:54
PM, Matthias
Wessendorf <span dir="ltr"><<a 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 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 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 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 href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a><br>
<a 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 href="http://matthiaswessendorf.wordpress.com/" target="_blank">http://matthiaswessendorf.wordpress.com/</a><br>
sessions: <a href="http://www.slideshare.net/mwessendorf" target="_blank">http://www.slideshare.net/mwessendorf</a><br>
twitter: <a href="http://twitter.com/mwessendorf" target="_blank">http://twitter.com/mwessendorf</a>
</font></span></div>
<br>
_______________________________________________<br>
aerogear-dev
mailing list<br>
<a href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a><br>
<a 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><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 href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a><br>
<a 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></fieldset>
<br>
<pre>_______________________________________________
aerogear-dev mailing list
<a href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a>
<a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">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 href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a><br>
<a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a></blockquote>
</div>
<br>
</div>
</div>
</blockquote>
</div>
<br>
</div>
<br>
<fieldset></fieldset>
<br>
<pre>_______________________________________________
aerogear-dev mailing list
<a href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a>
<a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">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" target="_blank">aerogear-dev@lists.jboss.org</a><br>
<a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">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" target="_blank">aerogear-dev@lists.jboss.org</a></span><br>
<span><a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">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" target="_blank">aerogear-dev@lists.jboss.org</a><br>
<a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a></blockquote>
</div>
<br>
</div>
<br>
<fieldset></fieldset>
<br>
<pre>_______________________________________________
aerogear-dev mailing list
<a href="mailto:aerogear-dev@lists.jboss.org" target="_blank">aerogear-dev@lists.jboss.org</a>
<a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">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" target="_blank">aerogear-dev@lists.jboss.org</a><br><a href="https://lists.jboss.org/mailman/listinfo/aerogear-dev" target="_blank">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a></blockquote>
</div><br></div></div></div><br>_______________________________________________<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" target="_blank">https://lists.jboss.org/mailman/listinfo/aerogear-dev</a><br></blockquote></div><br></div>