-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
492 lines (429 loc) · 20.3 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
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
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HeatMap Smashing Magazine</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
<link href="assets/styles/reset.css" rel="stylesheet" type="text/css">
<link href="assets/styles/style.css" rel="stylesheet" type="text/css">
</head>
<!-- Here starts the Page (BODY) -->
<body>
<!-- This is the Navbar -->
<nav class="navbar flex justify-space-between align-center">
<ul class="flex align-center justify-space-between">
<li class="logo"></li>
<li class="bold li-articles">Articles</li>
<li class="bold guides">Guides</li>
<li class="bold books">Books</li>
<li class="bold events">Events</li>
<li class="bold li-membership">Membership</li>
<li class="bold jobs">Jobs</li>
<li class="bold new newsletter">Newsletter</li>
<li class="bold new podcasts">Podcasts</li>
<li class="bold">More</li>
<li class="search bold flex align-center">
Search Articles
</li>
</ul>
</nav>
<!-- Main Section with a few articles -->
<main>
<h1 class="bold">
<span>
Don’t Miss These Latest
</span>
<br />
<span>
Articles
</span>
</h1>
<article class="main-article row1">
<div class="flex align-center">
<div class="article-picture rotate-picture"></div>
<p class="bold">Paul Boag <span class="italic">wrote</span></p>
</div>
<div class="title">
<h2>How To Convince Others Not To Use Dark Patterns</h2>
<span>comment</span>
</div>
<ul class="flex justify-space-between">
<li>#Ethics</li>
<li>#Design Patterns</li>
<li>#User Experience</li>
</ul>
</article>
<article class="main-article row1">
<div class="flex align-center">
<div class="article-picture rotate-picture"></div>
<p class="bold">Paul Boag <span>wrote</span></p>
</div>
<div class="title">
<h2>How To Convince Others Not To Use Dark Patterns</h2>
<span>comment</span>
</div>
<ul class="flex justify-space-between">
<li>#Ethics</li>
<li>#Design Patterns</li>
<li>#User Experience</li>
</ul>
</article>
<article class="main-article row2">
<div class="flex align-center">
<div class="article-picture rotate-picture"></div>
<p class="bold">Paul Boag <span>wrote</span></p>
</div>
<div class="title">
<h2>How To Convince Others Not To Use Dark Patterns</h2>
<span>comment</span>
</div>
<ul class="flex justify-space-between">
<li>#Ethics</li>
<li>#Design Patterns</li>
<li>#User Experience</li>
</ul>
</article>
<article class="main-article row2">
<div class="flex align-center">
<div class="article-picture rotate-picture"></div>
<p class="bold">Paul Boag <span>wrote</span></p>
</div>
<div class="title">
<h2>How To Convince Others Not To Use Dark Patterns</h2>
<span>comment</span>
</div>
<ul class="flex justify-space-between">
<li>#Ethics</li>
<li>#Design Patterns</li>
<li>#User Experience</li>
</ul>
</article>
</main>
<!-- Big Adversiment about Memebership -->
<div class="membership flex justify-space-between">
<div class="list">
<p>All you want is a fast, secure web? That's why we use ad blockers, too, you know. We gotta keep those
servers running though... So we've set up Membership for smart cookies like you. Coming up next:</p>
<ul>
<li>Smashing TV Session with Carie Fisher, Harris Schneiderman on “Expand Your Test Coverage: Manual And
Automated Accessibility Testing Unite”,</li>
<li>New discounts on tools, services and tutorials,</li>
<li>...plus a seasoned selection of fancy cats.</li>
</ul>
<button type="button" class="about-membership">About Smashing Membership →</button>
</div>
<div class="big-picture rotate-picture"></div>
</div>
<!-- Section with Articles, TryMyUI Adversiment and Merbership Counter-->
<div class="articles">
<article class="minor-article">
<h3>How To Build A Vue Survey App Using Firebase Authentication And Database</h3>
<p>How To Build A Vue Survey App Using Firebase Authentication And Database</p>
</article>
<article class="minor-article">
<h3>Reducing Design Risk</h3>
<p>The pressure to rush market and usability research carries risk. In this article, we’ll cover four
practical techniques to mitigate this risk and create designs that better serve customers and the
company.</p>
</article>
<article class="minor-article">
<h3>Meet SmashingConf Live: Our New Interactive Online Conference</h3>
<p>The cat is out of the bag! Meet SmashingConf Live (June 9–10), a friendly online conference. With
interactive live sessions, practical insights, accessible speakers, collaborative notes and fireplace
chats with like-minded folks.</p>
</article>
<div class="trymyui">
<div class="trymyui-inner">
<h4 class="bold">trymy UI</h4>
<p>Remote usability testing for all interfaces, devices, and teams.</p>
<button>FREE TRIAL</button>
</div>
</div>
<div class="feature flex column align-center">
<div class="feature-image"></div>
<h4 class="bold">1,651 smashing members</h4>
<p>
A friendly community that keeps this website alive. With books, webinars, discounts and networking — for
just 1 coffee a month. Join the family
</p>
<button>
Explore features
</button>
</div>
<article class="minor-article">
<h3>Smashing Podcast Episode 15 With Phil Smith: How Can I Build An App In 10 Days?</h3>
<p>In this episode of the Smashing Podcast, we’re talking about building apps on a tight timeline. How can
you quickly turn around a project to respond to an emerging situation like COVID-19? Drew McLellan talks
to Phil Smith to find out.</p>
</article>
<article class="minor-article">
<h3>Meet SmashingConf Live: Our New Interactive Online Conference</h3>
<p>
We’re going to build a mobile application that pulls data from the Marvel Comics API, ; the data will
show Marvel comics and you’ll be able to choose your favorites. At the end, we’ll create a native build
of the project on Android.
</p>
</article>
<article class="minor-article">
<h3>Join Our New Online Workshops On CSS, Accessibility, Performance, And UX</h3>
<p>Our initial online workshops went so well, we have scheduled many more. Find out how what we learned from
those first workshops and what we have coming up over the next two months.</p>
</article>
<article class="minor-article">
<h3>Readability Algorithms Should Be Tools, Not Targets</h3>
<p>Readability programs may seem like a godsend, but the worst thing writers can do is write to please them
above all others. Finding your voice is hard enough without also trying to sound like everyone else.</p>
</article>
<div class="feature flex column align-center">
<div class="feature-image"></div>
<h4 class="bold">New on Smashing TV</h4>
<p>
A channel where seasoned developers show how they design, build, work and play. Coming up next: Expand
Your Test Coverage: Manual And Automated Accessibility Testing Unite with Carie Fisher, Harris
Schneiderman (May 19).
</p>
<button>
Explore features
</button>
</div>
</div>
<!-- Links for Latest Articles -->
<div class="links flex justify-center">
<div>See all latest articles</div>
</div>
<!-- Adiversiment about CLICKS -->
<section class="click flex column align-center">
<h2 class="font-size-52 text-center">Meet “Click!”: Encourage Clicks<br />Without Shady Tricks</h2>
<p class="text-center">
Our new book on how to <b>boost business KPIs</b>, build trust and address doubts effectively — without
alienating people along the way. By Paul Boag.
</p>
<button class="bold">Jump to table of contents</button>
<div class="click-image">
</div>
</section>
<!-- Section about Week Person -->
<div class="week-person flex">
<div class="picture rotate-picture"></div>
<div class="text">
<h4>PERSON OF THE WEEK</h4>
<p>Jason Lengstorf (<a href="#">@jlengstorf</a>) is a principal developer experience engineer at Netlify and
the host of <a href="#" class="italic">Learn With Jason</a>, a live-streamed video show where he pairs
with people in the community to learn something new in 90 minutes. He’s passionate about building
healthy, efficient teams and systems, and he’s done his best to positively influence the community,
leadership, and technical health of open source and companies including Gatsby and IBM. He also shares
his experiences on his <a href="#">blog</a> and as a <a href="#">speaker</a>. Thank you for sharing and
caring, dear Jason!</p>
</div>
</div>
<!-- Section Writers -->
<div class="writers">
<article class="wrote-item">
<div class="article-picture rotate-picture"></div>
<div class="text-writer">
<span>Michelle Barker wrote</span>
<h3>Intersection Observer Visualizer</h3>
<p>may 12, 2020 — Chris Coyier shares a handy trick for building an accessible range slider, using and
wrestling it into shape with CSS.</p>
</div>
</article>
<article class="wrote-item">
<div class="article-picture rotate-picture"></div>
<div class="text-writer">
<span>Chris Coyier wrote</span>
<h3>Accessible Range Slider</h3>
<p>may 13, 2020 — Michelle Barker built a little tool to help with visualizing Intersection Observer.
Once you’ve adjusted the rootMargin and threshold values, you can scroll the container to see where
intersectionRatio matches the threshold value.</p>
</div>
</article>
<article class="wrote-item">
<div class="article-picture rotate-picture"></div>
<div class="text-writer">
<span>Carl Alviani wrote</span>
<h3>Remote Design</h3>
<p>may 11, 2020 — Online is different. So when working remotely, it’s a good idea to rethink it entirely
instead of trying to replicate an in-person experience online. Carl Alviani wrote a great article on
remote design and collaboration.</p>
</div>
</article>
<article class="wrote-item">
<div class="article-picture rotate-picture"></div>
<div class="text-writer">
<span>Miriam Suzanne wrote</span>
<h3>Custom Cascades</h3>
<p>may 8, 2020 — By defining a cascade of custom properties, you can determine which intent should take
priority — without worrying about the specificity of how that value is defined. Miriam Suzanne shows
how it works.</p>
</div>
</article>
<article class="wrote-item">
<div class="article-picture rotate-picture"></div>
<div class="text-writer">
<span>Ryan Yao wrote</span>
<h3>Designer Slack Communities</h3>
<p>may 7, 2020 — Are you looking for communities to connect with fellow designers? Ryan Yao set up an
overview of Designer Slack Communities that you can join.</p>
</div>
</article>
<article class="wrote-item">
<div class="article-picture rotate-picture"></div>
<div class="text-writer">
<span>Addy Osmani wrote</span>
<h3>Web Vitals</h3>
<p>may 6, 2020 — Google’s Web Vitals initiative provides unified guidance for quality signals that are
essential to delievering great UX. Lighthouse, PageSpeed Insights, DevTools and more tools will
support many Core Web Vitals soon.</p>
</div>
</article>
</div>
<!-- Link to Twitter Articles -->
<div class="links flex justify-center">
<div>MORE LINKS ON TWITTER</div>
</div>
<!-- Big Adversiment about Membership -->
<div class="membership design-systems flex justify-space-between">
<div class="list">
<h3>Design Systems</h3>
<p>Meet Design Systems, a recent Smashing book in which Alla Kholmatova explores how to set up an effective
design system to create great digital products. With common traps, gotchas and lessons learned.</p>
<button type="button">About Smashing Membership →</button>
</div>
<div class="big-picture rotate-picture"></div>
</div>
<!-- Group of Navbars in the Bottom -->
<div class="nav-bottom-outer">
<div class="nav-bottom">
<div class="nav-group">
<h5>New Front-End Challenges To Master</h5>
<ul>
<li>CSS Grid Layout</li>
<li>Pattern Library</li>
<li>Progressive Web Apps</li>
<li>Switching to HTTPS</li>
<li>HTTP/2 Guidelines</li>
<li>React & Vue.js</li>
<li>Redux For Designers</li>
<li>Vue Components</li>
</ul>
</div>
<div class="nav-group">
<h5>Performance Optimization & Strategy</h5>
<ul>
<li>Quick Performance Wins</li>
<li>Building For Performance</li>
<li>Front-End Optimization</li>
<li>Back-End Optimization</li>
<li>Better Compression</li>
<li>Progressive Web Apps</li>
<li>Perceived Performance</li>
</ul>
</div>
<div class="nav-group">
<h5>Improving Workflow & Data Protection</h5>
<ul>
<li>GDPR For Developers</li>
<li>Privacy Framework</li>
<li>Estimating Time</li>
<li>Dealing With Irrational Clients</li>
<li>Getting Deliverables Right</li>
<li>Meeting Deadlines</li>
<li>Convincing Clients</li>
<li>Invoicing Clients</li>
</ul>
</div>
<div class="nav-group">
<h5>Design Patterns & Checklists</h5>
<ul>
<li>Responsive Art-Direction</li>
<li>Perfect Configurator</li>
<li>Perfect Web Form</li>
<li>Perfect Accordion</li>
<li>Perfect Date Picker</li>
<li>Perfect Slider</li>
<li>Perfect Comparison Table</li>
<li>Perfect Infinite Scroll</li>
<li>Perfect Carousel</li>
<li>Privacy UX</li>
</ul>
</div>
<!-- Adversiment for Newsletter -->
<div class="feature full-lg-width flex column align-center">
<h4 class="bold">Smashing Newsletter</h4>
<p>
Imagine you wrote a beautiful song and nobody discovered it.
<br />
That would make any cat sad. Don't let that happen!
</p>
<div class="feature-image"></div>
<button>
Explore features
</button>
</div>
</div>
</div>
<!-- Link to Articles -->
<div class="links flex justify-center">
<div>SEE ALL ARTICLES</div>
</div>
<!-- Footer with text -->
<footer class="flex column align-center text-center">
<div>BROWSE ALL SMASHING MAGAZINE TOPICS</div>
<ul class="footer-links">
<li> • <a href="#">Accessibility</a></li>
<li> • <a href="#">Android Animation</a></li>
<li> • <a href="#">Apps</a></li>
<li> • <a href="#">CSS</a></li>
<li> • <a href="#">iOS</a></li>
<li> • <a href="#">Design</a></li>
<li> • <a href="#">Mobile</a></li>
<li> • <a href="#">Design Patterns</a></li>
<li> • <a href="#">Libraries</a></li>
<li> • <a href="#">Design Systems</a></li>
<li> • <a href="#">Photoshop</a></li>
<li> • <a href="#">E-Commerce</a></li>
<li> • <a href="#">React</a></li>
<li> • <a href="#">Freebies</a></li>
<li> • <a href="#">Service Workers</a></li>
<li> • <a href="#">Graphics</a></li>
<li> • <a href="#">Typography</a></li>
<li> • <a href="#">HTML</a></li>
<li> • <a href="#">User Experience</a></li>
<li> • <a href="#">Illustrator</a></li>
<li> • <a href="#">Web Design</a></li>
<li> • <a href="#">Inspiration</a></li>
<li> • <a href="#">Work flow</a></li>
<li> • <a href="#">JavaScript</a></li>
<li> • <a href="#">Pattern</a></li>
<li> • <a href="#">Performance</a></li>
<li> • <a href="#">Plugins</a></li>
<li> • <a href="#">Responsive Web Design</a></li>
<li> • <a href="#">Sketch</a></li>
<li> • <a href="#">UI Usability</a></li>
<li> • <a href="#">Wallpapers</a></li>
<li> • <a href="#">Word Press</a></li>
</ul>
<div class="credits credits-1">
With a commitment to quality content for the design community.
<br />
Founded by Vitaly Friedman and Sven Lennartz. 2006–2020.
<br />
Smashing is proudly running on Netlify.
<br />
Fonts by Latinotype.
</div>
<div class="credits credits-2">
<ul>
<li><a href="#">✎ Write for us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us (Impressum)</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Membership login</a></li>
<li><a href="#">Delivery times</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
</footer>
</body>
</html>