New "welcome" page

[LittleJ]

New homepage with the following constraints:

• Must be based on the design selected by the community
• Must be a single file with no external dependencies (css, images...)

Checklist:

• Securely signed commits
• Unit testing, with >80% coverage
• Component(s) with PHPdocs (N/A)
• User guide updated (N/A)
• Conforms to style guide (N/A)

[musmanikram]

[lonnieezell]

Nice job! I like the addition of the links at the top, though the documentation link will

Just a couple of comments:

1. Lets reduce the space around the hero box and the main content areas a touch. On smaller screens that pushes off of the page.
2. The responsiveness has a couple of issues around the footer image that leaves some orange space above it. I'd rather get rid of the curved borders altogether and either do them as straight lines or angled lines. This has come up between Paul and I discussing the main site, also.

[LittleJ]

@lonnieezell I did not know people were setting up CI on mobile devices, sorry. So I made the changes, and even more ! :-) Hope you will like it ;-)

It has been tested for:

• iPhone from 5 to X
• iPad from mini to pro
• Galaxy Note 3 and S5
• Pixel 2 and Pixel 2 XL

[lonnieezell]

Looking good, @LittleJ but please simplify the top curves also.

And responsive is not just for mobile and tablets. :) We also want those using 13" screens, or those that have the browser and IDE on the same screen next to each other, etc, to have pleasant first-time experiences.

[LittleJ]

@lonnieezell Here is the new version, without curves. I had to adjust some spacings, and I have made some small improvements. Am I on the right path ?

NB: good news, without the curves, the file decreased from 30Ko to 14Ko.

[lonnieezell]

I think that's looking great. Will merge. Thanks!

[LittleJ]

@lonnieezell Awesome ! After hours of work (with the debug bar too), I'm finally an official contributor ! :-D Question: Do you expect the same design for CI's website ? Because I could easily continue the work and turn this into a website. So they would share the same stylesheet and design. (Sorry to ask, but the guys working on the project seem busy, and I feel kind of alone :-D )

[lonnieezell]

@LittleJ Welcome to the contributors club :) I hope to figure out how to handle your debug bar changes and if anything needs to change there soon.

But, yes, this will form the foundation of the new site. Were you provided a copy of the mockup or brought into the web design board on Trello or anything by Paul?

[LittleJ]

@lonnieezell Yes but there is nothing going on there. I asked a question to PaulD and I am still waiting for the answer, which is not needed anymore because it was about this pull request... before I dit it.

Plus:
1/ They started a template using Bootstrap, which is nice for big projects... but maybe a bit too much for simple websites in my mind. It represents 2Mb+ of assets coming from a CDN. If we continue with the work in this pull request, I have a 18Ko welcome page right now (html, css, and logo included), the site could be blazing fast with a custom stylesheet.
2/ With the changes we made, this design is quite different from the one they used...

All together, it probably means starting a new repo, with a new foundation. And I have no one to ask my questions to :-)

[LittleJ]

PS: Bootstrap will probably be an issue if you want to create an AMP version of the website, which is I think recommended (by Google too, but who cares :-D). Meaning, you will have to write another stylesheet to do the same job. A third one.

It all could be the same stylesheet.

[lonnieezell]

I'm not sold on the need for an AMP version of the site for this project. Nor am I interesting in yet another thing to maintain. :)

I think PaulD might have forgotten to change his email address with his recent job change so I'm not sure if he's getting notifications. He has also mentioned being very time poor at the moment. I'll try to take a look in that group and see where we are at the moment.

[John-Betong]

@lonnieezell

I'm not sold on the need for an AMP version of the site for this project. Nor am I interesting in yet another thing to maintain. :)

https://ci4-strict.tk/welcome-amp

It's not much of a task to include AMP as you can see from the above online AMP welcome page.

Modifications and Tweaks:

1. replacing a CSS only Hamburger menu because JavaScript is not allowed

2. replacing the logo image "src="data:image/png;base64" with SVG

3. AMP requires their own validation tools:
   a. https://search.google.com/test/amp?id=E2jJk9NuRYx-4Y6XS6rg0A
   b. https://validator.ampproject.org/#url=https%3A%2F%2Fci4-strict.tk%2Fwelcome-amp

4. Google Mobile Friendly Test:
   https://search.google.com/test/mobile-friendly?id=4OUrthGuBbw8ZKgN6raykA

5. PHP declare(strict_types=1); error_reporting(-1); ini_set('display_errors', '1'); are also OK

[lonnieezell]

@John-Betong Maybe I got confused during the thread, but the Amp comment was in regards to the main CI site, I believe.

I definitely have zero interest of creating a high-performance Amp page of a welcome view that will be one of the first things deleted by a developer. :)

[John-Betong]

@lonnieezell

Whoops - reading back on the comments I think it was me who got confused :)

I agree that additional effort would not warrant the main site being converted to an AMP optimised mobile version. The market is for developers who will no doubt be using desktops.

I have updated my site with the latest Github welcome_page and noticed the embedded png image is being used and the page size is 15.0 Kb whereas the SVG version is a lot smaller?