Desktop Wallpaper Calendars: December 2014 (Christmas Edition)

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for almost seven years now1, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for December 2014. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Cold Outside

“In December it is cold outside, so cute giraffe with scarf. Winter in Africa.” — Designed by Kim Lemin3 from Belgium.

Cold Outside4

The Three Owls

“My inspiration from this wallpaper is from both the love of owls, and attempting to incorporate humor for a theme.” — Designed by Briana Williams26 from the United States.

The Three Owls27

Christmas Lights Under The Sea

“Jellyfish always reminded me of Christmas because of the shiny magic they create. Lights of hope in the deep blue sea. This is part of my project.” — Designed by Marko Stupić53 from Zagreb, Croatia.

Christmas Lights under the sea. 54

Geometric Snowflake

“The idea is that inside every snow crystal, there’s a real crystal!” — Designed by Cape78 from Norway.

Geometric Snowflake79

Buckminster Fuller

“This wallpaper is inspired by the great architect and thinker Buckminster Fuller. His geodesic domes reminded us at Codesign of holiday ornaments, so we thought it was fitting for December.” — Designed by Daphne Firos121 from Cleveland, OH.

Buckminster Fuller122

Gifts Lover

Designed by Elise Vanoorbeek162 from Belgium.

Gifts Lover163

Winter Is Better Together

“I live in a place where it never snows however I love snow. I used to live in a snowy place and the winter was wonderful time with my friends.” — Designed by Maria Keller201 from Mexico.

Winter is better together202

Icy December

“December is the month when we enjoy the holidays with Christmas as well as welcome the new year ahead, so in this wallpaper I have shown the penguins (representing all creatures on earth) enjoying December and can’t wait to step in January i.e. in the New Year! :)” — Designed by Abhijit Sarkar248 from India.

Icy december,2014249

The Southern Hemisphere Is Calling

“Santa’s tired of winter (and the North Pole) and is flying to the South part of the globe to relax a little bit. He deserves a little vacation, don’t you think?” — Designed by Ricardo Gimenes291 from Brazil.

The Southern Hemisphere Is Calling292

Winter Woolly Days

“When we think about December, we can instantly feel the cold weather hence we think about wool sweaters and many times it reminds us of the first sweater our grandmas made for us!” — Designed by Santu Bank332 from India.

Winter Woolly Days333

Santastic December

“Each year, Santa is making our December FANTASTIC. So that’s why I often call this month a “Santastic December”.” — Designed by Deepra Bhattacharya375 from India.

Santastic December376

Flat Santa

“Just some general happy feelings about christmas!” — Designed by Kevin Lanckriet418 from Belgium.


A South Pole Christmas

“Reindeer and elves don’t deserve all the fun in December!” — Designed by Michaela Schuett459 from the United States.

A South Pole Christmas460

Merry Christmas

“The best way to spread Christmas cheer is singing loud for all to hear. Merry Christmas to all :)” — Designed by Zanetine Web Design502 from India.

Merry Christmas503

Have A Minimal Christmas

“My brother-in-law has been on a design buzzword kick where he calls everything minimal, to the point where he wishes people, “Have a minimal day!” I made this graphic as a poster for him.” — Designed by Danny Gugger531 from Madison, Wisconsin, USA.

Have a Minimal Christmas532

Let It Snow

“And here comes “December”, the most awaited month for those who haven’t seen the beauty of a snowfall and with it comes the yearning “Let it Snow” this time…” — Designed by Binita Tamang548 from India.

Let It Snow549

Snow Globe

Designed by Luc Versleijen563 from the Netherlands.

Snow Globe564

A Sleigh With Gifts Is Coming To Town

“Merry Christmas to all the people around the world! I am sure that this sleigh will be coming to your town!” — Designed by Verónica Valenzuela586 from Spain.

A sleigh with gifts is coming to town587

We Wish You A Merry Christmas!

“The Christmas spirit is finally here… So let’s have a very Merry Christmas!” — Designed by WebOlution607 from Greece.

We wish you a Merry Christmas!608

Xmas Time!

“December is the same to say Christmas so we wanted to keep together all funny elements from this time” — Designed by Colorsfera630 from Spain.

Xmas time!631

Christmas Package

Designed by Jakub Lopatko675 from Poland.

Christmas Package676

December Owls

“I created this wallpaper with all the fun winter stuff in mind: going skiing, the taste of a hot cup of coffee, the heavy warm clothes you always have on, listening to carols and receiving presents. The colors are for remembering that, even though it’s cold and cloudy, December is a happy month that everyone should enjoy!” — Designed by Miruna Sfia696 from Romania.

December Owls697

Merry Christmas

“Merry Christmas to all of you (in the languages we speak: Crăciun Fericit, Merry Christmas, Joyeux Noël, Boldog Karácsonyi unnepeket, Buon Natale, Feliz Navidad, Feliz Natal)” — Designed by Design19733 from Romania.

Merry Christmas! 734

Believe In The Magic Of The Season

“December brings in the festival season as well as the smell of the winter. It spells its magic in the form of Christmas, snow, family gatherings and a brand new year to start. Hence it inspired me to create this wallpaper which essentially just denotes the month of magic, belief and hope of a good new year.” — Designed by Charuta Puranik790 from India.

Believe in the magic of the season!791

The Darker Days

“December means for me the month when the days are the shortest in Belgium. Not many people like it, but I think it creates a special atmosphere on a cold December evening. December is, of course, the month when we get some little presents for Christmas!” — Designed by Kerinckx Didier823 from Belgium.

The darker days824

Evening In December

“When people think about December, most of them think about celebrating, family, presents,… But I have tried to think differently. I have tried to look at the nature in December. I thought about… a full moon, stars, clouds, snow, wolves, dark nights and conifers. I have tried to display this in my wallpaper.” — Designed by Dean De Beuckeleer842 from Belgium.

