elementary / website

The elementary.io website

The New elementary.io

A focused, minimum viable product (hence MVP) for a website that accompanied the release of elementary OS Freya.

Project Organization

• Issues for individual actionable items, or bugs i.e.:
  • Design home page
  • Implement home page
  • Add payment form
  • Fix link to Wired article
• Milestones for "releases" or overall steps, i.e.:
  • Single-page site
  • User Documentation
  • Journal
• Reviews Do all work in branches, then submit pull requests for review when ready
  • No dummy content in master, ever.
  • Small diff is best diff.
  • The reviewer is the gatekeeper. Be kind of a dick.

Architecture/Philosophies

• HTML, CSS, and JS
• Super simple PHP-based templating system
• No/minimal frameworks (keep it simple!)
• Graceful degradation (don't be held back by crappy browsers)
• Mobile-first

Templating System

• PHP-based
• Pages go in root as .php files
• require_once '_backend/preload.php';, set any variables, then include $template['header']; (see code-of-conduct for an example) at top of page.
• include $template['footer']; at bottom of page.
• Page variables:
  • $page['title']
  • $page['description']
  • $page['author']

Contributing

See guidelines for coding and translating.

Security

Please see SECURITY.md for information about disclosure policy and contact.

License

This project has a MIT license.

website's Issues

Alternative downloads page

We're going to want an "alternative downloads" page to offer 32-bit and torrents.

Create a permalink for latest beta

So we don't have to modify this page every time we make a new ISO, we should set up a permalink

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Installation Instructions for Mac OS

Likely we'll want to use Sam's installer? https://github.com/sdaitzman/elementary-os-install-utility

Back-end

So we have to choose a server-side language to fix issues below

As we said, Stripe got APIs for cURL, Ruby, Python, PHP, Java, Node and Go. We must choose one of these or a language supporting cURL. We were having a preference for Go.

• Cookies #68
• Get file size #60
• Page components #65
• Download later (mails) #34 #24
• Stripe support #6

Add file size

Probably good to have file size so people know what they're getting into

Automatically upload master to a cool subdomain

Something like "beta.elementaryos.org" would be cool

Get a site favicon

Gotta have one of those

"Download later" on mobile.

You can't download that shiz on your phone. It'd be useless there.

Maybe we should come up with some kind of clever "download later" mechanism. Send me a link to the download in my email?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Offer "Download Later" to desktop users, too

The download later feature is definitely something essential on mobile devices, but it could be useful to offer to desktop users as well. For example, if someone sees it's 800MB (or whatever) and wouldn't normally download it right then, being able to send them a direct link will encourage them to give us money anyway and get their file later.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Installation Instructions for Ubuntu

How to burn & install from the latest LTS of Ubuntu (LTS for convenience of not having to update screenshots every 6 months)

Implement custom focus outline style for button

https://github.com/elementary/mvp/blob/master/styles/main.css#L106 - Not good for people navigating with a keyboard. I suggest we remove this line.

outline: none

Users shouldn't be prompted to pay twice.

After paying, set a release-specific cookie (ike has_paid_freya) and check it in future to avoid prompting them to pay again. Use a special url in receipts to set the cookie then too.

Add Cassidy's Giant CoC

One of the things we've linked to in quite a lot of places and can't lose is our Code of Conduct. So we gotta throw up a page for that.

http://elementaryos.org/code-of-conduct

Grid layout

If you're going mobile first, why not using premade css grid? There are number of options, like Bootstrap, Foundation or Skeleton (if more lightweight). Not only it would save some time, but also fix some cross-browser issues.

Add torrent option

People gonna complain about "where my torrent download at"

Design responsive Freya download page

First step. :)

Github link should go directly to this project

Right? Maybe? Little feedback?

Translate the website [$50 awarded]

We should probably get this set up sooner than later

---

The $50 bounty on this issue has been claimed at Bountysource.

add text-align: center to .row

So far (and I think for what we have in mind) that seems like it would save us some code.

Port HIG over

This'll be a big undertaking. We should port the Human Interface Guidelines (http://elementary.io/docs/human-interface-guidelines) over to the new site.

We should also discuss how adding to/editing the HIG works. I'm all for using GitHub like everything else, but it might make the workflow easier if we generate the links to the pages more dynamically based on the file/folder structure.

Change "elementary, LLC" to "elementary LLC."

What it says on the tin. Minor technicality for the footer.

:focus style for footer links

the icons in the footer should get a nice focus style instead of the default outline

Link to the blag

elementaryos.tumblr.com

Down with the Journal. Long live the Blog.

Installation Instructions for Windows

How to burn and install from Windows

Text size changes on button

...If you click the button, come back to the page, then click near the button.

Odd.

Add payments with stripe [$15 awarded]

