From mboxrd@z Thu Jan 1 00:00:00 1970 From: Michael Tremer To: ipfire-artwork@lists.ipfire.org Subject: Re: [IPFire Artwork] Website Date: Tue, 11 Apr 2017 11:26:16 +0100 Message-ID: <1491906376.11653.18.camel@ipfire.org> In-Reply-To: <66AFDE10-5F27-4D4A-BFE4-11770ED84F4D@posteo.de> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============9081339146354569783==" List-Id: --===============9081339146354569783== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable 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 stati= ng 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 do= ne 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? >=20 >=20 > > On 9. Apr 2017, at 14:40, Maurice Gesswein wrot= e: > >=20 > > 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 pix= el- > > size is 24x24px. > >=20 > > On Fri, Apr 7, 2017 at 4:40 PM, Sven wrote: > > > there are some strange bugs with flex and webkit. I=E2=80=99m not sure = if they > > > come from Bootstrap or are real bugs in Webkit, but I think that I can > > > workaround them. > > >=20 > > >=20 > > > > On 7. Apr 2017, at 12:01, Michael Tremer > > > wrote: > > > > > > > > Hi, > > > > > > > > I just updated the dev site. > > > > > > > > I will run a job that does this automatically once an hour from now o= n. > > > > > > > > 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" : > > > >> @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/c= ode > > > /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 sca= le > > > 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 y= ou > > > will > > > >> see the difference. > > > >> > > > >> > > > >> > > > >> > > > >>> On 6. Apr 2017, at 15:19, Sven wrote: > > > >>> > > > >>> > > > >>>> On 6. Apr 2017, at 14:19, Michael Tremer > > > >>>> 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=E2=80=99t look at any other page except the homepage and to = me it=E2=80=99s not > > > clear > > > >>> which page get a complete new layout and which page get only the > > > =E2=80=9Cstyle- > > > >>> update=E2=80=9D. > > > >>> > > > >>>> 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=E2=80=99t look right to yo= u are the > > > same > > > >>> for Maurice. > > > >>> > > > >>> @Michael can you create the ticket? I=E2=80=99m not sure in which c= ategory 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 Zepli= n. > > > At > > > >>>>> the > > > >>>>> thumbnails they look good, when you open a screen they doesn't. G= ood > > > >>>>> 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 hei= ght > > > 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. B= ut > > > 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 wro= te: > > > >>>>>> 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 > > 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: > > > >>>>>>>=C2=A0 =C2=A0http://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=E2=80=99m thinkin=E2=80=99 that the coding of the home page= has reached a > > > >>>>>>>>> point where > > > >>>>>> we > > > >>>>>>>>> need the site live to discuss. > > > >>>>>>>> > > > >>>>>>>> Great! > > > >>>>>>>> > > > >>>>>>>>> It=E2=80=99s not pixel perfect, the mobile menu is only the b= ootstrap > > > >>>>>>>>> version > > > >>>>>> from > > > >>>>>>>>> top > > > >>>>>>>>> down and not from the left like in the mookups, the SCSS code= is > > > >>>>>>>>> still > > > >>>>>> very > > > >>>>>>>>> chaotic, the image-scaling dosen=E2=80=99t work like expected= and the > > > >>>>>>>>> svg > > > >>>>>> scaling > > > >>>>>>>>> dosen=E2=80=99t work at all in Safari, but it=E2=80=99s good = enough to have a > > > >>>>>> conversation. > > > >>>>>>>>> @Michael it is possible to include html markup between these > > > >>>>>>>>> brackets {{ > > > >>>>>>>>> _("IPFire") }} for example {{ _(=E2=80=9CIPFire") }} > > > >>>>>>>> > > > >>>>>>>> No. The translation function escapes all HTML. > > > >>>>>>>> > > > >>>>>>>>> @Maurice I have troubles with the colours, in zeplin for exam= ple > > > >>>>>>>>> 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 > > > >> > > >=20 > > >=20 >=20 >=20 --===============9081339146354569783== Content-Type: application/pgp-signature Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename="signature.asc" MIME-Version: 1.0 LS0tLS1CRUdJTiBQR1AgU0lHTkFUVVJFLS0tLS0KVmVyc2lvbjogR251UEcgdjIKCmlRSWNCQUFC Q2dBR0JRSlk3SzlJQUFvSkVJQjU4UDl2a0FrSEFJY1AvajZlMCsvUTFLYUd4c3lkNTlCc0RDYzMK aE81UU16cUpnNEpxQW14c2hVMGdHazRQbmJieldkZ1pJS0tGMEhhYXJpSnFNL3M0QjJkSUloL20y ZlZqOXJqMwpQK0ZadnpCQUkrZFFHZWJUNWlEZ1l4a3ZoaXhob3owNzZ1blBCd0haNnl0L1RBUnVw cks4VGNOZlJkd3pWV1BaCjhSSHRxblErSTlpdTdNRURJVGdJTzZoUjlkZkEreG10Rk9lZ1U0Z1lR MWlOZXRGR01iWmRhRnROeTJkOVgrZkYKenIyeDZ4cDcyazhyaDBwR1FObGJnYkt1RENySXNGRXpY SFlSVDByazhpYjhZTHdtSGRibDAzNnlRY0lvak9FQgowVG0wVzBjUVFwN3VXbU5Gamt6VWNaQnpM VVFBd3FMQlNBUWlNd3MrMU85T3hxV0pBY1U3cUYyTHJIdHhJTjZjCjByU28xcGRIc0RFaXYwcncy SlBkQndMR3kvSjcyL3FWeGJ1YkxSOWtVOTlSaFVXZjVnZi9xYjlINGNMakY1VkkKcm1Cb2NrOElQ bG9FeDA2Y1lpNFkrR05OVTAwQmVkWU5KSUx3TnhJenYvV252RkNaMlZnZFp2eFZmWUdYeVNIQgp2 VFZRSFZHQlVzVThpenIweC9KT0M1QWJlVkJGZDZ6MllFclV1azZlL28zMjI2UFhxN1lTRlRYcGU4 bDFPbG9WCktNZVlWY2M4cXY2eWxQUXFTOEtiM3UwT0FVZmlKc0xrYldwTjliUzEwZjVvZUh0aHdm NXpqcmJZUHBjdnZGME4KN0tjbWlWK2JMdUdVZm1oczMvenFTUXNPazNqMGxqR0xvOFdML00xN3ZN Tkk2OTI1QjBIQTNraTFTcHZhNDR3bgpzaVlqVVhWcU1pdjU3WUlPMkd6cAo9d3dsdgotLS0tLUVO RCBQR1AgU0lHTkFUVVJFLS0tLS0K --===============9081339146354569783==--