[IPFire Artwork] Design Request | Captive Portal

Alexander Marx alexander.marx at ipfire.org
Thu Feb 4 20:34:31 CET 2016


Hi Michael and Maurice,

Am 03.02.2016 um 15:36 schrieb Maurice Gesswein:
> Hi
>
> On Wed, Feb 3, 2016 at 2:53 PM, Michael Tremer 
> <michael.tremer at ipfire.org <mailto:michael.tremer at ipfire.org>> wrote:
>
>     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!
>
>
> Happy to hear that :)
>
>
>     > 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.
>
>
> Specs would be a recommended minimum width and height for the image. 
> Additionally an imagesize (KB) restriction. You don't want to load a 
> 10MB image ;) Resizing is handled by the mentioned code snippets or 
> perhaps Bootstap itself.
>
>
>     > 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 <http://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?
>
>
> We can of course chat. Keep in mind that I'll provide - I call it 
> "Guides" - for you. It's kind of a construction plan or blueprint 
> (font size, colors, margins, paddings, etc). Maybe it's not really 
> needed to chat before you code anything. My guides should clear a lot 
> of your questions. Let me finish such a blueprint and you will let my 
> know your thoughts :)
Does that mean we have a "date" on Monday, 8th at 20:00 german local time?
telephone conference ?

Alex
>
>
>     Best,
>     -Michael
>
>
> Maurice
>
>
>     > Best,
>     > Maurice
>     >
>     > On Mon, Feb 1, 2016 at 2:41 PM, Daniel Weismüller
>     <daniel.weismueller
>     > @ipfire.org <http://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
>     <daniel.weismue
>     > > > ller at ipfire.org <mailto:ller at 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"
>     <daniel
>     > > > > > .weismueller at ipfire.org <mailto:weismueller at 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"
>     <michae
>     > > > > > > > l.tremer at ipfire.org <mailto:l.tremer at 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
>     <mich
>     > > > > > > > > ael.tremer at ipfir
>     > > > > > > > > > e.org <http://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
>     > > > > > > > > <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
>     > > > > > > > > > > > > > >
>     > > > > > > > > > > > > >
>     > > > > > > > > > >
>     > > > > > >
>     > > > >
>     > >
>
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20160204/fb31f3f6/attachment-0001.html>


More information about the IPFire-Artwork mailing list