Left-Handed Brush Lettering: How To Get Started

Left-Handed Brush Lettering: How To Get Started

Lettering and calligraphy are quickly becoming desired skills in a designer’s toolbox. Designers such as Marian Bantjes, Jessica Hische, Sean Wes and Martina Flor, just to name a few, have become not only an inspiration to the rest of us, but also a standard. Their work is not only client-based; they have become their own brand by providing products to their followers as well. Other designers have followed suit, and now it would seem that lettering and calligraphy are everywhere.

Thus, there is growing interest among designers and non-designers to learn. However, the majority of the resources and lessons available are for right-handed people. And when one finds a resource to get started with brush lettering for left-handed people, it might not be as comprehensive. As an educator, I have learned that one of the most challenging aspects for an aspiring left-hand letterer is to apply everything that a right-handed person is teaching. It is almost like doing mental gymnastics.

In my two previous articles, “Brush Lettering: It Only Gets Better After Practice,” part 11 and part 22, I talked about the reasons for the popularity of lettering and about supplies, inspiration, the basic principles and about forming the letters, and I also provided some videos. After I wrote the articles, I realized that I offered no theoretical or practical advice to those who want to learn lettering and who are left-handed.

While I am not able to guarantee your fame and notoriety, I can help you get started with the fundamentals of lettering with the left hand: the position and placement of the arm and wrist, the position of the paper, and holding the tool (brush pens). In this article, I will share theoretical as well as practical advice, demonstrating some points using my student Talondra Keeton3, who is left-handed, to create lettering. She started back in January, and throughout the semester she has been consistently improving. Let’s get started.

Further Reading on SmashingMag: Link

What’s The Difference? Link

This last semester, I taught a “special topics” class at the university where I work, titled “Explorations in Lettering and Scripts.” There were three students in the class who are left-handed. Since then, I have been trying to gather resources and examples to help them with the practical aspect of the lessons we covered. I have come across several articles and blog posts. Some are more scientific than others, and others are more focused on practical tips.

One of the most interesting things I learned while researching for this article is that Dr. M.K. Holder, who is executive director of the Handedness Research Institute8, states that writing with the left hand is not simply the opposite of writing with the right hand — nor is it enough to teach the opposite way. The main and most important difference is that, while right-handers write away from the body, left-handers write towards the body. Rest assured, there is hope and many good examples of letterers and calligraphers who are left-handed and who create gorgeous work.

According to some researchers, left-handers account for 10 to 12% of the population. Neal from LeftyFretz9, a website for left-handed musicians, has put together a great post reporting the percentage of people who are left-handed, by year and country. Though it varies, there is an overall increase in the percentage of people who self identify as left-handed. However, he states that there is still some stigma about being left-handed. If you are left-handed and are reading this, please know that you are in good company. A great number of famous people were and are left-handed, among them, Alexander the Great, Leonardo da Vinci and Vincent Van Gogh. And according to BuzzFeed10, Bruce Willis, Demi Moore, Pierce Brosnan, Bill Clinton, Jim Carrey, David Letterman, Bill Gates, David Bowie, Prince Charles, Prince William and even Barack Obama are all left-handed.

Hand, Wrist And Paper Link

I grouped these three aspects because they are closely related: the position of the arm and wrist go together with how the paper is positioned. Below you will see several opinions on the matter.

Jodi Christiansen, calligrapher and member of the International Association of Master Penmen, Engrossers, and Teachers of Handwriting11 (IAMPETH), writes in her post “Calligraphy and the Left-Handed Scribe12” that there are two types of left-handed ways to hold the pen:

  • Curlers curve their hand around the pen to mimic the writing angle that right-handers achieve naturally.
13
(View large version14)
  • Non-curlers write without bending their wrist.
2415
(View large version2516)

Based on the article, it seems that curlers might have a harder time doing lettering and calligraphy than non-curlers. The reason for this is that it is hard to see what you’ve just written. If your hand curls over the line of text you just wrote, it would be difficult to determine how much space to leave, let alone whether the ink is still wet. That would cause a lot of smears.

In addition to Christiansen’s hand positions, Jim Bennett, author of the book Calligraphy for Dummies17, talks about how to position the paper. Bennet lists three positions for the paper:

  • It can be held at 45 degrees to the left, making a diamond shape:
18
(View large version19)
  • It can be held at 35 degrees:
20
(View large version21)
  • Or it can be held normally, at 90 degrees:
22
(View large version23)

The paper’s position and angle and how the hand rests on the paper are critical. Some will find it comfortable to rotate the paper to find the best way to create the letters.

However, Dr. Holder stresses that the best position for the paper is “to the left of the child’s midline, and tilted so that the top right corner of the paper is closer to the child than the top left corner.” He explains that this position allows the hand to be positioned “to the left and away from the body at the start of writing line…” He adds that the angle will vary according to the person’s preference. However, the most important thing to keep in mind is “to keep the arm perpendicular to the bottom of the page,” keeping the wrist straight and “the hand below the writing line.”

2415
(View large version2516)

Claire from Heart Handmade UK26, who had to relearn to write after suffering an injury, advises several things and lists a few tools in her article “How to Improve Handwriting Skills for Adults That Are Left Handed27.” Among these, she advises to try to keep the elbow close to the body, to keep the arm straight, not to curl the wrist and to instead move the paper to a 45-degree angle, which will “automatically bring the hand to the correct writing position.”

Below is my student, Talondra, demonstrating how she places the paper. You will notice that she places the paper at approximately a 45-degree angle.

Holding The Pen Link

The biggest advantage of brush pens is their flexibility. The brush tip can turn to the left or the right. Notice in the video below how Talondra holds her brush pen.

Matt Vergotis28, logo designer and letterer, has very smart advice for left-handed letterers. He is left-handed, too, but he points out something I had not thought about, in an interview conducted by Daniel Palacios29 on his blog:

Brush pens have that 360º flexibility to the tip, so they’re not like chisel tip pens or calligraphy pens where the nibs split. Those pens are usually suited to specific angles whereas a brush pen with that 360º range of flexibility, isn’t a disadvantage to leftys.

Even more interesting is that he tends to hold the brush pen above the word. In other words, he tends to curl his hand over the letters. But his top advice is this: repetition. He recommends practicing 15 to 20 minutes a day, and over time you will see improvement.

30
(View large version31)

I will add that another element to repetition is patience and a willingness to be comfortable with being uncomfortable. Learning a new skill, no matter how much we like it, will bring moments of discomfort. But it is that patience and determination to overcome the discomfort, which equals deliberate practice, that will help you get better and better.

Talondra, my student, found that the more she practiced, the better she got at making each stroke. When she started, she found that her hand would shake, making her strokes wobbly. Here is a picture of one of her first practice drills:

Talondra Keeton's first practice sheet
Talondra Keeton’s first practice sheet

Eventually, she came up with a unique way to practice the basic strokes that made sense to her. She starts writing on the right side of the page and works her way to the left. I asked her if that is better for her, and she said that, yes, it helps her to control her hand shakiness. Here is a video of the practice:

However, when she writes a word, she starts from the left and works her way to the right side. Here are two videos of her writing words from two angles:

Notice that she constantly adjusts the pen and the paper to be able to create some strokes. She is very conscious of the contrast there should be between thick and thins, so she tries to accomplish that.

Another useful tip from Dr. Holder is to hold the pen or pencil about 1 inch or 1.5 inches away from the point of the pen or pencil, in order to see what is being written. He stresses that, while the grip might be tight and tense while you’re learning it, with time and practice this will improve. Another tip is to write large letters at first, which will help with relaxing the grip, then reducing the size of the letters as one gets more comfortable.

32
(View large version33)
34
(View large version35)

Let’s sum up some of the advice we have gone through so far:

  • Dr. Holder advises to grip 1 to 1.5 inches away from the tip of the brush, pen or pencil.
  • Position the paper so that your arm rests perpendicular to the right side.
  • Practice big letters and your arm movement first, to help you loosen your grip on the tools.
  • Brush pens are flexible.
  • If you’re interested in pointed calligraphy, there are nib holders made for left-handers.
  • Repetition, repetition and patience.

Here’s another piece of advice to keep in mind from Winston Scully4636, in an interview37 with Sean Wes38: Let go of the mental barrier. He also has great tips on creating beautiful work, such as start with pencil and then ink the piece; use a grid (parallel lines); and once you get a word where you want it, trace it writing it backwards — he says in the interview that this trains your eye to tackle spacing issues.

39
(View large version40)

One thing I found very interesting about Talondra’s progress is that she taught herself to do some drills without lifting the pen. That alone was a great accomplishment because, as I mentioned earlier, she used to experience a lot of hand shakiness. Take a look at this video of her doing M’s:

Lettering is a work in progress, where one moves from larger movement control to smaller movement control. That is why a willingness to fail, to be comfortable with being uncomfortable, and repetitive practice will be your best friends. In the meantime, we can all look at others’ work to be inspired to be better.

In this next part, I will list letterers and calligraphers who are left-handed, for your inspiration. But before we continue, take a moment to think about and practice some of the things you have read here. I will wait.

Inspiration Link

In my journey as a brush letterer and now practicing with the pointed pen, I have learned that, before looking at people’s work, I have to think about what I want to learn from them. For instance, in this case, as you look at the examples and go to their pages, keep in mind what you have read so far: arm and wrist position, paper position, and holding the pen. Ask yourself some questions:

  • How far (more or less) from the point are they holding the brush pen, pencil or pointed pen?
  • How are they positioning the paper?
  • How are the arm and wrist positioned relative to the paper?
  • At what angle do they place the paper and the pen?

Also, keep in mind that unless the person you are looking at teaches, they might have developed a way to work that they are not able to fully explain to you. I mention this because sometimes we all do things by memory, not fully aware of each step we are taking. I have included examples using both the brush pen and the pointed nib.

Ready to see some great work? Here is a list of left-handed calligraphers and letterers. I know there must be more great ones out there, so please feel free to share in the comments!

Matt Vergotis41Link

42
(View large version4543)
44
(View large version4543)

Winston Scully4636Link

47
(View large version48)
49
(View large version50)

Ciara LeRoy51Link

52
(View large version53)
54
(View large version55)

Taryn Nichols56Link

57
(View large version58)
59
(View large version60)

Sarah Pearson61Link

62
(View large version63)
64
(View large version65)

@dutchlefty66Link

67
(View large version68)
69
(View large version70)

Julia Broughton71Link

72
(View large version73)
74
(View large version75)

Michel D’anastasio76Link

77
(View large version78)
79
(View large version80)

Alyssa Hart81Link

82
(View large version83)
84
(View large version85)

Pam Stevenson86Link

87
(View large version88)
89
(View large version90)

Younghae Chung91Link

92
(View large version93)
94
(View large version95)

Amanda Houston96Link

97
(View large version98)
99
(View large version100)

Javi Alcazar101Link

102
(View large version103)
104
(View large version105)

Conclusion Link

Learning lettering is fun, but it can also be a tad frustrating for a number of reasons. Among those reasons, being left-handed in an environment where the majority are right-handed can feel daunting. In this article, I hope you’ve found tips, practical advice, examples and inspiration. Beyond these, however, I hope you feel that it is attainable and that you can do it.

When I started, I decided to practice every day. Maybe all you have is 15 minutes, or maybe you have more time. What matters is to practice. Maybe you like to learn songs — then use lyrics to practice. Or maybe you like to read books — if so, you can use excerpts to help you practice. Just make sure not to sell another person’s excerpts or lyrics. Practicing is OK, but selling it could (and most probably will) get you in trouble.

There are a lot of letterers on Instagram who hold monthly practice challenges. One of my favorites when I started was hosted by Caroline Kelso106. Now my favorite is another account named Hand Lettering for Beginners107. While you engage in these challenges, keep watching your favorite letterers and calligraphers. Experiment. And have patience. Practice makes progress, and remember: It only gets better with practice! With that in mind, check out my practice sheets here108 and let me know what you think of them. Use can use SMASHING5 as a code to get a freebie when you buy one. Have fun and please share your progress with me here or on Instagram109. I’d love to hear from you!

Articles Link

Resources Link

(vf, al, il)

Front page image credit: Amanda Houston125.

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/11/brush-lettering-it-only-gets-better-after-practice-part-1/
  2. 2 https://www.smashingmagazine.com/2016/12/brush-lettering-it-only-gets-better-after-practice-part-2/
  3. 3 https://www.instagram.com/tlaneadesigns/?hl=en
  4. 4 https://www.smashingmagazine.com/2013/01/understanding-difference-between-type-and-lettering/
  5. 5 https://www.smashingmagazine.com/2017/02/art-calligraphy-getting-started-lessons-learned/
  6. 6 https://www.smashingmagazine.com/2008/04/beautiful-handwriting-lettering-and-calligraphy/
  7. 7 https://www.smashingmagazine.com/2016/09/the-art-of-hand-lettering/
  8. 8 http://www.handedness.org/
  9. 9 http://leftyfretz.com/how-many-people-are-left-handed/
  10. 10 https://www.buzzfeed.com/emilyhennen/60-famous-people-who-are-left-handed?utm_term=.ae8gKMvX8#.tuXOWVMQX
  11. 11 https://www.iampeth.com/
  12. 12 https://www.iampeth.com/lesson/left-handed/calligraphy-and-left-handed-scribe
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/04/1-IMG_0042-large-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/04/1-IMG_0042-large-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/04/2-IMG_0044-large-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/04/2-IMG_0044-large-opt.jpg
  17. 17 https://www.amazon.com/dp/0470117710/?tag=mh0b-20&hvadid=3523124530&hvqmt=e&hvbmt=be&hvdev=c&ref=pd_sl_49voumte7t_e
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/04/3-IMG_0041-large-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/04/3-IMG_0041-large-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/04/4-IMG_0040-large-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/04/4-IMG_0040-large-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/04/5-IMG_0039-large-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/04/5-IMG_0039-large-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/04/2-IMG_0044-large-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/04/2-IMG_0044-large-opt.jpg
  26. 26 http://www.hearthandmade.co.uk/how-to-improve-handwriting-skills-for-adults/
  27. 27 http://www.hearthandmade.co.uk/how-to-improve-handwriting-skills-for-adults/
  28. 28 http://www.verg.com.au/
  29. 29 http://highpulp.com/2016/left-handed-calligraphy-and-lettering-with-brush-pens/
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/04/10-vergotisdetail-large-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/04/10-vergotisdetail-large-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/04/7-IMG_0037-large-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/04/7-IMG_0037-large-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/04/8-IMG_0036-large-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/04/8-IMG_0036-large-opt.jpg
  36. 36 http://wscully.com/
  37. 37 https://seanwes.com/2015/hand-lettering-as-a-left-hander-are-you-doomed/
  38. 38 https://seanwes.com
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/04/IMG_0034-large-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/04/IMG_0034-large-opt.jpg
  41. 41 https://www.instagram.com/mattvergotis/
  42. 42 https://www.instagram.com/mattvergotis/
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/04/9-mattvergotis-large-opt.jpg
  44. 44 https://www.instagram.com/mattvergotis/
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/04/9-mattvergotis-large-opt.jpg
  46. 46 http://wscully.com/
  47. 47 http://wscully.com/
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/04/11-scullyinstagram-large-opt.jpg
  49. 49 http://wscully.com/
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/04/12-scullydetail-large-opt.jpg
  51. 51 https://www.instagram.com/prettystrangedesign/
  52. 52 https://www.instagram.com/prettystrangedesign/
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/04/13-ciaraleroyinstagram-large-opt.jpg
  54. 54 https://www.instagram.com/prettystrangedesign/
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/04/14-ciaraleroydetail-large-opt.jpg
  56. 56 https://www.instagram.com/tarynsdoodles/
  57. 57 https://www.instagram.com/tarynsdoodles/
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/04/15-tarynnichols-large-opt.jpg
  59. 59 https://www.instagram.com/tarynsdoodles/
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/04/16-tarynnicholsdetail-large-opt.jpg
  61. 61 https://www.instagram.com/theinkyhand/
  62. 62 https://www.instagram.com/theinkyhand/
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2017/04/17-sarahpearson-large-opt.jpg
  64. 64 https://www.instagram.com/theinkyhand/
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/06/sarah-person.lettering-opt.png
  66. 66 https://www.instagram.com/dutchlefty/
  67. 67 https://www.instagram.com/dutchlefty/
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/04/19-dutchlefty-large-opt.jpg
  69. 69 https://www.instagram.com/dutchlefty/
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2017/04/20-dutchleftydetail-large-opt.jpg
  71. 71 https://www.instagram.com/lettersbyjulia/
  72. 72 https://www.instagram.com/lettersbyjulia/
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/04/21-juliabroughton-large-opt.jpg
  74. 74 https://www.instagram.com/lettersbyjulia/
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2017/04/22-juliabroughtondetail-large-opt.jpg
  76. 76 https://www.instagram.com/hebrew_calligrapher/
  77. 77 https://www.instagram.com/hebrew_calligrapher/
  78. 78 https://www.instagram.com/hebrew_calligrapher/
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2017/04/24-micheldanastasiodetail-large-opt.jpg
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2017/04/24-micheldanastasiodetail-large-opt.jpg
  81. 81 https://www.instagram.com/happilyeverhart/
  82. 82 https://www.instagram.com/happilyeverhart/
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2017/04/25-alyssahart-large-opt.jpg
  84. 84 https://www.instagram.com/happilyeverhart/
  85. 85 https://www.smashingmagazine.com/wp-content/uploads/2017/04/26-alyssahartdetail-large-opt.jpg
  86. 86 https://www.instagram.com/pamcalligraphy/
  87. 87 https://www.instagram.com/pamcalligraphy/
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2017/04/27-pamstevenson-large-opt.jpg
  89. 89 https://www.instagram.com/pamcalligraphy/
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2017/04/28-pamstevensondetail-large-opt.jpg
  91. 91 https://www.instagram.com/logos_calligraphy/
  92. 92 https://www.instagram.com/logos_calligraphy/
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2017/04/younhaechung-large-opt.jpg
  94. 94 https://www.instagram.com/logos_calligraphy/
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2017/04/younghaechungdetail-large-opt.jpg
  96. 96 https://www.instagram.com/ariapaperie/
  97. 97 https://www.instagram.com/ariapaperie/
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2017/04/amandahouston-large-opt.jpg
  99. 99 https://www.instagram.com/ariapaperie/
  100. 100 https://www.smashingmagazine.com/wp-content/uploads/2017/04/amandahoustondetail-large-opt.jpg
  101. 101 https://www.instagram.com/alcazar.javi/
  102. 102 https://www.instagram.com/alcazar.javi/
  103. 103 https://www.smashingmagazine.com/wp-content/uploads/2017/04/javialcazar-large-opt.jpg
  104. 104 https://www.instagram.com/alcazar.javi/
  105. 105 https://www.smashingmagazine.com/wp-content/uploads/2017/04/javialcazardetail-large-opt.jpg
  106. 106 https://www.instagram.com/ckelso/?hl=en
  107. 107 https://www.instagram.com/handletteringforbeginners/?hl=en
  108. 108 https://www.etsy.com/shop/wellchosenletters?ref=seller-platform-mcnav
  109. 109 https://www.instagram.com/almahoffmann/
  110. 110 http://www.sciencealert.com/here-s-why-are-some-people-left-handed-according-to-science
  111. 111 http://www.livescience.com/19968-study-reveals-lefties-rare.html
  112. 112 http://leftyfretz.com/how-many-people-are-left-handed/
  113. 113 http://www.rightleftrightwrong.com/statistics.html
  114. 114 http://www.huffingtonpost.com/2012/10/29/left-handed-facts-lefties_n_2005864.html
  115. 115 https://www.buzzfeed.com/emilyhennen/60-famous-people-who-are-left-handed?utm_term=.ae8gKMvX8#.tuXOWVMQX
  116. 116 https://www.ncbi.nlm.nih.gov/pubmed/1528408
  117. 117 http://www.iampeth.com/lesson/left-handed/calligraphy-and-left-handed-scribe
  118. 118 http://highpulp.com/2016/left-handed-calligraphy-and-lettering-with-brush-pens/
  119. 119 https://seanwes.com/2015/hand-lettering-as-a-left-hander-are-you-doomed/
  120. 120 https://piecescalligraphy.com/2015/09/27/best-tools-for-left-handed-calligraphers/
  121. 121 https://piecescalligraphy.com/2015/09/13/calligraphy-tips-for-lefties/
  122. 122 http://www.jetpens.com/Left-Handed-Calligraphy-Pens/ct/3128
  123. 123 http://www.hobbylobby.com/Art-Supplies/Drawing-Illustration/Calligraphy/Manuscript-Left-Handed-Beginners-Calligraphy-Set/p/8052
  124. 124 http://www.anythinglefthanded.co.uk/acatalog/calligraphy.html
  125. 125 https://www.instagram.com/p/BEEwTVEj0Do/?taken-by=ariapaperie

↑ Back to topTweet itShare on Facebook

Freebie: Dusk UI Icons (SVG, EPS, PDF, PNG)

An exclusive freebie from the Icons8 Dusk icon set with 80 modern, soft-colored icons in several different formats, perfect for a fresh interface design.

Today we have a great freebie by the Icons8 team shared exclusively with Codrops readers! The freebie is a set of 80 lovely UI icons from the new Dusk themed icon set.

About the freebie

The UI icons come in a unique style with a playful touch and soft colors. The formats included are: EPS, PDF, optimized PNG (50px), and SVG in two different dimensions (50px and 100px).

FreebieDuskUI_Single

The concepts represented are: Add to Favorites, Add, Answers, Approval, Available Updates, Browser Window, Bullish, Change Theme, Checked Checkbox, Checkmark, Circled Dot, Clear Symbol, Close Window, Collect, Comments, Details Popup, Do Not Disturb, Double Tick, Download, Downloading Updates, Email, Enter, Error, Exit, Expired, FAQ, Feedback, Find and Replace, Form, Help, High Priority, Horizontal Settings Mixer, In Progress, Info Popup, Info, Installing Updates, iOS Photos, Language, List, Login Rounded Down, Login, Logout Rounded Down Filled, Logout Rounded Left, Logout Rounded Up, Logout Rounded, Maintenance, Maximize Window, Menu 2 Filled, Menu, Mind Map, Minimize Window, Natural User Interface 1, New Document, Notification, Numbered List, Online Support, Open in Browser, Open in Window, Org Unit, Privacy, Private, Process, Questions, Restore Window, Save as, Save, Submit Progress, Support, Thumbnails, Toggle Off, Toggle On, Unchecked Checkbox, Upload, User Manual, Vertical Settings Mixer, View Details, VIP, Workflow, Zoom In, Zoom Out

Preview

As you can see on the preview below, the icon pack consists of topics that can come in handy for your next interface design:

UI-icons-in-Dusk-style-by-Icons8

Download the UI Icons for Free

You can download the freebie here:

The icons are free for personal and commercial use. No linking required, but if you provide a link, the guys from Icons8 will drink to your success. 🙂 Please don’t resell or redistribute them.

More from Icons8

Feel free to use the Icons8 Web App for:

  • Fast and simple recoloring of your icons
  • Generating fonts for your SVGs

Also, check out the handy desktop app that will make all Icons8 icons available on your computer.

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your exclusive freebie on Codrops just drop us a line.

Designing The Perfect Accordion

Designing The Perfect Accordion

Design patterns. An almost mythical phrase that often inspires either awe or resentment. As designers, we tend to think of design patterns as generic off-the-shelf solutions that can be applied to various contexts almost mechanically, often without proper consideration. Navigation? Off-canvas! Deals of the day? Carousel! You get the idea.

Sometimes we use these patterns without even thinking about them, and there is a good reason for it: Coming up with a brand new solution every time we encounter an interface problem is time-consuming and risky, because we just don’t know how much time will be needed to implement a new solution and whether it will gracefully succeed or miserably fail in usability tests.

Design patterns can be extremely helpful, mostly because they save time and get us better results, faster. We don’t need to apply them exactly as they are to every problem we encounter, but we can build on top of them, using our experience to inform our decisions because we know they’ve worked in other projects fairly well.

Over the last few years, I spent a lot of time working with various companies trying out various approaches and studying them in usability tests. This series of articles is a summary of observations and experiments made throughout the time. Tighten up your seat belts: in this new series of articles on SmashingMag, we’ll look into examples of everything from carousels to filters, calculators, charts, timelines, maps, multi-column tables, almighty pricing plans all the way to seating selection in airline and cinema websites. But before we head off to complex interface problems, let’s start with something seemingly simple and obvious: an accordion.

