Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
74 lines (74 sloc) 3.04 KB
<html>
<head>
<meta charset="utf-8">
<title>Viewporter</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="stylesheets/normalize.css">
<link rel="stylesheet" href="stylesheets/main.css">
</head>
<body>
<header class="header group">
<div class="container">
<h1 class="trafalgar">Viewporter</h1>
<p class="great-primer">An <a href="http://news.bbc.co.uk/sport1/hi/football/euro_2008/7479459.stm">“absolutely phenomonal”</a> tool for viewing websites at any size<sup>*</sup></p>
<!--<p>You want your designs to stand the test of time, just like Motty's commentary has.</p>-->
</div>
</header>
<div role="main">
<section class="group size-section">
<div class="group container">
<div class="region size-description">
<h2>Any site at any size</h2>
<h3 class="pica">Designing for the unknown</h3>
<p class="lead">
Make sure that your content adapts and scales properly at any width and height, find the breaking-point in the design and apply tweaks appropriately.
</p>
</div>
<div class="region size-figure">
<figure>
<img src="stylesheets/images/url_size_toggle.png">
<figcaption class="img-caption long-primer">Quickly toggle between size and URL input</figcaption>
</figure>
</div>
</section>
<section class="group presets-section">
<div class="group container">
<div class="region presets-description">
<h2>Presets</h2>
<p class="lead">
Choose from a number of pre-defined dimensions or create your own.
</p>
<h3>Shortcuts</h3>
<p class="lead">
Hit <strong>1 - 9</strong> on the keypad to change between presets.
</p>
<p class="lead">
Press <strong>F</strong> to toggle fullscreen mode.
</p>
</div>
<div class="region presets-figure">
<figure>
<img src="stylesheets/images/preset_box.png">
<figcaption class="img-caption long-primer">Store preset sizes relevant to your project</figcaption>
</figure>
</div>
</section>
<section class="group saving-section">
<div class="group container">
<div class="region saving-description">
<h2>State Saving</h2>
<p class="lead">
Preferences (URLs and presets) are saved to local storage.
</p>
</div>
<div class="region saving-figure">
<figure>
<img src="stylesheets/images/saving.png">
<figcaption class="img-caption long-primer">Quickly toggle between size and URL input</figcaption>
</figure>
</div>
</section>
<p class="key brevier"><sup>*</sup> This only really makes sense if you are aware that this tool used to be called "Motson".
</div>
</body>
</html>