Curt Long

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 benefits¹. 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.

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

• Getting Practical With Microcopy⁵
• A Fun Approach To Creating More Successful Websites⁶
• This Interface Is A (Good) Joke!⁷
• Effective Message Framing To Motivate Users⁸

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 category⁹ for its annual website awards; the Shorty Awards have a “Best Use of Humor”¹⁰ 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 Tellerrand¹¹, 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 article¹² 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 suggest¹³ (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” commercials¹⁴ 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).

¹⁵

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 information¹⁷. 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.

¹⁸

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 found²⁰ 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’ blog²¹ 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 suggest²² 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 bomb²³ 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.

²⁴

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.

²⁶

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.

ALEX²⁸ 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 posts²⁹.

³⁰

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.

³³

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’s³⁵, 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 NPR³⁶, 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. Agens³⁷, 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.

³⁸

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

⁴²

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.

⁴⁴

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 about⁴⁷ the poor use of humor and the resulting damage to the brand.

UX designer Brandon Dorn has an excellent post on “confirmshaming.”⁴⁸ 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 Mind⁴⁹. 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.

⁵⁰

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

• “Types of Humor in Television and Magazine Advertising⁵³” (Word document), Codruta Catanescu and Gail Tom, Review of Business
• “E-Learning Practice: Adding Humor to Your Online Class⁵⁴,” Paul Stoll, The University of Arizona
• “The Humorous Message Taxonomy: A Framework for the Study of Humorous Ads⁵⁵,” Paul Surgi Speck, Current Issues and Research in Advertising
• “The Effect of Humor on Memory: Constrained by the Pun⁵⁶,” Hannah Summerfelt, Louis Lippman and Ira E. Hyman Jr., The Journal of General Psychology

(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

The average American spends almost five hours¹ 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 stake², 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

• Current Trends And Future Prospects Of The Mobile App Market³
• Reducing Abandoned Shopping Carts In E-Commerce⁴
• A Little Journey Through (Small And Big) E-Commerce Websites⁵
• Fundamental Guidelines Of E-Commerce Checkout Design⁶

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 2020⁷. 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 music⁸ 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.

⁹

¹⁰

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 Visa¹¹ 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 half¹² 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 improvement¹³. 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.

¹⁴

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 users¹⁵ 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 offering¹⁶ 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.

¹⁷

¹⁸

Similarly, Burger King and Pizza Hut customers can order food directly¹⁹ 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.

²⁰

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 owners²¹ 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.

²²

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%²³ 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 attention²⁴ to such ads. At the same time, some studies show that users feel cheated²⁵ when they click on an “advertorial” that wasn’t clearly labeled as such.

²⁶

²⁷

Search ads, the most popular native ad type (and by far the most accessible²⁸ 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 user²⁹ 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

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

• The Good, The Bad And The Great Examples Of Web Typography¹
• How To Use Shadows And Blur Effects In Modern UI Design²
• Define Your Process To Master Time, Gain Clarity, And Take Control³
• How To Maximize Your Creative Energy⁴

News Link

• Chrome 60 beta is available⁵ and brings us the Paint Timing API, CSS’ font-display property, the Web Budget API, and Credential Management API improvements.
• Firefox 54 is out⁶ — and, thanks to a new multi-process architecture, with huge performance improvements. The update also brings⁷ 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.0⁸. 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.

Concept & Design Link

• Matej Latin created an online course to teach you better web typography in ten free lessons¹².
• Scott Jensen shows how you can create great designs with depth without using drop shadows¹³. A great primer on modern design techniques.

¹⁴

Security Link

• Patrick Wardle found evidence that there’s a macOS ransomware spreading and wrote up the key facts about it¹⁷. 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

• Last but not least, an article that makes us rethink how we deal with our workloads: Madeleine Dore’s “Why you should manage your energy, not your time¹⁸.”

—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

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

• Laying Out A Flexible Future For Web Design With Flexbox Best Practices¹
• CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout²
• Building Production-Ready CSS Grid Layouts Today³
• An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements⁴

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.

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.

⁷

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 version⁹ 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() function¹⁰, and the first and last column would be set using the fr unit¹¹, 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:

¹²

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 stands¹⁴ 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 version¹⁵ 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 browsers¹⁶, 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 enhancements¹⁷, 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)¹⁸ 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 tool¹⁹. 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.
  

  ²⁰
  

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

  ²²
  

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:

²⁴

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:

²⁶

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 elements²⁸. 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.

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 compatible²⁹ 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 description³⁰ 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 rules³¹. 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 specification³². 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.

³³

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-areas³⁵ 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 hierarchy³⁶.

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.

³⁷

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.

³⁹

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; } } } 

⁴¹

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:

⁴³

This is done by changing the visual order of elements without changing the HTML markup or interfering with the content’s hierarchy. Exercise caution⁴⁵ 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 website⁴⁶, and you can explore the code, use the theme on your own WordPress website and contribute to make it better on GitHub⁴⁷.

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

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

• What Every App Developer Should Know About Android¹
• React Native For Web: A Glimpse Into The Future²
• Why You Should Consider React Native For Your Mobile App³
• Mobile Considerations in User Experience Design: “Web or Native?”⁴

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 apps⁵. 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 app⁶ was selected from Ionic’s showcase⁷ and was created by Morgan Stanley.

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 apps¹⁰. 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 app¹¹ was created by Nationwide, and, as you can tell, both apps look just like a mobile-friendly website, rather than a mobile app.

