Come Aboard page and its constituent parts.

mobilewood · Jun 16, 2012 · dd6e396 · dd6e396
1 parent d44b1f7
commit dd6e396
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 2 deletions.
diff --git a/come-aboard.html b/come-aboard.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html> <!-- TODO: PUT APPCACHE BACK!! -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0">
+  <title>Come Aboard</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body id="come-aboard">
+
+<header role="banner">
+  <a href="index.html"><img src="assets/fflogo.png" alt="Future Friendly" title="Future Friendly"></a>
+  <h1>Come Aboard</h1>
+</header>
+
+<p>You are part of this thing. When you <a href="thinking.html">go future friendly</a>, you help your own work and you offer an example to others, too. Here are some things you can do.</p>
+
+<section id="philosophy-first">
+  <header>
+    <h2>Put philosophy before technique</h2>
+  </header>
+  <p>Future-friendliness describes design principles, not specific techniques. Individual techniques will evolve, thrive, and then decline. No single method, technology, or workflow is perfect for all projects. Don't be religious about techniques. Instead, be passionate about future-friendly values.</p>
+</section>
+
+<section id="call-it-by-name">
+  <header>
+    <h2>Call it by name</h2>
+  </header>
+  <p>Use the term "future friendly" when you discuss work that follows these design principles. There is power in a name, and popularizing this phrase is part and parcel of popularizing the ideals behind it. If you care to use it, the hashtag for future-friendly topics is <a href="http://twitter.com/search/%23ffly">#ffly</a>.</p>
+</section>
+
+<section id="spread-word">
+  <header>
+    <h2>Spread the word</h2>
+  </header>
+  <p>Introduce future-friendly thinking to your peers, employees, and managers. Share this site with them. As you advocate, understand that new ways of thinking often meet resistance. Strive to understand where that resistance comes from. Frame the benefits according to your colleagues' personal goals—for example, business value, empowering users, reaching a larger audience, easing long-term maintenance, whatever matters most to them.</p>
+</section>
+
+<section id="techniques">
+  <header>
+    <h2>Select techniques that are future friendly</h2>
+  </header>
+  <p>Examine your project's goals, and adopt a process and approach that accomplishes those goals while following future-friendly principles. This website purposely describes only those broad ideals, but the <a href="thinking.html">Thinking</a> page links to resources for action and education. The authors of this site frequently write in detail about current future-friendly approaches, and we invite you to get acquainted with our work and share your own with us:</p>
+</section>
+
+
+<section id="signatories">
+  <ul>
+    <li><a href="http://blog.trasatti.it/">Andrea Trasatti</a></li>
+    <li><a href="http://brian.io/">Brian LeRoux</a></li>
+    <li><a href="http://yiibu.com/">Bryan Rieger</a></li>
+    <li><a href="http://bradfrostweb.com/">Brad Frost</a></li>
+    <li><a href="http://userfirstweb.com/">Jason Grigsby</a></li>
+    <li><a href="http://adactio.com/">Jeremy Keith</a></li>
+    <li><a href="http://globalmoxie.com/">Josh Clark</a></li>
+    <li><a href="http://www.lukew.com/">Luke Wroblewski</a></li>
+    <li><a href="http://lyza.com/">Lyza D. Gardner</a></li>
+    <li><a href="http://scottjehl.com/">Scott Jehl</a></li>
+    <li><a href="http://designmind.frogdesign.com/blog/author/beyond-mobile/">Scott Jenson</a></li>
+    <li><a href="http://yiibu.com/">Stephanie Rieger</a></li>
+    <li><a href="http://timkadlec.com/">Tim Kadlec</a></li>
+  </ul>
+</section>
+
+<section id="learn-more">
+    <header>
+      <h2>Learn more</h2>
+    </header>
+  <p>Learn more by following Future Friendly on Twitter at <a href="http://twitter.com/future_friendly">@future_friendly</a> or <a href="http://twitter.com/dmolsen/ffly">this list of future-friendly practitioners</a> assembled by <a href="http://twitter.com/dmolsen">Dave Olsen</a>.</p>
+</section>
+
+
+<nav role="navigation"> 
+  <ul> 
+    <li><a href="index.html">Home</a></li> 
+    <li><a href="thinking.html">Thinking</a></li> 
+    <li><a>Come Aboard</a></li>
+  </ul> 
+</nav>
+
+<footer role="contentinfo">
+  <ul>
+    <li>We're <a rel="license" href="http://creativecommons.org/licenses/by/3.0">Creative Commons friendly.</a></li>
+    <li><a href="https://twitter.com/grigs/mobilewood/members">Talk to us.</a></li>
+  </ul>
+</footer>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -59,7 +59,7 @@ <h2>Undersignums</h2>
   <ul>
     <li><a>Home</a></li>
     <li><a href="thinking.html">Thinking</a></li>
-    <li><a href="resources.html">Resources</a></li>
+    <li><a href="come-aboard.html">Come Aboard</a></li>
 </ul>
 </nav>
 

diff --git a/styles.css b/styles.css
@@ -304,6 +304,10 @@ header h2:before, header h2:after {
   #signatories ul {
     margin: 0 8%;
   }
+  #come-aboard #signatories ul {
+    margin: 1em 0 0 0;
+  }
+
   #signatories li {
     text-transform: lowercase;
     font-variant: small-caps;

diff --git a/thinking.html b/thinking.html
@@ -82,7 +82,7 @@ <h2>Command your Fleet</h2>
   <ul> 
     <li><a href="index.html">Home</a></li>
     <li><a>Thinking</a></li>
-    <li><a href="resources.html">Resources</a></li> 
+    <li><a href="come-aboard.html">Come Aboard</a></li> 
   </ul> 
 </nav>