Landing Page Design Ideas and Proposals

[darksun]

also I wish the forum to have, under each major distribution, a short effective description, like DebianDogs. This is to help and guide new users in their first visits of the forum.

I originally avoided using the description to conserve vertical space. We can revisit this and try it out.

We'll need description text examples......

in my opinion a single line with a short description of the distro they are about to visit (inside the forum) is worth the space taken.
At present, despite the latest layout improvement of it, a new user can find the forum sections all cluttered together , making it confused and hard to navigate; this frustration may easily discourage a new user to invest its time to go forward in browsing. Because in my opinion the landing page should be short, easy to read, encouraging a quick decision to click to visit the forum, the first short description of each operating system should be easily accessible in the front page of the forum. As you can see in the attachment, at the present, the main puppy linux distribution are all cluttered together without any hints of any sort of what a new user should start from.

[mikewalsh]

I see the forum main page as a table of contents already. One that I do not need to do anything, but scroll down, to get to what I want to look at.
Why do I need to first, see a page, that I have to click on, to actually see the expanded few of the different sections contents?
That expanded view, is already being provided by the current forum board index, that is displayed, when I go to the forum.

@bigpup :-

Heh. Because you're an already long-term Puppy user, dear boy. You've been visiting the forum for years, and know exactly what to expect; to you, the forum layout & community structure is already as familiar as the back of your own hand...

But new users don't have that luxury.

Y'know that old saying, "Familiarity breeds contempt"? I believe that's why you see no need to change anything, although this isn't really 'changing' anything; the forum will remain as-is, but the landing-page will just provide a more personalised 'Welcome' along with a few main shortcuts.

The community could do with a re-focus of how we present ourselves to the world.....and making us appear more professional WILL attract more people to at least take a look. That can only help in the long run.

As we all get older, we do get more 'set in our ways'. I'm as guilty as anyone in this respect, but I like to shake myself up periodically so I don't get IN that rut to start with. Improved ways of doing existing stuff are always good, as long as they are not simply 'change for the sake of change'.

I don't think this is.

Mike.

[fredx181]

also I wish the forum to have, under each major distribution, a short effective description, like DebianDogs. This is to help and guide new users in their first visits of the forum.

I originally avoided using the description to conserve vertical space. We can revisit this and try it out.

We'll need description text examples......

in my opinion a single line with a short description of the distro they are about to visit (inside the forum) is worth the space taken.
At present, despite the latest layout improvement of it, a new user can find the forum sections all cluttered together , making it confused and hard to navigate; this frustration may easily discourage a new user to invest its time to go forward in browsing. Because in my opinion the landing page should be short, easy to read, encouraging a quick decision to click to visit the forum, the first short description of each operating system should be easily accessible in the front page of the forum. As you can see in the attachment, at the present, the main puppy linux distribution are all cluttered together without any hints of any sort of what a new user should start from.

I see your point, but in the case of "Puppy Linux Distros" it will probably take lots of space if a description is added to all 7 subforums.

[wizard]

@rockedge

Until we meet at the red light on Main Street......then perspectives change.

There's a lot of enjoyment in Puppy when others are agonizing over the problems and expense associated with MS Windows, Mac or even the big Linux distros.

wizard

[wizard]

@rockedge

I originally avoided using the description to conserve vertical space

Debian Dogs and Fatdog already have a single bullet. Why not just add the same for the rest?
Suggest:
Puppy - * Small, fast and light single user system
EasyOS - * An experimental Linux Distribution (this from EasyOS web site)
Kennel Linux - * your choice

landing-page3.jpg (11.34 KiB) Viewed 319 times

Thanks
wizard

[wiak]

@rockedge

I originally avoided using the description to conserve vertical space

Debian Dogs and Fatdog already have a single bullet. Why not just add the same for the rest?
Suggest:
Puppy - * Small, fast and light single user system
EasyOS - * An experimental Linux Distribution (this from EasyOS web site)
Kennel Linux - * your choice

KL can be shaped into anything so:

Kennel Linux - Anything you want it to be (including package manager type)

[Wiz57]

@rockedge

Until we meet at the red light on Main Street......then perspectives change.

LOL! I used to think "FORD" was actually "DROF", because that's all I could see in my rearview mirror!

[Grey]

The name 'Puppy' and warm fuzzy cartoon character image/icons associated with it was always a problem in terms of many not considering it more than a toy hobby distribution. For firstrib distros I purposively stopped using

But as a realist, you have to understand the environment. To become a serious independent non-hobby project, you must have an infrastructure like at least Mint with a lot of donations and development opportunities. You want to remain a separate section on the ready-made infrastructure of a time-tested project and have lengthy discussions about the future. That's not how realists do things.
I just still can't grasp the vector and direction of movement. No offense, I'm just in a creative crisis myself and I can't explain some of the points myself.

[d-pupp]

Here is my idea for a rough layout.

links >> > Forum > Wiki > Getting started

Tittle >>> Logo >> Welcome to Puppy Linux

sub tittle >>> What is puppy
text >>>>>>>>>>A small, fast, lightweight, portable, full featured, operating system
sub tittle >>> What puppy is not
text >>>>>>>>>>A toy operating system
text >>>>>>>>>> Bloated
sub tittle >>> Who we are
text >>>>>>>>>>A group of dedicated volunteers programmers and hobbyists
sub tittle >>> Try a flavor today
links to puppy's

