[IPFire Artwork] Website

Michael Tremer michael.tremer at ipfire.org
Tue Apr 11 12:26:16 CEST 2017


Hi,

so finally I took the time and had a close look at the current version of the
website and I really really really like it so far.

For me it mainly has some sort of soul. The old website was just blank and
didn't really present things very well. It just delivered the plain content.

Very well done guys.

But this is only the start :) There is more ahead and I am really looking
forward to present everything to our community soon!

----

What I at the moment don't get from the website when I open it is that this is
saying "firewall" in any sense. I don't mean just the word but visually stating
this anywhere.

It is not a big issue for me but at least in the block below we have to make
this clearer what IPFire actually is. This doesn't have much to do with the
design. This is just content.

After a general introduction the reader gets to the latest news!

And then how to support the project and contribute (at least financially here).

Good flow.

----

Overall I could not find any issues with the implementation so far.

The mobile views look good. Most of the stuff that I do not like is content. We
have to update this a bit.

One thing is that the arrow at the bottom of the page that scrolls it down
becomes invisible when hovering over it. Maybe it should become white when the
background changes to red?

And in the Wishlist section there is a line that says "86% funded" over the
headline of the crowd funding name. This is a slightly lighter grey than the
background and practically invisible.

The link to the "Features" page is wrong on the top view. It points to: http://d
ev.ipfire.org/featues (an r is missing).

----

Regarding code:

The CSS seems to be quite small (I like that a lot). However, how would that get
translated from SCSS to CSS? Could you modify the Makefile so that this is done
automatically when ever something has changed or so? I am not even sure what
tools are required to build the CSS. Can we document that somehwere, too?

We need to do a spring clean then. Will we continue to use Font Awesome icons or
the glyphicons? If not, bin them.

----

So I think we are very close to consider the frontpage done. What are the next
steps?

-Michael

