forked from foundation/foundation-sites
/
case-soapbox.php
63 lines (53 loc) · 2.91 KB
/
case-soapbox.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<? $page_title = "ZURBsoapbox Case Study" ?>
<?php include("includes/_header.php"); ?>
<header>
<div class="row">
<div class="twelve columns">
<h1>Case Studies</h1>
<h4>How people are using Foundation to build responsive, future-friendly sites.</h4>
</div>
</div>
</header>
<section id="mainContent">
<div class="row">
<div class="ten columns push-two">
<div class="row">
<div class="six columns">
<p class="show-for-small"><a href="index.php">← Back to Home</a></p>
<h2>ZURBsoapbox</h2>
<h4 class="subheader">Rapidly launching and iterating for our audience.</h4>
<p>ZURBsoapbox is a speaking series we host at ZURB HQ, where we invite influential entrepreneurs, designers, and other tech types to come and share their experiences.</p>
<p>We launched <a href="http://www.zurbsoapbox.com">ZURBsoapbox</a>, the first site built with Foundation, in order to raise engagement and create a resource for anyone who can't attend in person. <strong>Here's some of the highlights.</strong></p>
<h4>Instant Mobile Site</h4>
<p>Thanks to Foundation's <a href="docs/grid.php">built-in responsive grid</a>, as soon as we put together the desktop prototype we already had a working mobile prototype, ready for tablets, phones and other devices.</p>
</div>
<div class="six columns">
<img src="images/case-soapbox-1.jpg" id="sideDeviceDesktop" />
</div>
</div>
<div class="row">
<div class="six columns push-six">
<h4>Device-Specific Function</h4>
<p>Mobile devices can't handle our standard flash audio player, so we used <a href="docs/elements.php">Foundation's mobile visibility classes</a> to selectively hide the flash element, and show a mobile-friendly audio file link.</p>
<h4>Next Steps: Images</h4>
<p>We practice what we preach, and we're always iterating on Foundation-based sites. Our next step is to implement a more mobile-friendly image solution, so devices don't have to load quite as much data. There's a lot of good work going on in this area, but also a lot to figure out.</p>
</div>
<div class="six columns pull-six">
<img src="images/case-soapbox-2.jpg" />
</div>
</div>
</div>
<div class="two columns pull-ten">
<ul class="side-nav">
<li><a href="index.php">← Home</a></li>
<li class="divider"></li>
<li><a href="case-flite.php">Flite</a></li>
<li><a href="case-swizzle.php">Swizzle</a></li>
<li class="active"><a href="case-soapbox.php">ZURBsoapbox</a></li>
<li><a href="case-reel.php">Reel</a></li>
<li><a href="case-zurbjobs.php">ZURBjobs</a></li>
</ul>
</div>
</div>
</section>
<?php include("includes/_footer.php"); ?>