Further Reading on SmashingMag: Link

The Barebones Of An Accordion Link

There is a good reason why the accordion is probably the most established workhorse in responsive design. It’s an immensely useful pattern for progressive disclosure — highlighting important details of a section and revealing more details upon a tap or click, if necessary. As a result, the design stays focused and displays critical information first, while everything else is easily accessible. In fact, if you encounter a problem of any kind — too many navigation options, too much content, too detailed a view — a good starting point would be to explore how you could utilize the good ol’ accordion to solve that problem. More often than not, it works surprisingly well.

4
How difficult can designing an accordion be? Well, one has to consider many things. A nice example is on Schoolfinder5.

However, even a component as predictable and frequently used as an accordion has a lot of room for interpretation and ambiguity. Now, don’t get me wrong: context matters. An accordion for a navigation will require a different approach than a Q&A section. But in all the different contexts we have to thoroughly consider two things: the visual design and the interaction design of an accordion to eliminate all points of confusion and misinterpretation.

Now, if we look a bit more closely into the accordion’s barebones, it won’t be difficult to see all of its atomic elements. An accordion always contains the category title, an expanded and a collapsed state, an icon indicating expansion, and the spacing between them. Once the category is expanded, the icon should change to indicate collapsing. However, what if the user clicks on a collapsed card while another card is open? Should the expanded card close automatically, or not? What if not all items can be displayed — should the user be automatically scrolled up? Let’s take a closer look at these, and related issues, one by one.

6
A classic example of an accordion on Nsb.no7, a Norwegian trip-planner, with an icon aligned to the right edge of the bar, and the entire bar acting as an expansion trigger.

Choosing An Icon To Indicate Expansion Link

Now, let’s get started. What do we know? Well, obviously, in most left-to-right interfaces, the category name will be left-aligned, too. Assuming that, like in many accordions, the sub-items will slide in between two sections, what icon would you choose to communicate this behavior? An arrow pointing down, an arrow pointing to the right, a chevron pointing down, a plus, a circled plus — maybe something entirely different?

8
Zvv.ch9 combines two horizontal accordions with the same icon (circled plus) — one to indicate trip options, and one to indicate stops between two locations. Both of them serve the same purpose (expansion) and look similar. They clearly communicate the purpose of the icon and the behavior to be expected.

In my experience, it appears that the choice of icon doesn’t really matter as long as it isn’t overloaded with various meanings in the same UI. E.g. you could potentially use circled plus to indicate expansion, zooming and a bundle of two items in a pricing plans — and that might introduce confusion. However, in context of the accordion, users seem to understand that if some of the navigation items have an icon, while other sections do not, it’s some kind of sign that more content is available upon click or tap. We couldn’t spot any indication of one icon being more or less recognizable than others. However, it doesn’t mean that some options might not cause more confusion than others.

10
Ableton.com11 uses a plus icon to indicate both a bundle deal (above) and expansion (if you scroll down the page). With icons having multiple meanings here, it might be a bit confusing, because some users might expect either expansion when clicking on the icon at the top (but nothing happens), or no interaction when clicking at the plus icon at the bottom (acts as expansion). (View large version12)

For example, Slack13 uses an arrow pointing to the right, although accordion items slide in vertically between category titles, rather than from to the right of it. Now, at this point it’s worth asking what purpose the direction of the icon should have? It should probably serve as an indicator of the direction of movement, or more specifically, where the user’s view will be moved to once the icon has been tapped or clicked. In Apple Mail on iOS, for example, the chevron pointing to the right maps to the movement of the user’s view from left to right.

14
15
On Slack16, pricing plans appear as collapsed accordions on mobile, with the chevron pointing to the right, while the movement is happening from top to bottom.
17
In Apple Mail on iOS, for example, the chevron pointing to the right maps to the movement of the user’s view from left to right. (Large preview18)

Having a mapping between the direction of the icon and the movement of the user’s view seems reasonable, but since different interfaces behave differently (with mysterious icons often playing mind games with users) not everybody will be expecting this behavior. So in the end, it doesn’t really matter what you do as a designer: one way or another, you won’t be able to match the expectations of some of your users. When designing, we tend to focus on what we are designing, but even if we are extremely consistent in our UIs, our users will come with expectations influenced by their experiences on websites we’ve never even seen. The key, then, is to be as resilient as possible and provide an easy, straightforward recovery in case the expectations aren’t met.

19
20
The plus icon might be loaded with different meanings. On Leica21, the plus prompts a lightbox in which the product is displayed. Some users might not expect that behavior. A loupe zoom icon might be less ambiguous here.

So looking back at the choice of the icon then, if the accordion items slide in vertically, intuitively it seems safe to use any of the icons listed above except the icon pointing to the right. The only issue to consider here would be if the icon you choose is already overloaded with another meaning in a different context — for example, if you’re using a plus icon to highlight the parts of a bundle deal in a pricing plan (where the plus is not clickable), and then use exactly the same plus icon for the accordion. In such a case, it’s better to avoid using exactly the same icon for different purposes as it might cause confusion.

Is it all cleared up then? Well, not really.

Let’s think about the expected interaction for a second. While the arrow and chevron usually serve as cues for change in the indicated direction, the plus indicates addition and expansion. In both cases, the change can happen in various ways: a tap on the icon causes either an overlay with navigation items appearing above the content, or the items to slide in vertically (not horizontally). So far so good.

22
What behavior should users expect when seeing an arrow in the navigation menu on tifwe.org23? It’s clear that an icon on the right of the navigation items indicates a submenu, and the design makes good use of available space. The category title is a link that jumps straight to category, while the arrow prompts expansion.

However, when a user lands on a page, initially they don’t know if they’ve landed on a long-scrolling page with links jumping to some parts of the page or just a “regular” website with sections existing on their own separate pages. Quite often, an arrow pointing down triggers jumps to sections within the page, rather than expanding navigation options. It’s likely that the user might have been disoriented in the past, being brought to a section of a long page and then returning back to the top of the page, and continuing from there.

24
Icons are often ambiguous. On Qso.com25, how can users know for sure if the click on a button at the bottom of the screen will expand the area as an accordion or scroll them down the page? In this case, the user is scrolled down the page. It might be a problem as a chevron often indicates expansion. (View large version26)

As a result, if you choose to use an arrow, you might end up with some users expecting to be scrolled down to that section of the page, rather than see subitems sliding in between categories. Thus, the chevron seems to be a safer and more predictable option; if you choose to use it, then point it down in a collapsed state and point it up when expanded. For the plus icon, you could choose between the minus icon or a close icon instead.

27
Arrows on the Papillons De Nuit28. What are you expecting to happen when clicking on arrows at the top of the page, and on the right of the page? The arrow on the top acts as a hint (and does nothing on click), while the arrows on the right scroll the user to the sections of the page. Not every user might expect this behavior. (Large preview29)

So, what does all of this mean for us, as designers? First, if accordion items are supposed to slide in horizontally from left to right, it’s safe to use an arrow pointing to the right. Secondly, if accordion items are supposed to slide in vertically from top to bottom, either a chevron pointing down (not arrow!) or a plus icon might work well.

With this in mind, a choice of the icon should be a quite straightforward decision. But depending on how close that icon is to the category title, it might cause confusion, too. Now, what options do we need to consider when choosing the position of that icon?

Choosing The Position Of The Icon Link

Options! Nevermind which icon you’ve chosen, you could choose to place it a) to the left of the category name or b) to the right of it, or c) align the icon along the right edge of the entire navigation item bar, spacing out the icon and the category name.

30
Sometimes a click on a text label leads to a separate category page and a click on an empty space does nothing. That’s why, when wishing expansion, some users will try to hit the icon rather than the category or the empty space. Research by Viget.com.31Large view.32

Does the position matter? Actually it does. According to Viget’s “Testing Accordion Menu Designs and Iconography33,” some users tend to focus on hitting specifically the icon, rather than the entire navigation bar. There is a simple reason why it happens: in the past, some users might have been “burned” with alternative implementations of the accordion. On some websites, the category title doesn’t trigger expansion and instead goes straight to the category. In other implementations, a tap on the navigation bar doesn’t cause expansion nor jump into the category — it does absolutely nothing.

Although we’ll of course design the entire area to be a hit target, as not every navigation has this behavior, some users won’t know if your navigation is one of the “bad ones” or “good ones” until they actually click on it (or hover over it). As hover isn’t always available, hitting the icon just seems to be a safer bet — a click on the icon will almost always trigger the expected behavior. That’s an important detail to know when designing an accordion.

Across various interfaces and implementations, it seemed that with the icon placed to the right of the category title, users choose to focus on the icon more often than if the icon is placed on the left (where users click on the category’s title or the empty bar). However, some users still tend to choose the icon. Consequently, it’s a good decision to make the icon large enough for comfortable tapping, just in case — at least 44×44 pixels in size.

Left-aligned, right-inlined or right-aligned? It doesn’t seem to matter that much. But if you have a group of accordions (maybe living in a navigation menu), with the length of category titles varying a lot, toggling the accordion states across many sections will require slightly more focus than just running down the navigation bar from top to bottom. It’s just that the mouse pointer or finger has to be repositioned all the time to hit that fancy icon! Also, if the icon is right-inlined, on a narrow screen the finger would need to travel across the navigation area, obfuscating the view. With the icon positioned on the right edge of the bar, this issue would be resolved.

But if the icon is aligned to the right edge of the bar, we still need to be careful not to place it too far from the category’s name. Visually, it should be obvious that expansion relates to the category; so, in different viewports, the position of the icon could change to keep the visual connection obvious. Also, the icon could become slightly larger on wider screens. This option seems to be preferable for a group of accordions, but doesn’t really make a big difference for a single accordion — well, unless your data proves otherwise.

Designing Interaction For The Accordion Link

However, even with all these fine details out of the way, the interaction still raises some questions. Let’s assume that the category title is left aligned and the icon is aligned to the right edge of the bar. Following up with the discussion above, what should happen when a user clicks on the category name or on the icon or on the empty space in between? Should they all trigger expansion or should they serve different purposes?

Well, we can be quite certain about one thing: When the user clicks on the icon, they are probably expecting some sort of expansion, so a tap on an icon surely should prompt expansion. The category title, however, could be clicked with the intention of jumping straight to the category or with the intention of expanding.

If the category title triggers expansion, we definitely need to provide a link to the category in the sub-dropdown menu to let users jump right to that section (such as “All items”). That means that the user’s journey from the front page to a category might cause confusion because they wouldn’t expect to need an extra tap when clicking on the category title. However, recovery in that case is obvious and doesn’t really force user to restore the previous state as they can continue right away.

If the link to the category in the accordion is obvious, it won’t feel disruptive, whereas jumping to a category instead of having to expand the navigation item and then return back might feel disruptive. That’s why it’s probably more reasonable to have both the icon and the category title triggering expansion. It’s just less obtrusive this way. Should this interaction happen in between the category title and the icon as well? Some designers might argue that when a user taps on the area when navigating the site, they might not want expansion but rather “anchor” the mouser pointer to start scrolling on the page, and consequently it feels disruptive. That’s possible, of course, but it’s unlikely to happen if the user chooses to open a navigation menu to explore the navigation options.

34
The closer the tap happens to the icon, the more likely users will expect expansion. It doesn’t mean, though, that the closer the tap happens to category title, the more likely they expect to jump to the category. (View large version35)

Accordions are often used for cards, and depending on the viewport’s width, cards can be quite wide, so while some users will desperately try to hit the icon, some of your users will be used to collapsing and expanding cards by tapping on the empty area in the bar. Other users will be used to the empty area serving no purpose at all and will just ignore it. Only few will expect the bar to serve as a link to the category. In our tests, it proved to be less confusing to have empty space trigger expansion, rather than — well, frankly, anything else, so that’s what we choose to use, too.

Premier League Mobile Preview36
An accordion doesn’t have to serve only navigation. It can also display more or less details, e.g. in a table or a leaderboard table on PremierLeague.com37. (Desktop view38Mobile view39)

But what if you do want the category title to be linked straight to the category? One idea would be to bring clarity by having two visually distinctive elements that “hint” at the boundaries of elements — for example, with different background color for the icon and the category title (see the example above). In our experiments, we couldn’t notice any change in behavior and expectations — some people will still click on the category and wonder what happened. Again, having the section linked within the expanded accordion seems to be a safer bet.

Good enough? Well, we aren’t there quite yet. What if the user taps on the icon for expansion but there isn’t enough space on the screen to show all subitems? Somebody on your team might suggest to automatically scroll up the page to make sure that the expanded area is displayed at the very top of the screen. Is it a good idea?

Whenever we try to take control away from the user, that decision has to be thoroughly tested and considered. Perhaps the user is interested in viewing multiple sections at once and wants to quickly jump between the contents of these sections. Rather than making the user wonder about the auto-scrolling or jumping behavior and then scrolling back to restore the previous state, it seems less obtrusive just to keep things as they are, to leave the decision up to the user, as they can scroll down if necessary. Not many users will expect the jump to the top — not interrupting the flow or perhaps having a permalink to the section (if it’s really lengthy) seems to be a better option.

Sony40
On Sony.com41, if one section is expanded and the user clicks on another section, the open section collapses automatically. This behavior isn’t consistent across websites, so users can’t rely on nor expect this behavior everywhere. Large view.42

And then another question arises: If one section is already expanded, and the user clicks on another section, should the first one collapse or stay as is? If the first section is collapsed automatically but it’s not quite what the user was hoping for, they could always open it again, but they wouldn’t be able to scan or compare both categories simultaneously. If the section stays expanded, they would have to actively close the category they don’t need. Both options seem to have reasonable use cases.

The nature of an accordion would call for automatic collapsing, but it might not be the best option in terms of usability. For accordions with many items, we tend to leave sections expanded, because the jumping around that occurs as a result of panels closing and opening at the same time is too noisy. Hence, alternatively you could provide a “collapse all”/”expand all” button, which can be very helpful when designing a schedule or a detailed table. If there aren’t that many items, then the section could be collapsed by default because the jump would be minimal. (Please notice that the section would definitely collapse for horizontal accordions — keeping it open just wouldn’t make sense.)

43
44
45
On The Guardian’s website, a chevron is placed on the left, followed by the category title and empty space. The entire bar triggers expansion, and the category’s home page is neatly displayed as the first option among accordion items.

And then there is something else. Nevermind the choice of icon or its position, whenever an accordion is expanded, it should be easy to immediately collapse it. This interaction shouldn’t require any extra movement of the mouse cursor or finger — just like with any other hide-and-reveal interaction. This means that the icon for collapsing and expanding should of course change when activated, but its position should remain exactly the same, allowing for an instant toggling of the accordion’s state.

Wrapping Up Link

Phew, that was a lengthy examination of a seemingly obvious design pattern. So, how do we design the perfect accordion? We choose an icon that indicates expansion (chevron pointing down or a plus icon), make it large enough for comfortable tapping and position it across the right edge of the bar. The entire navigation bar triggers expansion — with enough padding around the bar to toggle the states and a link to the category’s main page within the accordion’s category.

If we do choose to use a chevron, the direction should change on tap, and if it’s a plus icon, it could easily transition into an “—” or “x” to indicate collapsing. To keep the interaction even clearer, we can use subtle transitions or animations that would slide in and slide out category items.

Of course, your solution might be very different as your context might be very different as well, so if you are looking for an alternative solution, below you’ll find some questions we always ask when designing an accordion.

Accordion Design Checklist Link

  1. What icon will you choose to indicate expansion?
  2. What icon will you choose to indicate collapsing?
  3. Where exactly will you place the icon?
  4. How do you design a category title?
  5. How do you indicate collapse and expanded states (beyond the icon)?
  6. What happens if the user clicks on the category?
  7. Should the accordion contain a link to the category’s main page?
  8. What happens if the user clicks on empty space?
  9. Should an expanded section collapse automatically when another section is selected?
  10. What if there isn’t enough space to display all items?
  11. Should you have a “collapse all/open all” link or button?

The level of consideration required for a component as seemingly established and predictable as an accordion turns out to be an almost never-ending story of design experiments and usability sessions, because there are only a few established guidelines for the appearance and interaction of that component. While building an accessible accordion isn’t difficult46, designing an accordion that is universally understood isn’t that easy. Consequently, users often feel lost because their expectations aren’t matched or because the interaction interrupts their flow. Our job is to reduce friction and make sure it happens as rarely as necessary. With a forgiving and resilient design we can achieve just that.

Perhaps you had a very different experiences than the ones mentioned in the article? Let us know in the comments to this article! Also, if you have another component in mind that you’d love to have covered, let us know, too — we’ll see what we can do!

Stay Tuned! Link

This article is a part of the new ongoing series about responsive design patterns here, on your truly Smashing Magazine. We’ll be publishing an article in this series every two weeks. Don’t miss the next one — on fancy (or not so fancy) date pickers! Ah, interested in a (printed) book covering all of the patterns, including the one above? Let us know in the comments, too — perhaps we can look into combining all of these patterns into one single book and publish it on Smashing Magazine. Keep rockin’!

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
  2. 2 https://www.smashingmagazine.com/2016/05/smart-responsive-design-patterns-or-when-off-canvas-isnt-good-enough/
  3. 3 https://www.smashingmagazine.com/2016/02/design-mock-ups-need-dynamic-content-tools-plugins/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2017/06/schoolfinder-preview-opt.png
  5. 5 http://schoolfinder.nyc.gov/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/05/nsb-accordion-preview-opt.png
  7. 7 https://nsb.no/bestill/velg-togavgang?to=Oslo+Lufthavn&from=Oslo+S&departureDatetime=2017-05-22%2018:00&departureSearchForArrival=false&returnSearchForArrival=false&petFree=false&passengers=1&noStairs=false&passengerType1=1&bookingPassengerCategorySpecial_11=0&toStation=220000&fromStation=100000&turnOnly=false&selectedIndexOut=0f
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/05/zvv-accordion-preview-opt.png
  9. 9 https://online.fahrplan.zvv.ch/bin/query.exe/dn.html?ignoreTypeCheck=yes&S=Zurich+Airport&REQ0JourneyStopsSID=A%3D1%40O%3DZurich+Airport%40X%3D8562801%40Y%3D47450064%40U%3D85%40L%3D008503016%40B%3D1%40p%3D1494925838%40&REQ0JourneyStopsS0A=255&getstop=1&REQ0JourneyStopsZ0A=255&Z=Lugano&REQ0JourneyStopsZID=A%3D1%40O%3DLugano%40X%3D8946874%40Y%3D46005506%40U%3D85%40L%3D008505300%40B%3D1%40p%3D1497341134%40&date=20.6.2017&time=14%3A09&REQ0HafasSearchForw=1
  10. 10 https://www.ableton.com/en/shop/push/
  11. 11 https://www.ableton.com/en/shop/push/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ableton-accordion-large-opt.png
  13. 13 https://slack.com/pricing
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/06/slack-1-preview-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/06/slack-2-preview-opt.png
  16. 16 https://www.slack.com/pricing
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/06/apple-mail-large-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/06/apple-mail-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/06/leica-plus-preview-opt.png
  20. 20 https://us.leica-camera.com/Photography/Leica-M/Leica-M10
  21. 21 https://us.leica-camera.com/Photography/Leica-M/Leica-M10
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/tifwe-expansion-preview-opt.png
  23. 23 http://www.tifwe.org
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/06/chevron-qso-large-opt.png
  25. 25 http://ourstory.qso.com.au/chapter/1970-to-1977
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/06/chevron-qso-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/06/arrows-papilon-large-opt.png
  28. 28 https://live.papillonsdenuit.com/
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/06/arrows-papilon-large-opt.png
  30. 30 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
  31. 31 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/06/accordion-iconography-preview-opt.png
  33. 33 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/06/belvedere-accordion-large-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/06/belvedere-accordion-large-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/06/premier-league-desktop-opt.png
  37. 37 https://www.premierleague.com/tables?co=1&se=54&mw=-1&ha=-1
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/06/premier-league-desktop-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/06/premier-league-mobile-opt.png
  40. 40 https://www.sony.com/
  41. 41 https://www.sony.com/
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/06/sony-accordion-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/05/the-guardian-1-preview-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/the-guardian-2-preview-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/05/the-guardian-3-preview-opt.png
  46. 46 http://heydonworks.com/practical_aria_examples/#progressive-collapsibles

↑ Back to topTweet itShare on Facebook

Free Icon Set: Happy 4th Of July ?? (20 Icons, PNG, EPS, AI, SVG)

Free Icon Set: Happy 4th Of July ?? (20 Icons, PNG, EPS, AI, SVG)

Every once in a while, we publish freebies1 related to different occasions and themes. Today, we’d like to share an icon set dedicated to a well-known upcoming American holiday. Some of you may already be working on the usual flyers or brochures, so we thought we’d help you out with a set of colorful icons to spice up your designs a bit differently this year. Thank us later!

2

Designed by the creative folks at Vecteezy1283, this freebie contains 20 illustrations of some lovely things that shouldn’t be left out on this particular holiday. All icons are available in four formats (PNG, EPS, AI, and SVG) so you can resize and customize them until they match your project’s visual style perfectly. Happy 4th of July to those who celebrate!

Further Freebies on SmashingMag: Link

Please Give Credit Where Credit Is Due Link

This set is released under a Creative Commons Attribution 3.0 Unported7, i.e. you may modify the size, color and shape of the icons (more details in the readme.txt file). Attribution is required, so if you would like to spread the word in blog posts or anywhere else, please do remember to credit Vecteezy1283 as well as provide a link to this article.

Here’s a sneak peek of some of the icons:

Close-up
A close-up of six of the icons in this set: Mostly red, white and blue colors, and all things American.
Close-up
Of course, you can never be too short of yummy donuts and bright garlands to celebrate the holiday.

Full Preview Of The Icon Set Link

9
(View full preview10)

Insights From The Designers Link

Inspired by the most patriotic holiday of the year, we think that these bright 4th of July flat icons will be perfect for every designer this time of the year. From fireworks to ice cream, these icons should give your designs the bang you’re looking for!

Download The Icon Set For Free Link

A big Thank You to Vecteezy for designing this wonderful icon set — we sincerely appreciate your time and effort! Keep up the fantastic work!

