Code Monkey home page Code Monkey logo

dwyl-site's Introduction

Welcome to the dwyl website! GitHub Workflow Status

It's as ever a work in progress, so please don't hesitate to share your ideas on how to make it better!

The current site was designed by @harrygfox and built by @Cleop, @ZooeyMiller & @finnhodgkin.

You can see the original Invision slides here

How?

Technology

Hosted on GitHub Pages with Cloudflare for SSL

Functional CSS with Tachyons ❤️

Hop over to learn-tachyons to find out how we use functional css to power our website.

Javascript

We've kept JS to a minimum on the site, using it only when required to enhance UX, and taking every care to ensure that it gracefully degrades for users with JavaScript disabled.

Viewing locally

With Live Reload

To view the site locally, execute the following two commands:

git clone [email protected]:dwyl/dwyl-site.git & cd dwyl-site
python3 -m http.server

Then open your web browser to: http://localhost:8000

Accessibility

The site meets WCAG 2.0 Level A for accessibility. Please raise an issue if you notice any accessibility problems!

Cloudflare setup

We're using the Cloudflare free tier to serve dwyl.com over https.

To add your own account head over to cloudflare.com and sign up for an account. Add your custom domain and wait while Cloudflare scans your domain setup. Once that's done you'll need to add the Cloudflare nameservers to your own DNS.

Changes involving nameservers can sometime take time, so if something isn't working straight away just be patient and come back to it later.

Adding SSL

GitHub page don't provide https access to custom domains, so we use Cloudflare to reroute requests through their secure server. Hop over to the Crypto tab of the Cloudflare control panel and change SSL to flexible:

selection_091

To force the site to always redirect http requests to https add a page rule:

selection_092

Adding subdomains

dwyl.com has three subdomains all set up in a slightly different way.

Google form redirect - one subdomain on dwyl.com just redirects to a Google form. First add a general CNAME record: CNAME for redirect

Then add a page rule to redirect to the specific URL: Page rule for redirect

A name subdomain - hits.dwyl.com is added via a standard A name record:

A name record

GitHub pages subdomain - tachyons-bootstrap.dwyl.com is hosted via GitHub pages. There's a slightly more complicated setup process for subdomains hosted in this way which is explained well in this guide.

How do I add myself to the team page?

You'll need to copy and past this block of code, replace your details where noted, and paste it at the bottom of the team section (just before the closing <section> tag, with a comment <!-- END TEAM PROFILES -->) in team.html.

<div class="dib w-25-l w-30-ml w-90 pt5 v-top">
  <input type="checkbox" id="YOUR-NAME" class="dn">
  <label for="YOUR-NAME" class="pointer">
    <img src="./img/common/team/YOUR-GITHUB-HANDLE.png" alt="YOUR-NAME" class="br-100 w5 w4-plus-l">
    <p class="b dwyl-dark-grey f4 mb2">YOUR-NAME</p>
    <p class="mt1">YOUR-JOB-ROLE</p>
  </label>
  <div class="dn description">
    <a href="https://github.com/YOUR-GITHUB-HANDLE" class="mr3 link dwyl-bg-yellow br-100 center w2 h2 dib">
      <span class="f0">YOUR-NAME's GitHub</span>
      <i class="fa fa-github dwyl-dark-gray f3 v-mid pt1 center pr1" aria-hidden="true"></i>
    </a>
    <div class="mh1 dib"> </div>
    <a href="https://twitter.com/YOUR-TWITTER-HANDLE" class="ml3 link dwyl-bg-yellow br-100 center w2 h2 dib">
      <span class="f0">YOUR-NAME's Twitter</span>
      <i class="fa fa-twitter dwyl-dark-gray f3 v-mid pt1 center pr1" aria-hidden="true"></i>
    </a>
    <p class="ph4 lh-copy tl">
      YOUR-SELF-DESCRIPTION-(50-100 words)
    </p>
  </div>
</div>

dwyl-site's People

Contributors

andrewmacmurray avatar cleop avatar codybarr avatar dana94 avatar dependabot[bot] avatar des-des avatar enociz avatar finnhodgkin avatar harrygfox avatar hdrdavies avatar iteles avatar jay-meister avatar katbow avatar luchoturtle avatar mantagen avatar minaorangina avatar msmichellegar avatar natalialkb avatar nelsonic avatar ritz078 avatar rob-rychs avatar robstallion avatar roryc89 avatar rub1e avatar rupeshiya avatar samhstn avatar simonlab avatar sophielevens avatar yuanchuan avatar zooeymiller avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dwyl-site's Issues

Hero image is cut off when resized

I would love the image to always look like this:
screen shot 2015-11-04 at 00 48 46