Evening in December843

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month857!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.



  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6×480.jpg
  7. 7×480.jpg
  8. 8×600.jpg
  9. 9×800.jpg
  10. 10×960.jpg
  11. 11×900.jpg
  12. 12×1200.jpg
  13. 13×1080.jpg
  14. 14×1440.jpg
  15. 15×2560.jpg
  16. 16×480.jpg
  17. 17×480.jpg
  18. 18×600.jpg
  19. 19×800.jpg
  20. 20×960.jpg
  21. 21×900.jpg
  22. 22×1200.jpg
  23. 23×1080.jpg
  24. 24×1440.jpg
  25. 25×2560.jpg
  26. 26
  27. 27
  28. 28
  29. 29×720.png
  30. 30×800.png
  31. 31×960.png
  32. 32×1050.png
  33. 33×900.png
  34. 34×1200.png
  35. 35×1050.png
  36. 36×1200.png
  37. 37×1080.png
  38. 38×1200.png
  39. 39×1440.png
  40. 40×1440.png
  41. 41×720.png
  42. 42×800.png
  43. 43×960.png
  44. 44×1050.png
  45. 45×900.png
  46. 46×1200.png
  47. 47×1050.png
  48. 48×1200.png
  49. 49×1080.png
  50. 50×1200.png
  51. 51×1440.png
  52. 52×1440.png
  53. 53
  54. 54
  55. 55
  56. 56×480.png
  57. 57×600.png
  58. 58×768.png
  59. 59×864.png
  60. 60×720.png
  61. 61×960.png
  62. 62×1050.png
  63. 63×1200.png
  64. 64×1080.png
  65. 65×1440.png
  66. 66×1440.png
  67. 67×480.png
  68. 68×600.png
  69. 69×768.png
  70. 70×864.png
  71. 71×720.png
  72. 72×960.png
  73. 73×1050.png
  74. 74×1200.png
  75. 75×1080.png
  76. 76×1440.png
  77. 77×1440.png
  78. 78
  79. 79
  80. 80
  81. 81×480.png
  82. 82×480.png
  83. 83×480.png
  84. 84×600.png
  85. 85×768.png
  86. 86×1024.png
  87. 87×864.png
  88. 88×720.png
  89. 89×800.png
  90. 90×960.png
  91. 91×1024.png
  92. 92×1050.png
  93. 93×900.png
  94. 94×1200.png
  95. 95×1050.png
  96. 96×1200.png
  97. 97×1080.png
  98. 98×1200.png
  99. 99×1440.png
  100. 100×1440.png
  101. 101×480.png
  102. 102×480.png
  103. 103×480.png
  104. 104×600.png
  105. 105×768.png
  106. 106×1024.png
  107. 107×864.png
  108. 108×720.png
  109. 109×800.png
  110. 110×960.png
  111. 111×1024.png
  112. 112×1050.png
  113. 113×900.png
  114. 114×1200.png
  115. 115×1050.png
  116. 116×1200.png
  117. 117×1080.png
  118. 118×1200.png
  119. 119×1440.png
  120. 120×1440.png
  121. 121
  122. 122
  123. 123
  124. 124×480.jpg
  125. 125×480.jpg
  126. 126×480.jpg
  127. 127×600.jpg
  128. 128×768.jpg
  129. 129×1024.jpg
  130. 130×864.jpg
  131. 131×720.jpg
  132. 132×800.jpg
  133. 133×960.jpg
  134. 134×1024.jpg
  135. 135×900.jpg
  136. 136×1200.jpg
  137. 137×1050.jpg
  138. 138×1200.jpg
  139. 139×1080.jpg
  140. 140×1200.jpg
  141. 141×1440.jpg
  142. 142×1440.jpg
  143. 143×480.jpg
  144. 144×480.jpg
  145. 145×480.jpg
  146. 146×600.jpg
  147. 147×768.jpg
  148. 148×1024.jpg
  149. 149×864.jpg
  150. 150×720.jpg
  151. 151×800.jpg
  152. 152×960.jpg
  153. 153×1024.jpg
  154. 154×900.jpg
  155. 155×1200.jpg
  156. 156×1050.jpg
  157. 157×1200.jpg
  158. 158×1080.jpg
  159. 159×1200.jpg
  160. 160×1440.jpg
  161. 161×1440.jpg
  162. 162
  163. 163
  164. 164
  165. 165×480.jpg
  166. 166×600.jpg
  167. 167×768.jpg
  168. 168×1024.jpg
  169. 169×864.jpg
  170. 170×800.jpg
  171. 171×960.jpg
  172. 172×1024.jpg
  173. 173×1050.jpg
  174. 174×900.jpg
  175. 175×1200.jpg
  176. 176×1050.jpg
  177. 177×1200.jpg
  178. 178×1080.jpg
  179. 179×1200.jpg
  180. 180×1440.jpg
  181. 181×1440.jpg
  182. 182×768.jpg
  183. 183×480.jpg
  184. 184×600.jpg
  185. 185×768.jpg
  186. 186×1024.jpg
  187. 187×864.jpg
  188. 188×800.jpg
  189. 189×960.jpg
  190. 190×1024.jpg
  191. 191×1050.jpg
  192. 192×900.jpg
  193. 193×1200.jpg
  194. 194×1050.jpg
  195. 195×1200.jpg
  196. 196×1080.jpg
  197. 197×1200.jpg
  198. 198×1440.jpg
  199. 199×1440.jpg
  200. 200×768.jpg
  201. 201
  202. 202
  203. 203
  204. 204×480.png
  205. 205×480.png
  206. 206×480.png
  207. 207×600.png
  208. 208×768.png
  209. 209×1024.png
  210. 210×864.png
  211. 211×720.png
  212. 212×800.png
  213. 213×960.png
  214. 214×1024.png
  215. 215×1050.png
  216. 216×900.png
  217. 217×1200.png
  218. 218×1050.png
  219. 219×1200.png
  220. 220×1080.png
  221. 221×1200.png
  222. 222×1440.png
  223. 223×1440.png
  224. 224×768.png
  225. 225×1800.png
  226. 226×480.png
  227. 227×480.png
  228. 228×480.png
  229. 229×600.png
  230. 230×768.png
  231. 231×1024.png
  232. 232×864.png
  233. 233×720.png
  234. 234×800.png
  235. 235×960.png
  236. 236×1024.png
  237. 237×1050.png
  238. 238×900.png
  239. 239×1200.png
  240. 240×1050.png
  241. 241×1200.png
  242. 242×1080.png
  243. 243×1200.png
  244. 244×1440.png
  245. 245×1440.png
  246. 246×768.png
  247. 247×1800.png
  248. 248
  249. 249
  250. 250
  251. 251×480.png
  252. 252×480.png
  253. 253×480.png
  254. 254×600.png
  255. 255×768.png
  256. 256×1024.png
  257. 257×864.png
  258. 258×720.png
  259. 259×800.png
  260. 260×960.png
  261. 261×1024.png
  262. 262×1050.png
  263. 263×900.png
  264. 264×1200.png
  265. 265×1050.png
  266. 266×1200.png
  267. 267×1080.png
  268. 268×1200.png
  269. 269×1440.png
  270. 270×1440.png
  271. 271×480.png
  272. 272×480.png
  273. 273×480.png
  274. 274×600.png
  275. 275×768.png
  276. 276×1024.png
  277. 277×864.png
  278. 278×720.png
  279. 279×800.png
  280. 280×960.png
  281. 281×1024.png
  282. 282×1050.png
  283. 283×900.png
  284. 284×1200.png
  285. 285×1050.png
  286. 286×1200.png
  287. 287×1080.png
  288. 288×1200.png
  289. 289×1440.png
  290. 290×1440.png
  291. 291
  292. 292
  293. 293
  294. 294×480.png
  295. 295×768.png
  296. 296×1024.png
  297. 297×800.png
  298. 298×960.png
  299. 299×1024.png
  300. 300×1050.png
  301. 301×900.png
  302. 302×1200.png
  303. 303×1050.png
  304. 304×1200.png
  305. 305×1080.png
  306. 306×1200.png
  307. 307×1440.png
  308. 308×1440.png
  309. 309×960.png
  310. 310×768.png
  311. 311×1050.png
  312. 312×1800.png
  313. 313×480.png
  314. 314×768.png
  315. 315×1024.png
  316. 316×800.png
  317. 317×960.png
  318. 318×1024.png
  319. 319×1050.png
  320. 320×900.png
  321. 321×1200.png
  322. 322×1050.png
  323. 323×1200.png
  324. 324×1080.png
  325. 325×1200.png
  326. 326×1440.png
  327. 327×1440.png
  328. 328×960.png
  329. 329×768.png
  330. 330×1050.png
  331. 331×1800.png
  332. 332
  333. 333
  334. 334
  335. 335×480.jpg
  336. 336×480.jpg
  337. 337×480.jpg
  338. 338×600.jpg
  339. 339×768.jpg
  340. 340×1024.jpg
  341. 341×864.jpg
  342. 342×720.jpg
  343. 343×800.jpg
  344. 344×960.jpg
  345. 345×1024.jpg
  346. 346×1050.jpg
  347. 347×900.jpg
  348. 348×1200.jpg
  349. 349×1050.jpg
  350. 350×1200.jpg
  351. 351×1080.jpg
  352. 352×1200.jpg
  353. 353×1440.jpg
  354. 354×1440.jpg
  355. 355×480.jpg
  356. 356×480.jpg
  357. 357×480.jpg
  358. 358×600.jpg
  359. 359×768.jpg
  360. 360×1024.jpg
  361. 361×864.jpg
  362. 362×720.jpg
  363. 363×800.jpg
  364. 364×960.jpg
  365. 365×1024.jpg
  366. 366×1050.jpg
  367. 367×900.jpg
  368. 368×1200.jpg
  369. 369×1050.jpg
  370. 370×1200.jpg
  371. 371×1080.jpg
  372. 372×1200.jpg
  373. 373×1440.jpg
  374. 374×1440.jpg
  375. 375
  376. 376
  377. 377
  378. 378×480.png
  379. 379×480.png
  380. 380×480.png
  381. 381×600.png
  382. 382×768.png
  383. 383×1024.png
  384. 384×864.png
  385. 385×720.png
  386. 386×800.png
  387. 387×960.png
  388. 388×1024.png
  389. 389×1050.png
  390. 390×900.png
  391. 391×1200.png
  392. 392×1050.png
  393. 393×1200.png
  394. 394×1080.png
  395. 395×1200.png
  396. 396×1440.png
  397. 397×1440.png
  398. 398×480.png
  399. 399×480.png
  400. 400×480.png
  401. 401×600.png
  402. 402×768.png
  403. 403×1024.png
  404. 404×864.png
  405. 405×720.png
  406. 406×800.png
  407. 407×960.png
  408. 408×1024.png
  409. 409×1050.png
  410. 410×900.png
  411. 411×1200.png
  412. 412×1050.png
  413. 413×1200.png
  414. 414×1080.png
  415. 415×1200.png
  416. 416×1440.png
  417. 417×1440.png
  418. 418
  419. 419
  420. 420
  421. 421×480.png
  422. 422×480.png
  423. 423×480.png
  424. 424×600.png
  425. 425×768.png
  426. 426×1024.png
  427. 427×864.png
  428. 428×720.png
  429. 429×800.png
  430. 430×960.png
  431. 431×1024.png
  432. 432×1050.png
  433. 433×900.png
  434. 434×1200.png
  435. 435×1050.png
  436. 436×1200.png
  437. 437×1080.png
  438. 438×1200.png
  439. 439×1440.png
  440. 440×1440.png
  441. 441×480.png
  442. 442×480.png
  443. 443×480.png
  444. 444×600.png
  445. 445×768.png
  446. 446×1024.png
  447. 447×864.png
  448. 448×720.png
  449. 449×800.png
  450. 450×960.png
  451. 451×1050.png
  452. 452×1200.png
  453. 453×1050.png
  454. 454×1200.png
  455. 455×1080.png
  456. 456×1200.png
  457. 457×1440.png
  458. 458×1440.png
  459. 459
  460. 460
  461. 461
  462. 462×480.png
  463. 463×480.png
  464. 464×480.png
  465. 465×600.png
  466. 466×768.png
  467. 467×1024.png
  468. 468×864.png
  469. 469×720.png
  470. 470×800.png
  471. 471×960.png
  472. 472×1024.png
  473. 473×1050.png
  474. 474×900.png
  475. 475×1200.png
  476. 476×1050.png
  477. 477×1200.png
  478. 478×1080.png
  479. 479×1200.png
  480. 480×1440.png
  481. 481×1440.png
  482. 482×480.png
  483. 483×480.png
  484. 484×480.png
  485. 485×600.png
  486. 486×768.png
  487. 487×1024.png
  488. 488×864.png
  489. 489×720.png
  490. 490×800.png
  491. 491×960.png
  492. 492×1024.png
  493. 493×1050.png
  494. 494×900.png
  495. 495×1200.png
  496. 496×1050.png
  497. 497×1200.png
  498. 498×1080.png
  499. 499×1200.png
  500. 500×1440.png
  501. 501×1440.png
  502. 502
  503. 503
  504. 504
  505. 505×480.jpg
  506. 506×600.jpg
  507. 507×768.jpg
  508. 508×1024.jpg
  509. 509×864.jpg
  510. 510×900.jpg
  511. 511×1200.jpg
  512. 512×1050.jpg
  513. 513×1080.jpg
  514. 514×1200.jpg
  515. 515×1440.jpg
  516. 516×1200.jpg
  517. 517×768.jpg
  518. 518×480.jpg
  519. 519×600.jpg
  520. 520×768.jpg
  521. 521×1024.jpg
  522. 522×864.jpg
  523. 523×900.jpg
  524. 524×1200.jpg
  525. 525×1050.jpg
  526. 526×1080.jpg
  527. 527×1200.jpg
  528. 528×1440.jpg
  529. 529×1200.jpg
  530. 530×768.jpg
  531. 531
  532. 532
  533. 533
  534. 534×960.png
  535. 535×1080.png
  536. 536×1440.png
  537. 537×1334.png
  538. 538×640.png
  539. 539×2880.png
  540. 540×1920.png
  541. 541×960.png
  542. 542×1080.png
  543. 543×1440.png
  544. 544×1334.png
  545. 545×640.png
  546. 546×2880.png
  547. 547×1920.png
  548. 548
  549. 549
  550. 550
  551. 551×480.jpg
  552. 552×600.jpg
  553. 553×768.jpg
  554. 554×864.jpg
  555. 555×960.jpg
  556. 556×1050.jpg
  557. 557×480.jpg
  558. 558×600.jpg
  559. 559×768.jpg
  560. 560×864.jpg
  561. 561×960.jpg
  562. 562×1050.jpg
  563. 563
  564. 564
  565. 565
  566. 566×600.jpg
  567. 567×768.jpg
  568. 568×864.jpg
  569. 569×720.jpg
  570. 570×800.jpg
  571. 571×960.jpg
  572. 572×900.jpg
  573. 573×1080.jpg
  574. 574×1200.jpg
  575. 575×1440.jpg
  576. 576×600.jpg
  577. 577×768.jpg
  578. 578×864.jpg
  579. 579×720.jpg
  580. 580×800.jpg
  581. 581×960.jpg
  582. 582×900.jpg
  583. 583×1080.jpg
  584. 584×1200.jpg
  585. 585×1440.jpg
  586. 586
  587. 587
  588. 588
  589. 589×480.png
  590. 590×768.png
  591. 591×864.png
  592. 592×800.png
  593. 593×960.png
  594. 594×900.png
  595. 595×1200.png
  596. 596×1080.png
  597. 597×1440.png
  598. 598×480.png
  599. 599×768.png
  600. 600×864.png
  601. 601×800.png
  602. 602×960.png
  603. 603×900.png
  604. 604×1200.png
  605. 605×1080.png
  606. 606×1440.png
  607. 607
  608. 608
  609. 609
  610. 610×1024.jpg
  611. 611×800.jpg
  612. 612×1024.jpg
  613. 613×1050.jpg
  614. 614×1080.jpg
  615. 615×1200.jpg
  616. 616×1440.jpg
  617. 617×960.jpg
  618. 618×768.jpg
  619. 619×1600.jpg
  620. 620×1024.jpg
  621. 621×800.jpg
  622. 622×1024.jpg
  623. 623×1050.jpg
  624. 624×1080.jpg
  625. 625×1200.jpg
  626. 626×1440.jpg
  627. 627×960.jpg
  628. 628×768.jpg
  629. 629×1600.jpg
  630. 630
  631. 631
  632. 632
  633. 633×480.png
  634. 634×480.png
  635. 635×480.png
  636. 636×600.png
  637. 637×768.png
  638. 638×1024.png
  639. 639×864.png
  640. 640×720.png
  641. 641×800.png
  642. 642×960.png
  643. 643×1024.png
  644. 644×1050.png
  645. 645×900.png
  646. 646×1200.png
  647. 647×1050.png
  648. 648×1200.png
  649. 649×1080.png
  650. 650×1200.png
  651. 651×1440.png
  652. 652×1440.png
  653. 653×1440.png
  654. 654×480.png
  655. 655×480.png
  656. 656×480.png
  657. 657×600.png
  658. 658×768.png
  659. 659×1024.png
  660. 660×864.png
  661. 661×720.png
  662. 662×800.png
  663. 663×960.png
  664. 664×1024.png
  665. 665×1050.png
  666. 666×900.png
  667. 667×1200.png
  668. 668×1050.png
  669. 669×1200.png
  670. 670×1080.png
  671. 671×1200.png
  672. 672×1440.png
  673. 673×1440.png
  674. 674×1440.png
  675. 675
  676. 676
  677. 677
  678. 678×720.jpg
  679. 679×800.jpg
  680. 680×900.jpg
  681. 681×1050.jpg
  682. 682×1080.jpg
  683. 683×1200.jpg
  684. 684×1440.jpg
  685. 685×1600.jpg
  686. 686×768.jpg
  687. 687×720.jpg
  688. 688×800.jpg
  689. 689×900.jpg
  690. 690×1050.jpg
  691. 691×1080.jpg
  692. 692×1200.jpg
  693. 693×1440.jpg
  694. 694×1600.jpg
  695. 695×768.jpg
  696. 696
  697. 697
  698. 698
  699. 699×480.jpg
  700. 700×480.jpg
  701. 701×480.jpg
  702. 702×600.jpg
  703. 703×768.jpg
  704. 704×1024.jpg
  705. 705×864.jpg
  706. 706×720.jpg
  707. 707×800.jpg
  708. 708×1024.jpg
  709. 709×900.jpg
  710. 710×1200.jpg
  711. 711×1200.jpg
  712. 712×1080.jpg
  713. 713×1200.jpg
  714. 714×1440.jpg
  715. 715×1440.jpg
  716. 716×480.jpg
  717. 717×480.jpg
  718. 718×480.jpg
  719. 719×600.jpg
  720. 720×768.jpg
  721. 721×1024.jpg
  722. 722×864.jpg
  723. 723×720.jpg
  724. 724×800.jpg
  725. 725×1024.jpg
  726. 726×900.jpg
  727. 727×1200.jpg
  728. 728×1200.jpg
  729. 729×1080.jpg
  730. 730×1200.jpg
  731. 731×1440.jpg
  732. 732×1440.jpg
  733. 733
  734. 734
  735. 735
  736. 736×480.png
  737. 737×480.png
  738. 738×480.png
  739. 739×600.png
  740. 740×768.png
  741. 741×1024.png
  742. 742×864.png
  743. 743×720.png
  744. 744×800.png
  745. 745×960.png
  746. 746×1024.png
  747. 747×1050.png
  748. 748×900.png
  749. 749×1200.png
  750. 750×1050.png
  751. 751×1200.png
  752. 752×1080.png
  753. 753×1200.png
  754. 754×1440.png
  755. 755×1440.png
  756. 756×900.png
  757. 757×1050.png
  758. 758×1200.png
  759. 759×1080.png
  760. 760×1200.png
  761. 761×1440.png
  762. 762×1440.png
  763. 763×480.png
  764. 764×480.png
  765. 765×480.png
  766. 766×600.png
  767. 767×768.png
  768. 768×1024.png
  769. 769×864.png
  770. 770×720.png
  771. 771×800.png
  772. 772×960.png
  773. 773×1024.png
  774. 774×1050.png
  775. 775×900.png
  776. 776×1200.png
  777. 777×1050.png
  778. 778×1200.png
  779. 779×1080.png
  780. 780×1200.png
  781. 781×1440.png
  782. 782×1440.png
  783. 783×900.png
  784. 784×1050.png
  785. 785×1200.png
  786. 786×1080.png
  787. 787×1200.png
  788. 788×1440.png
  789. 789×1440.png
  790. 790
  791. 791
  792. 792
  793. 793×480.png
  794. 794×480.png
  795. 795×600.png
  796. 796×768.png
  797. 797×864.png
  798. 798×720.png
  799. 799×800.png
  800. 800×960.png
  801. 801×1050.png
  802. 802×900.png
  803. 803×1200.png
  804. 804×1200.png
  805. 805×1080.png
  806. 806×1440.png
  807. 807×1440.png
  808. 808×480.png
  809. 809×480.png
  810. 810×600.png
  811. 811×768.png
  812. 812×864.png
  813. 813×720.png
  814. 814×800.png
  815. 815×960.png
  816. 816×1050.png
  817. 817×900.png
  818. 818×1200.png
  819. 819×1200.png
  820. 820×1080.png
  821. 821×1440.png
  822. 822×1440.png
  823. 823
  824. 824
  825. 825
  826. 826×480.jpg
  827. 827×480.jpg
  828. 828×600.jpg
  829. 829×768.jpg
  830. 830×720.jpg
  831. 831×1200.jpg
  832. 832×1440.jpg
  833. 833×1440.jpg
  834. 834×480.jpg
  835. 835×480.jpg
  836. 836×600.jpg
  837. 837×768.jpg
  838. 838×720.jpg
  839. 839×1200.jpg
  840. 840×1440.jpg
  841. 841×1440.jpg
  842. 842
  843. 843
  844. 844
  845. 845×800.jpg
  846. 846×1200.jpg
  847. 847×1050.jpg
  848. 848×1080.jpg
  849. 849×1440.jpg
  850. 850×768.jpg
  851. 851×800.jpg
  852. 852×1200.jpg
  853. 853×1050.jpg
  854. 854×1080.jpg
  855. 855×1440.jpg
  856. 856×768.jpg
  857. 857