(il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/tag/freebies/
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/06/4th-of-july-full-preview-opt.png
  3. 3 https://www.vecteezy.com/
  4. 4 https://www.smashingmagazine.com/2015/09/free-world-landmark-icons/
  5. 5 https://www.smashingmagazine.com/2016/07/freebie-summer-icon-set-40-icons/
  6. 6 https://www.smashingmagazine.com/2014/10/freebie-touristic-icons-png-svg/
  7. 7 https://creativecommons.org/licenses/by/3.0/
  8. 8 https://www.vecteezy.com/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/06/4th-of-july-full-preview-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/06/4th-of-july-full-preview-opt.png
  11. 11 http://provide.smashingmagazine.com/Freebies/smashingmag-freebie-4th-of-july.zip
  12. 12 https://www.vecteezy.com/

↑ Back to topTweet itShare on Facebook

Connecting With Users: Incorporating Humor In Web Design

Connecting With Users: Incorporating Humor In Web Design

Joan is applying for a small loan on all-online-loanzzz.com. She’s becoming frustrated with the number of financial-disclosure forms she has to fill out. She’s thinking about visiting her local bank to ask for a loan instead.

While waiting for a page to load, the application presents a cartoon image of a person wearing a business suit sitting in a jail cell. The image caption says, “Hey, everyone hates disclosures. We know you do, too. We’re doing our best to keep everyone out of jail. Please bear with us for a few more clicks. You won’t regret it, and our loan officers will stay out of jail.” Joan smirks at the image. She might not appreciate the number of forms she has to complete, but she understands the serious nature of applying for a loan.

Humor is an important aspect of life. Researchers find humor has many positive benefits1. It can reduce stress, increase psychological well being and increase tolerance for pain. Most of us have had experiences in which we’ve used humor to lighten a mood or cheer someone up. Humor is integral and inherent to human relationships.

2
We can use humor to enhance our users’ experience. (Image: Brandon Sax3) (View large version4)

You can use humor in your design (both in the process and the product) to create a positive user experience. We want to develop positive relationships with our users — humor can help make that happen.

But how do I do this?, you might ask. Do I need to be a comedian? Should I format all of my FAQs as knock-knock jokes? The answer is no to both of those questions. You can incorporate humor in your design, maintain your brand identity and not look like you are trying too hard in the process.

Further Reading on SmashingMag: Link

Humor Has A Role In Design Link

People in general, many of them your potential users, enjoy humorous things every day: Side-splitting memes go viral, people share humorous personal stories on social media with friends and colleagues, awkward family photos get shared, and products are reviewed tongue in cheek, to name a few ways. We acknowledge humor done well over digital media: the Webbys have a humor category9 for its annual website awards; the Shorty Awards have a “Best Use of Humor”10 category for its social media award.

You don’t have to be all or nothing about your use of humor. You can use humor without presenting a comedy-focused experience. You can inject humorous elements in the experience, the same way you might add a unique icon: to add meaning and create a shared language with users. You can also use humor in your content to help form a connection with users.

Espen Brunborg, speaking at Beyond Tellerrand11, discusses the importance of effective use of comedy in a landscape where many websites look and feel the same across industries. Humor can set your experience apart from others in a positive way. You make your brand memorable and build relationships with users by effectively using humor.

Humor could potentially lead to a deeper emotional experience for the user, a key component for an effective UX. I’ll talk about opportunities to insert humor in the experience later. First, let’s discuss types of humor to consider.

What Makes Something Funny? Link

I apologize in advance. I’m going to try to explain why something is funny. First, humor is extremely subjective. I happen to think I’m hilarious. I often make jokes during meetings and when I speak at conferences. Almost as often, no one laughs at my jokes. Humor is contextual. You might make a joke that is funny in one situation and taken seriously in another setting. Also, humor is cultural. My experience with humor has all been through the eyes of Western cultures. I wouldn’t assume that my view of humor is transferable to other cultures.

Researchers have attempted to develop theories accounting for why something is funny. The incongruity theory posits that people find humor when something happens that is not in line with their expectation — for example, an envelope being opened and then glitter exploding all over the room. The benign-violation theory suggests people find humor in situations where something seems threatening but they know they are safe. For example, puns often violate laws of language, but the words in them still make sense. Listeners face the threat of having to decode language in a new or unusual way, yet they still feel safe after realizing the words themselves have retained their meaning. Slate offers a good article12 discussing theories of humor more in depth.

So, why do we sometimes attempt and fail at humor? The theories touched upon above suggest that going too far beyond or not far enough at either creating incongruity or threatening a violation are reasons for humor to fail. For example, it would be very incongruous to stand up and shout expletives in the middle of the work day in an office. However, this would probably go too far in violating congruity for people to find funny. Or, from the benign-violation theory perspective, this scenario would meet the threshold for providing a threat, but people might not know whether they are safe from the person screaming curse words. Therefore, they might react in fear rather than humor.

Slowing Users Down (In a Good Way) Link

Whether you subscribe to either theory above or another, your use of humor is an active attempt to slow down users’ ability to process information. Researchers call this “elaboration,” a fancy word for paying close attention. Users elaborate on humorous messages because the incongruency or violation of the norm requires closer scrutiny to process the message.

Espen Brunborg says that using comedy to slow users down might actually enhance the experience. When it comes to processing information, we shouldn’t be afraid that this slowing down will negatively impact the experience. Users are unlikely to notice, unless they find the humor inappropriate. The benefit of having users engage in elaboration while using your product is that this has been shown to lead to increased processing and greater recall of content. If users engage in increased elaboration of your experience and content, researchers suggest13 (PDF) they will have a more memorable experience.

Six Types Of Humor Link

We need to understand context in order to use humor appropriately. Researchers have identified different types of humor. Choose the type according to the situation in order to increase the likelihood of success. We can often label attempts at humor with more than one category. Below are six types researchers have defined.

Comparison Link

This puts two or more elements together to produce a humorous contrast. Apple’s old “Get a Mac” commercials14 featuring our friends Mac and PC were examples of comparison. There was humor in comparing the hip and cool Mac to the boring and stuffy PC. It also had elements of exaggeration (covered below), given that it is doubtful Mac users share all of the traits of the Mac in the commercial (and, likewise, the PC users with the PC).

15
Apple used both comparison and exaggeration in its “Get a Mac” marketing campaign. (Image: Adweek16)

Personification Link

This attributes human characteristics to animals, plants and objects. Personification helps us understand complex concepts and might also make people more receptive to information17. Clippy, the Microsoft Office assistant, is an example of personification. Microsoft’s hope was that a funny personified paperclip would help users learn critical tasks in the Office programs. Clippy is no longer with us, but personification continues. Users found Clippy to be annoying and intrusive, highlighting the need for us to understand our users and their context before bombarding them with what we consider to be humorous. Clippy actually slowed things down, a death sentence for any product meant to promote productivity.

18
Microsoft meant for Clippy to be helpful and humorous. It was not. (Image: Wikipedia19)

Exaggeration Link

This overstates or magnifies something out of proportion. Exaggeration is often used to drive home a point. Researchers have found evidence that exaggeration makes people more aware you are trying to make a point, but not necessarily more open to the point you are making. “It took me forever to write this sentence” is an example of exaggeration — although Smashing Magazine’s editors might feel it’s true.

Pun Link

This uses elements of language to create new meanings that result in humor. Researchers have found20 that people are better able to remember puns over other types of information. You could take advantage of puns to make parts of your experience more memorable or to increase the likelihood that users will remember certain parts of their experience (such as their password). David Pope’s post on SAS’ blog21 uses puns to tie together relevant terms from SAS’ product to tell the story of how the company has evolved over time.

Silliness Link

This ranges from a funny face to a ludicrous situation. Sarcastic comments and situations could be classified as silliness. We see a lot of silly humor online and in movies. I opened this article with an example that you could classify as silliness. Philosophers suggest22 that this type of humor allows us to laugh at ourselves, a potential for removing barriers to learning and critical thinking.

Surprise Link

Humor can arise from an unexpected situation. A spring-loaded glitter bomb23 is an example of a surprise. People who think they are opening a letter are not prepared for the blast of glitter that covers them. Not everyone would find it funny, but the intent is to create a surprisingly humorous situation.

When To Use Humor Link

Use humor at the appropriate time and place in the experience. Remember that humor can enhance your relationship with users. Mix in humor to build your brand and relate to users. Humor is perfectly appropriate in otherwise benign situations: successfully sending an email, placing an order for food or updating profile information, to name a few.

For example, if someone has just successfully completed a transfer of money from their checking account to savings account, you might present them with a humorous message about building their nest egg. On the other hand, if someone doesn’t have enough funds in their account to cover a bill they are trying to pay, they probably would not appreciate a humorous element that reminds them of their financial situation.

Unless your experience focuses on humor, such as The Onion’s, there’s no reason to be slapstick or go overboard. Humor can become a distraction when it’s too much of a good thing. What follows are examples of when it is appropriate.

On an “About” Page Link

Current and future clients and staff will view your “About” page to learn about your culture. Highlight your sense of humor on the page if appropriate. The “About” page is an opportunity to show visitors the type of people they will be working with. EY Intuitive’s staff chose the photos below for their “About” page. Many of the staff express a sense of humor through body language or props. Imagine how many people who visit the office ask Michael how his box-on-a-coat-rack friend is doing, or ask Kieran whether he always wears his superhero disguise around the office.

24
EY Intuitive encourages its staff to use humor in their bio photos. (View large version25)

To Convey Important Information Link

Researchers have found that people tend to pay closer attention when they encounter appropriate humorous messages. The folks at Slack have been masterful at getting people to pay attention to their product updates (shown below). Perhaps there are ways to present end-user license agreements (EULAs) and other traditionally tedious documentation in a way that better grabs the user’s attention. Even though your EULA might need to meet the needs of those with a law degree, your images or visualization of the EULA could use silliness to make it less taxing to read.

26
Slack presents a list of updates and fixes that is pleasurable to read. (Image: Slack) (View large version27)

When It Builds or Fits Your Brand Link

You can use humor to inject personality into the relationship between your brand and users. We don’t typically think of signing up for insurance and workplace benefits as being amusing. The level of complexity can be overwhelming.

ALEX28 is a tool for communicating employee benefits. It builds its brand around humor to convey different benefits and options to employees. ALEX is careful not to go overboard, instead relying on subtle humor through images and a relaxed conversational tone (see below). Jellyvision, the company that created ALEX, maintains a sense of humor across the brand — for example, in its engaging blog posts29.

30
ALEX uses humorous images to build the brand’s relationship with users. (Image: Jellyvision31) (View large version32)

The Outline team intersperses elements of humor throughout its experience. For example, the floating heads and other objects next to the articles on its home page provide a humorous glimpse into the topics of the articles (see below). Silly wavy lines establish a shared language with users, who come to associate the silly wavy lines with the appearance of quotes.

The Outline33
The Outline includes humorous elements to tease an article’s content. (View large version4334)

As done with ALEX, you will want to use humor in a consistent way and tone if it will be part of your brand communication. It should be consistent across channels and media. For example, humor on your website should carry over to your marketing material. A content style guide, similar to MailChimp’s35, would help with the consistent application of humor, regardless of who on your staff is creating the content and where that content will live.

In Chatbots Link

Chatbots are growing in popularity across industries. People want their chatbots to have personality, including humor as appropriate. In an article for NPR36, Shay Maunz writes about the need for chatbots to have a warm and human-like personality for long-term success. You will need to account for some level of humor if you want your chatbot to have human-like conversational aspects.

On the 404 Page or to Reduce Frustration Link

Many websites have humorous 404 pages. You can curb the frustration of users not finding what they are looking for with a well-done humorous 404 page. Agens37, a Norwegian design and development studio, uses humorous images and animation on the theme of being lost in space on its 404 page. Equally important, it surfaces a link to existing content, allowing users to quickly navigate to a page that potentially meets their needs.

38
Agens’ 404 page injects humor, while still enabling users to quickly find existing content. (Image: Agens39) (View large version40)

The folks at Blue Egg41 use humorous video and (slightly annoying) sound on their 404 page, linking directly to the home page.

Blue Egg42
Blue Egg uses video and sound to present a humorous experience on its 404 page. (View large version4334)

When Not To Use Humor Link

You can damage your brand or experience if you use humor inappropriately or at inappropriate times. Most users want a quick and easy experience – don’t use humor to extend the time it takes a user to complete a task. For example, adding a knock-knock joke or funny comment to a page-loading screen is fine, but making the user click through a knock-knock joke to access account information is not.

Another option is to introduce humor tactically based on the user or company using your application — for example, going for a silly interface if you’re a startup but staying fairly straight-laced if you’re serving a government agency or bank. You could also let users choose when humor is presented. MailChimp accomplishes this with its “Party Pooper Mode.” Users who want the functionality of MailChimp without the humor can use this mode to remove some of the funnier elements of the application.

For Accomplishing Critical Tasks Link

Users usually want to accomplish important tasks quickly. Your humor shouldn’t impede their progress or cause confusion. Suppose you’re making a large purchase online, and you receive the message shown below after submitting your payment information. Not only is it unclear what has happened and how you can remedy the situation, but the laughing emoji comes across as overly sarcastic and condescending. You would likely feel confused about the status of your payment, frustrated at the levity with which the website treats the situation, and angry that you’re not presented with a quick and easy way to resolve the problem.

44
Users will find humor inappropriate when encountering errors during critical workflows. (Image: Brandon Sax 45) (View large version46)

When It Is Out of Line, Overly Sarcastic or Mean Link

People often couch mean or negative comments in humor. Don’t make fun of your users. Messages conveyed in a digital medium can suffer from a lack of context, tone and intonation. That’s why so many people type “JK” (just kidding) after writing something intended to be humorous; some forms of humor demand visual and aural cues that tell us someone is joking. Users shouldn’t think you are making fun of them or being deliberately insensitive.

Groupon found itself in hot water after a failed attempt at humor in an ad that ran during the 2011 Super Bowl. The ad made light of the plight of people living in Tibet in a tasteless way. The media and customers noticed this immediately, with many outlets writing about47 the poor use of humor and the resulting damage to the brand.

UX designer Brandon Dorn has an excellent post on “confirmshaming.”48 Confirmshaming is the insulting microcopy that many digital properties have started to include when users try to opt out, withdraw membership or ignore a call to action (for example, declining to sign up for a newsletter). As Dorn puts it, confirmshaming is the digital equivalent of a salesperson following you around a clothing store telling you that your current outfit is ugly. I’ve also discussed confirmshaming in my chapter on framing content in Design for the Mind49. Confirmshaming is insulting and disrespectful to users. If you feel a need to insult users in order to try to strongarm them into doing something, reconsider what you are asking them to do and why you don’t expect them to willfully engage in the behavior.

50
Delish resorts to insulting users in an attempt to get them to provide their email address. (Image: Delish51) (View large version52)

When It’s a Distraction or Provides False Information Link

Users rely on you to provide accurate information and service. You will not succeed if they lose trust. Poorly done humor could decrease trust in your product. Avoid it by testing copy with users for both understanding and impact. Also, consider investing in a professional copywriter with experience in comedic writing.

I confess that I don’t enjoy anything about April Fool’s Day. A day dedicated to lying doesn’t sit well with me. Nevertheless, April Fool’s pranks have proliferated on the Internet. Often, these pranks waste time and backfire by misleading users. Some users might find a particular April Fool’s prank to be extremely humorous, but I don’t think it’s worth the risk of bad press and angry users. Similarly, avoid any attempt at humor that could mislead users and potentially cause them anxiety, regardless of what day it is.

With Great Power Comes Great Responsibility Link

You can do damage if you come across as condescending or insulting. Don’t prolong or distract users from completing critical tasks. As with any design element, if humor doesn’t improve the experience, don’t use it — even if the competition does. You are better off not using humor than attempting to use it and risking having to apologize.

Conduct usability testing to improve the chances that your use of humor will align with user expectations. Additionally, create personas to guide the use and type of humor that you employ. You could direct certain humorous elements towards specific personas and tone down the humor for other personas at various points in the experience.

Humor can give you an edge with users. Done appropriately, it can defuse a stressful situation, help build your brand and convey your message. You don’t need a funny product in order to use humor. There are many opportunities to use it appropriately. Depending on your product, you could start to incorporate it in your “About” or staff bio pages, or try it on your 404 page and gauge how the audience reacts. Test any attempt at humor prior to going live. Be open-minded and willing to take criticism. Users are not monolithic in their sense of humor, so be sure not to go overboard if humor isn’t the purpose of your product.

Additional Resources Link

(cc, vf, yk, al, il)

Footnotes Link

  1. 1 http://s3.amazonaws.com/academia.edu.documents/43675521/Humor_As_a_Stress_Moderator_in_the_Predi20160312-29853-1fi77gb.pdf?AWSAccessKeyId=AKIAJ56TQJRTWSMTNPEA&Expires=1482101420&Signature=t14f%2BDbi1dtHuubhfzA8LJzZ1SA%3D&response-content-dispositi
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Humor-Cover-large-opt.png
  3. 3 http://www.brandonsax.com/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Humor-Cover-large-opt.png
  5. 5 https://www.smashingmagazine.com/2016/07/getting-practical-with-microcopy/
  6. 6 https://www.smashingmagazine.com/2012/02/a-fun-approach-to-creating-more-successful-websites/
  7. 7 https://www.smashingmagazine.com/2016/04/this-interface-is-a-good-joke/
  8. 8 https://www.smashingmagazine.com/2014/11/framing-effective-messages-to-motivate-your-users/
  9. 9 http://webbyawards.com/winners/2016/websites/general-website/humor/
  10. 10 http://shortyawards.com/category/8th/humor
  11. 11 https://vimeo.com/channels/beyondtellerrand/217697296
  12. 12 http://www.slate.com/articles/arts/culturebox/features/2014/the_humor_code/what_makes_something_funny_a_bold_new_attempt_at_a_unified_theory_of_comedy.html
  13. 13 https://www.researchgate.net/profile/Ann_Frymier/publication/248940257_An_Explanation_of_the_Relationship_between_Instructor_Humor_and_Student_Learning_Instructional_Humor_Processing_Theory/links/551d99910cf213ef063e782e.pdf
  14. 14 http://www.adweek.com/creativity/apples-get-mac-complete-campaign-130552
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Mac-vs-PC-preview-opt.png
  16. 16 http://www.adweek.com/files/adweek_imports/mac-05.jpg
  17. 17 http://link.springer.com/article/10.1007/s13412-013-0157-5
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Clippy-preview-opt.png
  19. 19 https://en.wikipedia.org/wiki/Office_Assistant#/media/File:Clippy-letter.PNG
  20. 20 http://www.tandfonline.com/doi/abs/10.1080/00221309.2010.499398
  21. 21 http://blogs.sas.com/content/sascom/2016/04/01/punny-post-celebrating-sas-analytics/
  22. 22 https://www.researchgate.net/profile/Mordechai_Gordon/publication/227904832_Learning_To_Laugh_At_Ourselves_Humor_Self-Transcendence_And_The_Cultivation_Of_Moral_Virtues/links/551948d50cf21b5da3b81d3c/Learning-To-Laugh-At-Ourselves-Humor-Self-Trans
  23. 23 https://www.ruindays.com/products/spring-loaded-glitter-bomb
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/05/EY-Intuitive-Funny-Bios-large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/EY-Intuitive-Funny-Bios-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Slack-Update-Text-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Slack-Update-Text-large-opt.png
  28. 28 https://www.meetalex.com/
  29. 29 https://www.meetalex.com/blog/jellyvision-creator-of-alex-gets-20-million-in-funding-doesnt-plan-to-get-all-weird-about-it/
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Alex-Humor-large-opt.png
  31. 31 https://www.meetalex.com
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Alex-Humor-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/06/The-Outline-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/06/Blue-Egg-large-opt.png
  35. 35 http://styleguide.mailchimp.com/voice-and-tone/
  36. 36 http://www.npr.org/sections/alltechconsidered/2017/03/10/519002884/it-has-to-have-a-soul-how-chatbots-get-their-personalities
  37. 37 https://www.agens.no/
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Agens-404-large-opt.png
  39. 39 https://www.agens.no/404
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Agens-404-large-opt.png
  41. 41 http://bluegg.co.uk/404
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/06/Blue-Egg-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/06/Blue-Egg-large-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Humor-WhenNotTo-large-opt.png
  45. 45 http://www.brandonsax.com/
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Humor-WhenNotTo-large-opt.png
  47. 47 http://samuelsoncom.com/brand-humor-done-right-hint-were-not-talking-groupon/
  48. 48 https://www.viget.com/articles/shame-the-confirmshamers
  49. 49 https://www.manning.com/books/design-for-the-mind
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Delish-Confirmshame-large-opt.png
  51. 51 https://www.Delish.com
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Delish-Confirmshame-large-opt.png
  53. 53 https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwj8kc_0jIbTAhUBz2MKHQRWDNgQFggcMAA&url=http%3A%2F%2Fwww.managementparadise.com%2Fuploads_blog%2F280000%2F279436%2F0_1005.docx&usg=AFQjCNEO2VbeQkUucr3-ZM_siQx3uraXjg&sig2=v4B
  54. 54 http://arizona.openrepository.com/arizona/handle/10150/609850
  55. 55 http://www.tandfonline.com/doi/abs/10.1080/01633392.1991.10504957
  56. 56 http://www.tandfonline.com/doi/abs/10.1080/00221309.2010.499398

↑ Back to topTweet itShare on Facebook

Reaching The Millennials: Mobile Marketing Trends And Techniques

Reaching The Millennials: Mobile Marketing Trends And Techniques

The average American spends almost five hours1 per day on their smartphone. So, why is it so hard to make mobile ads work? Marketers toil over clicks and conversions on highly targeted ads, but users, tired of intrusive banners, keep installing ad blockers. With $100 billion in annual mobile ad spend at stake2, someone has to figure out a way to fix this disconnect.

The good news is that the latest mobile trends show promise that publishers and advertisers are getting smarter about the user experience. Google is working to recapture lost attention with a crackdown on mobile pop-ups, and marketers are easing off of aggressive acquisition strategies to focus on retention. While some digital trends such as immersive VR and AR ads will take years to collect sizeable audiences, others, like mobile wallets and chatbots, are already powering millions of daily brand-consumer interactions on mobile. In this article, we’ll look at some of the biggest trends in mobile marketing.

Further Reading on SmashingMag: Link

Mobile Merges Digital And Offline Experiences Link

Mobile payments at physical points of sale are growing in the US, with over $314 billion in payments expected by 20207. But the revenue from these purchases represents just a fraction of the value marketers will get from collecting transactional data.

Retailers can now funnel data from cashless mobile transactions to CRM and personalize experience for each shopper based on their purchase history, location and time. Starbucks, for example, collects information about its loyal customers through its branded mobile wallet app: where they are, what drinks they purchase or the type of music8 they listen to (you can build a playlist within the app). The Sephora to Go app recommends new products based on the user’s purchase history and pushes a notification to their phone or smart watch whenever the user is around their store.


9
Mobile payments will be a critical tool for collecting customer data and personalizing digital experiences.


10
Retailers use mobile data to locate the nearest store and make personalized product suggestions.

What’s in it for shoppers (or those millennial shoppers who still somehow frequent bricks-and-mortar stores)? Many enjoy the frictionless experience of proximity payments: faster than most EMV chip cards, easier and more secure than carrying a physical wallet. Modern point-of-sale terminals accept Android Pay, Apple Pay and, most recently, even Selfie Pay, a service by Visa11 in partnership with BMO that verifies a user’s identity using biometrics and, specifically, a user’s selfie. And unlike most social media selfies, mobile payment data is protected with a technology called tokenization; all marketing messages require prior affirmative consent from consumers, or “opt-in.”

Shorter Videos To Drive Performance Marketing Link

More than half12 of all YouTube views come from mobile devices. That’s amazing, considering how long it took to buffer videos on mobile just a few years ago. The average download speed on mobile is now over 19.27 Mbps, a 30% year-over-year improvement13. Thanks to technology enhancements, advertisers can now push more interactive digital content to shoppers on the go. Obviously, people interact with content differently on mobile, so marketers trim videos and add text overlays for users who don’t have headphones at hand in a public space.


14
Marketers are adopting the video format for on-the-go content consumption in social media feeds by trimming the length of clips and adding text overlays.

Mobile, social and video forge a powerful combo for marketing ROI, which has now also become easier to track. Video ads are engaging: 80% of users15 recall a video ad they viewed in the past 30 days. Video accommodates native publisher formats, with multiple options for mobile placement — pre-, mid- and post-roll ads, interstitials in apps, video banners, etc. Marketers can now measure video ROI not just through brand awareness, but with more tangible performance metrics — and even offline. For example, Google’s most recent ad product offering16 captures data on how video ads are driving foot traffic into physical stores.

One-On-One Conversations With Brands Through Chatbots Link

Conversation sets the foundation for sales and good customer service — just think of your local mom-and-pop store. Chatbots scale these one-on-one interactions to cater to millions of consumers via text messages. Whole Foods, for example, has a Facebook bot that assists shoppers with recipe suggestions.


17
Whole Foods’ chatbot suggests recipes and makes it easy to shop for ingredients.


18
Whole Foods’ chatbot suggests recipes and makes it easy to shop for ingredients.

Similarly, Burger King and Pizza Hut customers can order food directly19 through Facebook Messenger and Twitter bots. But chatbots don’t just replace salespeople to speed up customer orders. The wealth of data that these chatbots have about a particular Facebook user allows brands to learn about that user’s preferences and to personalize communications accordingly. Deep machine-learning algorithms will improve bots over time, giving them a competitive edge over any local shop assistant in predicting consumer behavior. Brands will upsell and cross-sell products and services directly in a shopper’s inbox — right next to their friends’ messages.


20
Retail brands use Facebook Messenger to send shipping updates and new offers.

Reducing The Path To Purchase With IoT Link

Brands now have many sophisticated ways to collect consumer data using the Internet of Things (IoT). Voice assistants such as Alexa, Siri, Google Assistant, Microsoft’s Cortana and Line’s Clova allow brands to listen — literally — to their customers. More than 8 million owners21 of Amazon Echo’s Alexa can easily order via a voice command from Amazon’s growing network of partners, which now include Domino’s, Uber and Jamie Oliver.

Wearables, connected objects and smart packaging shorten a shopper’s path to purchase. For example, Amazon’s Dash buttons connect to people’s home Wi-Fi and Amazon accounts. Whenever an Amazon Prime member runs out of a detergent, batteries or another household staple, a simple press of a Dash button will automatically place an order, and the product will be delivered in two days or faster.

For marketers, this opportunity to be very close to consumers in their homes means they need to handle customer data extra cautiously. Purchase trends data are useful for retention marketing and lookalike targeting, but home devices are considered private space. To avoid being perceived as creepy, marketers shouldn’t make any personalized product recommendations related to sensitive topics such as health.


22
Echo Dot for Alexa has partnered with top brands to enable shopping via a voice command.

Native Ads: Video Captures More Eyeballs, But Mobile Search Captures More Pockets Link

Snap recently went public at $24 per share, capturing a growing slice of B2C marketing budgets with a promise to reach millennials, today’s most coveted demographic, through native video content. Native ads are expected to take up to 53%23 of all display spending this year, largely on mobile.

Branded (i.e. promoted) stories on Facebook, Snapchat filters and sponsored articles on Buzzfeed are all examples of native ads. They look like the publisher’s organic content, which is great for engagement rates because people tend to pay more attention24 to such ads. At the same time, some studies show that users feel cheated25 when they click on an “advertorial” that wasn’t clearly labeled as such.


26
Local search ads got easier with app-in-app integrations such as Google Maps and OpenTable.


27

Search ads, the most popular native ad type (and by far the most accessible28 one), are morphing into new formats, as Internet giants such as Google, Apple and Tencent are adding new app integrations into their mobile ecosystems. For example, people can get a Lyft or book a table via OpenTable all within the Maps app. Search partnerships create a win-win situation for vendors, who get an easy entry to the market, and for publishers, who are building mobile ecosystems: WeChat’s average revenue per user29 is estimated at over $7, with over 8,000 brands currently using the platform. What a lucrative way to retain users and keep them engaged within one app!

Summary Link

As digital and offline experiences got more intertwined, new interactive advertising formats emerged, with a promise to capture the most scarce and valuable marketing asset of all — people’s attention. Still, marketing to millennial shoppers remains a challenge. It’s now a job for engineers, data scientists and designers, maybe more so than marketers. It will require scaling one-one-one brand communications with technology, while reducing consumer friction with thoughtful design — even to the point of making a purchase so easy that it is literally just the touch of a button.

(da, vf, yk, al, il)

Footnotes Link

  1. 1 http://www.digitaltrends.com/mobile/informate-report-social-media-smartphone-use/
  2. 2 https://www.emarketer.com/Article/Mobile-Ad-Spend-Top-100-Billion-Worldwide-2016-51-of-Digital-Market/1012299
  3. 3 https://www.smashingmagazine.com/2017/02/current-trends-future-prospects-mobile-app-market/
  4. 4 https://www.smashingmagazine.com/2014/10/reducing-abandoned-shopping-carts/
  5. 5 https://www.smashingmagazine.com/2013/12/e-commerce-websites-showcase/
  6. 6 https://www.smashingmagazine.com/2011/04/fundamental-guidelines-of-e-commerce-checkout-design/
  7. 7 https://www.emarketer.com/Report/US-Mobile-Payments-Outlook-Strong-Growth-Forecast-Proximity-Peer-to-Peer-Payments-2017-Beyond/2001890
  8. 8 http://www.independent.co.uk/arts-entertainment/music/news/what-your-music-taste-says-about-your-personality-a6749866.html
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-preview-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-preview-opt.png
  11. 11 http://10ecommercetrends.com/
  12. 12 https://www.youtube.com/yt/press/statistics.html
  13. 13 http://www.speedtest.net/reports/united-states/
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-preview-opt.png
  15. 15 https://blog.hubspot.com/marketing/video-marketing-statistics#sm.000rcs5x9154keu0t241dxkjcffvd
  16. 16 https://adexchanger.com/online-advertising/google-wants-measure-entire-path-purchase/
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-preview-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-preview-opt.png
  19. 19 http://10ecommercetrends.com/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-preview-opt.png
  21. 21 http://www.geekwire.com/2017/8-million-people-amazon-echo-customer-awareness-increases-dramatically/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-780w-opt.jpg
  23. 23 https://www.forbes.com/sites/roberthof/2017/03/21/native-ads-arrive-theyll-be-half-of-all-display-spending-this-year/#379ff9575c95
  24. 24 http://www.sharethrough.com/resources/in-feed-ads-vs-banner-ads/
  25. 25 https://techscience.org/a/2015121503/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/07-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-preview-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-Designing-Mobile-Marketing-Experiences-for-Millennial-Shoppers-preview-opt.png
  28. 28 http://digiday.com/media/search-native-advertisings-new-pricing-models/
  29. 29 https://www.emarketer.com/Article/WeChat-More-than-Basic-Messaging-App/1014328

↑ Back to topTweet itShare on Facebook

Web Development Reading List #186: Tor 7, Designing Depth, And Mac Ransomware

Web Development Reading List #186: Tor 7, Designing Depth, And Mac Ransomware

Design is one of the most controversial things in our industry. There are barely any redesigns that aren’t discussed heavily in the community. Changing a well-working design is even harder as people tend to dislike anything new, but if we give them a bit of time, they might start to see things from a different perspective.

Instead of following what everyone else is doing, we shouldn’t hesitate to leave the beaten tracks when designing — by creating a contrast-rich, deep design without using drop shadows, for example. Whatever you do, be sure to explore new options whenever you can.

Further Reading on SmashingMag: Link

News Link

  • Chrome 60 beta is available5 and brings us the Paint Timing API, CSS’ font-display property, the Web Budget API, and Credential Management API improvements.
  • Firefox 54 is out6 — and, thanks to a new multi-process architecture, with huge performance improvements. The update also brings7 us the new Web Extension APIs as well as CSS clip-path improvements with basic shapes.
  • A new version of Tor Browser was released, too: Tor Browser 7.08. The new version is based on Firefox 52 ESR and, thus, has multi-process mode and sandboxing on Linux and macOS (Windows coming soon) enabled.
9
Its new multi-process architecture10 allows Firefox to run many simultaneous content processes in addition to a UI process. (Image credit11)

Concept & Design Link

Designing Depth14
Designing depth without any drop shadows? Scott Jensen shows how you can do it15. (Image credit16)

Security Link

  • Patrick Wardle found evidence that there’s a macOS ransomware spreading and wrote up the key facts about it17. This shows that the Mac platform is growing and attackers start targeting users as well. Better be safe and have a valid, usable backup.

Work & Life Link

—Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/12/the-good-the-bad-and-the-great-examples-of-web-typography/
  2. 2 https://www.smashingmagazine.com/2017/02/shadows-blur-effects-user-interface-design/
  3. 3 https://www.smashingmagazine.com/2016/11/define-your-process-master-time-gain-clarity-take-control/
  4. 4 https://www.smashingmagazine.com/2014/10/maximize-your-creative-energy/
  5. 5 https://blog.chromium.org/2017/06/chrome-60-beta-paint-timing-api-css.html
  6. 6 https://hacks.mozilla.org/2017/06/firefox-54-e10s-webextension-apis-css-clip-path/
  7. 7 https://developer.mozilla.org/en-US/Firefox/Releases/54
  8. 8 https://blog.torproject.org/blog/tor-browser-70-released
  9. 9 https://hacks.mozilla.org/2017/06/firefox-54-e10s-webextension-apis-css-clip-path/
  10. 10 https://hacks.mozilla.org/2017/06/firefox-54-e10s-webextension-apis-css-clip-path/
  11. 11 https://hacks.mozilla.org/2017/06/firefox-54-e10s-webextension-apis-css-clip-path/
  12. 12 https://betterwebtype.com/
  13. 13 http://scottjensen.design/2017/05/out-of-the-dropshadows/
  14. 14 http://scottjensen.design/2017/05/out-of-the-dropshadows/
  15. 15 http://scottjensen.design/2017/05/out-of-the-dropshadows/
  16. 16 http://scottjensen.design/2017/05/out-of-the-dropshadows/
  17. 17 https://objective-see.com/blog/blog_0x1E.html
  18. 18 http://www.bbc.com/capital/story/20170612-why-you-should-manage-your-energy-not-your-time

↑ Back to topTweet itShare on Facebook

Building Production-Ready CSS Grid Layouts Today

Building Production-Ready CSS Grid Layouts Today

Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development. Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways.

Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.

Much has already been said about the technical aspects of CSS grid and its one-dimensional cousin flexbox by people smarter than me. In this article, I want to bring these concepts into practical use. What you’ll get is a starting point for exploring what new layout opportunities and challenges CSS grid brings, what old problems it solves and how to start using the module in production websites today.

My examples and focus will be on WordPress themes, but the practical approaches and code examples are agnostic and can be used in any web project, regardless of CMS, technology stack or tool.

Let’s get crackin’!

Further Reading on SmashingMag: Link

The Case For CSS Grid Link

Think of how you would create the layout below using CSS: a responsive two-column layout with a full-bleed header and footer, the main area center-aligned with a maximum width of 60 ems. The content takes up two thirds of the available space, the sidebar one third, and the two sections below half the space each.

5
(View large version6)

To solve this layout challenge using traditional CSS layout methods, the content, sidebar and two equal-sized sections would be grouped together in a container, with max-width set to 60em; that container would be centered, setting margin-right and margin-left to auto; the different sections would be placed next to one another by setting the main container to display: flex; and each element would be given a flex value or, in the days before flexbox, by floating them left and right.

Now, put away your web design hat for a moment and think of this as a layout you are asked to create in your favorite design application. What’s the first thing you do? You create a grid: four rows and eight columns.

In a print environment, you don’t use margins to center-align content or apply flex sections to match the height of sections — you just place them where they belong on the grid: The header, content and sidebar area, and footer each take up one row, the header and footer take up all eight columns, while the content occupies columns 2 to 5, and the sidebar columns 6 and 7.

Complex multi-column layout with the grid explained above superimposed.7
(View large version8)

With CSS grid, you can now do the same in the browser:

.site { display: grid; grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr; grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto); } .masthead, .colophon { grid-column: span 8; } .main-content { grid-column: 2/6; } .sidebar { grid-column: 6/8; } .twin { grid-column: 2/5; grid-row: 3/4; } .twin:last-of-type { grid-column: 5/8; } 