On Tue, 2017-04-11 at 07:09 +0200, Sven wrote:
> Hello,
> I updated the icons on the site.
> What else is wrong or to change?
> 
> 
> > On 9. Apr 2017, at 14:40, Maurice Gesswein <zerpixelung at gmail.com> wrote:
> > 
> > Sorry for the delay. I fixed the slice area for the icons. Sven, please
> > export all of those again. All of them have now a square size. Source pixel-
> > size is 24x24px.
> > 
> > On Fri, Apr 7, 2017 at 4:40 PM, Sven <sven.hoehn at posteo.de> wrote:
> > > there are some strange bugs with flex and webkit. I’m not sure if they
> > > come from Bootstrap or are real bugs in Webkit, but I think that I can
> > > workaround them.
> > > 
> > > 
> > > > On 7. Apr 2017, at 12:01, Michael Tremer <michael.tremer at ipfire.org>
> > > wrote:
> > > >
> > > > Hi,
> > > >
> > > > I just updated the dev site.
> > > >
> > > > I will run a job that does this automatically once an hour from now on.
> > > >
> > > > Icons won't load at the moment... :(
> > > >
> > > > -Michael
> > > >
> > > > On Fri, 2017-04-07 at 08:11 +0200, Maurice Gesswein wrote:
> > > >>
> > > >>
> > > >> Am 06.04.2017 10:52 nachm. schrieb "Sven" <sven.hoehn at posteo.de>:
> > > >> @Michael can you please update the files for the dev website with the
> > > new
> > > >> commit?
> > > >>
> > > >> I correct a part of the errors written down by Maurice.
> > > >> Also edit the icons but now I have complete control with CSS but the
> > > sizes are
> > > >> not right, have to check the SVG code for that. (https://fvsch.com/code
> > > /svg-ic
> > > >> ons/how-to/)
> > > >>
> > > >> Seems to be that I was not clear enough, sorry. I provided the icons in
> > > a
> > > >> wrong way. I'll send corrected icons at 24x24 this evening. Just scale
> > > the
> > > >> existing icons to a square will not work as expected. The optical
> > > proportions
> > > >> will be lost. Feel free to compare them with the existing ones and you
> > > will
> > > >> see the difference.
> > > >>
> > > >>
> > > >>
> > > >>
> > > >>> On 6. Apr 2017, at 15:19, Sven <sven.hoehn at posteo.de> wrote:
> > > >>>
> > > >>>
> > > >>>> On 6. Apr 2017, at 14:19, Michael Tremer <michael.tremer at ipfire.org>
> > > >>>> wrote:
> > > >>>>
> > > >>>> First of all loads of thanks to you two for working on this. This is
> > > >>>> really
> > > >>>> coming along looking awesome.
> > > >>>>
> > > >>>> How do we fix the "visual bugs" now?
> > > >>>
> > > >>> Good question,
> > > >>>
> > > >>>> I am not really on the same page with what should be finished now and
> > > what
> > > >>>> not.
> > > >>>> Many pages look broken and I assume you just have not been working on
> > > >>>> these, yet
> > > >>>> :)
> > > >>>
> > > >>> I didn’t look at any other page except the homepage and to me it’s not
> > > clear
> > > >>> which page get a complete new layout and which page get only the
> > > “style-
> > > >>> update”.
> > > >>>
> > > >>>> And I have some smaller things that don't seem to look right in
> > > Firefox.
> > > >>>> Is this
> > > >>>> the right time to collect these, yet?
> > > >>>
> > > >>> Yes. But let us open a ticket on the bug tracker for the webpage.
> > > >>> I think that some of the things that don’t look right to you are the
> > > same
> > > >>> for Maurice.
> > > >>>
> > > >>> @Michael can you create the ticket? I’m not sure in which category it
> > > goes.
> > > >>> Thanks.
> > > >>>
> > > >>>> -Michael
> > > >>>>
> > > >>>> On Wed, 2017-04-05 at 23:02 +0200, Maurice Gesswein wrote:
> > > >>>>> First output looks very promising for me. Thanks Sven!
> > > >>>>>
> > > >>>>> It seems to be that something went weird with the colors at Zeplin.
> > > At
> > > >>>>> the
> > > >>>>> thumbnails they look good, when you open a screen they doesn't. Good
> > > >>>>> news: Hex
> > > >>>>> codes are correct! :) I'll figure out what went wrong and perhaps I
> > > >>>>> found
> > > >>>>> another tool like Zeplin which can be archived by Michael ;p Stay
> > > tuned,
> > > >>>>> still
> > > >>>>> checking the feature set.
> > > >>>>>
> > > >>>>> Next thing is that Zeplin interprets the properties of e.g. a font
> > > >>>>> correct but
> > > >>>>> might be unclear for others. Please use the properties ABOVE the CSS
> > > box
> > > >>>>> as
> > > >>>>> the primary information about the selected element. Than your
> > > mentioned
> > > >>>>> opacity issue should be clear. The colors should look like this:
> > > rgba(0,
> > > >>>>> 0, 0,
> > > >>>>> 0.6).
> > > >>>>>
> > > >>>>>
> > > >>>>> I found several things I would like to fix:
> > > >>>>> I noticed that I have to build up the Sketch file in a different way
> > > >>>>> that
> > > >>>>> icons will be exported correct as 24x24px size. At the moment they
> > > are
> > > >>>>> cropped. At their proper size of 24x24px it will be a lot easier to
> > > >>>>> align
> > > >>>>> those vertically correct. I'll update the Icon screen asap.
> > > >>>>> Please recheck all opacity values. A lot of them are not correct. I
> > > >>>>> guess
> > > >>>>> that's due to the CSS output of Zeplin and how I set up the Sketch
> > > file.
> > > >>>>> Use
> > > >>>>> the values which are shown above the CSS box.
> > > >>>>> Please also recheck the line-heights of each font-style. Some of
> > > them
> > > >>>>> has
> > > >>>>> strange values.
> > > >>>>> Font weight on buttons should be medium/600.
> > > >>>>> Ghost buttons doesn't have dropshadows
> > > >>>>> Lots of elements become smaller at <992px width. That should not
> > > >>>>> happens.
> > > >>>>> It seems to be that the gaps of the grid were not set to 24px
> > > instead of
> > > >>>>> 30px.
> > > >>>>> Aren't they? If this would cause too much trouble, we can leave it
> > > as it
> > > >>>>> is.
> > > >>>>> It doesn't have a bad impact.
> > > >>>>> "Fire" of IPFire in the top navigation is not bold/medium
> > > >>>>> The buttons has lots of different heights. Please set a fixed height
> > > of
> > > >>>>> 36 for
> > > >>>>> default buttons and 48px for big buttons
> > > >>>>> The touch target area is missing at the default buttons (48px
> > > height).
> > > >>>>> That's
> > > >>>>> important to provide a good user experience at touch devices. The
> > > >>>>> clickable
> > > >>>>> area must be big enough that fat finger hits it the first time ;)
> > > >>>>> At viewport <992px the burger icon is not left aligned anymore. But
> > > you
> > > >>>>> already said that you doesn't spend much time at the navigation so
> > > far.
> > > >>>>> Some more minor issues... But for now it should be enough to fix :)
> > > >>>>>
> > > >>>>> Do we want to set up a Trello board for all these and upcoming
> > > todos?
> > > >>>>> I'm also
> > > >>>>> fine by using Git issues for that.
> > > >>>>>
> > > >>>>> Best,
> > > >>>>> Maurice
> > > >>>>>
> > > >>>>> On Wed, Apr 5, 2017 at 8:02 PM, Sven <sven.hoehn at posteo.de> wrote:
> > > >>>>>> and now how we proceed?
> > > >>>>>>
> > > >>>>>> Are you writing down a list with all the things to change?
> > > >>>>>>
> > > >>>>>> Do we talk so that everybody express what he thinks and what to
> > > >>>>>> change?
> > > >>>>>>
> > > >>>>>>
> > > >>>>>>> On 5. Apr 2017, at 19:55, Michael Tremer <michael.tremer at ipfire.or
> > > g>
> > > >>>>>> wrote:
> > > >>>>>>> Hi,
> > > >>>>>>>
> > > >>>>>>> it is all up on http://dev.ipfire.org
> > > >>>>>>>
> > > >>>>>>> If you want to view fireinfo, just add the "dev" to the domain.
> > > For
> > > >>>>>> example:
> > > >>>>>>>   http://fireinfo.dev.ipfire.org
> > > >>>>>>>
> > > >>>>>>> Do the same for planet, wishlist, etc...
> > > >>>>>>>
> > > >>>>>>> -Michael
> > > >>>>>>>
> > > >>>>>>> On Wed, 2017-04-05 at 18:11 +0100, Michael Tremer wrote:
> > > >>>>>>>> Hi,
> > > >>>>>>>>
> > > >>>>>>>> On Tue, 2017-04-04 at 22:18 +0200, Sven wrote:
> > > >>>>>>>>> Hello everybody,
> > > >>>>>>>>> I’m thinkin’ that the coding of the home page has reached a
> > > >>>>>>>>> point where
> > > >>>>>> we
> > > >>>>>>>>> need the site live to discuss.
> > > >>>>>>>>
> > > >>>>>>>> Great!
> > > >>>>>>>>
> > > >>>>>>>>> It’s not pixel perfect, the mobile menu is only the bootstrap
> > > >>>>>>>>> version
> > > >>>>>> from
> > > >>>>>>>>> top
> > > >>>>>>>>> down and not from the left like in the mookups, the SCSS code is
> > > >>>>>>>>> still
> > > >>>>>> very
> > > >>>>>>>>> chaotic, the image-scaling dosen’t work like expected and the
> > > >>>>>>>>> svg
> > > >>>>>> scaling
> > > >>>>>>>>> dosen’t work at all in Safari, but it’s good enough to have a
> > > >>>>>> conversation.
> > > >>>>>>>>> @Michael it is possible to include html markup between these
> > > >>>>>>>>> brackets {{
> > > >>>>>>>>> _("IPFire") }} for example {{ _(“IP<strong>Fire</strong>") }}
> > > >>>>>>>>
> > > >>>>>>>> No. The translation function escapes all HTML.
> > > >>>>>>>>
> > > >>>>>>>>> @Maurice I have troubles with the colours, in zeplin for example
> > > >>>>>>>>> the
> > > >>>>>>>>> background is $blue_grey_900 but with a opacity of 0.6 when I
> > > >>>>>>>>> put the
> > > >>>>>> same
> > > >>>>>>>>> values in my css the colour seems darker.
> > > >>>>>>>>> But its easier to go all of these details when you see it in
> > > >>>>>>>>> your
> > > >>>>>> browser.
> > > >>>>>>>>> Greetings,
> > > >>>>>>>>> Sven
> > > >>>>>>>>
> > > >>>>>>>> -Michael
> > > >>
> > > 
> > > 
> 
> 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 819 bytes
Desc: This is a digitally signed message part
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20170411/8a34b418/attachment.sig>


More information about the IPFire-Artwork mailing list