The post Desktop Wallpaper Calendars: December 2014 (Christmas Edition) appeared first on Smashing Magazine.

See original article: 

Desktop Wallpaper Calendars: December 2014 (Christmas Edition)


2 Psychological Conversion Triggers You Should Be Using To Increase Your Revenue

Conversions are all about psychology.

There are multiple emotions that pull at us throughout the buying cycle. Some may be affected by price, by value, or by quality. Some, on the other hand, are the re-affirming and pressuring psychological factors that will make the difference between a sale or a bounce.

Unfortunately, most sites overlook these factors. These sites either fail, or never reach the top of their potential.

The two main psychological factors that will inspire a purchase, sign up, or register are credibility and urgency.

So how can you show credibility and add urgency to your site? How can you make sure these emotions are pulling on customers throughout the buying cycle… so they can’t wait to click your call-to-action button?

Let’s dive in.

cta button - placeit2Source:

1. Showing Credibility

Credibility is very straight-forward; it’s all about trust. If you can limit the possible reasons a visitor would distrust your business, you will increase conversions. Using these three principles you can drastically improve the credibility of your site:


Your design and your brand should be consistently expressed throughout your site and all other online channels. Your Twitter account, your Facebook page, your website’s graphics, your website’s aesthetics, your logo. (Read here for tips on how to do this in your social media channels.)

Everything should be visually cohesive.

Think of this in terms of a physical store. If nothing aligned with a central brand, you wouldn’t have as much trust in each individual product. However if you go into an IKEA, and you understand exactly what you’re getting with IKEA products, you have more trust in buying the products because you know what to expect.

Ikea bedroom style content

This kind of cohesiveness will increase conversions immediately, but even more importantly, it will breed long-term brand trust that will keep your customers coming back for more.


People don’t want to be connected to a brand, they want to be connected to other people.

People want to be treated like individuals, not as customers.

By making your copy, product descriptions, headlines, promotions, and other content more personal you can create a higher level of trust by speaking directly to the customer, person to person.

Use “you” and “your” in calls to action to inspire action. Speak in first person on your blog—using “I” rather than “we”—to give readers and customers a more connected sense to you and your business.

Businesses like GoPro use this method to empower their customers and to inspire and motivate them, not only to buy their products but to use them and feed content back into the community.

gopro's personal headlines

Social proof

Using testimonials, social following, and other social proof signals will give customers the assurance that your product or service is well respected, widely used, or well known, which will ease anxiety and, therefore, help with conversions.

There are multiple ways to do this, and each one should be thought about and tested to your unique use-case.

For example, Slack has used a video on their homepage showing social proof for their productivity tool.

slack's social proof video

This is a way to not just show the effectiveness of the tool through features and uses, but through a real example.

Zirtual has a similar focus with their homepage, showing rather than telling with a real-world testimonial from a successful customer.

zirtual social proof

2. Creating Urgency

Urgency is the harder, less straight-forward factor to implement—though, by far, the most effective.

Adding urgency to your sales timeline can dramatically increase desire for your product and set a powerful anchor in your customer’s psyche. It changes people’s thinking from “whether to buy from you or your competitor” to “whether to buy your product now or miss out altogether.”

Typically if it’s something they want, they will be far more likely to convert quickly. This comes down to a few simple principles:


Is the product on a strict timeline? Is there only a limited amount of hours left to buy? Is there a potential benefit to buying now as opposed to later, per a discount or shipping option?

These sort of time-focused principles can dramatically increase the urgency of your offer without having to set up any other limitations around your product. There’s a reason infomercials used the “if you call in the next 30 seconds” line. Because it works psychologically.

Conversion Rate Experts proved this as a very effective method by simply adding a clock to category pages on a Florist’s e-commerce site, with a countdown for same-day delivery.

conversion rate experts time test


By creating a limit in supply, you can drastically increase the level of demand on a product, which increases the potential of quick conversions. If the test runs well, you can always add to the supply later. You can also charge a premium with a limited supply.

As Shopify show’s in this great example from ModMom, a sense of urgency can be put on a temporary product to ramp up engagement, and in some cases, even create media buzz.

conversion rate increase with scarcity


Exclusivity is one of those rare cases where you can ramp up demand and social proof in the same instance, as Mailbox did with their initial waiting list when launching their first iOS app.

mailbox using exclusivity

This list does two main things:

  1. It shows that there is a limit of supply, increasing excitement to finally get through the queue.
  2. It shows a massive amount of social proof with 780,000 people all waiting in line to use the app.

With this kind of a waiting list, Mailbox was able to gain media attention from almost every tech media publication on the web—and add to that list in the process.

This kind of attention would never have been made had Mailbox not intentionally limited the supply on their app, amongst the other notable things they were doing to re-shape the UX of email.

Always test everything

Every business, every site, every app has its own unique use-case and market.

Never just assume that, because something worked for one company, it would work for yours. Test everything.

Set up conversion tracking software to A/B test the different variances of your homepage and then go with the winning variant. If you change without testing, you could do more harm than good.

Don’t let that happen, track, plan, test, and progress.

Read other Crazy Egg posts by Sean Smith.

The post 2 Psychological Conversion Triggers You Should Be Using To Increase Your Revenue appeared first on The Daily Egg.

More here: 

2 Psychological Conversion Triggers You Should Be Using To Increase Your Revenue


Making A Complete Polyfill For The HTML5 Details Element

HTML5 introduced a bunch of new tags, one of which is <details>. This element is a solution for a common UI component: a collapsible block. Almost every framework, including Bootstrap and jQuery UI, has its own plugin for a similar solution, but none conform to the HTML5 specification — probably because most were around long before <details> got specified and, therefore, represent different approaches. A standard element allows everyone to use the same markup for a particular type of content. That’s why creating a robust polyfill makes sense1.

Disclaimer: This is quite a technical article, and while I’ve tried to minimize the code snippets, the article still contains quite a few of them. So, be prepared!

Existing Solutions Are Incomplete

I’m not2 the first person3 to try to implement such a polyfill. Unfortunately, all other solutions exhibit one or another problem:

  1. No support for future content
    Support for future content is extremely valuable for single-page applications. Without it, you would have to invoke the initialization function every time you add content to the page. Basically, a developer wants to be able to drop <details> into the DOM and be done with it, and not have to fiddle with JavaScript to get it going.
  2. Not a true polyfill for the open attribute
    According to the specification4, <details> comes with the open attribute, which is used to toggle the visibility of the contents of <details>.
  3. The toggle event is missing
    This event is a notification that a details element has changed its open state. Ideally, it should be a vanilla DOM event.

In this article we’ll use better-dom5 to make things simpler. The main reason is the live extensions6 feature, which solves the problem of invoking the initialization function for dynamic content. (For more information, read my detailed article about live extensions7.) Additionally, better-dom outfits live extensions with a set of tools that do not (yet) exist in vanilla DOM but that come in handy when implementing a polyfill like this one.

