[IPFire Artwork] Design Request | Captive Portal

Maurice Gesswein zerpixelung at gmail.com
Mon Feb 1 23:23:34 CET 2016


Hi,

attached you find design/layout suggestions for all mentioned captive
portal websites.

Some notes:

   - The layout is always the same. You are able to build one template
   which can used for every site.
   - 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.
   - A specific header image can be used for every case.
      - 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.
   - A footer where you are able to promote IPFire ;)
   - 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.

Best,
Maurice

On Mon, Feb 1, 2016 at 2:41 PM, Daniel Weismüller <
daniel.weismueller at 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.weismueller 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>daniel.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" <
>>> <michael.tremer at ipfire.org>michael.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 <michael.tremer at 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 <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/VfU-c33FMDI/AAAAA>
>>>> http://2.bp.blogspot.com/-9sw4wUeUsgQ/VfU-c33FMDI/AAAAA
>>>> > > AAAD
>>>> > > > > > > zM/bBnJN4oCffo/s640/31.png
>>>> > > > > > > [2]
>>>> <http://wiki.ipfire.org/_media/en/addons/clamav/squidcla>
>>>> 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/20160201/eaf81819/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: access.jpg
Type: image/jpeg
Size: 343121 bytes
Desc: not available
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20160201/eaf81819/attachment-0006.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: access-voucher.jpg
Type: image/jpeg
Size: 345317 bytes
Desc: not available
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20160201/eaf81819/attachment-0007.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: access-voucher_360.jpg
Type: image/jpeg
Size: 71932 bytes
Desc: not available
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20160201/eaf81819/attachment-0008.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: denied.jpg
Type: image/jpeg
Size: 93241 bytes
Desc: not available
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20160201/eaf81819/attachment-0009.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: error.jpg
Type: image/jpeg
Size: 99036 bytes
Desc: not available
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20160201/eaf81819/attachment-0010.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: virus.jpg
Type: image/jpeg
Size: 96188 bytes
Desc: not available
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20160201/eaf81819/attachment-0011.jpg>


More information about the IPFire-Artwork mailing list