-
Notifications
You must be signed in to change notification settings - Fork 0
/
005.html
339 lines (280 loc) · 15.6 KB
/
005.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<html>
<head>
<title>The Clearbold Newsletter 005 - February 19, 2013</title>
<style type="text/css">
body, p, h4, h3, h2, h1, tr, span, img {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
-webkit-text-size-adjust:none;
}
body { }
p, h4, h3, h2, h1 { color: #4B5555 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; }
a { color: #E8631F !important; border-bottom: 1px dotted #E8631F; text-decoration: none; }
a.dim { color: #4B5555 !important; border-bottom: 0 !important; }
.nobr { white-space: nowrap; }
img, h1 {
border: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
h1 {
font-size: 28px;
font-weight: bold;
line-height: 28px;
text-transform: uppercase;
}
.header h4 {
font-size: 13px;
line-height: 18px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-transform: uppercase;
}
h2 {
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
}
h3 {
font-size: 18px;
font-weight: bold;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
p {
font-size: 14px;
line-height: 18px;
margin-top: 0;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
hr {
background-color: #D3E0D9;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
color: #D3E0D9;
height: 2px;
margin-top: 0;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
}
.sidebar /*p a,*/ h4 a, .sidebar h3 a, .sidebar h2 a, .sidebar h1 a { color: #4B5555 !important; }
.sidebar p.tweet a { border-bottom: 0 !important; }
.sidebar h4 {
font-size: 11px;
line-height: 11px;
margin: 0; padding: 0;
text-transform: uppercase;
}
.sidebar h3 {
font-size: 18px;
font-weight: bold;
line-height: 31px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-transform: uppercase;
}
.sidebar p {
font-size: 13px;
line-height: 20px;
margin-top: 0;
margin-right: 0;
margin-bottom: 20px !important;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.footer p {
font-size: 13px;
}
@media only screen and (max-width: 640px) {
table[class=contenttable],
table[align=left],
table[align=right] {
width: 100% !important;
}
table[class=header] td {
text-align: center;
}
table[class=header] td {
height: auto;
}
table[class=header] {
margin-bottom: 20px;
}
.mobile-hide {
display: none;
}
td.logo {
padding-top: 0;
}
}
</style>
</head>
<body>
<table align="center" bgcolor="#F5F5EE" cellpadding="0" cellspacing="0" width="100%">
<tr><td bgcolor="#F5F5EE" width="100%" style="padding-top: 20px; padding-bottom: 20px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="640" style="margin: 0 auto;" class="contenttable">
<tr>
<td align="center" bgcolor="#FFFFFF" valign="middle" style="padding-top: 10px; padding-right: 15px; padding-bottom: 0; padding-left: 15px;">
<p>Hand-coded & delivered on an occasional basis. <webversion>View on the Web</webversion></p>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="padding: 15px;">
<table align="left" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100" class="header">
<tr>
<td bgcolor="#FFFFFF" height="120" valign="middle" width="100%" class="logo" style="text-align: center;">
<img src="images/icon_square.png" width="100" height="100" alt="Clearbold logo" />
</td>
</tr>
</table>
<table align="right" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="495" class="header">
<tr>
<td bgcolor="#FFFFFF" height="120" valign="middle" width="100%">
<h1>Newsletter</h1>
<h4><a href="#nolink" style="text-decoration: none !important; border-bottom: 0 !important; color: #4B5555 !important;" class="dim">February 19, 2013</a> - No. 005</h4>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#FFFFFF" style="padding: 15px;"><h2>The Talking About Content & Mobile Issue</h2></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="100%" style="padding: 15px;">
<table bgcolor="#FFFFFF" align="right" border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td bgcolor="#FFFFFF" class="sidebar">
<h4>Affiliate / Promotion</h4>
<h3><a href="http://asmallorange.com/hosting/?a_aid=clearbold" style="border-bottom: 0;">A Small Orange</a></h3>
<p style="margin-bottom: 20px !important;"><a href="http://asmallorange.com/hosting/?a_aid=clearbold" style="border-bottom: 0; color: #4B5555 !important;" class="dim">A feature-packed hosting provider with lightning-fast support, reasonable pricing & a green power commitment.</a> <a href="http://asmallorange.com/hosting/?a_aid=clearbold" class="">Get Hosting</a></p>
<hr noshade size="2" />
<p class="mobile-hide">Be sure to <forwardtoafriend>share the Clearbold Newsletter</forwardtoafriend> with friends & colleagues.</p>
<p class="tweet"><tweet></tweet></p>
<hr noshade size="2" class="mobile-hide" />
<p class="mobile-hide">Add <a href="mailto:newsletter@clearbold.com">newsletter@clearbold.com</a> to your contacts to ensure continued delivery.</p>
<hr noshade size="2" />
<p>We recommend bookmarking <a href="http://www.jonathoncolman.org/2013/02/04/content-strategy-resources/">the Epic List of Content Strategy Resources</a>, compiled by Jonathon Colman.</p>
</td>
</tr>
</table>
<table align="left" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="380">
<tr>
<td bgcolor="#FFFFFF">
<h3>What do we mean by “Mobile”?</h3>
<p>“In this industry, we speak a specialist language... It’s important we understand each other,” begins Jim Ramsden’s post about how we discuss context, device type and screen size.</p>
<p><a href="http://jimramsden.com/notes/no-more-mobile">http://jimramsden.com/notes/no-more-mobile</a></p>
<hr noshade size="2" />
<h3>Industry Terms and The Things We Say</h3>
<p>Corey Vilhauer issues “a call for education and clarification” when conveying methodology to our clients.</p>
<p><a href="http://eatingelephant.com/2013/01/words-we-use/">http://eatingelephant.com/2013/01/words-we-use/</a>
<hr noshade size="2" />
<h3>When a Breakpoint Becomes a Page</h3>
<p>Mark Boulton ponders responsive design breakpoints and wonders, “At what point did they start becoming ‘the point at which I will create a new layout entirely’, or ‘the point at which I introduce a new canvas’?”</p>
<p><a href="http://www.markboulton.co.uk/journal/theinbetween">http://www.markboulton.co.uk/journal/theinbetween</a></p>
<hr noshade size="2" />
<h3>10 Commandments of Modern Web Design</h3>
<p>Jared Ponchot of Lullabot compiles what is quite possibly the best consolidated list of modern web design considerations I’ve seen.</p>
<p><a href="http://www.lullabot.com/articles/10-commandments-modern-web-design">http://www.lullabot.com/articles/10-commandments-modern-web-design</a></p>
<hr noshade size="2" />
<h3>The Value Behind Responsive Web Design</h3>
<p>Electric Pulp takes numbers from a recent e-commerce redesign, quietly deploys a responsive update, and watches conversions, transactions and revenue soar.</p>
<p><a href="http://electricpulp.com/notes/you-like-apples/">http://electricpulp.com/notes/you-like-apples/</a></p>
<hr noshade size="2" />
<h3>Building a Writing Tool That Embraces the Web</h3>
<p>The team behind upcoming collaboration tool <a href="http://editorially.com/">Editorially</a> is “figuring out just what writers need from a tool built on and for the Web...the two pillars of [which] seem to be the collaborative and Markdown-enabled writing experience.”</p>
<p><a href="http://pandodaily.com/2013/02/15/editorially-building-a-writing-tool-that-embraces-the-web/">http://pandodaily.com/2013/02/15/editorially-building-a-writing-tool-that-embraces-the-web/</a></p>
<hr noshade size="2" />
<h3>Content Modelling and Design Diplomacy</h3>
<p>“Projects are halted and delayed - even fail - while that content is shoved into a design...because all of us, writers included, struggle to think of content independent of its context.”</p>
<p><a href="https://blog.gathercontent.com/content-modelling-and-design-diplomacy">https://blog.gathercontent.com/content-modelling-and-design-diplomacy</a></p>
<hr noshade size="2" />
<h3>Released Today! 11% of All Browsing Now From Smartphones</h3>
<p>Tablets were lumped in with PCs for the other 89%.</p>
<p><a href="http://www.quirksmode.org/blog/archives/2013/02/browser_stats_f_6.html">Browser Stats for Q4 2012 and All of 2012</a></p>
<hr noshade size="2" />
<h3>Opera Browser Switches to Webkit</h3>
<p>With Microsoft struggling to gain ground in the mobile space, the Webkit rendering engine at the heart of iOS & Android browsers—and powering Safari & Chrome—has come to define the mobile web browsing experience (and mobile web development). Alternative browser Opera announced that it is switching from its own engine to Webkit. What does it all mean? John Resig, creator of jQuery, has perhaps the best response:</p>
<p><a href="http://ejohn.org/blog/webkit-is-the-jquery-of-browser-engines/">http://ejohn.org/blog/webkit-is-the-jquery-of-browser-engines/</a></p>
<p>And keep in mind, as Peter-Paul Koch points out, with 24 Webkits, “there is no ‘Webkit on mobile’”:</p>
<p><a href="http://quirksmode.org/webkit.html">http://quirksmode.org/webkit.html</a></p>
<hr noshade size="2" />
<h3>Recommended Reading</h3>
<p><b>The Mobile Book</b> - Smashing Magazine’s The Mobile Book is a wonderful tour through the emergence of mobile, device and interaction considerations, and provides a wealth of design and development techniques. Get a copy and read an article a day -<br />
<a href="http://amzn.to/YQUdii">http://amzn.to/YQUdii</a></p>
<p><b>Content Everywhere</b> - The latest Content Strategy guide, from Sara Wachter-Boettcher, is packed with practical insight on content planning, structuring, and creating content ready to go anywhere. Because content will go everywhere -<br />
<a href="http://amzn.to/11PhgWG">http://amzn.to/11PhgWG</a></p>
<hr noshade size="2" />
<p>Be sure to <forwardtoafriend>share the Clearbold Newsletter</forwardtoafriend> with friends & colleagues, and add <a href="mailto:newsletter@clearbold.com">newsletter@clearbold.com</a> to your contacts to ensure continued delivery.</p><p>When the list hits 200 subscribers, we’ll select one subscriber to receive a <a href="http://www.google.com/nexus/7/">Google Nexus 7</a>.</p>
<p>‘Til next time,<br />Mark</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" style="padding: 15px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<p>The Clearbold Newsletter is an occasional digest email sent by Clearbold, LLC, Pelham, MA.</p>
<p><a href="http://clearboldne.ws">clearboldne.ws</a> - <a href="mailto:newsletter@clearbold.com">newsletter@clearbold.com</a></p>
<p>You may <unsubscribe>unsubscribe</unsubscribe> at any time.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>