The details element in Safari 8 (View large version18149)

Check out the live demo10.

Let’s take a closer look at all of the hurdles we have to overcome to make <details> available in browsers that don’t support it.

Future Content Support

To start, we need to declare a live extension for the "details" selector. What if the browser already supports the element natively? Then we’ll need to add some feature detection. This is easy with the optional second argument condition, which prevents the logic from executing if its value is equal to false:

// Invoke extension only if there is no native support
var open = DOM.create("details").get("open");

DOM.extend("details", typeof open !== "boolean", 
  constructor: function() 
    console.log("initialize <details>…");

As you can see, we are trying to detect native support by checking for the open property, which obviously only exists in browsers that recognize <details>.

What sets DOM.extend11 apart from a simple call like document.querySelectorAll is that the constructor function executes for future content, too. And, yes, it works with any library for manipulating the DOM:

// You can use better-dom…
// => logs "initialize <details>…"

// or any other DOM library, like jQuery…
// => logs "initialize <details>…"

// or even vanilla DOM.
// => logs "initialize <details>…"

In the following sections, we’ll replace the console.log call with a real implementation.

Implementation Of <summary> Behavior

The <details> element may take <summary> as a child element.

The first summary element child of details, if one is present, represents an overview of details. If no child summary element is present, then the user agent should provide its own legend (for example, “Details”).

Let’s add mouse support. A click on the <summary> element should toggle the open attribute on the parent <details> element. This is what it looks like using better-dom:

DOM.extend("details", typeof open !== "boolean", 
  constructor: function() 
  doInitSummary: function(summary) 
    summary.on("click", this.doToggleOpen);
  doToggleOpen: function() 
    // We’ll cover the open property value later.
    this.set("open", !this.get("open"));

The children method returns a JavaScript array of elements (not an array-like object as in vanilla DOM). Therefore, if no <summary> is found, then the doInitSummary function is not executed. Also, doInitSummary and doToggleOpen are private functions12, they always are invoked for the current element. So, we can pass this.doInitSummary to Array#forEach without extra closures, and everything will execute correctly there.

Having keyboard support in addition to mouse support is good as well. But first, let’s make <summary> a focusable element. A typical solution is to set the tabindex attribute to 0:

doInitSummary: function(summary) 
  // Makes summary focusable
  summary.set("tabindex", 0);

Now, the user hitting the space bar or the “Enter” key should toggle the state of <details>. In better-dom, there is no direct access to the event object. Instead, we need to declare which properties to grab using an extra array argument:

doInitSummary: function(summary) 
  summary.on("keydown", ["which"], this.onKeyDown);

Note that we can reuse the existing doToggleOpen function; for a keydown event, it just makes an extra check on the first argument. For the click event handler, its value is always equal to undefined, and the result will be this:

doInitSummary: function(summary) 
    .set("tabindex", 0)
    .on("click", this.doToggleOpen)
    .on("keydown", ["which"], this.doToggleOpen);
doToggleOpen: function(key) 
  if (!key 

Now we have a mouse- and keyboard-accessible <details> element.

<summary> Element Edge Cases

The <summary> element introduces several edge cases that we should take into consideration:

1. When <summary> Is a Child But Not the First Child

What the Chrome browser outputs when the summary element is not the first child. (View large version18149)

Browser vendors have tried to fix such invalid markup by moving <summary> to the position of the first child visually, even when the element is not in that position in the flow of the DOM. I was confused by such behavior, so I asked the W3C for clarification15. The W3C confirmed that <summary> must be the first child of <details>. If you check the markup in the screenshot above on Nu Markup Checker16, it will fail with the following error message:

Error: Element summary not allowed as child of element details in this context. […] Contexts in which element summary may be used: As the first child of a details element.

My approach is to move the <summary> element to the position of the first child. In other words, the polyfill fixes the invalid markup for you:

doInitSummary: function(summary) 
  // Make sure that summary is the first child
  if (this.child(0) !== summary) 

2. When the <summary> Element Is Not Present

What the Chrome browser outputs when the summary element is not present (View large version18149)

As you can see in the screenshot above, browser vendors insert “Details” as a legend into <summary> in this case. The markup stays untouched. Unfortunately, we can’t achieve the same without accessing the shadow DOM19, which unfortunately has weak support20 at present. Still, we can set up <summary> manually to comply with standards:

constructor: function() 
  var summaries = this.children("summary");
  // If no child summary element is present, then the
  // user agent should provide its own legend (e.g. "Details").

Support For open Property

If you try the code below in browsers that support <details> natively and in others that don’t, you’ll get different results: = true;
// <details> changes state in Chrome and Safari = false;
// <details> state changes back in Chrome and Safari

In Chrome and Safari, changing the value of open triggers the addition or removal of the attribute. Other browsers do not respond to this because they do not support the open property on the <details> element.

Properties are different from simple values. They have a pair of getter and setter functions that are invoked every time you read or assign a new value to the field. And JavaScript has had an API to declare properties since version 1.5.

The good news is that one old browser we are going to use with our polyfill, Internet Explorer (IE) 8, has partial support for the Object.defineProperty function. The limitation is that the function works only on DOM elements. But that is exactly what we need, right?

There is a problem, though. If you try to set an attribute with the same name in the setter function in IE 8, then the browser will stack with infinite recursion and crashes. In old versions of IE, changing an attribute will trigger the change of an appropriate property and vice versa:

Object.defineProperty(element, "foo", 
  set: function(value) 
    // The line below triggers infinite recursion in IE 8.
    this.setAttribute("foo", value);

So you can’t modify the property without changing an attribute there. This limitation has prevented developers from using the Object.defineProperty for quite a long time.

The good news is that I’ve found a solution.

Fix For Infinite Recursion In IE 8

Before describing the solution, I’d like to give some background on one feature of the HTML and CSS parser in browsers. In case you weren’t aware, these parsers are case-insensitive. For example, the rules below will produce the same result (i.e. a base red for the text on the page):

body  color: red; 
/* The rule below will produce the same result. */
BODY  color: red; 

The same goes for attributes:

el.setAttribute("foo", "1");
el.setAttribute("FOO", "2");
el.getAttribute("foo"); // => "2"
el.getAttribute("FOO"); // => "2"

Moreover, you can’t have uppercased and lowercased attributes with the same name. But you can have both on a JavaScript object, because JavaScript is case-sensitive:

var obj = foo: "1", FOO: "2";; // => "1"
obj.FOO; // => "2"

Some time ago, I found that IE 8 supports the deprecated legacy argument lFlags21 for attribute methods, which allows you to change attributes in a case-sensitive manner:

  • lFlags [in, optional]
    • Type: Integer
    • Integer that specifies whether to use a case-sensitive search to locate the attribute.

Remember that the infinite recursion happens in IE 8 because the browser is trying to update the attribute with the same name and therefore triggers the setter function over and over again. What if we use the lFlags argument to get and set the uppercased attribute value:

// Defining the "foo" property but using the "FOO" attribute
Object.defineProperty(element, "foo", 
  get: function() 
	return this.getAttribute("FOO", 1);
  set: function(value) 
    // No infinite recursion!
    this.setAttribute("FOO", value, 1);

As you might expect, IE 8 updates the uppercased field FOO on the JavaScript object, and the setter function does not trigger a recursion. Moreover, the uppercased attributes work with CSS too — as we stated in the beginning, that parser is case-insensitive.

Polyfill For The open Attribute

Now we can define an open property that works in every browser:

var attrName = document.addEventListener ? "open" : "OPEN";

Object.defineProperty(details, "open", 
  get: function() 
    var attrValue = this.getAttribute(attrName, 1);
    attrValue = String(attrValue).toLowerCase();
    // Handle boolean attribute value
    return attrValue === "" 
  set: function(value) 
    if ( !== value) 
      console.log("firing toggle event");

    if (value) 
      this.setAttribute(attrName, "", 1);
      this.removeAttribute(attrName, 1);

Check how it works: = true;
// => logs "firing toggle event"
details.hasAttribute("open"); // => true = false;
// => logs "firing toggle event"
details.hasAttribute("open"); // => false

Excellent! Now let’s do similar calls, but this time using *Attribute methods:

details.setAttribute("open", "");
// => silence, but fires toggle event in Chrome and Safari
// => silence, but fires toggle event in Chrome and Safari

The reason for such behavior is that the relationship between the open property and the attribute should be bidirectional. Every time the attribute is modified, the open property should reflect the change, and vice versa.

The simplest cross-browser solution I’ve found for this issue is to override the attribute methods on the target element and invoke the setters manually. This avoids bugs and the performance penalty of legacy propertychange22 and DOMAttrModified23 events. Modern browsers support MutationObservers24, but that doesn’t cover our browser scope.

Final Implementation

Obviously, walking through all of the steps above when defining a new attribute for a DOM element wouldn’t make sense. We need a utility function for that which hides cross-browser quirks and complexity. I’ve added such a function, named defineAttribute25, in better-dom.

The first argument is the name of the property or attribute, and the second is the get and set object. The getter function takes the attribute’s value as the first argument. The setter function accepts the property’s value, and the returned statement is used to update the attribute. Such a syntax allows us to hide the trick for IE 8 where an uppercased attribute name is used behind the scenes:

constructor: function() 
    get: this.doGetOpen,
    set: this.doSetOpen
doGetOpen: function(attrValue) 
  attrValue = String(attrValue).toLowerCase();
  return attrValue === "" ,
doSetOpen: function(propValue) 
  if (this.get("open") !== propValue)"toggle");
  // Adding or removing boolean attribute "open"
  return propValue ? "" : null;

Having a true polyfill for the open attribute simplifies our manipulation of the <details> element’s state. Again, this API is framework-agnostic:

// You can use better-dom…
DOM.find("details").set("open", false);

// or any other DOM library, like jQuery…
$("details").prop("open", true);

// or even vanilla DOM.
document.querySelector("details").open = false;

Notes On Styling

The CSS part of the polyfill is simpler. It has some basic style rules:

summary:first-child ~ * 
  display: none;

details[open] > * 
  display: block;

/*  Hide native indicator and use pseudo-element instead */
  display: none;

I didn’t want to introduce any extra elements in the markup, so obvious choice is to style the ::before pseudo-element. This pseudo-element is used to indicate the current state of <details> (according to whether it is open or not). But IE 8 has some quirks, as usual — namely, with updating the pseudo-element state. I got it to work properly only by changing the content property’s value itself:

  content: '25BA';

  content: '25BC';

For other browsers, the zero-border trick will draw a font-independent CSS triangle. With a double-colon syntax for the ::before pseudo-element, we can apply rules to IE 9 and above:

  content: '';
  width: 0;
  height: 0;
  border: solid transparent;
  border-left-color: inherit;
  border-width: 0.25em 0.5em;
  transform: rotate(0deg) scale(1.5);

  content: '';
  transform: rotate(90deg) scale(1.5);

The final enhancement is a small transition on the triangle. Unfortunately, Safari does not apply it for some reason (perhaps a bug), but it degrades well by ignoring the transition completely:

  transition: transform 0.15s ease-out;

A sample animation for the toggle triangle

You can find the full source code on Github27.

Putting It All Together

Some time ago, I started using transpilers in my projects, and they are great. Transpilers enhance source files. You can even code in a completely different language, like CoffeeScript instead of JavaScript or LESS instead of CSS etc. However, my intention in using them is to decrease unnecessary noise in the source code and to learn new features in the near future. That’s why transpilers do not go against any standards in my projects — I’m just using some extra ECMAScript 6 (ES6) stuff and CSS post-processors (Autoprefixer28 being the main one).

Also, to speak about bundling, I quickly found that distributing *.css files along with *.js is slightly annoying. In searching for a solution, I found HTML Imports29, which aims to solve this kind of problem in the future. At present, the feature has relatively weak browser support30. And, frankly, bundling all of that stuff into a single HTML file is not ideal.

So, I built my own approach for bundling: better-dom has a function, DOM.importStyles31, that allows you to import CSS rules on a web page. This function has been in the library since the beginning because DOM.extend uses it internally. Since I use better-dom and transpilers in my code anyway, I created a simple gulp task:

gulp.task("compile", ["lint"], function() 
  var jsFilter = filter("*.js");
  var cssFilter = filter("*.css");

  return gulp.src(["src/*.js", "src/*.css"])
    .pipe(postcss([autoprefixer, csswring, …]))
     // need to escape some symbols
      "DOM.importStyles("$1", "$2");n"))
    .pipe(concat( + ".js"))

To keep it simple, I didn’t put in any optional steps or dependency declarations (see the full source code32). In general, the compilation task contains the following steps:

  1. Apply Autoprefixer to the CSS.
  2. Optimize the CSS, and transform it into the sequence of DOM.importStyles calls.
  3. Apply ES6 transpilers to JavaScript.
  4. Concatenate both outputs to a *.js file.

And it works! I have transpilers that make my code clearer, and the only output is a single JavaScript file. Another advantage is that, when JavaScript is disabled, those style rules are completely ignored. For a polyfill like this, such behavior is desirable.

Closing Thoughts

As you can see, developing a polyfill is not the easiest challenge. On the other hand, the solution can be used for a relatively long time: standards do not change often and have been discussed at length behind the scenes. Also everyone is using the same language and is connecting with the same APIs which is a great thing.

With the common logic moved into utility functions, the source code is not very complex33. This means that, at present, we really lack advanced tools to make robust polyfills that work close to native implementations (or better!). And I don’t see good libraries for this yet, unfortunately.

Libraries such as jQuery, Prototype and MooTools are all about providing extra sugar for working with the DOM. While sugar is great, we also need more utility functions to build more robust and unobtrusive polyfills. Without them, we might end up with a ton of plugins that are hard to integrate in our projects. May be it’s time to move into this direction?

Another technique that has arisen recently is Web Components34. I’m really excited by tools like the shadow DOM, but I’m not sure if custom elements35 are the future of web development. Moreover, custom elements can introduce new problems if everyone starts creating their own custom tags for common uses. My point is that we need to learn (and try to improve) the standards first before introducing a new HTML element. Fortunately, I’m not alone in this; Jeremy Keith, for one, shares a similar view36.

Don’t get me wrong. Custom elements are a nice feature, and they definitely have use cases in some areas. I look forward to them being implemented in all browsers. I’m just not sure if they’re a silver bullet for all of our problems.

To reiterate, I’d encourage creating more robust and unobtrusive polyfills. And we need to build more advanced tools to make that happen more easily. The example with <details> shows that achieving such a goal today is possible. And I believe this direction is future-proof and the one we need to move in.



  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25$Element.html#defineAttribute
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36

The post Making A Complete Polyfill For The HTML5 Details Element appeared first on Smashing Magazine.

More here:  

Making A Complete Polyfill For The HTML5 Details Element


4 Fresh Tips for Building Better User Experiences on Your Landing Pages

new waiter
Are you serving up a great user experience on your landing pages? Image by Joachim S. Müller via Flickr.

As a marketer, you need to show prospects that you understand them… and that you give a damn.

A large part of that is providing them with a great user experience on your landing page. If you fail to do that – if you don’t align yourself with your prospects’ goals and make it easy for them to get what they want – then your conversions will suffer.

In our latest episode of Page Fights, regular judges Oli Gardner and Peep Laja were joined by guest judge Noah Kagan of AppSumo to tear apart 10 user-submitted landing pages.

In the process, the judges identified tons of common mistakes that hurt user experience (and probably conversions, too).

You can watch the full episode here:

Or if you’re strapped for time but still want to know how to deliver an exceptional user experience, read on for the top four landing page optimization tactics they shared.

1. Don’t forget about your mobile users

Noah reminded spectators that a lot of landing page traffic these days is mobile.

Prospects are going to be interacting with your landing pages on all types of devices and in all types of environments. If your landing page experience sucks on mobile, your prospects aren’t going to stick around.

To quickly test how good your mobile experience is, Noah suggested opening your landing page on a desktop and shrinking the window down to the size of a mobile screen.

When the judges ran this test for Above Average Grade Level’s landing page (below), they found that it doesn’t scale well to a mobile device. Check out the regular desktop view (left) versus the mobile version (right):

Above Average Grade Level’s landing page rendered fine on a desktop (left), but on the mobile version (right), many essential elements were cut out.

Not only does this create a crappy user experience, but it cuts off some of the most essential elements on the page: the call to action, social proof and headline.

That forces prospects to scroll back and forth on the landing page to get the information they need, causing friction. If you’ve ever struggled to read a huge page on your mobile device, you know exactly what I mean. It feels like a huge barrier and it’s frustrating. And that makes prospects bounce.

Creating an exceptional, friction-free user experience demands that your landing pages are mobile responsive. To that end, the judges shared some quick tips:

  • Noah recommended cutting out any unnecessary page elements to keep your page short and sweet.
  • The judges agreed that you should try to keep your CTA above the fold on as many devices as you can.

Bonus tip:
In case you needed another reason to optimize all your pages for mobile, Page Fights moderator Tommy Walker pointed out that Google recently introduced a mobile-friendly tag into their search ranking algorithm.

What does that mean for your landing pages? If you fail to make them mobile-friendly, you could get penalized by Google and have your page appear lower in the search ranking.

Before you launch your next landing page, check to see if your landing page is mobile-friendly by pasting your landing page URL here.

2. Talk about your prospect, not about yourself

If you want to provide an awesome user experience, then you’ve got to deliver the right message at the right time.

Your headlines and copy are the vehicle for communicating your unique value proposition and they set the tone and mood of your page. As Noah and Peep explained, you’ve got to be sure the language you use is “human” and addresses your prospects directly.

What exactly do they mean by that?

Let’s take Polis’ landing page for example:

Click for full-length image.

Noah criticized the headline for failing to speak directly to the prospect. He explained that you should make prospects feel like they’re talking to another human, not some guy spouting MBA jargon.

Noah suggested another headline that he felt communicated the unique value proposition in a way that would really resonate with prospects:

I can get you twice as many comments per day

The way this new headline is worded is more colloquial and less dry. More importantly, rather than simply talking about the business, it addresses what prospects actually care about: what they have to gain by signing up.

Don’t be “that guy.” Talk about your prospects on your landing page – not about yourself.
Click To TweetPowered By CoSchedule

In contrast to Polis’ landing page, Oli thought that Giftip did a good job of addressing their prospects directly. Their headline nails it by both conveying their UVP and clearly explaining that they’ll relieve their prospect’s pain.

Click for full-length image.

That said, Oli thought the sub-headers had room for improvement:


As he explained, sub-headers should be able to stand on their own – both in terms of communicating the value proposition and making sense in isolation.

Bonus tip:
Before you even touch the layout or design of your landing page, Oli and Noah recommended writing out your copy first, making sure it addresses the who, what, why and how.

Creating your landing pages copy-first will help you ensure that you’re writing copy that speaks about (and directly to) the prospect, not your business.

3. Make sure you’re addressing all your prospects’ questions

When prospects land on your page, they have burning questions they want answered.

If you want to create a rich user experience, then you need to address each and every one of them.

That doesn’t necessarily have to take the form of a lengthy, salesy landing page. Consider Carcoin’s page:

Click for full-length image.

Since selling a car is a big decision, prospects will understandably have tons of questions about Carcoin’s service.

Instead of overwhelming visitors with a lengthy landing page with a wall of text, they opted for an explainer video to address some of these questions and keep the landing page design minimal.

Peep shared an important stat that you must keep in mind when putting explainer videos on your landing pages: only about 10% of visitors will watch your landing page video video from start to finish.

For that reason, it’s essential that both your landing page and your explainer video communicate your unique value proposition.

On your landing page, use video to supplement your copy, not the other way around. @peeplaja
Click To TweetPowered By CoSchedule

Bonus tip:
Remember that you can’t possibly anticipate everything that your prospects will want to know.

For products and services that require a large commitment on the part of the customer, Noah recommended setting up additional levels of support such as live chat and a click-to-call phone number.

Giving prospects an outlet to ask questions shows that your business has truly invested in providing great customer service – and it gives you an extra opportunity to counter your prospects’ objections.

4. Don’t withhold any information

No matter what the goal of your landing page is, you should be helping your prospects make a decision.

If your landing page doesn’t give prospects all the information they need to make a decision, then they’ll get frustrated and they’ll bounce.

Have a look at Score Revolution’s landing page, which invites prospects to “Discover and license music from Danny Elfman:”

Click for full-length image.

Peep took issue with this page because it asks prospects to enter their name and email address to access the scores. Without any music samples to preview, how do prospects know if they even like the music? As Peep put it, “Let me play!”

In the world of landing page optimization, you can’t just gate things for the heck of it. In order to entice your visitors to convert, you’ve got to give a little.

If your landing page doesn’t provide value, why should I believe you’ll deliver after I sign up?
Click To TweetPowered By CoSchedule

This page from Trumpia was guilty of a similar transgression:

Click for full-length image.

The judges pointed out that Trumpia withholds a very important piece of information on their landing page: the pricing information.

This is problematic because prospects often come to your page with a certain price range in mind. The judges explained that without giving them the information they need to assess whether you fit into their budget, prospects will become frustrated. And that kills conversions.

Your landing page needs to create an exceptional user experience

Creating an exceptional user experience is about thinking about the prospect’s journey from start to finish and proving that you care.

If your prospects don’t feel that you’ve taken their best interest to heart, then they’ll go somewhere else to get what they want – leaving you with a pretty sorry conversion rate.

To recap, here are four tips for creating exceptional landing page experiences:

  • Be mobile-friendly. Optimize your landing pages for as many devices as possible.
  • Don’t talk about yourself. Your prospect doesn’t want to read on and on about how great you are. Focus on demonstrating how your product or service will help alleviate your prospect’s pain.
  • Make sure you’re answering all your prospects’ questions. Anticipate any questions your prospects might have and do what you can to answer them on your landing page – whether in your copy, with an explainer video, or by adding chat or click-to-call widget.
  • Don’t withhold any information. Your prospects depend on you to give them all the information they need to make a decision. Demonstrate your value right on your landing page. And don’t make them give up their email address to see your prices!

Over to you – what other tactics do you use to ensure that you’re creating exceptional landing page experiences for your prospects?

– Derek Moryson

new waiter

Taken from: 

4 Fresh Tips for Building Better User Experiences on Your Landing Pages


The Missing Link to Conversions: Relevance & How to Attain It

There’s a lot of advice around on conversion optimization. We often talk about changing button colors, designing user experience and improving calls to action. All of these are important parts of conversion optimization, but what’s sometimes missing from the conversation is why we do all this.

It’s so our marketing is relevant to the people we are addressing—and that’s an aspect we can no longer ignore.

relevance - placeitsource:

Relevancy, SEO and Personalization

Let’s take the question of search engine optimization (SEO).

Over the last couple of years, Google has made relevance a hugely important search signal, while decreasing the importance of keywords. In search results today, it’s not just about finding the content that matches the phrase the user types in, it’s about discerning user intent and delivering the answers users really want.

The Google Knowledge Graph is just one example of this, and Google continues to tweak its algorithm and search results display so more users get the right result the first time. Ensuring that your marketing content shows up when users search in your niche will help with conversions.

Linked to this is the increasing importance of personalization which, says Eric Siu, is no longer a luxury. He says customers want more than awareness of the brands they connect with; they want to be engaged with them.

In other words, people don’t want to look at ads; they want to talk to you. But when they talk, they want to feel like they’re having their own private conversation with your rather than being on the end of a one to many broadcast.

People are used to customizing the online experience, and that’s especially true of millennials. The ability to consume TV shows when they want them via services like Netflix is taking a chunk from the bottom line of most TV and cable companies. Social sites have got in on the act, with Twitter allowing users to create custom timelines.

And even those who still look at ads want them to be relevant. The more relevant your marketing is, the more likely you are to win the click.

4 Ways to Make Marketing More Relevant

1. Identify the Audience

Since relevancy is all about being fit for purpose, the first thing you must do to improve results is identify your audience. Analytics tools will help you understand where your audience is coming from, how they found you, what they are looking for and more.

Don’t just rely on Google Analytics. Use other analytics tools and stats from your email marketing service so you can build up a comprehensive audience profile.

As part of this, think about audience segmentation. You will likely have a few different audience segments. Instead of marketing to everyone in a blanket way, tailor marketing to individual segments to be more relevant, market more effectively and deliver the kind of personal experience that most people are looking for.

This is an ongoing process. You must track your audience’s response to every piece of content so you know when it’s time to change strategy.

2. Figure Out What Matters to Them

If you’re going to be relevant, you need to be a detective and use the information you already have about your audience to figure out what’s important to them. One way to do this is to check out social media sites.

There’s a good chance that some of the people who follow you are part of your target market. Use tools like Twitrland to figure out what they talk about most. Check out mentions of your brand, visit forums and even ask questions to figure out what makes them tick. Then you can create marketing content that pushes their buttons (in a good way) and makes them click yours.

3. Be Helpful

These days, if you want to find out how to do anything, you look for the solution online. As part of your marketing, identify the problem people are trying to solve and provide the answer. That makes you more relevant both for people and search engines.

An example on Hubspot shows how Marcus Sheridan built his pool installation business by answering all his customers’ questions. His site also surfaces even when people are searching for competitors—because his content is relevant.

4. Be Mobile Ready

mobile and conversions

Image: Pixabay

To be relevant, your marketing has to be mobile ready—it’s not optional. The latest statistics from Pew Internet show that 58% of American adults own a smartphone and 35% of those over 16 own a tablet. And they’re using them.

Media consumption on mobile devices is rising, and most people get really annoyed when content doesn’t work well on the device they are using. Fail to cater for this audience and you will be dismissed as irrelevant before they even look at any of your marketing content.

Overall, the best summary of how to be relevant comes from Pam Moore, who says: “Focus more on content and connection than you do on pretty pictures.”

3 Case Studies on Relevant Marketing

Here are a few examples of how marketers have achieved great results by making their campaigns more relevant.

1. Increases Open Rates

Strong View shows how identifying three different consumer segments and targeting each of those with personalized messaging in email marketing integrated into a consumer lifecycle approach resulted in a 500% increase in email open rates, a sevenfold increase in click through rates and a 29% decrease in unsubscribes.

2. NASA Rides the Oscars to 13,000 Retweets

Social media marketing can help you show you’re relevant with real-time reactions. An example highlighted on Marketing Technology Brief shows how NASA piggybacked on the Oscars with a relevant tweet about the best director win for the movie Gravity. This tweet was retweeted more than 13,000 times and favorited more than 7000 times.

3. Unilever Boost CTR with Targeted Content Creation

IDIO helped Unilever communicate better with users of its SlimFast forums by creating relevant and engaging content. To do this it worked with bloggers to create and curate content on topics driven by its forum community. The clickthrough rate for its marketing increased from 23% to around 32% and Unilever gained 55,000 membership subscriptions.

Personalizing content for increased relevance can also be used on your website. Hubspot gives six examples of anonymous personalization that can help your audience feel more appreciated and result in an uplift in sales.

Bottom Line

Today’s consumer is all about relationship. They’re looking for brands that take the time to know them, and they reward those brands with their loyalty.

In short, relevance and personalization can build relationship, and as a result, dramatically improve your conversions. It’s time these often-forgotten tactics become more of a priority.

What are your favorite techniques for making your marketing more relevant?

Read other Crazy Egg articles by Sharon Hurley Hall.

The post The Missing Link to Conversions: Relevance & How to Attain It appeared first on The Daily Egg.

Taken from:  

The Missing Link to Conversions: Relevance & How to Attain It


Placing Testimonials on Lead Generation Page Increases Conversions by 50%

Company Background

Hotel Institute Montreux is an international institute of hospitality and hotel management in Switzerland. They offer various undergraduate and postgraduate courses in hospitality and business management.

The Test

The primary lead generation avenue on HIM website is the ‘Receive your free brochure’ page. Originally, the page had a form where a prospective candidate had to fill in the details and request for a free brochure. Here’s how the original form on the lead generation page looked like:


HIM assigned the responsibility of improving conversions on their lead generation page to their digital agency The Reference. After evaluating various elements on the website, The Reference found that though HIM had a lot of good testimonials on their testimonials page, there were none on the lead generation page. Spotting an opportunity there, they decided to run a split test on the lead generation page. The hypothesis behind this was to test if testimonials have an impact at the visitors’ Zero Moment of Truth – the online decision-making moment.

This is how the challenger version looked like:


The Result

Placing the testimonial right above the lead generation form led to 50% increase in conversions on the form. This further translated to a 54% decrease in cost per lead for HIM’s Google Adwords campaigns.

comparison image

Why it worked?

Testimonials work as strong social proof for visitors. They add credibility to your landing page and are known to impact conversions in a positive way. However, this case brings to focus another aspect of using social proofs i.e. placement. Social proof can act as a strong influence at your visitors’ Zero Moment of Truth. Therefore, placing them closer to the action point (the lead generation form in this case) tends to magnify their impact on conversions. Michael Aagaard from Content Verve tried this experiment on his e-book download page. He moved testimonials higher up on the page and saw 64.53% increase in downloads.

You can also test the placement of various other elements on your key landing pages to see how they impact conversions., a VWO customer, tested 4 different versions of a customer review widget on their products page and saw a 7.5% increase in revenue!

Share your thoughts!

Have you experimented with the placement of elements on your landing page? We would love to hear about your experience in the comments section.

The post Placing Testimonials on Lead Generation Page Increases Conversions by 50% appeared first on VWO Blog.

Visit link:

Placing Testimonials on Lead Generation Page Increases Conversions by 50%


4 Ad Technologies to Watch and How They Could Impact Your Conversion Rate

The advertising landscape is always changing and shifting. From remarketing to shopping feed optimization, there are always new techniques and technologies that are designed to help us squeeze every drop of promotional goodness from our campaigns.

As mobile becomes faster and more pervasive in our lives, so too are intelligent customer data profiling solutions popping up to help us build more targeted personas for our target audience. With that in mind, here are four of the newest ad technologies to watch, and how they could affect your conversion rates.

People-Based Marketing


Facebok’s acquisition of Microsoft’s Atlas ad platform earlier this year has paved the way for its recent relaunch as a system for tracking the consumer’s path to purchase. Similar to Google’s own DoubleClick network, Atlas isn’t so much an ad network as it is an ad serving mechanism that lets marketers build a campaign and track how customers interact with the brand and ultimately purchase.

So why is this important? Because the traditional method of tracking users, cookies, can’t track a user as they move from a website, to an app, and back to a website. In today’s increasingly inter-connected mobile world, this kind of user behavior is crucial to making well-informed marketing decisions.

How It Could Impact Your Conversion Rate

Knowing the behavior and the triggers that ultimately cause users to buy is vital for learning what gaps exist in your ordering process. By being able to track them across a variety of platforms, you’ll gain invaluable insights that you need to create a cross-system strategy that meets the customer’s expectations on every level.

Agile Payment Systems


With companies like Apple debuting the Apple Pay system integrated into its Passbook mobile wallet, all eyes are on PayPal to see how the web’s most popular payment site will react. With PayPal spinning off of eBay and becoming its own publicly traded company, there’s definite room for growth, but can it handle the competition?

By breaking apart from eBay, PayPal now has the flexibility to tackle challenges from Apple and other payment processors head-on. So far, they’ve been keeping a reasonable pace.

With the built-in fingerprint identification that Apple’s TouchID and Alipay (a branch of Alibaba) give to certain mobile phone models, PayPal can’t afford to be complacent. By becoming its own company, PayPal can stay competitive without worrying about affecting eBay’s retail operations.

How It Could Impact Your Conversion Rate

Outwardly, it may not seem like much of a difference. But you can expect that once the spinoff is completed in 2015, new innovations will start coming out of PayPal in an effort to beat Apple, Alibaba and others and use its considerable name recognition and credibility to forge ahead at full speed. It’s likely that new technologies and features will be made available on both the website programming end, as well as the location-based transaction and biometrics/mobile payments end.

Bridging the Gap Between TV and Apps


TV? People still shop through TV? Well, yes, but not like you’d expect.

Delivery Agent, makers of the ShopTV brand, have partnered with well-known networks, top news stations and cable channels to bring television merchandise to the people by way of a smartphone app. It’s omnichannel marketing at its finest—combining merchandise with television and smartphones in a way that only modern technology can.

But if you’re not the executive producer of a top-rated TV show, why would you care? Because this technology paves the way for an even greater blurring of boundaries between advertising and consumers. Now, it’s no longer just about commercials, but about buying the actual items you see being worn or used in the show itself.

As an example, Delivery Agent just recently signed on with Sony to integrate its ShopTV app with Sony’s own SideView app for a richer media shopping and buying experience. According to Sony, it works like this:

Sony’s TV SideView app offers a dynamic graphical interface through which consumers can interact with their TV, view listings and operate embedded applications on a smart TV. By integrating ShopTV into TV SideView, the two companies are enabling consumers using the app to search, browse and buy products related to the programming or commercials they’re viewing. Sony’s TV SideView app, available for smartphones and tablets running Apple iOS and Google Android, has been downloaded 4 million times, Sony says.

Delivery Agent’s proprietary contextual database maps products to a network, show, episode, character, scene or ad and then displays those products for sale. The partnership with Sony advances a technology that Delivery Agent says is critical to the future of TV commerce: ACR, or automatic content recognition. Television networks, content producers and advertisers embed their programs and commercials with what amounts to an electronic fingerprint that is emitted by a smart TV and enables a “handshake” between a smart TV and a mobile device.

So, for example, HBO could embed an ACR code in “Game of Thrones” that indicates when a Targaryen Three-headed Dragon Pin for which it sells a replica is onscreen, and that can trigger the TV SideView app of a consumer watching “Game of Thrones” to display the product, information on the product and a Buy button, with quick checkout via a PIN for ShopTV customers who have stored payment and shipping information. Similarly, a retailer could run a ShopTV/TV SideView promotion that is displayed in TV SideView when the retailer’s commercial appears on TV.

How it Could Impact Your Conversion Rate

This is one of those technologies which might not seem like it outwardly applies to you, but even though this type of system is still in its infancy, there’s no reason that it couldn’t apply online, to things like native advertising or retargeting platforms. Many clothing retailers already take advantage of this kind of built-in browsing option, where they link to a model’s accessories even if you’re looking at the shirt.

Smartphones Make Coupons and Loyalty Rewards Easier to Access


It used to be if you had a coupon or code on your smartphone that you wanted a retailer to scan, you were out of luck, as the laser would bounce right off the screen. For users of certain Samsung smartphones, those days are over.

Since it’s easier to update smartphone technology than the 165 million laser scanners being used at retail points of sale, a handful of Samsung devices can now be used to redeem coupon codes and loyalty rewards right from the device itself. Newer laser scanner terminals bypass this problem entirely by using optical scanners.

How It Could Affect Your Conversion Rate

If you’re a retail store owner who has always wanted to increase customer participation and engagement through the use of a branded app with coupons and loyalty initiatives, this is the opportunity you’ve been waiting for. Mobeam, the company behind the tracking identification technology, says that more than 140 million smartphones embedded with its technology will be shipping worldwide by the end of the year.

What Are Your Thoughts?

The biggest temptation with any new technology is to lean your entire marketing strategy on it in the hopes that it will be that “magic pill” that will breathe new life into a floundering conversion rate.

But be careful not to be too swayed by the potential of shiny objects. The best improvements to your conversion rate are those that are made when you look at how the technology helps the customer get the results they want (and not the results you think they want!).

What do you think about these new innovations? Do you see potential with these ad technologies? Share your thoughts with us below in the comments!

Read other Crazy Egg articles by Sherice Jacob.

The post 4 Ad Technologies to Watch and How They Could Impact Your Conversion Rate appeared first on The Daily Egg.

View article:  

4 Ad Technologies to Watch and How They Could Impact Your Conversion Rate


2 Questions That Will Help You Gather Endless A/B Testing Ideas

There are A/B testing ideas all over the web.

But if you’re like me, you’re tired of hearing that you should test the color of your CTA button. You want to spend your time running tests that will really move the needle for your business.

You can become a smarter A/B tester by leveraging a resource right in front of you: your target demographic.

Now, I’m not talking about simply knowing their age and occupation.

rsz_image08 (1)

Digging deeper to uncover your target audience’s psychographic information – their lifestyle, habits and aspirations – will give you a goldmine of A/B testing inspiration.

Here are two questions you need to ask to dig deeper and figure out where those opportunities lie.

Question #1: What Do You Already Know About Your Prospects?

Start by asking yourself, “What takes up the majority of my target demographic’s time? What is most important to them?” Ask questions like the following:

  • Where do they buy most of their clothes?
  • What kind of restaurants do they frequent?
  • What radio station do they listen to in the car?
  • What websites are they visiting?

The questions are truly endless. It’s all about outlining who your target demographic is and really understanding their pain points and passions.

Not sure where you can find this information? There’s no one “best way” to do demographic research, but here are some ideas to get you started:

  • If you have a sales or customer support team, take one of your coworkers out for coffee and pick their brain about which questions customers ask.
  • Use social media monitoring to discover what prospects and customers are talking about online.
  • If there are forums or social media groups related to your niche, join and do a bit of eavesdropping.
  • Get your information straight from the horse’s mouth using survey tools like Qualtrics or Qualaroo.
  • Dig even deeper by conducting phone interviews with your customers. If you can rally enough people for a focus group, great. If you can’t, consider a Twitter chat!

How well do you know your target demographic? Twitter chat focus groups can help you learn more.
Click To TweetPowered By CoSchedule

Steal A/B testing ideas from your target demographic’s favorite brands

After gathering information about your customers, you should have a list of interests, brands, companies and organizations they appreciate and use. Now you can study and deconstruct these companies’ marketing strategies by asking questions like this:

  • What tone do they use in their social marketing and landing pages?
  • What kind of hero shots are splashed on their landing pages?
  • How much copy are they providing?
  • What benefits and lifestyles are they emphasizing?
  • What are the common design styles, fonts and colors they are using?

Then, search for common threads. Are there any design features or themes that keep cropping up? A specific tone being used or lifestyle being represented? If so, could any of the recurring themes work well on your landing pages? You may stumble upon a great idea for your next A/B test.

As you ask yourself these questions, just remember that you’re uncovering testing ideas.

Don’t assume that everything on your target demographic’s favorite yoga site will work on your landing page. As CRO consultant Michael Aagaard wrote on the blog, the key is to understand the “underlying principle that made the change work and then find ways of transferring that principle to your own landing page.

In other words, it’s not about copying the design of your target demographic’s favorite band’s website for your SaaS landing page. It’s about extracting the underlying principles that make their landing pages work and discovering how that applies to your own product or service.

How asking this question brought 4FRNT a 35% lift in conversions

We have a really cool ski-manufacturing client called 4FRNT. What are the key ingredients of their brand voice? Gold medalist designed and tested skis, insane Go-Pro videos of steep mountain and half-pipe runs and incredibly cool artwork plastered all over their products.

Their original landing page had clickable pictures of skis with details about each when you hover over the photos:

Image Source: 4FRNT.

Not bad, but the page had room for improvement. After all, if someone never hovered their cursor over any of the skis they would never learn anything about them.

To come up with testing ideas, 4FRNT turned to a demographic similar to hardcore skiiers: skateboarders.

If you have any skater friends, you’ll know that they love having custom artwork on their equipment. But beyond intricate artwork, they’re also all about board quality and the brand of their wheels.

With this in mind, we figured that skiers might also appreciate more information up front. For a more compelling and information-driven approach, we decided to make the name and type of ski more easily accessible:

rsz_image05 (1)
Image source: 4FRNT.

Looking to a demographic similar to 4FRNT’s target customer to uncover A/B testing ideas really paid off. Emphasizing the beautiful artwork and providing a little more information resulted in a 35% lift in conversions.

Looking at what’s important to your target demographic and picking apart what they like about other brands creates a precious pool of A/B testing ideas.

I have another question that delves even deeper into your target demographic’s mind and could leave you with some A/B testing diamonds.

Question #2: Who Do Your Prospects Aspire to Be?

For this question we’re going to follow a similar process. In a perfect world, with a little more time, motivation and resources, what would your customer be doing?

Need help picturing it? Ask yourself these questions:

  • What skills are they developing in their free time?
  • What are they saving for? (Vacation? Speed boat? 72-inch TV?)
  • What’s on their Amazon wish list?
  • What’s on their Pinterest boards? (Travel locations? Food? Motorcycles?)
  • Who is their favorite superhero?

Again, that last question might be a little strange, but the millionaire gadget-freak Batman tells you something different than the flying, invincible Superman. Even their costumes say different things about design sensibilities.

Did you just say you like Aquaman? Image source.

What are we looking for?

An emotional connection. Your target demographic might eat lunch at McDonalds every day (who they are now), but we can learn from the fact that they’re watching parkour videos on their smartphone while they eat (who they aspire to be). Mimicking the look and language of Red Bull’s ads on your landing page could boost conversions because it resonates with their ideal self.

By integrating similar styles and elements from your target demographic’s aspirational brands, you are appealing to a deep emotional need. Your product or service bridges the gap between who they are and want to be.

Fresh out of A/B testing ideas? Steal ideas from your target customer’s favorite brands.
Click To TweetPowered By CoSchedule

How asking this question brought Clubs of America a 20% increase in conversions

Clubs of America (another client) wanted to advertise their Beer of the Month club. Their original landing page focused on the features of the subscription with an attractive and enticing hero shot, but it wasn’t performing how they wanted.


To find A/B testing ideas, we turned to the beer club’s demographic.

They’re mostly men. Picture the guy who’s enjoying his beer with friends, watching the game, barbecuing and doing other manly things. This beer club ships out microbrews, though, not a cheap convenience store option. The ideal subscribers should appreciate a quality product. Think Ron Swanson.


Using that information, Clubs of America looked to Dollar Shave Club, micro brewery websites and Nick Offerman’s own wood shop. These sites all emphasized a love of woodworking, a focus on the quality of the product and design elements that a classy ale-drinking, boxing gentleman might recognize. If these men liked something that evoked groomed mustaches and cigar smoking, then we needed to give it to them.

Here’s the result:


What changed?

  • A new wood grain background, similar to Dollar Shave Club. This evokes a more handmade and rustic feel than the old grey background.
  • Warmer colors for a cozy pub feel, rather than a sterile liquor store.
  • A headline that focused on the quality of the product. This isn’t your dad’s grocery store beer – these are small-batch brews made by craftsmen across the United States and delivered to your front door.
  • Small custom design elements (like those little pointing hand bullets) for the inner 1800’s gentleman. Tommy Walker over at Conversion XL points out that using stock photos/elements makes it easier for your customer to associate you with a scam site. Plus those little hands have so much character!

This page not only looked better, but outperformed its predecessor with a 20% increase in conversions.

We want to give credit to general best practices and testing ideas, though. We ran a third variant that was exactly the same as our redesign, but with the form higher on the page.


This page performed even better with an overall 37% lift in conversions from the original design.

By combining demographic research with “best practices,” the pages were given a substantial conversion boost. I think that’s something we can all toast to.

Go forth and test

Exploring your target demographic shouldn’t be your only resource, but it is a never-ending pit of brilliant ideas that can bring results for your landing pages. Here are your steps:

  1. Study who your target demographic is and who they really want to be.
  2. Identify the brands that are important to them. Extract the principles that resonate with your target demographic.
  3. Make your product or service the perfect solution to bridge that gap between who they are now and who they want to be by testing copy and elements that you know they already love.

These three steps will fill your brain with new and smart A/B testing ideas. What are you waiting for? Go forth and test!

Has your target demographic given you any A/B testing inspiration? Let me know in the comments!

– Allison Otting

rsz_image08 (1)


2 Questions That Will Help You Gather Endless A/B Testing Ideas


“California, Here We Come…” Introducing SmashingConf Los Angeles 2015

Great conferences are the ones where you learn, connect and get inspired. We know that, and we put our hearts into crafting events that aren’t just great, but go way beyond expectations. Ready for the next one? With SmashingConf LA 20151, we’ve got a full package: our new US conference with two days packed with quality content, lots of networking and a few mysterious surprises. We thought you might want to join in, too.

SmashingConf LA 2015: First SmashingConf on the US West Coast. April 27–30th 2015.2

About The Conference

When preparing a conference, we care deeply about how practical and valuable it will be. We look into things that have or haven’t worked, and why, and what worked better. In fact, the SmashingConf LA 2015 is designed to make you smarter, more informed and more skilled with your day-to-day decisions. Be it your workflow, front-end, design, development, UX or nerdy performance tricks. The focus of the SmashingConf is tangible, actionable, hands-on learning that you can apply to your work right away.

A view on the shore in Santa Monica, LA.3
Santa Monica in L.A. — now that’s a sunset you won’t easily forget. Not a common host of web conferences. Until now. Only 450 seats.4 (Image credit5)

So what are you signing up for? Two full days packed with practical design and front-end talks6 and five hands-on workshops7 — you’ll leave with a treasure of useful tips and tricks applicable to your work right away. We don’t care for crowded multi-track experiences. So in LA, we’ll go with one single track, 16 well-respected, high-caliber speakers, only 450 attendees and lots of networking — just the right recipe for an intimate, personal event.

And the best bit? A spectacular conference experience in Santa Monica, right at the coast of the Pacific ocean, with an onshore ocean breeze and sunshine in the back. Ready? California, here we come! To the tickets.8

First Confirmed Speakers

What’s a good conference without great speakers? Of course, we don’t take on this task that easily. Every talk is thoroughly curated, and we’ve created enough space, time and opportunities for meaningful, in-depth conversations. The speakers line-up9 is filling up slowly, but of course we aren’t going to reveal everything just yet.

To spice up your appetite a bit, here are the first confirmed speakers:

First speakers at SmashingConf LA 2015: Steve Souders and Samantha Warren10
First speakers11 at SmashingConf LA: Steve Souders and Samantha Warren.

We’ve reserved 50 early-bird tickets for US$549, and if you book a workshop, too, you save US$ 100 off the conference + workshop price. To create an intimate atmosphere, we have only 450 tickets available, and tickets are now on sale. Now, seriously, get your ticket already.24


Get your ticket.3225Grab your sunglasses, too. Only 50 early-birds available.

“Convince Your Boss” PDF

We do everything possible to keep our prices fair and affordable for everyone. However, if you need to convince your manager to send you to the event, we can help you as well. We also prepared a neat Convince Your Boss (PDF)26 (0.15 Mb) that you can use to convince your colleagues, friends, neighbors and total strangers to join you or send you to the event. We know that you will not be disappointed. Still not good enough? Well, tweet us @smashingconf — we can be quite convincing, too!

Need to convince your boss to send you to SmashingConf LA? We've got your back!27
8 reasons why you should send your incredibly hard-working, deserving employee to the SmashingConf” (PDF28). Quite self-explanatory, really.

Of course we’d love you to be on board as a supporter or sponsor of the event as well. In fact, we’re looking for some very special sponsors; we’ve prepared a few nifty options in our SmashingConf LA Sponsorship Pack29 (PDF, 0.9MB). So if you’re interested, please email us at hello@smashingconf.com30 — we’ll make sure it’s worth it!

Why This Conference Is For You

The conference is for you because you’ll learn lots of valuable techniques and meet fantastic, like-minded people from the industry. You’ll learn:

  1. How to improve user experience and design workflow,
  2. Strategies for building fast responsive websites,
  3. Front-end techniques for scalable designs,
  4. How to make use of pattern libraries and style guides,
  5. Guidelines for designing flexible design systems,
  6. How to deal with responsive images and RWD email,
  7. Common problems and solutions in eCommerce,
  8. Advanced front-end tooling, setup and workflow,
  9. Mistakes and lessons learned from large projects,
  10. …now, seriously, you want even more than that?

See You In Los Angeles!

We are looking forward to seeing you in Los Angeles, and who knows, perhaps we’ll manage to match and beat your expectations after all! We love a good challenge, and this one is going to be quite a journey — and we’d love you to take part in this little endeavour of ours as well. So, grab your ticket31 and see you there!


Get your ticket.3225Don’t forget your sunscreen, too. Only 450 seats.


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32

The post “California, Here We Come…” Introducing SmashingConf Los Angeles 2015 appeared first on Smashing Magazine.

Visit site:

“California, Here We Come…” Introducing SmashingConf Los Angeles 2015


5 Reasons Nobody Is Reading Your Website Content

Before a website can convert traffic into prospects or customers, visitors have to read the content. Most of the time, they don’t.

According to UX expert Jakob Nielsen, the average Web page visit lasts less than a minute, and the average visitor reads only a quarter of the text on a page.

In my experience managing content for website design projects, companies spend a lot of time figuring out how to pack tons of information into their sites, but not nearly enough time figuring out how to get visitors to read it—and act on it.

If nobody is reading your website content, your site needs improvement in one or more content-specific and general website design areas. This article covers five of the most important ways you can make your content more readable… so this isn’t how your readers perceive your website content:

warning boring content - placeitSource:

1. Pop-up Ads = High Bounce Rate

Using pop-up ads is like dropping an enormous boulder between the reader and the page he or she is attempting to read. Pop-ups are the ultimate online distraction and frequently cause visitors to immediately bounce.

But do pop-up ads work? Anecdotal reports like this one from Maura D’Andrea suggest they do.

On the other hand, analysis from Marketing Profs (which amusingly kicks off with a particularly obnoxious pop-up) tells us that pop-ups are bad in theory and universally loathed. This detailed analysis from Inc. suggests pop-ups sometimes work, and sometimes don’t.

Clearly, mileage varies with pop-ups. If yours are converting well and have no perceptible downside, keep using them. If, on the other hand, you’re not sure about the value of your pop-ups, here are a few recommendations:

  • Replace pop-ups with well-designed conversion elements properly placed on the Web page.
  • Display pop-ups once every 15 to 30 days. This technique prevents ads from irritating regular visitors.
  • Delay the display of the pop-up for 30 to 60 seconds, giving visitors time to become interested in what they are reading.
  • Make sure the pop-up is relevant to the page content. Irrelevant ads confuse as well as annoy visitors and increase the odds of an immediate bounce.
  • Be certain the content on a pop-up page is remarkable. Visitors are more likely to forgive the use of a pop-up if the information on the page is extremely useful.

Even Marketing Profs Is Conflicted About Pop-ups

2. No Responsive Web Design = Lost Sales

Responsive design enables websites to adjust automatically for optimal display on desktop monitors, tablets and smartphones. In February, 2014, for the first time, smartphones and tablets were used more than PCs to access the Internet. Does anybody doubt mobile devices will leave PCs in the dust in the years to come?

Today, websites and blogs must be as readable on a smartphone as they are on a desktop—period. According to a recent Aberdeen Group study, websites with responsive design experienced a 10.9% increase in visitor-to-buyer conversion rates year-over-year, compared to only 2.7% for non-responsive sites. And, according to Google, a mobile-friendly site makes users 67% more likely to buy a product or use a service.

To understand the importance of responsive design, think about restaurants. How often do you find yourself looking for a restaurant on your smartphone and being frustrated because you can’t find the link to make a reservation, or are forced to pinch and zoom to read the menu because it displays in a virtually unusable PDF format?

Restaurants with non-responsive sites are losing customers by the plateful—and your business is too, or will be. To view a site that uses responsive design well, look at Outback Steakhouse on your smartphone. The navigation is simple, and the menu is easy to read. No zooming or pinching or squinting required.

As a side note, Outback’s menu features enormous images, which are far more appetizing than the plain text that viewers usually see on a PDF menu.


Here are a few important content-related recommendations for building a responsive site:

  • Keep navigation simple and prominent.
  • Replace PDFs with HTML pages. Don’t be the company that spends a ton of money creating lavish, downloadable PDF brochures that are barely readable on mobile devices.
  • Strip out pages from the mobile version that people are unlikely to view on a smartphone, such as technical product detail pages and investor/stockholder data pages.
  • Keep body text even simpler and more compact than what was normal for the old desktop-only days. More on this shortly.

3. Slow Loading Time = Visitors Gone Forever

Thanks in part to our smartphone addiction, attention spans are shorter than ever. Slow Web page loading time is a statistically recognized conversion killer—people are not going to wait around to read your content, no matter how good it is.

In studies by Akamai and Gomez, researchers found that people expect a Web page to load in two seconds or less. A whopping 88% of visitors subjected to slow loading times are unlikely to return to the site.

The Daily Egg recently addressed the loading time issue extremely well. Here is a quick list of recommended fixes; get the details here.

  • Minimize HTTP requests.
  • Reduce server response time.
  • Enable compression.
  • Enable browser caching.
  • Minify resources.
  • Optimize images.
  • Optimize CSS delivery.
  • Prioritize above-the-fold content.
  • Reduce site plugins.
  • Reduce redirects.

In the interest of time, I won’t cover the same ground; however, recognize that loading time is a key point because it is a huge culprit in preventing people from reading your content.

If you are not yet sufficiently concerned about your page-loading speed, be aware that Google is now considering site speed in its search algorithm. While the algorithmic change has little immediate impact on SEO, the impact is sure to grow.

4. Poor Display = Bored, Apathetic Visitors

If you want people to read your online content, what you say and how you say it are equally important. A lot of site owners get in their own way by rendering good, fundamental content unreadable by overcomplicating how it displays and how it is expressed. Here are recommendations to keep your content simple, clear and irresistibly readable.

Typographical Display Issues

  • Keep the number of font sizes, styles and colors to a minimum.
  • Select and test font sizes and line spacing for readability. (See the instructive Numara Software case study in this Daily Egg article.)
  • Maintain high contrast with dark text on a light page background.
  • Eliminate superfluous, distracting design elements. (This technique also improves page-loading time.)
  • Consider the age and online experience of your audience when making creative decisions about typography. For example, an older audience appreciates larger fonts and greater contrast.
  • Keep headlines and subheads short and hard-hitting. Compactness must be even tighter for mobile viewing. Think 50 characters or fewer.
  • For desktop viewing in particular, avoid line widths that are overly narrow or overly wide. Font size and line height affect the calculations. Click here for an in-depth (and quite interesting) discussion of font settings.
  • Utilize as much white space as possible: It is inviting and encourages visitors to read.

Learn how NOT to do it at The World’s Worst Website:


In contrast, see Apple, the Masters of White Space:


Bonus Tip. When creating a website, design and content frequently pull in opposite directions. Designers like to add visual complexity, and writers like to keep Web pages stone-tablet simple. Testing and maintaining a relentless focus on maximizing user experience best resolve these conflicts.

Content Style and Structure Issues

  • Avoid industry jargon. It slows down readers, forces them to think and obscures your meaning.
  • Avoid “gobbledygook”—i.e., meaningless business-speak. Gobbledygook makes your content boring and vague.
  • Never use a big word when a little word will suffice do.
  • Like the plague, avoid complex sentences with multiple points. One idea per sentence is the mid-max range.
  • Keep paragraphs short. Five lines of text was a good benchmark in the old desktop-only days; today, think in terms of three or four.
  • In addition to being compact, headlines and subheads should convey the value of the text that follows.
  • Start body text with a high-level summary focused on your value proposition or key benefits. Add supporting text further down the page. This way, you maximize appeal to readers interested in a quick scan as well as those who want a fuller picture.
  • Convey important ideas in image captions. Because the eye is drawn to imagery, people are very likely to read captions.
  • Use testimonials to build interest and add credibility. Readers are more curious about what others say about your company than what you say.
  • Generally, short copy is preferable for website content. However, long copy is effective for:
    • Educational content aimed at a technical or sophisticated audience. (This blog is a perfect example.)
    • Web pages and landing pages for products or services that are new to the market, complex and/or expensive.

Bonus Tip. I recently found this terrific article, 27 Copywriting Formulas That Grab Readers’ Attention. In it are all the blueprints you will ever need for structuring your story on a Web page.

Advertising Disguised as Content = Death

Perhaps because the Web is inundated with content, marketers are tempted more than ever to resort to trickery. Misrepresenting or over-hyping content occasionally works in the short run, but always fails in the long run.

A basic principle of conversion optimization is that users see exactly what they expect to see when they click on a link. This is exactly why tricky social media sharing tactics fail:

  • Deceptive titles. For example, titles that look like articles but point to landing pages where you can download a report.
  • Titles that over-promise and under-deliver. Visitors may read your article, but will go away feeling burned, never to return.
  • “Informational” content that is really an infomercial for your products or services.
  • Teaser text that merely serves as a landing page to get you to download or buy something.
  • Pages of content that are packed with obtrusive conversion elements in the middle of the article text or sidebar(s).

Disguising advertising as content is not a new phenomenon created in social media—newspapers and magazines have been running ads formatted as news for more than a century.

Infomercials are nothing new.

Whether or not deceptive or semi-deceptive advertising works in print media, I would argue that the odds are stacked against it on the Web.

Social media sites, where much of today’s information-sharing occurs, place a high value on authenticity. In addition, today’s online users are sophisticated and experienced. If readers don’t get what they expect after clicking on a link, they will look elsewhere. They do not like to be manipulated and know when they are.

For this reason, I don’t see a bright future for native advertising, sponsored reviews and similar types of advertising disguised as content. As soon as readers—and the F.T.C.—catch on, game over.

Bottom Line

If you want people to read your content, be authentic, brief, clear, relevant, useful, credible, scannable and pleasant to read. Once you’ve hit those marks, stop what you’re doing and push the “Publish” button.

If you want people to read your content and then convert, do all of the above, plus craft well-designed conversion elements and position them smartly on the page. The critical point here is to keep promotional content separate—visually and contextually—from informational content.

Your Turn

  • What motivates you to read Website content?
  • What motivates you to click off without reading Website content?

Don’t miss other great content marketing articles by Crazy Egg.

The post 5 Reasons Nobody Is Reading Your Website Content appeared first on The Daily Egg.

See original article:  

5 Reasons Nobody Is Reading Your Website Content