From mboxrd@z Thu Jan 1 00:00:00 1970 From: Michael Tremer To: ipfire-artwork@lists.ipfire.org Subject: Re: [IPFire Artwork] Design Request | Captive Portal Date: Wed, 03 Feb 2016 13:53:29 +0000 Message-ID: <1454507609.10195.7.camel@ipfire.org> In-Reply-To: MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============5799063174466346898==" List-Id: --===============5799063174466346898== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 8bit Hi, sorry for not getting back earlier... On Mon, 2016-02-01 at 23:23 +0100, Maurice Gesswein wrote: > Hi, > > attached you find design/layout suggestions for all mentioned captive > portal websites. It looks great! > Some notes: > The layout is always the same. You are able to build one template > which can used for every site. That is handy. > The layout is very responsive friendly (smartphone, tablet) as you > can see at the access-voucher_360.jpg (standard Android phone size) > I strongly recommend to don't use scrollable content within a > scrollable page (see first 2 screenshots from Alex). You become crazy > if you want to navigate though that on a touch device. LOL > A specific header image can be used for every case. Okay, we need to build a way to upload that and possibly some specifications that we can give to people to design theirs in the right way. > There are tiny and simple code snippets which scale the header image > for every size correctly. I'll check this out to provide you with > more detailed information. > Just checked getbootstrap.com. Seems to be that such a functionality > is already included. Cool. > A footer where you are able to promote IPFire ;) Always good. > Layout based on Bootstap 3 > I used the color-theme for the upcoming new IPFire website and WebUI. > @Michael the bright red is not the new primary IPFire red ;) It's the > error-red. I'll show more about that soon. > I suggested new text for the errors. Maybe you like it :) > > Let me know if you have any questions or concerns. There is nothing from me I would like to see changed. So I suppose that we can regard this as the final draft. Would you be up for arranging a telephone conference with Daniel & Alex, because I think that I have many questions regarding how we get from the draft to code :) How about Monday evening? Best, -Michael > Best, > Maurice > > On Mon, Feb 1, 2016 at 2:41 PM, Daniel Weismüller @ipfire.org> wrote: > > No. > > > > The last screenshot shows the customization part from "good old" > > configurationsite of the url-filter. > > For better understanding i've made a  (3) screenshot(s) of the > > whole page. > > > > - Daniel > > > > > > Am 01.02.2016 um 14:32 schrieb Maurice Gesswein: > > > Is that the place where the hoster can include his own T&Cs, > > > upload a company logo, add the company name, etc? > > > > > > On Mon, Feb 1, 2016 at 2:27 PM, Daniel Weismüller > > ller(a)ipfire.org> wrote: > > > > me again :) > > > > > > > > Another screenshot now from the webif where you may customize > > > > blockpage from the url-filter. > > > > > > > > - Daniel > > > > > > > > > > > > Am 01.02.2016 um 14:24 schrieb Maurice Gesswein: > > > > > Perfect. Thanks Daniel. > > > > > Am 01.02.2016 2:22 nachm. schrieb "Daniel Weismüller" > > > > .weismueller(a)ipfire.org>: > > > > > > Here are the screenshots as requested. > > > > > > > > > > > > - Daniel > > > > > > > > > > > > Am 31.01.2016 um 08:53 schrieb Maurice Gesswein: > > > > > > > Good morning, > > > > > > > I use lorem ipsum than. Thanks. > > > > > > > Am 31.01.2016 4:31 vorm. schrieb "Michael Tremer" > > > > > > l.tremer(a)ipfire.org>: > > > > > > > > Hi, > > > > > > > > > > > > > > > > On Sat, 2016-01-30 at 22:06 +0100, Maurice Gesswein > > > > > > > > wrote: > > > > > > > > > Can someone send me the terms & condition text from > > > > > > > > the screenshots > > > > > > > > > as real text? > > > > > > > > > > > > > > > > There is a text area where the user will type in the > > > > > > > > T&Cs. So there is > > > > > > > > no predefined text and it might change. > > > > > > > > > > > > > > > > Do you still want some sample or can you just use lorem > > > > > > > > ipsum? > > > > > > > > > > > > > > > > -Michael > > > > > > > > > > > > > > > > > > > > > > > > > > Thanks in advance. > > > > > > > > > > > > > > > > > > On Sat, Jan 30, 2016 at 4:01 AM, Michael Tremer > > > > > > > ael.tremer(a)ipfir > > > > > > > > > e.org> wrote: > > > > > > > > > > Hi, > > > > > > > > > > > > > > > > > > > > On Fri, 2016-01-29 at 20:37 +0100, Alexander Marx > > > > > > > > wrote: > > > > > > > > > > > > Hey, > > > > > > > > > > > > > > > > > > > > > > > > OK, in general I got it. Thanks for the screens > > > > > > > > Alex. > > > > > > > > > > > > > > > > > > > > > > > > I have a few questions and suggestions. > > > > > > > > > > > > > > > > > > > > > > > > To be prepared for further upcoming pages like > > > > > > > > these, are you > > > > > > > > > > able > > > > > > > > > > > > to hand over a list of them (perhaps with > > > > > > > > screenshots)? Not > > > > > > > > > > really > > > > > > > > > > > > needed, but very helpful to deliver a > > > > > > > > consistent flexible > > > > > > > > > > design. > > > > > > > > > > > > > > > > > > > > Don't worry about them too much. > > > > > > > > > > > > > > > > > > > > > As far as i know there are no other "external" > > > > > > > > pages. The > > > > > > > > > > > Webinterface of IPFire has an own design and > > > > > > > > several themes, i > > > > > > > > > > think > > > > > > > > > > > you already saw them. > > > > > > > > > > > > > > > > > > > > However, there are a few. I included both of them > > > > > > > > in the first > > > > > > > > > > email. > > > > > > > > > > On top of that there are the squid error pages. I > > > > > > > > am not too sure > > > > > > > > > > if we > > > > > > > > > > can modify those quite nicely. > > > > > > > > > > > > > > > > > > > > I will figure that out and get back to you. > > > > > > > > > > > > > > > > > > > > > > Should the hoster be able to include his own > > > > > > > > logo/brand? That > > > > > > > > > > would > > > > > > > > > > > > give the users a lot more trust in that things. > > > > > > > > If an image > > > > > > > > > > upload > > > > > > > > > > > > is not in the current scope, I suggest a > > > > > > > > prominent headline > > > > > > > > > > where > > > > > > > > > > > > the hoster is able to include the company name. > > > > > > > > Do you agree? > > > > > > > > > > > > > > > > > > > > > Actually the hoster is able to change the Title > > > > > > > > (The top-title in > > > > > > > > > > the > > > > > > > > > > > screenies like "Login" or on the other page "My > > > > > > > > private HotSpot") > > > > > > > > > > > maybe we can add a Logo but we have to decide > > > > > > > > which dimensions > > > > > > > > > > are > > > > > > > > > > > allowed. This is difficult as many companies have > > > > > > > > different > > > > > > > > > > > dimensions of Logos. Some are 4:3, others are > > > > > > > > like 27:9 and so > > > > > > > > > > on.  > > > > > > > > > > > What do other people think? > > > > > > > > > > > > > > > > > > > > I think we don't need that. We usually have the > > > > > > > > opportunity to > > > > > > > > > > upload > > > > > > > > > > an entire HTML template, so that if someone wants > > > > > > > > to replace the > > > > > > > > > > page, > > > > > > > > > > they can do that. But just a logo is a bit too > > > > > > > > easy. Who ever wants > > > > > > > > > > to > > > > > > > > > > brand this as their own should do that with the > > > > > > > > rest, too. > > > > > > > > > > > > > > > > > > > > And of course we should not forget about doing some > > > > > > > > advertisement > > > > > > > > > > for > > > > > > > > > > our own product :) However, I get many emails from > > > > > > > > annoyed students > > > > > > > > > > that can't access dirty websites in their school. > > > > > > > > LOL > > > > > > > > > > > > > > > > > > > > > > Since it's part of IPFire, should those pages > > > > > > > > be designed like > > > > > > > > > > the > > > > > > > > > > > > new upcoming style of IPFire? Means same color > > > > > > > > theme, button > > > > > > > > > > style, > > > > > > > > > > > > IPFire logo, caption like "powered by IPFire", > > > > > > > > etc? Or should > > > > > > > > > > it > > > > > > > > > > > > totally generic so that the users has no clue > > > > > > > > what system shows > > > > > > > > > > > > those dialogs? > > > > > > > > > > > > > > > > > > > > I would like a "powered by IPFire" at least and > > > > > > > > even advise people > > > > > > > > > > who > > > > > > > > > > replace the theme by their own to keep that in. > > > > > > > > > > > > > > > > > > > > This does not need to be like the new stuff but I > > > > > > > > think it should > > > > > > > > > > feel > > > > > > > > > > a bit like IPFire but also be neutral. We do not > > > > > > > > need to hide that > > > > > > > > > > this > > > > > > > > > > is an IPFire system though. > > > > > > > > > > > > > > > > > > > > > No. I think if we have something like a > > > > > > > > "background-color" > > > > > > > > > > instead of > > > > > > > > > > > a picture, we should the hoster let configure it, > > > > > > > > so the people > > > > > > > > > > are > > > > > > > > > > > able to adpat the colors to their own corporate > > > > > > > > identity. So if > > > > > > > > > > you > > > > > > > > > > > woul like to work with gradients or similar, i > > > > > > > > would recommend to > > > > > > > > > > > make it configurable. > > > > > > > > > > > > > > > > > > > > Nah, not too many options. We wanted to keep this > > > > > > > > simple. > > > > > > > > > > > > > > > > > > > > > Michael, what do you think? > > > > > > > > > > > > > > > > > > > > See above :) > > > > > > > > > > > > > > > > > > > > -Michael > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > Best, Maurice > > > > > > > > > > > > > > > > > > > > > > > > On Fri, Jan 29, 2016 at 1:51 PM, Alexander Marx > > > > > > > > > > > > > > > > > @oab > > > > > > > > > > > > .de> wrote: > > > > > > > > > > > > > Hi > > > > > > > > > > > > > > > > > > > > > > > > > > Here are the actual ugly screenshots from the > > > > > > > > loginpage. > > > > > > > > > > > > > one version with voucher access and the other > > > > > > > > one with > > > > > > > > > > license > > > > > > > > > > > > > agreement. > > > > > > > > > > > > > > > > > > > > > > > > > > Alex > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > Am 29.01.2016 um 02:59 schrieb Michael > > > > > > > > Tremer: > > > > > > > > > > > > > >  Hi Maurice, > > > > > > > > > > > > > > > > > > > > > > > > > > > > I know that you are busy with other things, > > > > > > > > but > > > > > > > > > > nevertheless I > > > > > > > > > > > > > > would > > > > > > > > > > > > > > like to send you this request. > > > > > > > > > > > > > > > > > > > > > > > > > > > > Alex is currently working on a so called > > > > > > > > captive portal. > > > > > > > > > > That > > > > > > > > > > > > > > are these > > > > > > > > > > > > > > things that pop up on your phone or laptop > > > > > > > > when you connect > > > > > > > > > > to > > > > > > > > > > > > > > a > > > > > > > > > > > > > > wireless network in a hotel or cafe. That > > > > > > > > web page that is > > > > > > > > > > > > > > shown is > > > > > > > > > > > > > > what we need to design now. > > > > > > > > > > > > > > > > > > > > > > > > > > > > We also have a few other pages that are > > > > > > > > shown to the users > > > > > > > > > > of > > > > > > > > > > > > > > the > > > > > > > > > > > > > > network when for example a web page is > > > > > > > > blocked. That page > > > > > > > > > > > > > > however is > > > > > > > > > > > > > > really ugly and probably needs a remake as > > > > > > > > well. I want to > > > > > > > > > > > > > > focus on the > > > > > > > > > > > > > > captive portal for now, but I guess you > > > > > > > > would like to know > > > > > > > > > > that > > > > > > > > > > > > > > there > > > > > > > > > > > > > > are more. [1] and [2]. Really bad right? > > > > > > > > They scare users. > > > > > > > > > > > > > > > > > > > > > > > > > > > > Alex will send you a screenshot of the > > > > > > > > development version > > > > > > > > > > we > > > > > > > > > > > > > > have now. > > > > > > > > > > > > > > This is just a quick page to show the > > > > > > > > concept and what we > > > > > > > > > > are > > > > > > > > > > > > > > roughly > > > > > > > > > > > > > > after. > > > > > > > > > > > > > > > > > > > > > > > > > > > > There are two options for now. The first > > > > > > > > one is where the > > > > > > > > > > user > > > > > > > > > > > > > > has to > > > > > > > > > > > > > > agree to a license and click a "I accept" > > > > > > > > button. The > > > > > > > > > > second > > > > > > > > > > > > > > one is > > > > > > > > > > > > > > where the user will have to type in a > > > > > > > > voucher code and > > > > > > > > > > click a > > > > > > > > > > > > > > button > > > > > > > > > > > > > > to log in. > > > > > > > > > > > > > > > > > > > > > > > > > > > > Would you like to work on this? > > > > > > > > > > > > > > > > > > > > > > > > > > > > If so, a quick mock-up would be okay for > > > > > > > > now, because we > > > > > > > > > > would > > > > > > > > > > > > > > like to > > > > > > > > > > > > > > put this entire project on the wishlist to > > > > > > > > raise some > > > > > > > > > > crowd- > > > > > > > > > > > > > > funding > > > > > > > > > > > > > > money. Giving the user that mock-up would > > > > > > > > certainly help so > > > > > > > > > > > > > > that they > > > > > > > > > > > > > > get a good impression what they are > > > > > > > > supporting here. The > > > > > > > > > > actual > > > > > > > > > > > > > > implementation will happen a bit later when > > > > > > > > enough funds > > > > > > > > > > have > > > > > > > > > > > > > > been > > > > > > > > > > > > > > raised. > > > > > > > > > > > > > > > > > > > > > > > > > > > > @Alex, would you please send some > > > > > > > > screenshots of the two > > > > > > > > > > pages > > > > > > > > > > > > > > we have > > > > > > > > > > > > > > so far? > > > > > > > > > > > > > > > > > > > > > > > > > > > > Best, > > > > > > > > > > > > > > -Michael > > > > > > > > > > > > > > > > > > > > > > > > > > > > P.S. @Maurice, I know that I am throwing a > > > > > > > > bit of random > > > > > > > > > > stuff > > > > > > > > > > > > > > at you. > > > > > > > > > > > > > > Just let me know when I don't make sense > > > > > > > > any more :) > > > > > > > > > > > > > > > > > > > > > > > > > > > > [1] http://2.bp.blogspot.com/-9sw4wUeUsgQ/V > > > > > > > > fU-c33FMDI/AAAAA > > > > > > > > > > AAAD > > > > > > > > > > > > > > zM/bBnJN4oCffo/s640/31.png > > > > > > > > > > > > > > [2] http://wiki.ipfire.org/_media/en/addons > > > > > > > > /clamav/squidcla > > > > > > > > > > mav- > > > > > > > > > > > > > > detection.png > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > >  > > > > > > > > > > > > --===============5799063174466346898== Content-Type: application/pgp-signature Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename="signature.asc" MIME-Version: 1.0 LS0tLS1CRUdJTiBQR1AgU0lHTkFUVVJFLS0tLS0KVmVyc2lvbjogR251UEcgdjEKCmlRSWNCQUFC Q2dBR0JRSldzZ1paQUFvSkVJQjU4UDl2a0FrSHFvc1AvMEV1Snl4TjV1dkpYcSthWGNOT3VPckkK UUJ2QXpjN1hMSThwRmFpSERRcDQ4UEIrclYxOG5qbmRUcTlZQmhHZlNWUTJkKzU3WnNlU1c4R29s c3lGZTg1TgpETi8rOTNDVEQ3SHBZUkZ1R2xGVmVHckJLYllpajVpaXFSTlZaWTBVbXhHejhPK0U3 OGI5VkJudVR4TDhJRm03CkNyL1VGeWhHcG9ETld6Q0RZZm41MmVZeTBhVGtFZ3JGZGtqMlJGQWpB SjgwOUt3UUkrMWI0WXFHa1doQzVmSkIKNEdnbDZ0LzE3NXV3TlVlWUhHSEFIWldITStVTmhIT0JX OGRkVkRHWVdRaWxMa0NxRGJRdzZEclIycDFlL0VaNwo3bWx5L3Npc3cydVcxQmtSdVlQVjU4Z3k1 STkraGFTRnRFVzJqeGVKbDFObEd1UGZxZHF2V3RvZTZrV3NKZDdpCkZXNGRWRjR6WnVhcXhEUkpV aWszWmkvSGxMRHk0cFFITkFyTlRsK3dTTHFaeGpQdkkvcGZ5ZFpvb3JNR2VUam8KbTNvaUszbzIv Q2QxK2lZU3ZOOHBpVFprSjdwWHFJN01RSE04dDkvR3FqdzF4NEVrTDNRYUpuUGFpZEh6Q2F3eApS djVuVmN6ekxTMVJoc2hpT1Q4aEh1WElWdElBTzIyRzEvRk9XN2ZHYk5PYlBTODlnVWtoZ09rak1w UGF0NUFuClRCc1lQcG45NWViYlJPakkyQlhpZGJZUENZUTZUMDRtMmpiNzBnb2dodU9raWd6eThK ODNmcFFCY2ROTlFaS3kKamJQQ0s3M2JiWkFTdkluZGFSTUQ2MDNFd1BKVVl3TzFpNDNKTEhGemx2 aVRwdUNyVTJBTmNwRFJEaG14M2ExQQpGblorYXkzTkx2aDVDK2NxdGdFeQo9WVlZVwotLS0tLUVO RCBQR1AgU0lHTkFUVVJFLS0tLS0K --===============5799063174466346898==--