-
Notifications
You must be signed in to change notification settings - Fork 72
/
index.html
170 lines (146 loc) · 7.7 KB
/
index.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I Responsive?</title>
<meta name="description" content="Show off how responsive design looks across different browsers easily with this 4 in 1 viewport tool. See how your site looks on desktop, laptop, ipad & iphone.">
<link rel="stylesheet" href="../css/ami.css">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30791350-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="ami">
<div class="wrapper">
<section class="display">
<div class="mobile">
<iframe id="mobile" src="http://responsivedesignweekly.com">
</iframe>
</div>
<div class="tablet">
<iframe id="tablet" src="http://responsivedesignweekly.com">
</iframe>
</div>
<div class="laptop">
<iframe id="laptop" src="http://responsivedesignweekly.com">
</iframe>
</div>
<div class="desktop">
<iframe id="desktop" src="http://responsivedesignweekly.com">
</iframe>
</div>
</section>
</div>
<section class="url">
<h1>See your site responsive</h1>
<form id="rwdform" name="rwdform">
<input type="url" id="url" name="url" value="" placeholder="http:// <-must have">
<a class="button" href="#" onClick="_gaq.push(['_trackEvent', 'RWD', 'URL', document.rwdform.url.value]);" >GO!</a>
</form>
<div class="about-tool">
<h2>How it works</h2>
<ol>
<li>Add your URL to the input field</li>
<li>Click GO (reloads the preview) or press Enter (reloads the page)</li>
<li>Admire your good work</li>
</ol>
<h2>Features</h2>
<ul>
<li><code>http://localhost/</code> works so it's great for taking screenshots of local development URLs</li>
<li>Send someone a link with your site already embeded by using <code>?url=http://www.yoursite.com</code> - <a href="http://ami.responsivedesign.is/?url=http://surfthedream.com.au">example</a></li>
<li>Rearrange and reorder the devices by clicking and dragging on the device</li>
</ul>
<p>I'm alwasy trying to improve the tool so please <a href="http://www.twitter.com/justinavery">tweet me</a> your feedback on bugs and suggestions.</p>
<h2> About Am I Responsive</h2>
<p class="intro">A time saving exercise by <a href="http://twitter.com/justinavery">@justinavery</a> for <a href="http://responsivedesignweekly.com">RWD Weekly Newsletter</a></p>
<p>I take a lot of screen shots of the various device breakpoints for <a href="http://alpha.responsivedesign.is">responsive design</a> and it takes a while to prepare them. This tools allows me to get what I need quickly, and hopefully it can be helpful for showing your more visual clients what you mean by responsive design when a suite of products isn't at the ready.</p>
<p>This is <strong>not</strong> a tool for testing, it is really important that you do that on real devices. This instead is a tool for quick screenshots (for me) and to visually allow people to <em>“get”</em> what you mean in client meetings.</p>
<h3>Viewports</h3>
<dl>
<dt>Desktop</dt>
<dd>1600x992px scaled down to <code>scale(0.3181)</code></dd>
<dt>Laptop</dt>
<dd>1280x802px scaled down to <code>scale(0.277)</code></dd>
<dt>Tablet</dt>
<dd>768x1024px scaled down to <code>scale(0.219)</code></dd>
<dt>Mobile</dt>
<dd>320x480px scaled down to <code>scale(0.219)</code></dd>
</dl>
<h3>A note on the viewports</h3>
<p>The viewports I have chosen are based on the devices that were a part of the responsive PSD layout I previously bought, and yes they are all Apple. Apologies to all the Android fans out there, I'm sure a few of you have the <em>“Android has a bigger market share”</em> argument in mind but although you're right I just didn't have that suite of images when I started. If there's enough of a desire I could do a suite of other products, but I'm just not sure if adding those will improve the basic function of the tool.</p>
<h2>Updates</h2>
<ul>
<li><em>23/02/13</em> Updated the instructions to explain how to embed your site in a link and how to move and reorder the devices.</li>
<li><em>23/02/13</em> Updated the iFrame background color to be <code>#fff</code> because if it isn't set on the previewed site you see device image instead.</li>
<li><em>11/02/13</em> Added a check to remove a # at the end of a URL, it was upsetting the layout.</li>
<li><em>10/02/13</em> Updated so that pressing enter after adding a url will use the ?url get variable to update the iframes. This also means that you could share a link like <a href="http://ami.responsivedesign.is?url=http://www.thegreatdiscontent.com">http://ami.responsivedesign.is?url=http://www.thegreatdiscontent.com</a> and it will load it up, helpful for emailing clients.</li>
<li><em>09/02/13</em> Added jQuery UI for the ability to drag the elements around the page. Remember that the <code><div></code>'s are more than the visible image so you might need to play around a bit with where you can click. Thanks <a href="http://www.timjarvis.com/">Tim</a>.</li>
<li><em>09/02/13</em> update the layout to be responsive across devices (even though it was just a tool for screenshots), although the iframes are WAY taller on tablet and iphone then they should be, still need to fix that... thanks <a href="https://twitter.com/silentritual/status/299826821506162688">@silentritual</a> & <a href="https://twitter.com/amberweinberg/status/299897931346104321">@amberweinberg</a>.</li>
<li><em>09/02/13</em> Scroll bars removed from tablet and mobile, cheers <a href="https://twitter.com/benbrignell/status/299837240899678208">@benbrignall</a>.</li>
</ul></p>
</div>
<div class="social">
</div>
</section>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// Change iFrame on a Button Click Event
$(".button").click(function(event){
$("iframe").attr('src', $( '#url' ).val());
});
});
</script>
<script>
$(document).ready(function() {
var a = 3;
$('.desktop,.laptop,.tablet,.mobile').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
$('.display div').click(function() {
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
});
</script>
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var first = getUrlVars()["url"];
var first = decodeURIComponent(first);
var first = first.replace(/\#$/, '');
if(first === "undefined") {
// don't do anything.
}
else {
// take the url variable and update the iframes and input field
$("iframe").attr('src',(first));
$('#url').attr('value',(first));
}
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>