You can view the live version9 on Codepen:

CSS grid takes the best parts of print-based grid layouts and enhances them with the fluidity of the browser’s viewport: The six middle columns would have a maximum width, thanks to CSS’ minmax() function10, and the first and last column would be set using the fr unit11, to share a specified fraction of the remaining available space. What we’re left with is a center-aligned responsive grid layout, in the browser. And because this is all powered by CSS, we can use media queries to change the layout for different viewport widths.

Like flexbox, grid honors the text direction of the document, so if the dir attribute is set to rtl, the layout automatically mirrors, placing the sidebar on the left.

The New CSS Grid Mindset Link

As this example shows, to start working with CSS grid, you first need to set aside the habits, assumptions and practices that have enabled you to create advanced CSS-based layouts. In many cases, these established approaches are hacks developed to work around the limitations of CSS as a layout tool. CSS grid is, in my opinion, the first true layout module in CSS. It gives you two dimensions to work with and the ability to place any element in any cell or combination of cells. That requires a whole new mindset: Rather than asking, “How do I make this vertical stack of content behave as if it were laid out in a grid,” you simply define the grid and place each piece of content within it.

Let’s look at one more example to see just how different this is from how we used to do things.

Consider this single-column layout, containing both width-constrained, center-aligned content and full-bleed images and backgrounds:

Modern center-aligned and full-width content layout, as explained below.12
(View large version13)

The grid layout (right) has 8 rows and 4 columns. Using CSS grid, you should be able to position elements on that grid in any way you like. However, a grid container (one whose element is set to display: grid) only treats the elements that are direct descendants as grid items. This means you can’t create a single layout grid here. Instead, you have to create grids at the component level, effectively creating multiple grids with the same properties.

Side note: The grid specification contained a proposal for subgrids, which allow a descendant element to inherit the parent grid and apply it to its children. The subgrid feature has been moved to level 2 of the specification, meaning it will not be available in browsers for the foreseeable future. Rachel Andrew is following this development closely and has published extensive information about where subgrid currently stands14 and what comes next for the feature. Until that time, the most practical workaround is to nest grids within grids, effectively defining grid descendants as their own grids.

To build the layout above in the browser, you would use CSS grid in cohort with other tools and practices, as we’ll see.

If you don’t do anything, each section will be full width out of the box. For each section with center-aligned content sections, you apply the .grid class and create CSS rules that set up a four-column grid and position the content in the two center columns. The layout of three buckets in the third section is achieved using flexbox. The last section, with two full halves, comprises two individual grid items, taking up two columns each. This is achieved using grid-column: span 2; (meaning the grid items span two columns) and allowing grid auto-placement to handle the rest.

/* Four-column layout. Two center columns have a total max-width of 50em: */ .grid { display: grid; grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr; } /* Center items by placing them in the two center columns: */ .splash-content, .more-content, .buckets ul { grid-column: 2/4; } /* Use automatic grid placement + span to let each item span two columns: */ .twin, .colophon aside { grid-column: span 2; } 

You can view the live version15 on Codepen.

This example shows both how CSS grid can be used to solve common layout challenges like full-bleed sections, and how there are still limitations to what we can do with the module. As explained, ideally, you’d want to draw a single grid, and use subgrid to handle all of the sections and subsections. However, for now, only first-level descendants of the container whose display property set to grid can be positioned on the grid, and the subgrid property has not been implemented in browsers16, so we are forced to come up with workarounds like what you’ve seen here. The good news is that this is still better than older methods, and it produces clean and readable CSS.

A Process For Using CSS Grid In Production Link

Now that you have an idea of why CSS grid is so important and how to adopt a CSS grid mindset, let’s look at how to use this module in production.

More than a layout module, CSS grid is an invitation to reaffirm our original intent with web design and development: to create accessible, extensible solutions that bring content to those interested in the best way possible.

At the core of any front-end web project is a simple principle: First make it accessible, then make it fancy, and make sure the fancy doesn’t break accessibility.

We also need to consider responsiveness, cross-browser and cross-platform compatibility, and progressive enhancement. Putting all this together, we end up with an outline for a practical process of development:

  1. Create accessible HTML with a sound hierarchical and semantic structure.
  2. Create a responsive single-column layout for all screen widths.
  3. Apply advanced layouts and functionality (grid, flex, JavaScript, etc.).

This should result in an accessible solution that works in all browsers on all platforms, while taking advantage of the latest technologies.

Backwards Compatibility and Browser Support Link

Before we continue, let’s quickly address the giant neon-orange elephant in the room: CSS grid is bleeding-edge technology, and while it has support in modern browsers, it has zero backwards compatibility. This could be considered an automatic non-starter, but I would argue it’s an opportunity to reframe the way we think about backwards compatibility:

CSS grid is a layout module; it allows us to change the layout of a document without interfering with its source order. In other words, CSS grid is a purely visual tool, and used correctly, it should have no effect on the communication of the contents of the document. From this follows a simple but surprising truth: The lack of support for CSS grid in an old browser should not affect the experience of the visitor, but rather just make the experience different.

If you agree with this (and you should), there is no reason you can’t use CSS grid today!

Here’s how that approach could work in practice. Rather than using fallbacks and shims to ensure a design and layout look the same across all browsers, we’d provide the mobile vertical single-column layout to all browsers and then serve up advanced functionality to those browsers and viewport widths that can take advantage of them. It might sound like progressive enhancement, but it’s actually more of an accessibility-centric approach enabled by a mental shift.

Before applying any CSS, we start with a properly marked-up HTML document, laid out in a single column. The document is navigable with any input device and has a hierarchical structure that ensures that reading it from top to bottom conveys the message in the best possible way. This is what makes it accessible. Based on what we know about the web-using public, we can assume that a significant portion of the visiting audience will come to the website using a smartphone. Using mobile-first design, we use CSS to style the single column of the document to fit the smallest mobile screen. This gives us the baseline of the design.

Now comes the mental shift: If the message of the document comes across in a single column on a narrow screen, then that same layout will work on a wide screen as well! All we have to do is make it responsive to fit the given viewport. This gives us an accessible, cross-browser, backwards-compatible baseline on which we can build advanced layouts and functionality using modern web technologies like CSS grid and advanced JavaScript.

In short, we would use CSS grid for visual and layout enhancements17, not for meaningful changes to the content. The former leads to better design, the latter to broken accessibility.

Example: Using CSS Grid In A WordPress Theme Link

CSS grid simplifies age-old approaches and opens the door to dynamic new web layouts for all sorts of applications. To see how this works in the wild, let’s use CSS grid in a distributed WordPress theme via the process outlined earlier. Here, I’ll use the _s (or Underscores)18 starter theme as my starting point. And as I stated in the introduction, these approaches are agnostic and can be used with any starter theme or theme framework or even outside of WordPress.

If you want to get a firm handle on how CSS grid works in the browser, I recommend using Firefox and its Grid Inspector tool19. That way, you’ll have a visual reference of where your grids are and what items they are acting on.

0. Structural Layout Sketches Link

To start off the project, I’ve created structural layout draft sketches for the main views of the theme. These will serve as guides as the design and layout process takes place in the browser. You’ll notice these sketches do not contain sizes or other specifications; they only outline the general layout and how they relate to the grid.

For narrow screens, such as mobile devices and for browsers lacking support for CSS grid, the layout would be a single center-aligned column with the content following the document’s hierarchy.

For modern browsers, there are two main layouts:

  • Index and archive views show published posts in a grid pattern, where featured posts take up twice as much space as other posts.

    Hand-drawn sketch of a layout with the grids highlighted in unique colors.20
    (View large version21)

  • A single post and page view with grids would change the layout and displayed order of content depending on the viewport’s width.

    Hand-drawn sketch of a layout where the meta content changes position depending on the viewport width.22
    (View large version23)

1. Create Accessible HTML With A Sound Hierarchical And Semantic Structure Link

One of the major advantages of using a content management system such as WordPress is that, once you’ve created accessible, semantically sound and valid templates, you don’t have to worry about the structural components of the generated HTML documents themselves. Using _s as a starting point, we already have an accessible platform to build from, with only a bare minimum of interactive elements, like a small JavaScript file for adding keyboard navigation to the main menu.

Due to the historical limitations of CSS, most frameworks like _s heavily nest containers to group elements together in an effort to make it easier for developers to do things like position the sidebar next to the main content. The simplified schematic below shows how the .site-content div wraps .content-area and .widget-area to allow them to float left and right:

Diagram of the structural container nesting of _s out of the box.24
(View large version25)

A grid container treats its first-level children as individual grid items, and CSS grid eliminates the need for floated and cleared containers. That means we can reduce the level of nesting and simplify the overall markup of the templates and the final output.

Out of the box, making .page a grid container would make .site-header, .site-content and .site-footer grid items, but .site-main and .widget-area are nested inside these containers and are, therefore, unavailable for placement on the grid.

Drawing out the layout on a piece of paper can help us to identify what level of container nesting is necessary and where to change the markup’s structure to allow for grid layouts. While doing this, it’s important to remember you can nest grids within grids and that this often allows for better layout control.

As explained earlier, _s defines containers whose sole purpose is to allow for wrapping and for layouts to use old CSS methods. You can usually spot these containers because they are generic divs, thus the name “divitis.”

Now that we’re using CSS grid for layout, we can remove some of these containers by flattening the HTML and bringing it back to a cleaner semantic hierarchy:

Diagram of the structural container nesting of _s after removing unnecessary wrapping containers.26
(View large version27)

In practical terms, this means removing <div> from header.php (where it opens) and footer.php (where it ends) and removing <div> from archive.php, index.php, page.php, search.php and single.php. This leaves us with a logical content hierarchy that we can position in our grid:

<div> <header role="banner"></header> <main role="main"></main> <aside role="complementary"></aside> <footer role="contentinfo"></footer> </div> 

2. Create A Responsive Single-Column Layout For All Screen Widths Link

Before applying new styles, it is necessary to clean up the existing CSS that ships with the theme out of the box. The _s theme assumes we will float items to create side-by-side layouts, and it takes a brute force approach to resolve container-clearing issues by applying a clearfix at the root of most elements28. This approach introduces invisible pseudo-elements in the DOM that are recognized by the browser and interfere with both flexbox and grid. If these rules are left in place, flexbox and grid will treat the pseudo-elements as flexbox and grid items and cause the layout to include what appears to be empty flexbox and grid cells. The quickest way to resolve this is to remove these CSS rules altogether by deleting the entire clearing section, or wrap them in feature or media queries so that they are applied only when flexbox and grid are not in use. If you need to clearfix specific elements within the layout, there should be a dedicated .clearfix class and CSS rule for this, to be applied when required. Clearfix is a hack to get around issues with floats and clears, and with flex and grid available, it now becomes graceful degradation and should be treated as such.

To provide a great user experience for all visitors, apply style rules to all elements in the document, starting with the smallest agreed-upon viewport width, usually 320 pixels.

Increase the viewport width incrementally, and add media queries to keep the visual experience pleasing, while taking advantage of the available space. The result should be a responsive single-column layout across all possible screen widths.


Animation showing the center-aligned, single-column, mobile-first layout displayed across all viewport widths.>

At this stage, refrain from making layout changes such as horizontal positioning: You are still working on the fallback for browsers without grid support, and we will be handling all layouts beyond the single column using grid in the next step.

Side Note: A Word on Browser Support Link

From here, we’ll start creating advanced layouts using CSS grid and other modern tools. You may feel compelled to try to make your grid layouts backwards compatible29 using a tool like Autoprefixer, but you’ll find this will have limited success. Instead, the best way forward is progressive enhancement: Give all browsers a well-functioning experience, and allow browsers with grid support to use grid for layouts.

How you approach this will depend on your overall fallback strategy: If your design calls for fallbacks to kick in where grid is not supported, you might be able to resolve the fallback by simply declaring another display property higher up in the cascade. Grid overrides other display property declarations, and browsers without grid support will use these declarations instead. Rachel Andrew has a detailed description30 with examples of this approach. You can also omit entire CSS rules from browsers without grid support using feature queries. In the current example, fallback is handled by serving up the mobile layout to all browsers. This means we can use feature queries to apply what I call “scorched-earth progressive enhancement”: Give all browsers the basic experience we’ve built above, and serve grid layouts only to browsers that can handle them.

We do this using feature queries in the form of @supports rules31. Like with media queries, CSS nested inside an @supports rule will only be applied if the browser supports the specified property or feature. This allows us to progressively enhance the CSS based on browser support. It’s also worth noting that feature queries test for declared feature support in a browser. It does not guarantee that the browser actually supports a feature or honors the specification.

In its most basic form, a feature query for grid support looks like this: @supports (display: grid) {}.

The challenge is Microsoft Edge, the only modern browser that, as of this writing, still uses the old grid specification32. It returns true for @supports (display: grid) {}, even though its grid support is spotty and non-standard. Most relevant for our example is the lack of support for the grid-template-areas and grid-area properties and for the minmax() function. As a result, a feature query targeting display: grid would not exclude Microsoft Edge, and users of this browser would be served a broken layout. To resolve this issue and serve up grid layouts to Microsoft Edge only when the browser gets full support for the specification, target one of the unsupported features instead:

@supports (grid-area: auto) {}

This returns false in current versions of Microsoft Edge, and the browser would not try to render CSS it does not understand.

3. Apply Advanced Layouts And Functionality Link

From here, we continue the mobile-first approach for all rules:

  1. Start with the smallest viewport.
  2. Increase the width until things look strange.
  3. Add a breakpoint.
  4. Go back to step 2.

In most cases, you would not change the single-column layout until the viewport’s width is fairly wide, so the first grid rule would usually appear in a media query. You’ll also find that most layouts require several grids — typically, one for the structural site-wide layout, and others for individual content models like archives, single posts and so on.

Structural Site-Wide Layout (Main Grid) Link

In our example, the structural layout calls for a simple two-column grid on medium-width screens and a three-column grid on wide screens, to allow space on the right for the sidebar.

Illustration showing mobile, medium and wide viewports, where the layout of the header and sidebar change as the viewport widens.33
(View large version34)

Playing around with the width of the viewport, you’ll find an ideal breakpoint for the medium-width grid. Inside this media query, declare the .site element as the grid container:

@supports (grid-area: auto) { @media screen and (min-width: 56.25em) { .site { display: grid; grid-template-columns: 15em 1fr; grid-template-rows: 1fr minmax(1em, auto); } } } 