Wording and style to be decided later.

[darksun]

a very primitive draft of my idea.
Design, colors, fonts, its content itself is up to us.
This is my vision: a simple, straightforward, essential trampoline to our forum -> the one and only place where there are up to date information, download and other links, FAQs, and on.
This, again, in order to avoid multiple places with the same info, limit the risk of providing old/obsolete info, and most important to incentive (new) users to join the forum and participate, instead of merely download ISOs.

[williwaw]

the more info listed at the top of the page about any one particular distro, the more the other offerings will be minimized and conflated with the more prominent description.

any amount of info about any particular distro can be put in a dropdown

@rockedge
would you be kind enough to host the code below and add a link so folks can view this proposal?
thanks

Code: Select all

<!DOCTYPE html>
<html>
<head>
			<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<base target="_blank">
	</head>	
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<body>


<h2>
Welcome to Our Forum Landing Page</h2>
<p>Below you'll find links to our various offerings,Puppy, KL, Fatdog, EasyOS, DebianDogs and many helpful and knowledgeable members to answer questions and get you started. Adopt your animal TODAY, click one of the links below to vist their section of the forum. Or Click now to visit the front page!</p>



<ul>





  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Puppy</a>
    <div class="dropdown-content">
    <p>  Small, fast and light single user system</p>
    <p>  list as many features as desired       </p>
        <p> The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

</p>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      
        <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Fatdog</a>
    <div class="dropdown-content">
        <p>  Small, fast and light single user system</p>
    <p> The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

</p>
    
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      
     <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Debiandog</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>  
      
        <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">KL Linux</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      
      
  
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">EasyOs</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>


</body>
</html>

[darksun]

@rockedge
would you be kind enough to host the code below and add a link so folks can view this proposal?
thanks

who wish to see how it looks can copy paste your posted source code into one of many online html viewer services.

[rockedge]

Here is @williwaw's example -> https://puppylinux.com/puptest-williwaw/

Here is another -> https://puppylinux.com/puptest

I would like to set up @darksun's example in HTML and test it on the server.

[darksun]

@rockedge I used abiword and posted a screenshot of the screen.
I just downloaded the puppy linux logo, some icons from here, the rest are simple, centered sentences and an hyperlink to the forum

I am not a webmaster but I know there is a very nice framework for building websites, free & opensource, secure oriented, to create static web pages and has a big community which provide fantastic themes like this one for example.

[Grey]

hugo

Yes, indeed. Themes are installed directly through git commands. I even replaced the pictures in one theme with my own silly and childish versions Pretty fast. Live and learn forever, as they say.

[Wiz57]

@rockedge I used abiword and posted a screenshot of the screen.
I just downloaded the puppy linux logo, some icons from here, the rest are simple, centered sentences and an hyperlink to the forum

I am not a webmaster but I know there is a very nice framework for building websites, free & opensource, secure oriented, to create static web pages and has a big community which provide fantastic themes like this one for example.

Do you have something like Kompozer, a WYSIWYG HTML edtor? I've used it in the past, but it's showing its age in regards to latest/greatest,
still for basic HTML sites it isn't too bad!

[rockedge]

@darksun I have been using the Bootstrap web site framework. I actually have a one to one copy of the oldforum running on a localhost server that I am experimenting with an entirely new phpBB theme style that uses Bootstrap. Looks very interesting.

Here are some Bootstrap examples we use now -> https://f96.puppylinux.com/ and -> https://klv-airedale.rockedge.org/

Here is the landing page set up -> https://puppylinux.com/pupLP/

I will look over this one you suggest and see what's what.

Everyone!!! Do not forget the Hiawatha web server included in most Puppy's!!!

This is one of those that people thought was a toy but in reality is the most secure and fastest web server in existence. Beats NGINX

Start Hiawatha and place your HTML in /root/Web-Server and use http://localhost in a browser

[rockedge]

Do you have something like Kompozer, a WYSIWYG HTML editor?

SeaMonkey has a WYSIWYG HTML editor

testing Hugo:

Screenshot(47).jpg (146.51 KiB) Viewed 115 times

[Grey]

@rockedge There is generally a large selection of static website generators now. Nikola, Cobalt, Zola and now Hugo... Their name is Legion... People don't know what to grab onto

[darksun]

@rockedge @Wiz57 I am aware of those WYSIWYG HTML editor.
Because my vision is to have a plain single page with few icons, simple text lines and an link to the forum, for me it was much quicker to use a word processor and post a screenshot of it.
My opinion is to build the web page after we have agreed on a prototype, not before.

[darksun]

testing Hugo:

on the main webpage there is the link for a https://gohugo.io/getting-started/quick-start/ , it does not look difficult to set it up on the server.

[rockedge]

I have chosen this theme for Hugo built site -> https://themes.gohugo.io/themes/hugo-book/

My opinion is to build the web page after we have agreed on a prototype, not before.

That's what will happen in the end. These demos are just to get a feel for what will be easy to maintain. Remember this must exist on a commercial shred host server

[darksun]

I have chosen this theme for Hugo built site -> https://themes.gohugo.io/themes/hugo-book/

I like it

[d-pupp]

I created a test web page for consideration.
I created it with l3afpad.