But sadly, on mobile, it does this:
screen shot 2015-11-04 at 00 49 45

And even worse on tall thin phones:
screen shot 2015-11-04 at 00 52 03

Then on wide desktop screens:
screen shot 2015-11-04 at 00 53 42

There HAS to be a better solution that manually testing 20 different break points and photoshopping the image to add more and more image 'padding' to the sides every time the aspect ratio is anything short of 'perfect'. 😣

dwyl logo on white background

Our logo looks way better on coloured background than on a white background. Need to look at the options for what it could look like on white.

Create short copy for 'About Us' panel

As a variation, we'll add a temporary panel/section to the website between the email sign up and the dwyl values sections. We need to create the copy for this.

List of Companies we have Worked With

We need a collection of logos of companies we have worked with for the site.

  • Burberry
  • Groupon
  • OneFineStay
  • Oxfam
  • Santander
  • CAF

Please add to this list.

Diagram of MVP methodology

How?

We have a 3-step approach to getting your idea(s) tested in the hands of real people.

  1. Understand the problem that needs to be solved and ensure the intended users feel the pain and need for a solution.
  2. Prototype the solution and get feedback from real people as fast as possible.
  3. Review customer feedback and confirm we are making progress toward solving the problem. If

relates to: #60

Contact Form?

Do we want to have a contact form on our website...?

(Hint: there is a _right answer_ to this question... 😉 )

Create endpoint to hide Mandrill API key

Having our Mandril API key exposed to the world is a terrible way to do things. We need to create a Mandrill endpoint (on Heroku or Firebase?) to fix this and hook the functionality of sending an email into index.html.
The form is already commented out in index.html (ID = #signup https://github.com/dwyl/dwyl.github.io/blob/master/index.html#L56) and will provide a single field so people visiting dwyl.io can enter their email address and have it sent to us.

Repo for proposed emailing 'schedule' and content?

Is it a good idea to have a separate repo with some information/discussion around emailing people? For example what the appropriate content/frequency would be, better the understanding of the reasons why people sign up to get emails from us, what the alternatives to emailing people are (blog, etc) and complimentary communication methods.
Or maybe a more general repo on communication with people who are interested in dwyl?

@nelsonic Thoughts?

What is a Minimum Viable Product (MVP) ?

While the answer this question might be _obvious_ to most of us with experience, its _not obvious_ to people without technical experience. So we need a post clarifying what this means.

Create list of SEO actions

Create a list of what needs to be done to start showing up in the first page of Google search results by the end of August.

Blog: Blog post: Read up on opposing views

We need to have an even better notion of views opposing #dwyl (given it's our brand) so that we can form a constructive and cohesive set of thoughts on the subject.

This is an interesting piece that should be read for example.

There’s little doubt that “do what you love” (DWYL) is now the unofficial work mantra for our time. The problem is that it leads not to salvation, but to the devaluation of actual work, including the very work it pretends to elevate — and more importantly, the dehumanization of the vast majority of laborers.

Remove harp

HarpJS is total overkill for this site and following some excellent work by @harrygfox as well as the current Founders & Coders cohort, there are plenty of examples out there for future students. We need to go back to simplicity.

Intentions

Hey, you might think this a stupid question but, what exactly is dwyl?

I was thinking about this when doing the keywords used in #41.

My question can also be furthered upon as follows: is dwyl.io the website for your app called time or is it the site for dwyl (which is an organisation of open source contributing developers and designers making things to help them make things if I am right)?

Thanks in advance for answering, I really need this cleared up 😀

Complete overhaul of website

There are a few issues with the website as it stands:

  • It doesn't make it clear what we do
  • The call to action is murky - what are people actually signing up for?
  • It isn't very captivating (you get a feeling of meh when you see it)

20151101-dwylio-website-screenshot

Given that we're at the web summit in the next couple of days, this should be our top priority at the moment.

Convert existing site into using PureCSS

We've agreed to use PureCSS for the WebSummit milestone, as discussed here. We will need to debate when we're moving away from PureCSS again after the websummit.

For now, the first task is to move our existing site content into the PureCSS framework so that we can then iterate on it and have a log of all the ways we made it better. Progression screenshots #ftw 👍

Contact form vs mailto link

How much more effective is a contact form vs a simple mailto link?

Currently on the website we have 2 places with simple mailto links (and no contact forms).
One on the top right:
dwylio top right mailto link

And one on the bottom right (both the envelope and the email address itself):
dwylio bottom right mailto link

These have never been used.

Of course I suspect that the reason for this is the massive call to action, but it will be interesting to A/B test in future iterations how contact forms work vs mailto links.
current dwylio call to action

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.