¹²

¹³

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’s¹⁴ and Ionic’s¹⁵ 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 Facebook¹⁶, TripAdvisor¹⁷, Uber¹⁸, Instagram³⁶¹⁹ 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 Robbins²⁰, Pacifica²¹ and Sworkit²² 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 Native²³ 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 app²⁴.

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 reuse²⁵ 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, debugging²⁶ 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.

²⁷

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 interpreter²⁸. 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.

²⁹

³⁰

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
  
  State³² is an object that contains many of the values that our component³³MovieList needs to function. When state properties are changed (using this.setState()), the entire component is re-rendered to reflect those changes.
• componentWillMount
  
  ComponentWillMount³⁴ 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: Facebook³⁵, Instagram³⁶¹⁹, Airbnb³⁷, Baidu, Discord, Tencent, Uber³⁸ and Twitter³⁹.

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

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

• Why Great Products Need Great Collaboration¹
• How To Encourage Better Client Participation In Responsive Design Projects²
• All You Need To Know About Customer Journey Mapping³
• The Consequences Of Working In Isolation⁴

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.

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 sprint⁷, run a customer journey mapping workshop⁸ or do some collaborative wireframing exercises. In fact, a site like Gamestorming⁹ has hundreds of activities you could run with clients to get them engaged.

¹⁰

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.

¹²

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 map¹⁴ or a prototype¹⁵. People are much more excited when they can see something tangible.

¹⁶

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.

¹⁸

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 Way²⁰” this coming October at SmashingConf Barcelona²¹. 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

HTTPS is a must for every website nowadays: Users are looking for the padlock when providing their details; Chrome¹ and Firefox² explicitly mark websites that provide forms on pages without HTTPS as being non-secure; it is an SEO ranking factor³; and it has a serious impact on privacy⁴ 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

• Breaking It Down To The Bits: How The Internet, DNS, And HTTPS Work⁵
• Next Generation Server Compression With Brotli⁶
• How To Secure Your Web App With HTTP Headers⁷
• Free SSL For Any WordPress Website⁸

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-Lee⁹ 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 TLS¹⁰.

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.

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.

¹³

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 trust¹⁵:

¹⁶

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 Encrypt²³¹⁸ and Cloudflare²⁴¹⁹ 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:

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 combinations²⁰ 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 algorithms²¹ 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 Generator^116686722, 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 Encrypt²³¹⁸ and Cloudflare²⁴¹⁹.

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.”
   

   ²⁵

3. You are now in the “SSL/TLS Manager” home. Click “Private Keys (KEY)” to create a new private key.
   

   ²⁷

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.”
   

   ²⁹

5. The new private key will be generated, and you will get a confirmation screen:
   

   ³¹

6. If you go back to the “Private Keys” home, you will see your new key listed:
   

   ³³

7. Go back to the “SSL/TLS Manager” home. Click “Certificate Signing Requests (CSR)” to create a new certificate request.
   

   ³⁵

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.
   

   ³⁷

9. The new CSR will be generated, and you will get a confirmation screen:
   

   ³⁹

10. If you go back to the “Certificate Signing Request” home, you will see your new CSR listed:
    

    ⁴¹

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:
   

   ⁶⁹⁴³

2. Click “Create Certificate Request” in the right column.
   

   ⁴⁵

3. Enter your organization’s details, paying special attention to “Common
   
   Name,” which should match your domain name. Click “Next.”
   

   ⁴⁷

4. Leave the default “Cryptographic Service Provider.” Set the “Bit length” to 2048. Click “Next.”
   

   ⁴⁹

5. Browse for a place to save the generated CSR and click “Finish.”
   

   ⁵¹

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.
   

   ⁵³

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.
   

   ⁵⁵

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.
   

   ⁵⁷

4. The new HTTPS certificate will be saved, and you will get a confirmation screen:
   

   ⁵⁹

5. If you go back to the “Certificates (CRT)” home, you will see your new HTTPS certificate listed:
   

   ⁶¹

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.
   

   ⁶³

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.
   

   ⁶⁵

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 Generator^116686722, 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 Generator^116686722, 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:
   

   ⁶⁹⁴³

2. Click “Complete Certificate Request” in the right column.
   

   ⁷¹

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.”
   

   ⁷³

4. If the process went OK, you should see the certificate listed under “Server
   
   Certificates.”
   

   ⁷⁵

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.
   

   ⁷⁷

6. In the “Site bindings” window, click the “Add” button.
   

   ⁷⁹

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.”

   ⁸¹

8. You should now have both HTTP and HTTPS installed for this website.
   

   ⁸³

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 Test⁸⁵. 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 Encrypt⁸⁶ 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)⁸⁷.

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⁸⁸, 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 page⁹²⁸⁹ 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 FAQ⁹⁰ for more information.

Let’s Encrypt’s automated mode of operation enforces some usage limits⁹¹ 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 page⁹²⁸⁹ 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.”
   

   ⁹³

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.”
   

   ⁹⁵

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.
   

   ⁹⁷

5. If the process completes successfully, you will see a confirmation message. Click “Go back” to see the installed HTTPS certificate.
   

   ⁹⁹

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.
   

   ¹⁰¹

Linux, FreeBSD, Other Link

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

¹⁰⁴

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:

• ACMESharp¹⁰⁶ (PowerShell) is the first effort to write a Windows client.
• letsencrypt-win-simple¹⁰⁷ (for the command line) seems the easiest to use.
• Certify¹⁰⁸ provides a GUI on top of ACMESharp, but is still in alpha.

Cloudflare Link

Cloudflare¹⁰⁹ 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

CertSimple¹¹⁰ 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 blog¹¹¹.

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)¹¹², 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 Apache¹¹³, nginx¹¹⁴ and IIS (8+)¹¹⁵ in the respective documentation.

Useful Resources Link

• Mozilla SSL Configuration Generator^116686722
• SSL Server Test¹¹⁷, Qualys
• “Security/Server Side TLS¹¹⁸,” Mozilla wiki
• “SSL and TLS Deployment Best Practices¹¹⁹,” SSL Labs
• Documentation¹²⁰, Qualys SSL Labs
• “Database Search and Replace Script in PHP¹²¹,” Interconnect IT
  
  For replacing all instances of HTTP with HTTPS (links, images, etc.) in a WordPress database.

(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

When did you take your last vacation? For many of us, it was probably a long time ago. However, since quite a while, I stumble across more and more stories about companies that take unusual steps vacation-wise. Companies giving their employees a day off each week in summer or going on vacation together as a team building event instead of traveling somewhere just to work.

But while there’s a new generation building their dream work environments, a lot of people still suffer from very bad working conditions. They work long hours and are discriminated or harassed by colleagues or their managers. And just this week, I heard that many company owners are desperate because “Generation Y” doesn’t want to work long hours anymore.

As with every major break in generations, I think it’s good to have people standing up for their rights, enjoying their life and their work. But we also need to talk with executives who are under pressure to match deadlines. Because only if we show them evidence that working less can be beneficial for their employees’ health and productiveness, we can convince them to let us work more freely.

Further Reading on SmashingMag: Link

• Webpack: A Detailed Introduction¹
• CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout²
• Getting Work Done Without Working More Hours³
• On Creative Leadership⁴

News Link

• Git 2.13 was released⁵ and comes with SHA-1 collision detection, more convenient path specs, and conditional configuration which is especially nice if you work for several teams or on several projects.
• The IPFS team currently works hard to provide an uncensorable version of Wikipedia via IPFS⁶, and, following news of Turkey blocking access to Wikipedia, the Turkish version is already available⁷.

Concept & Design Link

• Nick Babich gives an overview of patterns to provide a well-working mobile navigation interface¹⁰, so you can decide which one works best for your current project.

Tools & Workflow Link

• Even Stensberg announced the new Webpack CLI¹¹ which features an init and migrate command to help ease the setup of Webpack.

CSS/Sass Link

• Tyler Sticka shares a technique that uses CSS Grid to break out of a fixed width container¹². This simplifies the markup and styling of layouts that mix full width and limited width containers.
• Ana Tudor explores various ways to use new CSS techniques to contrast text against backgrounds¹³.

¹⁴

Work & Life Link

• Laïla von Alvensleben shares why the company she works at decided to do a different kind of team trip for a change¹⁷. When traveling to Sri Lanka, the Hanno team chose to not bring their laptops or plan work-related meetings or activities but focus on Yoga and surfing instead to bond as a team.

Thanks for reading this. If you like it, consider supporting my work¹⁸.

—Anselm

Footnotes Link

1. 1 https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
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/2015/12/getting-work-done-without-simply-working-hours/
4. 4 https://www.smashingmagazine.com/2013/08/on-creative-leadership/
5. 5 https://github.com/blog/2360-git-2-13-has-been-released
6. 6 https://ipfs.io/blog/24-uncensorable-wikipedia/
7. 7 https://ipfs.io/ipfs/QmT5NvUtoM5nWFfrQdVrFtvGfKFmG7AHE8P34isapyhCxX/wiki/Anasayfa.html
8. 8 https://ipfs.io/blog/24-uncensorable-wikipedia/
9. 9 https://ipfs.io/blog/24-uncensorable-wikipedia/
10. 10 https://www.smashingmagazine.com/2017/05/basic-patterns-mobile-navigation/
11. 11 https://medium.com/webpack/announcing-the-new-webpack-cli-75ce1d9b8663
12. 12 https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
13. 13 https://css-tricks.com/methods-contrasting-text-backgrounds/
14. 14 https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
15. 15 https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
16. 16 https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
17. 17 https://logbook.hanno.co/shipmates-in-srilanka/
18. 18 https://wdrl.info/donate

↑ Back to topTweet itShare on Facebook

Fuse is a toolkit for creating apps that run on both iOS and Android devices. It enables you to create apps using UX Markup, an XML-based language. But unlike the components in React Native¹ and NativeScript², Fuse is not only used to describe the UI and layout; you can also use it to add effects and animation.

Styles are described by adding attributes such as Color and Margin to the various elements. Business logic is written using JavaScript. Later on, we’ll see how all of these components are combined to build a truly native app.

In this article, you will learn what Fuse is all about. We’ll see how it works and how it compares to other platforms such as React Native and NativeScript. In the second half of the article³, you will create your first Fuse app. Specifically, you will create a weather app that shows the weather based on the user’s current location. Here’s what the output will look like:

In creating the app, you will learn how to use some of Fuse’s built-in UI components and learn how to access native device functionality such as geolocation. Towards the end of the article, you will consolidate your learning by looking at the advantages and disadvantages of using Fuse for your next mobile app project.

Further Reading on SmashingMag: Link

• Best Of Both Worlds: Mixing HTML5 And Native Code⁵
• Why You Should Consider React Native For Your Mobile App⁶
• A Glimpse Into The Future With React Native For Web⁷
• Hybrid Mobile Apps: Providing A Native Experience With Web Technologies⁸

How Does Fuse Work? Link

I’d like to describe how Fuse works using the following diagram:

⁹

On the top layer are the UX Markup and JavaScript. This is where we will spend most of our time when working with Fuse. On the middle layer are the libraries that are packaged with Fuse. This includes the JavaScript APIs that allow access to native device features such as geolocation and the camera. Lastly, on the bottom layer is the Uno compiler, which is responsible for translating the UX Markup into pure native code (Objective-C for iOS and C++ for Android). Once the app runs, all of the UI that you will see will be native UI for that particular platform. JavaScript code is executed via a virtual machine on a separate thread. This makes the UI really snappy because JavaScript won’t affect the UI’s performance.

How Does It Compare To React Native And NativeScript? Link

Before we create an app with Fuse, one of the important questions that needs to be answered is how does it stack up against existing tools that do the same job. In this section, we’ll learn about the features and tools available in Fuse compared to those of React Native and NativeScript, as well as how things are done on each platform. Specifically, we’ll compare the following areas:

• UI markup
• Layout
• JavaScript APIs
• Extendability
• JavaScript Libraries
• Animation
• Community
• Development Workflow
• Debugging

UI Markup Link

On all platforms, the UI can be built using an XML-based language. Common UI components such as text fields, switches and sliders are available on each platform.

React Native has the most of these components, although some are not unified, which means that there can be a maximum of two ways to use a particular component. For example, one can be used on both platforms, and one for a specific platform only. A few components, such as the ProgressBar, are also implemented differently on each platform, which means that it’s not totally “write once, run everywhere.”

On the other hand, NativeScript has a unified way of implementing the different UI components on each platform. For every component, there’s an equivalent native component for both Android and iOS.

Fuse has a decent number of UI components that will cover the requirements of most projects. One component that’s not built into either React Native or NativeScript is the Video component, which can be used to play local videos and even videos from the Internet. The only component that is currently missing is the date-picker, which is especially useful during user registration. Though you can always create your own using the components that are already available to Fuse.

Layout Link

In React Native, layout is done with Flexbox. In a nutshell, Flexbox enables you to specify how content should flow through the available space. For example, you can set flex to 1 and flexDirection to row in a container element in order to equally divide the available space among the children and to arrange the children vertically.

<View style={{flex: 1, flexDirection: 'row'}}> <View style={{backgroundColor: 'powderblue'}} /> <View style={{backgroundColor: 'skyblue'}} /> <View style={{backgroundColor: 'steelblue'}} /> </View>

In NativeScript, layout is achieved using layout containers, the most basic one being StackLayout, which puts all elements on top of each other, just like in the example below. In a horizontal orientation, they’re placed side by side.

<StackLayoutorientation="vertical"><Imagesrc="assets/images/dog.png"/><Imagesrc="assets/images/cat.png"/><Imagesrc="assets/images/gorilla.png"/></StackLayout>

Similarly, Fuse achieves layout by using a combination of the different elements in UX Markup, the most common ones being StackPanel, Grid and DockPanel. StackPanel works similar to StackLayout in NativeScript. Here’s an example:

<StackPanelOrientation="Vertical"><PanelHeight="100"Background="Red"/><PanelHeight="100"Background="White"/><PanelHeight="100"Background="Blue"/></StackPanel>

JavaScript APIs Link

All of the platforms cover all of the basics with JavaScript APIs. Things like camera functionality, platform information, geolocation, push notifications, HTTP requests and local storage can be done on all platforms. However, looking at the documentation for each platform, you could say that React Native has the most JavaScript APIs that bridge the gap between native and “JavaScript native” features. There’s no official name yet for platforms such as React Native, NativeScript and Fuse, so let’s just stick with “JavaScript native” for now, because they all use JavaScript to write code and they all offer native-like performance.

Extendability Link

If you need access to specific device features that don’t expose a JavaScript API yet, each platform also provides ways for developers to tap into native APIs for Android and iOS.

NativeScript gives you access to all of the native APIs of the underlying platform through JavaScript. This means you don’t have to touch any Swift, Objective-C or Java code in order to make use of the native APIs. The only requirement is that you know how the native APIs work.

React Native falls a bit short in accessing native APIs because you’ll have to know the native language in order to extend native functionality. This is done by creating a native module (an Objective-C class for iOS or a Java class for Android), exposing your desired public methods to JavaScript, then importing it into your project.

Fuse allows you to extend functionality through a feature that it refers to as “foreign code.” This allows you to call native code on each platform through the Uno language. The Uno language is the core technology of Fuse. It’s what makes Fuse work behind the scenes. Making use of native features that aren’t supported by the core Fuse library is done by creating an Uno class. Inside the Uno class, you can write the Objective-C or Java code that implements the functionality you want and have it exposed as JavaScript code, which you can then call from your project.

JavaScript Libraries Link

Both React Native and NativeScript supports the use of all npm packages that don’t have dependencies on the browser model. This means you can use a library such as lodash and moment simply by executing npm install {package-name} in your project directory and then importing it in any of your project files, just like in a normal JavaScript project.

Fuse, on the other hand, is currently lacking in this regard. Usage of existing JavaScript libraries is mostly not possible; only a short list of libraries¹⁰ are known to work. The good news is that the developers are constantly working on polyfills to improve compatibility with existing libraries.

Animation Link

Another important part of the UX is animation. In React Native, animation is implemented via its Animated API. With it, you can customize the animation a lot. For example, you can specify how long an animation takes or how fast it runs. But this comes with the downside of not being beginner-friendly. Even simple animation such as scaling a particular element requires a lot of code. The good thing is that libraries such as React Native Animatable¹¹ make it easier to work with animation. Here’s sample code for implementing a fadeIn animation using the Animatable library:

<Animatable.View animation="fadeIn">Fade me in!</Animatable.View>

NativeScript animations can be implemented in two ways: via the CSS3 animations API or the JavaScript API. Here’s an example of scaling an element with a class of el:

.el {animation-name: scale;animation-duration: 1;}@keyframes scale {from {transform: scale(1, 1);}to {transform: scale(1.5, 1.5);}}

And here’s the JavaScript equivalent:

var view = page.getViewById('box'); //must have an element with an ID of box in the markup view.animate({ scale:{ x:1.5, y:1.5}, duration:1000});

Animation in Fuse is implemented via triggers and animators. Triggers are used to detect whether something is happening in the app, whereas animators are used to respond to those events. For example, to make something bigger when pressed, you would have this:

<RectangleWidth="50"Height="50"Fill="#ccc"><WhilePressed><ScaleFactor="2"/></WhilePressed></Rectangle>

In this case, <WhilePressed> is the trigger and <Scale> is the animator.

Community Link

When it comes to community, React Native is the clear winner. Just the fact that it was created by Facebook is a big deal. Because the main technology used to create apps is React, React Native taps into that community as well. This means that a lot of projects can help you to develop apps. For example, you can reuse existing React components for your React Native project. And because many people use it, you can expect to quickly get help when you get stuck, because you can just search for an answer on Stack Overflow. React Native is also open-source, and the source code is available on GitHub¹². This makes development really fast because the maintainers can accept help from developers outside of the organization.

NativeScript, meanwhile, was created by Telerik. The project has a decent-sized community behind it. If you look at its GitHub page¹³, currently over 10,000 people have starred the project. It has been forked 700 times, so one can assume that the project is getting a lot of contributions from the community. There are also a lot of NativeScript packages on npm and questions on Stack Overflow, so expect that you won’t have to implement custom functionality from scratch or be left alone looking for answers if you get stuck.

Fuse is the lesser known among the three. It doesn’t have a big company backing it up, and Fuse is basically the company itself. Even so, the project comes complete with documentation, a forum, a Slack channel, sample apps, sample code and video tutorials, which make it very beginner-friendly. The Fuse core is not yet open-source, but the developers will be making the code open-source soon.

Development Workflow Link

With React Native and NativeScript, you need to have an actual mobile device or an emulator if you want to view changes while you’re developing the app. Both platforms also support live reloading, so every time you make a change to the source files, it automatically gets reflected in the app — although there’s a slight delay, especially if your machine isn’t that powerful.

Fuse, on the other hand, allows you to preview the app both locally and on any number of devices currently connected to your network. This means that both designers and developers can work at the same time and be able to preview changes in real time. This is helpful to the designer because they can immediately see what the app looks like with real data supplied by the developer’s code.

Debugging Link

When it comes to debugging, both React Native and NativeScript tap into Chrome’s Developer Tools. If you’re coming from a web development background, the debugging workflow should make sense to you. That being said, not all features that you’re used to when inspecting and debugging web projects are available. For example, both platforms allow you to debug JavaScript code but don’t allow you to inspect the UI elements in the app. React Native has a built-in inspector that is the closest thing to the element inspector in Chrome’s Developer Tools. NativeScript currently doesn’t have this feature.

On the other hand, Fuse uses the Debugging Protocol in Google’s V8 engine to debug JavaScript code. This allows you to do things like add breakpoints to your code and inspect what each object contains at each part in the execution of the code. The Fuse team encourages the use of the Visual Studio Code¹⁴ text editor for this, but any text editor or IDE that supports V8’s Debugging Protocol should work. If you want to inspect and visually edit the UI elements, Fuse also includes an inspector — although it allows you to adjust only a handful of properties at the moment, things like widths, heights, margins, padding and colors.

Creating A Weather App With Fuse Link

Now you’re ready to create a simple weather app with Fuse. It will get the user’s location via the GeoLocation API and will use the OpenWeatherMap API to determine the weather in the user’s location and then display it on the screen. You can find the full source code of the app in the GitHub repository¹⁵.

To start, go to the OpenWeatherMap website and sign up for an account¹⁶. Once you’re done signing up, it should provide you with an API key, which you can use to make a request to its API later on.

Next, visit the Fuse downloads page¹⁷, enter your email address, download the Fuse installer for your platform, and then install it. Once it’s installed, launch the Fuse dashboard and click on “New Project”. This will open another window that will allow you to select the path to your project and enter the project’s name.

¹⁸

Do that and then click on the “Create” button to create your project. If you’re using Sublime Text 3, you can click on the “Open in Sublime Text 3” button to open a new Sublime Text instance with the Fuse project²⁰ already loaded. Once you’re in there, the first thing you’ll want to do is install the Fuse package. This includes code completion, “Goto definition,” previewing the app from Sublime and viewing the build.

Once the Fuse plugin is installed, open the MainView.ux file. This is the main file that we will be working with in this project. By default, it includes sample code for you to play with. Feel free to remove all of the contents of the file once you’re done inspecting it.

When you create an app with Fuse, you always start with the <App> tag. This tells Fuse that you want to create a new page.

<App></App>

Fuse allows you to reuse icon fonts that are commonly used for the web. Here, we’re using Weather Icons²¹. Use the <Font> tag to specify the location of the web font file in your app directory via the File attribute. For this project, it’s in the fonts folder at the root directory of the project. We also need to give it a ux:Global attribute, which will serve as its ID when you want to use this icon font later on.

<FontFile="fonts/weather-icons/font/weathericons-regular-webfont.ttf"ux:Global="wi"/>

Next, we have the JavaScript code. We can include JavaScript code anywhere in UX Markup by using the <JavaScript> tag. Inside the tag will be the JavaScript code to be executed.

<JavaScript></JavaScript>

In the <JavaScript> tag, require two built-in Fuse libraries: Observable and GeoLocation. Observable allows you to implement data-binding in Fuse. This makes it possible to change the value of the variable via JavaScript code and have it automatically reflected in the UI of the app. Data-binding in Fuse is also two-way; so, if a change is made to a value via the UI, then the value stored in the variable will also be updated, and vice versa.

var Observable =require('FuseJS/Observable');

GeoLocation allows you to get location information from the user’s device.

var Geolocation =require('FuseJS/GeoLocation');

Create an object containing the hex code for each of the weather icons that we want to use. You can find the hex code on the GitHub page of the icon font²².

var icons = {'clear':'uF00d', 'clouds':'uF002', 'drizzle':'uF009', 'rain':'uF008', 'thunderstorm':'uF010', 'snow':'uF00a', 'mist':'uF0b6', 'fog':'uF003',  'temp': 'uF055' };

Create a function to convert Kelvin to Celsius. We need it because the OpenWeatherMap API returns temperatures in Kelvin.

functionkelvinToCelsius(kelvin){return kelvin -273.15;}

Determine whether it’s currently day or night based on the time on the user’s device. We’ll use orange as the background color for the app if it’s day, and purple if it’s nighttime.

var hour =(newDate()).getHours();var color ='#7417C0';if(hour >=5&& hour <=18){ color ='#f38844';}

Add the OpenWeather Map API key that you got earlier and create an observable variable that contains the weather data.

var api_key ='YOUR OPENWEATHERMAP API KEY';var weather_data =Observable();

Get the location information:

var loc = Geolocation.location;

This will return an object containing the latitude, longitude and accuracy of the location. However, Fuse currently has a problem with getting location information on Android. If the location setting is disabled on the device, it won’t ask you to enable it when you open the app. So, as a workaround, you’ll need to first enable location before launching the app.

Make a request to the OpenWeatherMap API using the fetch() function. This function is available in Fuse’s global scope, so you can call it from anywhere without including any additional libraries. This will work the same way as the fetch() function available in modern browsers: It also returns a promise that you need to listen to using the then() function. When the supplied callback function is executed, the raw response is passed in as an argument. You can’t really use this yet since it contains the whole response object. To extract the data that the API actually returned, you need to call the json() function in the response object. This will return another promise, so you need to use then() one more time to extract the actual data. The data is then assigned as the value of the observable that we created earlier.

var req_url ='http://api.openweathermap.org/data/2.5/weather?lat='+ loc.latitude +'&lon='+ loc.longitude +'&apikey='+ api_key;fetch(req_url).then(function(response){return response.json();}).then(function(responseObject){ weather_data.value ={ name: responseObject.name, icon: icons[responseObject.weather[0].main.toLowerCase()], weather: responseObject.weather[0], temperature:kelvinToCelsius(responseObject.main.temp)+' °C'};});

For your reference, here’s a sample response returned by the API:

{"coord":{"lon":120.98,"lat":14.6},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"stations","main":{"temp":304.15,"pressure":1009,"humidity":74,"temp_min":304.15,"temp_max":304.15},"visibility":10000,"wind":{"speed":7.2,"deg":260},"clouds":{"all":75},"dt":1473051600,"sys":{"type":1,"id":7706,"message":0.0115,"country":"PH","sunrise":1473025458,"sunset":1473069890},"id":1701668,"name":"Manila","cod":200}

Export the variables so that it becomes available in the UI.

module.exports ={ weather_data: weather_data, icons: icons, color: color };

Because this project is very small, I’ve decided to put everything in one file. But for real projects, the JavaScript code and the UX Markup should be separated. This is because the designers are the ones who normally work with UX Markup, and the developers are the ones who touch the JavaScript code. Separating the two allows the designer and the developer to work on the same page at the same time. You can separate the JavaScript code by creating a new JavaScript file in the project folder and then link it in your markup, like so:

<JavaScriptFile="js/weather.js">

Finally, add the actual UI of the app. Here, we’re using <DockPanel> to wrap all of the elements. By default, <DockPanel> has a Dock property that is set to Fill, so it’s the perfect container for filling the entire screen with content. Note that we didn’t need to set that property below because it’s implicitly added. Below, we have only assigned a Color attribute, which allows us to set the background color using the color that we exported earlier.

<DockPanelColor="{color}"></DockPanel>

Inside <DockPanel> is <StatusBarBackground>, which we’ll dock to the top of the screen. This allows us to show and customize the status bar on the user’s device. If you don’t use this component, <DockPanel> will consume the entirety of the screen, including the status bar. Simply setting this component will make the status bar visible. We don’t really want to customize it, so we’ll just leave the defaults.

<StatusBarBackgroundDock="Top"/>

Below <StatusBarBackground> is the actual content. Here, we’re wrapping everything in a <ScrollView> to enable the user to scroll vertically if the content goes over the available space. Inside is <StackPanel>, containing all of the weather data that we want to display. This includes the name of the location, the icon representing the current weather, the weather description and the temperature. You can display the variables that we exported earlier by wrapping them in braces. For objects, individual properties are accessed just like you would in JavaScript.

<ScrollView><StackPanelAlignment="Center"><TextValue="{weather_data.name }"FontSize="30"Margin="0,20,0,0"Alignment="Center"TextColor="#fff"/><TextValue="{weather_data.icon}"Alignment="Center"Font="wi"FontSize="150"TextColor="#fff"/><TextValue="{weather_data.weather.description}"FontSize="30"Alignment="Center"TextColor="#fff"/><StackPanelOrientation="Horizontal"Alignment="Center"><TextValue="{icons.temp}"Font="wi"FontSize="20"TextColor="#fff"/><TextValue="{weather_data.temperature}"Margin="10,0,0,0"FontSize="20"TextColor="#fff"/></StackPanel></StackPanel></ScrollView>

You might also notice that all attributes and their values are always capitalized; this is the standard in Fuse. Lowercase or uppercase won’t really work. Also, notice that Alignment="Center" and TextColor="#fff" are repeated a few times. This is because Fuse doesn’t have the concept of inheritance when it comes to styling properties, so setting TextColor or Alignment in a parent component won’t actually affect the nested components. This means we need to repeat it for each component. This can be mitigated by creating components and then simply reusing them without specifying the same style properties again. But this isn’t really flexible enough, especially if you need a different combination of styles for each component.

The last thing you’ll need to do is to open the {your project name}.unoproj file at the root of your project folder. This is the Uno project file. By default, it contains the following:

{"RootNamespace":"","Packages":["Fuse","FuseJS"],"Includes":["*"]}

This file specifies what packages and files to include in the app’s build. By default, it includes the Fuse and FuseJS packages and all of the files in the project directory. If you don’t want to include all of the files, edit the items in the Includes array, and use a glob pattern to target specific files:

"Includes":["*.ux","js/*.js"]

You can also use Excludes to blacklist files:

"Excludes":["node_modules/"]

Going back to the Packages, Fuse and FuseJS allow you to use Fuse-specific libraries. This includes utility functions such as getting the environment in which Fuse is currently running:

var env =require('FuseJS/Environment');if(env.mobile){debug_log("There's geo here!");}

To keep things lightweight, Fuse includes only the very basics. So, you’ll need to import things like geolocation as separate packages:

"Packages":["Fuse","FuseJS","Fuse.GeoLocation"],

Once Fuse.GeoLocation has been added, Fuse will add the necessary libraries and permissions to the app once you’ve compiled the project.

Running the App Link

You can run the app via the Fuse dashboard by selecting the project and clicking on the “Preview” button.

²³

This lets you pick whether to run on Android, iOS or locally. (Note that there is no iOS option in the screenshot because I’m running on Windows.) Select “Local” for now, and then click on “Start.” This should show you a blank screen because geolocation won’t really work in a local preview. What you can do is close the preview then update the req_url to use the following instead, which allows you to specify a place instead of the coordinates:

var req_url ='http://api.openweathermap.org/data/2.5/weather?q=london,uk&apikey='+ api_key;

You’ll also need to comment out all of the code that uses geolocation:

//var Geolocation = require('FuseJS/GeoLocation'); //var loc = Geolocation.location; //var req_url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + loc.latitude + '&lon=' + loc.longitude + '&apikey=' + api_key; 

Run the app again, and it should show you something similar to the screenshot at the beginning of the article.

If you want to run on a real device, please check “Preview and Export²⁵” in the documentation. It contains detailed information on how to deploy your app to both Android and iOS devices.

Pros And Cons Of Fuse Link

Now that you have tested the waters, it’s time to look at some of the pros and cons of using Fuse for your next mobile app project. As you have seen so far, Fuse is both developer- and designer-friendly, because of its real-time updates and multi-device preview feature, which enables developers and designers to work at the same time. Combine that with the native UX and access to device features, and you’ve got yourself a complete platform for building cross-platform apps. This section will drive home the point on why you should (or shouldn’t) use Fuse for your next mobile app project. First, let’s look at the advantages.

Developer- and Designer-Friendly Link

Fuse is developer-friendly because it uses JavaScript for the business logic. This makes it a very approachable platform for creating apps, especially for web developers and people who have some JavaScript experience. In addition, it plays nice with JavaScript transpilers such as Babel. This means that developers can use new ECMAScript 6 features to create Fuse apps.

At the same time, Fuse is designer-friendly because it allows you to import assets from tools such as Sketch, and it will automatically take care of slicing and exporting the pieces for you.

Aside from that, Fuse clearly separates the business logic and presentation code. The structure, styles and animations are all done in UX Markup. This means that business-logic code can be placed in a separate file and simply linked from the app page. The designer can then focus on designing the user experience. Being able to implement animations using UX Markup makes things simpler and easier for the designer.

Focus on Collaboration and Productivity Link

Fuse makes it very easy for designers and developers to collaborate in real time. It allows for simultaneous previewing of the app on multiple devices. You only need USB the first time you connect the device. Once the device has been connected, all you need to do is connect the device to the same Wi-Fi network as your development machine, and all your changes will be automatically reflected on all devices where the app is open. The sweetest part is that changes get pushed to all the devices almost instantly. And it works not just on code changes: Any change you make on any linked asset (such as images) will trigger the app to reload as well.

Fuse also comes with a preview feature that allows you to test changes without a real device. It’s like an emulator but a lot faster. In “design mode,” you can edit the appearance of the app using the graphical user interface. Developers will also benefit from the logging feature, which allows them to easily debug the app if there are any errors.

Very Extendable Link

If you need functionality not already provided by the Fuse libraries, Fuse also allows you to implement the functionality yourself using Uno. Uno is a language created by the Fuse team itself. It’s a sub-language of C# that compiles to C++. This is Fuse’s way of letting you access the native APIs of each platform (Android and iOS).

Native-Like UI Performance Link

UX Markup is converted to the native UI equivalent at compile time. This makes the UI really snappy and is comparable to native performance. And because animations are also written declaratively using UX Markup, animations are done natively as well. Behind the scenes, Fuse uses OpenGL ES²⁶ acceleration to make things fast.

Cons Link

No tool is perfect, and Fuse is no exception. Here are a few things to consider before picking Fuse.

• Structure and style are mixed together. This makes the code a bit difficult to edit because you have to specify styles separately for each element. This can be alleviated by creating components in which you put common styles.
• Linux is not supported, and it’s not currently on the road map. Though Linux developers who want to try out Fuse can still use a Windows Virtual Machine or Wine to install and use Fuse on their machine.
• It’s still in beta, which means it’s still rough around the edges and not all the features that you might expect from a mobile app development platform is supported. That said, Fuse is very stable and does a good job at the small set of features that it currently supports.
• It’s not open-source, though there are plans to open-source the core Fuse platform. This doesn’t mean that you can’t use Fuse for anything though. You can freely use Fuse to create production apps. If you’re interested about licensing, you can read more about it in the Fuse License Agreement.²⁷

Final Thoughts Link

We’ve learned about Fuse, a newcomer in the world of JavaScript native app development. From what I’ve seen so far, I can say that this project has a lot of potential. It really shines in multi-device support and animation. And the fact that it’s both designer- and developer-friendly makes it a great tool for developing cross-platform apps.

Further Learning Link

• Fuse documentation²⁸
  There’s no better place to learn about a new technology than the official documentation.
• “Learning Fuse²⁹,” YouTube
  
  If you learn better through videos, the Fuse team has put together this YouTube playlist to help you learn about the features that Fuse offers.
• “How Fuse Differs From React Native and NativeScript³⁰,” Remi Pedersen, Medium
  
  Learn the technical differences between Fuse and React Native and NativeScript.

(da, vf, yk, al, il)

Footnotes Link

1. 1 https://facebook.github.io/react-native/
2. 2 https://www.nativescript.org/
3. 3 https://www.smashingmagazine.com/2017/05/fuse-native-cross-platform-apps/#creating-a-weather-app-with-fuse
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/09/app-preview-opt.png
5. 5 https://www.smashingmagazine.com/2013/10/best-of-both-worlds-mixing-html5-native-code/
6. 6 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
7. 7 https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
8. 8 https://www.smashingmagazine.com/2014/10/providing-a-native-experience-with-web-technologies/
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/09/how-fuse-works-opt.png
10. 10 https://www.fusetools.com/docs/fusejs/third-party-modules
11. 11 https://github.com/oblador/react-native-animatable
12. 12 https://github.com/facebook/react-native
13. 13 https://github.com/NativeScript/NativeScript
14. 14 https://code.visualstudio.com/
15. 15 https://github.com/anchetaWern/fuse-simple-weatherapp
16. 16 https://home.openweathermap.org/users/sign_up
17. 17 https://www.fusetools.com/downloads
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/09/creating-a-project-large-preview-opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/09/creating-a-project-large-preview-opt.png
20. 20 https://packagecontrol.io/packages/Fuse
21. 21 https://erikflowers.github.io/weather-icons/
22. 22 https://erikflowers.github.io/weather-icons/
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/running-the-app-large-preview-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/09/running-the-app-large-preview-opt.png
25. 25 https://www.fusetools.com/docs/basics/preview-and-export
26. 26 https://en.wikipedia.org/wiki/OpenGL_ES
27. 27 https://res.cloudinary.com/fusetools/raw/upload/staticwebsitecontent_v2/f904f85bf03ee6f2898f99d78777d445__media/fuse_developer_preview_license_agreement.pdf
28. 28 https://www.fusetools.com/docs
29. 29 https://www.youtube.com/playlist?list=PLdlqWm6b-XALJgM3fGa4q95Yipsgb8Q1o
30. 30 https://medium.com/@fusetools/how-fuse-differs-from-react-native-and-nativescript-525344f02aaf#.iqhv9p5oo

↑ Back to topTweet itShare on Facebook