To make it easier to understand what is going on within the grid, we’ll use grid-template-areas35 to name different sections of the grid. The grid-template-area property allows us to draw a map of sorts of rectangular, named areas within the grid spanning one or more cells. Once a grid template area has been defined, a grid item can be assigned to that area using the grid-area property and the area name. In the example below, the grid-template-area property is used to “draw” a two-column layout by defining the entire first column as the header area and dividing the second column between main, sidebar and footer:

@supports (grid-area: auto) { @media screen and (min-width: $query__medium) { .site { display: grid; grid-template-columns: 15em 1fr; grid-template-rows: 1fr minmax(1em, auto); grid-template-areas: "header main" "header sidebar" "header footer"; } } } 

Now, we can position the header, main content, sidebar and footer in the named template areas. This makes it easy for anyone reading the CSS to understand what is happening:

@supports (grid-area: auto) { @media screen and (min-width: $query__medium) { .site { display: grid; grid-template-columns: 15em 1fr; grid-template-rows: 1fr minmax(1em, auto); grid-template-areas: "header main" "header sidebar" "header footer"; } .site-header { grid-area: header; } .site-main { grid-area: main; } .widget-area { grid-area: sidebar; } .site-footer { grid-area: footer; } } } 

Extra-wide viewports get their own media query. Here, the sidebar takes up a new column on the right side of the grid. This is accomplished by changing the grid template to place the sidebar area in a new column. Because the sidebar is already positioned in the sidebar template area, we only need to change the .site rule:

@supports (grid-area: auto) { @media screen and (min-width: 56em) { .site { display: grid; grid-template-columns: 15em 1fr; grid-template-rows: 1fr minmax(1em, auto); grid-template-areas: "header main" "header sidebar" "header footer"; @media screen and (min-width: 70em) { grid-template-columns: 15em 1fr 15em; grid-template-rows: 1fr minmax(1em, auto); grid-template-areas: "header main sidebar" "header footer footer"; } } .site-header { grid-area: header; } .site-main { grid-area: main; } .widget-area { grid-area: sidebar; } .site-footer { grid-area: footer; } } } 

Using @supports (grid-area: auto) { }, you can create additional CSS rules elsewhere in your style sheet that kick in only when grid layouts are supported by the browser.

Archive Layout Link

In WordPress, archive pages include the blog index; the category, tag, author and date archives; and the search results view. In _s, they are displayed using the index.php (main blog index), archive.php (category, tag, author, date and other archives) and search.php (search results) template files. Other archive templates can be added using the template hierarchy36.

To minimize the need for dedicated CSS rules for each possible individual archive, we can use a filter in the theme to apply a custom class to the body element of any archive view. The best place for this filter is inc/extras.php, alongside other similar filters. Rather than using conditional statements to target every possible archive type, we can use a bit of reverse psychology to say, “If the current view is not a singular element — so, not a single post or page — then apply the .archive-view class to the body element.” There is already a condition for this in _s, so all we’ll do is add the additional class to it:

function mytheme_body_classes( $classes ) { // Adds classes hfeed and archive-view to non-singular pages. if ( ! is_singular() ) { $classes[] = 'hfeed archive-view'; } return $classes; } add_filter( 'body_class', 'mytheme_body_classes' ); 

Now, we can use the .archive-view class to restrict CSS rules to just archive views.

Illustration showing the separate index view grid.37
(View large version38)

In archive views, the template should display each post (green) in a separate grid cell (blue grid). If we provide the browser with a uniform grid — with two, three, four or five columns, depending on the viewport’s width — and let it figure out how many rows are required, it will automatically place each post in a cell and generate the implicit row lines required. Because each column takes up an equal fraction, we can use the fr unit to define the columns’ width. Take note that the fr unit distributes the available space into fractions. It does not constrain the minimum width of the content. This means that if very long words or other wide content appear inside an element sized with the fr unit, then the element will retain the minimum size of the content even if that means it will be wider than the fraction specified. To avoid this, make sure words break or wrap and that content such as images do not have fixed minimum sizes.

The posts are individual article elements nested in a section with the class .site-main. That gives us the following SCSS:

@media screen and (min-width: $query__medium) { .archive-view { .site-main { display: grid; grid-template-columns: repeat(2, 1fr); @media screen and (min-width: $query__wide) { grid-template-columns: repeat(3, 1fr); } @media screen and (min-width: $query__x_wide) { grid-template-columns: repeat(4, 1fr); } @media screen and (min-width: $query__xx_wide) { grid-template-columns: repeat(5, 1fr); } } .entry-title { word-break: break-word; } } } 

Testing the layout in the browser, you’ll see that the grid is organized dynamically and grows and shrinks to accommodate the available grid items.

Screen grab showing the index view with a three-column post grid.39
(View large version40)

If you feel compelled to add a thin 1-pixel line between each of the grid cells, you’ll quickly discover you can’t use border or outline because the lines will overlap. To get around this problem, you can set the grid-gap property to 1px, adding a 1px gap between each cell horizontally and vertically, and then set the background-color of the grid container to the line’s color and the background-color of each cell to white:

@media screen and (min-width: $query__medium) { .archive-view { .site-main { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1px; background: grey; @media screen and (min-width: $query__wide) { grid-template-columns: repeat(3, 1fr); } @media screen and (min-width: $query__x_wide) { grid-template-columns: repeat(4, 1fr); } @media screen and (min-width: $query__xx_wide) { grid-template-columns: repeat(5, 1fr); } } .entry-title { word-break: break-word; } .post { background: white; } } } 

To make the grid a bit more dynamic, the layout calls for featured items to take up two columns. To make this happen, we’ll apply a category named “Featured” to each featured post. WordPress automatically applies category classes to each post’s article element using the formula category-[name], meaning we can target these posts using .archive-view .category-featured as our selector. We are not explicitly defining where on the grid any item will appear, so we’ll use the span keyword to specify how many rows or columns the item should span and let the browser figure out where that space is available. Because we are making the item take up two columns, we’ll do this only for layouts that have two or more columns:

@media screen and (min-width: $query__medium) { .archive-view { .site-main { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1px; background: grey; @media screen and (min-width: $query__wide) { grid-template-columns: repeat(3, 1fr); } @media screen and (min-width: $query__x_wide) { grid-template-columns: repeat(4, 1fr); } @media screen and (min-width: $query__xx_wide) { grid-template-columns: repeat(5, 1fr); } } .entry-title { word-break: break-word; } .post { background: white; } .category-featured { grid-column: span 2; } } } 
Screen grab showing the index view with a featured item taking up twice the space of the other items.41
(View large version42)

Single Post or Page Layout Link

For single posts and pages, we’ll use two CSS grids: one for the overall layout structure of the post, and one to change the visual layout and order of blocks of content when appropriate.

First, we’ll define a grid for the .site-main container, which will hold the post’s article, the post’s navigation and the comments. This is primarily to allow grid to center-align the content within the container in wide viewports:

body:not(.archive-view) { @supports (grid-area: auto) { @media screen and (min-width: $query__medium) { .site-main { display: grid; grid-template-columns: 1fr minmax(auto, 46em) 1fr; align-content: start; grid-template-areas: ". post ." ". nav ." ". comments ."; } .post { grid-area: post; } .post-navigation { grid-area: nav; } .comments-area { grid-area: comments; } } } } 

Next, let’s look at the article itself. Here, we’ll define a four-column grid targeting the .post class:

.post { grid-area: post; display: grid; grid-template-columns: repeat(4, 1fr); } 

Now we can use CSS grid to create a dynamic layout that changes the visual order and presentation of the header and meta content depending on viewport’s width:

Diagram showing how the grid changes depending on the available viewport width.43
(View large version44)

This is done by changing the visual order of elements without changing the HTML markup or interfering with the content’s hierarchy. Exercise caution45 because it can be tempting to disconnect the visual order from the document’s hierarchy and content order, causing unexpected behavior. For this reason, keep the content hierarchy intact both visually and structurally, and only use the repositioning abilities of CSS grid to change the layout as is done here.

Rule of thumb: Never change the meaning of content by repositioning it.

Out of the box, a post with a featured image has the following hierarchy:

  1. featured image
  2. post header: categories + title + meta data (i.e. author, date, number of comments)
  3. content

Based on the layout in the figure above, in wider viewports we want a visual structure that looks more like this:

  1. post header: categories + title
  2. featured image
  3. meta data (author, date, number of comments)
  4. content

To achieve this, we need to break apart some more of the nesting that comes with _s. Like before, we can get more control over elements by flattening the HTML’s structure. In this case, we just want to move the meta section out of the header to make it available as its own grid item. This is done in header.php:

<header> <?php if ( is_single() ) : the_title( '<h1>', '</h1>' ); else : the_title( '<h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); endif; ?> </header><!-- .entry-header --> <?php if ( 'post' === get_post_type() ) : ?> <div> <?php kuhn_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?> 

Just like before, we can now apply the layout changes using grid-template-areas:

.post { grid-area: post; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "header header header header" "meta meta meta meta" "featimg featimg featimg featimg" "content content content content" "footer footer footer footer"; } .entry-header { grid-area: header; } .entry-meta { grid-area: meta; } .featured-image { grid-area: featimg; } .entry-content { grid-area: content; } .entry-footer { grid-area: footer; } 

In our case, posts with no featured image don’t need separate rules: the featimg template area will simply collapse because it is empty. However, if grid-gap is applied to rows, we’ll need to create a separate .post rule with grid-template-areas that do not include featimg.

On wider screens, the post’s meta area should shift down, below the featured image, to appear to the left of the main content. With our flattened markup and the grid in place, this is solved by making a small change to the grid-template-areas property in a separate media query:

post { grid-area: post; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "header header header header" "meta meta meta meta" "featimg featimg featimg featimg" "content content content content" "footer footer footer footer"; @media screen and (min-width: $query__wide) { grid-template-areas: "header header header header" "featimg featimg featimg featimg" "meta content content content" "footer footer footer footer"; } } .entry-header { grid-area: header; } .entry-meta { grid-area: meta; } .featured-image { grid-area: featimg; } .entry-content { grid-area: content; } .entry-footer { grid-area: footer; } 

Real-Life Example Link

By now, you’re probably wondering what this would look like if it were implemented on a real website. Wonder no more. As part of writing this article, I have built a free WordPress theme named Kuhn, incorporating the layouts explained here and more. It is live on my own website46, and you can explore the code, use the theme on your own WordPress website and contribute to make it better on GitHub47.

Conclusion Link

With this article, I set out to demonstrate both how CSS grid allows you to create dynamic, responsive, modern layouts using pure CSS and how clean and easily managed this code is compared to traditional layout methods. On a more zoomed-out level, I also wanted to give you a new framework for thinking about web layouts. Using CSS grid, much of what we know about placing content within the viewport has changed, and even for simple layouts like what I’ve demonstrated here, the approach is both fundamentally different and much more intuitive. Gone are all of the CSS alchemy and counterintuitive tricks and hacks, replaced by structured grids and declarative statements.

Now it’s time for you to take CSS grid for a spin in your own projects. You can take my hardline approach and pave the cowpaths with this new module, or you can combine it with backwards-compatible code to serve up the same or similar experiences to all visitors. It’s entirely up to you and your development philosophy.

Even if you are working on projects that require backwards compatibility and think CSS grid is too bleeding-edge, start incorporating it in your projects anyway. Using @supports and the approach I’ve outlined in this article enables you to progressively enhance existing websites without causing problems in legacy browsers. CSS grid requires a new mindset, and we all need to start that transition today. So, go forth and gridify the web!

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/
  2. 2 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
  3. 3 https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
  4. 4 https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_01-large-opt.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_01-large-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_02-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_02-large-opt.png
  9. 9 https://codepen.io/mor10/pen/QvmLpd
  10. 10 https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
  11. 11 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#The_fr_Unit
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_03-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_03-large-opt.png
  14. 14 https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the-css-grid-specification/
  15. 15 https://codepen.io/mor10/pen/xdYoNO
  16. 16 https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the-css-grid-specification/
  17. 17 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
  18. 18 http://underscores.me/
  19. 19 https://www.mozilla.org/en-US/developer/css-grid/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_04-large-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_04-large-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_05-large-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_05-large-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_06-large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_06-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_07-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_07-large-opt.png
  28. 28 https://github.com/Automattic/_s/blob/master/style.css#L705-L732
  29. 29 https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
  30. 30 https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
  31. 31 https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
  32. 32 https://rachelandrew.co.uk/archives/2017/04/04/edge-starts-work-on-their-grid-implementation-update/
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_09-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_09-large-opt.png
  35. 35 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
  36. 36 https://developer.wordpress.org/themes/basics/template-hierarchy/
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_10-large-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_10-large-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_11-large-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_11-large-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_12-large-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_12-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_13-large-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/06/mrh_CSS_grid_fig_13-large-opt.png
  45. 45 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
  46. 46 https://mor10.com
  47. 47 https://github.com/mor10/kuhn

↑ Back to topTweet itShare on Facebook

Hybrid Apps And React Native: A Time To Transition?

Hybrid Apps And React Native: A Time To Transition?

Accomplished musicians often talk about how, at certain moments in their careers, they had to unlearn old habits in order to progress. This process often causes them to regress in performance while they adjust to an ultimately better method. Once the new approach is integrated, they are able to reach new heights that would not have been possible with their previous techniques.

Like musicians, all professionals should frequently question their methodologies and see what other options exist. If one approach was previously the best, that does not mean it remains the best. Then again, many established techniques have been the best for decades and might never be surpassed. The important thing is that one is willing to consider alternative approaches and is not too heavily biased towards the one they are most familiar with. This analysis is often more difficult in software development because new frameworks and technologies emerge almost as quickly as they die off.

This article will apply this analysis to hybrid mobile apps and present why I sincerely believe that React Native is in many ways a superior solution for apps developed in 2017, even if it introduces some temporary pains while you’re getting acclimated. To do this, we will revisit why hybrid apps were created initially and explore how we got to this point. Then, within this context, we’ll discuss how React Native stacks up and explain why it is the better approach in most cases.

Further Reading on SmashingMag: Link

An Origin Story Link

It’s 2010. Your company has a pretty awesome web application that uses jQuery (or, if you’re hip, some sort of AngularJS and React precursor like Mustache). You have a team of developers competent in HTML, CSS and JavaScript. All of a sudden, mobile apps are taking over. Everyone has one. Mobile apps are the new Tickle Me Elmo! You frantically research how to make your own mobile app and immediately run into a host of issues. Your team is ill-equipped for the task. You don’t have Java or Objective-C developers. You can’t afford to develop, test and deploy two separate apps!

Not to worry. The hybrid mobile app is your silver bullet. This shiny new technology allows you to quickly and (in theory) easily reuse what you have (code and developers) for your lustrous new mobile app. So, you pick a framework (Cordova, PhoneGap, etc.) and get to work building or porting your first mobile app!

For many companies and developers, their problems were solved. They could now make their very own mobile apps.

Problems Arise Link

Ever since 2010, developer forums, blogs and message boards have been full of arguments about the efficacy of hybrid apps. Despite the great promise and flexibility described in the previous paragraphs, hybrid apps have had and continue to face a very real series of challenges and shortcomings. Here are a few of the most notable problems

User-Experience Shortcomings Link

Over the past couple of years, the bar for UX in mobile apps has risen dramatically. Most smartphone owners spend the majority of their time using only a handful of premier apps5. They, perhaps unfairly, expect any new app they try to be as polished as Facebook, MLB TV, YouTube and Uber.

With this very high bar, it is quite difficult for hybrid apps to measure up. Issues such as sluggish or limited animations, keyboard misbehavior and frequent lack of platform-specific gesture recognition all add up to a clunkier experience, which makes hybrid apps second-class citizens. Compounding this issue is hybrid apps’ reliance on the open-source community to write wrappers for native functionality. Here is a screenshot from an app that highlights all of these issues. This app6 was selected from Ionic’s showcase7 and was created by Morgan Stanley.

8
Screenshot of the app store listing for MS StockPlan (View large version9)

A few things should be immediately apparent. This app has a very low rating (2.5 stars). It does not look like a mobile app and is clearly a port of a mobile web app. Clear giveaways are the non-native segmented control, font size, text density and non-native tab bar. The app does not support features that are more easily implemented when building natively. Most importantly, customers are noticing all of these issues and are summarizing their feelings as “feels outdated.”

User Interface Challenges Link

The majority of users are very quick to uninstall or forget new apps10. It is crucial that your app makes a great first impression and is easily understood by users. A large part of this is about looking sharp and being familiar. Hybrid apps can look great, but they do tend to be more platform-agnostic in their UI (if they look like a web app) or foreign (if they look like an iOS app on Android or vice versa).

Before even installing an app, many would-be customers will review images in the app store. If those screenshots are unappealing or off-putting, the app might not be downloaded at all. Here is an example app found on the Ionic showcase. This app11 was created by Nationwide, and, as you can tell, both apps look just like a mobile-friendly website, rather than a mobile app.

Screenshot of the Nationwide app on iOS12
Screenshot of the Nationwide app on iOS
Screenshot of the Nationwide app on Android13
Screenshot of the Nationwide app on Android

It is clear from the app store reviews (3 stars on both platforms) that this app has several issues, but it is unlikely that any app with this UI would attract new customers. It is clearly only used by existing customers who think they might as well try it out.

Performance Issues Link

The most common complaints about hybrid apps cite poor performance, bugs and crashes. Of course, any app can have these issues, but performance issues have long plagued hybrid apps. Additionally, hybrid apps often have less offline support, can take longer to open and perform worse in poor network conditions. Any developer has heard any of the above called a “bug” and has had their app publicly penalized as a result.

Overall Lack of Premier Apps Link

All of these issues have added up to the vast majority of premier apps being written natively. A quick look at both PhoneGap’s14 and Ionic’s15 showcases demonstrate a noticeable shortcoming in premier apps. One of the most highly touted hybrid apps is Untappd, which despite being a pretty great platform, has fewer than 5 million downloads. This might seem like a large number, but it puts it quite far down the list of most used apps.

Additionally, there is a long list of apps that have migrated from hybrid to native. That list includes Facebook16, TripAdvisor17, Uber18, Instagram3619 and many others.

It would be quite challenging to find a list of high-end apps that have moved from native to hybrid.

Final Defence of Hybrid Apps Link

The point of this section is not to be overly critical of hybrid apps, but to show that there is room for an alternative approach. Hybrid apps have been a very important technology and have been used successfully in many cases. Returning to the Ionic showcase, there are several apps that look better than the ones above. Baskin Robbins20, Pacifica21 and Sworkit22 are three recent examples.

For the past four years, hybrid app developers and frameworks have been working hard to improve their apps, and they have done an admirable job. However, underlying issues and foundational shortcomings remain, and ultimately better options can be found if you’re building a new app in 2017.

Another Approach Link

Although it is clear that hybrid apps do not quite stack up against native apps, their advantages and success can’t be ignored. They help solve very real resource, time and capabilities problems. If there was another approach that solved these same problems, while also eliminating the shortcomings of hybrid apps, that would be extremely appealing. React Native might just be the answer.

Overview and Advantages Link

React Native23 is a cross-platform mobile application development framework that builds on the popular React web development framework. Like React, React Native is an open-source project maintained largely by developers at Facebook and Instagram.

This framework is used to create Android and iOS applications with a shared JavaScript code base. When creating React Native apps, all of your business logic, API calls and state management live in JavaScript. The UI elements and their styling are genericized in your code but are rendered as the native views. This allows you to get a high degree of code reuse and still have a UI that follows each platform’s style guide and best practices.

React Native also allows you to write platform-specific code, logic and styling as needed. This could be as simple as having platform-specific React components or as advanced as using a platform-specific C library in your React Native app24.

Similarities to Hybrid Apps Link

Like hybrid app frameworks, React Native enables true cross-platform development. Instagram has shared that it is seeing between 85 and 99% code reuse25 for its React Native projects. Additionally, React Native is built using technologies (JavaScript and React) that many web developers will be familiar with. In the event that a developer is not familiar with React, it is a dramatically easier to learn if they are familiar with AngularJS, jQuery or vanilla JavaScript than it would be to learn Objective-C or Java.

Additionally, debugging26 React Native apps should also be a familiar process for web developers. This is because it is exceptionally easy to use Chrome’s debugging tools to monitor a code’s behavior. Chrome tools can be used when viewing apps in an emulator or on actual devices. As an added bonus, developers can also use more native debuggers as needed.

Screenshot of the React Native debugger27
iOS React Native debugger window

The main takeaway here is that React Native solves the same core problems that hybrid app frameworks set out to solve.

Further Improvements Over Hybrid Apps Link

Unlike hybrid apps, React Native apps run natively, instead of within a web view. This means they are not restricted to web-based UI elements, which can be sluggish when paired with a poor JavaScript interpreter28. Because React Native renders native UI elements, apps immediately feel more at home on the platform and make the user more comfortable on first use. Additionally, developer quality of life can be improved with React Native through more complete use of native tooling and profiling utilities.

Below are two screenshots of a recently released React Native app. These images highlight the platform-specific interface that can be achieved using this framework. As you can see, each app uses its native map and has callouts that follow each platform’s design guidelines. On Android, the callout is a card that rises from the bottom of the map. On iOS, the callout connects to the selected element on the map. The same actions can be performed in both apps, and most of the code is shared, but that extra bit of platform-specific polish really helps with overall usability.

Screenshot of the Vett Local app on iOS29
Screenshot of the Vett Local app on iOS
Screenshot of the Vett Local app on Android30
Screenshot of the Vett Local app on Android (View large version31)

How Is This Done? Link

Below is a sample React Native component. It demonstrates some common elements that make up React Native apps and highlights the areas that web developers should already be familiar with. Following the code snippet is a description of what each section is doing.

import PropTypes from "prop-types"; import React, { PureComponent } from "react"; import { Dimensions, StyleSheet, Text, View } from "react-native"; import LoadingAnimation from "./LoadingAnimation"; import SearchBar from "./SearchBar"; const { width } = Dimensions.get("window"); const styles = StyleSheet.create({ title: { backgroundColor: colors.transparent, color: colors.black, fontSize: 19, fontWeight: "500", }, }); export default class MovieList extends PureComponent { state = { movies: [], filteredMovies: [], loading: true, }; componentWillMount() { this._fetchMovies(); } _fetchMovies = () => { fetch("https://mywebsite.com/getMovies/", { method: "GET", }) .then(res => res.json()) .then(res => { this.setState({ movies: res, filteredMovies: res, loading: false, }); }) .catch(err => { this.setState({ error: "Unable to get movies.", }); }); }; _applyFilter = term => { const filteredList = this.state.movies.filter( movie => movie.title.toLowerCase().search(term) !== -1, ); this.setState({ filteredMovies: filteredList, }); }; _renderTitleRow = movie => { const titleLimit = width >= 375 ? 26 : 20; let formattedTitle = movie.title; if (formattedTitle.length > titleLimit) { formattedTitle = formattedTitle.slice(0, titleLimit - 3) + "..."; } return ( <Text numberOfLines={1} style={styles.title} key={movie.id}> {formattedTitle} </Text> ); }; render() { if (this.state.loading) { return ( <View> <LoadingAnimation /> </View> ); } else { return ( <View> <SearchBar onFilterChange={this._applyFilter} /> {this.state.filteredMovies.map(movie => this._renderTitleRow(movie))} </View> ); } } } 

Much of the code above should be familiar to most web developers. The vast majority of the code is just JavaScript. Much of the rendering logic will be new, but the migration from HTML to the React Native views is pretty straightforward. Additionally, the style attributes are quite similar to CSS. Let’s walk through some of this code:

  • state

    State32 is an object that contains many of the values that our component33MovieList needs to function. When state properties are changed (using this.setState()), the entire component is re-rendered to reflect those changes.
  • componentWillMount

    ComponentWillMount34 is a lifestyle function that is called prior to the component being rendered. Initial network requests often belong in this function.
  • _fetchMovies

    This function makes a network request that returns an array of movie objects. After it successfully completes, it updates state with the list and sets loading to false. Note that it also sets the initial filteredMovies to the returned list.
  • _applyFilter

    This function is called by our imported SearchBar component. For simplicity’s sake, assume that this function is called (likely with some debounce) whenever the value typed into the SearchBar component is changed. This function just contains some JavaScript that filters the filteredMovies list to the relevant titles.
  • _renderTitleRow

    This function outputs the view for a single movie. It contains some logic to make sure our output is uniform and renders a basic text component.
  • render()

    This function outputs the view for the component. It conditionally renders the list of movies or a loading animation, depending on the loading value stored in the state object.

Who Is Doing This? Link

When deciding how to build your own application, it is important to learn from industry leaders. Other companies and developers might have wasted years and millions of dollars building applications, and in minutes you can learn from their mistakes and experiences. Here is a quick list of some large companies that are using React Native in their apps: Facebook35, Instagram3619, Airbnb37, Baidu, Discord, Tencent, Uber38 and Twitter39.

Many of these apps were originally written using other approaches but have transitioned fully to React Native or are now using React Native to augment their existing native applications.

There is a notable trend of many premier apps being moved to React Native as a cross-platform solution, whereas, previously, most technology shifts among this class of apps were from cross-platform to platform-specific. This change simply can’t be ignored.

What Should You Do Now? Link

Just like the musician who has to rethink their approach to progress, so too must mobile app developers reconsider their technologies. It is critical that we make decisions based on the best options available and not rely solely on our familiarities. Even if the transition is uncomfortable initially, our industry and the app marketplace are highly competitive and demand that we continue to progress.

React Native is a highly attractive technology that combines the reusability and cost-effectiveness of hybrid apps with the polish and performance of native apps. It is seeing rapid adoption and should be considered as an alternative approach for any upcoming would-be hybrid apps.

(da, vf, yk, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/10/what-every-app-developer-should-know-about-android/
  2. 2 https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  3. 3 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
  4. 4 https://www.smashingmagazine.com/2012/06/mobile-considerations-in-user-experience-design-web-or-native/
  5. 5 http://marketingland.com/nearly-85-percent-smartphone-app-time-concentrated-top-five-apps-report-191624
  6. 6 https://itunes.apple.com/us/app/stockplan-connect/id1055368068?mt=8
  7. 7 http://showcase.ionicframework.com/apps/top
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ms-stock-app-large-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ms-stock-app-large-opt.png
  10. 10 http://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/
  11. 11 https://play.google.com/store/apps/details?id=com.nationwide.mobile.android.nwmobile&hl=en
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/nationwide-ios-preview-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/nationwide-android-preview-opt.png
  14. 14 http://phonegap.com/app/
  15. 15 http://showcase.ionicframework.com/apps/top
  16. 16 https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/10151036091753920/
  17. 17 http://www.androidcentral.com/tripadvisor-launches-refreshed-native-app-improved-performance-interface
  18. 18 https://eng.uber.com/tech-stack-part-two/
  19. 19 https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
  20. 20 https://www.baskinrobbins.com/content/baskinrobbins/en/mobileapp.html
  21. 21 http://blog.ionic.io/built-with-ionic-pacifica/
  22. 22 https://sworkit.com/
  23. 23 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
  24. 24 https://thebhwgroup.com/blog/react-native-jni
  25. 25 https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
  26. 26 https://facebook.github.io/react-native/docs/debugging.html
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/DeveloperMenu-preview-opt.png
  28. 28 https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/05/vl-iphone-preview-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/05/vl-android-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/vl-android-large-opt.png
  32. 32 https://facebook.github.io/react-native/docs/state.html
  33. 33 https://facebook.github.io/react/docs/react-component.html
  34. 34 https://facebook.github.io/react/docs/react-component.html#componentwillmount
  35. 35 https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/
  36. 36 https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
  37. 37 https://www.youtube.com/watch?v=tUfgQtmG3R0
  38. 38 https://eng.uber.com/ubereats-react-native/
  39. 39 https://www.infoq.com/news/2017/02/twitter-react-mobile-stack

↑ Back to topTweet itShare on Facebook

Convincing Clients: How To Get Sign Off When It Matters

Convincing Clients: How To Get Sign Off When It Matters

We have all been there. That dreaded moment when after weeks of work we have to present our progress to key stakeholders, and they mercilessly tear it apart. It feels inevitable, but usually, we can avoid these situations.

Wouldn’t life be so much easier if we didn’t need to get other people to buy-in to our work? Unfortunately, it doesn’t work that way, especially in digital. What we do involves so many different disciplines working together. We have to get the support of colleagues, stakeholders and management. But, achieving that can be painful, to say the least.

That said, there are things you can do to make life easier. We begin, by planning ahead.

Further Reading on SmashingMag: Link

Avoid The Crisis By Preparing The Ground Link

Often we win or lose the battle for getting approval before we ever present our work. That is why it is so important to start readying the ground as early as possible. That consists of four steps:

  1. Define roles up front
  2. Engage and educate often
  3. Gather your evidence
  4. Divide and conquer

1. Define roles up front Link

We tend to presume that stakeholders and clients know what we expect from them. But that is not necessarily the case, especially if they haven’t worked on a similar project before.

Therefore, you will find decision making a lot easier if everybody is clear about their roles as early on in a project as possible.

Focus the client on identifying problems. Problems with meeting the needs of users or fulfilling business goals. Meanwhile, explain it is your job to find solutions. That will discourage comments such as, “Change the blue to pink” and instead encourage comments like, “I am concerned that the pre-teen girl audience won’t respond well to the blue.” That puts you in control of the solution but still makes them feel involved. That leads to a more healthy working relationship.

5
By defining roles upfront you can reduce the chances of conversations like this. (Large preview6)

2. Engage and educate often Link

If you want a client to sign off on your digital direction, you will need to engage them in the process of creation. If somebody is involved in making something, they feel a sense of ownership over the creation. That makes them more likely to approve it and in turn, defend it to others.

Engaging clients in the creation process offers another advantage too. It provides you with an opportunity to educate the stakeholder about the decisions you are making. The better they understand the reasoning behind decisions, the more likely they are to approve them.

Best of all, there are lots of opportunities for engaging clients. You might want to consider a design sprint7, run a customer journey mapping workshop8 or do some collaborative wireframing exercises. In fact, a site like Gamestorming9 has hundreds of activities you could run with clients to get them engaged.

10
Design Sprints are a great way of educating and engaging stakeholders. (Large preview11)

3. Gather your evidence Link

Before presenting anything to stakeholders, you need to collect evidence to support your approach. Typically you should look for two types of evidence, qualitative and quantitive. In other words, try and gather both hard data and also stories of user experiences.

For quantitive data dive into your analytics, run surveys and carry out un-facilitated usability testing. Take that information, draw out key lessons and display it in an easy to digest way. Do not expect stakeholders to grasp it intuitively.

For qualitative data, interview users, carry out in-field studies and run facilitated usability sessions. Make sure you record these sessions and produce an edited highlight video showing the key lessons you want stakeholders to take away. That might be feature requests, frustrations or obstacles the user expressed.

One reason for this mix is that you will find different stakeholders respond to varying types of evidence. Some react emotionally and so will tend to be influenced by stories of users struggling. Others respond more rationally and will be more affected by the numbers.

Make sure you have sufficient evidence to support your approach by doing some testing beforehand.12
Make sure you have sufficient evidence to support your approach by doing some testing beforehand. (Large preview13)

4. Divide and conquer Link

If you will be presenting to many stakeholders, it is worth speaking to them individually beforehand. That gives you a chance to get them onboard informally before the presentation and avoid some of the challenges around group dynamics.

Often one senior figure can dominate a group discussion. But if you have won over other attendees beforehand, they are more likely to speak up in the meeting and support you.

Also by meeting with people individually, you can tailor how you present your work to the different stakeholders. For example, you could focus on the benefits to that person’s team or even them personally. That means they will go into the meeting much more likely to support your proposal.

But how you present your ideas on the day will still make or break success, no matter how much preparation you do beforehand.

Know The Secrets To Presenting Your Work Link

Let’s be honest; things can go horribly wrong when you ask for approval. Even if you follow the advice here, there is no guarantee. So when possible, put off asking for sign off for as long as you can. It is amazing just how much you can get done without going to stakeholders for their formal agreement, especially if you have involved them informally along the way.

But eventually, the time will come when you need their official “OK”. When that moment comes, there are three areas you should always cover:

  1. Excite them about the future
  2. Justify your approach
  3. Outline a roadmap for success

1. Excite them about the future Link

We have a tendency to start by providing the background that justifies our approach. But in my experience, a presentation is more compelling when you start by outlining your vision. That is where you show your work. But do so by painting a picture of what that work will ultimately deliver.

For example, if you are presenting a new design or even project plan, don’t focus too much on the thing itself, but instead concentrate on the benefit the thing will bring when you implement it.

Where possible show stakeholders what that future will look like if they proceed. When presenting a design that is easy. But in other situations consider a customer journey map14 or a prototype15. People are much more excited when they can see something tangible.

Even something as simple as a customer journey map of a future improved experience can be enough to excite stakeholders.16
Even something as simple as a customer journey map of a future improved experience can be enough to excite stakeholders. (Large preview17)

2. Justify your approach Link

Once you have outlined your vision, the next step is to justify it. Do this in two ways.

  • First, focus on the value of the goal.

    What does your vision of the future provide to the business that it needs? For example, if you are proposing that the organisation buys a customer relationship management system with the end goal of better managing customers, you could relate that to the companies desire to increase repeat business.
  • Second, provide evidence of how your suggested approach will get the organisation to the desired outcome.

    For example, how do you know buying a customer relationship management system will help you manage customers better?

3. Outline a roadmap for success Link

With your vision laid out and justified the next step is to explain how you get to the final result. That might be how you will implement the project or build the design. The aim is to give stakeholders an overview of the steps required to make the vision a reality. The steps that they have to approve.

But be careful. Overwhelming stakeholders at this point is easy. If that roadmap includes significant changes or investment, you may find they react negatively. Equally, if it is complex and they don’t fully understand it, then they will be reluctant to commit.

That is why the best approach, once you have laid out the roadmap, is to focus in on the next few steps. Instead of asking them to commit to a significant investment, outline the first action and ask them to agree to that. That might be a discovery phase, building a prototype or running a pilot.

By reducing the commitment, you are reducing the risk. That will make stakeholders much more open to agreeing. It is better to go back to stakeholders seeking approval for small steps than trying to get them to agree to the entire undertaking in one go.

But however well you present, stakeholders will always have questions and feedback. How you deal with these often dictates whether you get final approval or not.

Avoid The Destructive Pitfalls Of Negative Feedback Link

We now reach the part where preparing the ground pays dividends. Hopefully, they will focus on issues rather than dictating the solution to you. However, sometimes the group will start coming up with ‘fixes’ for issues they identify. If that happens, suggest the issue needs more consideration and offer to go away, research solutions, and then feedback. That puts you back in control.

Also, you will have already answered many of the questions in your one-to-one discussions. That and they will understand your approach because some of them at least were involved in its creation.

But you will still get some feedback. The trick is to manage that effectively, and that means structuring the feedback session.

Things can go wrong if you just open up the floor at the end of your presentation for a Q&A time. Instead, I tend to finish a presentation with some questions of my own. I ask whether they feel the project will achieve its desired goals, meet the needs of users and fulfil organisational objectives. That sets the tone for the discussion and focuses everybody on what matters, rather than personal opinion and agendas.

If you ask people what they think, you won't get very useful feedback.18
If you ask people what they think, you won’t get very useful feedback. (Large preview19)

Where possible keep the Q&A time short, suggest that the stakeholders might want to take their time in formulating their feedback and provide it to you individually. That not only stops on-the-fly fixes, it also means you become the person in control. Because all the feedback comes direct to you, rather than the whole group, you are the only one in possession of all the information. That allows you to pick and choose what you listen to and what you ignore.

Part Of A Bigger Picture Link

Success or failure in getting approval for your ideas is about a lot more than presenting them well. It is about how stakeholders perceive you, what their personal agendas are, the culture of the company and a whole lot besides.

In this post, I’ve shared a fraction of the advice which I’ll be offering in my workshop “How To Convince Clients And Colleagues The Right Way20” this coming October at SmashingConf Barcelona21. But how you present is a huge factor, and taking the time to think through your approach will really make a big difference.

(vf, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/05/why-great-products-need-great-collaboration/
  2. 2 https://www.smashingmagazine.com/2012/09/better-client-participation-in-responsive-design-projects/
  3. 3 https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/
  4. 4 https://www.smashingmagazine.com/2011/08/breaking-down-silos-part-1-the-consequences-of-working-in-isolation/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.jpg
  7. 7 http://www.gv.com/sprint/
  8. 8 https://boagworld.com/usability/how-to-run-a-customer-journey-mapping-workshop/
  9. 9 http://gamestorming.com/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/03-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/03-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.jpg
  14. 14 https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/
  15. 15 https://boagworld.com/usability/business-benefits-prototypes/
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Convincing-clients-How-to-get-sign-off-when-it-matters-large-opt.jpg
  20. 20 https://smashingconf.com/barcelona-2017/workshops/paul-boag
  21. 21 https://smashingconf.com/barcelona-2017/

↑ Back to topTweet itShare on Facebook

A Complete Guide To Switching From HTTP To HTTPS

A Complete Guide To Switching From HTTP To HTTPS

HTTPS is a must for every website nowadays: Users are looking for the padlock when providing their details; Chrome1 and Firefox2 explicitly mark websites that provide forms on pages without HTTPS as being non-secure; it is an SEO ranking factor3; and it has a serious impact on privacy4 in general. Additionally, there is now more than one option to get an HTTPS certificate for free, so switching to HTTPS is only a matter of will.

Setting up HTTPS can be a bit intimidating for the inexperienced user — it takes many steps with different parties, it requires specific knowledge of encryption and server configuration, and it sounds complicated in general.

In this guide, I will explain the individual components and steps and will clearly cover the individual stages of the setup. Your experience should be easy, especially if your hosting provider also supplies HTTPS certificates — chances are you will be able to perform everything from your control panel quickly and easily.

I have included detailed instructions for owners of shared hosting plans on cPanel, administrators of Apache HTTP servers and of nginx on Linux and Unix, as well as Internet Information Server on Windows.

Let’s start with the basics.

Further Reading on SmashingMag: Link

HTTP Vs. HTTPS Vs. HTTP/2 Vs. SSL Vs. TLS: What’s What? Link

A lot of acronyms are used to describe the processes of communication between a client and a server. These are often mixed up by people who are not familiar with the internals.

The Hypertext Transfer Protocol (HTTP) is the basic communication protocol that both clients and servers must implement in order to be able to communicate. It covers things such as requests and responses, sessions, caching, authentication and more. Work on the protocol, as well as on the Hypertext Markup Language (HTML), started in 1989 by Sir Tim Berners-Lee9 and his team at CERN. The first official version of the protocol (HTTP 1.0) was released in 1996, shortly followed by the currently widely adopted version (HTTP 1.1) in 1997.

The protocol transfers information between the browser and the server in clear text, allowing the network, through which the information passes, to see the information transmitted. This is a security concern, so HTTP Secure (HTTPS) was introduced, allowing the client and the server to first establish an encrypted communication channel, and then pass the clear text HTTP messages through it, effectively protecting them from eavesdropping.

The encrypted channel is created using the Transport Layer Security (TLS) protocol, previously called Secure Socket Layer (SSL). The terms SSL and TLS are often used interchangeably, with SSL 3.0 being replaced by TLS 1.0. SSL was a Netscape-developed protocol, while TLS is an IETF standard. At the time of writing, all versions of SSL (1.0, 2.0, 3.0) are deprecated due to various security problems and will produce warnings in current browsers, and the TLS versions (1.0, 1.1, 1.2) are in use, with 1.3 currently a draft.

So, sometime around 1996 and 1997, we got the current stable version of the Internet (HTTP 1.1, with or without SSL and TLS), which still powers the majority of websites today. Previously, HTTP was used for non-sensitive traffic (for example, reading the news), and HTTPS was used for sensitive traffic (for example, authentication and e-commerce); however, increased focus on privacy means that web browsers such as Google Chrome now mark HTTP websites as “not private” and will introduce warnings for HTTP in future.

The next upgrade of the HTTP protocol — HTTP/2 — which is being adopted by a growing number of websites, adds new features (compression, multiplexing, prioritization) in order to reduce latency and increase performance and security.

In HTTP version 1.1, the secure connection is optional (you may have HTTP and/or HTTPS independent of each other), while in HTTP/2 it is practically mandatory — even though the standard defines HTTP/2 with or without TLS, most browser vendors have stated that they will only implement support for HTTP/2 over TLS10.

What Does HTTPS Provide? Link

Why bother with HTTPS in the first place? It is used for three main reasons:

  • Confidentiality

    This protects the communication between two parties from others within a public medium such as the Internet. For example, without HTTPS, someone running a Wi-Fi access point could see private information such as credit cards when someone using the access point purchases something online.
  • Integrity

    This makes sure information reaches its destined party in full and unaltered. For example, our Wi-Fi friend could add extra advertisements to our website, reduce the quality of our images to save bandwidth or change the content of articles we read. HTTPS ensures that the website can’t be modified.
  • Authentication

    This ensures that the website is actually what it claims to be. For example, that same person running the Wi-Fi access point could send browsers to a fake website. HTTPS ensures that a website that says it’s example.com is actually example.com. Some certificates even check the legal identity behind that website, so that you know yourbank.com is YourBank, Inc.

Cryptography In A Nutshell Link

Confidentiality, integrity and authentication aren’t HTTPS-specific: They’re the core concepts of cryptography. Let’s look a little more closely at them.

Confidentiality Link

Confidentiality is privacy — that is, it protects information from being read by an unauthorized third party. The process usually involves turning a readable (i.e. audible and visible) form of the information, called plaintext, into a scrambled, unreadable version, called ciphertext. This process is called encryption. The reverse process — turning the unreadable ciphertext back into readable plaintext — is called decryption. There are many methods — cipher functions (or algorithms) — to encrypt and decrypt information.

In order for two parties to be able to communicate, they should agree on two things:

  1. which algorithm (cipher function) they will use in their communication;
  2. which parameters, password or rules (i.e. secret) will be used with the method selected.

There are two main types of encryption methods:

  • symmetric

    Both parties share a common secret key.
  • asymmetric

    One of the parties has a pair of a secret and a public key, the foundation of public key infrastructure (PKI).

The symmetric class of methods relies on both parties having a shared secret, which the sender uses to encrypt the information, which in turn the receiver decrypts using the same method and key (see the figure below). The problem with these methods is how both parties will negotiate (i.e. exchange) the secret without physically meeting each other — they need to have a secure communication channel of some sort.

11
Symmetric encryption (View large version12)

The asymmetric methods come to solve this kind of problem — they are based on the notion of public and private keys. The plaintext is encrypted using one of the keys and can only be decrypted using the other complementary key.

So, how does it work? Let’s assume we have two parties who are willing to communicate with each other securely — Alice and Bob (these are always the names of the fictional characters in every tutorial, security manual and the like, so we’ll honor the tradition here as well). Both of them have a pair of keys: a private key and a public one. Private keys are known only to their respective owner; public keys are available to anyone.

If Alice wants to send a message to Bob, she would obtain his public key, encrypt the plaintext and send him the ciphertext. He would then use his own private key to decrypt it.

If Bob would like to send a reply to Alice, he would obtain her public key, encrypt the plaintext and send her the ciphertext. She would then use her own private key to decrypt it.

Asymmetric encryption13
Asymmetric encryption (View large version14)

When do we use symmetric and when do we use asymmetric encryption? Asymmetric encryption is used to exchange the secret between the client and the server. In real life, we usually do not need two-way asymmetric communication — it is sufficient if one of the parties (we’ll just call it a server, for the sake of simplicity) has the set of keys, so it can receive an encrypted message. It really protects the security of information in only one direction — from the client to the server, because the information encrypted with the public key can only be decrypted using the private key; hence, only the server can decrypt it. The other direction is not protected — information encrypted with the server’s private key can be decrypted with its public key by anyone. The other party (we’ll similarly call it a client) begins the communication by encrypting a randomly generated session secret with the server’s public key, then sends the ciphertext back to the server, which, in turn, decrypts it using its own private key, now having the secret.

Symmetric encryption is then used to protect the actual data in transit, since it’s much faster than asymmetric encryption. The two parties (the client and the server), with the previously exchanged secret, are the only ones able to encrypt and decrypt the information.

That’s why the first asymmetric part of the handshake is also known (and referred to) as key exchange and why the actual encrypted communication uses algorithms known (and referred to) as cipher methods.

Integrity Link

Another concern, solved with HTTPS, is data integrity: (1) whether the entire information arrived successfully, and (2) whether it was modified by someone in transit. In order to ensure the information is transmitted successfully, message digest algorithms are used. Computing message authentication codes (MACs) for each message exchanged are a cryptographic hashing process. For example, obtaining a MAC (sometimes called a tag) uses a method that ensures that it is practically impossible (the term commonly used is infeasible) to:

  • change the message without affecting the tag,
  • generate the same tag from two different messages,
  • reverse the process and obtain the original message from the tag.

Authentication Link

What about authentication? The problem with the real-life application of the public key infrastructure is that both parties have no way of knowing who the other party really is — they are physically separate. In order to prove the identity of the other party, a mutually trusted third party — a certificate authority (CA) — is involved. A CA issues a certificate, stating that the domain name example.com (a unique identifier), is associated with the public key XXX. In some cases (with EV and OV certificates — see below), the CA will also check that a particular company controls that domain. This information is guaranteed by (i.e. certified by) the certificate authority X, and this guarantee is valid no earlier than (i.e. begins on) date Y and no later than (i.e. expires on) date Z. All of this information goes into a single document, called an HTTPS certificate. To present an easily understandable analogy, it is like a country government (a third party trusted by all) issuing an ID or a passport (a certificate) to a person — every party that trusts the government would also accept the identity of the ID holder (assuming the ID is not fake, of course, but that’s outside the scope of this example).

Certification authorities (CAs) are organizations trusted to sign certificates. Operating systems, such as Windows, macOS, iOS and Android, as well as the Firefox browser, have a list of trusted certificates.

You can check which CAs are trusted by your browser:

  • Firefox

    “Options” → “Advanced” → “Certificates” → “View Certificates” → “Authorities”
  • Windows

    “Control Panel” → “Internet Options” → “Content” — “Certificates” → “Trusted Root Certification Authorities / Intermediate Certification Authorities”
  • Mac

    “Applications” → “Utilities” → “Keychain Access.” Under “Category,” pick Certificates”

All certificates are then checked and trusted — by the operating system or browser if directly trusted or by a trusted entity if verified. This mechanism of transitive trust is known as a chain of trust15:

Chain of trust16
Chain of trust (View large version17)

You can add other unlisted CAs, which is useful when working with self-signed certificates (which we’ll discuss later).

In most common situations, only the server needs to be known to the client — for example, an e-commerce website to its customers — so, only the website needs a certificate. In other situations, such as e-government systems, both the server and the client, requesting a service, should have their identity proven. This means that both parties should be using certificates to authenticate to the other party. This setup is also outside the scope of this article.

Types Of HTTPS Certificates Link

There are several types of HTTPS certificates. They can be categorized according to the following criteria.

1. Identity Validation Link

  1. Domain validated (DV)

    The most common type of certificate, a DV certificate verifies that the domain matches a particular public key. The browser establishes a secure connection with the server and displays the closed padlock sign. Clicking the sign will show “This website does not supply ownership information.” There are no special requirements other than having a domain — a DV certificate simply ensures that this is the correct public key for that domain. The browser does not show a legal entity. DV certificates are often cheap (10 USD per year) or free — see the sections on Let’s Encrypt2318 and Cloudflare2419 below.
  2. Extended validation (EV)

    EV certificates verify the legal organization behind a website. This is the most trustworthy type of certificate, which is obtained after a CA checks the legal entity that controls the domain. The legal entity is checked with a combination of:

    • control of the domain (such as a DV certificate);
    • government business records, to make sure the company is registered and active;
    • independent business directories, such as Dunn and Bradstreet, Salesforce’s connect.data.com, Yellow Pages, etc.;
    • a verification phone call;
    • inspection of all domain names in the certificate (wildcards are explicitly forbidden for EV certificates).

    As well as the closed padlock sign, EV HTTPS certificates display the name of the validated legal entity — typically a registered company — before the URL. Some devices, such as iOS Safari, will only show the validated legal entity, ignoring the URL completely. Clicking the sign will show details about the organization, such as the name and street address. The cost is between 150 and 300 USD per year.

  3. Organization validated (OV)

    Like EV, OV certificates verify the legal organization behind a website. However, unlike EV, OV HTTPS certificates do not display the verified legal name in the UI. As a result, OV certificates are less popular, because they have high validation requirements, without the benefits of these being shown to users. Prices are in the 40 to 100 USD per year range.

2. Number of Domains Covered Link

Once upon a time, HTTPS certificates generally contained a single domain in the CN field. Later, the “subject alternative name” (SAN) field was added to allow additional domains to be covered by a single certificate. These days, all HTTPS certificates are created equal: Even a single-domain certificate will have a SAN for that single domain (and a second SAN for the www version of that domain). However, many certificate vendors still sell single- and multi-domain HTTPS certificates for historical reasons.

  1. Single domain

    This is the most common type of certificate, valid for the domain names example.com and www.example.com.
  2. Multiple domains (UCC/SAN)

    This type of certificate, also known as Unified Communications Certificate (UCC) or Subject Alternative Names (SAN) certificate, can cover a list of domains (up to a certain limit). It is not limited to a single domain — you can mix different domains and subdomains. The price usually includes a set number of domains (three to five), with the option to include more (up to the limit) for an additional fee. Using it with related websites is advised, because the client inspecting the certificate of any of the websites will see the main domain, as well as all additional ones.
  3. Wildcard

    This type of certificate covers the main domain as well as an unlimited number of subdomains (*.example.com) — for example, example.com, www.example.com, mail.example.com, ftp.example.com, etc. The limitation is that it covers only subdomains of the main domain.

The variety of HTTPS certificates available is summarized in the table below:

Certificate type Domain validated (DV) Organization validated (OV) Extended validation (EV)
HTTPS HTTPS

Verified legal owner
HTTPS

Verified legal owner

Owner info displayed in browser
Single domain example.com, www.example.com
Multiple domains example.com, www.example.com, mail.example.com, example.net, example.org, etc.

predefined list, up to a certain limit (usually 100)
Wildcard *.example.com

matches any subdomain
N/A — all names must be included explicitly in the certificate and inspected by the CA.

The Configuration Link

To recap, four components of HTTPS require encryption:

  1. The initial key exchange

    This uses asymmetric (private and public key) algorithms.
  2. The identity certification (the HTTPS certificate, issued by a certification authority)

    This uses asymmetric (private and public key) algorithms.
  3. The actual message encryption

    This uses symmetric (pre-shared secret) algorithms.
  4. The message digesting

    This uses cryptographic hashing algorithms.

Each of these components has a set of used algorithms (some of them deprecated already) that use different key sizes. Part of the handshake involves the client and the server agreeing on which combination of methods they will use — select one out of about a dozen public key (key exchange) algorithms, one out of about a dozen symmetric key (cipher) algorithms and one out of three (two deprecated) message-digesting (hashing) algorithms, which gives us hundreds of combinations.

For example, the setting ECDHE-RSA-AES256-GCM-SHA384 means that the key will be exchanged using the Elliptic Curve Diffie-Hellman Ephemeral (ECDHE) key exchange algorithm; the CA signed the certificate using the Rivest-Shamir-Adleman (RSA) algorithm; the symmetric message encryption will use the Advanced Encryption Standard (AES) cipher, with a 256-bit key and GCM mode of operation; and message integrity will be verified using the SHA secure hashing algorithm, using 384-bit digests. (A comprehensive list of algorithm combinations20 is available.)

So, there are some configuration choices to be made.

Cipher Suites Link

Deciding the cipher suites to use is a balance between compatibility and security:

  • Compatibility with older browsers needs the server to support older cipher suites.
  • However, many older cipher suites are no longer considered secure.

OpenSSL lists the supported combinations (see above) in order of cryptographic strength, with the most secure at the top and the weakest at the bottom. It is designed in this way because, during the initial handshake between the client and the server, the combination to be used is negotiated until a match is found that is supported by both parties. It makes sense to first try the most secure combinations and gradually resort to weaker security only if there is no other way.

Wikipedia has a comprehensive list of algorithms21 for all components of TLS and their support in different versions of SSL and TLS.

A very useful and highly recommended resource, advising on what cryptographic methods to enable on the server, is the Mozilla SSL Configuration Generator116686722, which we’ll use later on with actual server configurations.

Key Types Link

Elliptic Curve Cryptography (ECC) certificates are faster and use less CPU than the RSA certificates, which is particularly important for mobile clients. However, some services, such as Amazon, CloudFront and Heroku, don’t yet, at the time of writing, support ECC certificates.

A 256-bit ECC key is considered sufficient.

Rivest Shamir Adleman (RSA) certificates are slower but compatible with a wider variety of older servers. RSA keys are larger, so a 2048-bit RSA key is considered minimal. RSA certificates of 4096 and above may hurt performance — they’re also likely to be signed by a 2048-bit intermediary, undermining much of the additional security!

You might have noticed the fluidity of the statements above and the lack of any numbers — it is because what is a heavy load on one server is not on another. The best way to determine the impact on performance is to monitor the load on your server, with your real website(s) and your real visitors. And even that will change over time.

Procedures Link

To obtain an HTTPS certificate, perform the following steps:

  1. Create a private and public key pair, and prepare a Certificate Signing Request (CSR), including information about the organization and the public key.
  2. Contact a certification authority and request an HTTPS certificate, based on the CSR.
  3. Obtain the signed HTTPS certificate and install it on your web server.

There exists a set of files, containing different components of the public key infrastructure (PKI): the private and public keys, the CSR and the signed HTTPS certificate. To make things even more complicated, different parties use different names (and file extensions) to identify one and the same thing.

To start, there are two popular formats for storing the information — DER and PEM. The first one (DER) is binary, and the second (PEM) is a base64-encoded (text) DER file. By default, Windows uses the DER format directly, and the open-source world (Linux and UNIX) uses the PEM-format. There are tools (OpenSSL) to convert between one and the other.

The files we’ll be using as examples in the process are the following:

  • example.com.key

    This PEM-formatted file contains the private key. The extension .key is not a standard, so some might use it and others might not. It is to be protected and accessible only by the system super-user.
  • example.com.pub

    This PEM-formatted file contains the public key. You do not actually need this file (and it’s never explicitly present), because it can be generated from the private key. It is only included here for illustration purposes.
  • example.com.csr

    This is a certificate signing request. A PEM-formatted file containing organizational information, as well as the server’s public key, should be sent to the certification authority issuing the HTTPS certificate.
  • example.com.crt

    This HTTPS certificate is signed by the certification authority. It is a PEM-formatted file, including the server’s public key, organizational information, the CA signature, validity and expiry dates, etc. The extension .crt is not a standard; other common extensions include .cert and .cer.

File names (and extensions) are not standard; they can be anything you like. I have chosen this naming convention because I think it is illustrative and makes more obvious which component has what function. You can use whatever naming convention makes sense to you, as long as you refer to the appropriate key-certificate files in the commands and server configuration files throughout the process.

The private key is a randomly generated string of a certain length (we’ll use 2048-bit), which looks like the following:

-----BEGIN RSA PRIVATE KEY----- MIIEowIBAAKCAQEAm+036O2PlUQbKbSSs2ik6O6TYy6+Zsas5oAk3GioGLl1RW9N i8kagqdnD69Et29m1vl5OIPsBoW3OWb1aBW5e3J0x9prXI1W/fpvuP9NmrHBUN4E S17VliRpfVH3aHfPC8rKpv3GvHYOcfOmMN+HfBZlUeKJKs6c5WmSVdnZB0R4UAWu Q30aHEBVqtrhgHqYDBokVe0/H4wmwZEIQTINWniCOFR5UphJf5nP8ljGbmPxNTnf b/iHS/chjcjF7TGMG36e7EBoQijZEUQs5IBCeVefOnFLK5jLx+BC//X+FNzByDil Tt+l28I/3ZN1ujhak73YFbWjjLR2tjtp+LQgNQIDAQABAoIBAEAO2KVM02wTKsWb dZlXKEi5mrtofLhkbqvTgVE7fbOKnW8FJuqCl+2NMH31F1n03l765p4dNF4JmRhv /+ne4vCgOPHR/cFsH4z/0d5CpHMlC7JZQ5JjR4QDOYNOpUG51smVamPoZjkOlyih XGk/q72CxeU6F/gKIdLt6Dx03wBosIq9IAE8LwdMnioeuj18qaVg195OMeIOriIn tpWP4eFya5rTpIFfIdHdIxyXsd6hF/LrRc9BMWTY1/uOLrpYjTf7chbdNaxhwH7k buvKxBvCvmXmd6v/AeQQAXbUkdSnbTKDaB9B7IlUTcDJyPBJXvFS1IzzjN6vV+06 XBwHx5ECgYEAyRZLzwnA3bw8Ep9mDw8JHDQoGuQkFEMLqRdRRoZ+hxnBD9V9M0T6 HRiUFOizEVoXxf6zPtHm/T7cRD8AFqB+pA/Nv0ug6KpwUjA4Aihf5ADp0gem0DNw YlVkCA6Bu7c9IUlE0hwF7RLB7YrryJVJit9AymmUTUUHCQTWW2yBhC8CgYEAxoHS HGXthin5owOTNPwLwPfU2o7SybkDBKyW69uTi0KxAl3610DjyA/cV2mxIcFlPv1y HualGd9eNoeCMBy/AUtjzI0K77yeRpjj321rj6k8c8bYWPHH539SiBXLWTY/WQ0w pxfT3d/Z4QMh5d6p+p5f3UIrXESYQd+fAaG5tNsCgYEAksTdTB4YUT9EsWr6eN9G jPlclFQUKV3OMvq77bfYvg8EJORz32nnDDmWS7SUjoOtemwutBlMeWbaKk25aMp3 5JNMXuV6apeMJ9Dd8GU7qBUqlIvVK31/96XPvzmnYzWZPqRVwO2HPcRFG3YcJmkg JmZQyexJvCQ3wFNxiYUm+y0CgYBXQSMhFnCUg4jWbbDcHlnwRT+LnjHrN2arPE3O eKLfGL6DotmqmjxFaStaRPv2MXMWgAMUsB8sQzG/WEsSaOBQaloAxJJlFIyhzXyE bi1UZXhMD8BzQDu1dxLI/IN4wE6SDykumVuocEfuDxlsWDZxEgJjWD2E/iXK9seG yRa+9wKBgEydVz+C1ECLI/dOWb20UC9nGQ+2dMa+3dsmvFwSJJatQv9NGaDUdxmU hRVzWgogZ8dZ9oH8IY3U0owNRfO65VGe0sN00sQtMoweEQi0SN0J6FePiVCnl7pf lvYBaemLrW2YI2B7zk5fTm6ng9BW/B1KfrH9Vm5wLQBchAN8Pjbu -----END RSA PRIVATE KEY----- 

Keep the private key private! This means protect it by very restricted permissions (600), and do not disclose it to anyone.

Its counterpart — the public key — looks like this:

-----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm+036O2PlUQbKbSSs2ik 6O6TYy6+Zsas5oAk3GioGLl1RW9Ni8kagqdnD69Et29m1vl5OIPsBoW3OWb1aBW5 e3J0x9prXI1W/fpvuP9NmrHBUN4ES17VliRpfVH3aHfPC8rKpv3GvHYOcfOmMN+H fBZlUeKJKs6c5WmSVdnZB0R4UAWuQ30aHEBVqtrhgHqYDBokVe0/H4wmwZEIQTIN WniCOFR5UphJf5nP8ljGbmPxNTnfb/iHS/chjcjF7TGMG36e7EBoQijZEUQs5IBC eVefOnFLK5jLx+BC//X+FNzByDilTt+l28I/3ZN1ujhak73YFbWjjLR2tjtp+LQg NQIDAQAB -----END PUBLIC KEY----- 

The Certificate Signing Request (CSR) looks like the following:

-----BEGIN CERTIFICATE REQUEST----- MIICzjCCAbYCAQAwgYgxFDASBgNVBAMMC2V4YW1wbGUuY29tMQswCQYDVQQLDAJJ VDEPMA0GA1UECAwGTG9uZG9uMRIwEAYDVQQKDAlBQ01FIEluYy4xIDAeBgkqhkiG 9w0BCQEWEWFkbWluQGV4YW1wbGUuY29tMQswCQYDVQQGEwJHQjEPMA0GA1UEBwwG TG9uZG9uMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm+036O2PlUQb KbSSs2ik6O6TYy6+Zsas5oAk3GioGLl1RW9Ni8kagqdnD69Et29m1vl5OIPsBoW3 OWb1aBW5e3J0x9prXI1W/fpvuP9NmrHBUN4ES17VliRpfVH3aHfPC8rKpv3GvHYO cfOmMN+HfBZlUeKJKs6c5WmSVdnZB0R4UAWuQ30aHEBVqtrhgHqYDBokVe0/H4wm wZEIQTINWniCOFR5UphJf5nP8ljGbmPxNTnfb/iHS/chjcjF7TGMG36e7EBoQijZ EUQs5IBCeVefOnFLK5jLx+BC//X+FNzByDilTt+l28I/3ZN1ujhak73YFbWjjLR2 tjtp+LQgNQIDAQABoAAwDQYJKoZIhvcNAQELBQADggEBAGIQVhXfuWdINNfceNPm CkAGv4yzpx88L34bhO1Dw4PYWnoS2f7ItuQA5zNk9EJhjkwK8gYspK7mPkvHDbFa Um7lPSWsm3gjd3pU7dIaHxQ+0AW9lOw5ukiBlO4t3qgt+jTVZ3EhMbR0jDSyjTrY kTgfuqQrGOQSmLb5XviEtCcN0rseWib3fKIl8DM69JiA2AALxyk7DCkS1BqLNChT pnbgvtlUhc4yFXNCtwPGskXIvLsCn2LRy+qdsPM776kDLgD36hK0Wu14Lpsoa/p+ ZRuwKqTjdaV23o2aUMULyCRuITlghEEkRdJsaXadHXtNd5I5vDJOAAt46PIXcyEZ aQY= -----END CERTIFICATE REQUEST----- 

This particular CSR contains the server’s public key and details about the organization ACME Inc., based in London, UK, and which owns the domain name example.com.

Finally, the signed HTTPS certificate looks like the following:

-----BEGIN CERTIFICATE----- MIIDjjCCAnYCCQCJdR6v1+W5RzANBgkqhkiG9w0BAQUFADCBiDEUMBIGA1UEAwwL ZXhhbXBsZS5jb20xCzAJBgNVBAsMAklUMQ8wDQYDVQQIDAZMb25kb24xEjAQBgNV BAoMCUFDTUUgSW5jLjEgMB4GCSqGSIb3DQEJARYRYWRtaW5AZXhhbXBsZS5jb20x CzAJBgNVBAYTAkdCMQ8wDQYDVQQHDAZMb25kb24wHhcNMTYwNDE5MTAzMjI1WhcN MTcwNDE5MTAzMjI1WjCBiDEUMBIGA1UEAwwLZXhhbXBsZS5jb20xCzAJBgNVBAsM AklUMQ8wDQYDVQQIDAZMb25kb24xEjAQBgNVBAoMCUFDTUUgSW5jLjEgMB4GCSqG SIb3DQEJARYRYWRtaW5AZXhhbXBsZS5jb20xCzAJBgNVBAYTAkdCMQ8wDQYDVQQH DAZMb25kb24wggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCb7Tfo7Y+V RBsptJKzaKTo7pNjLr5mxqzmgCTcaKgYuXVFb02LyRqCp2cPr0S3b2bW+Xk4g+wG hbc5ZvVoFbl7cnTH2mtcjVb9+m+4/02ascFQ3gRLXtWWJGl9Ufdod88Lysqm/ca8 dg5x86Yw34d8FmVR4okqzpzlaZJV2dkHRHhQBa5DfRocQFWq2uGAepgMGiRV7T8f jCbBkQhBMg1aeII4VHlSmEl/mc/yWMZuY/E1Od9v+IdL9yGNyMXtMYwbfp7sQGhC KNkRRCzkgEJ5V586cUsrmMvH4EL/9f4U3MHIOKVO36Xbwj/dk3W6OFqTvdgVtaOM tHa2O2n4tCA1AgMBAAEwDQYJKoZIhvcNAQEFBQADggEBABwwkE7wX5gmZMRYugSS 7peSx83Oac1ikLnUDMMOU8WmqxaLTTZQeuoq5W23xWQWgcTtfjP9vfV50jFzXwat 5Ch3OQUS53d06hX5EiVrmTyDgybPVlfbq5147MBEC0ePGxG6uV+Ed+oUYX4OM/bB XiFa4z7eamG+Md2d/A1cB54R3LH6vECLuyJrF0+sCGJJAGumJGhjcOdpvUVt5gvD FIgT9B04VJnaBatEgWbn9x50EP4j41PNFGx/A0CCLgbTs8kZCdhE4QFMxU9T+T9t rXgaspIi7RA4xkSE7x7B8NbvSlgP79/qUe80Z7d8Oolva6dTZduByr0CejdfhLhi mNU= -----END CERTIFICATE----- 

All parts are connected and should match each other. The final certificate was generated for illustration purposes only — it is the so-called self-signed certificate, because it was not signed by a recognized certification authority.

The process will be illustrated with actual steps for cPanel, Linux, FreeBSD and Windows. This is a universal process, valid for all kinds of certificates. If you are interested in getting a free DV certificate, there are other procedures to follow in the sections on Let’s Encrypt2318 and Cloudflare2419.

Step 1: Create A Private Key And A Certificate Signing Request (CSR) Link

In the following examples, we’ll use 2048-bit RSA certificates, for their wide compatibility. If your server provider supports it (for example, if you don’t use Heroku or AWS), you might prefer to use ECC instead.

cPanel Link

  1. Log into your host’s cPanel.
  2. Scroll down to the “Security” section and click “SSL/TLS.”

    cPanel Security section25
    cPanel “Security” section (View large version26)
  3. You are now in the “SSL/TLS Manager” home. Click “Private Keys (KEY)” to create a new private key.

    cPanel SSL/TLS Manager27
    cPanel “SSL/TLS Manager (View large version28)
  4. You will be redirected to a page to “Generate, Paste or Upload a new “Private

    Key.” Select “2048-bit” in the “Key Size” dropdown, and click “Generate.”

    cPanel cPanel Private Key management29
    cPanel “Private Key” management (View large version30)
  5. The new private key will be generated, and you will get a confirmation screen:

    cPanel Private key confirmation31
    cPanel private key confirmation (View large version32)
  6. If you go back to the “Private Keys” home, you will see your new key listed:

    cPanel Private keys with the new key generated33
    cPanel “Private Keys” with the new key generated (View large version34)
  7. Go back to the “SSL/TLS Manager” home. Click “Certificate Signing Requests (CSR)” to create a new certificate request.

    cPanel SSL/TLS Manager35
    cPanel “SSL/TLS Manager” (View large version36)
  8. You will now be presented with the “Generate Service Request” form. Select the previously created private key and fill in the fields. Answer all of the questions correctly (they will be public in your signed certificate!), paying special attention to the “Domains” section, which should exactly match the domain name for which you are requesting the HTTPS certificate. Include the top-level domain only (example.com); the CA will usually add the www subdomain as well (i.e. www.example.com). When finished, click the “Generate” button.

    cPanel create new Certificate Signing Request form37
    cPanel “Create New Certificate Signing Request” form (View large version38)
  9. The new CSR will be generated, and you will get a confirmation screen:

    cPanel CSR confirmation39
    cPanel CSR confirmation (View large version40)
  10. If you go back to the “Certificate Signing Request” home, you will see your new CSR listed:

    cPanel Certificate Signing Request with the new CSR generated41
    cPanel “Certificate Signing Request” with the new CSR generated (View large version42)

Linux, FreeBSD Link

Make sure OpenSSL is installed. You can check by using:

openssl version

If it’s not already present, open the command line and install it for your platform:

  • Debian, Ubuntu and clones
    sudo apt-get install openssl
  • Red Hat, CentOS and clones
    sudo yum install openssl
  • FreeBSD
    make -C /usr/ports/security/openssl install clean

Then, generate a private key and a CSR with a single command:

openssl req -newkey rsa:2048 -nodes -keyout example.com.key -out example.com.csr

The private key will be generated, and you will be asked some information for the CSR:

Generating a 2048 bit RSA private key ........................+++ ................................................................+++ writing new private key to 'example.com.key' ----- You are about to be asked to enter information that will be incorporated into your certificate request. What you are about to enter is what is called a Distinguished Name or a DN. There are quite a few fields but you can leave some blank For some fields there will be a default value, If you enter ‘.', the field will be left blank.

Answer all questions correctly (they will be public in your signed certificate!), paying special attention to the “Common Name” section (for example, server FQDN or YOUR name), which should exactly match the domain name for which you are requesting the HTTPS certificate. Include the top-level domain only (example.com), the CA will usually add the www subdomain as well (i.e. www.example.com):

Country Name (2 letter code) [AU]:GB State or Province Name (full name) [Some-State]:London Locality Name (eg, city) []:London Organization Name (eg, company) [Internet Widgits Pty Ltd]:ACME Inc. Organizational Unit Name (eg, section) []:IT Common Name (e.g. server FQDN or YOUR name) []:example.com Email Address []:admin@example.com Please enter the following 'extra' attributes to be sent with your certificate request A challenge password []: An optional company name []:

Internet Information Server (IIS) on Windows Link

  1. Open “Start” → “Administrative Tools” → “Internet Information Services (IIS) Manager.” Click the server name. Double-click “Server Certificates” in the middle column:

    Open Internet Information Services (IIS) Manager. Double-click Server Certificates6943
    Open “Internet Information Services (IIS) Manager.” Double-click “Server Certificates.” (View large version7044)
  2. Click “Create Certificate Request” in the right column.

    Click Create Certificate Request in the right column45
    Click “Create Certificate Request” in the right column. (View large version46)
  3. Enter your organization’s details, paying special attention to “Common

    Name,” which should match your domain name. Click “Next.”

    Enter your organization's details47
    Enter your organization’s details. (View large version48)
  4. Leave the default “Cryptographic Service Provider.” Set the “Bit length” to 2048. Click “Next.”

    Set the Bit length to 204849
    Set the “Bit length” to 2048. (View large version50)
  5. Browse for a place to save the generated CSR and click “Finish.”

    Browse for a place to save the generated CSR and click Finish51
    Browse for a place to save the generated CSR and click ‘Finish’. (View large version52)

Step 2: Obtaining The HTTPS Certificate Link

In order to get your website certificate, first purchase a HTTPS certificate credit of a chosen type (DV, OV, EV, single site, multisite, wildcard — see above) from an HTTPS certificate provider. Once the process is complete, you will have to provide the certificate signing request, which will spend the purchased credit for your chosen domain. You’ll be asked to provide (i.e. to paste in a field or to upload) the whole CSR text, including the -----BEGIN CERTIFICATE REQUEST----- and -----END CERTIFICATE REQUEST----- lines. If you would like to have an EV or OV certificate, you’ll need to provide the legal entity for which you’re requesting the certificate — you might also be asked to provide additional documents to confirm that you represent this company. The certificate registrar will then verify your request (and any supporting documents) and issue the signed HTTPS certificate.

Getting an HTTPS Certificate Link

Your hosting provider or HTTPS registrar might have a different product and registration procedure, but the general logic should be similar.

  1. Find an HTTPS certificate vendor.
  2. Select a type of certificate (DV, OV, EV, single site, multisite, wildcard), and click “Add to cart.” Specify your preferred payment method and complete the payment.
  3. Activate the new HTTPS certificate for your domain. You can either paste or upload the certificate signing request. The system will extract the certificate details from the CSR.
  4. You will be asked to select a method of “Domain Control Validation” — whether by email, uploading an HTML file (HTTP-based) or adding a TXT record to your domain zone file (DNS-based). Follow the instructions for your DCV method of choice to validate.
  5. Wait several minutes until the validation is performed and the HTTPS certificate is issued. Download the signed HTTPS certificate.

Self-Signed Certificates Link

It is also possible to sign a certificate yourself, rather than have a certificate authority do it. This is good for testing purposes because it will be cryptographically as good as any other certificate, but it will not be trusted by browsers, which will fire a security warning — you can claim you are anything you want, but it wouldn’t be verified by a trusted third party. If the user trusts the website, they could add an exception in their browser, which would store the certificate and trust it for future visits.

The example certificate above is a self-signed one — you can use it for the domain example.com, and it will work within its validity period.

You can create a self-signed certificate on any platform that has OpenSSL available:

openssl x509 -signkey example.com.key -in example.com.csr -req -days 365 -out example.com.crt

Once the certificate is available, you will have to install it on your server. If you are using hosting and HTTPS registration services from the same provider (many hosting providers also sell HTTPS certificates), there might be an automated procedure to install and enable your newly obtained HTTPS certificate for the website. If you are hosting your website elsewhere, you will need to download the certificate and configure your server to use it.

Step 3: Installing The HTTPS Certificate For Your Website Link

cPanel Link

  1. Go back to the “SSL/TLS Manager” home. Click “Certificates (CRT)” to import the new certificate.

    cPanel SSL/TLS Manager53
    cPanel “SSL/TLS Manager” (View large version54)
  2. You will be redirected to a page to “Paste, Upload or Generate” a new “Certificate.” Paste the contents of the certificate file received from the HTTPS registrar or upload it using the “Browse” button.

    cPanel Import a new SSL certificate55
    cPanel “Import” a new HTTPS certificate (View large version56)
  3. When you paste the contents of the HTTPS certificate, it will be parsed, and plain text values will be presented to you for confirmation. Review the contents and click the “Save Certificate” button.

    cPanel Review and confirm SSL certificate57
    cPanel “Review” and confirm HTTPS certificate (View large version58)
  4. The new HTTPS certificate will be saved, and you will get a confirmation screen:

    cPanel SSL certificate confirmation59
    cPanel HTTPS certificate confirmation (View large version60)
  5. If you go back to the “Certificates (CRT)” home, you will see your new HTTPS certificate listed:

    cPanel Certificates with the new SSL certificate listed61
    cPanel “Certificates” with the new HTTPS certificate listed (View large version62)
  6. Go back to the “SSL/TLS Manager” home. Click “Install and Manage SSL for your website (HTTPS)” to assign the new certificate to your existing website.

    cPanel SSL/TLS Manager63
    cPanel “SSL/TLS Manager” (View large version64)
  7. You will be presented with the “Install an SSL Website” form. Click the “Browse Certificates” button and select your HTTPS certificate. Select your website domain from the dropdown list (if it’s not automatically selected), and verify that the fields for “Certificate” and “Private Key” are populated.

    cPanel Install an SSL Website65
    cPanel “Install an SSL Website” (View large version66)

Test to see that you can access your website at the address https://www.example.com. If all works OK, you will most probably want to permanently redirect your HTTP traffic to HTTPS. To do so, you’ll have to include several lines of code to an .htaccess file (if you’re using an Apache web server) in your website’s root folder:

RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

If the .htaccess file already exists, then paste the RewriteCond and RewriteRule lines only, right after the existing RewriteEngine On directive.

Linux, FreeBSD Link

Place the generated private key (example.com.key), Certificate Signing Request (example.com.csr) and the valid HTTPS certificate (example.com.crt) in the appropriate locations:

  • Debian, Ubuntu and clones, FreeBSD
    cp example.com.crt /etc/ssl/certs/ cp example.com.key /etc/ssl/private/ cp example.com.csr /etc/ssl/private/
  • Red Hat, CentOS and clones
    cp example.com.crt /etc/pki/tls/certs/ cp example.com.key /etc/pki/tls/private/ cp example.com.csr /etc/pki/tls/private/ restorecon -RvF /etc/pki

The files should be owned by root and protected by a permission setting of 600.

  • Debian, Ubuntu and clones
    chown -R root. /etc/ssl/certs /etc/ssl/private chmod -R 0600 /etc/ssl/certs /etc/ssl/private
  • Red Hat, CentOS and clones
    chown -R root. /etc/pki/tls/certs /etc/pki/tls/private chmod -R 0600 /etc/pki/tls/certs /etc/pki/tls/private
  • FreeBSD
    chown -R root:wheel /etc/ssl/certs /etc/ssl/private chmod -R 0600 /etc/ssl/certs /etc/ssl/private

Apache Link

To enable the HTTPS version of your website, you should:

  • make sure that mod_ssl is installed on your server,
  • upload the received HTTPS certificate (.crt) file to your server,
  • edit the Apache server configuration files.

Start by checking mod_ssl. Depending on your operating system, either one should work:

apache2 -M | grep ssl or httpd -M | grep ssl

If mod_ssl is installed, you should get either this…

ssl_module (shared) Syntax OK

… or something similar.

If it’s not present or not enabled, then try this:

  • Debian, Ubuntu and clones
    sudo a2enmod ssl sudo service apache2 restart
  • Red Hat, CentOS and clones
    sudo yum install mod_ssl sudo service httpd restart
  • FreeBSD (select the SSL option)
    make -C /usr/ports/www/apache24 config install clean apachectl restart

Edit the Apache configuration file (httpd.conf):

  • Debian, Ubuntu

    /etc/apache2/apache2.conf
  • Red Hat, CentOS

    /etc/httpd/conf/httpd.conf
  • FreeBSD

    /usr/local/etc/apache2x/httpd.conf
 Listen 80 Listen 443 <VirtualHost *:80> ServerName example.com ServerAlias www.example.com Redirect 301 / https://www.example.com/ </VirtualHost> <VirtualHost *:443> ServerName example.com Redirect 301 / https://www.example.com/ </VirtualHost> <VirtualHost *:443> ServerName www.example.com ... SSLEngine on SSLCertificateFile/path/to/signed_certificate_followed_by_intermediate_certs SSLCertificateKeyFile /path/to/private/key # Uncomment the following directive when using client certificate authentication #SSLCACertificateFile /path/to/ca_certs_for_client_authentication # HSTS (mod_headers is required) (15768000 seconds = 6 months) Header always set Strict-Transport-Security "max-age=15768000" ... </VirtualHost> # intermediate configuration, tweak to your needs SSLProtocol all -SSLv3 SSLCipherSuite ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS SSLHonorCipherOrder on SSLCompression off SSLSessionTickets off # OCSP Stapling, only in httpd 2.3.3 and later SSLUseStapling on SSLStaplingResponderTimeout 5 SSLStaplingReturnResponderErrors off SSLStaplingCache shmcb:/var/run/ocsp(128000)

This configuration was generated using the Mozilla SSL Configuration Generator116686722, mentioned earlier. Check with it for an up-to-date configuration. Make sure to edit the paths to the certificate and private key. The configuration provided was generated using the intermediate setting — read the limitations and supported browser configurations for each setting to decide which one suits you best.

Some modifications to the generated code were made (marked in bold above) to handle redirects from HTTP to HTTPS, as well as non-www to the www domain (useful for SEO purposes).

nginx Link

Edit the nginx configuration file (nginx.conf):

  • Debian, Ubuntu, Red Hat, CentOS

    /etc/nginx/nginx.conf
  • FreeBSD

    /usr/local/etc/nginx/nginx.conf
server { listen 80 default_server; listen [::]:80 default_server; # Redirect all HTTP requests to HTTPS with a 301 Moved Permanently response. return 301 https://$host$request_uri; } server { listen 443 ssl http2; listen [::]:443 ssl http2; # certs sent to the client in SERVER HELLO are concatenated in ssl_certificate ssl_certificate /path/to/signed_cert_plus_intermediates; ssl_certificate_key /path/to/private_key; ssl_session_timeout 1d; ssl_session_cache shared:SSL:50m; ssl_session_tickets off; # Diffie-Hellman parameter for DHE ciphersuites, recommended 2048 bits ssl_dhparam /path/to/dhparam.pem; # intermediate configuration. tweak to your needs. ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS'; ssl_prefer_server_ciphers on; # HSTS (ngx_http_headers_module is required) (15768000 seconds = 6 months) add_header Strict-Transport-Security max-age=15768000; # OCSP Stapling --- # fetch OCSP records from URL in ssl_certificate and cache them ssl_stapling on; ssl_stapling_verify on; ## verify chain of trust of OCSP response using Root CA and Intermediate certs ssl_trusted_certificate /path/to/root_CA_cert_plus_intermediates; resolver <IP DNS resolver>; .... }

This configuration was generated using the Mozilla SSL Configuration Generator116686722, mentioned earlier. Check with it for an up-to-date configuration. Make sure to edit the paths to the certificate and private key. The configuration provided was generated using the intermediate setting — read the limitations and supported browser configurations for each setting to decide which one suits you best.

The generator automatically generates code for handling redirects from HTTP to HTTPS, and it enables HTTP/2 out of the box!

Internet Information Server (IIS) on Windows Link

  1. Open “Start” → “Administrative Tools” → “Internet Information Services (IIS) Manager.” Click the server name. Double-click “Server Certificates” in the middle column:

    Open Internet Information Services (IIS) Manager. Double-click Server Certificates6943
    Open “Internet Information Services (IIS) Manager.” Double-click “Server Certificates.” (View large version7044)
  2. Click “Complete Certificate Request” in the right column.

    Click Complete Certificate Request in the right column71
    Click “Complete Certificate Request” in the right column. (View large version72)
  3. Select the signed certificate file (example.com.crt) that you obtained from the CA. Enter some name in the “Friendly name” field to be able to distinguish the certificate later. Place the new certificate in the “Personal” certificate store (IIS 8+). Click “OK.”

    Select the signed certificate file73
    Select the signed certificate file. (View large version74)
  4. If the process went OK, you should see the certificate listed under “Server

    Certificates.”

    You should see the certificate listed under Server Certificates75
    You should see the certificate listed under “Server Certificates.” (View large version76)
  5. Expand the server name. Under “Sites,” select the website to which you want to assign the HTTPS certificate. Click “Bindings” from the right column.

    Select the website and click Bindings77
    Select the website and click “Bindings.” (View large version78)
  6. In the “Site bindings” window, click the “Add” button.

    Click the Add button79
    Click the “Add” button. (View large version80)
  7. In the new window, select:
      • “Type”: “https”
      • “IP address”: “All Unassigned”
      • “Port”: “443”

    In the “SSL Certificate” field, select the installed HTTPS certificate by its friendly name. Click “OK.”

    Select https and select the installed SSL certificate81
    Select “HTTPS,” and select the installed HTTPS certificate. (View large version82)
  8. You should now have both HTTP and HTTPS installed for this website.

    You should now have both HTTP and HTTPS installed for this website83
    You should now have both HTTP and HTTPS installed for this website. (View large version84)

Mixed-Content Warnings Link

You might get a warning sign next to the address bar and a message such as “Connection is not secure! Parts of this page are not secure (such as images).” This does not mean that your installation is wrong; just make sure that all links to resources (images, style sheets, scripts, etc.), whether local or from remote servers, do not start with http://. All resources should be pointed to with paths relative to the root (/images/image.png, /styles/style.css, etc.) or relative to the current document (../images/image.png), or they should be full URLs beginning with https://, such as <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>.

These tips should eliminate the mixed-content warnings, and your browser should display the closed padlock without an exclamation mark.

Testing Your Server Link

After you have configured your server and have the website up and running on HTTPS, I strongly recommend checking its security configuration using the Qualys SSL Server Test85. This performs a scan of your website, including a comprehensive evaluation of its configuration, possible weaknesses and recommendations. Follow the advice there to further improve your server’s security configuration.

Renewal Link

Your certificate is valid for a set period — typically, a year. Don’t wait to renew it at the last moment — your registrar will start sending you emails as the renewal date approaches. Do issue a new certificate as soon as you get your first reminder. The procedure is pretty much the same: Create a new certificate signing request, get a new HTTPS certificate, and install it on your server. The certificate’s validity will start running at the time of signing, while the expiration will be set one year after your current certificate expires. Thus, there will be a time when both your old and new certificates will be valid, and then a full new year after the expiration of the old certificate. During the overlap, you will be able to make sure that the new certificate is working OK, before the old one expires, allowing for uninterrupted service of your website.

Revocation Link

If your server is compromised or if you think someone might have access to your private key, you should immediately revoke your current HTTPS certificate. Different registrars have different procedures, but it generally boils down to marking the compromised certificate as inactive in a special database of your registrar, and then issuing a new HTTPS certificate. Of course, revoke the current certificate as soon as possible, so that nobody can impersonate you, and get the new certificate only after you have investigated and fixed the cause of the security breach. Please ask your registrar for assistance.

Let’s Encrypt Link

To quote the Let’s Encrypt86 website:

Let’s Encrypt is a free, automated, and open certificate authority (CA), run for the public’s benefit. Let’s Encrypt is a service provided by the Internet Security Research Group (ISRG)87.

The key principles behind Let’s Encrypt are:

  • Free

    Anyone who owns a domain name can use Let’s Encrypt to obtain a trusted certificate at zero cost.
  • Automatic

    Software running on a web server can interact with Let’s Encrypt to painlessly obtain a certificate, securely configure it for use, and automatically take care of renewal.
  • Secure

    Let’s Encrypt will serve as a platform for advancing TLS security best practices, both on the CA side and by helping website operators properly secure their servers.
  • Transparent

    All certificates issued or revoked will be publicly recorded and available for anyone to inspect.
  • Open

    The automatic issuance and renewal protocol will be published as an open standard that others can adopt.
  • Cooperative

    Much like the underlying Internet protocols themselves, Let’s Encrypt is a joint effort to benefit the community, beyond the control of any one organization.

To take advantage of Let’s Encrypt, set up your hosting account or server properly. Let’s Encrypt offers short-term certificates that need to be renewed regularly in order to keep an HTTPS website operational.

How It Works Link

There are some substantial differences in the mode of operation between Let’s Encrypt and the other CAs. Following the first three points above, here are the main ones:

  • Free

    The Let’s Encrypt HTTPS certificates are completely free for the whole lifespan of your website.
  • Automatic

    The Let’s Encrypt HTTPS certificates are valid

    for 90 days
    88, unlike regular HTTPS certificates, which are valid for one year. People are encouraged to automate their certificate renewal; for example, the administrator of the server would set up a dedicated software service (or would periodically invoke software from cron) to manage the initial domain validation and subsequent renewal for all hosted domains — set-it-and-forget-it style.
  • Secure

    Let’s Encrypt HTTPS certificates are issued with no compromise on security, leading to certain incompatibilities with older and more exotic platforms. Check the compatibility page9289 to determine whether you are fine cutting off incompatible platforms.

Limitations Link

Let’s Encrypt provides only DV certificates. OV and EV are not supported, and there are currently no plans to support them. Single- and multiple-domain HTTPS certificates are offered, but no wildcard ones at the moment. See the Let’s Encrypt FAQ90 for more information.

Let’s Encrypt’s automated mode of operation enforces some usage limits91 in order to protect the infrastructure from intentional and unintentional abuse. The rate limits are high enough not to affect regular users with even hundreds of domains. However, if you manage HTTPS certificates at a very large scale, you might want to check them out.

Older and exotic clients (prior to Windows XP SP3) are not supported. Check the compatibility page9289 for details.

Using The Let’s Encrypt HTTPS Certificates In Practice Link

cPanel Link

  1. Log into your host’s cPanel
  2. Scroll down to the “Security” section, and click “Let’s Encrypt for cPanel.”

    cPanel Security section93
    cPanel “Security” section (View large version94)
  3. You are now in the “Let’s Encrypt for cPanel” section. Check both domain names (example.com and www.example.com), and click “Issue Multiple.”

    Check both domain names and click Issue Multiple95
    Check both domain names and click “Issue Multiple.” (View large version96)
  4. You will be taken to a confirmation screen. Your top-level (i.e. non-www) domain name will be selected as the primary, and your www domain name as an alias, which will be placed in the HTTPS certificate’s “Subject Alt Name” (SAN) record. Click “Issue” to continue. Please be patient and do not refresh the page, because the initial validation might take longer — about a minute or two.

    Click Issue and be patient for about a minute or two97
    Click “Issue” and be patient for about a minute or two. (View large version98)
  5. If the process completes successfully, you will see a confirmation message. Click “Go back” to see the installed HTTPS certificate.

    If the process completes successfully, you will see a confirmation message99
    If the process completes successfully, you will see a confirmation message. (View large version100)
  6. You will see your domain listed under “Your domains with Let’s Encrypt certificates.” You may check the certificate’s details and verify that the website opens with the https:// prefix in your browser.

    Your domain with Let's Encrypt certificates101
    Your domains with Let’s Encrypt certificates (View large version102)

Linux, FreeBSD, Other Link

The easiest way to set up Let’s Encrypt on your server is with Certbot103. Just select your web server and operating system and follow the instructions.

Let's Encrypt certbot104
Let’s Encrypt Certbot (View large version105)

Internet Information Server on Windows Link

There is currently no official client for IIS on Windows, but there are workarounds.

There are several projects to create a native Windows client for Let’s Encrypt:

Cloudflare Link

Cloudflare109 is a service that provides a content delivery network (CDN), website security, and protection against distributed denial of service (DDoS) attacks. It features a free HTTPS certificate with all subscription plans, including the free one — a shared DV Cloudflare Universal SSL certificate. In order to have a unique HTTPS certificate, you need to upgrade to the Business plan.

To take advantage, simply create an account, set up your website, and visit the “Crypto” section.

CertSimple Link

CertSimple110 is an EV-only HTTPS certificate vendor. It is disrupting the EV HTTPS certificate market in a way similar to what Let’s Encrypt is doing in the DV HTTPS certificate market, by providing a faster, easier process of organization validation — an otherwise slow and cumbersome routine. Here are its advantages:

  • Simplified application procedure

    No software to install or command line questions. Live validation, with most details checked before payment.
  • Fast validation time

    Three hours on average versus the industry standard 7 to 10 days.
  • Free reissues for the lifetime of the certificate

    Easily add domain names later or fix a lost private key.

You can read an excellent, in-depth review of the process on Troy Hunt’s blog111.

Multiple HTTPS Websites On A Single IP Address Link

Due to the nature of the handshake process, virtual hosts with a single IP address are a problem for TLS. Virtual hosts work by having the client include the domain name as part of the HTTP request header, but when HTTPS is used, the TLS handshake happens before the HTTP headers are sent — the secure channel should be initialized and fully functional before transmitting any plain-text HTTP, including headers. So, the server does not know which HTTPS certificate to present up front to a connecting client, so it presents the first one it finds in its configuration file, which, of course, only works correctly for the first TLS-enabled website.

There are several workarounds: to have a unique IP for each TLS-enabled domain, or to have all domains in a single certificate. Both are impractical — the IPv4 address space is now used up, and having one big HTTPS certificate means that if you want to add a single website to this server, you’ll need to reissue the whole multiple-domain certificate.

An extension to the TLS protocol, named Server Name Indication (SNI)112, was introduced to overcome this limitation. Both servers and clients should support it, and although SNI support is nowadays widely available, it is still not 100% bulletproof, if compatibility with all possible clients is a requirement.

You can read more about running SNI for Apache113, nginx114 and IIS (8+)115 in the respective documentation.

Useful Resources Link

(rb, vf, cm, al, il)

Footnotes Link

  1. 1 https://security.googleblog.com/2016/09/moving-towards-more-secure-web.html
  2. 2 https://blog.mozilla.org/security/2017/01/20/communicating-the-dangers-of-non-secure-http/
  3. 3 https://googleonlinesecurity.blogspot.bg/2014/08/https-as-ranking-signal_6.html
  4. 4 https://www.schneier.com/blog/archives/2015/06/why_we_encrypt.html
  5. 5 https://www.smashingmagazine.com/2016/02/breaking-it-down-to-the-bits-how-the-internet-dns-and-https-work/
  6. 6 https://www.smashingmagazine.com/2016/10/next-generation-server-compression-with-brotli/
  7. 7 https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/
  8. 8 https://www.smashingmagazine.com/2016/06/free-ssl-for-any-wordpress-website/
  9. 9 https://en.wikipedia.org/wiki/Tim_Berners-Lee
  10. 10 https://en.wikipedia.org/wiki/HTTP/2#Encryption
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/symmetric-encryption-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/symmetric-encryption-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/asymmetric-encryption-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/05/asymmetric-encryption-large-opt.png
  15. 15 https://en.wikipedia.org/wiki/Chain_of_trust
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/chain-of-trust-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/chain-of-trust-large-opt.png
  18. 18 #lets-encrypt
  19. 19 #cloudflare
  20. 20 https://wiki.mozilla.org/Security/Server_Side_TLS#Cipher_names_correspondence_table
  21. 21 https://en.wikipedia.org/wiki/Transport_Layer_Security#Algorithm
  22. 22 https://mozilla.github.io/server-side-tls/ssl-config-generator/
  23. 23 #lets-encrypt
  24. 24 #cloudflare
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-security-section-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-security-section-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-certificate-managment-pk-large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-certificate-managment-pk-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-private-key-managment-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-private-key-managment-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-private-key-confirmation-large-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-private-key-confirmation-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-private-key-generated-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-private-key-generated-large-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-certificate-managment-csr-large-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-certificate-managment-csr-large-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-csr-request-large-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-csr-request-large-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-csr-confirmation-large-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-csr-confirmation-large-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-csr-generated-large-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-csr-generated-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-step-01-large-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-step-01-large-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-create-csr-step-02-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-create-csr-step-02-large-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-create-csr-step-03-large-opt.png
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-create-csr-step-03-opt.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-create-csr-step-04-large-opt.png
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-create-csr-step-04-large-opt.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-create-csr-step-05-large-opt.png
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-create-csr-step-05-large-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-certificate-managment-crt-large-opt.png
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-certificate-managment-crt-large-opt.png
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-create-large-opt.png
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-create-large-opt.png
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-paste-large-opt.png
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-paste-opt.png
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-confirmation-large-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-confirmation-large-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-review-large-opt.png
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-review-large-opt.png
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-certificate-managment-https-large-opt.png
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-certificate-managment-https-large-opt.png
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-install-large-opt.png
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cpanel-ssl-install-large-opt.png
  67. 67 https://mozilla.github.io/server-side-tls/ssl-config-generator/
  68. 68 https://mozilla.github.io/server-side-tls/ssl-config-generator/
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-step-01-large-opt.png
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-step-01-large-opt.png
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-02-large-opt.png
  72. 72 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-02-large-opt.png
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-03-large-opt.png
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-03-large-opt.png
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-04-large-opt.png
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-04-large-opt.png
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-05-large-opt.png
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-05-large-opt.png
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-06-large-opt.png
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-06-large-opt.png
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-07-opt.png
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-07-large-opt.png
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-08-large-opt.png
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2017/05/iis-windows-ssl-install-certificate-step-08-large-opt.png
  85. 85 https://www.ssllabs.com/ssltest/
  86. 86 https://letsencrypt.org
  87. 87 https://letsencrypt.org/isrg/
  88. 88 https://letsencrypt.org/2015/11/09/why-90-days.html
  89. 89 https://letsencrypt.org/docs/certificate-compatibility/
  90. 90 https://letsencrypt.org/docs/faq/
  91. 91 https://letsencrypt.org/docs/rate-limits/
  92. 92 https://letsencrypt.org/docs/certificate-compatibility/
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-01-large-opt.png
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-01-large-opt.png
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-02-large-opt.png
  96. 96 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-02-large-opt.png
  97. 97 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-03-large-opt.png
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-03-large-opt.png
  99. 99 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-04-large-opt.png
  100. 100 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-04-large-opt.png
  101. 101 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-05-large-opt.png
  102. 102 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-cpanel-step-05-large-opt.png
  103. 103 https://certbot.eff.org/
  104. 104 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-certbot-large-opt.png
  105. 105 https://www.smashingmagazine.com/wp-content/uploads/2017/05/letsencrypt-certbot-large-opt.png
  106. 106 https://github.com/ebekker/ACMESharp
  107. 107 https://github.com/Lone-Coder/letsencrypt-win-simple/wiki
  108. 108 http://certify.webprofusion.com/
  109. 109 https://www.cloudflare.com/
  110. 110 https://certsimple.com
  111. 111 https://www.troyhunt.com/journey-to-an-extended-validation-certificate/
  112. 112 https://en.wikipedia.org/wiki/Server_Name_Indication
  113. 113 https://wiki.apache.org/httpd/NameBasedSSLVHostsWithSNI
  114. 114 http://nginx.org/en/docs/http/configuring_https_servers.html#sni
  115. 115 https://www.iis.net/learn/get-started/whats-new-in-iis-8/iis-80-server-name-indication-sni-ssl-scalability
  116. 116 https://mozilla.github.io/server-side-tls/ssl-config-generator/
  117. 117 https://www.ssllabs.com/ssltest/
  118. 118 https://wiki.mozilla.org/Security/Server_Side_TLS
  119. 119 https://github.com/ssllabs/research/wiki/SSL-and-TLS-Deployment-Best-Practices
  120. 120 https://www.ssllabs.com/projects/documentation/index.html
  121. 121 https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

↑ Back to topTweet itShare on Facebook