Sounds like stripe checkout is the way to do it

---

The $15 bounty on this issue has been claimed at Bountysource.

Email a link on mobile

Rather than serving up a 700MB - 1GB iso download on a mobile device, it'd be pretty sweet if we could email the user a link so they can get to it from a computer.

This would require a little bit of server-side code, though. Or Mailchimp, which I'm actually definitely in favor of using anyway. :)

Link the Button to Freya Beta

What it says on the tin

Add screenshot to social meta tags

Once both #70 and #23 are implemented, we can add a screenshot to the meta tags for richer social integration.

For Google+, we just add:

 <meta itemprop="image" content="http://our.image.url.here.jpg"> 

For Twitter, we replace summary with summary_large_image to get:

<meta name="twitter:card" content="summary_large_image">

...and then add:

<meta name="twitter:image:src" content="http://our.image.url.here.jpg">

Port 404 to templating system

Super quick. Include the header and footer in the 404 file.

Add a footer

Just a minimal little thing with a copyright notice

No character encoding

Firefox complains:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

We should probably specify utf-8 with <meta charset="UTF-8"> in the head.

Provide fallback for CSS3 gradients

Right now buttons have a gradient set as the background-image. We should provide an equivalent flat fallback color for browsers that don't render gradients.

fwiw the average of the colors in the gradient right now is #64B9F1

Abstract header

We should probably pull the header out into its own file, much like the footer in #65.

A simple way to do this while still being able to set page-specific titles/descriptions is to set have some variables in the header, then set them in the pages before including the header. Something like:

<?php
$page_title = 'elementary OS Freya';
$page_description = 'A fast and free replacement for Windows and OS X. Pay what you want or download for free.';

include_once('header.php');
?>

Then in the header you can do this:

<title><?=$page_title;?></title>
<meta name="description" content="<?=$page_description;?>" /> 

...etc.

Offer a choice of 32bit vs 64bit downloads

Current only 64bit is available. Should get both choices

Add Meta tags for Social Networks

We should add the proper meta tags so social sites like Google+ and Facebook pick up a nice title, description and thumbnail.

Create 404 page

What it says on the tin. Need a 404 page with a way to get back to home

Add analytics

We should add our Google Analytics code to the page so we can continue to check interest categorized by region, browsers, etc.

Add quotes from the press

We have three good ones.

Wired: “elementary OS is different… a beautiful and powerful operating system that will run well even on old PCs”
Mac Life: “a fast, low-maintenance platform that can be installed virtually anywhere”
Lifehacker: “Lightweight and fast… Completely community-based, and has a real flair for design and appearances.”

Set up blog.elementaryos.org

And link it to our tumblr

Abstract footer

We should probably pull the footer out into its own file and have it appended to each page to make sure it stays consistent and updated across pages.

This is kind of a pre-requisite to multiple pages.

Footer floating above content

The footer of the page floats over the content when the screen height is smaller than the content.

Fix tabs vs spaces

Spaces masta race, yo

Add titles to social/footer links

For accessibility and in case someone doesn't know what the icons mean.

Open social links in new tab/window

target="_blank" yo

Warn users of outdated browsers

While not many of our visitors use outdated browsers, we should warn those who do that their browser is outdated and that our site won't work properly.

On system76.com we simply throw a big ol' header on <=IE10 with a link to browsehappy.com

<!--[if lt IE 10]>
    <div id="legacy-warning">
        <h1>System76 is built on modern web technologies your browser doesn&rsquo;t support.</h1>
        <p>This version of Internet Explorer is out of date and may contain bugs or security vulnerabilities. Please <a href="http://browsehappy.com/">upgrade</a> to IE 11 or an alternative web browser.</p>
        <p>If you have questions about an order or require support, feel free to <a href="/contact">contact us</a>.</p>
        <div id="legacy-warning-buttons">
            <a href="#" onClick="document.getElementById('legacy-warning').style.display = 'none';">Dismiss</a>
            <a class="primary" href="http://browsehappy.com/">Learn More</a>
        </div>
    </div>
<![endif]-->

This is then styled up with CSS and works quite well. I'm open to discussion on how else to implement it, but no matter what let's keep it simple. :)

Set file size programmatically

So that we don't have to modify this page every time the iso changes (creating potential for human error), we should be setting the file size of the ISO programmatically.

Add a screenshot

Need at least one sexy screenshot of the default Freya desktop.

Might be interesting to do a shot with a few different sexy computers running Freya.

Would be very warm and indie of us to have kind of a set up "natural" shot like the new photos on system76

Change cursor on download button

We should use a cursor: pointer on download button.

Get Involved

Either a new page or section needs to be created to explain how to contribute.

This section should include links to Launchpad, GitHub, and Bountysource at a minimum.