FEED Validator

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

• line 87, column 3: content:encoded should not contain relative URL references: /category/design-patterns (44 occurrences) [help]

  ]]></content:encoded>
     ^

• line 212, column 107: title should not contain HTML: < (2 occurrences) [help]

  ... t&gt; For Greater Conditional Styling]]></title>
                                               ^

• line 2258, column 0: Non-html tag: marquee [help]

              <description><![CDATA[Remember the HTML `<marquee>` element? It’ ...
  

• line 3399, column 0: description should not contain data-product-sku attribute (2 occurrences) [help]

              <description><![CDATA[It’s here, and it’s shipping! Meet our new ...
  

• line 3399, column 0: description should not contain data-component attribute (2 occurrences) [help]

              <description><![CDATA[It’s here, and it’s shipping! Meet our new ...
  

• line 3399, column 0: description should not contain data-product-path attribute (2 occurrences) [help]

              <description><![CDATA[It’s here, and it’s shipping! Meet our new ...
  

• line 3399, column 0: description should not contain data-silent attribute (2 occurrences) [help]

              <description><![CDATA[It’s here, and it’s shipping! Meet our new ...
  

• line 3399, column 721: description should not contain relative URL references: #about-the-book (3 occurrences) [help]

  ... t="true">get the book right away.</a>]]></description>
                                               ^

Source: http://rss1.smashingmagazine.com/feed/

1. <?xml version="1.0" encoding="utf-8"?>
2. <rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
3.    <channel>
4.        <title>Articles on Smashing Magazine — For Web Designers And Developers</title>
5.        <link>https://www.smashingmagazine.com/</link>
6.        <description>Recent content in Articles on Smashing Magazine — For Web Designers And Developers</description>
7.        <lastBuildDate>Wed, 08 May 2024 11:18:40 GMT</lastBuildDate>
8.        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
9.        <generator>manual</generator>
10.        <language>en</language>
11.        <image>
12.            <title>Articles on Smashing Magazine — For Web Designers And Developers</title>
13.            <url>https://www.smashingmagazine.com/images/favicon/app-icon-512x512.png</url>
14.            <link>https://www.smashingmagazine.com/</link>
15.        </image>
16.        <copyright>All rights reserved 2024, Smashing Media AG</copyright>
17.        <category>Development</category>
18.        <category>Design</category>
19.        <category>UX</category>
20.        <category>Mobile</category>
21.        <category>Front-end</category>
22.        <atom:link href="https://www.smashingmagazine.com/feed/" rel="self" type="application/rss+xml"/>
23.        <item>
24.            <title><![CDATA[How To Run UX Research Without Access To Users]]></title>
25.            <link>https://smashingmagazine.com/2024/05/how-run-ux-research-without-access-users/</link>
26.            <guid>https://smashingmagazine.com/2024/05/how-run-ux-research-without-access-users/</guid>
27.            <pubDate>Tue, 07 May 2024 12:00:00 GMT</pubDate>
28.            <description><![CDATA[How do we conduct UX research when there is no or only limited access to users? Here are some workarounds to run UX research or make a strong case for it. An upcoming part of <a href='https://smart-interface-design-patterns.com'>Smart Interface Design Patterns</a>.]]></description>
29.            <content:encoded><![CDATA[<p><strong>UX research without users isn’t research</strong>. We can shape design ideas with bias, assumptions, guesstimates, and even <a href="https://www.syntheticusers.com/">synthetic users</a>, but it’s anything but UX research. Yet some of us might find ourselves in situations where we literally <strong>don’t have access to users</strong> — because of legal constraints, high costs, or perhaps users just don’t exist yet. What do we do then?</p>
30. <p>Luckily, there are some <strong>workarounds that help us better understand pain points</strong> and issues that users might have when using our products. This holds true even when stakeholders can’t give us time or resources to run actual research, or strict NDAs or privacy regulations prevent us from speaking to users.</p>
31. <p>Let’s explore how we can make UX research work when there is no or only limited access to users — and what we can do to <strong>make a strong case for UX research</strong>.</p>
32.  
33.  
34. <p>This article is <strong>part of our ongoing series</strong> on <a href="/category/design-patterns">design patterns</a>. It’s also an upcoming part of the 10h-video library on <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a> 🍣 and the <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/">upcoming live UX training</a> as well. Use code <a href="https://smart-interface-design-patterns.com/">BIRDIE</a> to save 15% off.</p>
35.  
36. Find Colleagues Who Are The Closest To Your Customers
37. <p>When you don’t have access to users, I always try to establish a connection with <strong>colleagues who are the closest to our customers</strong>. Connect with people in the organization who speak with customers regularly, especially people in <strong>sales, customer success</strong>, support, and QA. Ultimately, you could convey your questions indirectly via them.</p>
38. <p><img src="https://files.smashing.media/articles/how-run-ux-research-without-access-users/1-leadership-circle.png" /></p>
39. <p>As Paul Adams <a href="https://www.intercom.com/blog/the-end-of-navel-gazing/">noted</a>, there has never been more <strong>overlap between designers and salespeople</strong> than today. Since many products are subscription-based, sales teams need to maintain relationships with customers over time. This requires a profound understanding of user needs — and meeting these needs well over time to keep retention and increase loyalty.</p>
40. <p><img src="https://files.smashing.media/articles/how-run-ux-research-without-access-users/2-ux-design-decisions.jpeg" /></p>
41. <p>That’s where <strong>research</strong> comes in — and that’s exactly where the overlap between UX and sales comes in. In fact, it’s not surprising to find UX researchers sitting within marketing teams under the disguise of Customer Success teams, so whenever you can <strong>befriend colleagues from sales</strong> and Customer Success teams.</p>
42. Gaining Insights Without Direct Access To Users
43. <p>If you can’t get users to come to you, perhaps you could go where they are. You could ask to silently observe and shadow them at their workplace. You could listen in to <strong>customer calls</strong> and interview call center staff to uncover pain points that users have when interacting with your product. <strong>Analytics</strong>, CRM reports, and call center logs are also a great opportunity to gain valuable insights, and Google Trends can help you find <strong>product-related search queries</strong>.</p>
44. <p><img src="https://files.smashing.media/articles/how-run-ux-research-without-access-users/3-gaining-insights-without-direct-access-users.jpeg" /></p>
45. <p>To learn more about potential issues and user frustrations, also turn to search logs, Jira backlogs, and support tickets. Study <strong>reviews, discussions, and comments</strong> for your or your competitor’s product, and take a look at TrustPilot and app stores to map key themes and user sentiment. Or get active yourself and recruit users via tools like UserTesting, Maze, or UserInterviews.</p>
46. <p>These techniques won’t always work, but they can help you get off the ground. Beware of drawing big conclusions from very little research, though. You need multiple sources to reduce the impact of assumptions and biases — at a very minimum, you need <strong>five users to discover patterns</strong>.</p>
47. <p><img src="https://files.smashing.media/articles/how-run-ux-research-without-access-users/4-ux-activities.png" /></p>
48. Making A Strong Case For UX Research
49. <p>Ironically, <a href="https://medium.com/@h_locke/what-can-you-do-when-you-have-no-access-to-users-195c18b41fc1?sk=v2%2F4925fdde-d6af-4b2c-ace9-a7c85d4e5ebc">as H Locke noted</a>, the stakeholders who can’t give you time or resources to talk to users often are the first to demand evidence to support your design work. Tap into it and explain what you need. Research doesn’t have to be time-consuming or expensive; ask for a <strong>small but steady commitment</strong> to gather evidence. Explain that you don’t need much to get started: 5 users × 30 minutes once a month might already be enough to make a positive change.</p>
50. <p>Sometimes, the reason why companies are reluctant to grant access to users is simply the <strong>lack of trust</strong>. They don’t want to disturb relationships with big clients, which are carefully maintained by the customer success team. They might feel that research is merely a technical detail that clients shouldn’t be bothered with.</p>
51. <p>Typically, if you work in B2B or enterprise, you won’t have direct access to users. This might be due to strict <strong>NDAs or privacy regulations</strong>, or perhaps the user group is very difficult to recruit (e.g., lawyers or doctors).</p>
52. <p><strong>Show that you care</strong> about that relationship. Show the value that your work brings. Explain that design without research is merely guesswork and that designing without enough research is inherently flawed.</p>
53. <p>Once your impact becomes visible, it will be so much easier to gain access to users that seemed almost impossible initially.</p>
54. Key Takeaways
55. <ul>
56. <li><strong>Ask for reasons</strong> for no access to users: there might be none.</li>
57. <li><strong>Find colleagues</strong> who are the closest to your customers.</li>
58. <li><strong>Make friends with sales</strong>, customer success, support, QA.</li>
59. <li><strong>Convey your questions indirectly</strong> via your colleagues.</li>
60. <li>If you can’t get users to come to you, go where they are.</li>
61. <li>Ask to observe or shadow customers at their workplace.</li>
62. <li>Listen in to <strong>customer calls and interview call center staff</strong>.</li>
63. <li>Gather insights from <strong>search logs, Jira backlog, and support tickets</strong>.</li>
64. <li>Map key themes and user sentiment on TrustPilot, AppStore, etc.</li>
65. <li>Recruit users via <strong>UserTesting, Maze, UserInterviews</strong>, etc.</li>
66. <li>Ask for small but steady commitments: <strong>5 users × 30 mins, 1× month</strong>.</li>
67. <li>Avoid ad-hoc research: set up <strong>regular check-ins and timelines</strong>.</li>
68. </ul>
69. Useful Resources
70. <ul>
71. <li><a href="https://www.intercom.com/blog/the-end-of-navel-gazing/">The End Of Navel Gazing</a>, by Paul Adams</li>
72. <li><a href="https://www.nngroup.com/articles/ux-research-cheat-sheet/">UX Research Cheat Sheet</a>, by Susan Farrell</li>
73. <li><a href="https://www.youtube.com/watch?v=fiFSoqIcZJ8">Overcoming Limited Access To Users in UX Research</a>, by Debbie Levitt</li>
74. <li><a href="https://medium.com/@h_locke/what-can-you-do-when-you-have-no-access-to-users-195c18b41fc1">What Can You Do When You Have No Access To Users?</a>, by H Locke</li>
75. <li><a href="https://www.pixelfridge.digital/5-ideas-for-user-research-when-you-cant-talk-to-users/">UX Research When You Can’t Talk To Users</a>, by Chris Myhill</li>
76. <li><a href="https://www.eleken.co/blog-posts/master-the-secrets-of-ux-research-without-users-tips-from-designers">How To Conduct UX Research Without Users</a>, by Mariia Kasym</li>
77. <li><a href="https://alistapart.com/article/user-research-when-you-cant-talk-to-your-users/">User Research When You Can’t Talk to Your Users</a>, by Jon Peterson</li>
78. </ul>
79. Meet Smart Interface Design Patterns
80. <p>If you are interested in similar insights around UX, take a look at <a href="https://smart-interface-design-patterns.com/"><strong>Smart Interface Design Patterns</strong></a>, our <strong>10h-video course</strong> with 100s of practical examples from real-life projects — with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Jump to a free preview</a>.</p>
81. <a href="https://smart-interface-design-patterns.com/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" /></a>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design &amp; UX.
82.  
83. <div><a href="https://smart-interface-design-patterns.com/">Jump to the video course →</a></div>
84.  
85. <p></p><p>100 design patterns &amp; real-life
86. examples.<br />10h-video course + live UX training. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Free preview</a>.</p>
87. ]]></content:encoded>
88.            <author>hello@smashingmagazine.com (Vitaly Friedman)</author>
89.            <enclosure url="http://files.smashing.media/articles/how-run-ux-research-without-access-users/how-run-ux-research-without-access-users.jpg" length="0" type="image/jpg"/>
90.        </item>
91.        <item>
92.            <title><![CDATA[How To Harness Mouse Interaction Data For Practical Machine Learning Solutions]]></title>
93.            <link>https://smashingmagazine.com/2024/05/harness-mouse-interaction-data-machine-learning/</link>
94.            <guid>https://smashingmagazine.com/2024/05/harness-mouse-interaction-data-machine-learning/</guid>
95.            <pubDate>Mon, 06 May 2024 10:00:00 GMT</pubDate>
96.            <description><![CDATA[In this article, Eduard Kuric discusses mouse interaction data, what kind of magic can be done with it, and some of the hidden pitfalls to watch out for so you get a head start incorporating them in your solutions.]]></description>
97.            <content:encoded><![CDATA[<p>Mouse data is a subcategory of interaction data, a broad family of data about users generated as the immediate result of human interaction with computers. Its siblings from the same data family include logs of key presses or page visits. Businesses commonly rely on interaction data, including the mouse, to gather insights about their target audience. Unlike data that you could obtain more explicitly, let’s say via a survey, the advantage of interaction data is that it describes <strong>the actual behavior of actual people</strong>.</p>
98. <p>Collecting interaction data is completely unobtrusive since it can be obtained even as users go about their daily lives as usual, meaning it is a <strong>quantitative data source</strong> that scales very well. Once you start collecting it continuously as part of regular operation, you do not even need to do anything, and you’ll still have fresh, up-to-date data about users at your fingertips — potentially from your entire user base, without them even needing to know about it. Having data on specific users means that you can cater to their needs more accurately.</p>
99. <p>Of course, mouse data has its limitations. It simply cannot be obtained from people using touchscreens or those who rely on assistive tech. But if anything, that should not discourage us from using mouse data. It just illustrates that we should look for alternative methods that cater to the different ways that people interact with software. Among these, the mouse just happens to be very common.</p>
100. <p>When using the mouse, the mouse pointer is the de facto conduit for the user’s intent in a visual user interface. The mouse pointer is basically an extension of your arm that lets you interact with things in a virtual space that you cannot directly touch. Because of this, mouse interactions tend to be <strong>data-intensive</strong>. Even the simple mouse action of moving the pointer to an area and clicking it can yield a significant amount of data.</p>
101. <p>Mouse data is granular, even when compared with other sources of interaction data, such as the history of visited pages. However, with machine learning, it is possible to investigate jumbles of complicated data and uncover a variety of complex behavioral patterns. It can reveal more about the user holding the mouse without needing to provide any more information explicitly than normal. </p>
102. <p><img src="https://files.smashing.media/articles/harness-mouse-interaction-data-machine-learning/1-mouse-data.png" /></p>
103. <p>For starters, let us venture into what kind of information can be obtained by processing mouse interaction data.</p>
104. What Are Mouse Dynamics?
105. <p>Mouse dynamics refer to the features that can be extracted from raw mouse data to describe the user’s operation of a mouse. Mouse data by itself corresponds with the simple mechanics of mouse controls. It consists of <strong>mouse events</strong>: the X and Y coordinates of the cursor on the screen, mouse button presses, and scrolling, each dated with a timestamp. Despite the innate simplicity of the mouse events themselves, the mouse dynamics using them as building blocks can capture user’s behavior from a diverse and emergently complex variety of perspectives. </p>
106. <p>If you are concerned about user privacy, as well you should be, mouse dynamics are also your friend. For the calculation of mouse dynamics to work, raw mouse data does not need to inherently contain any details about the actual meaning of the interaction. Without the context of what the user saw as they moved their pointer around and clicked, the data is quite safe and harmless. </p>
107. <p>Some examples of mouse dynamics include measuring the velocity and the acceleration at which the mouse cursor is moving or describing how direct or jittery the mouse trajectories are. Another example is whether the user presses and lets go of the primary mouse button quickly or whether there is a longer pause before they release their press. Four categories of over twenty base measures can be identified: temporal, spatial, spatial-temporal, and performance. Features do not need to be just metrics either, with other approaches using a time series of mouse events. </p>
108. <p><strong>Temporal mouse dynamics:</strong></p>
109. <ul>
110. <li><strong>Movement duration</strong>: The time between two clicks;</li>
111. <li><strong>Response time</strong>: The time it takes to click something in response to a stimulus (e.g., from the moment when a page is displayed);</li>
112. <li><strong>Initiation time</strong>: The time it takes from an initial stimulus for the cursor to start moving;</li>
113. <li><strong>Pause time</strong>: The time measuring the cursor’s period of idleness.</li>
114. </ul>
115. <p><strong>Spatial mouse dynamics:</strong></p>
116. <ul>
117. <li><strong>Distance</strong>: Length of the path traversed on the screen;</li>
118. <li><strong>Straightness</strong>: The ratio between the traversed path and the optimal direct path;</li>
119. <li><strong>Path deviation</strong>: Perpendicular distance of the traversed path from the optimal path;</li>
120. <li><strong>Path crossing</strong>: Counted instances of the traversed and optimal path intersecting;</li>
121. <li><strong>Jitter</strong>: The ratio of the traversed path length to its smoothed version;</li>
122. <li><strong>Angle</strong>: The direction of movement;</li>
123. <li><strong>Flips</strong>: Counted instances of change in direction;</li>
124. <li><strong>Curvature</strong>: Change in angle over distance;</li>
125. <li><strong>Inflection points</strong>: Counted instances of change in curvature.</li>
126. </ul>
127. <p><strong>Spatial-temporal mouse dynamics:</strong></p>
128. <ul>
129. <li><strong>Velocity</strong>: Change of distance over time;</li>
130. <li><strong>Acceleration</strong>: Change of velocity over time;</li>
131. <li><strong>Jerk</strong>: Change of acceleration over time;</li>
132. <li><strong>Snap</strong>: Change in jerk over time;</li>
133. <li><strong>Angular velocity</strong>: Change in angle over time.</li>
134. </ul>
135. <p><strong>Performance mouse dynamics:</strong></p>
136. <ul>
137. <li><strong>Clicks</strong>: The number of mouse button events pressing down or up;</li>
138. <li><strong>Hold time</strong>: Time between mouse down and up events;</li>
139. <li><strong>Click error</strong>: Length of the distance between the clicked point and the correct user task solution;</li>
140. <li><strong>Time to click</strong>: Time between the hover event on the clicked point and the click event;</li>
141. <li><strong>Scroll</strong>: Distance scrolled on the screen.</li>
142. </ul>
143. <p><strong>Note</strong>: <em>For detailed coverage of varied mouse dynamics and their extraction, see the paper “<a href="https://www.sciencedirect.com/science/article/pii/S0920548924000187#b9">Is mouse dynamics information credible for user behavior research? An empirical investigation</a>.”</em></p>
144. <p>The spatial angular measures cited above are a good example of how the calculation of specific mouse dynamics can work. The direction angle of the movements between points A and B is the angle between the vector AB and the horizontal X axis. Then, the curvature angle in a sequence of points ABC is the angle between vectors AB and BC. Curvature distance can be defined as the ratio of the distance between points A and C and the perpendicular distance between point B and line AC. (Definitions sourced from the paper “<a href="https://dl.acm.org/doi/abs/10.1145/2046707.2046725?casa_token=YPaxeVaA25oAAAAA:AGHKS8xupW2QuETXgxmocpgpFL0YmHoelsTwl1FSOH4Qqu1E3WUjHG6hixZUwhW2M0Ntq_uo_lCCNSk">An efficient user verification system via mouse movements</a>.”)</p>
145. <p><img src="https://files.smashing.media/articles/harness-mouse-interaction-data-machine-learning/2-mouse-dynamics.png" /></p>
146. <p>Even individual features (e.g., mouse velocity by itself) can be delved into deeper. For example, on pages with a lot of scrolling, horizontal mouse velocity along the X-axis may be more indicative of something capturing the user’s attention than velocity calculated from direct point-to-point (Euclidean) distance in the screen's 2D space. The maximum velocity may be a good indicator of anomalies, such as user frustration, while the mean or median may tell you more about the user as a person. </p>
147. From Data To Tangible Value
148. <p>The introduction of mouse dynamics above, of course, is an oversimplification for illustrative purposes. Just by looking at the physical and geometrical measurements of users’ mouse trajectories, you cannot yet tell much about the user. That is the job of the machine learning algorithm. Even features that may seem intuitively useful to you as a human (see examples cited at the end of the previous section) can prove to be of low or zero value for a machine-learning algorithm.</p>
149. <p>Meanwhile, a deceptively generic or simplistic feature may turn out unexpectedly quite useful. This is why it is important to couple broad feature generation with a good <a href="https://machinelearningmastery.com/an-introduction-to-feature-selection/">feature selection</a> method, narrowing the dimensionality of the model down to the mouse dynamics that help you achieve good accuracy without <a href="https://machinelearningmastery.com/introduction-to-regularization-to-reduce-overfitting-and-improve-generalization-error/">overfitting</a>. Some feature selection techniques are embedded directly into machine learning methods (e.g., LASSO, decision trees) while others can be used as a preliminary filter (e.g., ranking features by significance assessed via a statistical test).</p>
150. <p>As we can see, there is a sequential process to transforming mouse data into mouse dynamics, into a well-tuned machine learning model to field its predictions, and into an applicable solution that generates value for you and your organization. This can be visualized as the pipeline below.</p>
151. <p><img src="https://files.smashing.media/articles/harness-mouse-interaction-data-machine-learning/3-process-mouse-dynamics.png" /></p>
152. Machine Learning Applications Of Mouse Dynamics
153. <p>To set the stage, we must realize that companies aren’t really known for letting go of their competitive advantage by divulging the ins and outs of what they do with the data available to them. This is especially true when it comes to tech giants with access to potentially some of the most interesting datasets on the planet (including mouse interaction data), such as Google, Amazon, Apple, Meta, or Microsoft. Still, <a href="https://www.businessinsider.com/websites-apps-track-mouse-movements-screen-swipes-security-behavioral-biometrics-2019-7">recording mouse data is known to be a common practice</a>. </p>
154. <p>With a bit of grit, you can find some striking examples of the use of mouse dynamics, not to mention a surprising versatility in techniques. For instance, have you ever visited an e-commerce site just to see it recommend something specific to you, such as a gendered line of cosmetics — all the while, you never submitted any information about your sex or gender anywhere explicitly?</p>
155. <p>Mouse data transcends its obvious applications, as is replaying the user’s session and highlighting which visual elements people interact with. A surprising amount of internal and external factors that shape our behavior are reflected in data as subtle indicators and can thus be predicted.</p>
156. <p>Let’s take a look at some further applications. Starting some simple categorization of users.</p>
157. <h3>Example 1: Biological Sex Prediction</h3>
158. <p>For businesses, knowing users well allows them to provide <strong>accurate recommendations</strong> and <strong>personalization</strong> in all sorts of ways, opening the gates for higher customer satisfaction, retention, and average order value. By itself, the prediction of user characteristics, such as gender, isn’t anything new. The reason for basing it on mouse dynamics, however, is that <strong>mouse data is generated virtually by the truckload</strong>. With that, you will have enough data to start making accurate predictions very early.</p>
159. <p>If you waited for higher-level interactions, such as which products the user visited or what they typed into the search bar, by the time you’d have enough data, the user may have already placed an order or, even worse, left unsatisfied.</p>
160. <p><img src="https://files.smashing.media/articles/harness-mouse-interaction-data-machine-learning/4-prediction-sex.png" /></p>
161. <p>The selection of the <strong>machine learning algorithm matters</strong> for a problem. In one <a href="https://www.sciencedirect.com/science/article/pii/S0920548924000187#b9">published scientific paper</a>, six various models have been compared for the prediction of biological gender using mouse dynamics. The dataset for the development and evaluation of the models provides mouse dynamics from participants moving the cursor in a broad range of trajectory lengths and directions. Among the evaluated models — Logistic regression, Support vector machine, Random forest, XGBoost, CatBoost, and LightGBM — CatBoost achieved the best F1 score. </p>
162. <p>Putting people into boxes is far from everything that can be done with mouse dynamics, though. Let’s take a look at a potentially more exciting use case — trying to predict the future.</p>
163. <h3>Example 2: Purchase Prediction</h3>
164. <p>Another e-commerce application predicts whether the user has the intent to make a purchase or even whether they are likely to become a <a href="https://www.tandfonline.com/doi/full/10.1080/10447318.2023.2175973">repeat customer</a>. Utilizing such predictions, businesses can adapt personalized sales and marketing tactics to be more effective and efficient, for example, by catering more to likely purchasers to increase their value — or the opposite, which is investigating unlikely purchasers to find ways to turn them into likely ones.</p>
165. <p><img src="https://files.smashing.media/articles/harness-mouse-interaction-data-machine-learning/5-prediction-purchase.png" /></p>
166. <p>Interestingly, a <a href="https://www.tandfonline.com/doi/full/10.1080/10447318.2023.2175973">paper dedicated to the prediction of repeat customership</a> reports that when a gradient boosting model is validated on data obtained from a completely different online store than where it was trained and tuned, it still achieves respectable performance in the prediction of repeat purchases with a combination of mouse dynamics and other interaction and non-interaction features.</p>
167. <p>It is plausible that though machine-learning applications tend to be highly domain-specific, some models could be used as a starting seed, carried over between domains, especially while still waiting for user data to materialize.</p>
168. <h3>Additional Examples</h3>
169. <p>Applications of mouse dynamics are a lot more far-reaching than just the domain of e-commerce. To give you some ideas, here are a couple of other variables that have been predicted with mouse dynamics:</p>
170. <ul>
171. <li>The truthfulness of answers given in a questionnaire.<br />Source: <a href="https://link.springer.com/article/10.1007/s00426-020-01473-3">Detecting faking-good response style in personality questionnaires with four choice alternatives</a></li>
172. <li>Whether the user is experiencing confusion with the interface of a web application.<br />Source: <a href="https://dl.acm.org/doi/10.1145/3314183.3324978">YesElf: Personalized Onboarding for Web Applications</a></li>
173. <li>The arm dexterity of cerebral palsy patients.<br />Source: <a href="https://www.sciencedirect.com/science/article/abs/pii/S1071581913001985?via%3Dihub">Using cursor measures to investigate the effects of impairment severity on cursor control for youths with cerebral palsy</a></li>
174. <li>Personal identities for biometric authentication.<br />Source: <a href="https://ieeexplore.ieee.org/document/8768407">User Authentication Based on Mouse Dynamics Using Deep Neural Networks: A Comprehensive Study</a></li>
175. <li>Distinguishing bots from real users.<br />Source: <a href="https://link.springer.com/chapter/10.1007/978-3-030-04834-1_21">Bot or Human? A Behavior-Based Online Bot Detection System</a></li>
176. <li>Personality traits to psychologically profile users.<br />Source: <a href="https://dl.acm.org/doi/10.1145/1473018.1473066">Measuring personality from keyboard and mouse use</a></li>
177. </ul>
178. The Mouse-Shaped Caveat
179. <p>When you think about mouse dynamics in-depth, some questions will invariably start to emerge. The user isn’t the only variable that could determine what mouse data looks like. What about the mouse itself?</p>
180. <p>Many brands and models are available for purchase to people worldwide. Their technical specifications deviate in attributes such as resolution (measured in DPI or, <a href="https://www.prosettings.com/cpi-and-ecpi/">more accurately</a>, CPI), weight, polling rate, and tracking speed. Some mouse devices have multiple profile settings that can be swapped between at will. For instance, the common CPI of an office mouse is around 800-1,600, while a gaming mouse can go to extremes, from 100 to 42,000. To complicate things further, the operating system has its own mouse settings, such as sensitivity and acceleration. Even the surface beneath the mouse can differ in its friction and optical properties. </p>
181. <p>Can we be sure that mouse data is reliable, given that basically everyone potentially works under different mouse conditions?</p>
182. <p>For the sake of argument, let’s say that as a part of a web app you’re developing, you implement biometric authentication with mouse dynamics as a security feature. You sell it by telling customers that this form of auth is capable of catching attackers who try to meddle in a tab that somebody in the customer’s organization left open on an unlocked computer. Recognizing the intruder, the app can sign the user out of the account and trigger a warning sent to the company. Kicking out the real authorized user and sounding the alarm just because somebody bought a new mouse would not be a good look. Recalibration to the new mouse would also produce friction. Some people like to change their mouse sensitivity or use different computers quite often, so frequent calibration could potentially present a critical flaw.</p>
183. <p>We found that up until now, there was barely anything written about whether or how mouse configuration affects mouse dynamics. By mouse configuration, we refer to all properties of the environment that could impact mouse behavior, including both hardware and software.</p>
184. <p>From the authors of papers and articles about mouse dynamics, there is barely a mention of mouse devices and settings involved in development and testing. This could be seen as concerning. Though hypothetically, there might not be an actual reason for concern, that is exactly the problem. There was just not even enough information to make a judgment on whether mouse configuration matters or not. This question is what drove the study conducted by <a href="https://www.uxtweak.com/">UXtweak Research</a> (as covered in the peer-reviewed <a href="https://www.sciencedirect.com/science/article/pii/S0920548924000187?via%3Dihub#b23">paper in Computer Standards &amp; Interfaces</a>). </p>
185. <p>The quick answer? <strong>Mouse configuration does detrimentally affect mouse dynamics.</strong> How?</p>
186. <ol>
187. <li>It may cause the majority of mouse dynamics values to change in a statistically significant way between different mouse configurations.</li>
188. <li>It may lower the prediction performance of a machine learning model if it was trained on a different set of mouse configurations than it was tested on.</li>
189. </ol>
190. <p>It is not automatically guaranteed that prediction based on mouse dynamics will work equally well for people on different devices. Even the same person making the exact same mouse movements does not necessarily produce the same mouse dynamics if you give them a different mouse or change their settings.</p>
191. <p>We cannot say for certain how big an impact mouse configuration can have in a specific instance. For the problem that you are trying to solve (specific domain, machine learning model, audience), the impact could be big, or it could be negligible. But to be sure, it should definitely receive attention. After all, even a deceptively small percentage of improvement in prediction performance can translate to thousands of satisfied users.</p>
192. Tackling Mouse Device Variability
193. <p>Knowledge is half the battle, and so it is also with the realization that mouse configuration is not something that can be just ignored when working with mouse dynamics. You can <strong>perform tests</strong> to evaluate the size of the effect that mouse configuration has on your model’s performance. If, in some configurations, the number of false positives and false negatives rises above levels that you are willing to tolerate, you can start looking for potential solutions by tweaking your prediction model.</p>
194. <p>Because of the potential variability in real-world conditions, differences between mouse configurations can be seen as a concern. Of course, if you can rely on controlled conditions (such as in apps only accessible via standardized kiosks or company-issued computers and mouse devices where all system mouse settings are locked), you can avoid the concern altogether. Given that the training dataset uses the same mouse configuration as the configuration used in production, that is. Otherwise, that may be something new for you to optimize.</p>
195. <p>Some predicted variables can be observed repeatedly from the same user (e.g., emotional state or intent to make a purchase). In the case of these variables, to mitigate the problem of different users utilizing different mouse configurations, it would be possible to build personalized models trained and tuned on the data from the individual user and the mouse configurations they normally use. You also could try to normalize mouse dynamics by adjusting them to the specific user’s “normal” mouse behavior. The challenge is how to accurately establish normality. Note that this still doesn’t address situations when the user changes their mouse or settings.</p>
196. Where To Take It From Here
197. <p>So, we arrive at the point where we discuss the next steps for anyone who can’t wait to apply mouse dynamics to machine learning purposes of their own. For web-based solutions, you can start by looking at <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent">MouseEvents</a> in JavaScript, which is how you’ll obtain the elementary mouse data necessary.</p>
198. <p>Mouse events will serve as the base for calculating mouse dynamics and the features in your model. Pick any that you think could be relevant to the problem you are trying to solve (see our list above, but don’t be afraid to design your own features). Don’t forget that you can also <strong>combine mouse dynamics with domain and application-specific features</strong>.</p>
199. <p>Problem awareness is key to designing the right solutions. Is your prediction problem within-subject or between-subject? A classification or a regression? Should you use the same model for your whole audience, or could it be more effective to tailor separate models to the specifics of different user segments?</p>
200. <p>For example, the mouse behavior of freshly registered users may differ from that of regular users, so you may want to divide them up. From there, you can consider the suitable machine/deep learning algorithm. For binary classification, a Support vector machine, Logistic regression, or a Random Forest could do the job. To delve into more complex patterns, you may wish to reach for a Neural network.</p>
201. <p>Of course, the best way to uncover which machine/deep learning algorithm works best for your problem is to experiment. Most importantly, don’t give up if you don’t succeed at first. You may need to go back to the drawing board a few times to reconsider your feature engineering, expand your dataset, validate your data, or tune the hyperparameters.</p>
202. Conclusion
203. <p>With the ongoing trend of more and more online traffic coming from mobile devices, some futurist voices in tech might have you believe that <a href="https://www.cnet.com/culture/r-i-p-the-computer-mouse-1972-2010/">“the computer mouse is dead”</a>. Nevertheless, those voices have been greatly exaggerated. One look at statistics reveals that while mobile devices are excessively popular, the desktop computer and the computer mouse are <a href="https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet">not going anywhere anytime soon</a>. </p>
204. <p>Classifying users as either mobile or desktop is a false dichotomy. Some people prefer the desktop computer for tasks that call for exact controls while interacting with complex information. Working, trading, shopping, or managing finances — all, coincidentally, are tasks with a good amount of importance in people’s lives.</p>
205. <p>To wrap things up, <strong>mouse data can be a powerful information source</strong> for improving digital products and services and getting yourself a headway against the competition. Advantageously, <strong>data for mouse dynamics does not need to involve anything sensitive or in breach of the user’s privacy</strong>. Even without identifying the person, machine learning with mouse dynamics can shine a light on the user, letting you serve them more proper personalization and recommendations, even when other data is sparse. Other uses include biometrics and analytics. </p>
206. <p>Do not underestimate the impact of differences in mouse devices and settings, and you may arrive at useful and innovative mouse-dynamics-driven solutions to help you stand out.</p>
207. ]]></content:encoded>
208.            <author>hello@smashingmagazine.com (Eduard Kuric)</author>
209.            <enclosure url="http://files.smashing.media/articles/harness-mouse-interaction-data-machine-learning/harness-mouse-interaction-data-machine-learning.jpg" length="0" type="image/jpg"/>
210.        </item>
211.        <item>
212.            <title><![CDATA[Combining CSS :has() And HTML &lt;select&gt; For Greater Conditional Styling]]></title>
213.            <link>https://smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/</link>
214.            <guid>https://smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/</guid>
215.            <pubDate>Thu, 02 May 2024 10:00:00 GMT</pubDate>
216.            <description><![CDATA[Amit Sheen demonstrates using `:has()` to apply styles conditionally when a certain `<option>` in a `<select>` element is chosen by the user and how we gain even more conditional styling capabilities when chaining `:has()` with other pseudo-classes, such as `:not()` &mdash; no JavaScript necessary.]]></description>
217.            <content:encoded><![CDATA[<p>Even though the CSS <code>:has()</code> pseudo-class is relatively new, we already know a lot about it, thanks to many, many articles and tutorials demonstrating its powerful ability to conditionally select elements based on their contents. We’ve all seen the card component and header examples, but the conditional nature of <code>:has()</code> actually makes it adept at working with form controls, which are pretty conditional in nature as well.</p>
218. <p>Let’s look specifically at the <code>&lt;select&gt;</code> element. With it, we can make a choice from a series of <code>&lt;option&gt;</code>s. Combined with <code>:has()</code>, we are capable of manipulating styles based on the selected <code>&lt;option&gt;</code>.</p>
219. <pre><code>&lt;select&gt;
220.  <option value="1" selected>Option 1</option>
221.  <option value="2">Option 2</option>
222.  <option value="3">Option 3</option>
223.  <option value="4">Option 4</option>
224.  <option value="5">Option 5</option>
225. </select>
226. </code></pre>
227.  
228. <p>This is your standard <code>&lt;select&gt;</code> usage, producing a dropdown menu that contains options for user selection. And while it’s not mandatory, I’ve added the <code>selected</code> attribute to the first <code>&lt;option&gt;</code> to set it as the initial selected option.</p>
229. <p>Applying styles based on a user’s selection is not a new thing. We’ve had the <a href="https://css-tricks.com/the-checkbox-hack/">Checkbox Hack</a> in our pockets for years, using the <code>:checked</code> CSS pseudo-class to style the element based on the selected option. In this next example, I’m changing the element’s <code>color</code> and the <code>background-color</code> properties based on the selected <code>&lt;option&gt;</code>.</p>
230. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/oNOwded">demo 01 - Using the :has selector on a dropdown menu</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.  </p>
231. <p>But that’s limited to styling the current element, right? If a particular <code>&lt;option&gt;</code> is <code>:checked</code>, then we style its style. We can write a more complex selector and style child elements based on whether an <code>&lt;option&gt;</code> is selected up the chain, but that’s a one-way road in that we are unable to style up parent elements even further up the chain.</p>
232. <p>That’s where <code>:has()</code> comes in because styling up the chain is exactly what it is designed to do; in fact, it’s often called <a href="https://www.smashingmagazine.com/2021/06/has-native-css-parent-selector/">the “parent selector”</a> for this reason (although <a href="https://developer.chrome.com/blog/has-m105/">“family selector”</a> may be a better descriptor).</p>
233. <p>For example, if we want to change the <code>background-color</code> of the <code>&lt;select&gt;</code> element according to the value of the selected <code>&lt;option&gt;</code>, <strong>we select the element if it has a specific <code>[value]</code> that is <code>:checked</code>.</strong></p>
234. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/eYoRopZ">demo 02 - Using the :has selector on a dropdown menu</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p>
235. <p>Just how practical is this? One way I’m using it is to style mandatory <code>&lt;select&gt;</code> elements without a valid selected <code>&lt;option&gt;</code>. So, instead of applying styles if the element <code>:has()</code> a <code>:checked</code> state, I am applying styles if the <code>required</code> element does <code>:not(:has(:checked))</code>.</p>
236. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/jORLoVM">demo 02.1 - Using the :has selector on a dropdown menu</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p>
237. <p>But why stop there? If we can use <code>:has()</code> to style the <code>&lt;select&gt;</code> element as the parent of an <code>&lt;option&gt;</code>, then we can also use it to style the parent of the <code>&lt;select&gt;</code>, as well as its parent, in addition to its parent, and even its parent... all the way up the chain to the <code>:root</code> element. We could even bring <code>:has()</code> all the way up the chain and sniff out whether any <code>&lt;select&gt;</code> child of the document <code>:root</code> <code>:has()</code> a particular <code>&lt;option&gt;</code> that is <code>:checked</code>:</p>
238. <pre><code>:root:has(select [value="foo"]:checked) {
239.  // Styles applied if <option value="foo"> is <select>-ed
240. }
241. </code></pre>
242.  
243. <p>This is useful for <strong>setting a custom property value dynamically</strong> or <strong>applying a set of styles for the whole page</strong>. Let’s make a little style picker that illustrates the idea of setting styles on an entire page.</p>
244. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/yLrXroO">demo 03 - Using the :has selector on a dropdown menu</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p>
245. <p>Or perhaps a theme picker:</p>
246. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/OJGgjaJ">demo 04 - Using the :has selector on a dropdown menu</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p>
247. <p>How that last example works is that I added a class to each <code>&lt;select&gt;</code> element and referenced that class inside the <code>:has()</code> selector in order to prevent unwanted selections in the event that there are multiple <code>&lt;select&gt;</code> elements on the page.</p>
248. <p>And, of course, we don’t have to go all the way up to the <code>:root</code> element. If we’re working with a specific component, we can scope <code>:has()</code> to that component like in the following demo of a star rating component.</p>
249. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/rNbwvqz">demo 05 - Using the :has selector on a dropdown menu</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p>
250. <blockquote>Watch a short video tutorial I made on using <a href="https://youtu.be/33Q3CnBm0UU">CSS to create 3D animated stars</a>.</blockquote>
251.  
252.  
253.  
254. Conclusion
255. <p>We’d be doing <code>:has()</code> a great disservice if we only saw it as a “parent selector” rather than <strong>the great conditional operator</strong> it is for applying styles all the way up the chain. Seen this way, it’s more of a modern upgrade to the Checkbox Hack in that it sends styles up like we were never able to do before.</p>
256. <p>There are endless examples of using <code>:has()</code> to create style variations of a component according to its contents. We’ve even seen it used to accomplish the once-complicated <a href="https://css-tricks.com/creating-animated-clickable-cards-with-the-has-relational-pseudo-class/">linked card pattern</a>. But now you have an example for using it to create dropdown menus that conditionally apply styles (or don’t) to a page or component based the currently selected option — depending on how far up the chain we scope it.</p>
257. <p>I’ve used this technique a few different ways — e.g., as form validation, a style picker, and star ratings — but I’m sure there are plenty of other ways you can imagine how to use it in your own work. And if you are using <code>:has()</code> on a <code>&lt;select&gt;</code> element for something different or interesting, let me know because I’d love to see it!</p>
258. <h4>Further Reading On SmashingMag</h4>
259. <ul>
260. <li>“<a href="https://www.smashingmagazine.com/2023/01/level-up-css-skills-has-selector/">Level Up Your CSS Skills With The :has() Selector</a>,” Stephanie Eckles</li>
261. <li>“<a href="https://www.smashingmagazine.com/2021/06/has-native-css-parent-selector/">Meet :has, A Native CSS Parent Selector (And More)</a>,” Adrian Bece</li>
262. <li>“<a href="https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/">Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript</a>,” Henry Bley-Vroman</li>
263. <li>“<a href="https://www.smashingmagazine.com/2024/01/css-border-image-property/">The Complex But Awesome CSS border-image Property</a>,” Temani Afif</li>
264. </ul>
265. ]]></content:encoded>
266.            <author>hello@smashingmagazine.com (Amit Sheen)</author>
267.            <enclosure url="http://files.smashing.media/articles/combining-css-has-html-select-conditional-styling/combining-css-has-html-select-conditional-styling.jpg" length="0" type="image/jpg"/>
268.        </item>
269.        <item>
270.            <title><![CDATA[Longing For May (2024 Wallpapers Edition)]]></title>
271.            <link>https://smashingmagazine.com/2024/04/desktop-wallpaper-calendars-may-2024/</link>
272.            <guid>https://smashingmagazine.com/2024/04/desktop-wallpaper-calendars-may-2024/</guid>
273.            <pubDate>Tue, 30 Apr 2024 13:00:00 GMT</pubDate>
274.            <description><![CDATA[May is almost here, so what better occasion could there be for some fresh and inspiring desktop wallpapers? Created with love by artists and designers from across the globe, the wallpapers in this post come in versions with and without a calendar. Enjoy!]]></description>
275.            <content:encoded><![CDATA[<p>Inspiration lies everywhere, and as a matter of fact, we discovered one of the best ways to <strong>spark new ideas</strong>: desktop wallpapers. Since more than 13 years already, we challenge you, our dear readers, to put your creative skills to the test and create wallpaper calendars for our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers posts</a>. No matter if you’re into illustration, lettering, or photography, the wallpapers series is the perfect opportunity to get your ideas flowing and <strong>create a small artwork</strong> to share with people all around the world. Of course, it wasn’t any different this month.</p>
276.  
277. <p>In this post, you’ll find desktop wallpapers created by artists and designers who took on the creativity challenge. They come in versions with and without a calendar for <strong>May 2024</strong> and can be downloaded for free. As a little bonus goodie, we also compiled a selection of favorites from our wallpapers archives at the end of the post. Maybe you’ll spot one of <em>your</em> almost-forgotten favorites from the past in here, too? A big thank-you to everyone who shared their designs with us this month! Happy May!</p>
278.  
279. <ul>
280. <li>You can <strong>click on every image to see a larger preview</strong>,</li>
281. <li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li>
282. <li><strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Submit a wallpaper!</a></strong><br />Did you know that <em>you</em> could get featured in our next wallpapers post, too? We are always <strong>looking for creative talent</strong>.</li>
283. </ul>
284.  
285. <p></p>A Symphony Of Dedication On Labour Day<p></p>
286. <p></p><p>“On Labour Day, we celebrate the hard-working individuals who contribute to the growth of our communities. Whether in busy urban areas or peaceful rural settings, this day recognizes the unsung heroes driving our advancement. Let us pay tribute to the workers, craftsmen, and visionaries shaping our shared tomorrow.” — Designed by <a href="https://www.popwebdesign.de/webdesignagentur.html">PopArt Studio</a> from Serbia.</p><p></p>
287. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/may-24-a-symphony-of-dedication-on-labour-day-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-a-symphony-of-dedication-on-labour-day-preview-opt.png" /></a><p></p>
288. <ul>
289. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/may-24-a-symphony-of-dedication-on-labour-day-preview.png">preview</a></li>
290. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/cal/may-24-a-symphony-of-dedication-on-labour-day-cal-2560x1440.png">2560x1440</a></li>
291. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/a-symphony-of-dedication-on-labour-day/nocal/may-24-a-symphony-of-dedication-on-labour-day-nocal-2560x1440.png">2560x1440</a></li>
292. </ul>
293.  
294. <p></p>Navigating The Amazon<p></p>
295. <p></p><p>“We are in May, the spring month par excellence, and we celebrate it in the Amazon jungle.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela Jimenez</a> from Spain.</p><p></p>
296. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/may-24-navigating-the-amazon-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-navigating-the-amazon-preview.png" /></a><p></p>
297. <ul>
298. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/may-24-navigating-the-amazon-preview.png">preview</a></li>
299. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/cal/may-24-navigating-the-amazon-cal-2560x1440.png">2560x1440</a></li>
300. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-2560x1440.png">2560x1440</a></li>
301. </ul>
302.  
303. <p></p>Popping Into Spring<p></p>
304. <p></p><p>“Spring has sprung, and what better metaphor than toast popping up and out of a fun-colored toaster!” — Designed by <a href="https://mu-art.org/stephanieklemick/">Stephanie Klemick</a> from Emmaus Pennsylvania, USA.</p><p></p>
305. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/may-24-popping-into-spring-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-popping-into-spring-preview-opt.png" /></a><p></p>
306. <ul>
307. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/may-24-popping-into-spring-preview.png">preview</a></li>
308. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/cal/may-24-popping-into-spring-cal-2560x1440.png">2560x1440</a></li>
309. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-2560x1440.png">2560x1440</a></li>
310. </ul>
311.  
312. <p></p>Duck<p></p>
313. <p></p><p>Designed by <a href="https://www.instagram.com/scott.m1089?igsh=endod2drNGMzMW9m&amp;utm_source=qr">Madeline Scott</a> from the United States.</p><p></p>
314. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/may-24-duck-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-duck-preview-opt.png" /></a><p></p>
315. <ul>
316. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/may-24-duck-preview.png">preview</a></li>
317. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/cal/may-24-duck-cal-2560x1440.png">2560x1440</a></li>
318. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-2560x1440.png">2560x1440</a></li>
319. </ul>
320.  
321. <p></p>Cruising Into Spring<p></p>
322. <p></p><p>“When I think of spring, I think of finally being able to drive with the windows down and enjoying the fresh air!” — Designed by <a href="https://www.instagram.com/v03.art/">Vanessa Mancuso</a> from the United States.</p><p></p>
323. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/may-24-cruising-into-spring-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-cruising-into-spring-preview-opt.png" /></a><p></p>
324. <ul>
325. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/may-24-cruising-into-spring-preview.png">preview</a></li>
326. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-480x800.png">480x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/cal/may-24-cruising-into-spring-cal-2560x1440.png">2560x1440</a></li>
327. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-480x800.png">480x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/cruising-into-spring/nocal/may-24-cruising-into-spring-nocal-2560x1440.png">2560x1440</a></li>
328. </ul>
329.  
330. <p></p>Lava Is In The Air<p></p>
331. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
332. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/may-24-lava-is-in-the-air-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-lava-is-in-the-air-preview-opt.png" /></a><p></p>
333. <ul>
334. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/may-24-lava-is-in-the-air-preview.png">preview</a></li>
335. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/cal/may-24-lava-is-in-the-air-cal-3840x2160.png">3840x2160</a></li>
336. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/lava-is-in-the-air/nocal/may-24-lava-is-in-the-air-nocal-3840x2160.png">3840x2160</a></li>
337. </ul>
338.  
339. <p></p>Love Myself<p></p>
340. <p></p><p>Designed by <a href="https://www.design-studio.io/">Design-Studio</a> from India.</p><p></p>
341. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/may-24-love-myself-full.jpg"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-love-myself-preview-opt.jpg" /></a><p></p>
342. <ul>
343. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/may-24-love-myself-preview.jpg">preview</a></li>
344. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/cal/may-24-love-myself-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/cal/may-24-love-myself-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/cal/may-24-love-myself-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/cal/may-24-love-myself-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/cal/may-24-love-myself-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/cal/may-24-love-myself-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/cal/may-24-love-myself-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/cal/may-24-love-myself-cal-2560x1440.jpg">2560x1440</a></li>
345. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/nocal/may-24-love-myself-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/nocal/may-24-love-myself-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/nocal/may-24-love-myself-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/nocal/may-24-love-myself-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/nocal/may-24-love-myself-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/nocal/may-24-love-myself-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/nocal/may-24-love-myself-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/love-myself/nocal/may-24-love-myself-nocal-2560x1440.jpg">2560x1440</a></li>
346. </ul>
347.  
348. <p></p>Bat Traffic<p></p>
349. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
350. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/may-24-bat-traffic-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-bat-traffic-preview-opt.png" /></a><p></p>
351. <ul>
352. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/may-24-bat-traffic-preview.png">preview</a></li>
353. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/cal/may-24-bat-traffic-cal-3840x2160.png">3840x2160</a></li>
354. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-3840x2160.png">3840x2160</a></li>
355. </ul>
356.  
357. <p></p>Springtime Sips<p></p>
358. <p></p><p>“May is a month where the weather starts to warm and reminds us summer is approaching, so I created a bright cocktail-themed wallpaper since sipping cocktails in the sun is a popular warm weather activity!” — Designed by <a href="https://hannahcoatesdesign.myportfolio.com/">Hannah Coates</a> from Baltimore, MD.</p><p></p>
359. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/may-24-springtime-sips-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-24-springtime-sips-preview-opt.png" /></a><p></p>
360. <ul>
361. <li><a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/may-24-springtime-sips-preview.png">preview</a></li>
362. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/cal/may-24-springtime-sips-cal-2560x1440.png">2560x1440</a></li>
363. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/springtime-sips/nocal/may-24-springtime-sips-nocal-2560x1440.png">2560x1440</a></li>
364. </ul>
365.  
366.  
367.  
368. <p></p>Hello May<p></p>
369. <p></p><p>“The longing for warmth, flowers in bloom, and new beginnings is finally over as we welcome the month of May. From celebrating nature on the days of turtles and birds to marking the days of our favorite wine and macarons, the historical celebrations of the International Workers’ Day, Cinco de Mayo, and Victory Day, to the unforgettable ‘May the Fourth be with you’. May is a time of celebration — so make every May day count!” — Designed by <a href="https://www.popwebdesign.net/logo-design-novisad.html">PopArt Studio</a> from Serbia.</p><p></p>
370. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-preview-opt.png" /></a><p></p>
371. <ul>
372. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-preview-opt.png">preview</a></li>
373. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1440x1050.jpg">1440x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-2560x1440.jpg">2560x1440</a></li>
374. </ul>
375.  
376. <p></p>ARRR2-D2<p></p>
377. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
378. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-arrr2-d2-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-arrr2-d2-preview-opt.png" /></a><p></p>
379. <ul>
380. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-arrr2-d2-preview-opt.png">preview</a></li>
381. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-3840x2160.png">3840x2160</a></li>
382. </ul>
383.  
384. <p></p>May Your May Be Magnificent<p></p>
385. <p></p><p>“May should be as bright and colorful as this calendar! That’s why our designers chose these juicy colors.” — Designed by <a href="https://masterbundles.com/">MasterBundles</a> from Ukraine.</p><p></p>
386. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-may-your-may-be-magnificent-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-may-your-may-be-magnificent-preview-opt.png" /></a><p></p>
387. <ul>
388. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-may-your-may-be-magnificent-preview-opt.png">preview</a></li>
389. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-2560x1440.png">2560x1440</a></li>
390. </ul>
391.  
392. <p></p>The Monolith<p></p>
393. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
394. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-the-monolith-nocal-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-the-monolith-nocal-preview-opt.png" /></a><p></p>
395. <ul>
396. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-the-monolith-nocal-preview-opt.png">preview</a></li>
397. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-3840x2160.png">3840x2160</a></li>
398. </ul>
399.  
400. <p></p>Blooming May<p></p>
401. <p></p><p>“In spring, especially in May, we all want bright colors and lightness, which was not there in winter.” — Designed by <a href="https://masterbundles.com/">MasterBundles</a> from Ukraine.</p><p></p>
402. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-blooming-may-nocal-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-blooming-may-nocal-preview-opt.png" /></a><p></p>
403. <ul>
404. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-blooming-may-nocal-preview-opt.png">preview</a></li>
405. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-2560x1440.png">2560x1440</a></li>
406. </ul>
407.  
408. <p></p>The Mushroom Band<p></p>
409. <p></p><p>“My daughter asked me to draw a band of mushrooms. Here it is!” — Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><p></p>
410. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-the-mushroom-band-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-the-mushroom-band-preview-opt.png" /></a><p></p>
411. <ul>
412. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-the-mushroom-band-preview-opt.png">preview</a></li>
413. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1024x600.jpg">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1440x960.jpg">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1600x900.jpg">1600x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-3072x1920.jpg">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-3840x2160.jpg">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-5120x2880.jpg">5120x2880</a></li>
414. </ul>
415.  
416. <p></p>Poppies Paradise<p></p>
417. <p></p><p>Designed by <a href="https://www.nathalieouederni.com">Nathalie Ouederni</a> from France.</p><p></p>
418. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a9c5cbab-479f-456f-acc7-bd58a731ff93/may-16-poppies-paradise-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf91eec5-9d10-4290-96ae-c4261ace5321/may-16-poppies-paradise-preview-opt.png" /></a><p></p>
419. <ul>
420. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf91eec5-9d10-4290-96ae-c4261ace5321/may-16-poppies-paradise-preview-opt.png">preview</a></li>
421. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-2560x1440.jpg">2560x1440</a></li>
422. </ul>
423.  
424. <p></p>Lake Deck<p></p>
425. <p></p><p>“I wanted to make a big painterly vista with some mountains and a deck and such.” — Designed by <a href="https://www.ultravulture.xyz">Mike Healy</a> from Australia.</p><p></p>
426. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5a8bed12-4cbc-4b8c-bc6a-29f06546b065/may-18-lake-deck-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bf65a30-3cc8-4130-a166-9da219b32153/may-18-lake-deck-preview-opt.png" /></a><p></p>
427. <ul>
428. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bf65a30-3cc8-4130-a166-9da219b32153/may-18-lake-deck-preview-opt.png">preview</a></li>
429. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-2880x1800.jpg">2880x1800</a></li>
430. </ul>
431.  
432. <p></p>Make A Wish<p></p>
433. <p></p><p>Designed by <a href="https://www.behance.net/juliaversinina">Julia Versinina</a> from Chicago, USA.</p><p></p>
434. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/77e2fb80-d494-4601-93a7-d109072e502a/may-15-make-a-wish-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3c0be6e7-ec80-4da9-b230-fdf54d63a878/may-15-make-a-wish-preview-opt.png" /></a><p></p>
435. <ul>
436. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3c0be6e7-ec80-4da9-b230-fdf54d63a878/may-15-make-a-wish-preview-opt.png">preview</a></li>
437. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-2560x1440.jpg">2560x1440</a></li>
438. </ul>
439.  
440.  
441.  
442. <p></p>Enjoy May!<p></p>
443. <p></p><p>“Springtime, especially Maytime, is my favorite time of the year. And I like popsicles — so it’s obvious isn’t it?” — Designed by <a href="https://www.firstsquare.de/">Steffen Weiß</a> from Germany.</p><p></p>
444. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec15f840-7895-49f3-9792-ac409bb8119c/may-15-enjoy-may-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b2b9d54-a7e9-4848-ba1b-2e0bbea22e95/may-15-enjoy-may-preview-opt.png" /></a><p></p>
445. <ul>
446. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b2b9d54-a7e9-4848-ba1b-2e0bbea22e95/may-15-enjoy-may-preview-opt.png">preview</a></li>
447. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-2560x1440.jpg">2560x1440</a></li>
448. </ul>
449.  
450. <p></p>Celestial Longitude Of 45°<p></p>
451. <p></p><p>“Lixia is the 7th solar term according to the traditional East Asian calendars, which divide a year into 24 solar terms. It signifies the beginning of summer in East Asian cultures. Usually begins around May 5 and ends around May 21.” — Designed by Hong, Zi-Cing from Taiwan.</p><p></p>
452. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b01faf40-60e9-48e1-adc5-0a63d5f344d9/may-17-celestial-longitude-of-45-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cd0bb92b-3d66-4a71-9b8e-4381a74aa24f/may-17-celestial-longitude-of-45-preview-opt.png" /></a><p></p>
453. <ul>
454. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cd0bb92b-3d66-4a71-9b8e-4381a74aa24f/may-17-celestial-longitude-of-45-preview-opt.png">preview</a></li>
455. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1080x1920.png">1080x1920</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-2560x1440.png">2560x1440</a></li>
456. </ul>
457.  
458. <p></p>Stone Dahlias<p></p>
459. <p></p><p>Designed by Rachel Hines from the United States.</p><p></p>
460. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4e935ea8-c03b-4848-a092-7314c5d7b3e8/may-16-stone-dahlias-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0cbc23f-b96b-41fe-8039-5834a602e59d/may-16-stone-dahlias-preview-opt.png" /></a><p></p>
461. <ul>
462. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0cbc23f-b96b-41fe-8039-5834a602e59d/may-16-stone-dahlias-preview-opt.png">preview</a></li>
463. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1400x900.jpg">1400x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/stone-dahlias/nocal/may-16-stone-dahlias-nocal-2560x1440.jpg">2560x1440</a></li></ul>
464.  
465. <p></p>Understand Yourself<p></p>
466. <p></p><p>“Sunsets in May are the best way to understand who you are and where you are heading. Let’s think more!” — Designed by <a href="https://izhik.com">Igor Izhik</a> from Canada.</p><p></p>
467. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17fac211-eec5-4c00-975c-3f08f521948d/may-16-understand-yourself-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6a44c529-60bb-4ad2-812d-fd3d7b6347a6/may-16-understand-yourself-preview-opt.png" /></a><p></p>
468. <ul>
469. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6a44c529-60bb-4ad2-812d-fd3d7b6347a6/may-16-understand-yourself-preview-opt.png">preview</a></li>
470. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-2560x1440.jpg">2560x1440</a></li>
471. </ul>
472.  
473. <p></p>Sweet Lily Of The Valley<p></p>
474. <p></p><p>“The ‘lily of the valley’ came earlier this year. In France, we celebrate the month of May with this plant.” — Designed by Philippe Brouard from France.</p><p></p>
475. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c1ca2b84-94aa-4573-89f6-44da2575073a/may-14-lily-of-the-valley-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/950bb675-73d4-460d-bce6-7b91f10de9dd/may-14-lily-of-the-valley-preview-opt.png" /></a><p></p>
476. <ul>
477. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/950bb675-73d4-460d-bce6-7b91f10de9dd/may-14-lily-of-the-valley-preview-opt.png">preview</a></li>
478. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/lily-of-the-valley/nocal/may-14-lily-of-the-valley-nocal-2560x1440.jpg">2560x1440</a></li>
479. </ul>
480.  
481. <p></p>Today, Yesterday, Or Tomorrow<p></p>
482. <p></p><p>Designed by <a href="https://instagram.com/almahoffmann">Alma Hoffmann</a> from the United States.</p><p></p>
483. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-20-today-yesterday-or-tomorrow-nocal-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-20-today-yesterday-or-tomorrow-nocal-preview-opt.png" /></a><p></p>
484. <ul>
485. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-20-today-yesterday-or-tomorrow-nocal-preview-opt.png">preview</a></li>
486. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-2560x1440.jpg">2560x1440</a></li>
487. </ul>
488.  
489. <p></p>Add Color To Your Life!<p></p>
490. <p></p><p>“This month is dedicated to flowers, to join us and brighten our days giving a little more color to our daily life.” — Designed by <a href="https://www.silocreativo.com/en/">Verónica Valenzuela</a> from Spain.</p><p></p>
491. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4255684a-cead-4db8-90c5-e891a148a79f/may-16-add-color-to-your-life-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/232649eb-ba07-4c5f-8af4-6458d6ed1f1b/may-16-add-color-to-your-life-preview-opt.png" /></a><p></p>
492. <ul>
493. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/232649eb-ba07-4c5f-8af4-6458d6ed1f1b/may-16-add-color-to-your-life-preview-opt.png">preview</a></li>
494. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-2560x1440.png">2560x1440</a></li>
495. </ul>
496.  
497. <p></p>The Green Bear<p></p>
498. <p></p><p>Designed by <a href="https://www.pedroroloillustration.com">Pedro Rolo</a> from Portugal.</p><p></p>
499. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d792a713-a97f-419a-b0e6-0a1243710ce9/may-13-green-bear-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d4fb947b-c824-4176-b4aa-e93416466ffa/may-13-green-bear-preview-opt.png" /></a><p></p>
500. <ul>
501. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d4fb947b-c824-4176-b4aa-e93416466ffa/may-13-green-bear-preview-opt.png">preview</a></li>
502. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-2560x1440.jpg">2560x1440</a></li>
503. </ul>
504.  
505. <p></p>Lookout At Sea<p></p>
506. <p></p><p>“I wanted to create something fun and happy for the month of May. It’s a simple concept, but May is typically the time to adventure out into the world and enjoy the best of Spring.” — Designed by Alexander Jubinski from the United States.</p><p></p>
507. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d453ce48-debc-4983-ae09-8465b927e6f0/may-19-lookout-at-sea-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6e9a8a8-482e-4d79-b7a0-3a481e97ee54/may-19-lookout-at-sea-preview-opt.png" /></a><p></p>
508. <ul>
509. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6e9a8a8-482e-4d79-b7a0-3a481e97ee54/may-19-lookout-at-sea-preview-opt.png">preview</a></li>
510. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/lookout-at-sea/nocal/may-19-lookout-at-sea-nocal-2560x1440.jpg">2560x1440</a></li>
511. </ul>
512.  
513. <p></p>Tentacles<p></p>
514. <p></p><p>Designed by <a href="https://www.datcha.ca/la_datcha/">Julie Lapointe</a> from Canada.</p><p></p>
515. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/90635f36-74f1-40b0-9e50-89f58797b569/may-12-tentacles-36-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dd1179a-2295-4645-b45b-5d0c4dfa185a/may-12-tentacles-36-preview-opt.png" /></a><p></p>
516. <ul>
517. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dd1179a-2295-4645-b45b-5d0c4dfa185a/may-12-tentacles-36-preview-opt.png">preview</a></li>
518. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1920x1200.jpg">1920x1200</a></li></ul>
519.  
520.  
521.  
522. <p></p>Spring Gracefulness<p></p>
523. <p></p><p>“We don’t usually count the breaths we take, but observing nature in May, we can’t count our breaths being taken away.” — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p><p></p>
524. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f44085ec-427f-43b2-9e3d-f0073d21486e/may-17-spring-gracefulness-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1feda6da-f329-496d-8aab-94d38cd68b90/may-17-spring-gracefulness-preview-opt.png" /></a><p></p>
525. <ul>
526. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1feda6da-f329-496d-8aab-94d38cd68b90/may-17-spring-gracefulness-preview-opt.png">preview</a></li>
527. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-2560x1440.png">2560x1440</a></li>
528. </ul>
529.  
530. <p></p>Geo<p></p>
531. <p></p><p>Designed by <a href="https://www.marywood.edu">Amanda Focht</a> from the United States.</p><p></p>
532. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e6aad900-2c45-4d09-8d8f-63d3a7e6c4d6/may-18-geo-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb0c1df9-2698-41a7-9234-8ce0a987121f/may-18-geo-preview-opt.png" /></a><p></p>
533. <ul>
534. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb0c1df9-2698-41a7-9234-8ce0a987121f/may-18-geo-preview-opt.png">preview</a></li>
535. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-2560x1440.png">2560x1440</a></li>
536. </ul>
537.  
538. <p></p>Blast Off!<p></p>
539. <p></p><p>“Calling all space cadets, it’s time to celebrate National Astronaut Day! Today we honor the fearless explorers who venture beyond our planet and boldly go where no one has gone before.” — Designed by <a href="https://www.popwebdesign.net/wordpress-website-design.html">PopArt Studio</a> from Serbia.</p><p></p>
540. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-blast-off-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-blast-off-preview-opt.png" /></a><p></p>
541. <ul>
542. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-blast-off-preview-opt.png">preview</a></li>
543. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1400x900.png">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/blast-off/nocal/may-23-blast-off-nocal-2560x1440.png">2560x1440</a></li>
544. </ul>
545.  
546. <p></p>Colorful<p></p>
547. <p></p><p>Designed by &lt;a href=<a href="https://www.lotum.de&gt;Lotum">https://www.lotum.de&gt;Lotum</a> from Germany.</p><p></p>
548. <p></p>&lt;a href=<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e8daeb22-0fff-4b2a-b51a-2a6202c6e26e/may-12-colorful-31-full.png&gt;">https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e8daeb22-0fff-4b2a-b51a-2a6202c6e26e/may-12-colorful-31-full.png&gt;</a><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5fbaaed8-cc91-407e-911b-95c851771e57/may-12-colorful-31-preview-opt.png" /><p></p>
549. <ul>
550. <li>&lt;a href=<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5fbaaed8-cc91-407e-911b-95c851771e57/may-12-colorful-31-preview-opt.png&gt;preview">https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5fbaaed8-cc91-407e-911b-95c851771e57/may-12-colorful-31-preview-opt.png&gt;preview</a></li>
551. <li>without calendar: &lt;a href=<a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-320x480.jpg&gt;320x480">https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-320x480.jpg&gt;320x480</a>, &lt;a href=<a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-640x960.jpg&gt;640x960">https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-640x960.jpg&gt;640x960</a>, &lt;a href=<a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1024x1024.jpg&gt;1024x1024">https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1024x1024.jpg&gt;1024x1024</a>, &lt;a href=<a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1280x800.jpg&gt;1280x800">https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1280x800.jpg&gt;1280x800</a>, &lt;a href=<a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1280x1024.jpg&gt;1280x1024">https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1280x1024.jpg&gt;1280x1024</a>, &lt;a href=<a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1440x900.jpg&gt;1440x900">https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1440x900.jpg&gt;1440x900</a>, &lt;a href=<a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1680x1050.jpg&gt;1680x1050">https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1680x1050.jpg&gt;1680x1050</a>, &lt;a href=<a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1920x1200.jpg&gt;1920x1200">https://smashingmagazine.com/files/wallpapers/may-12/may-12-colorful__31-nocal-1920x1200.jpg&gt;1920x1200</a></li></ul>
552.  
553. <p></p>Who Is Your Mother?<p></p>
554. <p></p><p>“Someone who wakes up early in the morning, cooks you healthy and tasty meals, does your dishes, washes your clothes, sends you off to school, sits by your side and cuddles you when you are down with fever and cold, and hugs you when you have lost all hopes to cheer you up. Have you ever asked your mother to promise you never to leave you? No. We never did that because we are never insecure and our relationship with our mothers is never uncertain. We have sketched out this beautiful design to cherish the awesomeness of motherhood. Wishing all a happy Mothers Day!” — Designed by <a href="https://acodez.in/">Acodez IT Solutions</a> from India.</p><p></p>
555. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2752d61f-5899-4743-9ade-5ca5b1a0abcb/may-17-who-is-your-mother-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d8d68dc1-4b40-4020-b1f3-a253bd165ad6/may-17-who-is-your-mother-preview-opt.png" /></a><p></p>
556. <ul>
557. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d8d68dc1-4b40-4020-b1f3-a253bd165ad6/may-17-who-is-your-mother-preview-opt.png">preview</a></li>
558. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-2560x1440.png">2560x1440</a></li></ul>
559.  
560. <p></p>Asparagus Say Hi!<p></p>
561. <p></p><p>“In my part of the world, May marks the start of seasonal produce, starting with asparagus. I know spring is finally here and summer is around the corner when locally-grown asparagus shows up at the grocery store.” — Designed by <a href="https://www.elainechen.com">Elaine Chen</a> from Toronto, Canada.</p><p></p>
562. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aabebe55-e761-464a-89cb-50e01f7d7e1a/may-16-asparagus-say-hi-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4645119c-bad7-4818-8942-d15ca3f9a1f8/may-16-asparagus-say-hi-preview-opt.png" /></a><p></p>
563. <ul>
564. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4645119c-bad7-4818-8942-d15ca3f9a1f8/may-16-asparagus-say-hi-preview-opt.png">preview</a></li>
565. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-2560x1440.jpg">2560x1440</a></li>
566. </ul>
567.  
568. <p></p>May The Force Be With You<p></p>
569. <p></p><p>“Yoda is my favorite Star Wars character and ‘may’ has funny double meaning.” — Designed by <a href="https://hirsdesign.com/">Antun Hirsman</a> from Croatia.</p><p></p>
570. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0517e4ae-3dad-45ea-8683-6086641a74e4/may-15-may-the-force-be-with-you-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f2b452b0-a07c-4c29-a1dc-cf1dc6d983ae/may-15-may-the-force-be-with-you-preview-opt.png" /></a><p></p>
571. <ul>
572. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f2b452b0-a07c-4c29-a1dc-cf1dc6d983ae/may-15-may-the-force-be-with-you-preview-opt.png">preview</a></li>
573. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-15/may-the-force-be-with-you/nocal/may-15-may-the-force-be-with-you-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/may-the-force-be-with-you/nocal/may-15-may-the-force-be-with-you-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/may-the-force-be-with-you/nocal/may-15-may-the-force-be-with-you-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/may-the-force-be-with-you/nocal/may-15-may-the-force-be-with-you-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/may-the-force-be-with-you/nocal/may-15-may-the-force-be-with-you-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/may-the-force-be-with-you/nocal/may-15-may-the-force-be-with-you-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/may-the-force-be-with-you/nocal/may-15-may-the-force-be-with-you-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/may-the-force-be-with-you/nocal/may-15-may-the-force-be-with-you-nocal-2560x1440.jpg">2560x1440</a></li>
574. </ul>
575.  
576. <p></p>Birds Of May<p></p>
577. <p></p><p>“Inspired by a little-known ‘holiday’ on May 4th known as ‘Bird Day’. It is the first holiday in the United States celebrating birds. Hurray for birds!” — Designed by <a href="https://www.iwantclarity.com">Clarity Creative Group</a> from Orlando, FL.</p><p></p>
578. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cd072497-e15f-4edc-bd47-ea121d7b2a45/may-14-bird-day-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2fe8b679-631f-4f87-916c-8858285564cb/may-14-bird-day-preview-opt.png" /></a><p></p>
579. <ul>
580. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2fe8b679-631f-4f87-916c-8858285564cb/may-14-bird-day-preview-opt.png">preview</a></li>
581. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-640x960.png">640x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-640x1136.png">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-2560x1440.png">2560x1440</a></li>
582. </ul>
583.  
584. ]]></content:encoded>
585.            <author>hello@smashingmagazine.com (Cosima Mielke)</author>
586.            <enclosure url="http://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-preview-opt.png" length="0" type="image/png"/>
587.        </item>
588.        <item>
589.            <title><![CDATA[Lessons Learned After Selling My Startup]]></title>
590.            <link>https://smashingmagazine.com/2024/04/lessons-learned-after-selling-startup/</link>
591.            <guid>https://smashingmagazine.com/2024/04/lessons-learned-after-selling-startup/</guid>
592.            <pubDate>Mon, 29 Apr 2024 15:00:00 GMT</pubDate>
593.            <description><![CDATA[Business acquisitions are common but often shrouded in mystery because they happen behind closed doors. In this article, Yaakov details the story of his company and the journey it took him on, shedding light on the process of selling a business and what he learned from the experience.]]></description>
594.            <content:encoded><![CDATA[<p>August 2021 marks a milestone for me. That’s when we signed an acquisition agreement to sell <a href="http://chatra.com/">Chatra</a>, a profitable live chat platform. I co-founded it after <a href="https://www.smashingmagazine.com/2015/11/lessons-learned-shutting-startup/">shutting down my first startup after a six-year struggle</a>. Chatra took me and the team six years to finish — that’s six years of learning, experimenting, sometimes failing, and ultimately <a href="https://www.brevo.com/blog/sendinblue-acquires-metrilo-chatra-pushowl/">winning big</a>.</p>
595. <p>Acquisitions happen all the time. But what does it look like to go through one, putting the thing you built and nurtured up for sale and ceding control to someone else to take over? Sometimes, these things are complicated and contain clauses about what you can and can’t say after the transaction is completed.</p>
596. <p>So, I’ve curated a handful of the most <strong>valuable takeaways from starting, growing, and selling the company</strong>. It took me some time to process everything; some lessons were learned immediately, while others took time to sink in. Ultimately, though, it’s a recollection of my personal journey. I hope sharing it can help you in the event you ever find yourself in a similar pair of shoes.</p>
597. Keeping The Band Together
598. <p>Rewind six years before the Chatra acquisition. My first startup, Getwear, ran out of steam, and I — along with everyone else — was ready to jump ship.</p>
599. <p>But we weren’t ready to part ways. My co-founder-partner was a close childhood friend with whom I would sell pirated CDs in the late 90s. Now, I don’t think it’s the most honest way to make a living, but it didn’t bother us much in high school. It also contributed to a strong bond between us, one that led to the launch of Getwear and, later, Chatra.</p>
600. <p>That partnership and collaboration were too precious to let go; we knew that our work wasn’t supposed to end at Getwear and that we’d have at least one more try together. The fact that we struggled together before is what allowed us to pull through difficult times later. Our friendship allowed us to work through stress, difficulties, and the unavoidable disagreements that always come up.</p>
601. <p>That was a big lesson for me: <strong>It’s good to have a partner you trust along for the ride.</strong> We were together before Chatra, and we saw it all the way through to the end. I can’t imagine how things would have been different had I partnered with someone new and unfamiliar, or worse, on my own.</p>
602. Building Business Foundations
603. <p>We believed Getwear would make us millionaires. So when it failed, that motivation effectively evaporated. We were no longer inspired to take on ambitious plans, but we still had enough steam to start a digital analog of a döner kebab shop — a simple, sought-after tech product just to pay our bills.</p>
604. <p>This business wasn’t to be built on the back of investment capital; no, it was bootstrapped. That means we made do with a small, independent, fully-remote team. Remember, this is in 2015. The global pandemic had yet to happen, and a fully remote team was still a novelty. And it was quite a change from how we ran Getwear, which was stocked with an R&amp;D department, a production office, and even a factory in Mumbai. A small distributed team seemed the right approach to keep us nimble as we set about defining our path forward as a company.</p>
605. <p>Finding our purpose required us to look at the intersection of what the market needs and what we know and can do well. Building a customer support product was an obvious choice: at Getwear, we heavily relied on live chat to help users take their body measurements and place their orders.</p>
606. <p>We were familiar with existing products on the market. Besides, we already had experience building a conversational support product: we had built an internal tool to facilitate communication between our Mumbai-based factory and an overseas customer-facing team. The best thing about that was that it was built on a relatively obscure framework offering real-time messaging out of the box.</p>
607. <p>There were maybe 20 established competitors in the space back in 2015, but that didn’t dissuade us. If there was enough room for 20 products to do business, there must be enough for 21. I assumed we should <strong>treat competition as a market validation rather than an obstacle</strong>.</p>
608. <p>Looking back, <strong>I can confidently say that it’s totally possible to compete (and succeed) in a crowded market.</strong></p>
609. <p>Product-wise, Getwear was very innovative; no one had ever built an online jeans customizer as powerful as ours. We designed the UX from scratch without relying much on the best practices. </p>
610. <p>With Chatra, we went down a completely different route: We had improved the established live chat product category via features that were, at that time, commonly found in other types of software but hadn’t made their way to our field. That was the opportunity we seized.</p>
611. <p>The existing live chat platforms felt archaic in that the interfaces were clunky and reminiscent of Windows 95, the user flows were poorly thought out, and the dated user experience resulted in lost conversation histories.</p>
612. <p>Slack was a new product at this time and was all the rage with its fresh approach to user interfaces and conversational onboarding. Products like Facebook Messenger and <a href="https://telegram.org/">Telegram</a> (which is popular in Eastern Europe and the Middle East) were already standard bearers and formed user expectations for how a messaging experience should work on mobile. We learned a lot from these products and found in them the blueprint to design a modern chat widget and dashboard for agents.</p>
613. <p>We certainly stood on the shoulders of giants, and there’s nothing wrong with <a href="https://www.amazon.com/Steal-Like-Artist-Things-Creative/dp/0761169253">stealing like an artist</a>: in fact, both Steve Jobs and Bill Gates did it.</p>
614. <p>The takeaway?</p>
615. <p>A product does not have to be new to redefine and disrupt a market. It’s possible to lead by introducing modern standards and designs rather than coming up with something radically different.</p>
616. Making A Go-To-Market Strategy
617. <p>Once we were clear about <em>what</em> we were building and <em>how</em> to build it, the time came to figure out a strategy for bringing our product to market.</p>
618. <p>Two things were very clear and true to us up front:</p>
619. <ol>
620. <li>We needed to launch and start earning <em>immediately</em> — in months rather than years — being a bootstrapped company and all.</li>
621. <li>We didn’t have money for things like paid acquisition, brand awareness, or outbound sales representatives to serve as the front line for customer engagement.</li>
622. </ol>
623. <p>Both conclusions, taken together, helped us decide to focus our efforts on small businesses that need fewer features in a product and onboard by self-service. Marketing-wise, that meant we’d need to find a way around prohibitively expensive ads.</p>
624. <p>Enter <strong>growth hacking</strong>! The term doesn’t resonate now the way it did in 2015: fresh, aggressive, and effective. As a user-facing website widget, we had a built-in acquisition channel by way of a “powered by Chatra” link. For it to be an effective marketing tool, we had to accumulate a certain number of customers. Otherwise, who’s going to see the link in the first place?</p>
625. <p>We combined unorthodox techniques to acquire new customers, like web-scraping and email address discovery with cold outreach.</p>
626. <p>Initially, we decided to go after our competitors’ customers. But the only thing we got out of targeting them with emails was their rightful anger.</p>
627. <p>In fact, a number of customers complained directly to the competitors, and the CEO of a prominent live chat company demanded we cease communicating with their users. </p>
628. <p>More than that, he actually requested that we donate to a well-known civil liberty NGO, something we wholeheartedly agreed to, considering it was indeed the right thing to do.</p>
629. <p>So, we decided to forget about competition and target potential customers (who owned e-commerce websites) using automation for lead research, email sending, and reply processing. We managed to do it on a massive scale with very few resources. By and large, cold outreach has been the single most effective marketing tool we have ever used. And contrary to common assumption, <em>it is not a practice reserved purely for enterprise products.</em></p>
630. <p>Once we acquired a significant user mass, the widget link became our Number One acquisition channel. In lean startup terminology, a <strong>viral engine of growth</strong> is a situation when existing customers start generating leads and filling the marketing funnel for you. It’s where we all want to be, but the way to get there is often murky and unreliable. But my experience tells me that it is possible and <em>can</em> be planned.</p>
631. <p>For this strategy to work, it has to be based on <strong>natural user interactions</strong>. With widgets, the mechanic is quite apparent, but not so much with other products. Still, you can do well with serious planning and running experiments to help make informed decisions that achieve the best possible results. </p>
632. <p>For example, we were surprised that the widget link performed way better in tests when we changed it from “Powered by Chatra” to “Get Chatra!”. We’re talking big increases with minor tweaks. The small details really do matter!</p>
633. <p><strong>Content marketing</strong> was another avenue we explored for generating leads. We had already done the cold outreach and had a good viral engine going with the widget link. Content marketing, in contrast, was an attempt to generate leads at the “top” of the funnel, independent of any outbound marketing or our customers’ websites. We produced <a href="https://chatra.com/books/">books and guides</a> that were well-researched, written, and designed to bring in potential customers while supporting existing ones with resources to get the most out of Chatra.</p>
634. <p>Sadly, these efforts failed to attract many new leads. I don’t want to say <em>not</em> to invest in quality content; it’s just that this is not a viable <em>short-term</em> growth strategy.</p>
635. Increasing Lifetime Customer Value
636. <p>It took six months of development to launch and another year to finally break even. By then, we had achieved a product-market fit with consistent organic growth; it was time to focus on metrics and unit economics. Our challenge was to limit customer churn and find ways to increase the lifetime value of existing customers.</p>
637. <p><strong>If there’s an arch-enemy to SaaS, it’s churn.</strong> Mitigating churn is crucial to any subscription business, as longer subscriptions generate more revenue. Plus, it’s easier to prevent churn than it is to acquire new customers.</p>
638. <p>We found it helpful to distinguish between avoidable churn and unavoidable (i.e., “natural”) churn. The latter concerns customer behavior beyond our control: if an e-commerce store shuts down, they won’t pay for services. And we had nothing to do with them shutting down — it’s just the reality of life that most small businesses fail. No quick-fix strategy could ever change that; we just had to <em>deal with it.</em></p>
639. <p>Chatra’s subscription pricing was fairly inexpensive, yet we enjoyed a relatively high <strong>customer lifetime value</strong> (cLTV). Many customers tended to stay for a long time — some, for years. Our high cLTV helped us justify higher customer acquisition costs (CAC) for paid ads in the Shopify app store once we decided to run them. Running the ads allowed us to improve our Shopify app store search position. And because of that, we improved and kept our position as a top app within our category. That, I believe, was one of the factors that the company <a href="https://www.brevo.com">Brevo</a> considered when they later decided to acquire our business.</p>
640. <p>We tried improving the free-to-paid subscription conversion rate by targeting those who actively used the product but remained on a free plan for an extended period. We offered them an upgraded plan subscription for just one dollar per year. And to our surprise, that failed to convince many people to upgrade. We were forced to conclude that <strong>there are two types of customers: those who pay and those who do not (and will not).</strong></p>
641. <p>From that point forward, things got even weirder. For example, we ran several experiments with subscription pricing and found that we could increase subscription prices from $11 per seat to $19 without adversely affecting either the visitor-to-user or the free-to-paid conversion rates! Apparently, <strong>price doesn’t matter as much as you might think</strong>. It’s possible to raise prices without adversely affecting conversions, at least in our experience with a <strong>freemium pricing model</strong>.</p>
642. <p>We also released additional products we could cross-sell to existing customers. One was Livebar, an app for in-browser notifications on recent online shopping purchases. Another was <a href="https://yeps.io/">Yeps</a>, a simple announcement bar that sticks to the top of a webpage. Product-wise, both were good. But despite our efforts to bring awareness to them in all our communications with Chatra customers, they never really took off. We’ve closed the first and sold the second for a price that barely justified the development and ongoing support we were putting into it. <strong>We were wrong to assume that if we have a loyal audience, we could automatically sell them another product.</strong></p>
643. Contemplating An Exit
644. <p>Chatra was a lean company. As a SaaS business, we had a perfect cost-revenue ratio and gained new customers mainly through viral dynamics and self-onboarding. These didn’t increase our costs much but did indeed bring in extra subscription dollars. The engine worked almost without any effort on our side.</p>
645. <p>After a few years, the company could mostly function on auto-pilot, giving us — the founders — time and resources to pay our bills and run business experiments. We were enjoying a good life. Our work was a success!</p>
646. <p>We gave up on an exit strategy even before starting, so we didn’t pay much attention to the acquisition offers we routinely received; most weren’t enticing enough to pull us away. Even those sent by people known in the industry were way too small: the best offer we got was a valuation of 2.5 times our <a href="https://www.zuora.com/resource/annual-recurring-revenue/#:~:text=Annual%20Recurring%20Revenue%2C%20or%20ARR,for%20a%20single%20calendar%20year.">Annual Recurring Revenue</a> (ARR), which was a non-starter for us.</p>
647. <p>Then, we received an email with another offer. The details were slim, but we decided to at least entertain the idea and schedule a time to chat. I replied that we wouldn’t consider anything lower than an industry-standard venture-backed SaaS valuation (which was about eight times ARR at the time). The response, surprisingly, read: <em>“Let’s talk. Are you ready to sign a non-disclosure agreement?”</em></p>
648. <p>My biggest concern was that transferring ownership might lead to the Chatra team being laid off and the product termination. I didn’t want to let down our existing customers! The buyer understood the situation and assured us that Chatra would remain a separate line of business, at least for an extended period. No one on the team would lose their job. The buyer also planned to fork Chatra rather than close it, at least initially.</p>
649. <p>Still, letting go of it was difficult, and at times, I even felt the urge to blow up the negotiations.</p>
650. <p>So, why sell at all? We did it for three reasons:</p>
651. <ul>
652. <li>First, we felt stuck in the mature stage of the business lifecycle and missed the feeling of creating new things.</li>
653. <li>Second, we (rightfully) knew that the good times could not last forever; we would be wise to avoid putting all our eggs in one basket.</li>
654. <li>Third was a bit of pride. I genuinely wanted to go through the acquisition process, which has always seemed like a rite of passage for entrepreneurs.</li>
655. </ul>
656. <p>Chatra was growing, cash-flow positive, and economic tailwinds seemed to blow our way. On the flip side, however, we had little left to do as founders. We didn’t want to go upmarket and compete with massive players like <a href="http://intercom.com">Intercom</a> and <a href="http://drift.com">Drift</a>. We were happy in our niche, but it didn’t offer enough growth or expansion opportunities. We felt near the end of the line.</p>
657. <p>Looking back, I see how fortunate we were. The market took a huge hit soon after the acquisition, to the extent that I’m sure we would not have been able to fetch equally enticing offers within the next two years.</p>
658. <p>I want to stress that the offer we got was very, very generous. Still I often kick myself for not asking for more, as a deep-pocketed buyer is unlikely to turn away simply because we were trying to increase the company’s valuation. The additional ask would have been negligible to the buyer, but it could have been very meaningful for us.</p>
659. <p>Different acquisitions wind up looking different in the end. If you’re curious what a transaction looks like, ours was split into three payouts:</p>
660. <ol>
661. <li>An initial, fixed payment on the closing date;</li>
662. <li>Several flexible payouts based on reaching post-acquisition milestones;</li>
663. <li>An escrow amount deposited with an escrow agent for the possibility of something going wrong, like legal claims.</li>
664. </ol>
665. <p>We assumed this structure was non-negotiable and didn’t try to agree on a different distribution that would move more money to the initial payment. Why? We were too shy to ask and were sure we’d complete all requirements on time. Accepting a significant payment delay essentially credited the buyer for the amount of the payouts while leaving me and my co-founder vulnerable to uncertainty.</p>
666. <p>We should’ve been bold and negotiated more favorable terms. After all, it represented the last time we’d have to battle for Chatra. I consider that a lesson learned for next time.</p>
667. Conclusion
668. <p>Parting ways with Chatra wasn’t easy. The team became my second family, and every product pixel and bit of code was dear to my heart. And yes, I do still feel nostalgia for it from time to time. But I certainly enjoy the freedom that comes with the financial gains.</p>
669. <p>One thing I absolutely want to mention before closing this out is that</p>
670. <p>Having an “exit” under my belt actually did very little to change my personal well-being or sense of self-worth. The biggest lesson I took away from the acquisition is that success is the process of doing things, not the point you can arrive at.</p>
671. <p>I don’t yet know where the journey will take me from here, but I’m confident that there will be both a business challenge and a way of <a href="http://co-founder.cc">helping others on their own founder journey</a>. That said, I sincerely hope that my experience gives you a good deal of insight into the process of selling a company. It’s one of those things that often happens behind closed doors. But by shedding a little light on it — at least this one reflection — perhaps you will be more prepared than I was and know what to look for.</p>
672. ]]></content:encoded>
673.            <author>hello@smashingmagazine.com (Yaakov Karda)</author>
674.            <enclosure url="http://files.smashing.media/articles/lessons-learned-after-selling-startup/lessons-learned-after-selling-startup.jpg" length="0" type="image/jpg"/>
675.        </item>
676.        <item>
677.            <title><![CDATA[The End Of The Free Tier]]></title>
678.            <link>https://smashingmagazine.com/2024/04/end-of-free-tier/</link>
679.            <guid>https://smashingmagazine.com/2024/04/end-of-free-tier/</guid>
680.            <pubDate>Fri, 26 Apr 2024 08:00:00 GMT</pubDate>
681.            <description><![CDATA[Free-tier pricing is a common marketing strategy. “Free” gets people in the door and allows them to settle in and see how things work. But, as Juan Diego Rodriguez explains, the practice of free *tiers* is often conflated with free *trials*. And while the distinction may be nuanced, the consequences of sunsetting free-tier pricing may be huge.]]></description>
682.            <content:encoded><![CDATA[<p>I love free tiers, and I am not the only one. Everyone loves free things — they’re the best thing in life, after all. But maybe we have grown <em>too</em> accustomed to them, to the extent that a service switching from a “freemium” model to a fully paid plan would probably feel outrageous to you. Nowadays, though, the transition from free to paid services seems inevitable. It’s a matter of <em>when</em> a service drops its free tier rather than <em>if</em> it will.</p>
683. <p>Companies need to make money. As developers, we probably understand the most that <strong>a product comes with costs</strong>; there are startup funds, resources, and salaries spent to maintain and support the product against a competitive globalized market.</p>
684. <p>If I decided to take something I made and ship it to others, you darn well know I would charge money for it, and I assume you’re the same. At the same time, I’m typically more than happy to pay for something, knowing it supports the people who made it.</p>
685. <p>We get that, and we surely don’t go walk into a grocery store complaining that nothing they have is free. It’s just how things work.</p>
686. <p><strong>What exactly, then, is so infuriating about a service offering a free tier and later deciding to transition to a priced one?</strong></p>
687. It’s Positioning, Not Money
688. <p>It’s not so much about the money as it is the positioning. Who wouldn’t feel somewhat scammed, having invested time and resources into something that was initially advertised as “free” only to be blindsided behind a paywall?</p>
689. <p>Most of the time, the feeling is less anger than it is mildly annoying. For example, if your favorite browser suddenly became a paid premium offering, you would most likely switch to the next best option. But what happens when the free tier for a hosted product or service is retired? Switching isn’t as easy when hundreds of thousands of developers server their projects in a free-tier hosting plan.</p>
690. <p>The practice of offering a free tier only to remove it seems like a common practice on the web that won’t go away any time soon. It’s as though companies ditch them once (1) the product becomes mature enough to be a feature-rich offering or (2) the company realizes free customers are not converting into paid customers.</p>
691. <p>It has been a source of endless complaints, and one only needs to look back at PlanetScale’s recent decision to remove its free-tier database plan, which we will get deeper into in a bit. Are free tiers removed because of their unsustainable nature, or is it to appease profit-hungry companies? I want to explore the <em>why</em> and <em>how</em> of free tiers, better approaches for marketing “free” services, and how to smoothly retire a free tier when it inevitably goes away.</p>
692. Glossary
693. <p>Before we wade further into these waters, I think it’s worth having a baseline understanding of pricing concepts that are relevant to the discussion.</p>
694. <p>A free tier is one of several flavors:</p>
695. <ul>
696. <li><strong>Free trial opt-in</strong><br />Permits users to try out the product for a limited period without providing payment details. Once the trial ends, so does access to the product features.</li>
697. <li><strong>Free trial opt-out</strong><br />Requires users to provide payment information during registration en route to a free trial that, once it ends, automatically converts to a paid account.</li>
698. <li><strong>Freemium model</strong><br />Offers access to a product’s “core” features but requires upgrading to a paid account to unlock other features and benefits.</li>
699. <li><strong>Reverse trial model</strong><br />Users start with access to the premium tier upon registration and then transition to a freemium tier after the trial period ends.</li>
700. </ul>
701. Case Study: PlanetScale
702. <p>Let’s start this conversation by looking at PlanetScale and how it killed its free tier at the beginning of the year. Founded in 2018, PlanetScale launched its database as a service in 2021 and has raised $105 million in venture capital and seed funding, becoming one of the fastest-growing tech companies in North America by 2023. In March of this year, CEO Sam Lambert <a href="https://planetscale.com/blog/planetscale-forever">announced the removal of PlanetScale’s hobby tier</a>.</p>
703. <p>In short, the decision was made to provide <em>“a reliable and sustainable platform for our customers”</em> by not <em>“giving away endless amounts of free resources to keep growing,”</em> which, of course, leaves everyone in the freemium tier until April 8 to either pay for one of the next plans at the outrageous starting price of $39 per month or migrate to another platform.</p>
704. <p>Again, a company needs steady revenue and a reliable business plan to stay afloat. But PlanetScale gave mixed signals when they stated in the bespoke memo that <em>“[e]very unprofitable company has a date in the future where it could disappear.”</em> Then they went on to say they are <em>“the main database for companies totaling more than $50B in market cap,”</em> and they <em>“have been recognized [...] as one of the fastest growing tech companies in the US.”</em></p>
705. <p>In non-bureaucratic speak, PlanetScale says that the product is failing from one side of its mouth and that the company is wildly successful from the other.</p>
706. <p>The company is doing great. In <a href="https://www.businesswire.com/news/home/20231108393881/en/">November 2023, PlanetScale was ranked as the 188th fastest-growing company in North America</a> by Deloitte Technology Fast 500™. Growth doesn’t necessarily equal revenue, but <em>“to be eligible for Technology Fast 500 recognition, [...] [c]ompanies must have base-year operating revenues of at least US $50,000, and current-year operating revenues of at least US $5 million.”</em></p>
707. <p>PlanetScale’s decision can only be interpreted as “we want more money,” at least to me. There’s nothing about its current performance that suggests it needs the revenue to keep the company alive.</p>
708. <p>That’s a punch below the waist for the developer community, especially considering that those on the free tier are likely independent bootstrappers who need to keep their costs low. And let’s not overlook that ending the free tier was <a href="https://www.theregister.com/2024/03/11/planetscale_lays_off_staff_and/">accompanied by a round of layoffs</a> at the company.</p>
709. <p>PlanetScale’s story is not what worries me; it’s that <strong>retiring freemium plans is becoming standard practice</strong>, as we have seen with the likes of other big PaaS players, including Heroku and Railway.</p>
710. <p>That said, the PlanetScale case is perhaps the most frustrating because the cheapest alternative to the free tier they now offer is a whopping $39 per month. Compare that to the likes of others in that space, such as Heroku ($7 per month) and Railway ($5 per month).</p>
711. Is This How A Free Tier Works?
712. <p>With zero adoption, the value of a new service can’t be seen behind a paywall. Launching any kind of product or service with a freemium pricing model is often used to bring awareness to the product and entice early adopters who might convert into paying customers to help offset the costs of those on the free plan. It’s the old Pareto, or 80/20, rule, where <a href="https://www.psychologytoday.com/us/blog/click-here-for-happiness/202209/how-to-use-the-80-20-rule-to-reach-your-goals">20% of paying customers ought to pay for the 80% of free users</a>.</p>
713. <p>A <strong>conversion rate</strong> is the percentage of users that upgrade from a free tier to a paid one, and an “average” rate depends on the type of free tier or trial being offered.</p>
714. <p>In a freemium model — without sales assist — a good conversion rate is somewhere between 3–5%, but that’s optimistic. Conversion rates are often way lower in reality and perhaps the toughest to improve for startups with few or no customers. Early on, startups often have so few paying customers that they will have to operate at a loss until figuring out a way to land paying customers who can subsidize the ones who aren’t paying anything.</p>
715. <p><img src="https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png" /></p>
716. <p>The longer a company operates at a loss, the more likely it races to generate the highest possible growth before undoubtedly having to cut benefits for free users.</p>
717. <p>A lot of those free users will feel misled and migrate to another service, but once the audience is big enough, a company can afford to lose free customers in favor of the minority that will switch to premium. Take Evernote, for example. The note-taking app allowed free users to save 100,000 notes and 250 notebooks only to do an about-face in 2023 and <a href="https://www.androidpolice.com/evernote-about-to-get-a-lot-less-useful-free-users/">limit free users to 50 notes and one notebook</a>.</p>
718. <p>In principle, a free tier serves the same purpose for SaaS (Software as a System) and PaaS (Product as a System) offerings, but the effects differ. For one, cloud computing costs lots of money, so offering an AWS wrapper in a free tier is significantly harder to sustain. The real difference between SaaS and PaaS, however, is clear when the company decides to kill off its free tier.</p>
719. <p>Let’s take Zoom as a SaaS example: there is a <strong>basic tier</strong> that gives you up to 40 minutes of free meeting time, and that is plenty for people who simply don’t need much beyond that. If Zoom were to remove its free tier, free users would most likely move to other freemium alternatives like Google Meet rather than upgrade to one of Zoom’s paid tiers. Those customers have invested nothing in Zoom that locks them in, so the cost of switching to another meeting app is only the learning curve of what app they switch to.</p>
720. <p>This is in contrast to a PaaS; if the free tier is removed, switching providers introduces costs since a part of your architecture lives in the provider’s free tier. Besides the effort needed to migrate to another provider, moving data and servers can be an expensive operation, thanks to <a href="https://www.cloudflare.com/learning/cloud/what-are-data-egress-fees/#:~:text=Data%20egress%20fees%20are%20charges,for%20cloud%20storage%20and%20computing.">data egress fees</a>. <strong>Data egress fees</strong> are obscure charges that cloud providers make customers pay for moving data from one service to another. They charge you to <em>stop paying</em>!</p>
721. <p>Thankfully, there is an increased awareness of this issue through the European Union’s <a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=COM%3A2022%3A68%3AFIN">Data Act</a> that requires cloud providers located in Europe to remove barriers that prevent customers from easily switching between companies, including the removal of artificial egress fees.</p>
722. The Ethics Of The Free Tier
723. <p>Is it the developer’s fault for hosting a project on a free pricing tier, considering that it can be rolled out at any moment? I have two schools of thought on this: <strong>principle</strong> and <strong>consequential</strong>.</p>
724. <ul>
725. <li><strong>Principle</strong><br />On the one hand, you shouldn’t have to expect a company to pull the rug out from under you by removing a free tier, especially if the company aims to be a reliable and sustainable platform.</li>
726. <li><strong>Consequential</strong><br />On the other hand, you don’t expect someone to cut a red light and hit you when you are driving, but you still look at both sides of the street. So it is with using a free tier. Even if it is “immoral” for a company to remove the tier, a developer ought to have a backup plan in the event that it happens, especially as the disappearance of free tiers becomes more prevalent in the industry.</li>
727. </ul>
728. <p>I think it boils down to a matter of transparency. No free tier is advertised as something that may disappear, even if it will in the future. In this case, a free tier is supposed to be another tier with fewer benefits than the paid plan offerings but just as reliable as the most expensive plan, so no user should expect to migrate their projects to other providers any time soon.</p>
729. What’s The Alternative?
730. <p>Offering customers a free tier only to remove it once the company gets a “healthy enough” share of the market is just wrong, particularly if it was never attached to an up-front sunset date.</p>
731. <p>Pretending that the purpose of a free tier is the same as a free trial is unjust since it surely isn’t advertised that way.</p>
732. <p>If a company wants to give people a taste of how a product or service works, then I think there are far better and more sincere alternatives to the free-tier pricing model:</p>
733. <ul>
734. <li><strong>Free trials (opt-in)</strong><br /><a href="https://strapi.io/">Strapi</a> is an open-source CMS and a perfect example of a service offering a free trial. In 2023, the company <a href="https://strapi.io/blog/strapi-cloud-is-now-available">released a cloud provider</a> to host Strapi CMS with zero configuration. Even though I think Strapi Cloud is on the pricey side, I still appreciate having a 14-day free trial over a free tier that can or maybe will be removed later. The free trial gives users enough time to get a feel for the product, and there’s no credit card required that would lock someone in (because, let’s face it, some companies count on you forgetting to cancel your free subscription before payments kick in).</li>
735. </ul>
736. <p><img src="https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png" /></p>
737. <ul>
738. <li><strong>Free credits</strong><br />I have used Railway to host Node.js + Postgres in the past. I think that its “free tier” is the best example of how to help customers try the service: the cheapest plan is a relatively affordable $5 per month, and a new subscriber is credited with $5 to start the project and evaluate the service, again, without the requirement of handing over credit card information or pulling any rugs out from under people. Want to continue your service after the free credits are exhausted? Buy more credits!</li>
739. </ul>
740. <p>Railway is a particular case because it used to have a free tier, but <a href="https://blog.railway.app/p/introducing-trial-hobby-pro-plans">it was withdrawn on June 2, 2023</a>. However, the company removed it with a level of care and concern for customers that PlanetScale lacked and even gave customers who relied on the free tier a trial account with a number of free credits. It is also important to note (and I can’t get over it) that PlanetScale’s new cheapest plan is $39 per month, while Railway was able to limit the damage to $5 per month.</p>
741. <p><img src="https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png" /></p>
742. Free Tiers That I Use
743. <p>I don’t want this article to be just a listicle of free services but rather the start of a conversation about the “free-tier dilemma”. I also want to share some of the free tiers I use, even for small but production-ready projects.</p>
744. <h3>Supabase</h3>
745. <p>You can make pretty much any imaginable web app using Supabase as the back-end since it brings a PostgreSQL database, authentication, real-time subscriptions, and storage in a central dashboard — complete with a generous allocation of database usage in its free tier.</p>
746. <h3>Railway</h3>
747. <p>I have been using Railway to host Strapi CMS for a long time. Aside from its beautiful UI, Railway includes seamless deployment workflows, automatic scaling, built-in CI/CD pipelines, and integration with popular frameworks and databases thanks to its hundreds of templates. It doesn’t include a free tier <em>per se</em>, but you can get the full feel of Railway with the $5 credit they offer.</p>
748. <h3>GitHub Pages</h3>
749. <p>I use GitHub Pages the way I know many of you do as well: for static pages and technical demos. I have used it before to make live examples for my blog posts. So, it’s more of a playground that I use to make a few artifacts when I need to deploy something fast, but I don’t rely on it for anything that would be of consequence if it were to suddenly go away.</p>
750. <h3>Netlify</h3>
751. <p>Beyond hosting, Netlify offers support for almost all modern frameworks, not to mention that they toss in lots of additional perks, including solid documentation, continuous deployment, templates, an edge network, and analytics — all of which are available in a free tier that pleases almost anyone’s needs.</p>
752. Conclusion
753. <p>If it isn’t totally clear where I fall on the free pricing tier situation, I’m not advocating that we end the practice, but for <strong>more transparency</strong> on the side of the companies that offer free tier plans and increased awareness on the side of developers like myself.</p>
754. <p>I believe that the only way it makes sense to offer a free tier for a SaaS/PaaS is for the company providing it to view it as part of the core product, one that cannot be sunset without a clear and transparent exit strategy, clearly communicated up-front during any sort of registration process. Have a plan for users to painlessly switch services. Allow the customer to make an informed choice and accept responsibility from there.</p>
755. <p><strong>Free tiers should attract users rather than trap them</strong>, and there is an abysmal difference between replacing a free tier for $5 per month with one that costs nearly $40. Taking away the service is one thing; charging exorbitant rates on top of it only adds insult to injury.</p>
756. <p>We can do better here, and there are plenty of alternatives to free tiers for effectively marketing a product.</p>
757. <h3>Further Reading On SmashingMag</h3>
758. <ul>
759. <li>“<a href="https://www.smashingmagazine.com/2022/03/guide-mobile-app-marketing/">A Complete Guide To Mobile App Marketing</a>,” Sona Dabaghyan</li>
760. <li>“<a href="https://www.smashingmagazine.com/2023/06/ia-presenter-case-study-product-pricing-considerations/">iA Presenter: A Case Study On Product Pricing Considerations</a>,” Geoff Graham</li>
761. <li>“<a href="https://www.smashingmagazine.com/2011/09/youre-pricing-it-wrong-software-pricing-demystified/">You’re Pricing It Wrong: Software Pricing Demystified</a>,” Eran Galperin</li>
762. <li>“<a href="https://www.smashingmagazine.com/2017/08/success-quality-of-work/">Is Success Down To The Quality Of Your Work?</a>,” Paul Boag</li>
763. </ul>
764. ]]></content:encoded>
765.            <author>hello@smashingmagazine.com (Juan Diego Rodríguez)</author>
766.            <enclosure url="http://files.smashing.media/articles/end-of-free-tier/end-of-free-tier.jpg" length="0" type="image/jpg"/>
767.        </item>
768.        <item>
769.            <title><![CDATA[Conducting Accessibility Research In An Inaccessible Ecosystem]]></title>
770.            <link>https://smashingmagazine.com/2024/04/conducting-accessibility-research-inaccessible-ecosystem/</link>
771.            <guid>https://smashingmagazine.com/2024/04/conducting-accessibility-research-inaccessible-ecosystem/</guid>
772.            <pubDate>Thu, 25 Apr 2024 12:00:00 GMT</pubDate>
773.            <description><![CDATA[Conducting UX research that includes participants with a variety of disabilities is vital to building inclusive technology, but most prototypes used for testing are inaccessible. Rather than continuing to leave out feedback from disabled consumers, which ultimately leads to exclusive technology, researchers must get creative in their workarounds and be relentless in their efforts.]]></description>
774.            <content:encoded><![CDATA[<p>Ensuring technology is accessible and inclusive relies heavily on receiving feedback directly from disabled users. You cannot rely solely on checklists, guidelines, and good-faith guesses to get things right. This is often hindered, however, by a lack of accessible prototypes available to use during testing. </p>
775. <p>Rather than wait for the digital landscape to change, researchers should leverage all the available tools they can use to create and replicate the testing environments they need to get this important research completed. Without it, we will continue to have a primarily inaccessible and not inclusive technology landscape that will never be disrupted.</p>
776. <p><strong>Note</strong>: <em>I use “identity first” disability language (as in “disabled people”) rather than “people first” language (as in “people with disabilities”). Identity first language aligns with disability advocates who see disability as a human trait description or even community and not a subject to be avoided or shamed. For more, review “<a href="https://www.nih.gov/about-nih/what-we-do/science-health-public-trust/perspectives/writing-respectfully-person-first-identity-first-language">Writing Respectfully: Person-First and Identity-First Language</a>”.</em></p>
777. Accessibility-focused Research In All Phases
778. <p>When people advocate that UX Research should include disabled participants, it’s often with the mindset that this will happen on the final product once development is complete. One primary reason is because that’s when researchers have access to <em>the most</em> accessible artifact with which to run the study. However,</p>
779. <p>The real ability to ensure an accessible and inclusive system is not by evaluating a final product at the end of a project; it’s by assessing user needs at the start and then evaluating the iterative prototypes along the way. </p>
780. <h3>Prototype Research Should Include Disabled Participants</h3>
781. <p>In general, the iterative prototype phase of a project is when teams explore various design options and make decisions that will influence the final project outcome. Gathering feedback from representative users during this phase can help teams make informed decisions, including key pivots before significant development and testing resources are used. </p>
782. <p>During the prototype phase of user testing, the representative users should include disabled participants. By collecting feedback and perspectives of people with a variety of disabilities in early design testing phases, teams can more thoughtfully incorporate key considerations and supplement accessibility guidelines with real-world feedback. This <strong>early-and-often approach</strong> is the best way to include accessibility and inclusivity into a process and ensure a more accessible final product.</p>
783. <p>If you instead wait to include disabled participants in research until a product is near final, this inevitably leads to patchwork fixes of any critical feedback. Then, for feedback not deemed critical, it will likely get “backlogged” where <strong>the item priorities compete with new feature updates</strong>. With this approach, you’ll constantly be playing catch-up rather than getting it right up front and in an elegant and integrated way.</p>
784. <h3>Accessibility Research Can’t Wait Until The End</h3>
785. <p>Not only does research with disabled participants often occur too late in a project, but it is also far too often viewed as separate from other research studies (sometimes referred to as the “main research”). It cannot be understated that this reinforces the <strong>notion of separate-and-not-equal</strong> as compared to non-disabled participants and other stakeholder feedback. This has a severe negative impact on how a team will view the priority of inclusive design and, more broadly, the value of disabled people. That is, this reinforces “<a href="https://www.accessliving.org/newsroom/blog/ableism-101/">ableism</a>”, a devaluing of disabled people in society.</p>
786. <p>UX Research with diverse participants that include a wide variety of disabilities can go a long way in dismantling ableist views and creating vitally needed inclusive technology.</p>
787. <p>The problem is that even when a team is on board with the idea, it’s not always easy to do inclusive research, particularly when involving prototypes. While discovery research can be conducted with minimal tooling and summative research can leverage fully built and accessible systems, prototype research quickly reveals severe accessibility barriers that feel like they can’t be overcome.</p>
788. Inaccessible Technology Impedes Accessibility Research
789. <p>Most technology we use has accessibility barriers for users with disabilities. As an example, <a href="https://webaim.org/projects/million/">the WebAIM Million report</a> consistently finds that <strong>96% of web homepages have accessibility errors</strong> that are fixable and preventable. </p>
790. <p>Just like websites, web, and mobile applications are similarly inaccessible, including those that produce early-stage prototypes. Thus, the artifacts researchers might want to use for prototype testing to help create accessible products are themselves inaccessible, creating a barrier for disabled research participants. It quickly becomes a vicious cycle that seems hard to break. </p>
791. <h3>The Limitations Of Figma</h3>
792. <p>Currently, the most popular industry tool for initial prototyping is Figma. These files become the artifacts researchers use to conduct a research study. However, these files often fall short of being accessible enough for many participants with disabilities. </p>
793. <p>To be clear, I absolutely applaud the Figma employees who have worked very hard on including <a href="https://help.figma.com/hc/en-us/articles/7810391964695-Accessible-prototypes-in-Figma">screen reader support and keyboard functionality in Figma prototypes</a>. This represents significant progress towards removing accessibility barriers in our core products and should not be overlooked. Nevertheless, there are still limitations and even blockers to research.</p>
794. <p>For one, the Figma files must be created in a way that will mimic the website layout and code. For example, for screen reader navigation to be successful, <strong>the elements need to be in their correct reading order in the Layers panel</strong> (not solely look correct visually), include <strong>labeled elements such as buttons</strong> (not solely items styled to look like buttons), and include <strong>alternative text for images</strong>. Often, however, designers do not build iterative prototypes with these considerations in mind, which prevents the keyboard from navigating correctly and the screen reader from providing the necessary details to comprehend the page. </p>
795. <p>In addition, Figma’s prototypes do not have selectable, configurable text. This prevents key visual adjustments such as browser zoom to increase text size, dark mode, which is easier for some to view, and selecting text to have it read aloud. If a participant needs these kinds of adjustments (or others I list in the table below), a Figma prototype will not be accessible to them.</p>
796. <p><strong>Table:</strong> Figma prototype limitations per assistive technology</p>
797. <table>
798.    <thead>
799.        <tr>
800.            <th>Assistive Technology</th>
801.            <th>Disability Category</th>
802.      <th>Limitation</th>
803.        </tr>
804.    </thead>
805.    <tbody>
806.        <tr>
807.            <td>Keyboard-only navigation</td>
808.            <td>Mobility</td>
809.      <td>Must use proper element type (such as button or input) in expected page order to ensure operability</td>
810.        </tr>
811.        <tr>
812.            <td>Screen reader</td>
813.            <td>Vision</td>
814.      <td>Must include structure to ensure readability:<ul><li>Including elements in logical order to ensure correct reading order</li><li>Alternative text added to images</li><li>Descriptive names added for buttons</li></ul></td>
815.        </tr>
816.        <tr>
817.            <td>Dark mode/High contrast mode</td>
818.            <td>Low Vision<br />Neurodiversity</td>
819.      <td>Not available</td>
820.        </tr>
821.    <tr>
822.            <td>Browser zoom</td>
823.            <td>Low Vision<br />Neurodiversity<br />Mobility</td>
824.      <td>Not available</td>
825.        </tr>
826.    <tr>
827.            <td>Screen reader used with mouse hover<br />Read aloud software with text selection</td>
828.            <td>Vision<br />Neurodiversity</td>
829.      <td>Cannot be used</td>
830.        </tr>
831.    <tr>
832.            <td>Voice control<br />Switch control device</td>
833.            <td>Mobility</td>
834.      <td>Cannot be used</td>
835.        </tr>
836.    </tbody>
837. </table>
838.  
839. <h3>Inclusive Research Is Needed Regardless</h3>
840. <p>Having accessibility challenges with a prototype doesn’t mean we give up on the research. Instead, it means <strong>we need to get creative in our approach</strong>. This research is too important to keep waiting for the ideal set-up, particularly when our findings are often precisely what’s needed to create accessible technology.</p>
841. <p>Part of crafting a research study is determining what artifact to use during the study. Thus, when considering prototype research, it is a matter of creating the artifact best suited for your study. If this isn’t going to be, say, a Figma file you receive from designers, then consider what else can be used to get the job done.</p>
842. Working Around the Current State
843. <p>Being able to include diverse perspectives from disabled research participants throughout a project’s creation is possible and necessary. Keeping in mind your research questions and the capabilities of your participants, there are research methods and strategies that can be made accessible to gather authentic feedback during the critical prototype design phase. </p>
844. <p>With that in mind, I propose five ways you can accomplish prototype research while working around inaccessible prototypes:</p>
845. <ol>
846. <li><a href="#use-a-survey-instead">Use a survey.</a></li>
847. <li><a href="#conduct-co-design-sessions">Conduct a co-design session.</a></li>
848. <li><a href="#test-with-an-equivalent-system">Test with a similar system.</a></li>
849. <li><a href="#build-a-rapid-website-prototype">Build your own rapid prototype.</a></li>
850. <li><a href="#use-wizard-of-oz">Use the Wizard of Oz method.</a></li>
851. </ol>
852. <h3>Use a Survey Instead</h3>
853. <p>Not all research questions at this phase need a full working prototype to be answered, particularly if they are about the general product features or product wording and not the visual design. Oftentimes, a survey tool or similar type of evaluation can be just as effective.</p>
854. <p>For example, you can confirm a site’s navigation options are intuitive by describing a scenario with a list of navigation choices while also testing if key content is understandable by confirming the user’s next steps based on a passage of text.</p>
855. <p><img src="https://files.smashing.media/articles/conducting-accessibility-research-inaccessible-ecosystem/example-survey.png" /></p>
856. <div>
857.    
858.          
859.              <div>
860.                <div>
861.                  Image description
862.                </div>
863.              </div>
864.              <div>
865.                  +
866.              </div>
867.          
868.          
869.              <div>
870.                <p>Acme Company Website Survey<br /><br />Complete this questionnaire to help us determine if our site will be understandable.<br /><br />
871.                </p><ol>
872.                    <li>Scenario: You want to find out this organization's mission statement. Which menu option do you choose?<br />[List of radio buttons]
873.                        <ul>
874.                            <li>Home</li>
875.                            <li>About</li>
876.                            <li>Resources</li>
877.                            <li>Find an Office</li>
878.                            <li>Search</li>
879.                        </ul>
880.                    </li>
881.                <li>The following describes directions for applying to our grant. After reading, answer the following question:<br /><br />The Council’s Grant serves to advance Acme's goals by sponsoring community events. In determining whether to fund an event, the Council also considers factors including, but not limited to:<br />
882.                    <ul>
883.                        <li>Target audiences</li>
884.                        <li>Alignment with the Council’s goals and objectives</li>
885.                        <li>Evaluations measuring participant satisfaction</li>
886.                    </ul>
887.                </li>
888.              </ol>
889. To apply, download the form below.<br /><br />
890. Based on this wording, what would you include in your grant application?<br />[Input Field]<p></p>
891.             </div>
892.        
893.    
894. </div>
895.  
896. <p>Just be sure you build a WCAG-compliant survey that includes accessible form layouts and question types. This will ensure participants can navigate using their assistive technologies. For example, <a href="https://www.qualtrics.com/support/survey-platform/survey-module/survey-tools/check-survey-accessibility/">Qualtrics</a> has a specific form layout that is built to be accessible, or check out these <a href="https://accessibility.wfu.edu/resources/accessible-google-forms/">accessibility tips for Google Forms</a>. If sharing a document, note features that will enhance accessibility, such as using the ribbon for styling in <a href="https://support.microsoft.com/en-us/office/make-your-word-documents-accessible-to-people-with-disabilities-d9bf3683-87ac-47ea-b91a-78dcacb3c66d">Microsoft Word</a>.</p>
897. <p><strong>Tip</strong>: <em>To find accessibility documentation for the software you’re using, search in your favorite search engine for the product name plus the word “accessibility” to find a product’s accessibility documentation.</em></p>
898. <h3>Conduct Co-design Sessions</h3>
899. <p>The prototyping phase might be a good time to utilize <a href="https://uxmag.com/articles/creativity-based-research-the-process-of-co-designing-with-users">co-design and participatory design methods</a>. With these methods, you can co-create designs with participants using any variety of artifacts that match the capabilities of your participants along with your research goals. The feedback can range from high-level workflows to specific visual designs, and you can guide the conversation with mock-ups, equivalent systems, or more creative artifacts such as <a href="https://www.interaction-design.org/literature/article/ux-storyboards">storyboards</a> that illustrate a scenario for user reaction.</p>
900. <p>For the prototype artifacts, these can range from low- to high-fidelity. For instance, participants without mobility or vision impairments can use paper-and-pencil sketching or whiteboarding. People with somewhat limited mobility may prefer a tablet-based drawing tool, such as using an Apple pencil with an iPad. Participants with visual impairments may prefer more 3-dimensional tools such as craft supplies, modeling clay, and/or cardboard. Or you may find that simply working on a collaborative online document offers the best accessibility as users can engage with their personalized assistive technology to jot down ideas. </p>
901. <p>Notably, the types of artifacts you use will be beneficial across differing user groups. In fact, rather than limiting the artifacts, <strong>try to offer a variety of ways to provide feedback by default</strong>. By doing this, participants can feel more empowered and engaged by the activity while also reassuring them you have created an inclusive environment. If you’re not sure what options to include, feel free to confirm what methods will work best as you recruit participants. That is, as you describe the primary activity when they are signing up, you can ask if the materials you have will be operable for the participant or allow them to tell you what they prefer to use.</p>
902. <p>The discussion you have and any supplemental artifacts you use then depend on communication styles. For example, deaf participants may need sign language interpreters to communicate their views but will be able to see sample systems, while blind participants will need descriptions of key visual information to give feedback. The actual study facilitation comes down to <strong>who you are recruiting</strong> and <strong>what level of feedback you are seeking</strong>; from there, you can work through the accommodations that will work best.</p>
903. <p>I conducted two co-design sessions at two different project phases while exploring how to create a wearable blind pedestrian navigation device. Early in the project, when we were generally talking about the feature set, we brought in several low-fidelity supplies, including a Braille label maker, cardboard, clay, Velcro, clipboards, tape, paper, and pipe cleaners. Based on user feedback, I fashioned a clipboard hanging from pipe cleaners as one prototype.</p>
904. <p>Later in the project when we were discussing the size and weight, we taped together Arduino hardware pieces representing the features identified by the participants. Both outcomes are pictured below and featured in a paper entitled, “<a href="https://dl.acm.org/doi/pdf/10.1145/2745555.2746664">What Not to Wearable: Using Participatory Workshops to Explore Wearable Device Form Factors for Blind Users</a>.”</p>
905. <p><img src="https://files.smashing.media/articles/conducting-accessibility-research-inaccessible-ecosystem/co-design-prototype.png" /></p>
906. <p><img src="https://files.smashing.media/articles/conducting-accessibility-research-inaccessible-ecosystem/co-design-prototype-two.png" /></p>
907. <p>Ultimately, the benefit of this type of study is the participant-led feedback. In this way, participants are giving <strong>unfiltered feedback</strong> that is less influenced by designers, which may lead to more thoughtful design in the end.</p>
908. <h3>Test With an Equivalent System</h3>
909. <p>Very few projects are completely new creations, and often, teams use an existing site or application for project inspiration. Consider using similar existing systems and equivalent scenarios for your testing instead of creating a prototype.</p>
910. <p>By using an existing live system, participants can then use their assistive technology and adaptive techniques, which can make the study <strong>more accessible and authentic</strong>. Also, the study findings can range from the desirability of the available product features to the accessibility and usability of individual page elements. These lessons can then inform what design and code decisions to make in your system.</p>
911. <p>One caveat is to <strong>be aware of any accessibility barriers in that existing system</strong>. Particularly for website and web applications, you can look for accessibility documentation to determine if the company has reported any WCAG-conformance accessibility efforts, use tools like <a href="https://wave.webaim.org/">WAVE</a> to test the system yourself, and/or mimic how your participants will use the system with their assistive technology. If there are workarounds for what you find, you may be able to avoid certain parts of the application or help users navigate past the inaccessible parts. However, if the site is going to be completely unusable for your participants, this won’t be a viable option for you.</p>
912. <p>If the system is usable enough for your testing, however, you can take the testing a step further by making updates on the fly if you or someone you collaborate with has engineering experience. For example, you can manipulate a website’s code with developer tools to add, subtract, or change the elements and styling on a page in real-time. (See “<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools">About browser developer tools</a>”.) This can further enhance the feedback you give to your teams as it may more closely match your team’s intended design.</p>
913. <p><img src="https://files.smashing.media/articles/conducting-accessibility-research-inaccessible-ecosystem/devtools-inspector.png" /></p>
914. <h3>Build a Rapid Website Prototype</h3>
915. <p>Notably, when conducting research focused on physical devices and hardware, you will not face the same obstacles to inaccessibility as with websites and web applications. You can use a variety of materials to create your prototypes, from cardboard to fabric to 3D printed material. I’ve sewn haptic vibration modules to a makeshift leather bracelet when working with wearables, for instance.</p>
916. <p>However, for web testing, it may be necessary to build a rapid prototype, especially to work around inaccessible artifacts such as a Figma file. This will include using a site builder that allows you to quickly create a replica of your team’s website. To create an accessible website, you’ll need a site builder with accessibility features and capabilities; I recommend <a href="https://wordpress.com/support/accessibility/">WordPress</a>, <a href="https://support.squarespace.com/hc/en-us/articles/215129127-Accessibility-resources-at-Squarespace">SquareSpace</a>, <a href="https://webflow.com/accessibility">Webflow</a>, and <a href="https://support.google.com/sites/answer/7529116?hl=en">Google Sites</a>.</p>
917. <p>I recently used <a href="https://support.google.com/a/users/answer/9310491?hl=en">Google Sites</a> to create a replica of a client’s draft pages in a matter of hours. I was adamant we should include disabled participants in feedback loops early and often, and this included after a round of significant visual design and content decisions. The web agency building the client’s site used Figma but not with the required formatting to use the built-in screen reader functionality. Rather than leave out blind user feedback at such a crucial time in the project, I started with a similar Google Sites template, took a best guess at how to structure the elements such as headings, recreated the anticipated column and card layouts as best I could, and used placeholder images with projected alt text instead of their custom graphics.</p>
918. <p><img src="https://files.smashing.media/articles/conducting-accessibility-research-inaccessible-ecosystem/sample-sites-grouped.png" /></p>
919. <p>The screen reader testing turned into an impromptu co-design session because I could make changes in-the-moment to the live site for the participant to immediately test out. For example, we determined that some places where I used headings were not necessary, and we talked about image alt text in detail. I was able to add specific design and code feedback to my report, as well as share the live site (and corresponding code) with the team for comparison.</p>
920. <p>The downside to my prototype was that I couldn’t create the exact 1-to-1 visual design to use when testing with the other disabled participants who were sighted. I wanted to gather feedback on colors, fonts, and wording, so I also recruited low vision and neurodiverse participants for the study. However, my data was skewed because those participants couldn’t make the visual adjustments they needed to fully take in the content, such as recoloring, resizing, and having text read aloud. This was unfortunate, but we at least used the prototype to spark discussions of what <em>does</em> make a page accessible for them.</p>
921. <p>You may find you are limited in how closely you can replicate the design based on the tools you use or lack of access to developer assistance. When facing these limitations, consider what is most important to evaluate and <strong>determine if a paired-down version of the site will still give you valuable feedback over no site at all</strong>.</p>
922. <h3>Use Wizard of Oz</h3>
923. <p>The Wizard of Oz (WoZ) research method involves the facilitators mimicking system interactions in place of a fully working system. With WoZ, you can create your system’s approximate functionality using equivalent accessible tools and processes.</p>
924. <p>As an example, I’ll refer you to the talk by an Ally Financial research team that used this method for participants who used screen readers. They pre-programmed screen reader prompts into a clickable spreadsheet and had participants describe aloud what keyboard actions they would take to then trigger the corresponding prompt. While not the ideal set-up for the participants or researchers, it at least brought screen reader user feedback (and recognition of the users themselves) to the early design phases of their work. For more, review their detailed talk “<a href="https://www.youtube.com/watch?v=lCuK_djeCtg&amp;pp=ygVOYWxseSBmaW5hbmNpYWwgcmVtb3ZpbmcgYmlhcyB3aXRoIHdpemFyZCBvZiBveiBzY3JlZW4gcmVhZGVyIHVzYWJpbGl0eSB0ZXN0aW5n">Removing bias with wizard of oz screen reader usability testing</a>”.</p>
925. <p><img src="https://files.smashing.media/articles/conducting-accessibility-research-inaccessible-ecosystem/woz-testing.png" /></p>
926. <p>This isn’t just limited to screen reader testing, however. In fact, I’ve also often used Wizard of Oz for Voice User Interface (VUI) design. For instance, when I helped create an Alexa “skill” (their name for an app on Amazon speech-enabled devices), our prototype wouldn’t be ready in time for user testing. So, I drafted an idea to use a Bluetooth speaker to announce prompts from a clickable spreadsheet instead. When participants spoke a command to the speaker (thinking it was an Alexa device), the facilitator would select the appropriate pre-recorded prompt or a generic “I don’t understand” message.</p>
927. <p>Any system can be mimicked when you break down its parts and pieces and think about the ultimate interaction for the user. Creating WoZ set-ups can take creativity and even significant time to put together, but the outcomes can be worth it, particularly for longer-term projects. Once the main pieces are created, the prototype set-up can be edited and reused indefinitely, including during the study or between participants. Also, the investment in an easily edited prototype pays off exponentially if it uncovers something prior to finishing the entire product. In fact, that’s the main goal of this phase of testing: <strong>to help teams know what to look out for before they go through the hard work of finishing the product</strong>.</p>
928. Inclusive Research Can No Longer Wait
929. <p>Much has been documented about inclusive design to help teams craft technology for the widest possible audience. From the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a> that help define what it means to be accessible to the <a href="https://inclusive.microsoft.design/">Microsoft Inclusive Design Toolkits</a> that tell the human stories behind the guidelines, there is much to learn even before a product begins. </p>
930. <p>However, the best approach is with <strong>direct user feedback</strong>. With this, we must recognize the conundrum many researchers are facing: We want to include disabled participants in UX research prior to a product being complete, but often, prototypes we have available for testing are inaccessible. This means testing with something that is essentially broken and will negatively impact our findings.</p>
931. <p>While it may feel like researchers will always be at a disadvantage if we don’t have the tools we need for testing, I think, instead, it’s time for us to push back. I propose we do this on two fronts:</p>
932. <ol>
933. <li>We make the research work as best we can in the current state.</li>
934. <li>We advocate for the tools we need to make this more streamlined.</li>
935. </ol>
936. <p>The key is to <strong>get disabled perspectives on the record and in the dataset of team members making the decisions</strong>. By doing this, hopefully, we shift the culture to wanting and valuing this feedback and bringing awareness to what it takes to make it happen.</p>
937. <p>Ideally, the awareness raised from our bootstrap efforts will lead to more people helping reduce the current prototype barriers. For some of us, this means urging companies to prioritize accessibility features in their roadmaps. For those working within influential prototype companies, it can mean getting much-needed backing to innovate better in this area.</p>
938. <p>The current state of our inaccessible digital ecosystem can sometimes feel like an entanglement too big to unravel. However, we must remain steadfast and insist that this does not remain the status quo; <strong>disabled users are users</strong>, and their diverse and invaluable perspectives must be a part of our research outcomes at all phases.</p>
939. ]]></content:encoded>
940.            <author>hello@smashingmagazine.com (Michele Williams)</author>
941.            <enclosure url="http://files.smashing.media/articles/conducting-accessibility-research-inaccessible-ecosystem/conducting-accessibility-research-inaccessible-ecosystem.jpg" length="0" type="image/jpg"/>
942.        </item>
943.        <item>
944.            <title><![CDATA[Using AI For Neurodiversity And Building Inclusive Tools]]></title>
945.            <link>https://smashingmagazine.com/2024/04/ai-neurodiversity-building-inclusive-tools/</link>
946.            <guid>https://smashingmagazine.com/2024/04/ai-neurodiversity-building-inclusive-tools/</guid>
947.            <pubDate>Wed, 24 Apr 2024 15:00:00 GMT</pubDate>
948.            <description><![CDATA[This article illustrates how AI can be leveraged to build tools that can be inclusive with a little bit of an additional effort.]]></description>
949.            <content:encoded><![CDATA[<p>In 1998, Judy Singer, an Australian sociologist working on biodiversity, coined the term “<a href="https://www.psychologytoday.com/us/basics/neurodiversity">neurodiversity</a>.” It means every individual is unique, but sometimes this uniqueness is considered a deficit in the eyes of neuro-typicals because it is uncommon. However, <strong>neurodiversity is the inclusivity of these unique ways of thinking, behaving, or learning</strong>.</p>
950. <p>Humans have an innate ability to classify things and make them simple to understand, so neurodivergence is classified as something different, making it much harder to accept as normal.</p>
951. <blockquote>“Why not propose that just as biodiversity is essential to ecosystem stability, so neurodiversity may be essential for cultural stability?”<br /><br />— Judy Singer</blockquote>
952.  
953. <p>Culture is more abstract in the context of biodiversity; it has to do with values, thoughts, expectations, roles, customs, social acceptance, and so on; things get tricky.</p>
954. <p>Discoveries and inventions are driven by personal motivation. Judy Singer started exploring the concept of neurodiversity because her daughter was diagnosed with autism. Autistic individuals are people who are socially awkward but are very passionate about particular things in their lives. Like Judy, we have a moral obligation as designers to create products everyone can use, including these unique individuals. With the advancement of technology, inclusivity has become far more important. It should be a priority for every company.</p>
955. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/1-statistics-neurodiverse-people.png" /></p>
956. <p>As AI becomes increasingly tangled in our technology, we should also consider how being more inclusive will help, mainly because we must recognize such a significant number. AI allows us to design affordable, adaptable, and supportive products. Normalizing the phenomenon is far easier with AI, and it would help build personalized tools, reminders, alerts, and usage of language and its form.</p>
957. <p>We need to remember that these changes should not be made only for neurodiverse individuals; it would help everyone. Even neurotypicals have different ways of grasping information; some are kinesthetic learners, and others are auditory or visual. </p>
958. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/2-diverse-thinking-different-way.png" /></p>
959. <p>Diverse thinking is just a different way of approaching and solving problems. Remember, many great minds are neurodiverse. Alan Turing, who cracked the code of enigma machines, was autistic. Fun fact: he was also the one who built the first AI machine. Steve Jobs, the founder and pioneer design thinker, had dyslexia. Emma Watson, famously known for her role as Hermione Granger from the Harry Potter series, has Attention-Deficit/Hyperactivity Disorder (ADHD). There are many more innovators and disruptors out there who are different.</p>
960. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/3-innovators.png" /></p>
961. <p><strong>Neurodivergence</strong> is a <a href="https://www.forbes.com/health/mind/what-is-neurodivergent/#:~:text=Neurodivergent%20is%20a%20non%2Dmedical,%2Fhyperactivity%20disorder%20(ADHD">non-medical umbrella term</a>.) used to classify brain function, behavior, and processing, which is different from normal. Let’s also keep in mind that these examples and interpretations are meant to shed some light on the importance of the neglected topic. It should be a reminder for us to invest further and investigate how we can make this rapidly growing technology in favor of this group as we try to normalize neurodiversity.</p>
962. Types Of Neurodiversities
963. <ul>
964. <li><a href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd"><strong>Autism</strong></a>: Autism spectrum disorder (ASD) is a neurological and developmental disorder that affects how people interact with others, communicate, learn, and behave.</li>
965. <li><strong>Learning Disabilities</strong><br />The common learning disabilities:<ul>
966. <li><a href="https://my.clevelandclinic.org/health/diseases/6005-dyslexia">Dyslexia</a>: Difficulty reading;</li>
967. <li><a href="https://my.clevelandclinic.org/health/diseases/23949-dyscalculia">Dyscalculia</a>: Difficulty with numbers;</li>
968. <li><a href="https://my.clevelandclinic.org/health/diseases/23963-dyspraxia-developmental-coordination-disorder-dcd">Dyspraxia</a>: Difficulty in coordination;</li>
969. <li><a href="https://my.clevelandclinic.org/health/diseases/23294-dysgraphia">Dysgraphia</a>: Difficulty with writing.</li>
970. </ul>
971. </li>
972. <li><a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd"><strong>Attention-Deficit/Hyperactivity Disorder</strong></a> (ADHD): An ongoing pattern of inattention and/or hyperactivity-impulsivity that interferes with functioning or development.</li>
973. </ul>
974. Making AI Technology More Neuro-inclusive
975. <p><a href="https://www.ibm.com/topics/artificial-intelligence">Artificial Intelligence (AI)</a> enables machines to think and perform tasks. However, this thinking is based on algorithmic logic, and that logic is based on multiple examples, books, and information that AI uses to generate the resulting output. The network of information that AI mimics is just like our brains; it is called a neural network, so data processing is similar to how we process information in our brains to solve a problem.  </p>
976. <p>We do not need to do anything special for neurodiversity, which is the beauty of AI technology in its current state. Everything already exists; it is the usage of the technology that needs to change.</p>
977. <p>There are many ways we could improve it. Let’s look at four ways that are crucial to get us started.</p>
978. <h3>Workflow Improvements</h3>
979. <p><strong>For: Autistic and ADHD</strong><br /><strong>Focus: Working memory</strong></p>
980. <p>Gartner found that <a href="https://www.gartner.com/en/newsroom/press-releases/2022-08-22-gartner-survey-reveals-80-percent-of-executives-think-automation-can-be-applied-to-any-business-decision">80% of executives think automation</a> can be applied to any business decision. Businesses realized that a tactical approach is less successful than a strategic approach to using AI. For example, it can support business decisions that would otherwise require a lot of manual research.</p>
981. <p>AI has played a massive role in automating various tasks till now and will continue to do so in the future; it helps users reduce the time they spend on repetitive aspects of their jobs. It saves users a lot of time to focus their efforts on things that matter. Mundane tasks get stacked in the working memory; however, there is a limit: humans can keep up to <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2864034/">3–5 ideas</a> simultaneously. If there are more than five ideas at play, humans ought to forget or miss something unless they document it. When completing these typical but necessary tasks, it becomes time-consuming and frustrating for users to focus on their work. This is especially <a href="https://neurodivergentinsights.com/mentalhealthresources/memory-strategies#:~:text=Neurodivergent%20Memory&amp;text=When%20we%20have%20more%20difficulty,is%20often%20impacted%20in%20ADHD.">troublesome for neurodivergent employees</a>.</p>
982. <p>Autistic and ADHD users might have difficulty following through or focusing on aspects of their work, especially if it does not interest them. Straying thoughts is not uncommon; it makes it even harder to concentrate. Autistic individuals are hyper-focused, preventing them from grasping other relevant information. On the contrary, ADHD users lose focus quickly as their attention span is limited, so their working memory takes a toll.</p>
983. <p>AI could identify this and help users overcome it. Improving and automating the workflow will allow them to focus on the critical tasks. It means <strong>less distractions and more direction</strong>. Since they have trouble with working memory, allowing the tool to assist them in capturing moments to help recall later would benefit them greatly.</p>
984. <h4>Example That Can Be Improved</h4>
985. <p><a href="https://zoom.us/">Zoom</a> recently launched its AI companion. When a user joins a meeting as a host, they can use this tool for various actions. One of those actions is to summarize the meeting. It auto-generates meeting notes at the end and shares them. AI companion is an excellent feature for automating notes in the meeting, allowing all the participants to not worry about taking notes.</p>
986. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/4-zoom-ai-companion.png" /></p>
987. <p><strong>Opportunity</strong>: Along with the auto-generated notes, Zoom should allow users to take notes in-app and use them in their summaries. Sometimes, users get tangent thoughts or ideas that could be useful, and they can create notes. It should also allow users to choose the type of summary they want, giving them more control over it, e.g., short, simplified, or list. AI could also personalize this content to allow participants to comprehend it in their own way. Autistic users would benefit from their hyper-focused attention in the meeting. ADHD users can still capture those stray thoughts, which the AI will summarize in the notes. Big corporations usually are more traditional with incremental improvements. Small tech companies have less to lose, so we often see innovation there.</p>
988. <h4>Neurodivergent Friendly Example</h4>
989. <p><a href="https://fireflies.ai">Fireflies.ai</a> is an excellent example of how neuro-inclusivity can be considered, and it covers all the bases Zoom falls short of. It auto-generates meeting notes. It also allows participants to take notes, which are then appended to the auto-generated summary: this summary can be in a bullet list or a paragraph. The tool can also transcribe from the shared slide deck within the summary. It shares audio snippets of important points alongside the transcription. The product can support neurodivergent users far better.</p>
990. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/5-fireflies-ai.png" /></p>
991. <h3>Natural Language Processing</h3>
992. <p><strong>For: Autistic, Learning Disabilities, and ADHD</strong><br /><strong>Focus: Use simple words and give emotional assistance</strong></p>
993. <p>Words have different meanings for all. Some might understand the figurative language, but others might get offended by the choice of it. If this is so common with a neurotypical, imagine how tricky it will be for a neurodivergent. Autistic users have difficulty understanding metaphorical language and empathizing with others. Learning disabilities will have trouble with language, especially figurative language, which perplexes them. ADHD users have a short attention span, and using complex sentences would mean they will lose interest.</p>
994. <p>Using simple language aids users far better than complex sentence constructions for neurodivergent. Metaphors, jargon, or anecdotal information might be challenging to interpret and frustrate them. The frustration could avert them from pursuing things that they feel are complex. Providing them with a form of motivation by allowing them to understand and grow will enable them to pursue complexities confidently. AI could help multifold by breaking down the complex into straightforward language.</p>
995. <h4>Example That Can Be Improved</h4>
996. <p><a href="http://www.grammarly.com/">Grammarly</a> is a great tool for correcting and recommending language changes. It has grammatical and Grammarly-defined rules based on which the app makes recommendations. It also has a feature that allows users to select the tone of voice or goals, casual or academic style, enhancing the written language to the expectation. Grammarly also lets organizations define style guides; it could help the user write based on the organization’s expectations.</p>
997. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/6-grammarly.png" /></p>
998. <p><strong>Opportunity</strong>: Grammarly still needs to implement a gen AI assistive technology, but that might change in the future. Large learning models (LLM) can further convert the text into inclusive language considering cultural and regional relevance. Most presets are specific to the rules Grammarly or the organization has defined, which is limiting. Sentimental analysis is still not a part of their rules. For example, if the write-up is supposed to be negative, the app recommends changing or making it positive.</p>
999. <h4>Neurodivergent Friendly Example</h4>
1000. <p><a href="https://writer.com/">Writer</a> is another beautiful product that empowers users to follow guidelines established by the organization and, obviously, the grammatical rules. It provides various means to rewrite sentences that make sense, e.g., simplify, polish, shorten, and so on. Writers also assist with sentence reconstruction and recommendation based on the type of content the user writes, for instance, an error or a tooltip. Based on those features and many more under the gen AI list, Writer can perform better for neurodivergent users.</p>
1001. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/7-writer.png" /></p>
1002. <h3>Cognitive Assistance</h3>
1003. <p><strong>For: Autistic, Learning Disabilities, and ADHD</strong><br /><strong>Focus: Suggestive technology</strong></p>
1004. <p><a href="https://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act 2010</a> was established to bring workplace equality with legislation on neurodiversity. Employers need to understand the additional needs of neurodivergent employees and make amendments to existing policies to incorporate them. The essence of the Equality Act can be translated into actionable digital elements to bring equality of usage of products.</p>
1005. <p>Neurodiverse or not, cognitive differences are present in both groups. The gap becomes more significant when we talk about them separately. Think about it: <strong>all AI assistive technologies are cognition supplements</strong>.</p>
1006. <p><a href="https://cognassist.com/insights/cognition-and-neurodiversity-8-reasons-why-cognition-matters-for-neuro-inclusion/">Cognoassist</a> did a study to understand cognition within people. They found that less than 10% of them score within a typical range of assessment. It proves that the difference is superficial, even if it is observable.</p>
1007. <p>Cognition is not just intelligence but a runway of multiple mental processes, irrespective of the neural inclination. It is just a different way of cognition and reproduction than normal. Nonetheless, neurodivergent users need assistive technologies more than neuro-typicals; it fills the gap quickly. This will allow them to function at the same level by making technology more inclusive.</p>
1008. <h4>Example That Can Be Improved</h4>
1009. <p><a href="https://clickup.com/">ClickUp</a> is a project management tool that has plenty of automation baked into it. It allows users to automate or customize their daily routine, which helps everyone on the team to focus on their goals. It also lets users connect various productivity and management apps to make it a seamless experience and a one-stop shop for everything they need. The caveat is that the automation is limited to some actions.</p>
1010. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/8-clickup.png" /></p>
1011. <p><strong>Opportunity</strong>: Neurodivergent users sometimes need more cognitive assistance than neuro-typicals. Initiating and completing tasks is difficult, and a push could help them get started or complete them. The tool could also help them with organization, benefiting them greatly. Autistic individuals prefer to complete a task in one go, while ADHD people like to mix it up as they get the necessary break from each task and refocus. An intelligent AI system could help users by creating more personalized planned days and a to-do list to get things started.</p>
1012. <h4>Neurodivergent Friendly Example</h4>
1013. <p><a href="https://www.usemotion.com/">Motion</a> focuses on planning and scheduling the user’s day to help with their productivity goals. When users connect their calendars to this tool, they can schedule their meetings with AI by considering heads-down time or focused attention sessions based on each user’s requirement. The user can personalize their entire schedule according to their liking. The tool will proactively schedule incoming meetings or make recommendations on time. This AI assistive technology also aids them with planning around deadlines.</p>
1014. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/9-motion.png" /></p>
1015. <h3>Adaptive Onboarding</h3>
1016. <p><strong>For: Learning Disabilities and ADHD</strong><br /><strong>Focus: Reduce Frustration</strong></p>
1017. <p>According to Epsilon, <a href="https://www.epsilon.com/us/about-us/pressroom/new-epsilon-research-indicates-80-of-consumers-are-more-likely-to-make-a-purchase-when-brands-offer-personalized-experiences">80% of consumers</a> want a personalized experience. All of these personalization experiences are to make the user’s workflow easier. These personalized experiences start from the introduction to the usage of the product. <a href="https://www.forbes.com/sites/forbestechcouncil/2021/08/30/one-size-fits-none-the-importance-of-adaptive-onboarding/">Onboarding helps users learn about the product</a>, but learning continues after the initial product presentation.</p>
1018. <p>We cannot expect users to know about the product once the onboarding has been completed and they need assistance in the future. Over time, if users have a hard time comprehending or completing a task, they get frustrated; this is particularly true for ADHD users. At the same time, users with learning disabilities do not remember every step either because they are too complex or have multiple steps.</p>
1019. <p><strong>Adaptive onboarding will allow everyone to re-learn when needed</strong>; it would benefit them more since help is available when needed. This type of onboarding could be AI-driven and much more generative. It could focus on different learning styles, either assistive, audio, or video presentation.</p>
1020. <h4>Example That Can Be Improved:</h4>
1021. <p><a href="https://productfruits.com">Product Fruits</a> has a plethora of offerings, including onboarding. It offers personalization and the ability to tailor the onboarding to cover the product for new users. Allowing customization with onboarding gives the product team more control over what needs attention. It also provides the capability to track product usage based on the onboarding.</p>
1022. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/10-product-fruits.png" /></p>
1023. <p><strong>Opportunity</strong>: Offering AI interventions for different personas or segments will give the tool an additional layer of experience tailored to the needs of individuals. Imagine a user with ADHD who is trying to figure out how to use the feature; they will get frustrated if they do not identify how to use it. What if the tool intuitively nudges the user on how to complete the task? Similarly, if completing the task is complex and requires multiple steps, users with learning disabilities have difficulty following and reproducing it.</p>
1024. <h4>Neurodivergent Friendly Example</h4>
1025. <p>Onboarding does not always need to be at the start of the product introduction. Users always end up in situations where they need to find a step in the feature of completing a task but might have difficulty discovering it. In such cases, they usually seek help by asking colleagues or looking it up on the product help page. </p>
1026. <p><a href="https://www.chameleon.io">Chameleon</a> helps by offering features that let users use AI more effectively. Users can ask for help anytime, and the AI will generate answers to help them.</p>
1027. <p><img src="https://files.smashing.media/articles/ai-for-neurodiversity/11-chameleon.png" /></p>
1028. Considerations
1029. <p>All the issues I mentioned are present in everyone; the <strong>difference is the occurrence and intensity between neurotypical and neurodiverse individuals</strong>. Everyday things, discussions, conclusions, critical thinking, comprehension, and so on, are vastly different. It is like neurodiverse individuals’ brains are wired differently. It becomes more important to build tools that solve problems for neurodiverse users, which we inadvertently solve for everyone.</p>
1030. <p>An argument that every human goes through those problems is easy to make. But, we tend to forget the intensity and criticality of those problems for neurodiverse individuals, which is far too complex than shrugging it off like neuro-typicals who can adapt to it much more quickly. Similarly, AI too has to learn and understand the problems it needs to solve. It can be confusing for the algorithm to learn unless it does not have multiple examples.</p>
1031. <p>Large Language Models (LLM) are trained on vast amounts of data, such as ChatGPT, for example. It is accurate most of the time; however, sometimes, it hallucinates and gives an inaccurate answer. That might be a considerable problem when <strong>no additional guidelines exist except for the LLM</strong>. As mentioned above, there is still a possibility in most cases, but having the company guidelines and information would help give correct results.</p>
1032. <p>It could also mean the users will be more dependent on AI, and there is no harm in it. If neurodiverse individuals need assistance, there cannot be a human present all the time carrying the patience required every time. <strong>Being direct is an advantage of AI</strong>, which is helpful in the case of their profession. </p>
1033. Conclusion
1034. <p>Designers should create efficient workflows for neurodivergent users who are having difficulty with working memory, comprehending complex language, learning intricate details, and so on. AI could help by providing cognitive assistance and adaptive technologies that benefit neurodivergent users greatly. Neurodiversity should be considered in product design; it needs more attention. </p>
1035. <p>AI has become increasingly tied in every aspect of the user’s lives. Some are obvious, like conversational UI, chatbots, and so on, while others are hidden algorithms like recommendation engines.</p>
1036. <p>Many problems specific to accessibility are being solved, but are they being solved while keeping neurodiverse issues in mind?</p>
1037. <p>Jamie Diamon famously said:</p>
1038. <blockquote>“Problems don’t age well.”<br /><br />— Jamie Diamon (CEO, JP Morgan)</blockquote>
1039.  
1040. <p>This means we have to <strong>take critical issues into account sooner</strong>. Building an inclusive world for those 1.6 billion people is not a need for the future but a necessity of the present. We should strive to create an inclusive world for neurodiverse users; it is especially true because AI is booming, and making it inclusive now would be easy as it will scale into a behemoth set of features in every aspect of our lives in the future.</p>
1041. ]]></content:encoded>
1042.            <author>hello@smashingmagazine.com (Pratik Joglekar)</author>
1043.            <enclosure url="http://files.smashing.media/articles/ai-for-neurodiversity/ai-neurodiversity-building-inclusive-tools.jpg" length="0" type="image/jpg"/>
1044.        </item>
1045.        <item>
1046.            <title><![CDATA[F-Shape Pattern And How Users Read]]></title>
1047.            <link>https://smashingmagazine.com/2024/04/f-shape-pattern-how-users-read/</link>
1048.            <guid>https://smashingmagazine.com/2024/04/f-shape-pattern-how-users-read/</guid>
1049.            <pubDate>Tue, 23 Apr 2024 10:00:00 GMT</pubDate>
1050.            <description><![CDATA[Scrolling, scanning, skipping: How do users consume content online? Here’s what you need to know about reading behavior and design strategies to prevent harmful scanning patterns. An upcoming part of <a href='https://smart-interface-design-patterns.com'>Smart Interface Design Patterns</a>.]]></description>
1051.            <content:encoded><![CDATA[<p><strong>We rarely read on the web</strong>. We mostly scan. That’s a reliable strategy to quickly find what we need in times when we’re confronted with more information than we can handle. But scanning also means that we often <strong>skip key details</strong>. This is not only inefficient but can also be very damaging to your business.</p>
1052. <p>Let’s explore how users read — or scan — on the web and how we can <strong>prevent harmful scanning patterns</strong>.</p>
1053.  
1054.  
1055. <p>This article is <strong>part of our ongoing series</strong> on <a href="/category/design-patterns">design patterns</a>. It’s also an upcoming part of the 10h-video library on <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a> 🍣 and the <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/">upcoming live UX training</a> as well. Use code <a href="https://smart-interface-design-patterns.com/">BIRDIE</a> to save 15% off.</p>
1056.  
1057. Scanning Patterns On The Web
1058. <p>One of the most common scanning patterns is the <strong>F-shape pattern</strong>. Users start at the top left, read a few lines, and then start to scan vertically. But it isn’t the only scanning pattern on the web. Being aware of different patterns is the first step to helping users better <strong>navigate your content</strong>.</p>
1059. <p><img src="https://files.smashing.media/articles/f-shape-pattern-how-users-read/1-different-scanning-patterns.jpeg" /></p>
1060. <p>Different patterns describe how users scan content on the web. The F-shape pattern is probably the best-known one.</p>
1061. <ul>
1062. <li><strong><a href="https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/">F-Pattern</a></strong><br />Users first read horizontally, then read less and less until they start scanning vertically. The first lines of text and the first words on each line receive more attention. It also applies to LTR-interfaces, but the F is flipped.</li>
1063. <li><strong><a href="https://www.nngroup.com/articles/layer-cake-pattern-scanning/">Layer-Cake Pattern</a></strong><br />Users scan consistently across headings, with deliberate jumps into body text in between. Most effective way to scan pages and find key content details.</li>
1064. <li><strong><a href="https://www.nngroup.com/articles/love-at-first-sight-pattern/">Love-at-First-Sight Pattern</a></strong><br />Users are often “satisficers,” searching for what’s good enough, not exhaustive enough. In search results, they often fixate on a single result.</li>
1065. <li><strong><a href="https://www.nngroup.com/articles/lawn-mower-pattern/">Lawn-Mower Pattern</a></strong><br />In tables, users start in the top left cell, move to the right until the end of the row, and then drop down to the next row, moving in the same pattern.</li>
1066. <li><strong>Spotted Pattern</strong><br />Skipping big chunks of text and focusing on patterns. Often happens in search when users look for specific words, shapes, links, dates, and so on.</li>
1067. <li><strong>Marking Pattern</strong><br />Eyes focus in one place as the mouse scrolls or a finger swipes. Common on mobile more than on desktop.</li>
1068. <li><strong>Bypassing Pattern</strong><br />Users deliberately skip the first words of the line when multiple lines start with the same word.</li>
1069. <li><strong>Commitment Pattern</strong><br />Reading the entire content, word by word. Happens when users are highly motivated and interested. Common for older adults.</li>
1070. </ul>
1071. F-Shape Scanning And The Lack Of Rhythm
1072. <p>On the web, we often argue about the fold, and while it does indeed exist, <a href="https://www.chrbutler.com/the-rhythm-of-your-screen">it really doesn’t matter</a>. As Christopher Butler said, “<strong>length is not the problem</strong> — lack of rhythm is.”</p>
1073. <p><img src="https://files.smashing.media/articles/f-shape-pattern-how-users-read/2-fold-user-attention.jpg" /></p>
1074. <p>A designer’s main job is to <strong>direct attention intentionally</strong>. Scanning is partial attention. Reading is focused attention. A screen without intentional rhythm will lose attention as it is being scanned. One with <strong>controlled rhythm</strong> will not only retain attention, it will deepen it.</p>
1075. <p>Think of F-shape scanning as a <strong>user’s fallback behavior</strong> if the design doesn’t guide them through the content well enough. So prevent it whenever you can. At least, give users anchors to move to <em>E-shape scanning</em>, and at best, direct their attention to relevant sections with <strong>Layer-Cake scanning</strong>.</p>
1076. Direct Attention And Provide Anchors
1077. <p>Good formatting can <strong>reduce the impact of scanning</strong>. To structure scanning and guide a user’s view, add headings and subheadings. For engagement, alternate sizes, spacing, and patterns. For landing pages, alternate points of interest.</p>
1078. <p><a href="https://www.nngroup.com/articles/horizontal-attention-leans-left/">Users spend 80% of the time viewing the left half of a page</a>. So, as you structure your content, keep in mind that horizontal attention leans left. That’s also where you might want to position navigation to aid wayfinding.</p>
1079. <p><img src="https://files.smashing.media/articles/f-shape-pattern-how-users-read/3-user-attention-left-part-screen.jpg" /></p>
1080. <p>Generally, it’s a good idea to visually group small chunks of related content. To offer anchors, consider <strong>front-loading headings with keywords</strong> and key points — it will help users quickly make sense of what awaits them. Adding useful visuals can also give users points to anchor to.</p>
1081. <p>Another way to guide users through the page is by adding <strong>few but noticeable accents</strong> to guide attention. You will need visible, well-structured headings and subheadings that stand out from the other content on the page. In fact, adding <strong>subheadings</strong> throughout the page might be the best strategy to help users find information faster.</p>
1082. <p><strong>Data-heavy content</strong> such as large, complex tables require some extra attention and care. To help users keep their position as they move across the table, keep headers floating. They provide an anchor no matter where your user’s eyes are focusing and make it easier to look around and compare data.</p>
1083. Key Takeaways
1084. <ul>
1085. <li><strong>Users spend 80% of time viewing the left half</strong> of a page.</li>
1086. <li>They read horizontally, then skip to content below.</li>
1087. <li><strong>Scanning is often inefficient</strong> as users miss large chunks of content and skip key details.</li>
1088. <li><strong>Good formatting</strong> reduces the impact of F-scanning.</li>
1089. <li><strong>Add heading and subheadings</strong> for structured scanning.</li>
1090. <li><strong>Show keywords and key points</strong> early in your headings to improve scanning.</li>
1091. <li>For engagement, <strong>alternate sizes, spacing, patterns</strong>.</li>
1092. <li>For landing pages, <strong>alternate points of interest</strong>.</li>
1093. <li>Visually group small <strong>chunks of related content</strong>.</li>
1094. <li>Keep <strong>headers floating</strong> in large, complex data tables.</li>
1095. <li>Add <strong>useful visuals</strong> to give users points to anchor to.</li>
1096. <li>Horizontal <strong>attention leans left</strong>: favor top/left navigation.</li>
1097. </ul>
1098. <h3>Useful Resources</h3>
1099. <ul>
1100. <li><a href="https://www.nngroup.com/articles/how-people-read-online/">How People Read Online</a>, by Kate Moran</li>
1101. <li><a href="https://www.nngroup.com/articles/layer-cake-pattern-scanning/">Layer-Cake Pattern of Scanning</a>, by Kara Pernice</li>
1102. <li><a href="https://www.nngroup.com/articles/horizontal-attention-leans-left/">Horizontal Attention Leans Left</a>, by Therese B. Fessenden</li>
1103. <li><a href="https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/">F-Shaped Pattern: Misunderstood, But Still Relevant</a>, by Kara Pernice</li>
1104. <li><a href="https://www.chrbutler.com/the-rhythm-of-your-screen">The Fold Exists, But It Doesn’t Matter</a>, by Christopher Butler</li>
1105. <li><a href="https://www.toptal.com/designers/web/ui-design-best-practices">Best Practices for Better Scannability</a>, by Nemanja Banjanin</li>
1106. <li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-typography-activity-7112733126803496961-CP9x">Golden Rules of Web Typography</a>, by yours truly</li>
1107. </ul>
1108. Meet Smart Interface Design Patterns
1109. <p>If you are interested in similar insights around UX, take a look at <a href="https://smart-interface-design-patterns.com/"><strong>Smart Interface Design Patterns</strong></a>, our <strong>10h-video course</strong> with 100s of practical examples from real-life projects — with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Jump to a free preview</a>.</p>
1110. <a href="https://smart-interface-design-patterns.com/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" /></a>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design &amp; UX.
1111.  
1112. <div><a href="https://smart-interface-design-patterns.com/">Jump to the video course →</a></div>
1113.  
1114. <p></p><p>100 design patterns &amp; real-life
1115. examples.<br />10h-video course + live UX training. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Free preview</a>.</p>
1116. ]]></content:encoded>
1117.            <author>hello@smashingmagazine.com (Vitaly Friedman)</author>
1118.            <enclosure url="http://files.smashing.media/articles/f-shape-pattern-how-users-read/f-shape-pattern-how-users-read.jpg" length="0" type="image/jpg"/>
1119.        </item>
1120.        <item>
1121.            <title><![CDATA[How To Work With GraphQL In WordPress In 2024]]></title>
1122.            <link>https://smashingmagazine.com/2024/04/how-work-graphql-wordpress-2024/</link>
1123.            <guid>https://smashingmagazine.com/2024/04/how-work-graphql-wordpress-2024/</guid>
1124.            <pubDate>Fri, 19 Apr 2024 10:00:00 GMT</pubDate>
1125.            <description><![CDATA[What options do we have for integrating GraphQL with WordPress in 2024? Leonardo Losoviz describes the developments that have taken place in this space over the last three years.]]></description>
1126.            <content:encoded><![CDATA[<p>Three years ago, I published “<a href="https://www.smashingmagazine.com/2021/04/making-graphql-work-in-wordpress/">Making GraphQL Work In WordPress</a>,” where I compared the two leading GraphQL servers available for WordPress at the time: <a href="https://www.wpgraphql.com">WPGraphQL</a> and <a href="https://gatographql.com">Gato GraphQL</a>. In the article, I aimed to delineate the scenarios best suited for each.</p>
1127. <p><em>Full disclosure: I created Gato GraphQL, originally known as</em> <strong><em>GraphQL API for WordPress</em></strong>, <em>as referenced in the article.</em></p>
1128. <p>A lot of new developments have happened in this space since my article was published, and it’s a good time to consider what’s changed and how it impacts the way we work with GraphQL data in WordPress today.</p>
1129. <p>This time, though, let’s focus less on <em>when</em> to choose one of the two available servers and more on the developments that have taken place and how both plugins and headless WordPress, in general, have been affected.</p>
1130. Headless Is The Future Of WordPress (And Shall Always Be)
1131. <p>There is no going around it: <em>Headless is the future of WordPress!</em> At least, that is what we have been reading in posts and tutorials for the last eight or so years. Being Argentinian, this reminds me of an old joke that goes, “Brazil is the country of the future and shall always be!” The future is both imminent and far away.</p>
1132. <p>Truth is, WordPress sites that actually make use of headless capabilities — via GraphQL or the WP REST API — represent no more than a small sliver of the overall WordPress market. WPEngine may have the most extensive research into headless usage in its “The State of Headless” report. Still, it’s already a few years old and focused more on both the general headless movement (not just WordPress) and the context of enterprise organizations. But the future of WordPress, according to the report, is written in the clouds:</p>
1133. <blockquote>“Headless is emphatically here, and with the rapid rise in enterprise adoption from 2019 (53%) to 2021 (64%), it’s likely to become the industry standard for large-scale organizations focused on building and maintaining a powerful, connected digital footprint. […] Because it’s already the most popular CMS in the world, used by many of the world’s largest sites, and because it’s highly compatible as a headless CMS, bringing flexibility, extensibility, and tons of features that content creators love, WordPress is a natural fit for headless configurations.”</blockquote>
1134.  
1135. <p>Just a year ago, a Reddit user <a href="https://www.reddit.com/r/Wordpress/comments/z83d54/are_you_using_headless_wordpress/?rdt=48997">informally polled people in r/WordPress</a>, and while it’s far from scientific, the results are about as reliable as the conjecture before it:</p>
1136. <p><img src="https://files.smashing.media/articles/how-work-graphql-wordpress-2024/1-reddit-poll-results.png" /></p>
1137. <p>Headless may very well be the future of WordPress, but the proof has yet to make its way into everyday developer stacks. It could very well be that general interest and curiosity are driving the future more than tangible works, as another of WPEngine’s articles from the same year as the bespoke report suggests <a href="https://wpengine.com/builders/introducing-the-headless-wordpress-developer-roadmap/">when identifying “Headless WordPress” as a hot search term</a>. This could just as well be a lot more smoke than fire.</p>
1138. <p>That’s why I believe that “headless” is not yet a true alternative to a traditional WordPress stack that relies on the WordPress front-end architecture. I see it more as another approach, or flavor, to building websites in general <a href="https://css-tricks.com/just-how-niche-is-headless-wordpress/">and a niche one at that</a>.</p>
1139. <p>That was all true merely three years ago and is still true today.</p>
1140. WPEngine “Owns” Headless WordPress
1141. <p>It’s no coincidence that we’re referencing WPEngine when discussing headless WordPress because the hosting company is heavily betting on it becoming the <em>de facto</em> approach to WordPress development. </p>
1142. <p>Take, for instance, WPEngine’s launch of <a href="https://github.com/wpengine/faustjs">Faust.js</a>, a headless framework with WPGraphQL as its foundation. Faust.js is an opinionated framework that allows developers to use WordPress as the back-end content management system and Next.js to render the front-end side of things. Among other features, Faust.js <a href="https://faustjs.org/reference/template-system">replicates the WordPress template system for Next.js</a>, making the configuration to render posts and pages from WordPress data a lot easier out of the box.</p>
1143. <p>WPEngine is well-suited for this task, as it can offer hosting for both Node.js and WordPress as a single solution via its <a href="https://developers.wpengine.com/docs/atlas/overview/">Atlas</a> platform. WPEngine also bought the popular <a href="https://wordpress.org/plugins/advanced-custom-fields/">Advanced Custom Fields</a> (ACF) plugin that helps define relationships among entities in the WordPress data model. Add to that the fact that WPEngine has taken over the <a href="https://discord.com/invite/headless-wordpress-836253505944813629">Headless WordPress</a> Discord server, with discussions centered around WPGraphQL, Faust, Atlas, and ACF. It could very well be named the WPEngine-Powered Headless WordPress server instead.</p>
1144. <p>But WPEngine’s agenda and dominance in the space is not the point; it’s more that they have a lot of skin in the game as far as anticipating a headless WordPress future. Even more so now than three years ago.</p>
1145. GraphQL API for WordPress → Gato GraphQL
1146. <p>I created a plugin several years ago called GraphQL API for WordPress to help support headless WordPress development. It converts data pulled from the WordPress REST API into structured GraphQL data for more efficient and flexible queries based on the content managed and stored in WordPress.</p>
1147. <p>More recently, I released a significantly updated version of the plugin, so updated that I chose to rename it to <strong>Gato GraphQL</strong>, and it is now <a href="https://wordpress.org/plugins/gatographql/">freely available in the WordPress Plugin Directory</a>. It’s a freemium offering like many WordPress plugin pricing models. The free, open-source version in the plugin directory provides the GraphQL server, maps the WordPress data model into the GraphQL schema, and provides several useful features, including custom endpoints and persisted queries. The paid <a href="https://gatographql.com/features">commercial add-on</a> extends the plugin by supporting multiple query executions, automation, and an HTTP client to interact with external services, among other advanced features.</p>
1148. <p>I know this sounds a lot like a product pitch but stick with me because there’s a point to the decision I made to revamp my existing GraphQL plugin and introduce a slew of premium services as features. It fits with my belief that</p>
1149. <p>WordPress is becoming more and more open to giving WordPress developers and site owners a lot more room for innovation to work collaboratively and manage content in new and exciting ways both in and out of WordPress.</p>
1150. JavaScript Frameworks & Headless WordPress
1151. <p><a href="https://www.gatsbyjs.com/">Gatsby</a> was perhaps the most popular and leading JavaScript framework for creating headless WordPress sites at the time my first article was published in 2021. These days, though, <a href="https://www.smashingmagazine.com/2024/03/end-of-gatsby-journey/">Gatsby is in steep decline</a> and its integration with WordPress is <a href="https://twitter.com/wpgraphql/status/1709967179998019979">no longer maintained</a>.</p>
1152. <p><a href="https://nextjs.org/">Next.js</a> was also a leader back then and is still very popular today. The framework includes <a href="https://github.com/leoloso/next-wordpress-starter">several starter templates</a> designed specifically for headless WordPress instances.</p>
1153. <p><a href="https://svelte.dev/">SvelteKit</a> and <a href="https://nuxt.com/">Nuxt</a> are surging these days and are considered good choices for establishing headless WordPress, <a href="https://wordpress.tv/2024/04/10/fighting-the-javascript-fatigue-picking-the-right-framework-for-headless-wordpress/">as was discussed during WordCamp Asia 2024</a>.</p>
1154. <p>Today, in 2024, we continue to see new JavaScript framework entrants in the space, notably <a href="https://docs.astro.build/en/guides/cms/wordpress/">Astro</a>. Despite Gatsby’s recent troubles, the landscape of using JavaScript frameworks to create front-end experiences from the WordPress back-end is largely the same as it was a few years ago, if maybe a little easier, thanks to the availability of new templates that are integrated right out of the box.</p>
1155. GraphQL Transcends Headless WordPress
1156. <p>The biggest difference between the WPGraphQL and Gato GraphQL plugins is that, where WPGraphQL is designed to convert REST API data into GraphQL data in a <em>single direction</em>, Gato GraphQL uses GraphQL data in <em>both directions</em> in a way that can be used to manage non-headless WordPress sites as well. I say this not as a way to get you to use my plugin but to help describe how GraphQL has evolved to the point where it is useful for more cases than headless WordPress sites.</p>
1157. <p>Managing a WordPress site via GraphQL is possible because GraphQL is an <strong>agnostic tool for interacting with data</strong>, whatever that interaction may be. GraphQL can fetch data from the server, modify it, store it back on the server, and invoke external services. These interactions can all be coded within a single query.</p>
1158. <p>GraphQL can then be used to <a href="https://gatographql.com/library/regex-search-and-replace-multiple-strings-in-all-posts">regex search and replace a string in all posts</a>, which is practical when doing site migrations. We can also import a post from another WordPress site or even from an RSS feed or CSV source.</p>
1159. <p>And thanks to the likes of WordPress hooks and <a href="https://developer.wordpress.org/plugins/cron/">WP-Cron</a>, executing a GraphQL query can be an automated task. For instance, whenever the <code>publish_post</code> hook is triggered — i.e., a new post on the site is published — we can execute certain actions, like <a href="https://gatographql.com/library/send-email-to-the-admin-notifying-of-a-new-post">an email notification to the site admin</a>, or generate a featured image with AI if the post lacks one.</p>
1160. <p>In short, GraphQL works both ways and opens up new possibilities for better developer and author experiences!</p>
1161. GraphQL Becomes A “Core” Feature In WordPress 6.5
1162. <p>I have gone on record saying that <a href="https://gatographql.com/blog/why-graphql-should-not-be-in-wordpress-core">GraphQL should not be a core part of WordPress</a>. There’s a lot of reasoning behind my opinion, but what it boils down to is that the WP REST API is perfectly capable of satisfying our needs for passing data around, and <strong>adding GraphQL to the mix could be a security risk</strong> in some conditions.</p>
1163. <p>My concerns aside, GraphQL officially became a first-class citizen of WordPress when it was baked into <a href="https://wordpress.org/documentation/wordpress-version/version-6-5/">WordPress 6.5</a> with the introduction of <a href="https://make.wordpress.org/core/2024/03/05/introducing-plugin-dependencies-in-wordpress-6-5/">Plugin Dependencies</a>, a feature that allows plugins to identify other plugins as dependencies. We see this in the form of a new “Requires Plugins” comment in a plugin’s header:</p>
1164. <pre><code>/**
1165. * Plugin Name: My Ecommerce Payments for Gato GraphQL
1166. * Requires Plugins: gatographql
1167. */
1168. </code></pre>
1169.  
1170. <p>WordPress sees which plugins are needed for the current plugin to function properly and installs everything together at the same time, assuming that the dependencies are readily available in the WordPress Plugin Directory.</p>
1171. <p>So, check this out. Since WPGraphQL and Gato GraphQL are in the plugin directory, we can now create <em>another</em> plugin that internally uses GraphQL and distributes it via the plugin directory or, in general, without having to indicate how to install it. For instance, we can now use GraphQL to <a href="https://gatographql.com/guides/interact/working-with-gutenberg-blocks">fetch data to render the plugin’s blocks</a>.</p>
1172. <p>In other words, plugins are now capable of more symbiotic relationships that open even more possibilities! Beyond that, every plugin in the WordPress Plugin Directory is now technically part of WordPress Core, including WPGraphQL and Gato GraphQL. So, yes, GraphQL is now technically a “core” feature that can be leveraged by other developers.</p>
1173. Helping WordPress Lead The CMS Market, Again
1174. <p>While delivering the keynote presentation during WordCamp Asia 2024, <a href="https://humanmade.com">Human Made</a> co-founder <a href="https://wordpress.tv/2024/04/07/the-future-of-wordpress-noel-tock/">Noel Tock discussed the future of WordPress</a>. He argues that <strong>WordPress growth has stagnated in recent years</strong>, thanks to a plethora of modern web services capable of interacting and resulting in composable content management systems tailored to certain developers in a way that WordPress simply isn’t.</p>
1175. <p><img src="https://files.smashing.media/articles/how-work-graphql-wordpress-2024/2-line-chart-wordpress-cms.png" /></p>
1176. <p>Tock continues to explain how WordPress can once again become a growth engine by <a href="https://twitter.com/noeltock/status/1773264868864598374">cleaning up the WordPress plugin ecosystem</a> and providing first-class integrations with external services.</p>
1177. <p><img src="https://files.smashing.media/articles/how-work-graphql-wordpress-2024/3-noel-tock-wordcamp-asia-2024-cms-market-graph.png" /></p>
1178. <p>Do you see where I am going with this? GraphQL could play an instrumental role in WordPress’s future success. It very well could be <strong>the link between WordPress and all the different services it interacts with</strong>, positioning WordPress at the center of the web. The recent Plugin Dependencies feature we noted earlier is a peek at what WordPress could look like as it adopts more composable approaches to content management that support its position as a market leader.</p>
1179. Conclusion
1180. <p>“Headless” WordPress is still “the future” of WordPress. But as we’ve discussed, there’s very little actual movement towards that future as far as developers buying into it despite displaying deep interest in headless architectures, with WordPress purely playing the back-end role.</p>
1181. <p>There are new and solid frameworks that rely on GraphQL for querying data, and those won’t go away anytime soon. And those frameworks are the ones that rely on existing WordPress plugins that consume data from the WordPress REST API and convert it to structured GraphQL data.</p>
1182. <p>Meanwhile, WordPress is making strides toward greater innovation as plugin developers are now able to leverage other plugins as dependencies for their plugins. Every plugin listed in the WordPress Plugin Directory is essentially a feature of WordPress Core, including WPGraphQL and Gato GraphQL. That means GraphQL is readily available for any plugin developer to tap into as of WordPress 6.5.</p>
1183. <p>GraphQL can be used not only for headless but also to manage the WordPress site. Whenever data must be transformed, whether locally or by invoking an external service, GraphQL can be the tool to do it. That even means that <strong>data transforms can be triggered automatically to open up new and interesting ways to manage content</strong>, both <em>inside</em> and <em>outside</em> of WordPress. It works both ways!</p>
1184. <p>So, yes, even though headless is the future of WordPress (and shall always be), GraphQL could indeed be a key component in making WordPress once again an innovative force that shapes the future of CMS.</p>
1185. ]]></content:encoded>
1186.            <author>hello@smashingmagazine.com (Leonardo Losoviz)</author>
1187.            <enclosure url="http://files.smashing.media/articles/how-work-graphql-wordpress-2024/how-work-graphql-wordpress-2024.jpg" length="0" type="image/jpg"/>
1188.        </item>
1189.        <item>
1190.            <title><![CDATA[Converting Plain Text To Encoded HTML With Vanilla JavaScript]]></title>
1191.            <link>https://smashingmagazine.com/2024/04/converting-text-encoded-html-vanilla-javascript/</link>
1192.            <guid>https://smashingmagazine.com/2024/04/converting-text-encoded-html-vanilla-javascript/</guid>
1193.            <pubDate>Wed, 17 Apr 2024 13:00:00 GMT</pubDate>
1194.            <description><![CDATA[What do you do when you need to convert plain text into formatted HTML? Perhaps you reach for Markdown or manually write in the element tags yourself. Or maybe you have one or two of the dozens of online tools that will do it for you. In this tutorial, Alexis Kypridemos picks those tools apart and details the steps for how we can do it ourselves with a little vanilla HTML, CSS, and JavaScript.]]></description>
1195.            <content:encoded><![CDATA[<p>When copying text from a website to your device’s clipboard, there’s a good chance that you will get the formatted HTML when pasting it. Some apps and operating systems have a “Paste Special” feature that will strip those tags out for you to maintain the current style, but what do you do if that’s unavailable?</p>
1196. <p>Same goes for converting plain text into formatted HTML. One of the closest ways we can convert plain text into HTML is writing in Markdown as an abstraction. You may have seen examples of this in many comment forms in articles just like this one. Write the comment in Markdown and it is parsed as HTML.</p>
1197. <p>Even better would be no abstraction at all! You may have also seen (and used) a number of online tools that take plainly written text and convert it into formatted HTML. The UI makes the conversion and previews the formatted result in real time.</p>
1198. <p>Providing a way for users to author basic web content — like comments — without knowing even the first thing about HTML, is a novel pursuit as it lowers barriers to communicating and collaborating on the web. Saying it helps “democratize” the web may be heavy-handed, but it doesn’t conflict with that vision!</p>
1199. <p><img src="https://files.smashing.media/articles/converting-text-encoded-html-vanilla-javascript/1-smashing-magazine-comment.png" /></p>
1200. <p>We can build a tool like this ourselves. I’m all for using existing resources where possible, but I’m also for demonstrating how these things work and maybe learning something new in the process.</p>
1201. Defining The Scope
1202. <p>There are plenty of assumptions and considerations that could go into a plain-text-to-HTML converter. For example, should we assume that the first line of text entered into the tool is a title that needs corresponding <code>&lt;h1&gt;</code> tags? Is each new line truly a paragraph, and how does linking content fit into this?</p>
1203. <p>Again, the idea is that a user should be able to write without knowing Markdown or HTML syntax. This is a big constraint, and there are far too many HTML elements we might encounter, so it’s worth knowing the context in which the content is being used. For example, if this is a tool for writing blog posts, then we can limit the scope of which elements are supported based on those that are commonly used in long-form content: <code>&lt;h1&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;a&gt;</code>, and <code>&lt;img&gt;</code>. In other words, it will be possible to include top-level headings, body text, linked text, and images. There will be no support for bulleted or ordered lists, tables, or any other elements for this particular tool.</p>
1204. <p>The front-end implementation will rely on vanilla HTML, CSS, and JavaScript to establish a small form with a simple layout and functionality that converts the text to HTML. There is a server-side aspect to this if you plan on deploying it to a production environment, but our focus is purely on the front end.</p>
1205. Looking At Existing Solutions
1206. <p>There are existing ways to accomplish this. For example, some libraries offer a WYSIWYG editor. Import a library like <a href="https://www.tiny.cloud/get-tiny/">TinyMCE</a> with a single <code>&lt;script&gt;</code> and you’re good to go. WYSIWYG editors are powerful and support all kinds of formatting, even applying CSS classes to content for styling.</p>
1207. <p>But TinyMCE isn’t the most efficient package at about 500 KB minified. That’s not a criticism as much as an indication of how much functionality it covers. We want something more “barebones” than that for our simple purpose. <a href="https://github.com/search?q=txt2html&amp;type=repositories&amp;s=updated&amp;o=desc">Searching GitHub surfaces more possibilities.</a> The solutions, however, seem to fall into one of two categories:</p>
1208. <ul>
1209. <li>The input accepts plain text, but the generated HTML only supports the HTML <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code> tags.</li>
1210. <li>The input converts plain text into formatted HTML, but by ”plain text,” the tool seems to mean “Markdown” (or a variety of it) instead. The <a href="https://metacpan.org/dist/txt2html/view/scripts/txt2html">txt2html Perl module</a> (from 1994!) would fall under this category.</li>
1211. </ul>
1212. <p>Even if a perfect solution for what we want was already out there, I’d still want to pick apart the concept of converting text to HTML to understand how it works and hopefully learn something new in the process. So, let’s proceed with our own homespun solution.</p>
1213. Setting Up The HTML
1214. <p>We’ll start with the HTML structure for the input and output. For the input element, we’re probably best off using a <code>&lt;textarea&gt;</code>. For the output element and related styling, choices abound. The following is merely one example with some very basic CSS to place the input <code>&lt;textarea&gt;</code> on the left and an output <code>&lt;div&gt;</code> on the right:</p>
1215. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/OJGoNOX">Base Form Styles [forked]</a> by <a href="https://codepen.io/geoffgraham">Geoff Graham</a>.</p>
1216. <p>You can further develop the CSS, but that isn’t the focus of this article. There is no question that the design can be prettier than what I am providing here!</p>
1217. Capture The Plain Text Input
1218. <p>We’ll set an <code>onkeyup</code> event handler on the <code>&lt;textarea&gt;</code> to call a JavaScript function called <code>convert()</code> that does what it says: convert the plain text into HTML. The conversion function should accept one parameter, a string, for the user’s plain text input entered into the <code>&lt;textarea&gt;</code> element:</p>
1219. <pre><code>&lt;textarea onkeyup='convert(this.value);'&gt;&lt;/textarea&gt;</code></pre>
1220.  
1221. <p><code>onkeyup</code> is a better choice than <code>onkeydown</code> in this case, as <code>onkeyup</code> will call the conversion function <em>after</em> the user completes each keystroke, as opposed to <em>before</em> it happens. This way, the output, which is refreshed with each keystroke, always includes the latest typed character. If the conversion is triggered with an <code>onkeydown</code> handler, the output will exclude the most recent character the user typed. This can be frustrating when, for example, the user has finished typing a sentence but cannot yet see the final punctuation mark, say a period (<code>.</code>), in the output until typing another character first. This creates the impression of a typo, glitch, or lag when there is none.</p>
1222. <p>In JavaScript, the <code>convert()</code> function has the following responsibilities:</p>
1223. <ol>
1224. <li>Encode the input in HTML.</li>
1225. <li>Process the input line-by-line and wrap each individual line in either a <code>&lt;h1&gt;</code> or <code>&lt;p&gt;</code> HTML tag,  whichever is most appropriate.</li>
1226. <li>Process the output of the transformations as a single string, wrap URLs in HTML <code>&lt;a&gt;</code> tags, and replace image file names with <code>&lt;img&gt;</code> elements.</li>
1227. </ol>
1228. <p>And from there, we display the output. We can create separate functions for each responsibility. Let’s name them accordingly:</p>
1229. <ol>
1230. <li><code>html_encode()</code></li>
1231. <li><code>convert_text_to_HTML()</code></li>
1232. <li><code>convert_images_and_links_to_HTML()</code></li>
1233. </ol>
1234. <p>Each function accepts one parameter, a string, and returns a string.</p>
1235. Encoding The Input Into HTML
1236. <p>Use the <code>html_encode()</code> function to HTML encode/sanitize the input. HTML encoding refers to the process of escaping or replacing certain characters in a string input to prevent users from inserting their own HTML into the output. At a minimum, we should replace the following characters:</p>
1237. <ul>
1238. <li><code>&lt;</code> with <code>&amp;lt;</code></li>
1239. <li><code>&gt;</code> with <code>&amp;gt;</code></li>
1240. <li><code>&amp;</code> with <code>&amp;amp;</code></li>
1241. <li><code>'</code> with <code>&amp;#39;</code></li>
1242. <li><code>"</code> with <code>&amp;quot;</code></li>
1243. </ul>
1244. <p>JavaScript does not provide a built-in way to HTML encode input as other languages do. For example, PHP has <a href="https://www.php.net/manual/en/function.htmlspecialchars"><code>htmlspecialchars()</code></a>, <a href="https://www.php.net/manual/en/function.htmlentities"><code>htmlentities()</code></a>, and <a href="https://www.php.net/manual/en/function.strip-tags"><code>strip_tags()</code></a> functions. That said, it is relatively easy to write our own function that does this, which is what we’ll use the <code>html_encode()</code> function for that we defined earlier:</p>
1245. <pre><code>function html_encode(input) {
1246.  const textArea = document.createElement("textarea");
1247.  textArea.innerText = input;
1248.  return textArea.innerHTML.split("<br>").join("\n");
1249. }
1250. </code></pre>
1251.  
1252. <p>HTML encoding of the input is a critical security consideration. It prevents unwanted scripts or other HTML manipulations from getting injected into our work. Granted, front-end input sanitization and validation are both merely deterrents because bad actors can bypass them. But we may as well make them work a little harder.</p>
1253. <p>As long as we are on the topic of securing our work, make sure to HTML-encode the input on the back end, where the user cannot interfere. At the same time, take care not to encode the input more than once. Encoding text that is already HTML-encoded will break the output functionality. The best approach for back-end storage is for the front end to pass the raw, unencoded input to the back end, then ask the back-end to HTML-encode the input before inserting it into a database.</p>
1254. <p>That said, this only accounts for sanitizing and storing the input on the back end. We still have to display the encoded HTML output on the front end. There are at least two approaches to consider:</p>
1255. <ol>
1256. <li><strong>Convert the input to HTML after HTML-encoding it and before it is inserted into a database.</strong><br />This is efficient, as the input only needs to be converted once. However, this is also an inflexible approach, as updating the HTML becomes difficult if the output requirements happen to change in the future. </li>
1257. <li><strong>Store only the HTML-encoded input text in the database and dynamically convert it to HTML before displaying the output for each content request.</strong><br />This is less efficient, as the conversion will occur on each request. However, it is also more flexible since it’s possible to update how the input text is converted to HTML if requirements change.</li>
1258. </ol>
1259. Applying Semantic HTML Tags
1260. <p>Let’s use the <code>convert_text_to_HTML()</code> function we defined earlier to wrap each line in their respective HTML tags, which are going to be either <code>&lt;h1&gt;</code> or <code>&lt;p&gt;</code>. To determine which tag to use, we will <code>split</code> the text input on the newline character (<code>\n</code>) so that the text is processed as an array of lines rather than a single string, allowing us to evaluate them individually.</p>
1261. <div>
1262. <pre><code>function convert_text_to_HTML(txt) {
1263.  // Output variable
1264.  let out = '';
1265.  // Split text at the newline character into an array
1266.  const txt_array = txt.split("\n");
1267.  // Get the number of lines in the array
1268.  const txt_array_length = txt_array.length;
1269.  // Variable to keep track of the (non-blank) line number
1270.  let non_blank_line_count = 0;
1271.  
1272.  for (let i = 0; i < txt_array_length; i++) {
1273.    // Get the current line
1274.    const line = txt_array[i];
1275.    // Continue if a line contains no text characters
1276.    if (line === ''){
1277.      continue;
1278.    }
1279.  
1280.    non_blank_line_count++;
1281.    // If a line is the first line that contains text
1282.    if (non_blank_line_count === 1){
1283.      // ...wrap the line of text in a Heading 1 tag
1284.      out += <code>&amp;lt;h1&amp;gt;${line}&amp;lt;/h1&amp;gt;</code>;
1285.      // ...otherwise, wrap the line of text in a Paragraph tag.
1286.    } else {
1287.      out += <code>&amp;lt;p&amp;gt;${line}&amp;lt;/p&amp;gt;</code>;
1288.    }
1289.  }
1290.  
1291.  return out;
1292. }
1293. </code></pre>
1294. </div>
1295.  
1296. <p>In short, this little snippet loops through the array of split text lines and ignores lines that do <em>not</em> contain any text characters. From there, we can evaluate whether a line is the first one in the series. If it is, we slap a <code>&lt;h1&gt;</code> tag on it; otherwise, we mark it up in a <code>&lt;p&gt;</code> tag.</p>
1297. <p>This logic could be used to account for other types of elements that you may want to include in the output. For example, perhaps the second line is assumed to be a byline that names the author and links up to an archive of all author posts.</p>
1298. Tagging URLs And Images With Regular Expressions
1299. <p>Next, we’re going to create our <code>convert_images_and_links_to_HTML()</code> function to encode URLs and images as HTML elements. It’s a good chunk of code, so I’ll drop it in and we’ll immediately start picking it apart together to explain how it all works.</p>
1300. <div>
1301. <pre><code>
1302. function convert_images_and_links_to_HTML(string){
1303.  let urls_unique = [];
1304.  let images_unique = [];
1305.  const urls = string.match(/https*:\/\/[^\s<),]+[^\s<),.]/gmi) ?? [];
1306.  const imgs = string.match(/[^"'>\s]+.(jpg|jpeg|gif|png|webp)/gmi) ?? [];
1307.  
1308.  const urls_length = urls.length;
1309.  const images_length = imgs.length;
1310.  
1311.  for (let i = 0; i < urls_length; i++){
1312.    const url = urls[i];
1313.    if (!urls_unique.includes(url)){
1314.      urls_unique.push(url);
1315.    }
1316.  }
1317.  
1318.  for (let i = 0; i < images_length; i++){
1319.    const img = imgs[i];
1320.    if (!images_unique.includes(img)){
1321.      images_unique.push(img);
1322.    }
1323.  }
1324.  
1325.  const urls_unique_length = urls_unique.length;
1326.  const images_unique_length = images_unique.length;
1327.  
1328.  for (let i = 0; i < urls_unique_length; i++){
1329.    const url = urls_unique[i];
1330.    if (images_unique_length === 0 || !images_unique.includes(url)){
1331.      const a_tag = <code>&amp;lt;a href="${url}" target="&amp;#95;blank"&amp;gt;${url}&amp;lt;/a&amp;gt;</code>;
1332.      string = string.replace(url, a_tag);
1333.    }
1334.  }
1335.  
1336.  for (let i = 0; i < images_unique_length; i++){
1337.    const img = images_unique[i];
1338.    const img_tag = <code>&amp;lt;img src="${img}" alt=""&amp;gt;</code>;
1339.    const img_link = <code>&amp;lt;a href="${img}"&amp;gt;${img&amp;#95;tag}&amp;lt;/a&amp;gt;</code>;
1340.    string = string.replace(img, img_link);
1341.  }
1342.  return string;
1343. }
1344. </code></pre>
1345. </div>
1346.  
1347. <p>Unlike the <code>convert_text_to_HTML()</code> function, here we use regular expressions to identify the terms that need to be wrapped and/or replaced with <code>&lt;a&gt;</code> or <code>&lt;img&gt;</code> tags. We do this for a couple of reasons:</p>
1348. <ol>
1349. <li>The previous <code>convert_text_to_HTML()</code> function handles text that would be transformed to the HTML block-level elements <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code>, and, if you want, other block-level elements such as <code>&lt;address&gt;</code>. Block-level elements in the HTML output correspond to discrete lines of text in the input, which you can think of as paragraphs, the text entered between presses of the Enter key. </li>
1350. <li>On the other hand, URLs in the text input are often included in the middle of a sentence rather than on a separate line. Images that occur in the input text are often included on a separate line, but not always. While you could identify text that represents URLs and images by processing the input line-by-line — or even word-by-word, if necessary — it is easier to use regular expressions and process the entire input as a single string rather than by individual lines.</li>
1351. </ol>
1352. <p>Regular expressions, though they are powerful and the appropriate tool to use for this job, <a href="https://blog.bitsrc.io/threats-of-using-regular-expressions-in-javascript-28ddccf5224c">come with a performance cost</a>, which is another reason to use each expression only once for the entire text input.</p>
1353. <p><strong>Remember</strong>: <em>All the JavaScript in this example runs each time the user types a character, so it is important to keep things as lightweight and efficient as possible.</em></p>
1354. <p>I also want to make a note about the variable names in our <code>convert_images_and_links_to_HTML()</code> function. <code>images</code> (plural), <code>image</code> (singular), and <code>link</code> are reserved words in JavaScript. Consequently, <code>imgs</code>, <code>img</code>, and <code>a_tag</code> were used for naming. Interestingly, these specific reserved words are not listed on the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words">relevant MDN page</a>, but they are on <a href="https://www.w3schools.com/js/js_reserved.asp">W3Schools</a>.</p>
1355. <p>We’re using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match"><code>String.prototype.match()</code></a> function for each of the two regular expressions, then storing the results for each call in an array. From there, we use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing">nullish coalescing operator</a> (<code>??</code>) on each call so that, if no matches are found, the result will be an empty array. If we do not do this and no matches are found, the result of each <code>match()</code> call will be <code>null</code> and will cause problems downstream.</p>
1356. <div>
1357. <pre><code>const urls = string.match(/https*:\/\/[^\s&lt;),]+[^\s&lt;),.]/gmi) ?? [];
1358. const imgs = string.match(/[^"'>\s]+.(jpg|jpeg|gif|png|webp)/gmi) ?? [];
1359. </code></pre>
1360. </div>
1361.  
1362. <p>Next up, we filter the arrays of results so that <strong>each array contains only unique results</strong>. This is a critical step. If we don’t filter out duplicate results and the input text contains multiple instances of the same URL or image file name, then we break the HTML tags in the output. JavaScript does not provide a simple, built-in method to get unique items in an array that’s akin to the PHP <a href="https://www.php.net/manual/en/function.array-unique"><code>array_unique()</code></a> function.</p>
1363. <p>The code snippet works around this limitation using an admittedly ugly but straightforward procedural approach. The same problem is solved using a more functional approach if you prefer. There are many articles on the web describing <a href="https://www.geeksforgeeks.org/how-to-get-all-unique-values-remove-duplicates-in-a-javascript-array/">various ways to filter a JavaScript array</a> in order to <a href="https://chrisengelsma.medium.com/filtering-an-array-to-get-only-unique-values-in-javascript-and-typescript-3342e47b9448">keep only the unique items</a>.</p>
1364. <p>We’re also checking if the URL is matched as an image before replacing a URL with an appropriate <code>&lt;a&gt;</code> tag and performing the replacement only if the URL doesn’t match an image. We may be able to avoid having to perform this check by using a more intricate regular expression. The example code deliberately uses regular expressions that are perhaps less precise but hopefully easier to understand in an effort to keep things as simple as possible.</p>
1365. <p>And, finally, we’re replacing image file names in the input text with <code>&lt;img&gt;</code> tags that have the <code>src</code> attribute set to the image file name. For example, <code>my_image.png</code> in the input is transformed into <code>&lt;img src='my_image.png'&gt;</code> in the output. We wrap each <code>&lt;img&gt;</code> tag with an <code>&lt;a&gt;</code> tag that links to the image file and opens it in a new tab when clicked.</p>
1366. <p>There are a couple of benefits to this approach:</p>
1367. <ul>
1368. <li>In a real-world scenario, you will likely use a CSS rule to constrain the size of the rendered image. By making the images clickable, you provide users with a convenient <strong>way to view the full-size image</strong>.</li>
1369. <li>If the image is not a local file but is instead a URL to an image from a third party, this is a <strong>way to implicitly provide attribution</strong>. Ideally, you should not rely solely on this method but, instead, provide explicit attribution underneath the image in a <code>&lt;figcaption&gt;</code>, <code>&lt;cite&gt;</code>, or similar element. But if, for whatever reason, you are unable to provide explicit attribution, you are at least providing a link to the image source.</li>
1370. </ul>
1371. <p>It may go without saying, but <a href="https://www.pixsy.com/image-protection/hotlinking">“hotlinking”</a> images is something to avoid. Use only locally hosted images wherever possible, and provide attribution if you do not hold the copyright for them.</p>
1372. <p>Before we move on to displaying the converted output, let’s talk a bit about accessibility, specifically the image <code>alt</code> attribute. The example code I provided does add an <code>alt</code> attribute in the conversion but does not populate it with a value, as there is no easy way to automatically calculate what that value should be. An empty <code>alt</code> attribute can be acceptable if the image is considered “decorative,” i.e., purely supplementary to the surrounding text. But one may argue that <a href="https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/">there is no such thing as a purely decorative image</a>.</p>
1373. <p>That said, I consider this to be a limitation of what we’re building.</p>
1374. Displaying the Output HTML
1375. <p>We’re at the point where we can finally work on displaying the HTML-encoded output! We've already handled all the work of converting the text, so all we really need to do now is call it:</p>
1376. <div>
1377. <pre><code>function convert(input_string) {
1378.  output.innerHTML = convert_images_and_links_to_HTML(convert_text_to_HTML(html_encode(input_string)));
1379. }
1380. </code></pre>
1381. </div>
1382.  
1383. <p>If you would rather display the output string as raw HTML markup, use a <code>&lt;pre&gt;</code> tag as the output element instead of a <code>&lt;div&gt;</code>:</p>
1384. <pre><code>&lt;pre id='output'&gt;&lt;/pre&gt;
1385. </code></pre>
1386.  
1387. <p>The only thing to note about this approach is that you would target the <code>&lt;pre&gt;</code> element’s <code>textContent</code> instead of <code>innerHTML</code>:</p>
1388. <div>
1389. <pre><code>function convert(input_string) {
1390.  output.textContent = convert_images_and_links_to_HTML(convert_text_to_HTML(html_encode(input_string)));
1391. }
1392. </code></pre>
1393. </div>
1394.  
1395. Conclusion
1396. <p>We did it! We built one of the same sort of copy-paste tool that converts plain text on the spot. In this case, we’ve configured it so that plain text entered into a <code>&lt;textarea&gt;</code> is parsed line-by-line and encoded into HTML that we format and display inside another element.</p>
1397. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/yLrxOzP">Convert Plain Text to HTML (PoC) [forked]</a> by <a href="https://codepen.io/geoffgraham">Geoff Graham</a>.</p>
1398. <p>We were even able to keep the solution fairly simple, i.e., vanilla HTML, CSS, and JavaScript, without reaching for a third-party library or framework. Does this simple solution do everything a ready-made tool like a framework can do? Absolutely not. But a solution as simple as this is often all you need: nothing more and nothing less.</p>
1399. <p>As far as scaling this further, the code could be modified to <code>POST</code> what’s entered into the <code>&lt;form&gt;</code> using a PHP script or the like. That would be a great exercise, and if you do it, please share your work with me in the comments because I’d love to check it out.</p>
1400. <h3>References</h3>
1401. <ul>
1402. <li>“<a href="https://www.w3docs.com/snippets/javascript/how-to-html-encode-a-string.html">How to HTML-encode a String</a>” (W3Docs)</li>
1403. <li>“<a href="https://www.educative.io/answers/how-to-escape-unescape-html-characters-in-string-in-javascript">How to escape &amp; unescape HTML characters in string in JavaScript</a>” (Educative.io)</li>
1404. <li>“<a href="https://www.geeksforgeeks.org/how-to-get-all-unique-values-remove-duplicates-in-a-javascript-array/">How to get all unique values (remove duplicates) in a JavaScript array?”</a>” (GeeksforGeeks)</li>
1405. <li>“<a href="https://chrisengelsma.medium.com/filtering-an-array-to-get-only-unique-values-in-javascript-and-typescript-3342e47b9448">Getting Unique Array Values in Javascript and Typescript</a>,” Chris Engelsma</li>
1406. <li>“<a href="https://blog.bitsrc.io/threats-of-using-regular-expressions-in-javascript-28ddccf5224c">Threats of Using Regular Expressions in JavaScript</a>,” Dulanka Karunasena</li>
1407. </ul>
1408. ]]></content:encoded>
1409.            <author>hello@smashingmagazine.com (Alexis Kypridemos)</author>
1410.            <enclosure url="http://files.smashing.media/articles/converting-text-encoded-html-vanilla-javascript/converting-text-encoded-html-vanilla-javascript.jpg" length="0" type="image/jpg"/>
1411.        </item>
1412.        <item>
1413.            <title><![CDATA[How To Monitor And Optimize Google Core Web Vitals]]></title>
1414.            <link>https://smashingmagazine.com/2024/04/monitor-optimize-google-core-web-vitals/</link>
1415.            <guid>https://smashingmagazine.com/2024/04/monitor-optimize-google-core-web-vitals/</guid>
1416.            <pubDate>Tue, 16 Apr 2024 10:00:00 GMT</pubDate>
1417.            <description><![CDATA[The three Core Web Vitals metrics don’t only tell you how visitors experience your website but also impact your Google search result rankings. In this article, we’ll look at what Core Web Vitals are, how they are measured, and how you can use DebugBear to monitor them continuously.]]></description>
1418.            <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://www.debugbear.com/?utm_campaign=sm-5">DebugBear</a></p>
1419. <p>Google’s <a href="https://web.dev/articles/vitals">Core Web Vitals initiative</a> has increased the attention website owners need to pay to user experience. You can now more easily see when users have poor experiences on your website, and <a href="https://www.debugbear.com/docs/core-web-vitals-ranking-factor?utm_campaign=sm-5">poor UX also has a bigger impact on SEO</a>.</p>
1420. <p>That means you need to test your website to identify optimizations. Beyond that, <strong>monitoring ensures that you can stay ahead of your Core Web Vitals scores</strong> for the long term.</p>
1421. <p>Let’s find out how to work with different types of Core Web Vitals data and how monitoring can help you gain a deeper insight into user experiences and help you optimize them.</p>
1422. What Are Core Web Vitals?
1423. <p>There are three web vitals metrics Google uses to measure different aspects of website performance:</p>
1424. <ul>
1425. <li>Largest Contentful Paint (LCP),</li>
1426. <li>Cumulative Layout Shift (CLS),</li>
1427. <li>Interaction to Next Paint (INP).</li>
1428. </ul>
1429. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/1-core-web-vitals.png" /></p>
1430. <h3>Largest Contentful Paint (LCP)</h3>
1431. <p>The <a href="https://www.debugbear.com/docs/metrics/largest-contentful-paint?utm_campaign=sm-5">Largest Contentful Paint</a> metric is the closest thing to a traditional load time measurement. However, LCP doesn’t track a purely technical page load milestone like the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event">JavaScript Load Event</a>. Instead, it focuses on what the user can see by measuring <strong>how soon after opening a page, the largest content element on the page appears</strong>.</p>
1432. <p>The faster the LCP happens, the better, and Google rates a passing LCP score below 2.5 seconds.</p>
1433. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/2-largest-contentful-paint.png" /></p>
1434. <h3>Cumulative Layout Shift (CLS)</h3>
1435. <p><a href="https://www.debugbear.com/docs/metrics/cumulative-layout-shift?utm_campaign=sm-5">Cumulative Layout Shift</a> is a bit of an odd metric, as it doesn’t measure how fast something happens. Instead, it looks at <strong>how stable the page layout is once the page starts loading</strong>. Layout shifts mean that content moves around, disorienting the user and potentially causing accidental clicks on the wrong UI element.</p>
1436. <p>The CLS score is calculated by looking at how far an element moved and how big the element is. Aim for a score below 0.1 to get a good rating from Google.</p>
1437. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/3-cumulative-layout-shift.png" /></p>
1438. <h3>Interaction to Next Paint (INP)</h3>
1439. <p>Even websites that load quickly often frustrate users when interactions with the page feel sluggish. That’s why <a href="https://www.debugbear.com/docs/metrics/interaction-to-next-paint?utm_campaign=sm-5">Interaction to Next Paint</a> measures <strong>how long the page remains frozen after user interaction with no visual updates</strong>.</p>
1440. <p>Page interactions should feel practically instant, so Google recommends an INP score below 200 milliseconds.</p>
1441. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/4-interaction-to-next-paint.png" /></p>
1442. What Are The Different Types Of Core Web Vitals Data?
1443. <p>You’ll often see different page speed metrics reported by different tools and data sources, so it’s important to understand the differences. We’ve <a href="https://www.smashingmagazine.com/2023/10/answering-questions-interpreting-page-speed-reports/">published a whole article just about that</a>, but here’s the high-level breakdown along with the pros and cons of each one:</p>
1444. <ul>
1445. <li><strong>Synthetic Tests</strong><br />These tests are run on-demand in a controlled lab environment in a fixed location with a fixed network and device speed. They can produce very detailed reports and recommendations.</li>
1446. <li><strong>Real User Monitoring (RUM)</strong><br />This data tells you how fast your website is for your actual visitors. That means you need to install an analytics script to collect it, and the reporting that’s available is less detailed than for lab tests.</li>
1447. <li><strong>CrUX Data</strong><br />Google collects from Chrome users as part of the <a href="https://www.debugbear.com/blog/chrome-user-experience-report?utm_campaign=sm-5">Chrome User Experience Report</a> (CrUX) and uses it as a ranking signal. It’s available for every website with enough traffic, but since it covers a 28-day rolling window, it takes a while for changes on your website to be reflected here. It also doesn’t include any debug data to help you optimize your metrics.</li>
1448. </ul>
1449. Start By Running A One-Off Page Speed Test
1450. <p>Before signing up for a monitoring service, it’s best to run a one-off lab test with a free tool like <a href="https://pagespeed.web.dev/">Google’s PageSpeed Insights</a> or the <a href="https://www.debugbear.com/test/website-speed?utm_campaign=sm-5">DebugBear Website Speed Test</a>. Both of these tools report with Google CrUX data that reflects whether real users are facing issues on your website.</p>
1451. <p><strong>Note</strong>: <em>The lab data you get from some Lighthouse-based tools — like PageSpeed Insights — <a href="https://www.debugbear.com/blog/is-pagespeed-insights-reliable?utm_campaign=sm-5">can be unreliable</a>.</em></p>
1452. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/5-one-off-page-speed-test.png" /></p>
1453. <p>INP is best measured for real users, where you can see the elements that users interact with most often and where the problems lie. But a free tool like the <a href="https://www.debugbear.com/inp-debugger?utm_campaign=sm-5">INP Debugger</a> can be a good starting point if you don’t have RUM set up yet.</p>
1454. How To Monitor Core Web Vitals Continuously With Scheduled Lab-Based Testing
1455. <p>Running tests continuously has a few advantages over ad-hoc tests. Most importantly, <strong>continuous testing triggers alerts whenever a new issue appears on your website</strong>, allowing you to start fixing them right away. You’ll also have <strong>access to historical data</strong>, allowing you to see exactly when a regression occurred and letting you compare test results before and after to see what changed.</p>
1456. <p>Scheduled lab tests are easy to set up using a website monitoring tool like <a href="https://www.debugbear.com/?utm_campaign=sm-5">DebugBear</a>. Enter a list of website URLs and pick a device type, test location, and test frequency to get things running:</p>
1457. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/6-scheduled-lab-based-testing.png" /></p>
1458. <p>As this process runs, it feeds data into the detailed dashboard with historical Core Web Vitals data. You can monitor a number of pages on your website or track the speed of your competition to make sure you stay ahead.</p>
1459. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/7-dashboard-historical-core-web-vitals-data.png" /></p>
1460. <p>When regression occurs, you can dive deep into the results using DebuBears’s <a href="https://www.debugbear.com/docs/compare?utm_campaign=sm-5">Compare mode</a>. This mode lets you see before-and-after test results side-by-side, giving you context for identifying causes. You see exactly what changed. For example, in the following case, we can see that <a href="https://en.wikipedia.org/wiki/HTTP_compression">HTTP compression</a> stopped working for a file, leading to an increase in page weight and longer download times.</p>
1461. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/8-debubears-compare-mode.png" /></p>
1462. How To Monitor Real User Core Web Vitals
1463. <p>Synthetic tests are great for super-detailed reporting of your page load time. However, other aspects of user experience, like layout shifts and slow interactions, heavily depend on how real users use your website. So, it’s worth <a href="https://www.debugbear.com/real-user-monitoring?utm_campaign=sm-5">setting up real user monitoring with a tool like DebugBear</a>.</p>
1464. <p>To monitor real user web vitals, you’ll need to install an analytics snippet that collects this data on your website. Once that’s done, you’ll be able to see data for all three Core Web Vitals metrics across your entire website.</p>
1465. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/9-real-user-monitoring-debugbear.png" /></p>
1466. <p>To optimize your scores, you can go into the dashboard for each individual metric, select a specific page you’re interested in, and then dive deeper into the data.</p>
1467. <p>For example, you can see whether a slow LCP score is caused by a slow server response, <a href="https://www.debugbear.com/blog/render-blocking-resources?utm_campaign=sm-5">render blocking resources</a>, or by the LCP content element itself.</p>
1468. <p>You’ll also find that the LCP element varies between visitors. Lab test results are always the same, as they rely on a single fixed screen size. However, in the real world, visitors use a wide range of devices and will see different content when they open your website.</p>
1469. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/10-dashboard-lcp-debugbear.png" /></p>
1470. <p>INP is tricky to debug without real user data. Yet an analytics tool like DebugBear can tell you exactly what page elements users are interacting with most often and which of these interactions are slow to respond.</p>
1471. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/11-inp-elements-debugbear.png" /></p>
1472. <p>Thanks to the new <a href="https://www.debugbear.com/blog/long-animation-frames">Long Animation Frames API</a>, we can also see specific scripts that contribute to slow interactions. We can then decide to optimize these scripts, remove them from the page, or run them in a way that does not block interactions for as long.</p>
1473. <p><img src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/12-inp-primary-scripts.png" /></p>
1474. Conclusion
1475. <p>Continuously monitoring Core Web Vitals lets you see how website changes impact user experience and ensures you get alerted when something goes wrong. While it’s possible to measure Core Web Vitals using a wide range of tools, those tools are limited by the type of data they use to evaluate performance, not to mention they only provide a single snapshot of performance at a specific point in time.</p>
1476. <p>A tool like DebugBear gives you access to several different types of data that you can use to troubleshoot performance and optimize your website, complete with RUM capabilities that offer a historial record of performance for identifying issues where and when they occur. <a href="https://www.debugbear.com/signup?utm_campaign=sm-5">Sign up for a free DebugBear trial here</a>.</p>
1477. ]]></content:encoded>
1478.            <author>hello@smashingmagazine.com (Matt Zeunert)</author>
1479.            <enclosure url="http://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/monitor-optimize-google-core-web-vitals.jpg" length="0" type="image/jpg"/>
1480.        </item>
1481.        <item>
1482.            <title><![CDATA[Sliding 3D Image Frames In CSS]]></title>
1483.            <link>https://smashingmagazine.com/2024/04/sliding-3d-image-frames-css/</link>
1484.            <guid>https://smashingmagazine.com/2024/04/sliding-3d-image-frames-css/</guid>
1485.            <pubDate>Fri, 12 Apr 2024 18:00:00 GMT</pubDate>
1486.            <description><![CDATA[Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off. Temani Afif applies 3D effects and sliding transitions to a single `<img>` using clever CSS techniques that demonstrate advanced, modern styling practices.]]></description>
1487.            <content:encoded><![CDATA[<p><a href="https://www.smashingmagazine.com/2023/09/revealing-images-css-mask-animations/">In a previous article</a>, we played with CSS masks to create cool hover effects where the main challenge was to rely only on the <code>&lt;img&gt;</code> tag as our markup. In this article, pick up where we left off by “revealing” the image from behind a sliding door sort of thing — like opening up a box and finding a photograph in it.</p>
1488. <p><img src="https://files.smashing.media/articles/sliding-3d-image-frames-css/1-border-overlay-intersect.png" /></p>
1489. <p>This is because the padding has a transition that goes from <code>s - 2*b</code> to <code>0</code>. Meanwhile, the background transitions from <code>100%</code> (equivalent to <code>--s</code>) to <code>0</code>. There’s a difference equal to <code>2*b</code>. The background covers the entire area, while the padding covers less of it. We need to account for this.</p>
1490. <p>Ideally, the padding transition would take less time to complete and have a small delay at the beginning to sync things up, but finding the correct timing won’t be an easy task. Instead, let’s increase the padding transition’s range to make it equal to the background.</p>
1491. <pre><code>img {
1492.  --h: calc(var(--s) - var(--b));
1493.  padding-top: min(var(--h), var(--s) - 2*var(--b));
1494.  transition: --h 1s linear;
1495. }
1496. img:hover {
1497.  --h: calc(-1 * var(--b));
1498. }
1499. </code></pre>
1500.  
1501. <p>The new variable, <code>--h</code>,  transitions from <code>s - b</code> to <code>-b</code> on hover, so we have the needed range since the difference is equal to <code>--s</code>, making it equal to the <code>background</code> and <code>clip-path</code> transitions. </p>
1502. <p>The trick is the <code>min()</code> function. When <code>--h</code> transitions from <code>s - b</code> to <code>s - 2*b</code>, the padding is equal to <code>s - 2*b</code>. No padding changes during that brief transition. Then, when <code>--h</code> reaches <code>0</code> and transitions from <code>0</code> to <code>-b</code>, the padding remains equal to <code>0</code> since, by default, it cannot be a negative value. </p>
1503. <p>It would be more intuitive to use <code>clamp()</code> instead:</p>
1504. <pre><code>padding-top: clamp(0px, var(--h), var(--s) - 2*var(--b));
1505. </code></pre>
1506.  
1507. <p>That said, we don’t need to specify the lower parameter since padding cannot be negative and will, by default, be clamped to <code>0</code> if you give it a negative value.</p>
1508. <p>We are getting much closer to the final result!</p>
1509. <p><img src="https://files.smashing.media/articles/sliding-3d-image-frames-css/2-image-element-four-stages-3d-box.png" /></p>
1510. <p>First, we increase the border’s thickness on the left and bottom sides of the image:</p>
1511. <div>
1512. <pre><code>img {
1513.  --b: 10px; /* the image border */
1514.  --d: 30px; /* the depth */
1515.  
1516.  border: solid #0000;
1517.  border-width: var(--b) var(--b) calc(var(--b) + var(--d)) calc(var(--b) + var(--d));
1518. }
1519. </code></pre>
1520. </div>
1521.  
1522. <p>Second, we add a <code>conic-gradient()</code> on the background to create darker colors around the box:</p>
1523. <div>
1524. <pre><code>background:
1525.  conic-gradient(at left var(--d) bottom var(--d),
1526.   #0000 25%,#0008 0 62.5%,#0004 0)
1527.  var(--c);
1528. </code></pre>
1529. </div>
1530.  
1531. <p>Notice the semi-transparent black color values (e.g., <code>#0008</code> and <code>#0004</code>). The slight bit of transparency blends with the colors behind it to create the illusion of a dark variation of the main color since the gradient is placed above the background color.</p>
1532. <p>And lastly, we apply a <code>clip-path</code> to cut out the corners that establish the 3D box.</p>
1533. <div>
1534. <pre><code>clip-path: polygon(var(--d) 0, 100% 0, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0 100%, 0 var(--d));
1535. </code></pre>
1536. </div>
1537.  
1538. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/JjzRWXZ">The image within a 3D box</a> by <a href="https://codepen.io/t_afif">Temani Afif</a>.</p>
1539. <p>Now that we see and understand how the 3D effect is built let’s put back the things we removed earlier, starting with the padding:</p>
1540. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/ExMgWXR">Putting back the padding animation</a> by <a href="https://codepen.io/t_afif">Temani Afif</a>.</p>
1541. <p>It works fine. But note how we’ve introduced the depth (<code>--d</code>) to the formula. That’s because the bottom border is no longer equal to <code>b</code> but <code>b + d</code>.</p>
1542. <div>
1543. <pre><code>--h: calc(var(--s) - var(--b) - var(--d));
1544. padding-top: min(var(--h),var(--s) - 2*var(--b) - var(--d));
1545. </code></pre>
1546. </div>
1547.  
1548. <p>Let’s do the same thing with the linear gradient. We need to decrease its size so it covers the same area as it did before we introduced the depth so that it doesn’t overlap with the conic gradient:</p>
1549. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/VwRKpzN">Putting back the gradient animation</a> by <a href="https://codepen.io/t_afif">Temani Afif</a>.</p>
1550. <p>We are getting closer! The last piece we need to add back in from earlier is the <code>clip-path</code> transition that is combined with the <code>box-shadow</code>. We cannot reuse the same code we used before since we changed the <code>clip-path</code> value to create the 3D box shape. But we can still transition it to get the sliding result we want.</p>
1551. <p>The idea is to have two points at the top that move up and down to reveal and hide the <code>box-shadow</code> while the other points remain fixed. Here is a small video to illustrate the movement of the points.</p>
1552. <p>See that? We have five fixed points. The two at the top move to increase the area of the polygon and reveal the box shadow.</p>
1553. <div>
1554. <pre><code>img {
1555.  clip-path: polygon(
1556.    var(--d) 0, /* --> var(--d) calc(-1*(var(--s) - var(--d))) */
1557.    100%     0, /* --> 100%     calc(-1*(var(--s) - var(--d))) */
1558.  
1559.    /* the fixed points */
1560.    100% calc(100% - var(--d)), /* 1 */
1561.    calc(100% - var(--d)) 100%, /* 2 */
1562.    0 100%,                     /* 3 */
1563.    0 var(--d),                 /* 4 */
1564.    var(--d) 0);                /* 5 */
1565. }
1566. </code></pre>
1567. </div>
1568.  
1569. <p>And we’re done! We’re left with a nice 3D frame around the image element with a cover that slides up and down on hover. And we did it with zero extra markup or reaching for pseudo-elements!</p>
1570. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/GRejXMK">3D image with reveal effect</a> by <a href="https://codepen.io/t_afif">Temani Afif</a>.</p>
1571. <p>And here is the first demo I shared at the start of this article, showing the two sliding variations.</p>
1572. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/LYaPPPo">Image gift box (hover to reveal)</a> by <a href="https://codepen.io/t_afif">Temani Afif</a>.</p>
1573. <p>This last demo is an optimized version of what we did together. I have written most of the formulas using the variable <code>--h</code> so that I only update one value on hover. It also includes another variation. Can you reverse-engineer it and see how its code differs from the one we did together? </p>
1574. One More 3D Example
1575. <p>Want another fancy effect that uses 3D effects and sliding overlays? Here’s one I put together using a different 3D perspective where the overlay splits open rather than sliding from one side to the other.</p>
1576. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/yLwBVGQ">Image gift box II (hover to reveal)</a> by <a href="https://codepen.io/t_afif">Temani Afif</a>.</p>
1577. <p>Your homework is to dissect the code. It may look complex, but if you trace the steps we completed for the original demo, I think you’ll find that it’s not a terribly different approach. The sliding effect still combines the <code>padding</code>, the <code>object-*</code> properties, and <code>clip-path</code> but with different values to produce this new effect.</p>
1578. Conclusion
1579. <p>I hope you enjoyed this little 3D image experiment and the fancy effect we applied to it. I know that adding an extra element (i.e., a parent <code>&lt;div&gt;</code> as a wrapper) to the markup would have made the effect a lot easier to achieve, as would pseudo-elements and translations. But we are here for the challenge and learning opportunity, right?</p>
1580. <p>Limiting the HTML to only a single element allows us to push the limits of CSS to discover new techniques that can save us time and bytes, especially in those situations where you might not have direct access to modify HTML, like when you’re working in a CMS template. Don’t look at this as an over-complicated exercise. It’s an exercise that challenges us to leverage the power and flexibility of CSS.</p>
1581. ]]></content:encoded>
1582.            <author>hello@smashingmagazine.com (Temani Afif)</author>
1583.            <enclosure url="http://files.smashing.media/articles/sliding-3d-image-frames-css/sliding-3d-image-frames-css.jpg" length="0" type="image/jpg"/>
1584.        </item>
1585.        <item>
1586.            <title><![CDATA[Penpot’s CSS Grid Layout: Designing With Superpowers]]></title>
1587.            <link>https://smashingmagazine.com/2024/04/penpot-css-grid-layout-designing-superpowers/</link>
1588.            <guid>https://smashingmagazine.com/2024/04/penpot-css-grid-layout-designing-superpowers/</guid>
1589.            <pubDate>Thu, 11 Apr 2024 08:00:00 GMT</pubDate>
1590.            <description><![CDATA[Penpot helps designers and developers work better together by offering a free, open-source design tool based on open web standards. Today, let's explore Penpot’s latest feature, CSS Grid Layout. Penpot’s latest release is about efficiency and so much more. It gives designers superpowers and a better place at the table. Excited? Let’s take a look at it together.]]></description>
1591.            <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://penpot.app/?utm_source=Article&amp;utm_medium=SmashingMag&amp;utm_id=Penpot2.0">Penpot</a></p>
1592. <p>It was less than a year ago when <a href="https://www.smashingmagazine.com/2023/02/meet-penpot-open-source-design-platform-designers-developers/">I first had a chance to use Penpot</a> and instantly got excited about it. They managed to build something that designers haven’t yet seen before — a modern, open-source tool for everyone. In the world of technology, that might not sound groundbreaking. After all, open-source tools and software are being taken for granted as a cornerstone of modern web development. But for some reason, not for design — until now. Penpot’s approach to building design software comes with a lot of good arguments. And it gathered a strong community.</p>
1593. <p>One of the reasons why Penpot is so exciting is that it <strong>allows creators to build user interfaces in a visual environment</strong>, but using the same standards and technologies as the end product. It makes a design workflow easier on many levels. Today, we are going to focus on just one of them, building layouts.</p>
1594. <p>Design tools went a long way trying to make it easier to design complex, responsive layouts and flexible, customizable components. Some of them tried to mimic the mechanisms used in web technologies and others tried to mimic these imitations. But such an approach will take you only so far.</p>
1595. Short History Of Web Layouts
1596. <p>So how are the layouts for the web built in practice?</p>
1597. <p>If you’ve been around the industry long enough, you might remember the times when you used frames, tables, and floats to build layouts. And if you haven’t, you didn’t miss much. Just to give you a taste of how bad it was: same as exporting tiny images of rounded corners from ever-crashing Photoshop, just to meticulously position them in every corner of a rectangle so you could make a dull, rounded button, it was just a pain. Far too often, it was a pleasure to craft yet another amazing design — but so much tears and sorrow to actually implement it. </p>
1598. <p>Then Flexbox came in and changed everything. And soon after it, Grid. Two powerful yet amazingly simple engines to build layouts that changed web developers’ lives forever.</p>
1599. <p>Ironically, design tools never caught up. Flexbox and Grid opened an ocean of possibilities, yet gated behind a barrier of knowing how to code. None of the design tools ever implemented them so a larger audience of designers could leverage them in their workflows. Not until now.</p>
1600. Creating Layouts With Penpot
1601. <p><a href="https://penpot.app/?utm_source=Article&amp;utm_medium=SmashingMag&amp;utm_id=Penpot2.0">Penpot</a> is becoming the first design tool to support both Flexbox and Grid in their toolkit. And by support, I don’t mean a layout feature that tries to copy what Flexbox or Grid has to offer. We’re talking about an actual implementation of Flexbox and Grid inside the design tool.</p>
1602. <p>Penpot’s Flexbox implementation went public earlier this year. If you’d like to give it a try, last year, <a href="https://www.smashingmagazine.com/2023/06/penpot-flex-layout-building-css-layouts-design-tool/">I wrote a separate article just about it</a>. Now, <strong>Penpot is fully implementing both Flexbox and Grid</strong>.</p>
1603. <p>You might be wondering why we need both. Couldn’t you just use Flexbox for everything, same as you use the same simple layout features in a design tool? Technically, yes, you could. In fact, most people do. (At the time of writing, only a quarter of websites worldwide use CSS Grid, but its adoption is steadily increasing; <a href="https://chromestatus.com/metrics/feature/timeline/popularity/1693">source</a>)</p>
1604. <p>So if you want to build simple, mostly linear layouts, Flexbox is probably all you’ll ever need. But if you want to gain some design superpowers? Learn Grid. </p>
1605. <p>Penpot’s CSS Grid Layout is out now, so you can already <a href="https://penpot.app/penpot-2.0?utm_source=Article&amp;utm_medium=SmashingMag&amp;utm_id=Penpot2.0">give it a try</a>. It’s a part of their major 2.0 release, bringing a bunch of long-awaited features and improvements. I’d strongly encourage you to give it a go and see how it works for yourself. And if you need some inspiration, keep reading!</p>
1606. CSS Grid Layout In Practice
1607. <p>As an example, let’s build a portfolio page that consists of a sidebar and a grid of pictures.</p>
1608. <h3>Creating A Layout</h3>
1609. <p>Our first step will be to create a simple two-dimensional grid. In this case using a Grid Layout makes more sense than Flex Layout as we want to have more granular control over how elements are laid out on multiple axes.</p>
1610. <p><img src /></p>
1611. <p><img src /></p>
1612. <p>To make the grid even more powerful, you can merge cells, group them into functional areas, and name them. Here, we are going to create a dedicated area for the sidebar.</p>
1613. <p>As you adjust the layout later, you can see that the sidebar always keeps the same width and full height of the design while other cells get adjusted to the available space. </p>
1614. <h3>Building Even More Complex Grids</h3>
1615. <p>That’s not all. Apart from merging cells of the grid, you can tell elements inside it to take multiple cells. On our portfolio page, we are going to use this to make the featured picture bigger than others and take four cells instead of one.</p>
1616. <p>As a result, we created a complex, responsive layout that would be a breeze to turn it into a functional website but at the same time would be completely impossible to build in any other design tool out there. And that’s just a fraction of what Grid Layout can do.</p>
1617. Next Steps
1618. <p>I hope you liked this demo of Penpot's Grid Layout. If you’d like to play around with the examples used in this article, go ahead and <a href="https://github.com/penpot/penpot-files/raw/main/Grid%20layout%20playground.penpot">duplicate this Penpot file</a>. It’s a great template that explains all the ins and outs of using Grid in your designs!</p>
1619. <p>In case you’re more of a video-learning type, there’s a great tutorial on Grid Layout you can <a href="https://www.youtube.com/watch?v=4wFwffbFb44">watch now on YouTube</a>. And if you need help at any point, the Penpot community will be more than happy to answer your questions.</p>
1620. Summary
1621. <p>Flexbox and Grid in Penpot open up opportunities to craft layouts like never before. Today, anyone can combine the power of Flex Layout and Grid Layout to create complex, sophisticated structures that are flexible, responsive, and ready to deploy out-of-the-box—all without writing a single line of code.</p>
1622. <p>Working with the right technologies not only makes things easier, but it also just feels right. That's something I've always longed for in design tools. Adopting CSS as a standard for both designers and developers facilitates smoother collaboration and helps them both feel more at home in their workflows.</p>
1623. <p>For designers, that’s also a chance to strengthen their skill set, which matters today more than ever. The design industry is a competitive space that keeps changing rapidly, and staying competitive is hard work. However, learning the less obvious aspects and gaining a better understanding of the technologies you work with might help you do that.</p>
1624. Try CSS Grid Layout And Share Your Thoughts!
1625. <p>If you decide to <a href="https://penpot.app/penpot-2.0?utm_source=Article&amp;utm_medium=SmashingMag&amp;utm_id=Penpot2.0">give CSS Grid Layout a try</a>, don’t hesitate to share your experience! The team behind Penpot would love to hear your feedback. Being a completely <strong>free and open-source tool</strong>, Penpot’s development thrives thanks to its community and people like you.</p>
1626. ]]></content:encoded>
1627.            <author>hello@smashingmagazine.com (Mikołaj Dobrucki)</author>
1628.            <enclosure url="http://files.smashing.media/articles/penpot-css-grid-layout-designing-superpowers/penpot-css-grid-layout-designing-superpowers.jpg" length="0" type="image/jpg"/>
1629.        </item>
1630.        <item>
1631.            <title><![CDATA[Connecting With Users: Applying Principles Of Communication To UX Research]]></title>
1632.            <link>https://smashingmagazine.com/2024/04/applying-principles-communication-ux-research/</link>
1633.            <guid>https://smashingmagazine.com/2024/04/applying-principles-communication-ux-research/</guid>
1634.            <pubDate>Tue, 09 Apr 2024 10:00:00 GMT</pubDate>
1635.            <description><![CDATA[Victor Yocco reviews the components of the Transactional Model of communication, explaining how we might apply this framework to preparing, conducting, and analysing our UX research. You will understand how many UX research best practices align with the model and get an example of a tool for tracking alignment.]]></description>
1636.            <content:encoded><![CDATA[<p>Communication is in everything we do. We communicate with users through our research, our design, and, ultimately, the products and services we offer. UX practitioners and those working on digital product teams benefit from understanding principles of communication and their application to our craft. Treating our UX processes as a mode of communication between users and the digital environment can help unveil in-depth, actionable insights.</p>
1637. <p>In this article, I’ll focus on UX research. <strong>Communication is a core component of UX research</strong>, as it serves to bridge the gap between research insights, design strategy, and business outcomes. UX researchers, designers, and those working with UX researchers can apply key aspects of communication theory to help gather valuable insights, enhance user experiences, and create more successful products. </p>
1638. Fundamentals of Communication Theory
1639. <p>Communications as an academic field encompasses various models and principles that highlight the dynamics of communication between individuals and groups. Communication theory examines the transfer of information from one person or group to another. It explores how messages are transmitted, encoded, and decoded, acknowledges the potential for interference (or ‘noise’), and accounts for feedback mechanisms in enhancing the communication process.</p>
1640. <p>In this article, I will focus on the <strong>Transactional Model of Communication</strong>. There are many other models and theories in the academic literature on communication. I have included references at the end of the article for those interested in learning more. </p>
1641. <p>The Transactional Model of Communication (Figure 1) is a <strong>two-way process that emphasizes the simultaneous sending and receiving of messages and feedback</strong>. Importantly, it recognizes that communication is shaped by context and is an ongoing, evolving process. I’ll use this model and understanding when applying principles from the model to UX research. You’ll find that much of what is covered in the Transactional Model would also fall under general best practices for UX research, suggesting even if we aren’t communications experts, much of what we should be doing is supported by research in this field.</p>
1642. <p><img src="https://files.smashing.media/articles/applying-principles-communication-ux-research/transactional-model.jpg" /></p>
1643. <h3>Understanding the Transactional Model</h3>
1644. <p>Let’s take a deeper dive into the six key factors and their applications within the realm of UX research:</p>
1645. <ol>
1646. <li><strong>Sender:</strong> In UX research, the sender is typically the researcher who conducts interviews, facilitates usability tests, or designs surveys. For example, if you’re administering a user interview, you are the sender who initiates the communication process by asking questions.</li>
1647. <li><strong>Receiver:</strong> The receiver is the individual who decodes and interprets the messages sent by the sender. In our context, this could be the user you interview or the person taking a survey you have created. They receive and process your questions, providing responses based on their understanding and experiences.</li>
1648. <li><strong>Message:</strong> This is the content being communicated from the sender to the receiver. In UX research, the message can take various forms, like a set of survey questions, interview prompts, or tasks in a usability test.</li>
1649. <li><strong>Channel:</strong> This is the medium through which the communication flows. For instance, face-to-face interviews, phone interviews, email surveys administered online, and usability tests conducted via screen sharing are all different communication channels. You might use multiple channels simultaneously, for example, communicating over voice while also using a screen share to show design concepts.</li>
1650. <li><strong>Noise:</strong> Any factor that may interfere with the communication is regarded as ‘noise.’ In UX research, this could be complex jargon that confuses respondents in a survey, technical issues during a remote usability test, or environmental distractions during an in-person interview.</li>
1651. <li><strong>Feedback:</strong> The communication received by the receiver, who then provides an output, is called feedback. For example, the responses given by a user during an interview or the data collected from a completed survey are types of feedback or the physical reaction of a usability testing participant while completing a task.</li>
1652. </ol>
1653. Applying the Transactional Model of Communication to Preparing for UX Research
1654. <p>We can become complacent or feel rushed to create our research protocols. I think this is natural in the pace of many workplaces and our need to deliver results quickly. You can apply the lens of the Transactional Model of Communication to your research preparation without adding much time. Applying the Transactional Model of Communication to your preparation should:</p>
1655. <ul>
1656. <li><strong>Improve Clarity</strong><br />The model provides a clear representation of communication, empowering the researcher to plan and conduct studies more effectively.</li>
1657. <li><strong>Minimize misunderstanding</strong><br />By highlighting potential noise sources, user confusion or misunderstandings can be better anticipated and mitigated.</li>
1658. <li><strong>Enhance research participant participation</strong><br />With your attentive eye on feedback, participants are likely to feel valued, thus increasing active involvement and quality of input.</li>
1659. </ul>
1660. <p>You can address the specific elements of the Transactional Model through the following steps while preparing for research:</p>
1661. <h4>Defining the Sender and Receiver</h4>
1662. <p>In UX research, the sender can often be the UX researcher conducting the study, while the receiver is usually the research participant. Understanding this dynamic can help researchers craft questions or tasks more empathetically and efficiently. You should try to collect some information on your participant in advance to prepare yourself for building a rapport.</p>
1663. <p>For example, if you are conducting contextual inquiry with the field technicians of an HVAC company, you’ll want to dress appropriately to reflect your understanding of the context in which your participants (receivers) will be conducting their work. Showing up dressed in formal attire might be off-putting and create a negative dynamic between sender and receiver.</p>
1664. <h4>Message Creation</h4>
1665. <p>The message in UX research typically is the questions asked or tasks assigned during the study. Careful consideration of tenor, terminology, and clarity can aid data accuracy and participant engagement. Whether you are interviewing or creating a survey, you need to double-check that your audience will understand your questions and provide meaningful answers. You can pilot-test your protocol or questionnaire with a few representative individuals to identify areas that might cause confusion.</p>
1666. <p>Using the HVAC example again, you might find that field technicians use certain terminology in a different way than you expect, such as asking them about what “tools” they use to complete their tasks yields you an answer that doesn’t reflect digital tools you’d find on a computer or smartphone, but physical tools like a pipe and wrench.</p>
1667. <h4>Choosing the Right Channel</h4>
1668. <p>The channel selection depends on the method of research. For instance, face-to-face methods might use physical verbal communication, while remote methods might rely on emails, video calls, or instant messaging. The choice of the medium should consider factors like tech accessibility, ease of communication, reliability, and participant familiarity with the channel. For example, you introduce an additional challenge (noise) if you ask someone who has never used an iPhone to test an app on an iPhone.</p>
1669. <h4>Minimizing Noise</h4>
1670. <p>Noise in UX research comes in many forms, from unclear questions inducing participant confusion to technical issues in remote interviews that cause interruptions. The key is to foresee potential issues and have preemptive solutions ready.</p>
1671. <h4>Facilitating Feedback</h4>
1672. <p>You should be prepared for how you might collect and act on participant feedback during the research. Encouraging regular feedback from the user during UX research ensures their understanding and that they feel heard. This could range from asking them to ‘think aloud’ as they perform tasks or encouraging them to email queries or concerns after the session. You should document any noise that might impact your findings and account for that in your analysis and reporting.</p>
1673. <h4>Track Your Alignment to the Framework</h4>
1674. <p>You can track what you do to align your processes with the Transactional Model prior to and during research using a spreadsheet. I’ll provide an example of a spreadsheet I’ve used in the later case study section of this article. You should create your spreadsheet during the process of preparing for research, as some of what you do to prepare should align with the factors of the model.</p>
1675. <p>You can use these tips for preparation regardless of the specific research method you are undertaking. Let’s now look closer at a few common methods and get specific on how you can align your actions with the Transactional Model.</p>
1676. <p><img src="https://files.smashing.media/articles/applying-principles-communication-ux-research/communication.jpg" /></p>
1677. Applying the Transactional Model to Common UX Research Methods
1678. <p>UX research relies on interaction with users. We can easily incorporate aspects of the Transactional Model of Communication into our most common methods. Utilizing the Transactional Model in conducting interviews, surveys, and usability testing can help provide structure to your process and increase the quality of insights gathered.</p>
1679. <h3>Interviews</h3>
1680. <p>Interviews are a common method used in qualitative UX research. They provide the perfect method for applying principles from the Transactional Model. In line with the Transactional Model, the researcher (sender) sends questions (messages) in-person or over the phone/computer medium (channel) to the participant (receiver), who provides answers (feedback) while contending with potential distraction or misunderstanding (noise). Reflecting on communication as transactional can help remind us we need to respect the dynamic between ourselves and the person we are interviewing. <strong>Rather than approaching an interview as a unidirectional interrogation, researchers need to view it as a conversation.</strong></p>
1681. <p>Applying the Transactional Model to conducting interviews means we should account for a number of facts to allow for high-quality communication. Note how the following overlap with what we typically call best practices.</p>
1682. <h4>Asking Open-ended Questions</h4>
1683. <p>To truly harness a two-way flow of communication, open-ended questions, rather than close-ended ones, are crucial. For instance, rather than asking, <em>“Do you use our mobile application?”</em> ask, <em>“Can you describe your use of our mobile app?”.</em> This encourages the participant to share more expansive and descriptive insights, furthering the dialogue.</p>
1684. <h4>Actively Listening</h4>
1685. <p>As the success of an interview relies on the participant’s responses, active listening is a crucial skill for UX researchers. The researcher should encourage participants to express their thoughts and feelings freely. <strong>Reflective listening techniques</strong>, such as paraphrasing or summarizing what the participant has shared, can reinforce to the interviewee that their contributions are being acknowledged and valued. It also provides an opportunity to clarify potential noise or misunderstandings that may arise.</p>
1686. <h4>Being Responsive</h4>
1687. <p>Building on the simultaneous send-receive nature of the Transactional Model, researchers must remain responsive during interviews. Providing non-verbal cues (like nodding) and verbal affirmations (“I see,” “Interesting”) lets participants know their message is being received and understood, making them feel comfortable and more willing to share.</p>
1688. <h4>Minimizing Noise</h4>
1689. <p>We should always attempt to account for noise in advance, as well as during our interview sessions. Noise, in the form of misinterpretations or distractions, can disrupt effective communication. Researchers can proactively <strong>reduce noise by conducting a dry run in advance of the scheduled interviews</strong>. This helps you become more fluent at going through the interview and also helps identify areas that might need improvement or be misunderstood by participants. You also reduce noise by creating a conducive interview environment, minimizing potential distractions, and asking clarifying questions during the interview whenever necessary.</p>
1690. <p>For example, if a participant uses a term the researcher doesn’t understand, the researcher should politely ask for clarification rather than guessing its meaning and potentially misinterpreting the data. </p>
1691. <p>Additional forms of noise can include participant confusion or distraction. You should let participants know to ask if they are unclear on anything you say or do. It’s a good idea to always ask participants to put their smartphones on mute. You should only <strong>provide information critical to the process when introducing the interview</strong> or tasks. For example, you don’t need to give a full background of the history of the product you are researching if that isn’t required for the participant to complete the interview. However, you should let them know the purpose of the research, gain their consent to participate, and inform them of how long you expect the session to last.</p>
1692. <h4>Strategizing the Flow</h4>
1693. <p>Researchers should build strategic thinking into their interviews to support the Transaction Model. Starting the interview with less intrusive questions can help establish rapport and make the participant more comfortable, while more challenging or sensitive questions can be left for later when the interviewee feels more at ease.</p>
1694. <p>A well-planned interview encourages a fluid dialogue and exchange of ideas. This is another area where conducting a dry run can help to ensure high-quality research. You and your dry-run participants should recognize areas where questions aren’t flowing in the best order or don’t make sense in the context of the interview, allowing you to correct the flow in advance.</p>
1695. <p>While much of what the Transactional Model informs for interviews already aligns with common best practices, the model would suggest we need to have a deeper consideration of factors that we can sometimes give less consideration when we become overly comfortable with interviewing or are unaware of the implications of forgetting to address the factors of context considerations, power dynamics, and post-interview actions.</p>
1696. <h4>Context Considerations</h4>
1697. <p>You need to account for both the context of the participant, e.g., their background, demographic, and psychographic information, as well as the context of the interview itself. You should make subtle yet meaningful modifications depending on the channel you are conducting an interview.</p>
1698. <p>For example, you should utilize video and be aware of your facial and physical responses if you are conducting an interview using an online platform, whereas if it’s a phone interview, you will need to rely on verbal affirmations that you are listening and following along, while also being mindful not to interrupt the participant while they are speaking.</p>
1699. <h4>Power Dynamics</h4>
1700. <p>Researchers need to be aware of how your role, background, and identity might influence the power dynamics of the interview. You can attempt to address power dynamics by sharing research goals transparently and addressing any potential concerns about bias a participant shares.</p>
1701. <p>We are responsible for creating a safe and inclusive space for our interviews. You do this through the use of inclusive language, listening actively without judgment, and being flexible to accommodate different ways of knowing and expressing experiences. You should also <strong>empower participants as collaborators whenever possible</strong>. You can offer opportunities for participants to share feedback on the interview process and analysis. Doing this validates participants’ experiences and knowledge and ensures their voices are heard and valued.</p>
1702. <h4>Post-Interview Actions</h4>
1703. <p>You have a number of options for actions that can close the loop of your interviews with participants in line with the “feedback” the model suggests is a critical part of communication. Some tactics you can consider following your interview include:</p>
1704. <ul>
1705. <li><strong>Debriefing</strong><br />Dedicate a few minutes at the end to discuss the participant’s overall experience, impressions, and suggestions for future interviews.</li>
1706. <li><strong>Short surveys</strong><br />Send a brief survey via email or an online platform to gather feedback on the interview experience.</li>
1707. <li><strong>Follow-up calls</strong><br />Consider follow-up calls with specific participants to delve deeper into their feedback and gain additional insight if you find that is warranted.</li>
1708. <li><strong>Thank you emails</strong><br />Include a “feedback” section in your thank you email, encouraging participants to share their thoughts on the interview.</li>
1709. </ul>
1710. <p>You also need to do something with the feedback you receive. Researchers and product teams should make time for reflexivity and critical self-awareness.</p>
1711. <p>As practitioners in a human-focused field, we are expected to continuously examine how our assumptions and biases might influence our interviews and findings.</p>
1712. <p>We shouldn’t practice our craft in a silo. Instead, <strong>seeking feedback from colleagues and mentors to maintain ethical research practices should be a standard practice</strong> for interviews and all UX research methods.</p>
1713. <p>By considering interviews as an ongoing transaction and exchange of ideas rather than a unidirectional Q&amp;A, UX researchers can create a more communicative and engaging environment. You can see how models of communication have informed best practices for interviews. With a better knowledge of the Transactional Model, you can go deeper and check your work against the framework of the model. </p>
1714. <h3>Surveys</h3>
1715. <p>The Transactional Model of Communication reminds us to acknowledge the feedback loop even in seemingly one-way communication methods like surveys. Instead of merely sending out questions and collecting responses, we need to provide space for respondents to voice their thoughts and opinions freely. When we make participants feel heard, engagement with our surveys should increase, dropouts should decrease, and response quality should improve.</p>
1716. <p>Like other methods, surveys involve the researcher(s) creating the instructions and questionnaire (sender), the survey, including any instructions, disclaimers, and consent forms (the message), how the survey is administered, e.g., online, in person, or pen and paper (the channel), the participant (receiver), potential misunderstandings or distractions (noise), and responses (feedback).</p>
1717. <h4>Designing the Survey</h4>
1718. <p>Understanding the Transactional Model will help researchers design more effective surveys. Researchers are encouraged to be aware of both their role as the sender and to anticipate the participant’s perspective as the receiver. Begin surveys with clear instructions, explaining why you’re conducting the survey and how long it’s estimated to take. This establishes a more communicative relationship with respondents right from the start. Test these instructions with multiple people prior to launching the survey.</p>
1719. <h4>Crafting Questions</h4>
1720. <p>The questions should be crafted to encourage feedback and not just a simple yes or no. You should consider asking scaled questions or items that have been statistically validated to measure certain attributes of users.</p>
1721. <p>For example, if you were looking deeper at a mobile banking application, rather than asking, <em>“Did you find our product easy to use?”</em> you would want to break that out into multiple aspects of the experience and ask about each with a separate question such as <em>“On a scale of 1–7, with 1 being extremely difficult and 7 being extremely easy, how would you rate your experience transferring money from one account to another?”</em>.</p>
1722. <h4>Minimizing Noise</h4>
1723. <p>Reducing ‘noise,’ or misunderstandings, is crucial for increasing the reliability of responses. Your first line of defense in reducing noise is to make sure you are sampling from the appropriate population you want to conduct the research with. You need to <strong>use a screener that will filter out non-viable participants</strong> prior to including them in the survey. You do this when you correctly identify the characteristics of the population you want to sample from and then exclude those falling outside of those parameters.</p>
1724. <p>Additionally, you should focus on prioritizing finding participants through random sampling from the population of potential participants versus using a convenience sample, as this helps to ensure you are collecting reliable data.</p>
1725. <p>When looking at the survey itself, there are a number of recommendations to reduce noise. You should ensure questions are easily understandable, avoid technical jargon, and sequence questions logically. A question bank should be reviewed and tested before being finalized for distribution.</p>
1726. <p>For example, question statements like <em>“Do you use and like this feature?”</em> can confuse respondents because they are actually two separate questions: do you use the feature, and do you like the feature? You should separate out questions like this into more than one question. </p>
1727. <p>You should use visual aids that are relevant whenever possible to enhance the clarity of the questions. For example, if you are asking questions about an application’s “Dashboard” screen, you might want to provide a screenshot of that page so survey takers have a clear understanding of what you are referencing. You should also avoid the use of jargon if you are surveying a non-technical population and explain any terminology that might be unclear to participants taking the survey.</p>
1728. <p>The Transactional Model suggests <strong>active participation in communication is necessary for effective communication</strong>. Participants can become distracted or take a survey without intending to provide thoughtful answers. You should consider adding a question somewhere in the middle of the survey to check that participants are paying attention and responding appropriately, particularly for longer surveys.</p>
1729. <p>This is often done using a simple math problem such as <em>“What is the answer to 1+1?”</em> Anyone not responding with the answer of “2” might not be adequately paying attention to the responses they are providing and you’d want to look closer at their responses, eliminating them from your analysis if deemed appropriate.</p>
1730. <h4>Encouraging Feedback</h4>
1731. <p>While descriptive feedback questions are one way of promoting dialogue, you can also include areas where respondents can express any additional thoughts or questions they have outside of the set question list. This is especially useful in online surveys, where researchers can’t immediately address participant’s questions or clarify doubts.</p>
1732. <p>You should be mindful that <strong>too many open-ended questions can cause fatigue</strong>, so you should limit the number of open-ended questions. I recommend two to three open-ended questions depending on the length of your overall survey.</p>
1733. <h4>Post-Survey Actions</h4>
1734. <p>After collecting and analyzing the data, you can send follow-up communications to the respondents. Let them know the changes made based on their feedback, thank them for their participation, or even share a summary of the survey results. This fulfills the Transactional Model’s feedback loop and communicates to the respondent that their input was received, valued, and acted upon.</p>
1735. <p>You can also meet this suggestion by providing an email address for participants to follow up if they desire more information post-survey. You are allowing them to complete the loop themselves if they desire. </p>
1736. <p>Applying the transactional model to surveys can breathe new life into the way surveys are conducted in UX research. It encourages active participation from respondents, making the process more interactive and engaging while enhancing the quality of the data collected. You can experiment with applying some or all of the steps listed above. You will likely find you are already doing much of what’s mentioned, however being explicit can allow you to make sure you are thoughtfully applying these principles from the field communication.</p>
1737. <h3>Usability Testing</h3>
1738. <p>Usability testing is another clear example of a research method highlighting components of the Transactional Model. In the context of usability testing, the Transactional Model of Communication’s application opens a pathway for a richer understanding of the user experience by positioning both the user and the researcher as sender and receiver of communication simultaneously. </p>
1739. <p>Here are some ways a researcher can use elements of the Transactional Model during usability testing:</p>
1740. <h4>Task Assignment as Message Sending</h4>
1741. <p>When a researcher assigns tasks to a user during usability testing, they act as the sender in the communication process. To ensure the user accurately receives the message, these tasks need to be clear and well-articulated. For example, a task like “Register a new account on the app” sends a clear message to the user about what they need to do.</p>
1742. <p>You don’t need to tell them how to do the task, as usually, that’s what we are trying to determine from our testing, but if you are not clear on what you want them to do, your message will not resonate in the way it is intended. This is another area where a dry run in advance of the testing is an optimal solution for making sure tasks are worded clearly. </p>
1743. <h4>Observing and Listening as Message Receiving</h4>
1744. <p>As the participant interacts with the application, concept, or design, the researcher, as the receiver, picks up on verbal and nonverbal cues. For instance, if a user is clicking around aimlessly or murmuring in confusion, the researcher can take these as feedback about certain elements of the design that are unclear or hard to use. You can also ask the user to explain why they are giving these cues you note as a way to provide them with feedback on their communication.</p>
1745. <h4>Real-time Interaction</h4>
1746. <p>The transactional nature of the model recognizes the importance of real-time interaction. For example, if during testing, the user is unsure of what a task means or how to proceed, the researcher can provide clarification without offering solutions or influencing the user’s action. This interaction follows the communication flow prescribed by the transactional model. We lose the ability to do this during unmoderated testing; however, many design elements are forms of communication that can serve to direct users or clarify the purpose of an experience (to be covered more in article two).</p>
1747. <h4>Noise</h4>
1748. <p>In usability testing, noise could mean unclear tasks, users’ preconceived notions, or even issues like slow software response. Acknowledging noise can help researchers plan and conduct tests better. Again, carrying out a pilot test can help identify any noise in the main test scenarios, allowing for necessary tweaks before actual testing. Other forms of noise can be less obvious but equally intrusive. For example, if you are conducting a test using a Macbook laptop and your participant is used to a PC, there is noise you need to account for, given their unfamiliarity with the laptop you’ve provided. </p>
1749. <p>The fidelity of the design artifact being tested might introduce another form of noise. I’ve always advocated testing at any level of fidelity, but you should note that if you are using “Lorem Ipsum” or black and white designs, this potentially adds noise.</p>
1750. <p>One of my favorite examples of this was a time when I was testing a financial services application, and the designers had put different balances on the screen; however, the total for all balances had not been added up to the correct total. Virtually every person tested noted this discrepancy, although it had nothing to do with the tasks at hand. I had to acknowledge we’d introduced noise to the testing. As at least one participant noted, they wouldn’t trust a tool that wasn’t able to total balances correctly.</p>
1751. <h4>Encouraging Feedback</h4>
1752. <p>Under the Transactional Model’s guidance, feedback isn’t just final thoughts after testing; it should be facilitated at each step of the process. Encouraging <strong>‘think aloud’ protocols</strong>, where the user verbalizes their thoughts, reactions, and feelings during testing, ensures a constant flow of useful feedback.</p>
1753. <p>You are receiving feedback throughout the process of usability testing, and the model provides guidance on how you should use that feedback to create a shared meaning with the participants. You will ultimately summarize this meaning in your report. You’ll later end up uncovering if this shared meaning was correctly interpreted when you design or redesign the product based on your findings.</p>
1754. <p><img src="https://files.smashing.media/articles/applying-principles-communication-ux-research/feedback.jpg" /></p>
1755. <p>We’ve now covered how to apply the Transactional Model of Communication to three common UX Research methods. All research with humans involves communication. You can break down other UX methods using the Model’s factors to make sure you engage in high-quality research.</p>
1756. Analyzing and Reporting UX Research Data Through the Lens of the Transactional Model
1757. <p>The Transactional Model of Communication doesn’t only apply to the data collection phase (interviews, surveys, or usability testing) of UX research. Its principles can provide valuable insights during the data analysis process.</p>
1758. <p>The Transactional Model instructs us to <strong>view any communication as an interactive, multi-layered dialogue</strong> — a concept that is particularly useful when unpacking user responses. Consider the ‘message’ components: In the context of data analysis, the messages are the users’ responses. As researchers, thinking critically about how respondents may have internally processed the survey questions, interview discussion, or usability tasks can yield richer insights into user motivations.</p>
1759. <h4>Understanding Context</h4>
1760. <p>Just as the Transactional Model emphasizes the simultaneous interchange of communication, UX researchers should consider the user’s context while interpreting data. Decoding the meaning behind a user’s words or actions involves understanding their background, experiences, and the situation when they provide responses.</p>
1761. <h4>Deciphering Noise</h4>
1762. <p>In the Transactional Model, noise presents a potential barrier to effective communication. Similarly, researchers must be aware of snowballing themes or frequently highlighted issues during analysis. Noise, in this context, could involve patterns of confusion, misunderstandings, or consistently highlighted problems by users. You need to account for this, e.g., the example I provided where participants constantly referred to the incorrect math on static wireframes.</p>
1763. <h4>Considering Sender-Receiver Dynamics</h4>
1764. <p>Remember that as a UX researcher, your interpretation of user responses will be influenced by your understandings, biases, or preconceptions, just as the responses were influenced by the user’s perceptions. By acknowledging this, researchers can strive to neutralize any subjective influence and ensure the analysis remains centered on the user’s perspective. You can ask other researchers to double-check your work to attempt to account for bias.</p>
1765. <p>For example, if you come up with a clear theme that users need better guidance in the application you are testing, another researcher from outside of the project should come to a similar conclusion if they view the data; if not, you should have a conversation with them to determine what different perspectives you are each bringing to the data analysis.</p>
1766. <h4>Reporting Results</h4>
1767. <p>Understanding your audience is crucial for delivering a persuasive UX research presentation. Tailoring your communication to resonate with the specific concerns and interests of your stakeholders can significantly enhance the impact of your findings. Here are some more details:</p>
1768. <ul>
1769. <li><strong>Identify Stakeholder Groups</strong><br />Identify the different groups of stakeholders who will be present in your audience. This could include designers, developers, product managers, and executives.</li>
1770. <li><strong>Prioritize Information</strong><br />Prioritize the information based on what matters most to each stakeholder group. For example, designers might be more interested in usability issues, while executives may prioritize business impact.</li>
1771. <li><strong>Adapt Communication Style</strong><br />Adjust your communication style to align with the communication preferences of each group. Provide technical details for developers and emphasize user experience benefits for executives.</li>
1772. </ul>
1773. <h4>Acknowledging Feedback</h4>
1774. <p>Respecting this Transactional Model’s feedback loop, remember to revisit user insights after implementing design changes. This ensures you stay user-focused, continuously validating or adjusting your interpretations based on users’ evolving feedback. You can do this in a number of ways. You can reconnect with users to show them updated designs and ask questions to see if the issues you attempted to resolve were resolved.</p>
1775. <p>Another way to address this without having to reconnect with the users is to create a spreadsheet or other document to track all the recommendations that were made and reconcile the changes with what is then updated in the design. You should be able to map the changes users requested to updates or additions to the product roadmap for future updates. This acknowledges that users were heard and that an attempt to address their pain points will be documented.</p>
1776. <p>Crucially, the Transactional Model teaches us that communication is rarely simple or one-dimensional. It encourages UX researchers to take a more nuanced, context-aware approach to data analysis, resulting in deeper user understanding and more accurate, user-validated results.</p>
1777. <p>By maintaining an ongoing feedback loop with users and continually refining interpretations, researchers can ensure that their work remains grounded in real user experiences and needs.</p>
1778. Tracking Your Application of the Transactional Model to Your Practice
1779. <p>You might find it useful to track how you align your research planning and execution to the framework of the Transactional Model. I’ve created a spreadsheet to outline key factors of the model and used this for some of my work. Demonstrated below is an example derived from a study conducted for a banking client that included interviews and usability testing. I completed this spreadsheet during the process of planning and conducting interviews. Anonymized data from our study has been furnished to show an example of how you might populate a similar spreadsheet with your information.</p>
1780. <p>You can customize the spreadsheet structure to fit your specific research topic and interview approach. By documenting your application of the transactional model, you can gain valuable insights into the dynamic nature of communication and improve your interview skills for future research.</p>
1781. <table>
1782.  <thead>
1783.    <tr>
1784.      <th>Stage</th>
1785.      <th>Columns</th>
1786.      <th>Description</th>
1787.      <th>Example</th>
1788.    </tr>
1789.  </thead>
1790.  <tbody>
1791.    <tr>
1792.      <td>Pre-Interview Planning</td>
1793.      <td>Topic/Question (Aligned with research goals)</td>
1794.      <td>Identify the research question and design questions that encourage open-ended responses and co-construction of meaning.</td>
1795.      <td>Testing mobile banking app’s bill payment feature. How do you set up a new payee? How would you make a payment? What are your overall impressions?</td>
1796.    </tr>
1797.    <tr>
1798.      <td></td>
1799.      <td>Participant Context</td>
1800.      <td>Note relevant demographic and personal information to tailor questions and avoid biased assumptions.</td>
1801.      <td>35-year-old working professional, frequent user of the online banking and mobile application but unfamiliar with using the app for bill pay.</td>
1802.    </tr>
1803.    <tr>
1804.      <td></td>
1805.      <td>Engagement Strategies</td>
1806.      <td>Outline planned strategies for active listening, open-ended questions, clarification prompts, and building rapport.</td>
1807.      <td>Open-ended follow-up questions (“Can you elaborate on XYZ? Or Please explain more to me what you mean by  XYZ.”), active listening cues, positive reinforcement (“Thank you for sharing those details”).</td>
1808.    </tr>
1809.    <tr>
1810.      <td></td>
1811.      <td>Shared Understanding</td>
1812.      <td>List potential challenges to understanding participant’s perspectives and strategies for ensuring shared meaning.</td>
1813.      <td>Initially, the participant expressed some confusion about the financial jargon I used. I clarified and provided simpler [non-jargon] explanations, ensuring we were on the same page.</td>
1814.    </tr>
1815.    <tr>
1816.      <td>During Interview</td>
1817.      <td>Verbal Cues</td>
1818.      <td>Track participant’s language choices, including metaphors, pauses, and emotional expressions.</td>
1819.      <td>Participant used a hesitant tone when describing negative experiences with the bill payment feature. When questioned, they stated it was “likely their fault” for not understanding the flow [it isn’t their fault].</td>
1820.    </tr>
1821.    <tr>
1822.      <td></td>
1823.      <td>Nonverbal Cues</td>
1824.      <td>Note participant’s nonverbal communication like body language, facial expressions, and eye contact.</td>
1825.      <td>Frowning and crossed arms when discussing specific pain points.</td>
1826.    </tr>
1827.    <tr>
1828.      <td></td>
1829.      <td>Researcher Reflexivity</td>
1830.      <td>Record moments where your own biases or assumptions might influence the interview and potential mitigation strategies.</td>
1831.      <td>Recognized my own familiarity with the app might bias my interpretation of users’ understanding [e.g., going slower than I would have when entering information]. Asked clarifying questions to avoid imposing my assumptions.</td>
1832.    </tr>
1833.    <tr>
1834.      <td></td>
1835.      <td>Power Dynamics</td>
1836.      <td>Identify instances where power differentials emerge and actions taken to address them.</td>
1837.      <td>Participant expressed trust in the research but admitted feeling hesitant to criticize the app directly. I emphasized anonymity and encouraged open feedback.</td>
1838.    </tr>
1839.    <tr>
1840.      <td></td>
1841.      <td>Unplanned Questions</td>
1842.      <td>List unplanned questions prompted by the participant’s responses that deepen understanding.</td>
1843.      <td>What alternative [non-bank app] methods for paying bills that you use? (Prompted by participant’s frustration with app bill pay).</td>
1844.    </tr>
1845.    <tr>
1846.      <td>Post-Interview Reflection</td>
1847.      <td>Meaning Co-construction</td>
1848.      <td>Analyze how both parties contributed to building shared meaning and insights.</td>
1849.      <td>Through dialogue, we collaboratively identified specific design flaws in the bill payment interface and explored additional pain points and areas that worked well.</td>
1850.    </tr>
1851.    <tr>
1852.      <td></td>
1853.      <td>Openness and Flexibility</td>
1854.      <td>Evaluate how well you adapted to unexpected responses and maintained an open conversation.</td>
1855.      <td>Adapted questioning based on participant’s emotional cues and adjusted language to minimize technical jargon when that issue was raised.</td>
1856.    </tr>
1857.    <tr>
1858.      <td></td>
1859.      <td>Participant Feedback</td>
1860.      <td>Record any feedback received from participants regarding the interview process and areas for improvement.</td>
1861.      <td>Thank you for the opportunity to be in the study. I’m glad my comments might help improve the app for others. I’d be happy to participate in future studies.</td>
1862.    </tr>
1863.    <tr>
1864.      <td></td>
1865.      <td>Ethical Considerations</td>
1866.      <td>Reflect on whether the interview aligned with principles of transparency, reciprocity, and acknowledging power dynamics.</td>
1867.      <td>Maintained anonymity throughout the interview and ensured informed consent was obtained. Data will be stored and secured as outlined in the research protocol.</td>
1868.    </tr>
1869.    <tr>
1870.      <td></td>
1871.      <td>Key Themes/Quotes</td>
1872.      <td>Use this column to identify emerging themes or save quotes you might refer to later when creating the report.</td>
1873.      <td>Frustration with a confusing interface, lack of intuitive navigation, and desire for more customization options.</td>
1874.    </tr>
1875.    <tr>
1876.      <td></td>
1877.      <td>Analysis Notes</td>
1878.      <td>Use as many lines as needed to add notes for consideration during analysis.</td>
1879.      <td>Add notes here.</td>
1880.    </tr>
1881.  </tbody>
1882. </table>
1883.  
1884. <p>You can use the suggested columns from this table as you see fit, adding or subtracting as needed, particularly if you use a method other than interviews. I usually add the following additional Columns for logistical purposes:</p>
1885. <ul>
1886. <li>Date of Interview,</li>
1887. <li>Participant ID,</li>
1888. <li>Interview Format (e.g., in person, remote, video, phone).</li>
1889. </ul>
1890. Conclusion
1891. <p>By incorporating aspects of communication theory into UX research, UX researchers and those who work with UX researchers can enhance the effectiveness of their communication strategies, gather more accurate insights, and create better user experiences. Communication theory provides a framework for understanding the dynamics of communication, and its application to UX research enables researchers to tailor their approaches to specific audiences, employ effective interviewing techniques, design surveys and questionnaires, establish seamless communication channels during usability testing, and interpret data more effectively.</p>
1892. <p>As the field of UX research continues to evolve, integrating communication theory into research practices will become increasingly essential for bridging the gap between users and design teams, ultimately leading to more successful products that resonate with target audiences.</p>
1893. <p>As a UX professional, it is important to <strong>continually explore and integrate new theories and methodologies to enhance your practice</strong>. By leveraging communication theory principles, you can better understand user needs, improve the user experience, and drive successful outcomes for digital products and services.</p>
1894. <p>Integrating communication theory into UX research is an ongoing journey of learning and implementing best practices. Embracing this approach empowers researchers to effectively communicate their findings to stakeholders and foster collaborative decision-making, ultimately driving positive user experiences and successful design outcomes.</p>
1895. <h3>References and Further Reading</h3>
1896. <ul>
1897. <li><a href="https://pure.mpg.de/rest/items/item_2383164/component/file_2383163/content">The Mathematical Theory of Communication</a> (PDF), Shannon, C. E., &amp; Weaver, W.</li>
1898. <li><a href="https://www.taylorfrancis.com/chapters/mono/10.4324/9781410604668-9/organizational-effectiveness-relationship-indicators-antecedents-relationships-public-relations-strategies-relationship-outcomes-john-ledingham-stephen-bruning?context=ubx&amp;refId=833c0cba-fd07-4e3a-9455-d9f89a590b98">From organizational effectiveness to relationship indicators: Antecedents of relationships, public relations strategies, and relationship outcomes</a>, Grunig, J. E., &amp; Huang, Y. H.</li>
1899. <li>Communication and persuasion: Psychological studies of opinion change, Hovland, C. I., Janis, I. L., &amp; Kelley, H. H. (1953). Yale University Press</li>
1900. <li>Communication research as an autonomous discipline, Chaffee, S. H. (1986). Communication Yearbook, 10, 243-274</li>
1901. <li><a href="https://students.aiu.edu/submissions/profiles/resources/onlineBook/N9q9G9_interpersonal-communication.pdf">Interpersonal Communication: Everyday Encounters</a> (PDF), Wood, J. (2015)</li>
1902. <li><a href="https://www.researchgate.net/publication/331627746_Theories_of_Human_Communication">Theories of Human Communication</a>, Littlejohn, S. W., &amp; Foss, K. A. (2011)</li>
1903. <li><a href="https://nibmehub.com/opac-service/pdf/read/McQuail's%20Mass%20communication%20theory.pdf">McQuail’s Mass Communication Theory</a> (PDF), McQuail, D. (2010)</li>
1904. <li><a href="https://www.amazon.com/Bridges-Not-Walls-Interpersonal-Communication/dp/0073534315">Bridges Not Walls: A Book About Interpersonal Communication</a>, Stewart, J. (2012)</li>
1905. </ul>
1906. ]]></content:encoded>
1907.            <author>hello@smashingmagazine.com (Victor Yocco)</author>
1908.            <enclosure url="http://files.smashing.media/articles/applying-principles-communication-ux-research/applying-principles-communication-ux-research.jpg" length="0" type="image/jpg"/>
1909.        </item>
1910.        <item>
1911.            <title><![CDATA[The Things Users Would Appreciate In Mobile Apps]]></title>
1912.            <link>https://smashingmagazine.com/2024/04/things-users-would-appreciate-mobile-apps/</link>
1913.            <guid>https://smashingmagazine.com/2024/04/things-users-would-appreciate-mobile-apps/</guid>
1914.            <pubDate>Fri, 05 Apr 2024 12:00:00 GMT</pubDate>
1915.            <description><![CDATA[What can we do to make a mobile app better? What subsidiary features are worth providing for our users? I have some ideas. You might, too. So, let’s compare our notes. Without any prescriptions attached, here are seven features I believe can palpably improve a user’s experience with a mobile app.]]></description>
1916.            <content:encoded><![CDATA[<p>Remember the “mobile first” mantra? The idea was born out of the early days of responsive web design. Rather than design and build for the “desktop” up front, a “mobile-first” approach treats small screens as first-class citizens. There’s a reduced amount of real estate, certainly less than the number of pixels we get from the viewport of Firefox expanded fullscreen on a 27-inch studio monitor.</p>
1917. <p>The constraint is a challenge to make sure that <strong>whatever is sent to mobile devices is directly relevant to what users should need</strong>; nothing more, nothing less. Anything more additive to the UI can be reserved for wider screens where we’re allowed to stretch out and make more liberal use of space.</p>
1918. <div>
1919. <pre><code>/* A sample CSS snippet for a responsive main content */
1920.  
1921. /* Base Styles */
1922. .main-content {
1923.  container: main / inline-size;
1924. }
1925.  
1926. .gallery {
1927.  display: grid;
1928.  gap: 1rem;
1929. }
1930.  
1931. /* Container is wider than or equal to 700px */
1932. @container main (width >= 700px) {
1933.  .gallery {
1934.    grid-template-columns: 1fr 1fr;
1935.  }
1936. }
1937.  
1938. /* Container is wider than or equal to 1200px */
1939. @container main (width >= 1200px) {
1940.  .gallery {
1941.    grid-template-columns: repeat(4, 1fr);
1942.  }
1943. }
1944. </code></pre>
1945. </div>
1946.  
1947. <p>Now, I’m not here to admonish anyone who isn’t using a mobile-first approach when designing and building web interfaces. If anything, the last five or so years <a href="https://www.youtube.com/watch?v=aHUtMbJw8iA">have shown us just how unpredictable of a medium the web is</a>, including what sort of device is displaying our work all the way down to a user’s individual preferences.</p>
1948. <p>Even so, there are things that any designer and developer should consider when working with mobile interfaces. Now that we’re nearly 15 years into responsive web design as a practice and craft, users are beginning to form opinions about what to expect when trying to do certain things in a mobile interface. I know that I have expectations. I am sure you have them as well.</p>
1949. <p>I’ve been keeping track of the mobile interfaces I use and have started finding common patterns that <em>feel</em> mobile in nature but are more desktop-focused in practice. While keeping track of the mobile interfaces I use, I’ve found common patterns that are unsuitable for small screens and thus could use some updates. Here are some reworked features that are worth considering for mobile interfaces.</p>
1950. Economically-Sized Forms
1951. <p>There are myriad problems that come up while completing mobile forms — e.g., small tap targets, lack of offline support, and incorrect virtual keyboards, to name a few — but it’s how a mobile form interacts with the device’s virtual keyboard that draws my ire the most. </p>
1952. <p>The keyboard obscures the form more times than not. You tap a form field, and the keyboard slides up, and — <em>poof!</em> — it’s as though half the form is chopped out of view. If you’re thinking, <em>Meh, all that means is a little extra scrolling</em>, consider that scrolling isn’t always a choice. If the page is a short one with only the form on it, it’s highly possible what you see on the screen is what you get.</p>
1953. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/1-mobile-form-iphone-text-field.png" /></p>
1954. <p>A more delightful user experience for mobile forms is to take a “less is more” approach. <strong>Display one form field at a time for an economical layout</strong> that allows the field and virtual keyboard to co-exist in harmony without any visual obstructions. Focusing the design on the top half of the viewport with room for navigation controls and microcopy creates a seamless flow from one form input to the next.</p>
1955. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/2-whole-page-entering-email-details.jpg" /></p>
1956. More Room For Searching
1957. <p>Search presents a dichotomy: It is incredibly useful, yet is treated as an afterthought, likely tucked in the upper-right corner of a global header, out of view and often further buried by hiding the form input until the user clicks some icon, typically a magnifying glass. (It’s ironic we minimize the UI with a magnifying glass, isn’t it?)</p>
1958. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/3-mobile-header-site.jpg" /></p>
1959. <p>The problem with burying search in a mobile context is two-fold:</p>
1960. <ol>
1961. <li>The feature is less apparent, and</li>
1962. <li>The space to enter a search query, add any filters, and display results is minimized.</li>
1963. </ol>
1964. <p>That may very well be acceptable if the site has only a handful of pages to navigate. However, if the search allows a user to surface relevant content and freely move about an app, then you’re going to want to give it higher prominence.</p>
1965. <p>Any service-oriented mobile app can improve user experience by providing a search box that’s immediately recognizable and with enough breathing room for tapping a virtual keyboard.</p>
1966. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/4-smashing-magazine-homepage-mobile.jpg" /></p>
1967. <p>Some sites even have search forms that occupy the full screen without surrounding components, offering a “distraction-free” interface for typing queries.</p>
1968. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/5-mobile-header-site-search-feature-expanded.jpg" /></p>
1969. No Drop-Downs, If Possible
1970. <p>The <code>&lt;select&gt;</code> element can negatively impact mobile UX in two glaring ways:</p>
1971. <ol>
1972. <li>An expanding <code>&lt;select&gt;</code> with so many options that it produces excessive scrolling.</li>
1973. <li>Scrolling excessively, particularly on long pages, produces an awkward situation where the page continues scrolling after already scrolling through the list of <code>&lt;option&gt;</code>s.</li>
1974. </ol>
1975. <p>I’ll come across these situations, stare at my phone, and ask:</p>
1976. <blockquote>Do I really need a <code>&lt;select&gt;</code> populated with one hundred years to submit my birthdate?</blockquote>
1977.  
1978. <p>Seems like an awful lot of trouble to sort through one hundred years compared to manually typing in a four-digit value myself.</p>
1979. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/6-mockup-mobile-form.jpg" /></p>
1980. <p>A better pattern for making list selections, if absolutely needed, in a space-constrained mobile layout could be something closer to the ones used by iOS and Android devices by default. Sure, there’s scrolling involved, but within a confined space that leaves the rest of the UI alone.</p>
1981. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/7-datepicker.jpg" /></p>
1982. A Restrained Overview
1983. <p>A dashboard overview in a mobile app is something that displays key data to users right off the bat, surfacing common information that the user would otherwise have to seek out. There are great use cases for dashboards, many of which you likely interact with daily, like your banking app, a project management system, or even a page showing today’s baseball scores. The WordPress dashboard is a perfect example, showing site activity, security checks, traffic, and more.</p>
1984. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/8-wordpress-administrative-dashboard.png" /></p>
1985. <p>Dashboards are just fine. But the sensitive information they might contain is what worries me when I’m viewing a dashboard on a mobile device.</p>
1986. <p>Let’s say I’m having dinner with friends at a restaurant. We split the check. To pay my fair share, I take out my phone and log into my banking app, and… the home screen displays my bank balance in big, bold numbers to the friends sitting right next to me, one of whom is the gossipiest of the bunch. There goes a bit of my pride.</p>
1987. <p>That’s an extreme illustration because not all apps convey that level of sensitive information. But many do, and the care we put into protecting a user’s information from peeping eyeballs is only becoming more important as entire industries, like health care and education, lean more heavily into online experiences.</p>
1988. <p><strong>My advice</strong>: <em>Hide sensitive information until prompted by the user to display it.</em></p>
1989. <p>It’s generally a good practice to obscure sensitive information and have a liberal definition of what constitutes sensitive information.</p>
1990. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/9-bank-app-mockup.jpg" /></p>
1991. Shortcuts Provided In The Login Flow
1992. <p>There’s a natural order to things, particularly when logging into a web app. We log in, see a welcome message, and are taken to a dashboard before we tap on some item that triggers some sort of action to perform. In other words, it takes a few steps and walking through a couple of doors to get to accomplish what we came to do.</p>
1993. <p>What if we put actions earlier in the login flow? As in, they are displayed right along with the login form. This is what we call a <strong>shortcut</strong>.</p>
1994. <p>Let’s take the same restaurant example from earlier, where I’m back at dinner and ready to pay. This time, however, I will open a different bank app. This one has shortcuts next to the login form, one of which is a “Scan to Pay” option. I tap it, log in, and am taken straight to the scanning feature that opens the camera on my device, completely bypassing any superfluous welcome messaging or dashboard. This spares the user both time and effort (and prevents sensitive information from leaking into view to boot).</p>
1995. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/10-mobile-ux-bank-mockup.jpg" /></p>
1996. <p>Mobile operating systems also provide options for shortcuts when long-pressing an app’s icon on the home screen, which also can be used to an app’s advantage.</p>
1997. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/11-whatsapp-icon-open-contextual-menu.png" /></p>
1998. The Right Keyboard Configuration
1999. <p>All modern mobile operating systems are smart enough to tailor the virtual keyboard for specialized form inputs. A form field markup with <code>type="email"</code>, for instance, triggers an onscreen keyboard that shows the “<code>@</code>" key in the primary view, preventing users from having to tap <code>Shift</code> to reveal it in a subsequent view. The same is true with URLs, where a “<code>.com</code>” key surfaces for inputs with <code>type="url"</code>.</p>
2000. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/12-onscreen-keyboard-email-field.jpg" /></p>
2001. <p>The right keyboard saves the effort of hunting down relevant special characters and numbers for specific fields. All we need to do is to use the right attributes and semantics for those fields, like, <code>type=email</code>, <code>type=url</code>, <code>type=tel</code>, and such.</p>
2002. <div>
2003. <pre><code>&lt;!-- Input Types for Virtual Keyboards --&gt;
2004. <input type="text">   <!-- default -->
2005. <input type="tel">    <!-- numeric keyboard -->
2006. <input type="number"> <!-- numeric keyboard -->
2007. <input type="email">  <!-- displays @ key -->
2008. <input type="url">    <!-- displays .com key -->
2009. <input type="search"> <!-- displays search button -->
2010. <input type="date">   <!-- displays date picker or wheel controls -->
2011. </code></pre>
2012. </div>
2013.  
2014.  
2015.  
2016. Bigger Fonts With Higher Contrast
2017. <p>This may have been one of the first things that came to your mind when reading the article title. That’s because small text is prevalent in mobile interfaces. It’s not wrong to scale text in response to smaller screens, but where you set the lower end of the range may be too small for many users, even those with great vision.</p>
2018. <p>The default size of body text is <code>16px</code> on the web. That’s thanks to user agent styling that’s consistent across all browsers, including those on mobile platforms. But what exactly is the ideal size for mobile? The answer is not entirely clear. For example, Apple’s <a href="https://developer.apple.com/design/human-interface-guidelines/typography">Human Interface Guidelines</a> do not specify exact font sizes but rather focus on the use of Dynamic Text that adjusts the size of content to the user’s device-level preferences. Google’s Material Design guidelines are more concrete but are based on three scales: small, medium, and large. The following table shows the minimum font sizes for each scale based on the system’s <a href="https://m3.material.io/styles/typography/type-scale-tokens">typography tokens</a>.</p>
2019. <table>
2020.    <thead>
2021.        <tr>
2022.            <th>Scale</th>
2023.            <th>Body Text (pt)</th>
2024.      <th>Body Text (px)</th>
2025.        </tr>
2026.    </thead>
2027.    <tbody>
2028.        <tr>
2029.            <td>Small</td>
2030.            <td><code>12pt</code></td>
2031.      <td><code>16px</code></td>
2032.        </tr>
2033.        <tr>
2034.            <td>Medium</td>
2035.            <td><code>14pt</code></td>
2036.      <td><code>18.66px</code></td>
2037.        </tr>
2038.        <tr>
2039.            <td>Large</td>
2040.            <td><code>16pt</code></td>
2041.      <td><code>21.33px</code></td>
2042.        </tr>
2043.    </tbody>
2044. </table>
2045.  
2046. <p>The real standard we ought to be looking at is the current WCAG 2.2, and here’s <a href="https://www.w3.org/TR/WCAG22/#dfn-large-scale">what it says</a> on the topic:</p>
2047. <blockquote>“When using text without specifying the font size, the smallest font size used on major browsers for unspecified text would be a reasonable size to assume for the font.”</blockquote>
2048.  
2049. <p>So, bottom line is that the bottom end of a font’s scale matches the web’s default <code>16px</code> if we accept Android’s “Small” defaults. But even then, there are caveats because WCAG is more focused on <strong>contrast</strong> than <strong>size</strong>. Like, if the font in use is thin by default, WCAG suggests bumping up the font size to produce a higher contrast ratio between the text and the background it sits against.</p>
2050. <p>There are many, many articles that can give you summaries of various typographical guidelines and how to adhere to them for optimal font sizing. The best advice I’ve seen, however, is Eric Bailey rallying us to <a href="https://css-tricks.com/reader-mode-the-button-to-beat/">“beat the “Reader Mode” button</a>. Eric is talking more specifically about preventing clutter in an interface, but the same holds for font sizing. If the text is tiny or thin, I’m going to bash that button on your site with no hesitation.</p>
2051. <p><img src="https://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/13-kindle-reading-app-mobile-device.png" /></p>
2052. Wrapping Up
2053. <p>Everything we’ve covered here in this article is personal irritations I feel when interacting with different mobile interfaces. I’m sure you have your own set of annoyances, and if you do, I’d love to read them in the comments if you’re willing to share. And someone else is likely to have even more examples.</p>
2054. <p>The point is that we’re in some kind of <strong>“post-responsive” era of web design</strong>, one that looks beyond how elements stack in response to the viewport to consider user preferences, privacy, and providing optimal experiences at any breakpoint regardless of whatever device is used.</p>
2055. ]]></content:encoded>
2056.            <author>hello@smashingmagazine.com (Preethi Sam)</author>
2057.            <enclosure url="http://files.smashing.media/articles/things-users-would-appreciate-mobile-apps/things-users-would-appreciate-mobile-apps.jpg" length="0" type="image/jpg"/>
2058.        </item>
2059.        <item>
2060.            <title><![CDATA[Iconography In Design Systems: Easy Troubleshooting And Maintenance]]></title>
2061.            <link>https://smashingmagazine.com/2024/04/iconography-design-systems-troubleshooting-maintenance/</link>
2062.            <guid>https://smashingmagazine.com/2024/04/iconography-design-systems-troubleshooting-maintenance/</guid>
2063.            <pubDate>Wed, 03 Apr 2024 08:00:00 GMT</pubDate>
2064.            <description><![CDATA[Tatsiana Tarkan digs deep into iconography as part of a design system and shares some doable tips that will turn icon creation and maintenance into an enjoyable process.]]></description>
2065.            <content:encoded><![CDATA[<p>We all have an inherent tendency to like aesthetic and approachable things. That’s why any designer strives to deliver an intuitive and comprehensive design. And any designer knows it’s a pain in the neck, particularly when it comes to complex projects with lots of pages of design, components, and prototypes. As someone who has already traveled that road and learned quite a few valuable lessons, I have some wisdom to share with you.</p>
2066. <p>Granted, tons of articles have been written about design systems, their complexity, and all the ways they can benefit a project. So, I’m not going to waste too many words on the matter. Instead, in this article, I want to dig deeper into <strong>iconography as part of a design system</strong>. Besides, I’ll share with you doable tips that will turn icon creation and maintenance into an enjoyable — or at least bearable — process. Shall we?</p>
2067. Design Systems: From Chaos To Order
2068. <h3>Design Systems 101</h3>
2069. <p>Before we actually dive into the alluring and frightening world of iconography, I want to take some time to introduce you to the concept of a design system, as well as share my thoughts and rules that I follow while working with them. </p>
2070. <p>If I were to call a design the way your interface speaks with your user, then — building on the metaphor — it would be fair to view a design system as a language.</p>
2071. <blockquote>Simply put, a design system is a functional set of <strong>defined technical standards</strong>, <strong>best user behavior practices</strong>, and <strong>navigational patterns</strong> that are used to build a pixel-perfect digital product.</blockquote>
2072.  
2073. <p>It is a powerful designer tool that helps you make sure that you will end up with a coherent product and not a pathetic mess. </p>
2074. <p>It seems that nowadays, designers are obliged to try their hand at creating or at least adopting a design system. So what exactly makes it an all-around beneficial thing for the designer lot? Let’s have a look:</p>
2075. <ul>
2076. <li>The design system makes for <strong>the only source of truth</strong> since all the components are under one roof and are easily referable.</li>
2077. <li>It hosts <strong>all the guidelines</strong> on how to implement existing components. And following the very same guidelines, designers can easily create new ones that match the former.</li>
2078. <li>In the case of a two- (or more) designer team, a design system allows for <strong>visual consistency</strong> (which is crucial if your project is major and fast-evolving).</li>
2079. <li>You can either <strong>use ready-made design components</strong> or alter them swiftly and in accordance with the guideline if any need arises.</li>
2080. <li>You have access to a library of <strong>surefire design patterns</strong>, which greatly reduces the strain of coming up with new solutions.</li>
2081. </ul>
2082. <p>That sounds like a treat, right? Still, creating a design system is generally viewed as an exceptionally time- and effort-consuming endeavor. If you <em>do</em> want to develop a design system, there is a way to make the process a bit easier. Enter the atomic design approach.</p>
2083. <h3>Atomic Design Approach</h3>
2084. <p>It’s been over six years since I first introduced the atomic approach into my workflow, and let me tell you, it was a game-changer for me as a designer. This methodology is a blessing if you work on a big project with a team of fellow designers.</p>
2085. <p>If you know the pain of trying to track the changes in components throughout the projects, especially if these components are minor, then you’ll see why I’m so enthusiastic about the atomic approach. It allows for smooth and well-coordinated teamwork where every designer is aware of what component they are creating and how to make it consistent with the rest of the system. </p>
2086. <p>The atomic design approach was pioneered by Brad Frost (a chemist of all occupations). It implies building your system brick-by-brick, starting with the smallest items and going all the way up while sustaining hierarchy. There are five stages to the process. </p>
2087. <ul>
2088. <li><strong>Atoms</strong><br />In a nutshell, these are basic HTML elements.</li>
2089. </ul>
2090. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/01-atoms-html-elements.png" /></p>
2091. <ul>
2092. <li><strong>Molecules</strong><br />They are single-pattern components that do one thing.</li>
2093. </ul>
2094. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/02-molecules-atomic-design.png" /></p>
2095. <ul>
2096. <li><strong>Organisms</strong><br />They are composed of groups of molecules, or/and atoms, or/and other organisms.</li>
2097. </ul>
2098. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/03-organisms-atomic-design.png" /></p>
2099. <ul>
2100. <li><strong>Templates</strong><br />They provide a context for using molecules and organisms and focus on the page’s underlying content structure. In other words, templates are the guidelines.</li>
2101. </ul>
2102. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/04-template-atomic-design.png" /></p>
2103. <ul>
2104. <li><strong>Pages</strong><br />They show what a UI looks like with proper content.</li>
2105. </ul>
2106. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/05-pages-atomic-design.png" /></p>
2107. <p>What exactly makes this approach a thing designers gravitate towards? Here are my two cents on the matter:</p>
2108. <ul>
2109. <li>Creating a design system resembles playing with a construction set. <strong>You begin with the smallest components and progress in size</strong>, which means you are eating the elephant a bite at a time and don’t get overwhelmed.</li>
2110. <li>Altering a component in one place will cause updates wherever a certain atom, molecule, or organism is applied. <strong>This eliminates any need for manual tweaking</strong> of components.</li>
2111. <li><strong>This approach provides designers with design patterns,</strong> meaning that you no longer need to create new ones and worry about their consistency.</li>
2112. </ul>
2113. <p>That’s clearly not all the advantages of this methodology, so if you are interested, go ahead and read more about it in Brad Frost’s book.</p>
2114. <p>What I’m really willing to focus on is our job as designers in creating and maintaining those fabled design systems, both atomic and regular. More specifically, on iconography. And even more specifically, on the pitfalls we have a nasty habit of falling into when dealing with icons as the atoms of our systems. Off we go.</p>
2115. Iconography In Design Systems: Maladies and Remedies
2116. <h3>Common Problems</h3>
2117. <p>Since I’m relying on my own experience when it comes to design systems, it would only be fair if I shared the biggest issues that I personally have with iconography in the context of design systems and how I solve them. I’ll share with you surefire tips on how to keep your iconography consistent and ensure its smooth integration into design environments.  </p>
2118. <p>If we regard a single icon from the atomic design standpoint, we would consider it an atom — the smallest but essential element, just like the color palette or typography. If we continue with our language analogy, I will take the liberty of calling icons a design’s vocabulary. So, it’s fairly clear that icons are the actual core of your design.</p>
2119. <p>As any designer knows, users heavily rely on icons as an interactional element of an interface. Despite being the smallest of components, icons might prove to be a major pain in the neck in terms of creation. This is the lesson I have learned during my tenure as a UX designer.</p>
2120. <blockquote>Tip 1: Since <strong>an atom is not just an autonomous element</strong>, you have to think beforehand about how it will behave as part of a larger component, like a molecule, an organism, or a template.</blockquote>
2121.  
2122. <p>These are the variables you have to keep in mind when developing an icon:</p>
2123. <ul>
2124. <li>Is your icon scalable?</li>
2125. <li>Does it have color variations?</li>
2126. <li>Do you classify your icon according to meaning, group, style, or location?</li>
2127. <li>Is there an option to change the icon’s meaning or style?</li>
2128. <li>How can you easily introduce a new icon into an existing roster?</li>
2129. <li>How should you navigate a situation when different designers develop icons separately?</li>
2130. <li>How can you make locating a certain icon within your design system easier?</li>
2131. </ul>
2132. <p>Here are some challenges that I personally face while developing iconography for a design system:</p>
2133. <ul>
2134. <li>How should I keep track of icon updates and maintain their consistency?</li>
2135. <li>How should I develop icon creation guidelines?</li>
2136. <li>What should I do if current icons happen to be inconsistent?</li>
2137. <li>How should I inform my design team of any changes?</li>
2138. </ul>
2139. <p>It might be hard to wrap your head around so many questions, but worry not. I’ll try my best to cover all these issues as we go on.</p>
2140. <h3>Rules Of Thumb</h3>
2141. <p>An icon isn’t just a little pictogram with a certain meaning behind it. <strong>An icon is a symbol of action</strong>, an interactive element of a digital interface that helps users navigate through the system.</p>
2142. <p>In other words, it is a tool, and the process of building a tool implies following rules. I found out firsthand that if you master the basic icon rules, then you’ll be able to build both stand-alone icons and those that are part of a larger environment with equal efficiency. Besides, you’ll enhance your ability to create icon sets and various icon types within a single project, all while maintaining their readability and accessibility.</p>
2143. <blockquote>Tip 2: Keep consistency by <strong>establishing the basic icon rules</strong> before building your icon library.</blockquote>
2144.  
2145. <p>The following are the rules that I abide by:</p>
2146. <h4>Grid</h4>
2147. <p>I use the classic 24px grid for standard icons and a 44px grid for larger icons. Each grid consists of the padding area (marked in red, 2 px) and the live area (marked in blue, 20 px). The live area is the space that your icon content stays inside. Its shape depends on the icon’s body and could be circular, square, vertical-rectangular, or horizontal-rectangular.</p>
2148. <p>Before you sit down to draw your icon, decide how much space your icon’s body will occupy in order to come up with the proper shape. </p>
2149. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/06-grid.png" /></p>
2150. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/07-grid.png" /></p>
2151. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/08-grid.png" /></p>
2152. <h4>Size</h4>
2153. <p>Each icon within a design system has to have a primary size, which is the size that up to 90% of all icons share. I consider the 24px icon size suggested by Google’s Material Design to be the golden standard. This size works well both for desktop and mobile devices.</p>
2154. <p>Still, there is room for exceptions in this rule when an icon needs to be smaller or larger. In this case, I employ a 4-pixel step rule. I increase or decrease the icon’s size by 4 pixels at a time (e.g., I go from 24 to 20, then 16, then 12 px, or 28, 32 px, and so on). I would still personally prefer the golden standard of 24 pixels since I find smaller sizes less readable or larger sizes too visually domineering.  </p>
2155. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/09-icon-size.png" /></p>
2156. <h4>Weight</h4>
2157. <p>Another key property to consider is the outline weight of your icon if you opt for this type. If you are building an icon library from scratch, it would be wise to test several outline weight values before you make a decision. This is especially crucial for icons that contain fine details.</p>
2158. <p>Granted, you can assign different weight values to different types of icons, but you might struggle to write clear guidelines for your fellow designers. I usually make a conscious decision to go with a unified outline weight for all the icons, namely, 2 points.   </p>
2159. <h4>Fill</h4>
2160. <p>A solid icon variant might considerably enhance the accessibility and readability of an interface icon. It’s really handy to have both solid and outline icon types. But not all your icons should have two options. If you choose to draw a solid option, determine what parts of your icon you want to make solid. </p>
2161. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/10-fill-solid-icon-variant.png" /></p>
2162. <h4>Design principles</h4>
2163. <p>As I’ve mentioned before, an icon is an essential interface element. This means that an icon should be simplistic, bold, and — what’s even more important in the context of design systems — created according to the unified rules.</p>
2164. <p>I have a little trick I use to see how well a new icon fits the standard. I simply integrate the new icon into the interface populated by already existing elements. This helps determine if the new icon matches the rest. </p>
2165. <h4>Anatomy</h4>
2166. <p>Such aspects as corner, counterstroke, and stroke terminal provide the much-desired visual consistency. Obviously, all these elements should be unified for all the icons within a design system. A comprehensive guide to icon anatomy is available at <a href="https://m3.material.io/styles/icons/designing-icons">Material Design</a>.  </p>
2167. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/11-icon-anatomy.png" /></p>
2168. Icon Consistency: Surefire Tips
2169. <p>Before I actually share my tips on how to deal with icons within a design system efficiently, here’s a little backstory to how I came up with them. It all started when I joined a project that already had an established host of icons. There were over a hundred of them. And the number grew because the project was a fast-evolving thing. So, the design system, like any other, was like a living being, constantly in a state of change. </p>
2170. <p>The icon library was a mishmash of different icon types, creating quite a noise. The majority of icons differed in style, size, and application. Another problem I had was the fact that most of the icons did not have the source file. So, there was no way to quickly tweak an icon to match the rest. </p>
2171. <p>The first and most important thing I did was to establish the basic rules for icon creation (that’s something we’ve already covered). This step was supposed to keep the design team from creating inconsistent icons. </p>
2172. <blockquote>Tip 3: <strong>Put all your icons on one layout.</strong> This way, you’ll get a full visual understanding of your icons and determine repetitive design patterns.</blockquote>
2173.  
2174. <p>Now, here comes the juicy stuff. Here is my guide on how to sustain iconography in the context of a design system.</p>
2175. <ul>
2176. <li><strong>Divide your icons into subcategories.</strong><br />This rule works wonders when you have an array of inconsistent icons on your hands. There is no rule on what subcategories there should be. It all depends on your design system and the number of existing icons.<br />In my case, I established three groups divided by size and icon style, which resulted in three subcategories: regular icons, detailed icons, and illustrations. Once you divide your icons in the same manner, it’ll be easier to apply the same rules to each group. Besides, this approach allows for a more structured storage of these icons within your design system.   </li>
2177. </ul>
2178. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/12-icon-subcategories.png" /></p>
2179. <ul>
2180. <li><strong>Determine guidelines for each icon type.</strong><br />The next step is as wise as it is hard to pull off. You need to assign certain icon creation rules for each of the icon types (provided you have more than one). This is the basis upon which all your other attempts at achieving visual consistency will be built. To tame all the mismatched icons, I used the basic icon rules we’ve covered above. To keep track, I created a page in Figma for each of the icon types and used the basic size as the file name.</li>
2181. </ul>
2182. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/13-guidelines-each-icon-type.png" /></p>
2183. <ul>
2184. <li><strong>Group your icons wisely.</strong><br />When naming icons, I opt for the semantic section approach. Generally, you can divide all your icons into groups based on their meaning or application in the interface. Look at the example below; we have three distinct semantic sections: Transport, Services, and Warnings. Depending on their meaning, icons should be assigned to the corresponding sections. Then, those sections are, in turn, divided into subsections. For instance, the Transport section has Ground Transport and Air Transport. The main idea you should stick to is to keep your icons in separate sections. </li>
2185. </ul>
2186. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/14-icon-groups.png" /></p>
2187. <ul>
2188. <li><strong>Stick to clear names and descriptions.</strong><br />I have to admit that dividing icons into semantic sections does have a massive disadvantage: this division could be quite subjective. This is why it is crucial to add a detailed description to each of the icons. This will simplify icon search within a design system and will give a clear understanding of an icon’s application. This is how I create a description:<ul>
2189. <li><strong>Tags</strong>: reference words that facilitate searching for an icon within the system.</li>
2190. <li><strong>Usage</strong>: a brief description of an icon’s application.</li>
2191. <li><strong>Group Name</strong>: the name of the group an icon belongs to. This helps with locating an icon right within the library.</li>
2192. <li><strong>Designs</strong>: an incredibly nifty tool that allows you to insert a link to the design and documentation that features the icon in question. This way, you’ll know the context in which the icon is applied. </li>
2193. </ul>
2194. </li>
2195. </ul>
2196. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/15-icon-description.png" /></p>
2197. <ul>
2198. <li><strong>Use color coding and symbols while updating icon design.</strong><br />This trick works best when you are not yet done with the icon library, but you need to communicate to your team which icons are ready to use and which still need a bit of enhancement. For instance, I mark the names of finished icons with a green symbol. An orange symbol marks those icons that need to be improved. And in case I need an icon deleted or drawn anew, I use a red cross. </li>
2199. </ul>
2200. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/16-colour-code.png" />         </p>
2201. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/17-colour-code.png" /></p>
2202. <ul>
2203. <li><strong>Keep non-rasterised versions of icons.</strong><br />It can be handy to have a non-rasterised version of an icon at arm’s length. There’ve been cases when I was asked to create a similar icon or an icon that could use the same graphic forms as the existing ones. Should this happen again, I can simply take the original file and easily draw an icon. I store all the non-rasterised icons on a separate page in the file following the defined hierarchy.</li>
2204. </ul>
2205. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/18-icon-component.png" />   </p>
2206. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/19-source-file.png" /></p>
2207. <ul>
2208. <li><strong>Rasterise the icon vector.</strong><br />Be sure to apply the Outline Stroke feature before you create the icon component. This will allow for easy color change (more on this in the next tip) and scaling. </li>
2209. </ul>
2210. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/20-rasterize-icon-vector.png" /></p>
2211. <ul>
2212. <li><strong>Mind the colors of your icons.</strong><br />I suggest keeping icons in the primary, most commonly used color by default. Another worthwhile thing to do is to name all icon colors according to their intended use and the interactions they perform. In order to do that, you need to equip your color library with a separate set of colors for all icon states, like primary, hover, and disabled. Make sure to name each set properly.  </li>
2213. </ul>
2214. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/21-icon-colours.png" /></p>
2215. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/22-colours-design-library.png" /></p>
2216. <p><img src="https://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/23-description-each-colour.png" /></p>
2217. <ul>
2218. <li><strong>Assign a designer to maintain icons in the system.</strong><br />This is a seemingly trivial tip that, however, will save you trouble maintaining style and categorization consistency. I’ve personally had edge cases when the established rules failed. Having a designated designer who knew their way around the system helped to find a quick solution.   </li>
2219. </ul>
2220. <h3>Real Example Of Guidelines Applied</h3>
2221. <p>To wrap up this whole lecture and actually see all these rules in action, take a look at the following <a href="https://www.figma.com/file/Zv5cKyo8iv9meQCYQ0HMKs/Icons?type=design&amp;node-id=0%3A1&amp;mode=design&amp;t=YwcF2QsmnMD7imRM-1">template file</a>.</p>
2222. Final Thoughts: Is It Worth It?
2223. <p>No matter how sick you might be dealing with unending visual inconsistency, design systems are still challenging. They can scare any designer regardless of their experience. Still, if you want to bring order to chaos, introducing a design system into your workflow is worth the trouble, especially when it comes to maintaining iconography.</p>
2224. <p>After all, <strong>iconography is the most volatile part of a design system in terms of visual variety</strong>. That’s why iconography was the biggest challenge I had to face in my tenure as a designer. And that’s exactly why I am genuinely proud that I’ve tamed that beast and can now share my hacks with you.  </p>
2225. <h3>Resources</h3>
2226. <ul>
2227. <li><a href="https://atomicdesign.bradfrost.com/chapter-2/">Atomic Design Methodology</a>, book by Brad Frost</li>
2228. </ul>
2229. <p><strong>Public design systems:</strong></p>
2230. <ul>
2231. <li><a href="https://nordhealth.design/">Nord</a></li>
2232. <li><a href="https://ant.design/docs/spec/icon">Ant</a></li>
2233. <li><a href="https://atlassian.design/foundations/iconography">Atlassian</a></li>
2234. <li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/icon#best-practices">Microsoft</a></li>
2235. </ul>
2236. <p><strong>Design systems resources:</strong></p>
2237. <ul>
2238. <li>“<a href="https://www.nngroup.com/articles/design-systems-101/">Design Systems 101</a>,” Therese Fessenden</li>
2239. <li><a href="https://www.smashingmagazine.com/provide/design-systems-chapter-2.pdf">Design Systems</a> (PDF), book by Alla Kholmatova</li>
2240. </ul>
2241. <p><strong>Icons resources:</strong></p>
2242. <ul>
2243. <li>“<a href="https://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/">Optimizing UI Icons For Faster Recognition</a>,” Alla Kholmatova</li>
2244. <li><a href="https://www.ibm.com/design/language/iconography/ui-icons/design/">IBM icons guidelines</a></li>
2245. <li><a href="https://developer.apple.com/design/human-interface-guidelines/icons">Apple icons guidelines</a></li>
2246. <li><a href="https://m3.material.io/styles/icons/overview">Material design guide</a></li>
2247. <li>“<a href="https://www.nngroup.com/articles/icon-usability/">Icon Usability</a>,” Aurora Harley</li>
2248. </ul>
2249. ]]></content:encoded>
2250.            <author>hello@smashingmagazine.com (Tatsiana Tarkan)</author>
2251.            <enclosure url="http://files.smashing.media/articles/iconography-design-systems-troubleshooting-maintenance/iconography-design-systems-troubleshooting-maintenance.jpg" length="0" type="image/jpg"/>
2252.        </item>
2253.        <item>
2254.            <title><![CDATA[Infinite-Scrolling Logos In Flat HTML And Pure CSS]]></title>
2255.            <link>https://smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css/</link>
2256.            <guid>https://smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css/</guid>
2257.            <pubDate>Tue, 02 Apr 2024 12:00:00 GMT</pubDate>
2258.            <description><![CDATA[Remember the HTML `<marquee>` element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that makes it possible with a set of images and as little HTML as possible.]]></description>
2259.            <content:encoded><![CDATA[<p>When I was asked to make an auto-scrolling logo farm, I had to ask myself: “You mean, like a <code>&lt;marquee&gt;</code>?” It’s not the weirdest request, but the thought of a <code>&lt;marquee&gt;</code> conjures up the “old” web days when Geocities ruled. What was next, a repeating sparkling unicorn GIF background?</p>
2260. <p>If you’re tempted to reach for the <code>&lt;marquee&gt;</code> element, don’t. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee">MDN has a stern warning about it right at the top of the page</a>:</p>
2261. <blockquote>“<strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible […] Be aware that this feature may cease to work at any time.”</blockquote>
2262.  
2263. <p>That’s fine because whatever infinite scrolling feature <code>&lt;marquee&gt;</code> is offered, we can most certainly pull off in CSS. But when I researched examples to help guide me, I was surprised to find very little on it. Maybe auto-scrolling elements aren’t the rage these days. Perhaps the sheer nature of auto-scrolling behavior is enough of an accessibility red flag to scare us off.</p>
2264. <p>Whatever the case, we have the tools to do this, and I wanted to share how I went about it. This is one of those things that can be done in lots of different ways, leveraging lots of different CSS features. Even though I am not going to exhaustively explore all of them, I think it’s neat to see someone else’s thought process, and that’s what you’re going to get from me in this article.</p>
2265. What We’re Making
2266. <p>But first, here's an example of the finished result:</p>
2267. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/YzMQMXe">CSS only marquee without HTML duplication [forked]</a> by <a href="https://codepen.io/CiTA">Silvestar Bistrović</a>.</p>
2268. <p>The idea is fairly straightforward. We want some sort of container, and in it, we want a series of images that infinitely scroll without end. In other words, as the last image slides in, we want the first image in the series to directly follow it in an infinite loop.</p>
2269. <p>So, here’s the plan: <strong>We’ll set up the HTML first, then pick at the container and make sure the images are correctly positioned in it before we move on to writing the CSS animation that pulls it all together.</strong></p>
2270. Existing Examples
2271. <p>Like I mentioned, I tried searching for some ideas. While I didn’t find exactly what I was looking for, I did find a few demos that provided a spark of inspiration. What I really wanted was to use CSS only while not having to “clone” the marquee items.</p>
2272. <p>Geoff Graham’s “<a href="https://css-tricks.com/creating-a-css-sliding-background-effect/">Sliding Background Effect</a>” is close to what I wanted. While it is dated, it did help me see how I could intentionally use <code>overflow</code> to allow images to “slide” out of the container and an animation that loops forever. It’s a background image, though, and relies on super-specific numeric values that make it tough to repurpose in other projects.</p>
2273. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/LYvLvGz">Untitled [forked]</a> by <a href="https://codepen.io/team/css-tricks">@css-tricks</a>.</p>
2274. <p>There’s another great example from <a href="https://codepen.io/Coding_Journey">Coding Journey</a> over at CodePen:</p>
2275. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/yLrXrVY">Marquee-like Content Scrolling [forked]</a> by <a href="https://codepen.io/Coding_Journey">Coding Journey</a>.</p>
2276. <p>The effect is what I’m after for sure, but it uses some JavaScript, and even though it’s just a light sprinkle, I would prefer to leave JavaScript out of the mix.</p>
2277. <p>Ryan Mulligan’s “<a href="https://codepen.io/hexagoncircle/pen/wvmjomb?editors=1000">CSS Marquee Logo Wall</a>” is the closest thing. Not only is it a logo farm with individual images, but it demonstrates how CSS masking can be used to hide the images as they slide in and out of the container. I was able to integrate that same idea into my work.</p>
2278. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/ExJXJZm">CSS Marquee Logo Wall [forked]</a> by <a href="https://codepen.io/hexagoncircle">Ryan Mulligan</a>.</p>
2279. <p>But there’s still something else I’m after. What I would like is the smallest amount of HTML possible, namely markup that does not need to be duplicated to create the impression that there’s an unending number of images. In other words, we should be able to create an infinite-scrolling series of images where the images are the only child elements in the “marquee” container.</p>
2280. <p>I did find a few more examples in other places, but these were enough to point me in the right direction. Follow along with me.</p>
2281. The HTML
2282. <p>Let's set up the HTML structure first before anything else. Again, I want this to be as “simple” as possible, meaning very few elements with the shortest family tree possible. We can get by with nothing but the “marquee” container and the logo images in it.</p>
2283. <div>
2284. <pre><code>&lt;figure class="marquee"&gt;
2285.  <img class="marquee__item" src="logo-1.png" width="100" height="100" alt="Company 1">
2286.  <img class="marquee__item" src="logo-2.png" width="100" height="100" alt="Company 2">
2287.  <img class="marquee__item" src="logo-3.png" width="100" height="100" alt="Company 3">
2288. </figure>
2289. </code></pre>
2290. </div>
2291.  
2292. <p>This keeps things as “flat” as possible. There shouldn’t be anything else we need in here to make things work.</p>
2293. Setting Up The Container
2294. <p>Flexbox might be the simplest approach for establishing a row of images with a gap between them. We don’t even need to tell it to flow in a row direction because that’s the default.</p>
2295. <pre><code>.marquee {
2296.  display: flex;
2297. }
2298. </code></pre>
2299.  
2300. <p>I already know that I plan on using absolute positioning on the image elements, so it makes sense to set relative positioning on the container to, you know, <em>contain</em> them. And since the images are in an absolute position, they have no reserved height or width dimensions that influence the size of the container. So, we’ll have to declare an explicit <code>block-size</code> (the logical equivalent to <code>height</code>). We also need a maximum width so we have a boundary for the images to slide in and out of view, so we’ll use <code>max-inline-size</code> (the logical equivalent to <code>max-width</code>):</p>
2301. <pre><code>.marquee {
2302.  --marquee-max-width: 90vw;
2303.  
2304.  display: flex;
2305.  block-size: var(--marquee-item-height);
2306.  max-inline-size: var(--marquee-max-width);
2307.  position: relative;
2308. }
2309. </code></pre>
2310.  
2311. <p>Notice I’m using a couple of CSS variables in there: one that defines the marquee’s height based on the height of one of the images (<code>--marquee-item-height</code>) and one that defines the marquee’s maximum width (<code>--marquee-max-width</code>). We can give the marquee’s maximum width a value now, but we’ll need to formally register and assign a value to the image height, which we will do in a bit. I just like knowing what variables I am planning to work with as I go.</p>
2312. <p>Next up, we want the images to be hidden when they are outside of the container. We’ll set the horizontal overflow accordingly:</p>
2313. <pre><code>.marquee {
2314.  --marquee-max-width: 90vw;
2315.  
2316.  display: flex;
2317.  block-size: var(--marquee-item-height);
2318.  max-inline-size: var(--marquee-max-width);
2319.  overflow-x: hidden;
2320.  position: relative;
2321. }
2322. </code></pre>
2323.  
2324. <p>And I <em>really</em> like the way Ryan Mulligan used a CSS mask. It creates the impression that images are fading in and out of view. So, let’s add that to the mix:</p>
2325. <pre><code>.marquee {
2326.  display: flex;
2327.  block-size: var(--marquee-item-height);
2328.  max-inline-size: var(--marquee-max-width);
2329.  overflow-x: hidden;
2330.  position: relative;
2331.  mask-image: linear-gradient(
2332.    to right,
2333.    hsl(0 0% 0% / 0),
2334.    hsl(0 0% 0% / 1) 20%,
2335.    hsl(0 0% 0% / 1) 80%,
2336.    hsl(0 0% 0% / 0)
2337.  );
2338.  position: relative;
2339. }
2340. </code></pre>
2341.  
2342. <p>Here’s what we have so far:</p>
2343. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/LYvjLLG">CSS only marquee without HTML duplication, example 0 [forked]</a> by <a href="https://codepen.io/CiTA">Silvestar Bistrović</a>.</p>
2344. Positioning The Marquee Items
2345. <p>Absolute positioning is what allows us to yank the images out of the document flow and manually position them so we can start there.</p>
2346. <pre><code>.marquee__item {
2347.  position: absolute;
2348. }
2349. </code></pre>
2350.  
2351. <p>That makes it look like the images are completely gone. But they’re there — the images are stacked directly on top of one another.</p>
2352. <p>Remember that CSS variable for our container, <code>--marquee-item-height</code>? Now, we can use it to match the marquee item height:</p>
2353. <pre><code>.marquee__item {
2354.  position: absolute;
2355.  inset-inline-start: var(--marquee-item-offset);
2356. }
2357. </code></pre>
2358.  
2359. <p>To push marquee images outside the container, we need to define a <code>--marquee-item-offset</code>, but that calculation is not trivial, so we will learn how to do it in the next section. We know what the <code>animation</code> needs to be: something that moves linearly for a certain duration after an initial delay, then goes on infinitely. Let’s plug that in with some variables as temporary placeholders.</p>
2360. <div>
2361. <pre><code>.marquee__item {
2362.  position: absolute;
2363.  inset-inline-start: var(--marquee-item-offset);
2364.  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
2365. }
2366. </code></pre>
2367. </div>
2368.  
2369. <p>To animate the marquee items infinitely, we have to define two CSS variables, one for the duration (<code>--marquee-duration</code>) and one for the delay (<code>--marquee-delay</code>). The duration can be any length you want, but the delay should be calculated, which is what we will figure out in the next section.</p>
2370. <div>
2371. <pre><code>.marquee__item {
2372.  position: absolute;
2373.  inset-inline-start: var(--marquee-item-offset);
2374.  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
2375.  transform: translateX(-50%);
2376. }
2377. </code></pre>
2378. </div>
2379.  
2380. <p>Finally, we will translate the marquee item by <code>-50%</code> horizontally. This small “hack” handles situations when the image sizes are uneven.</p>
2381. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/ExJXJMQ">CSS only marquee without HTML duplication, example 2 [forked]</a> by <a href="https://codepen.io/CiTA">Silvestar Bistrović</a>.</p>
2382. Animating The Images
2383. <p>To make the animation work, we need the following information:</p>
2384. <ul>
2385. <li>Width of the logos,</li>
2386. <li>Height of the logos,</li>
2387. <li>Number of items, and</li>
2388. <li>Duration of the animation.</li>
2389. </ul>
2390. <p>Let’s use the following configurations for our set of variables:</p>
2391. <pre><code>.marquee--8 {
2392.  --marquee-item-width: 100px;
2393.  --marquee-item-height: 100px;
2394.  --marquee-duration: 36s;
2395.  --marquee-items: 8;
2396. }
2397. </code></pre>
2398.  
2399. <p><strong>Note</strong>: <em>I’m using the BEM modifier <code>.marquee--8</code> to define the animation of the eight logos. We can define the animation keyframes now that we know the <code>--marquee-item-width</code> value.</em></p>
2400. <pre><code>@keyframes go {
2401.  to {
2402.    inset-inline-start: calc(var(--marquee-item-width) * -1);
2403.  }
2404. }
2405. </code></pre>
2406.  
2407. <p>The animation moves the marquee item from right to left, allowing each one to enter into view from the right as it travels out of view over on the left edge and outside of the marquee container.</p>
2408. <p>Now, we need to define the <code>--marquee-item-offset</code>. We want to push the marquee item all the way to the right side of the marquee container, opposite of the animation end state. </p>
2409. <p>You might think the offset should be <code>100% + var(--marquee-item-width)</code>, but that would make the logos overlap on smaller screens. To prevent that, we need to know the minimum width of all logos combined. We do that in the following way:</p>
2410. <pre><code>calc(var(--marquee-item-width) * var(--marquee-items))
2411. </code></pre>
2412.  
2413. <p>But that is not enough. If the marquee container is too big, the logos would take less than the maximum space, and the offset would be within the container, which makes the logos visible inside the marquee container. To prevent that, we will use the <code>max()</code> function like the following:</p>
2414. <pre><code>--marquee-item-offset: max(
2415.  calc(var(--marquee-item-width) * var(--marquee-items)),
2416.  calc(100% + var(--marquee-item-width))
2417. );
2418. </code></pre>
2419.  
2420. <p>The <code>max()</code> function checks which of the two values in its arguments is bigger, the overall width of all logos or the maximum width of the container plus the single logo width, which we defined earlier. The latter will be true on bigger screens and the former on smaller screens.</p>
2421. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/BaEZEXN">CSS only marquee without HTML duplication, example 3 [forked]</a> by <a href="https://codepen.io/CiTA">Silvestar Bistrović</a>.</p>
2422. <p>Finally, we will define the complicated animation delay (<code>--marquee-delay</code>) with this formula:</p>
2423. <div>
2424. <pre><code>--marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
2425. </code></pre>
2426. </div>
2427.  
2428. <p>The delay equals the animation duration divided by a quadratic polynomial (that’s what ChatGPT tells me, at least). The quadratic polynomial is the following part, where we multiply the number of items and number of items minus the current item index:</p>
2429. <div>
2430. <pre><code>var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index))
2431. </code></pre>
2432. </div>
2433.  
2434. <p>Note that we are using a negative delay (<code>* -1</code>) to make the animation start in the “past,” so to speak. The only remaining variable to define is the <code>--marquee-item-index</code> (the current marquee item position):</p>
2435. <pre><code>.marquee--8 .marquee__item:nth-of-type(1) {
2436.  --marquee-item-index: 1;
2437. }
2438. .marquee--8 .marquee__item:nth-of-type(2) {
2439.  --marquee-item-index: 2;
2440. }
2441.  
2442. /* etc. */
2443.  
2444. .marquee--8 .marquee__item:nth-of-type(8) {
2445.  --marquee-item-index: 8;
2446. }
2447. </code></pre>
2448.  
2449. <p>Here’s that final demo once again:</p>
2450. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/xxerNKz">CSS only marquee without HTML duplication [forked]</a> by <a href="https://codepen.io/CiTA">Silvestar Bistrović</a>.</p>
2451. Improvements
2452. <p>This solution could be better, especially when the logos are not equal widths. To adjust the gaps between inconsistently sized images, we could calculate the delay of the animation more precisely. That is possible because the animation is linear. I’ve tried to find a formula, but I think it needs more fine-tuning, as you can see:</p>
2453. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/NWmgVWN">CSS only marquee without HTML duplication, example 4 [forked]</a> by <a href="https://codepen.io/CiTA">Silvestar Bistrović</a>.</p>
2454. <p>Another improvement we can get with a bit of fine-tuning is to prevent big gaps on wide screens. To do that, set the <code>max-inline-size</code> and declare <code>margin-inline: auto</code> on the <code>.marquee</code> container:</p>
2455. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/qBwjGBJ">CSS only marquee without HTML duplication, example 5 [forked]</a> by <a href="https://codepen.io/CiTA">Silvestar Bistrović</a>.</p>
2456. Conclusion
2457. <p>What do you think? Is this something you can see yourself using on a project? Would you approach it differently? I am always happy when I land on something with a clean HTML structure and a pure CSS solution. You can see the final implementation on the <a href="https://heyflow.com">Heyflow website</a>.</p>
2458. <h3>Further Reading On SmashingMag</h3>
2459. <ul>
2460. <li><a href="https://www.smashingmagazine.com/2022/03/designing-better-infinite-scroll/">Infinite Scroll UX Done Right: Guidelines and Best Practices</a>, Vitaly Friedman</li>
2461. <li><a href="https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/">Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide</a>, Pearl Akpan</li>
2462. <li><a href="https://www.smashingmagazine.com/2020/03/infinite-scroll-lazy-image-loading-react/">Implementing Infinite Scroll And Image Lazy Loading In React</a>, Chidi Orji</li>
2463. <li><a href="https://www.smashingmagazine.com/2023/12/css-scroll-snapping-aligned-global-page-layout-case-study/">CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study</a>, Brecht De Ruyte</li>
2464. </ul>
2465. ]]></content:encoded>
2466.            <author>hello@smashingmagazine.com (Silvestar Bistrović)</author>
2467.            <enclosure url="http://files.smashing.media/articles/infinite-scrolling-logos-html-css/infinite-scrolling-logos-html-css.jpg" length="0" type="image/jpg"/>
2468.        </item>
2469.        <item>
2470.            <title><![CDATA[Colorful Blossoms And Rainy Days (April 2024 Wallpapers Edition)]]></title>
2471.            <link>https://smashingmagazine.com/2024/03/desktop-wallpaper-calendars-april-2024/</link>
2472.            <guid>https://smashingmagazine.com/2024/03/desktop-wallpaper-calendars-april-2024/</guid>
2473.            <pubDate>Sun, 31 Mar 2024 08:00:00 GMT</pubDate>
2474.            <description><![CDATA[Could there be a better way to welcome the new month than with a little inspiration boost? We might have one for you: desktop wallpapers created by the community for the community. Enjoy!]]></description>
2475.            <content:encoded><![CDATA[<p>New month, new wallpapers! To cater for a fresh dose of colorful inspiration on a regular basis, we embarked on our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers journey</a> more than 13 years ago. It’s the perfect occasion for creatives to put their artistic skills to the test, indulge in a little project just for fun, or <strong>tell the story they’ve always wanted to tell</strong>. Of course, it wasn’t any different this time around.</p>
2476.  
2477. <p>In this post, you’ll find beautiful, unique, and inspiring wallpapers for <strong>April 2024</strong>. Created with love by artists and designers from across the globe, they come in versions with and without a calendar and can be downloaded for free. As a little bonus goodie, we also added some April <strong>favorites from our wallpapers archives</strong> to the collection — maybe you’ll rediscover one of <em>your</em> almost-forgotten favorites in here, too? A big thank you to everyone who shared their designs with us this month! Happy April!</p>
2478.  
2479. <ul>
2480. <li>You can <strong>click on every image to see a larger preview</strong>,</li>
2481. <li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li>
2482. <li><strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Submit a wallpaper!</a></strong><br />Did you know that <em>you</em> could get featured in our next wallpapers post, too? We are always <strong>looking for creative talent</strong>.</li>
2483. </ul>
2484.  
2485. <p></p>Oceanic Wonders<p></p>
2486. <p></p><p>“Celebrate National Dolphin Day on April 14th by acknowledging the captivating beauty and importance of dolphins in our oceans!” — Designed by <a href="https://www.popwebdesign.net/ecommerce-website-design.html">PopArt Studio</a> from Serbia.</p><p></p>
2487. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/apr-24-oceanic-wonders-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-24-oceanic-wonders-preview-opt.png" /></a><p></p>
2488. <ul>
2489. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/apr-24-oceanic-wonders-preview.png">preview</a></li>
2490. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/cal/apr-24-oceanic-wonders-cal-2560x1440.png">2560x1440</a></li>
2491. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/oceanic-wonders/nocal/apr-24-oceanic-wonders-nocal-2560x1440.png">2560x1440</a></li>
2492. </ul>
2493.  
2494. <p></p>Don’t Give Up<p></p>
2495. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
2496. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/apr-24-dont-give-up-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-24-dont-give-up-preview-opt.png" /></a><p></p>
2497. <ul>
2498. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/apr-24-dont-give-up-preview.png">preview</a></li>
2499. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/cal/apr-24-dont-give-up-cal-3840x2160.png">3840x2160</a></li>
2500. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dont-give-up/nocal/apr-24-dont-give-up-nocal-3840x2160.png">3840x2160</a></li>
2501. </ul>
2502.  
2503. <p></p>Do Doodling<p></p>
2504. <p></p><p>Designed by <a href="https://design-studio.io/">Design Studio</a> from India.</p><p></p>
2505. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/apr-24-do-doodling-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-24-do-doodling-preview-opt.png" /></a><p></p>
2506. <ul>
2507. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/apr-24-do-doodling-preview.png">preview</a></li>
2508. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/cal/apr-24-do-doodling-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/cal/apr-24-do-doodling-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/cal/apr-24-do-doodling-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/cal/apr-24-do-doodling-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/cal/apr-24-do-doodling-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/cal/apr-24-do-doodling-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/cal/apr-24-do-doodling-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/cal/apr-24-do-doodling-cal-2560x1440.jpg">2560x1440</a></li>
2509. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/nocal/apr-24-do-doodling-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/nocal/apr-24-do-doodling-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/nocal/apr-24-do-doodling-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/nocal/apr-24-do-doodling-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/nocal/apr-24-do-doodling-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/nocal/apr-24-do-doodling-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/nocal/apr-24-do-doodling-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/do-doodling/nocal/apr-24-do-doodling-nocal-2560x1440.jpg">2560x1440</a></li>
2510. </ul>
2511.  
2512. <p></p>Dung Beetle<p></p>
2513. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
2514. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/apr-24-dung-beetle-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-24-dung-beetle-preview-opt.png" /></a><p></p>
2515. <ul>
2516. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/apr-24-dung-beetle-preview.png">preview</a></li>
2517. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/cal/apr-24-dung-beetle-cal-3840x2160.png">3840x2160</a></li>
2518. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/dung-beetle/nocal/apr-24-dung-beetle-nocal-3840x2160.png">3840x2160</a></li>
2519. </ul>
2520.  
2521. <p></p>Live Life To The Fullest<p></p>
2522. <p></p><p>“Live life to the fullest by daring to dream big, seizing every moment with purpose, and embracing challenges as opportunities for growth. Cultivate meaningful relationships, savoring shared experiences and creating lasting memories. Find joy in the ordinary, appreciate the beauty of the world around you, and always strive to make a positive impact, leaving a legacy of fulfillment and happiness.” — Designed by <a href="https://www.linkedin.com/in/hiteshpuri/">Hitesh Puri</a> from Delhi, India.</p><p></p>
2523. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/apr-24-live-life-to-the-fullest-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-24-live-life-to-the-fullest-preview-opt.png" /></a><p></p>
2524. <ul>
2525. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/apr-24-live-life-to-the-fullest-preview.png">preview</a></li>
2526. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/cal/apr-24-live-life-to-the-fullest-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/cal/apr-24-live-life-to-the-fullest-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/cal/apr-24-live-life-to-the-fullest-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/cal/apr-24-live-life-to-the-fullest-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/cal/apr-24-live-life-to-the-fullest-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/cal/apr-24-live-life-to-the-fullest-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/cal/apr-24-live-life-to-the-fullest-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/cal/apr-24-live-life-to-the-fullest-cal-2560x1440.png">2560x1440</a></li>
2527. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/nocal/apr-24-live-life-to-the-fullest-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/nocal/apr-24-live-life-to-the-fullest-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/nocal/apr-24-live-life-to-the-fullest-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/nocal/apr-24-live-life-to-the-fullest-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/nocal/apr-24-live-life-to-the-fullest-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/nocal/apr-24-live-life-to-the-fullest-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/nocal/apr-24-live-life-to-the-fullest-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/live-life-to-the-fullest/nocal/apr-24-live-life-to-the-fullest-nocal-2560x1440.png">2560x1440</a></li>
2528. </ul>
2529.  
2530. <p></p>Sow Smiles, Reap Joy<p></p>
2531. <p></p><p>“Through this design, I aim to capture the essence of Baisakhi, a celebration of gratitude, unity, and the bountiful blessings of nature. In creating my Baisakhi artwork, I was inspired by the timeless imagery of wheat fields and dancing figures. The golden grains symbolize abundance and prosperity, while the lively dancers represent the joyous spirit of the harvest season.” — Designed by <a href="https://cronixweb.com/">Cronix</a> from the United States.</p><p></p>
2532. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/apr-24-sow-smiles-reap-joy-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-24-sow-smiles-reap-joy-preview-opt.png" /></a><p></p>
2533. <ul>
2534. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/apr-24-sow-smiles-reap-joy-preview.png">preview</a></li>
2535. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1024x600.png">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1440x960.png">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-2560x1600.png">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-2880x1800.png">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-3072x1920.png">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-3840x2160.png">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/cal/apr-24-sow-smiles-reap-joy-cal-5120x2880.png">5120x2880</a></li>
2536. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1024x600.png">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1440x960.png">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-2560x1600.png">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-2880x1800.png">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-3072x1920.png">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-3840x2160.png">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/sow-smiles-reap-joy/nocal/apr-24-sow-smiles-reap-joy-nocal-5120x2880.png">5120x2880</a></li>
2537. </ul>
2538.  
2539. <p></p>Warmest Eid Greetings<p></p>
2540. <p></p><p>“Inspired by the timeless tradition of giving and sharing during Eid, my wallpaper design depicts the happiness of being together with family, the soft light of the Eid moon, and the cheerful feeling of celebration.” — Designed by <a href="https://cronixweb.com/">Cronix</a> from the United States.</p><p></p>
2541. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/apr-24-warmest-eid-greetings-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-24-warmest-eid-greetings-preview-opt.png" /></a><p></p>
2542. <ul>
2543. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/apr-24-warmest-eid-greetings-preview.png">preview</a></li>
2544. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1440x1050.jpg">1440x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-1920x1400.jpg">1920x1400</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/cal/apr-24-warmest-eid-greetings-cal-2500x1400.jpg">2500x1400</a></li>
2545. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1440x1050.jpg">1440x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-1920x1400.jpg">1920x1400</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-24/warmest-eid-greetings/nocal/apr-24-warmest-eid-greetings-nocal-2500x1400.jpg">2500x1400</a></li>
2546. </ul>
2547.  
2548.  
2549.  
2550. <p></p>Swing Into Spring<p></p>
2551. <p></p><p>“Our April calendar needs not mark any special occasion — April itself is a reason to celebrate. It was a breeze creating this minimal, pastel-colored calendar design with a custom lettering font and plant pattern, for the ultimate spring feel.” — Designed by <a href="https://www.popwebdesign.net/illustrations.html">PopArt Studio</a> from Serbia.</p><p></p>
2552. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-swing-into-spring-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-swing-into-spring-preview-opt.png" /></a><p></p>
2553. <ul>
2554. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-swing-into-spring-preview-opt.png">preview</a></li>
2555. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/swing-into-spring/nocal/apr-22-swing-into-spring-nocal-2560x1440.png">2560x1440</a></li>
2556. </ul>
2557.  
2558. <p></p>Spring Awakens<p></p>
2559. <p></p><p>“Despite the threat that has befallen us all, we all look forward to the awakening of a life that spreads its wings after every dormant winter and opens its petals to greet us. Long live spring, long live life.” — Designed by <a href="https://www.librafire.com/">LibraFire</a> from Serbia.</p><p></p>
2560. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4859e888-38f2-44a7-b993-04cb88cf9418/apr-20-spring-awakens-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e46f3a5-f552-494c-a790-2ea6e0fefa97/apr-20-spring-awakens-preview-opt.png" /></a><p></p>
2561. <ul>
2562. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e46f3a5-f552-494c-a790-2ea6e0fefa97/apr-20-spring-awakens-preview-opt.png">preview</a></li>
2563. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/spring-awakens/nocal/apr-20-spring-awakens-nocal-2560x1440.png">2560x1440</a></li>
2564. </ul>
2565.  
2566. <p></p>The Loneliest House In The World<p></p>
2567. <p></p><p>“March 26 was Solitude Day. To celebrate it, here is the picture about the loneliest house in the world. It is a real house, I found it <a href="https://www.youtube.com/watch?v=dTqVocrDoy0">on Youtube</a>.” — Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><p></p>
2568. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-the-lonliest-house-in-the-world-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-the-lonliest-house-in-the-world-preview-opt.png" /></a><p></p>
2569. <ul>
2570. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-the-lonliest-house-in-the-world-preview-opt.png">preview</a></li>
2571. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1024x600.jpg">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1440x960.jpg">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1600x900.jpg">1600x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-3072x1920.jpg">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-3840x2160.jpg">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/the-lonliest-house-in-the-world/nocal/apr-23-the-lonliest-house-in-the-world-nocal-5120x2880.jpg">5120x2880</a></li>
2572. </ul>
2573.  
2574. <p></p>Dreaming<p></p>
2575. <p></p><p>“The moment when you just walk and your imagination fills up your mind with thoughts.” — Designed by <a href="https://galshir.com">Gal Shir</a> from Israel.</p><p></p>
2576. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7f6fd0f6-4c2e-4e8f-999c-e0ba5ad27a55/apr-19-dreaming-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8258c4b2-ea98-45d8-9727-8bba2812646d/apr-19-dreaming-preview-opt.png" /></a><p></p>
2577. <ul>
2578. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8258c4b2-ea98-45d8-9727-8bba2812646d/apr-19-dreaming-preview-opt.png">preview</a></li>
2579. <li><a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-340x480.png">340x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/dreaming/nocal/apr-19-dreaming-nocal-2560x1440.png">2560x1440</a></li>
2580. </ul>
2581.  
2582. <p></p>Coffee Morning<p></p>
2583. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
2584. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-coffee-morning-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-coffee-morning-preview-opt.png" /></a><p></p>
2585. <ul>
2586. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-coffee-morning-preview-opt.png">preview</a></li>
2587. <li><a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-22/coffee-morning/nocal/apr-22-coffee-morning-nocal-3840x2160.png">3840x2160</a></li>
2588. </ul>
2589.  
2590. <p></p>Clover Field<p></p>
2591. <p></p><p>Designed by <a href="https://www.nathalieouederni.com">Nathalie Ouederni</a> from France.</p><p></p>
2592. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39bc6bc9-47f0-431e-b7fb-882ca4a846df/apr-17-clover-field-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47694eea-aa70-4e2c-a1ac-04d66d9b1360/apr-17-clover-field-preview-opt.png" /></a><p></p>
2593. <ul>
2594. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47694eea-aa70-4e2c-a1ac-04d66d9b1360/apr-17-clover-field-preview-opt.png">preview</a></li>
2595. <li><a href="https://smashingmagazine.com/files/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-2560x1440.jpg">2560x1440</a></li>
2596. </ul>
2597.  
2598. <p></p>Rainy Day<p></p>
2599. <p></p><p>Designed by <a href="https://www.behance.net/xenialatii">Xenia Latii</a> from Berlin, Germany.</p><p></p>
2600. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6718210c-8101-4da8-8b28-21fe81961719/apr-16-rainy-day-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fb9c64b-f5d1-41fe-be48-11a7e77ccaa5/apr-16-rainy-day-preview-opt.png" /></a><p></p>
2601. <ul>
2602. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fb9c64b-f5d1-41fe-be48-11a7e77ccaa5/apr-16-rainy-day-preview-opt.png">preview</a></li>
2603. <li><a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/rainy-day/nocal/apr-16-rainy-day-nocal-2560x1440.jpg">2560x1440</a></li>
2604. </ul>
2605.  
2606. <p></p>The Perpetual Circle<p></p>
2607. <p></p><p>“Inspired by the Black Forest, which is beginning right behind our office windows, so we can watch the perpetual circle of nature, when we take a look outside.” — Designed by <a href="https://www.netzbewegung.com">Nils Kunath</a> from Germany.</p><p></p>
2608. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02959355-754b-4bd7-baf8-a50e3c304882/apr-15-the-perpetual-circle-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f852d5ba-45e9-450a-a18e-61789bcda9df/apr-15-the-perpetual-circle-preview-opt.png" /></a><p></p>
2609. <ul>
2610. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f852d5ba-45e9-450a-a18e-61789bcda9df/apr-15-the-perpetual-circle-preview-opt.png">preview</a></li>
2611. <li><a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/the-perpetual-circle/nocal/apr-15-the-perpetual-circle-nocal-2560x1440.jpg">2560x1440</a></li>
2612. </ul>
2613.  
2614.  
2615.  
2616. <p></p>Inspiring Blossom<p></p>
2617. <p></p><p>“‘Sweet spring is your time is my time is our time for springtime is lovetime and viva sweet love,’ wrote E. E. Cummings. And we have a question for you. Is there anything more refreshing, reviving, and recharging than nature in blossom? Let it inspire us all to rise up, hold our heads high, and show the world what we are made of.” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><p></p>
2618. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b4d1bcbc-24de-458f-b5fd-4bc311346294/apr-19-inspiring-blossom-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58e505d3-2a5f-40ce-8be0-f284bacd9016/apr-19-inspiring-blossom-preview-opt.png" /></a><p></p>
2619. <ul>
2620. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58e505d3-2a5f-40ce-8be0-f284bacd9016/apr-19-inspiring-blossom-preview-opt.png">preview</a></li>
2621. <li><a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/inspiring-blossom/nocal/apr-19-inspiring-blossom-nocal-2560x1440.jpg">2560x1440</a></li>
2622. </ul>
2623.  
2624. <p></p>A Time For Reflection<p></p>
2625. <p></p><p>“‘We’re all equal before a wave.’ (Laird Hamilton)” — Designed by Shawna Armstrong from the United States.</p><p></p>
2626. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47348c03-f515-4be8-9883-3ebb01ae754b/apr-15-a-time-for-reflection-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e0f0ee-e850-46d9-af29-662819ebf30e/apr-15-a-time-for-reflection-preview-opt.png" /></a><p></p>
2627. <ul>
2628. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e0f0ee-e850-46d9-af29-662819ebf30e/apr-15-a-time-for-reflection-preview-opt.png">preview</a></li>
2629. <li><a href="https://smashingmagazine.com/files/wallpapers/april-15/a-time-for-reflection/nocal/apr-15-a-time-for-reflection-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/a-time-for-reflection/nocal/apr-15-a-time-for-reflection-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/a-time-for-reflection/nocal/apr-15-a-time-for-reflection-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/a-time-for-reflection/nocal/apr-15-a-time-for-reflection-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/a-time-for-reflection/nocal/apr-15-a-time-for-reflection-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/a-time-for-reflection/nocal/apr-15-a-time-for-reflection-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-15/a-time-for-reflection/nocal/apr-15-a-time-for-reflection-nocal-2560x1440.jpg">2560x1440</a></li>
2630. </ul>
2631.  
2632. <p></p>Purple Rain<p></p>
2633. <p></p><p>“This month is International Guitar Month! Time to get out your guitar and play. As a graphic designer/illustrator seeing all the variations of guitar shapes begs to be used for a fun design. Search the guitar shapes represented and see if you see one similar to yours, or see if you can identify some of the different styles that some famous guitarists have played (BTW, Prince’s guitar is in there and purple is just a cool color).” — Designed by <a href="https://www.codesign.cc/">Karen Frolo</a> from the United States.</p><p></p>
2634. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4974612c-d128-47cd-bc5b-88fe614c8060/apr-17-purple-rain-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a3044f60-78ac-448a-9603-45c926378aeb/apr-17-purple-rain-preview-opt.png" /></a><p></p>
2635. <ul>
2636. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a3044f60-78ac-448a-9603-45c926378aeb/apr-17-purple-rain-preview-opt.png">preview</a></li>
2637. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-2560x1440.jpg">2560x1440</a></li>
2638. </ul>
2639.  
2640. <p></p>Sakura<p></p>
2641. <p></p><p>“Spring is finally here with its sweet Sakura’s flowers, which remind me of my trip to Japan.” — Designed by <a href="https://weblog.redisdead.net">Laurence Vagner</a> from France.</p><p></p>
2642. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/421692a9-f6b0-4ba2-a962-764add28a469/april-11-prunus-48-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9f501224-75ff-4f61-84dc-700a6362185a/april-11-prunus-48-preview-opt.png" /></a><p></p>
2643. <ul>
2644. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9f501224-75ff-4f61-84dc-700a6362185a/april-11-prunus-48-preview-opt.png">preview</a></li>
2645. <li>without calendar: <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/efc7788a-1f99-45b6-af8a-910f91ee6940/april-11-prunus-48-nocal-1280x800.jpg">1280x800</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4872efae-6211-4d98-ba0d-4903f2e0ce75/april-11-prunus-48-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9621e961-d3ff-4fd8-8935-a513ee50bb12/april-11-prunus-48-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6e59e3ac-2d15-4e11-a85f-757deefc31f7/april-11-prunus-48-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5221f66a-5437-413e-ab1d-02b90c0b2a00/april-11-prunus-48-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ebb40a83-424a-46ba-b1c6-111adbdeb267/april-11-prunus-48-nocal-2560x1440.jpg">2560x1440</a></li>
2646. </ul>
2647.  
2648. <p></p>Wildest Dreams<p></p>
2649. <p></p><p>“We love the art direction, story, and overall cinematography of the ‘Wildest Dreams’ music video by Taylor Swift. It inspired us to create this illustration. Hope it will look good on your desktops.” — Designed by <a href="https://www.kasradesign.com">Kasra Design</a> from Malaysia.</p><p></p>
2650. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/82a6be20-e659-4898-852e-53421e7ce7d2/apr-18-wildest-dreams-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5e6958ee-8d8a-45e2-8789-f83e72eeb153/apr-18-wildest-dreams-preview-opt.png" /></a><p></p>
2651. <ul>
2652. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5e6958ee-8d8a-45e2-8789-f83e72eeb153/apr-18-wildest-dreams-preview-opt.png">preview</a></li>
2653. <li><a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-18/wildest-dreams/nocal/apr-18-wildest-dreams-nocal-2560x1440.jpg">2560x1440</a></li>
2654. </ul>
2655.  
2656. <p></p>Good Day<p></p>
2657. <p></p><p>“Some pretty flowers and spring time always make for a good day.” — Designed by <a href="https://www.corporate3design.com/">Amalia Van Bloom</a> from the United States.</p><p></p>
2658. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b39d9dc1-f5b7-4838-a3d4-8f581d42347d/apr-14-good-day-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/424e321b-e0e7-451d-afb7-8a67e917f7bc/apr-14-good-day-preview-opt.png" /></a><p></p>
2659. <ul>
2660. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/424e321b-e0e7-451d-afb7-8a67e917f7bc/apr-14-good-day-preview-opt.png">preview</a></li>
2661. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/april-14/good-day/nocal/apr-14-good-day-nocal-640x1136.jpg">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/good-day/nocal/apr-14-good-day-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/good-day/nocal/apr-14-good-day-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/good-day/nocal/apr-14-good-day-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/good-day/nocal/apr-14-good-day-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/good-day/nocal/apr-14-good-day-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/good-day/nocal/apr-14-good-day-nocal-2560x1440.jpg">2560x1440</a></li>
2662. </ul>
2663.  
2664. <p></p>Springing<p></p>
2665. <p></p><p>“It’s spring already, my favorite season! You can smell it, you can see it, you can feel it in the air. Trees blossom, the grass is smiling at the sun, everything is so eager to show itself.” — Designed by <a href="https://iconcrafts.com">Vane Kosturanov</a> from Macedonia.</p><p></p>
2666. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ead4610-7ef8-40a4-aafe-95668423437b/apr-16-springing-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a7fbc2a5-1d9d-4305-b944-5175603e12eb/apr-16-springing-preview-opt.png" /></a><p></p>
2667. <ul>
2668. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a7fbc2a5-1d9d-4305-b944-5175603e12eb/apr-16-springing-preview-opt.png">preview</a></li>
2669. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-16/springing/nocal/apr-16-springing-nocal-2560x1440.png">2560x1440</a></li>
2670. </ul>
2671.  
2672. <p></p>I “Love” My Dog<p></p>
2673. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
2674. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-i-love-my-dog-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-i-love-my-dog-preview-opt.png" /></a><p></p>
2675. <ul>
2676. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-i-love-my-dog-preview-opt.png">preview</a></li>
2677. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/i-love-my-dog/nocal/apr-23-i-love-my-dog-nocal-3840x2160.png">3840x2160</a></li>
2678. </ul>
2679.  
2680. <p></p>April Showers<p></p>
2681. <p></p><p>“April Showers bring hedgehogs under flowers!” — Designed by <a href="https://athusap.myportfolio.com/">Danaé Drews</a> from the United States.</p><p></p>
2682. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-april-showers-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-april-showers-preview-opt.png" /></a><p></p>
2683. <ul>
2684. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-april-showers-preview-opt.png">preview</a></li>
2685. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/april-showers/nocal/apr-23-april-showers-nocal-2560x1440.jpg">2560x1440</a></li>
2686. </ul>
2687.  
2688.  
2689.  
2690. <p></p>Fresh Kicks<p></p>
2691. <p></p><p>“Spring time means the nicer weather is rolling in, so that means the nice shoes roll out as well.” — Designed by <a href="https://mu-art.org/alexandershields/">Alex Shields</a> from the United States.</p><p></p>
2692. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-fresh-kicks-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-fresh-kicks-preview-opt.png" /></a><p></p>
2693. <ul>
2694. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-fresh-kicks-preview-opt.png">preview</a></li>
2695. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/fresh-kicks/nocal/apr-23-fresh-kicks-nocal-2560x1440.png">2560x1440</a></li>
2696. </ul>
2697.  
2698. <p></p>April Fox<p></p>
2699. <p></p><p>Designed by <a href="https://masterbundles.com/">MasterBundles</a> from the United States.</p><p></p>
2700. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-20-april-fox-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-20-april-fox-preview-opt.png" /></a><p></p>
2701. <ul>
2702. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-20-april-fox-preview-opt.png">preview</a></li>
2703. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/apr-20/april-fox/nocal/apr-20-april-fox-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/april-fox/nocal/apr-20-april-fox-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/april-fox/nocal/apr-20-april-fox-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/april-fox/nocal/apr-20-april-fox-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/april-fox/nocal/apr-20-april-fox-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/april-fox/nocal/apr-20-april-fox-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/april-fox/nocal/apr-20-april-fox-nocal-2560x1440.jpg">2560x1440</a></li>
2704. </ul>
2705.  
2706. <p></p>Flying On A Rainy Day<p></p>
2707. <p></p><p>“April is the month of spring or autumn depending where you live on the globe! It’s also the second rainiest month of the year. I was inspired by one simple motif to illustrate rain, birds, and flowers. So whether you witness rainy days or colorful ones… enjoy April!” — Designed by <a href="https://www.behance.net/ranakadry">Rana Kadry</a> from Egypt.</p><p></p>
2708. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/83b68aac-1715-4abb-81e0-b75eaf7409ce/apr-14-flying-on-a-rainy-day-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/030e32c7-336b-419d-bba3-97ae2cbcd208/apr-14-flying-on-a-rainy-day-preview-opt.png" /></a><p></p>
2709. <ul>
2710. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/030e32c7-336b-419d-bba3-97ae2cbcd208/apr-14-flying-on-a-rainy-day-preview-opt.png">preview</a></li>
2711. <li><a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-640x960.jpg">640x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/april-14/flying-on-a-rainy-day/nocal/apr-14-flying-on-a-rainy-day-nocal-2560x1440.jpg">2560x1440</a></li>
2712. </ul>
2713.  
2714. <p></p>Fairytale<p></p>
2715. <p></p><p>“A tribute to Hans Christian Andersen. Happy Birthday!” — Designed by <a href="https://www.behance.net/roxana-nastase">Roxi Nastase</a> from Romania.</p><p></p>
2716. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c9a294b3-d423-4b0b-8bb8-12ec019260d8/apr-17-fairytale-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee587665-f8be-49e3-b526-5b4b6778d668/apr-17-fairytale-preview-opt.png" /></a><p></p>
2717. <ul>
2718. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee587665-f8be-49e3-b526-5b4b6778d668/apr-17-fairytale-preview-opt.png">preview</a></li>
2719. <li><a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-2560x1440.jpg">2560x1440</a></li>
2720. </ul>
2721.  
2722. <p></p>Spring Serenity<p></p>
2723. <p></p><p>“My inspiration was the arrival of spring that transmits a sense of calmness and happiness through its beautiful colors.” — Designed by Margarida Granchinho from Portugal.</p><p></p>
2724. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4778c74b-c813-4ffe-8820-703d90601fa3/apr-19-spring-serenity-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7792c458-8d42-4178-b457-11dcc737b603/apr-19-spring-serenity-preview-opt.png" /></a><p></p>
2725. <ul>
2726. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7792c458-8d42-4178-b457-11dcc737b603/apr-19-spring-serenity-preview-opt.png">preview</a></li>
2727. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/apr-19/spring-serenity/nocal/apr-19-spring-serenity-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/spring-serenity/nocal/apr-19-spring-serenity-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-19/spring-serenity/nocal/apr-19-spring-serenity-nocal-1920x1440.png">1920x1440</a></li>
2728. </ul>
2729.  
2730. <p></p>Ice Scream<p></p>
2731. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
2732. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-ice-scream-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-ice-scream-preview-opt.png" /></a><p></p>
2733. <ul>
2734. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-ice-scream-preview-opt.png">preview</a></li>
2735. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/ice-scream/nocal/apr-23-ice-scream-nocal-3840x2160.png">3840x2160</a></li>
2736. </ul>
2737.  
2738. <p></p>Puddle Splash<p></p>
2739. <p></p><p>“I designed this playful and fun wallpaper inspired by nature that is present during the early spring.” — Designed by <a href="http://mu-art.org/mgambucci/">Marla Gambucci</a> from the United States.</p><p></p>
2740. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-puddle-splash-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-puddle-splash-preview-opt.png" /></a><p></p>
2741. <ul>
2742. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-puddle-splash-preview-opt.png">preview</a></li>
2743. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/apr-23/puddle-splash/nocal/apr-23-puddle-splash-nocal-2560x1440.png">2560x1440</a></li>
2744. </ul>
2745.  
2746. <p></p>Take Our Daughters And Sons To Work Day<p></p>
2747. <p></p><p>“The day revolves around parents taking their children to work to expose them to future job possibilities and the value of education. It’s been an annual event since 1992 and helps expose children to the possibilities of careers at a young age.” — Designed by <a href="https://www.everincreasingcircles.com/">Ever Increasing Circles</a> from the United Kingdom.</p><p></p>
2748. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-20-take-our-daughters-and-sons-to-work-day-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-20-take-our-daughters-and-sons-to-work-day-preview-opt.png" /></a><p></p>
2749. <ul>
2750. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-20-take-our-daughters-and-sons-to-work-day-preview-opt.png">preview</a></li>
2751. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/apr-20/take-our-daughters-and-sons-to-work-day/nocal/apr-20-take-our-daughters-and-sons-to-work-day-nocal-2560x1440.jpg">2560x1440</a></li>
2752. </ul>
2753.  
2754. ]]></content:encoded>
2755.            <author>hello@smashingmagazine.com (Cosima Mielke)</author>
2756.            <enclosure url="http://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-swing-into-spring-preview-opt.png" length="0" type="image/png"/>
2757.        </item>
2758.        <item>
2759.            <title><![CDATA[How Developers Can Strengthen Their Mental Health Amidst High-Pressure Projects]]></title>
2760.            <link>https://smashingmagazine.com/2024/03/developers-strengthen-mental-health/</link>
2761.            <guid>https://smashingmagazine.com/2024/03/developers-strengthen-mental-health/</guid>
2762.            <pubDate>Fri, 29 Mar 2024 08:00:00 GMT</pubDate>
2763.            <description><![CDATA[There’s no shortage of articles about the mental health of developers, ranging from personal accounts of harrowing work experiences to round-ups of advice on how to preserve healthy work habits. But what working situations trigger things like stress, anxiety, burnout, and depression? Victor Ayomipo shares his personal triggers and how he manages them.]]></description>
2764.            <content:encoded><![CDATA[<p>I have had my fair share of projects that have given me life because of what I accomplished, as well as those that have cost me life when I reflect on the terrible stress they caused. I know I’m not unique that way; sometimes, my work makes me feel like a rock star and other times, I question whether I should be a developer at all. Some projects test you — like <em>really</em> test you.</p>
2765. <p>In the first week of December 2023, I got a contract to rebuild an entire web app from the ground-up using a new technology designed to be launched alongside a “new year, new system” initiative heading into 2024.</p>
2766. <p>I think you know where this is going. I built up a lot of confidence heading into the project but soon found that I had bitten off way more than I could chew. The legacy code I inherited was the epitome of “legacy” code, and its spaghetti nature needed more than one developer to suss out. The project looked doomed from the beginning, and I hadn’t even written a line of code!</p>
2767. <p>I quit the job. After weeks of stress-laden sleep, I simply couldn’t stomach the work. I actually dreaded work altogether. And with that dread came doubts about my career and whether I should start looking outside the industry.</p>
2768. <p>Is this starting to sound familiar?</p>
2769. <p>That job wasn’t just a project that posed a personal challenge; no, <strong>it was a battle for my mental health</strong>. I was officially burned out. Thankfully, I was relieved of some pressure when, to my surprise, the client was weirdly understanding and offered to bring in an additional developer to share the load. That really helped, and it gave me what I needed to roll my sleeves back up and finish the job.</p>
2770. Is This Success?
2771. <p>The project launched, and the client was happy with it. But I still experience aftershocks, even today, where the trauma from that contract seeps back in and reminds me just how awful it was and the extent to which it made me question my entire career.</p>
2772. <p>So, even though the project was ultimately a success, I wouldn’t say it was “successful.” There was a real non-monetary cost that I paid just for taking the job.</p>
2773. <p>I’m sure it is the same for you. We’ve all had stressful projects that push us to the brink of what feels like self-destruction. It’s clear because there are so many other articles and blog posts about it, all offering insightful personal advice for relieving stress, like exercise, sleep, and eating right.</p>
2774. <p>In fact, as I reflected back on projects that predated this one particular nightmare, I realized there had been other projects I’d taken that had likely contributed to the burnout. Interestingly, I found a few common threads between them that I now use as “warning flags” going into new work.</p>
2775. <p>All of our experiences are unique to us, and there is no standard recipe for managing stress and protecting your mental health. Advice in this area is always best described as “your mileage may vary” for no other reason than that it is scoped to a specific individual. True, one’s experiences can go so far as to help someone through a tough situation. I find it’s the same thing with self-help books — the best advice is usually the same advice found elsewhere, only articulated better or in a way that resonates with you.</p>
2776. <p>Think of this article as more of my personal story of experiences safeguarding my mental health when finding myself in super specific work situations.</p>
2777. The Urgent Hotfix
2778. <p>Remember that project with the “comfortable” deadline? Yeah, me neither. It’s that common thing where you ask when the project needs to be completed, and you get back a sarcastic “last Tuesday.”</p>
2779. <p>In this particular instance, it was a usual Monday morning. There I was, still in bed, happily rested after a fulfilling weekend. Then Slack started blasting me with notifications, all of which were in the vein of,</p>
2780. <blockquote>“Hey, users can’t make payments on the app — urgent!”</blockquote>
2781.  
2782. <p>You can fault me for having Slack notifications enabled early on a Monday. But still, it killed my good mood and practically erased whatever respite I gained from the weekend. But I got up, headed over to the laptop, and began working as quickly as the day had started.</p>
2783. <p>The timeline for this sort of fix is most definitely a “due last Tuesday” situation. It’s urgent and demands immediate attention at the expense of dropping everything else. There’s nothing easygoing about it. The pressure is on. As we were all trying to fix the bug, the customer support team also added to the pressure by frequently reporting the rising number of users having difficulties processing payments.</p>
2784. <p>We read through this huge codebase and ran different kinds of tests, but nothing worked. I think it was around 40 minutes before the deadline that a colleague came across a Reddit post (dated six years ago or so) that had the solution in it. I tell you, that bug stood no chance. We finally got the payment system up and running. I was relieved, but at what cost?</p>
2785. <h3>What I Learned About HotFixes</h3>
2786. <p>Urgent hotfixes are a reality for most developers I know. They sort of come with the territory. But allowing them to take away your well-earned peace of mind is all too easy. A day can go from peaceful to panicking with just one Slack notification, and it may happen at any time, even first thing on a Monday morning.</p>
2787. <h3>What I’d Do Differently</h3>
2788. <p>It’s funny how Slack is called “Slack” because it really does feel like “slacking off” when you’re not checking in. But I can tell you that my Slack notifications are now paused until more reasonable hours. </p>
2789. <p>Yes, it was a very real and very urgent situation, but allowing it to pull me completely out of my personal time wasn’t the best choice. I am not the only person on the team, so someone else who is already readily available can take the call.</p>
2790. <p>After all, a rested developer is a productive developer, especially when faced with an urgent situation. </p>
2791. The Pit Of Procrastination
2792. <p>I once got myself into a contract for a project that was way above my skill set. But what’s that thing developers love saying, “Fake it ’til you make it,” or something like that? It’s hard to say “no” to something, particularly if your living depends on winning project bids. Plus, I won’t lie: there’s a little pride in not wanting to admit defeat.</p>
2793. <p>When I accepted the job, I convinced myself that all I needed was two full days of steady focus and dedication to get up to speed and knock things out. But guess what? I procrastinated.</p>
2794. <p>It actually started out very innocently. I’d give myself a brain break and read for 30 minutes, then maybe scroll through socials, then switch to YouTube, followed by… you get the picture. By the time I realize what happened, I’m several hours off schedule and find stress starting to harbor and swell inside me.</p>
2795. <p>Those half hours here and there took me right up to the eleventh hour.</p>
2796. <p>Unfortunately, I lost the contract as I couldn’t hit my promised timeline. I take full responsibility for that, of course, but I want to be honest and illustrate the real consequences that happen when stress and fear take over. I let myself get distracted because I was essentially <em>afraid</em> of the project and wasn’t being honest with myself.</p>
2797. <h3>What I Learned About Procrastination</h3>
2798. <p>The “fake it ’til you make it” ethos is a farce. There are relatively “safe” situations where getting into unfamiliar territory outside your skillset is going to be just fine. However, a new client with a new project spending new money on my expertise is not one of them.</p>
2799. <p>Saying “yes” to a project is a promise, not a gamble.</p>
2800. <p>And I’m no longer gambling with my client’s projects.</p>
2801. <h3>What I’d Do Differently</h3>
2802. <p>Learning on the job without a solid plan is a bad idea. If a project screams “out of my league,” I’ll politely decline. In fact, I have found that referring a client to another developer with the right skill set is actually a benefit because the client appreciates the honesty and convenience of not having to find another lead. I actually get <em>more</em> work when I push away the work I’m least suited for.</p>
2803. The Unrealistic Request
2804. <p>This happened recently at a startup I volunteered for and is actually quite funny in hindsight. Slack chimed in with a direct message from a marketing lead on the team:</p>
2805. <blockquote>“Hi, we are gonna need to add an urgent feature for a current social media trend. Can you implement it ASAP?”</blockquote>
2806.  
2807. <p>It was a great feature! I dare say I was even eager to work on it because I saw its potential for attracting new users to the platform. Just one problem: <em>what exactly does “ASAP” mean in this instance?</em> Yes, I know it’s “as soon as possible,” but what is the actual deadline, and what’s driving it? Are we talking one day? One week? One month? Again, startups are famous for wanting everything done two weeks ago.</p>
2808. <p>But I didn’t ask those questions. I dropped everything I was doing and completed the feature in two weeks’ time. If I’m being honest, there was also an underlying fear of saying “no” to the request. I didn’t want to disappoint someone on my team.</p>
2809. <p>That’s the funny part. “ASAP” was really code for “as soon as possible <em>with your current workload</em>.” Was that communicated well? Definitely not. Slack isn’t exactly the best medium for detailed planning. I had a lot more time than I thought, yet I let myself get swept up by the moment. Sure, I nailed the new feature, and it did indeed attract new users — but again, at what cost? I patted myself on the back for a job well done but then swiveled my chair around to realize that I was facing a pile of work that I let mount up in the meantime.</p>
2810. <p>And thus, the familiar weight of stress began taking its typical toll.</p>
2811. <h3>What I Learned About Unrealistic Requests</h3>
2812. <p>Everything has a priority. Someone else may have a pressing deadline, but does it supersede your own priorities? <strong>Managing priorities is more of a juggling act</strong>, but I was treating them as optional tasks that I could start and stop at will.</p>
2813. <h3>What I’d Do Differently</h3>
2814. <p>There are two things I’d do differently next time an unrealistic request comes up:</p>
2815. <ul>
2816. <li>First, I’ll be sure to get a firm idea of when the request is actually needed and compare it to my existing priorities before agreeing to it.</li>
2817. <li>Second, I plan on saying “no” without actually saying it. How different would the situation have been had I simply replied, “Yes, if...” instead, as in, “Yes, if I can complete this thing I’m working on first, then I’d be happy to jump on that next.” That puts the onus on the requester to do a little project management rather than allowing myself to take on the burden carte blanche.</li>
2818. </ul>
2819. The 48-Hour Workday
2820. <p>How many times have you pulled an all-nighter to get something done? If the answer is zero, that’s awesome. In my experience, though, it’s come up more times than I can count on two hands. Sometimes it’s completely my doing; I’ll get sucked into a personal side project or an interesting bug that leads to hours passing by like minutes.</p>
2821. <p>I have more than a few friends and acquaintances who wear sleepless nights like merit badges as if accumulating them is somehow a desirable thing.</p>
2822. <p>The most recent example for me was a project building a game. It was supposed to be pretty simple: You’re a white ball chasing red balls that are flying around the screen. That might not be the most exciting thing in the world, but it was introducing me to some new coding concepts, and I started riding a wave I didn’t want to leave. In my head, this little game could be the next Candy Crush, and there was no way I’d risk losing success by quitting at 2:00 a.m. No way.</p>
2823. <p>To this day, the game is sitting dormant and collecting digital dust in a GitHub repository, unfinished and unreleased. I’m not convinced the five-day marathon was worth it. If anything, it’s like I had spent my enthusiasm for the job all at once, and when it burned me out, I needed a marathon stretch of sleep to get back to reality.</p>
2824. <h3>What I Learned About All-Nighters</h3>
2825. <p>The romanticized image of a fast-typing developer sporting a black hoodie in a dark room of servers and screens only exists in movies and is not something to emulate. There’s a reason there are 24 hours in a day instead of 48 — we need breaks and rest, if for nothing else, to be <em>better</em> at what we do. Mimicking a fictional stereotype is not the path to becoming a good developer, nor is it the path to sustainable living conditions.</p>
2826. <h3>What I’d Do Differently</h3>
2827. <p>I’m definitely more protective of the boundaries between me and my work. There’s a time to work, just as there’s a time for resting, personal needs, and even a time for playing.</p>
2828. <p>That means I have clearly defined working hours and respect them. Naturally, there are days I need to be adaptable, but having the boundaries in place makes those days the exception as opposed to the rule.</p>
2829. <p>I also <strong>identify milestones in my work that serve as natural pauses</strong> to break things up into more manageable pieces. If I find myself coding past my regular working hours, especially on consecutive days, then that’s an indication that I am taking on too much, that I am going outside of scope, or that the scope hasn’t been defined at all and needs more definition.</p>
2830. Bugged By A Bug
2831. <p>There are no escaping bugs. As developers, we’re going to make mistakes and clean them up as we go. I won’t say I enjoy bugfixes as much as developing new features, but there is some little part of me at the same time that’s like, “Oh yeah, challenge accepted!” Bugs can often be approached as mini puzzles, but that’s not such a bad thing.</p>
2832. <p>But there are those bugs that never seem to die. You know, the kind you can’t let go of? You’re absolutely sure that you’ve done everything correctly, and yet, the bug persists. It nearly gets to the point where you might be tempted to blame the bug on the browser or whatever dependency you’re working with, but you know it’s not. It sticks with you at night as you go to bed.</p>
2833. <p>Then comes the epiphany: <em>Oh crap, it’s a missing X</em>. And X is usually a missing semicolon or anything else that’s the equivalent of unplugging the thing and plugging it back in only to find things are working perfectly.</p>
2834. <p>I have lots of stories like this. This one time, however, takes the cake. I was working on this mobile app with React Native and Expo. Everything was going smoothly, and I was in the zone! Then, a rendering error cropped up for no clear reason. My code compiled, and all the tests passed, but the app refused to render on my mobile device.</p>
2835. <p>So, like any logical developer, I  CTRL + Z’d my way back in time until I reached a point where I was sure that the app rendered as expected. I still got the same rendering error.</p>
2836. <p>That was when I knew this bug was out for my blood. I tried every trick I knew in the book to squash that thing, but it simply would not go away. I was removing and installing packages like a madman, updating dependencies, restarting VS Code, pouring through documentation, and rebooting my laptop. Still nothing.</p>
2837. <p><strong>For context</strong>: <em>Developers typically use Expo on their devices to render the apps in real-time when working with React Native and Expo. I was not, and therein lies the problem. My phone had decided to ditch the same Wi-Fi network that my laptop was connected to.</em></p>
2838. <p>All I had to do was reconnect my phone to the network. Problem solved. But agony in the process.</p>
2839. <h3>What I Learned About Bugfixes</h3>
2840. <p>Not every code bug has a code solution. Even though I had produced perfectly valid scripts, I doubted my work and tackled the issue with what’s natural to me: code.</p>
2841. <p>If I had stepped back from my work for even a moment, then I probably would have seen the issue and saved myself many hours and headaches. I let my frustration take over to the extent that the <strong>bug was no longer a mini puzzle but the bane of my existence</strong>. I really needed to read my temperature level and know when to take a break.</p>
2842. <p>Bugs sometimes make me doubt my credibility as a developer, especially when the solution is both simple and right under my nose the entire time — <em>like</em> <em>network connectivity</em>.</p>
2843. <h3>What I’d Do Differently</h3>
2844. <p>There’s an old Yiddish saying: <em>To a worm in horseradish, the world is horseradish.</em> You may recognize it as the leading quote in Malcolm Gladwell’s <em>What the Dog Saw and Other Adventures</em>. It’s closely related to other common sayings along the lines of, <em>“To a hammer, everything is a nail.”</em></p>
2845. <p>In addition to trying to look at bugs from a non-horseradish perspective, I now know to watch my frustration level when things start feeling helpless. Take breaks. Take a walk. Eat lunch. Anything to break the cycle of rumination. It’s often in that moment of clarity that the puzzle finally starts to come together.</p>
2846. The Meeting-Working Imbalance
2847. <p>I don’t like meetings, and I’m sure many developers would agree with me on that. They’re somewhat of a necessary evil right? There’s value, for example, in the weekly standups for checking in on the team’s progress and staying on the same page as far as what’s coming up in the following week of planning.</p>
2848. <p>If only that was the one single meeting I had to attend on a given day.</p>
2849. <p>Let me describe one particular day that I feel is emblematic of what I think is a common conflict between time spent in meetings and time spent working. I got to my workspace and was ready for the usual half-hour weekly team check-in. It went a little over, which was fine, but it did mean I had to rush to the next meeting instead of having a little buffer between the two. That meeting was a classic one, the type where everyone wants a developer in the room <em>in case</em> something technical comes up but never does, leaving me bored and dividing my attention with my actual work.</p>
2850. <p>We had five meetings that day. In my book, that’s a full day completely wasted because I was unable to get around to writing any code at all, save for a few lines I could squeeze in here and there. That’s no way to work, but is unfortunately a common pattern.</p>
2851. <h3>What I Learned About Meetings</h3>
2852. <p>Meetings have to happen. I get that. But I’ve learned that not every meeting is one that I personally need to attend. In many cases, I can get the gist of what happened in a meeting by watching the recording or reading the project manager’s notes. I now know that meetings can “happen” in lots of ways, and what comes from them can still be learned asynchronously in many instances.</p>
2853. <h3>What I’d Do Differently</h3>
2854. <p>From here on out, I am asking (politely, of course) whether my attendance is mandatory or not when certain meetings come up. I also ask if I can either prepare something for the group in advance or get caught up to speed after the meeting has happened.</p>
2855. Conclusion
2856. <p>That’s it! These are a handful of situations I have found myself in the past couple of years. It’s funny how seemingly small events are able to coalesce and reveal patterns of behavior. There’s a common thread of stubbornness running through them that has opened my eyes to the way I work and how I manage my mental health.</p>
2857. <p><strong>I’m sure it is the same for you.</strong> What times can you remember when stress, anxiety, and frustration consumed you? Are you able to write them down? Do you see a pattern forming? I believe doing this sort of mental inventory is valuable because you start to see specific things that trigger your feelings, and with that, it’s possible to recognize and avoid them in the future.</p>
2858. <h3>Further Reading On SmashingMag</h3>
2859. <ul>
2860. <li>“<a href="https://www.smashingmagazine.com/2021/10/effective-mental-health-routine-programmers/">A Simple But Effective Mental Health Routine For Programmers</a>,” Dave Oscar</li>
2861. <li>“<a href="https://www.smashingmagazine.com/2020/07/thoughts-feelings-creative-wellness/">It’s Good To Talk: Thoughts And Feelings On Creative Wellness</a>,” Jhey Tompkins</li>
2862. <li>“<a href="https://www.smashingmagazine.com/2015/10/increase-workflow-reduce-stress-with-nature-sounds/">How To Increase Workflow And Reduce Stress With Nature Sounds</a>,” Scott McGregor</li>
2863. <li>“<a href="https://www.smashingmagazine.com/2015/10/dealing-with-loud-silent-burnout/">Dealing With Loud And Silent Burnout</a>,” Alexander Charchar</li>
2864. <li>“<a href="https://www.smashingmagazine.com/2014/10/lets-talk-about-it/">Mental Health: Let’s Talk About It</a>,” Christopher Murphy</li>
2865. </ul>
2866. ]]></content:encoded>
2867.            <author>hello@smashingmagazine.com (Victor Ayomipo)</author>
2868.            <enclosure url="http://files.smashing.media/articles/developers-strengthen-mental-health/developers-strengthen-mental-health.jpg" length="0" type="image/jpg"/>
2869.        </item>
2870.        <item>
2871.            <title><![CDATA[The Future Of User Research: Expert Insights And Key Trends]]></title>
2872.            <link>https://smashingmagazine.com/2024/03/the-future-of-user-research/</link>
2873.            <guid>https://smashingmagazine.com/2024/03/the-future-of-user-research/</guid>
2874.            <pubDate>Wed, 27 Mar 2024 13:00:00 GMT</pubDate>
2875.            <description><![CDATA[Based on responses from over 1,200 product professionals, Maze’s Future of User Research Report uncovers how product teams conduct research to inform decision-making and build successful products. Learn about the top three trends defining the user research industry in 2024 and beyond.]]></description>
2876.            <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://maze.co/?utm_source=smashing-magazine&amp;utm_medium=paid&amp;utm_campaign=smashing-magazine-sponsored-article">Maze</a></p>
2877. <p>How do product teams conduct user research today? How do they leverage user insights to make confident decisions and drive business growth? And what role does AI play? To learn more about the current state of user research and uncover the <strong>trends that will shape the user research landscape in 2024 and beyond</strong>, <a href="https://maze.co/?utm_source=smashing-magazine&amp;utm_medium=paid&amp;utm_campaign=smashing-magazine-sponsored-article">Maze</a> surveyed over <strong>1,200 product professionals</strong> between December 2023 and January 2024.</p>
2878.  
2879. <p><a href="https://maze.co/resources/user-research-report/?utm_source=smashing-magazine&amp;utm_medium=paid&amp;utm_campaign=smashing-magazine-sponsored-article">The Future of User Research Report</a> summarized the data into three key trends that provide precious insights into an <strong>industry undergoing significant changes</strong>. Let’s take a closer look at the main findings from the report.</p>
2880.  
2881. Trend 1: The Demand For User Research Is Growing
2882.  
2883. <p>62% of respondents who took the Future of User Research survey said the demand for user research has increased in the past 12 months. Industry trends like <a href="https://maze.co/guides/product-discovery/continuous/">continuous product discovery</a> and research democratization could be contributing to this growth, along with recent layoffs and reorganizations in the tech industry.</p>
2884.  
2885. <p>Emma Craig, Head of UX Research at Miro, sees one reason for this increase in the <strong>uncertain times</strong> we’re living in. Under pressure to beat the competition, she sensed a “shift towards more risk-averse attitudes, where organizations feel they need to ‘get it right’ the first time.” By conducting user research, organizations can <strong>mitigate risk</strong> and clarify the strategy of their business or product.</p>
2886.  
2887. <p><img src="https://files.smashing.media/articles/the-future-of-user-research/increased-demand-opt.png" /></p>
2888. <h3>Research Is About Learning</h3>
2889.  
2890. <p>As the Future of User Research report found out, organizations are leveraging research to make decisions <strong>across the entire product development lifecycle</strong>. The main consumers of research are design (86%) and product (83%) teams, but it’s also marketing, executive teams, engineering, data, customer support, and sales who rely on the results from user research to inform their decision-making.</p>
2891.  
2892. <p>As Roberta Dombrowski, Research Partner at Maze, points out:</p>
2893.  
2894. <blockquote><p>“At its core, research is about learning. We learn to ensure that we’re building products and services that meet the needs of our customers. The more we invest in growing our research practices and team, the higher our likelihood of meeting these needs.”</p></blockquote>
2895.  
2896. <p><img src="https://files.smashing.media/articles/the-future-of-user-research/stages-opt.png" /></p>
2897. <h3>Benefits And Challenges Of Conducting User Research</h3>
2898.  
2899. <p>As it turns out, the effort of conducting user research on a regular basis pays off. 85% of respondents said that user research improved their product’s <strong>usability</strong>, 58% saw an increase in <strong>customer satisfaction</strong>, and 44% in <strong>customer engagement</strong>.</p>
2900.  
2901. <p><img src="https://files.smashing.media/articles/the-future-of-user-research/impact-on-organization-opt.png" /></p>
2902. <p>Connecting research insights to business outcomes remains a key challenge, though. While awareness for measuring research impact is growing (73% of respondents track the impact of their research), 41% reported they find it challenging to <strong>translate research insights into measurable business outcomes</strong>. Other significant challenges teams face are time and bandwidth constraints (62%) and recruiting the right participants (60%).</p>
2903.  
2904. <h3>Growing A Research Mindset</h3>
2905.  
2906. <p>With the demand for user research growing, product teams need to find ways to expand their research initiatives. 75% of the respondents in the Maze survey are planning to <strong>scale research</strong> in the next year by increasing the number of research studies, leveraging AI tools, and providing training to promote research democratization.</p>
2907.  
2908. <p>Janelle Ward, Founder of Janelle Ward Insights, sees great potential in growing research practices, as an organization will grow a research mindset in tandem. She shares:</p>
2909.  
2910. <blockquote><p>“Not only will external benefits like competitive advantage come into play, but employees inside the organization will also better understand how and why important business decisions are made, resulting in <strong>more transparency</strong> from leadership and a happier and <strong>more thriving work culture</strong> for everyone.”</p></blockquote>
2911.  
2912. Trend 2: Research Democratization Empowers Stronger Decision-Making
2913.  
2914. <p>Research democratization involves empowering different teams to run research and get access to the insights they need to make confident decisions. The Future of User Research Report shows that in addition to researchers, product designers (61%), product managers (38%), and marketers (17%) conduct user research at their companies to inform their decision-making.</p>
2915.  
2916. <p><img src="https://files.smashing.media/articles/the-future-of-user-research/who-is-conducting-research-opt.png" /></p>
2917. <p>Teams with a democratized research culture reported a greater impact on decision-making. They are 2× more likely to report that <strong>user research influences strategic decisions</strong>, 1.8× more likely to state that it impacts product decisions, and 1.5× more likely to express that it inspires new product opportunities.</p>
2918.  
2919. <h3>The User Researcher’s New Role</h3>
2920.  
2921. <p>Now, if more people are conducting user research in an organization, does this mark the end of the user researcher role? Not at all. <a href="https://maze.co/resources/scaling-research-playbook/">Scaling research through democratization</a> doesn’t mean anyone can do any type of research. You’ll need the proper checks and balances to allow everyone to participate in research responsibly and effectively. The role is shifting from a purely technical to an <strong>educational role</strong> where user researchers become responsible for guiding the organization in its learning and curiosity.</p>
2922.  
2923. <p>To guarantee data quality and accuracy, user researchers can <strong>train partners on research methods and best practices</strong> and give them hands-on experience before they start their own research projects. This can involve having them shadow a researcher during a project, holding mock interviews, or leading collaborative analysis workshops.</p>
2924.  
2925. <p>Democratizing user research also means that UX researchers can open up time to <strong>focus on more complex research initiatives</strong>. While tactical research, such as usability testing, can be delegated to designers and product managers, UX researchers can conduct foundational studies to inform the product and business strategy.</p>
2926.  
2927. <h3>User Research Tools And Techniques</h3>
2928.  
2929. <p>It’s also interesting to see which tools and techniques product teams use to gather user insights. <strong>Maze</strong> (46%), Hotjar (26%), and UserTesting (24%) are the most widely used user research tools. When it comes to user research methods, product teams mostly turn to <strong>user interviews</strong> (89%), usability testing (85%), surveys (82%), and concept testing (56%).</p>
2930.  
2931. <p>According to Morgan Mullen, Lead UX Researcher at User Interviews, a factor to consider is the type of projects teams conduct. Most teams don’t change their information architecture regularly, which requires tree testing or card sorting. But they’re likely launching new features often, making usability testing a more popular research method.</p>
2932.  
2933. <p><img src="https://files.smashing.media/articles/the-future-of-user-research/research-methods-opt.png" /></p>
2934. Trend 3: New Technology Allows Product Teams To Significantly Scale Research
2935.  
2936. <p>AI is reshaping how we work in countless ways, and user research is no exception. According to the Future of User Research Report, 44% of product teams are already using <strong>AI tools</strong> to run research and an additional 41% say they would like to adopt AI tools in the future.</p>
2937.  
2938. <p><strong>ChatGPT</strong> is the most widely-used AI tool for conducting research (82%), followed by Miro AI (20%), Notion AI (18%), and Gemini (15%). The most commonly used research tools with AI features are <strong>Maze AI</strong> (15%), UserTesting AI (9%), and Hotjar AI (5%).</p>
2939.  
2940. <h3>The Strengths Of AI</h3>
2941.  
2942. <p>The tactical aspect of research is where AI truly shines. More than 60% of respondents use AI to <strong>analyze user research data</strong>, 54% for <strong>transcription</strong>, 48% for generating research questions, and 45% for <strong>synthesis and reporting</strong>. By outsourcing these tasks to artificial intelligence, respondents reported that their <strong>team efficiency</strong> improved (56%) and turnaround time for research projects decreased (50%) — freeing up more time to focus on the human and strategic side of research (35%).</p>
2943.  
2944. <p><img src="https://files.smashing.media/articles/the-future-of-user-research/ai-tools-benefits-opt.png" /></p>
2945. <h3>The Irreplaceable Value Of Research</h3>
2946.  
2947. <p>While AI is great at tackling time-consuming, tactical tasks, it is not a replacement for a skilled researcher. As Kate Pazoles, Head of Flex User Research at Twilio, points out, we can think of AI as an assistant. The value lies in <strong>connecting the dots</strong> and uncovering insights with a level of nuance that only UX researchers possess.</p>
2948.  
2949. <p>Jonathan Widawski, co-founder and CEO at Maze, sums up the growing role that AI plays in user research as follows:</p>
2950.  
2951. <blockquote><p>“AI will be able to support the entire research process, from data collection to analysis. With automation powering most of the tactical aspects, a company’s ability to build products fast is no longer a differentiating factor. The key now lies in a <strong>company’s ability to build the right product</strong> — and research is the power behind all of this.”</p></blockquote>
2952.  
2953. Looking Ahead
2954.  
2955. <p>With teams adopting a democratized user research culture and AI tools on the rise, the user researcher’s role is shifting towards that of a <strong>strategic partner for the organization</strong>.</p>
2956.  
2957. <p>Instead of gatekeeping their knowledge, user researchers can become facilitators and educate different teams on how to engage with customers and use those insights to make better decisions. By doing so, they help <strong>ensure research quality and accuracy</strong> conducted by non-researchers, while opening up time to <strong>focus on more complex, strategic research</strong>. Adopting a research mindset also helps teams value user research more and foster a <strong>happier, thriving work culture</strong>. A win-win for the organization, its employees, and customers.</p>
2958.  
2959. <p>If you’d like more data and insights, <a href="https://maze.co/resources/user-research-report/?utm_source=smashing-magazine&amp;utm_medium=paid&amp;utm_campaign=smashing-magazine-sponsored-article">read the full Future of User Research Report by Maze here</a>.</p>]]></content:encoded>
2960.            <author>hello@smashingmagazine.com (Cosima Mielke)</author>
2961.            <enclosure url="http://files.smashing.media/articles/the-future-of-user-research/increased-demand-opt.png" length="0" type="image/png"/>
2962.        </item>
2963.        <item>
2964.            <title><![CDATA[Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript]]></title>
2965.            <link>https://smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/</link>
2966.            <guid>https://smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/</guid>
2967.            <pubDate>Mon, 25 Mar 2024 12:00:00 GMT</pubDate>
2968.            <description><![CDATA[There are many ways to approach a “Dark Mode” feature that respects a user’s system color scheme preferences and allows for per-site customization. Henry Bley-Vroman walks through a new possibility that leans into cutting-edge CSS, with minimal JavaScript to support persisting the user’s color scheme preference across pages.]]></description>
2969.            <content:encoded><![CDATA[<p>Many modern websites give users the power to set a site-specific color scheme preference. A basic implementation is straightforward with JavaScript: listen for when a user changes a checkbox or clicks a button, toggle a class (or attribute) on the <code>&lt;body&gt;</code> element in response, and write the styles for that class to override design with a different color scheme.</p>
2970. <p>CSS’s new <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code> pseudo-class</a>, supported by major browsers since December 2023, opens many doors for front-end developers. I’m especially excited about leveraging it to modify UI in response to user interaction <em>without JavaScript</em>. Where previously we have used JavaScript to toggle classes or attributes (or to set styles directly), we can now pair <code>:has()</code> selectors with HTML’s native interactive elements.</p>
2971. <p>Supporting a color scheme preference, like “Dark Mode,” is a great use case. We can use a <code>&lt;select&gt;</code> element anywhere that toggles color schemes based on the selected <code>&lt;option&gt;</code> — no JavaScript needed, save for a sprinkle to save the user’s choice, which we’ll get to further in.</p>
2972. Respecting System Preferences
2973. <p>First, we’ll support a user’s system-wide color scheme preferences by adopting a “Light Mode”-first approach. In other words, we start with a light color scheme by default and swap it out for a dark color scheme for users who prefer it.</p>
2974. <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a> media feature detects the user’s system preference. Wrap “dark” styles in a <code>prefers-color-scheme: dark</code> media query.</p>
2975. <pre><code>selector {
2976.  /* light styles */
2977.  
2978.  @media (prefers-color-scheme: dark) {
2979.    /* dark styles */
2980.  }
2981. }
2982. </code></pre>
2983.  
2984. <p>Next, set the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme"><code>color-scheme</code></a> property to match the preferred color scheme. Setting <code>color-scheme: dark</code> switches the browser into its built-in dark mode, which includes a black default background, white default text, “dark” styles for scrollbars, and other elements that are difficult to target with CSS, and more. I’m using CSS variables to hint that the value is dynamic — and because I like the browser developer tools experience — but plain <code>color-scheme: light</code> and <code>color-scheme: dark</code> would work fine.</p>
2985. <pre><code>:root {
2986.  /* light styles here */
2987.  color-scheme: var(--color-scheme, light);
2988.  
2989.  /* system preference is "dark" */
2990.  @media (prefers-color-scheme: dark) {
2991.    --color-scheme: dark;
2992.    /* any additional dark styles here */
2993.  }
2994. }
2995. </code></pre>
2996.  
2997. Giving Users Control
2998. <p>Now, to support <em>overriding</em> the system preference, let users choose between light (default) and dark color schemes at the page level.</p>
2999. <p>HTML has native elements for handling user interactions. Using one of those controls, rather than, say, a <code>&lt;div&gt;</code> nest, improves the chances that assistive tech users will have a good experience. I’ll use a <code>&lt;select&gt;</code> menu with options for “system,” “light,” and “dark.” A group of <code>&lt;input type="radio"&gt;</code> would work, too, if you wanted the options right on the surface instead of a dropdown menu.</p>
3000. <pre><code>&lt;select id="color-scheme"&gt;
3001.  <option value="system" selected>System</option>
3002.  <option value="light">Light</option>
3003.  <option value="dark">Dark</option>
3004. </select>
3005. </code></pre>
3006.  
3007. <p>Before CSS gained <code>:has()</code>, responding to the user’s selected <code>&lt;option&gt;</code> required JavaScript, for example, setting an event listener on the <code>&lt;select&gt;</code> to toggle a class or attribute on <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code>.</p>
3008. <p>But now that we have <code>:has()</code>, we can now do this with CSS alone! You’ll save spending any of your performance budget on a dark mode script, plus the control will work even for users who have disabled JavaScript. And any “no-JS” folks on the project will be satisfied.</p>
3009. <p>What we need is a selector that applies to the page when it <code>:has()</code> a <code>select</code> menu with a particular <code>[value]:checked</code>. Let’s translate that into CSS:</p>
3010. <pre><code>:root:has(select option[value="dark"]:checked)</code></pre>
3011.  
3012. <p>We’re defaulting to a light color scheme, so it’s enough to account for two possible dark color scheme scenarios:</p>
3013. <ol>
3014. <li>The page-level color preference is “system,” and the system-level preference is “dark.”</li>
3015. <li>The page-level color preference is “dark”.</li>
3016. </ol>
3017. <p>The first one is a page-preference-aware iteration of our <code>prefers-color-scheme: dark</code> case. A “dark” system-level preference is no longer enough to warrant dark styles; we need a “dark” system-level preference and a “follow the system-level preference” at the page-level preference. We’ll wrap the <code>prefers-color-scheme</code> media query dark scheme styles with the <code>:has()</code> selector we just wrote:</p>
3018. <div>
3019. <pre><code>:root {
3020.  /* light styles here */
3021.  color-scheme: var(--color-scheme, light);
3022.  
3023.  /* page preference is "system", and system preference is "dark" */
3024.  @media (prefers-color-scheme: dark) {
3025.    &:has(#color-scheme option[value="system"]:checked) {
3026.      --color-scheme: dark;
3027.      /* any additional dark styles, again */
3028.    }
3029.  }
3030. }
3031. </code></pre>
3032. </div>
3033.  
3034. <p>Notice that I’m using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector">CSS Nesting</a> in that last snippet. <a href="https://github.com/web-platform-dx/web-features/blob/main/docs/baseline.md">Baseline 2023</a> has it pegged as “Newly available across major browsers” which means support is good, but at the time of writing, support on Android browsers not included in <a href="https://github.com/web-platform-dx/web-features/blob/main/docs/baseline.md#core-browser-set">Baseline’s core browser set</a> is <a href="https://caniuse.com/css-nesting">limited</a>. You can get the same result without nesting.</p>
3035. <div>
3036. <pre><code>:root {
3037.  /* light styles */
3038.  color-scheme: var(--color-scheme, light);
3039.  
3040.  /* page preference is "dark" */
3041.  &:has(#color-scheme option[value="dark"]:checked) {
3042.    --color-scheme: dark;
3043.    /* any additional dark styles */
3044.  }
3045. }
3046. </code></pre>
3047. </div>
3048.  
3049. <p>For the second dark mode scenario, we’ll use nearly the exact same <code>:has()</code> selector as we did for the first scenario, this time checking whether the “dark” option — rather than the “system” option — is selected:</p>
3050. <div>
3051. <pre><code>:root {
3052.  /* light styles */
3053.  color-scheme: var(--color-scheme, light);
3054.  
3055.  /* page preference is "dark" */
3056.  &:has(#color-scheme option[value="dark"]:checked) {
3057.    --color-scheme: dark;
3058.    /* any additional dark styles */
3059.  }
3060.  
3061.  /* page preference is "system", and system preference is "dark" */
3062.  @media (prefers-color-scheme: dark) {
3063.    &:has(#color-scheme option[value="system"]:checked) {
3064.      --color-scheme: dark;
3065.      /* any additional dark styles, again */
3066.    }
3067.  }
3068. }
3069. </code></pre>
3070. </div>
3071.  
3072. <p>Now the page’s styles respond to both changes in users’ system settings <em>and</em> user interaction with the page’s color preference UI — all with CSS!</p>
3073. <p>But the colors change <em>instantly</em>. Let’s smooth the transition.</p>
3074. Respecting Motion Preferences
3075. <p>Instantaneous style changes can feel inelegant in some cases, and this is one of them. So, let’s apply a CSS transition on the <code>:root</code> to “ease” the switch between color schemes. (Transition styles at the <code>:root</code> will cascade down to the rest of the page, which may necessitate adding <code>transition: none</code> or other transition overrides.)</p>
3076. <p>Note that the CSS <code>color-scheme</code> property does not support transitions.</p>
3077. <div>
3078. <pre><code>:root {
3079.  transition-duration: 200ms;
3080.  transition-property: /* properties changed by your light/dark styles */;
3081. }
3082. </code></pre>
3083. </div>
3084.  
3085. <p>Not all users will consider the addition of a transition a welcome improvement. Querying the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code></a> media feature allows us to account for a user’s motion preferences. If the value is set to <code>reduce</code>, then we remove the <code>transition-duration</code> to eliminate unwanted motion.</p>
3086. <div>
3087. <pre><code>:root {
3088.  transition-duration: 200ms;
3089.  transition-property: /* properties changed by your light/dark styles */;
3090.  
3091.  @media screen and (prefers-reduced-motion: reduce) {
3092.    transition-duration: none;
3093.  }
3094. }
3095. </code></pre>
3096. </div>
3097.  
3098. <p>Transitions can also produce poor user experiences on devices that render changes slowly, for example, ones with e-ink screens. We can extend our “no motion condition” media query to account for that with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/update"><code>update</code></a> media feature. If its value is <code>slow</code>, then we remove the <code>transition-duration</code>.</p>
3099. <div>
3100. <pre><code>:root {
3101.  transition-duration: 200ms;
3102.  transition-property: /* properties changed by your light/dark styles */;
3103.  
3104.  @media screen and (prefers-reduced-motion: reduce), (update: slow) {
3105.    transition-duration: 0s;
3106.  }
3107. }
3108. </code></pre>
3109. </div>
3110.  
3111. <p>Let’s try out what we have so far in the following demo. Notice that, to work around <code>color-scheme</code>’s lack of transition support, I’ve explicitly styled the properties that should transition during theme changes.</p>
3112. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/YzMVQja">CSS-only theme switcher (requires :has()) [forked]</a> by <a href="https://codepen.io/henry">Henry</a>.</p>
3113. <p>Not bad! But what happens if the user refreshes the pages or navigates to another page? The reload effectively wipes out the user’s form selection, forcing the user to re-make the selection. That may be acceptable in some contexts, but it’s likely to go against user expectations. Let’s bring in JavaScript for a touch of progressive enhancement in the form of…</p>
3114. Persistence
3115. <p>Here’s a vanilla JavaScript implementation. It’s a naive starting point — the functions and variables aren’t encapsulated but are instead properties on <code>window</code>. You’ll want to adapt this in a way that fits your site’s conventions, framework, library, and so on.</p>
3116. <p>When the user changes the color scheme from the <code>&lt;select&gt;</code> menu, we’ll store the selected <code>&lt;option&gt;</code> value in a new <code>localStorage</code> item called <code>"preferredColorScheme"</code>. On subsequent page loads, we’ll check <code>localStorage</code> for the <code>"preferredColorScheme"</code> item. If it exists, and if its value corresponds to one of the form control options, we restore the user’s preference by programmatically updating the menu selection.</p>
3117. <div>
3118. <pre><code>/*
3119. * If a color scheme preference was previously stored,
3120. * select the corresponding option in the color scheme preference UI
3121. * unless it is already selected.
3122. */
3123. function restoreColorSchemePreference() {
3124.  const colorScheme = localStorage.getItem(colorSchemeStorageItemName);
3125.  
3126.  if (!colorScheme) {
3127.    // There is no stored preference to restore
3128.    return;
3129.  }
3130.  
3131.  const option = colorSchemeSelectorEl.querySelector(<code>[value=${colorScheme}]</code>);<br />
3132.  if (!option) {
3133.    // The stored preference has no corresponding option in the UI.
3134.    localStorage.removeItem(colorSchemeStorageItemName);
3135.    return;
3136.  }
3137.  
3138.  if (option.selected) {<br />    // The stored preference's corresponding menu option is already selected
3139.    return;
3140.  }
3141.  
3142.  option.selected = true;
3143. }
3144.  
3145. /*
3146. * Store an event target's value in localStorage under colorSchemeStorageItemName
3147. */
3148. function storeColorSchemePreference({ target }) {
3149.  const colorScheme = target.querySelector(":checked").value;
3150.  localStorage.setItem(colorSchemeStorageItemName, colorScheme);
3151. }
3152.  
3153. // The name under which the user's color scheme preference will be stored.
3154. const colorSchemeStorageItemName = "preferredColorScheme";
3155.  
3156. // The color scheme preference front-end UI.
3157. const colorSchemeSelectorEl = document.querySelector("#color-scheme");
3158.  
3159. if (colorSchemeSelectorEl) {
3160.  restoreColorSchemePreference();
3161.  
3162.  // When the user changes their color scheme preference via the UI,
3163.  // store the new preference.
3164.  colorSchemeSelectorEl.addEventListener("input", storeColorSchemePreference);
3165. }
3166. </code></pre>
3167. </div>
3168.  
3169. <p>Let’s try that out. Open this demo (perhaps in a new window), use the menu to change the color scheme, and then refresh the page to see your preference persist:</p>
3170. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/GRLmEXX">CSS-only theme switcher (requires :has()) with JS persistence [forked]</a> by <a href="https://codepen.io/henry">Henry</a>.</p>
3171. <p>If your system color scheme preference is “light” and you set the demo’s color scheme to “dark,” you may get the light mode styles for a moment immediately after reloading the page before the dark mode styles kick in. That’s because CodePen loads its own JavaScript before the demo’s scripts. That is out of my control, but you can take care to improve this persistence on your projects.</p>
3172. Persistence Performance Considerations
3173. <p>Where things can get tricky is restoring the user’s preference <em>immediately</em> after the page loads. If the color scheme preference in <code>localStorage</code> is different from the user’s system-level color scheme preference, it’s possible the user will see the system preference color scheme before the page-level preference is restored. (Users who have selected the “System” option will never get that flash; neither will those whose system settings match their selected option in the form control.)</p>
3174. <p>If your implementation is showing a <a href="https://css-tricks.com/flash-of-inaccurate-color-theme-fart/">“flash of inaccurate color theme”</a>, where is the problem happening? Generally speaking, the earlier the scripts appear on the page, the lower the risk. The “best option” for you will depend on your specific stack, of course.</p>
3175. What About Browsers That Don’t Support <code>:has()</code>?
3176. <p><a href="https://caniuse.com/css-has">All major browsers support <code>:has()</code> today</a> Lean into modern platforms if you can. But if you do need to consider legacy browsers, like Internet Explorer, there are two directions you can go: either hide or remove the color scheme picker for those browsers or make heavier use of JavaScript.</p>
3177. <p>If you consider color scheme support itself a progressive enhancement, you can entirely hide the selection UI in browsers that don’t support <code>:has()</code>:</p>
3178. <pre><code>@supports not selector(:has(body)) {
3179.  @media (prefers-color-scheme: dark) {
3180.    :root {
3181.      /* dark styles here */
3182.    }
3183.  }
3184.  
3185.  #color-scheme {
3186.    display: none;
3187.  }
3188. }
3189. </code></pre>
3190.  
3191. <p>Otherwise, you’ll need to rely on a JavaScript solution not only for persistence but for the core functionality. Go back to that traditional event listener toggling a class or attribute.</p>
3192. <p>The CSS-Tricks “<a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/">Complete Guide to Dark Mode</a>” details several alternative approaches that you might consider as well when working on the legacy side of things.</p>
3193. ]]></content:encoded>
3194.            <author>hello@smashingmagazine.com (Henry Bley-Vroman)</author>
3195.            <enclosure url="http://files.smashing.media/articles/setting-persisting-color-scheme-preferences-css-javascript/setting-persisting-color-scheme-preferences-css-javascript.jpg" length="0" type="image/jpg"/>
3196.        </item>
3197.        <item>
3198.            <title><![CDATA[Crafting Experiences: Uniting Rikyu’s Wisdom With Brand Experience Principles]]></title>
3199.            <link>https://smashingmagazine.com/2024/03/uniting-rikyu-wisdom-brand-experience-principles/</link>
3200.            <guid>https://smashingmagazine.com/2024/03/uniting-rikyu-wisdom-brand-experience-principles/</guid>
3201.            <pubDate>Thu, 21 Mar 2024 15:00:00 GMT</pubDate>
3202.            <description><![CDATA[Whether digital or physical, designing a customer touchpoint requires an understanding of the essential relationship between the brand and the user experience, which is also known as the **brand experience.** This article is a simple guide to building long-lasting customer relationships based on the seven rules of Rikyu in the Japanese tea ceremony for a creative and memorable twist.]]></description>
3203.            <content:encoded><![CDATA[<p>In today’s dynamic and highly competitive market, the concept of brand experience is a key aspect of customer engagement: designers, take note.</p>
3204. <p><strong>Brand experience</strong> refers to all customer interactions and engagements with a brand, encompassing various brand channels, products, services, and encounters from the company website to unpacking its product. It involves following the user each time she comes into contact with the brand and ensuring that her experience is consistent and pleasant.</p>
3205. <p>Beyond merely designing products or services, the designers or design team (along with the marketing department) must strive to create memorable, emotional, and immersive interactions with their customers. A <strong>compelling brand experience</strong> attracts and retains customers while reinforcing the brand promise. </p>
3206. <p>Achieving this goal can be daunting but not impossible as long as designers follow specific principles. Recently, I attended a tea ceremony in the Japanese city of Kyoto, where I was introduced to Rikyu’s timeless wisdom. With fascination, I saw that such wisdom and insight could be applied to the principles of a compelling brand experience in the following ways.</p>
3207. The Japanese Tea Ceremony, According to Tea Master Rikyu
3208. <p>The seven principles of Rikyu were developed by Sen no Rikyu, a revered tea master of the 16th century. Each principle encapsulates the essence of the Japanese tea ceremony, emphasizing not only the preparation of tea but also the creation of a harmonious, meaningful experience.</p>
3209. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png" /></p>
3210. <p>During my own captivating tea ceremony experience, I gained valuable insights and a fresh perspective on how designers can help create meaningful connections between brands and their audiences, much as the tea ceremony has done for generations.</p>
3211. Rule One: Making a Satisfying Bowl of Tea
3212. <p>The first principle of Rikyu goes right to the heart of the tea ceremony: preparing a satisfying bowl of tea.</p>
3213. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png" /></p>
3214. <p>This deceptively simple principle reminds designers that everything we design for a brand should be able to provide a memorable experience for the final user. We should aim to go beyond simple brand and customer transactions and instead focus on crafting experiences through products and services.</p>
3215. <p><strong>Examples</strong>:</p>
3216. <ul>
3217. <li>Airbnb,</li>
3218. <li>Duolingo.</li>
3219. </ul>
3220. <p>Both of them facilitate extraordinary experiences beyond the basic user interaction of “rent a house for my trip” and “learn a foreign language.”</p>
3221. <h3>Airbnb: Redefining Travel Through Experience</h3>
3222. <p>Compared to competitors like Booking.com, Airbnb has completely redefined the experience of travelling, adding a strong storytelling aspect.</p>
3223. <p>From the beginning, the brand has offered a way for travelers to truly immerse themselves in the culture and lifestyle of their destinations.</p>
3224. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png" /></p>
3225. <p>Today, Airbnb’s website shows the brand offering the possibility of “living” in an extraordinary place, from cozy apartments to extravagant castles. We can see that their brand isn’t just about finding the right accommodation but also about <strong>creating enduring memories and stories</strong>.</p>
3226. <p>Their services have been significantly updated in recent years, offering customers great flexibility to book in total safety from qualified hosts (called Superhosts) with homes that have been reviewed and reflect Airbnb quality standards.</p>
3227. <p><strong>Takeaway:</strong> Aim to create experiences that stay with people long after they have interacted with your brand.</p>
3228. <h3>Duolingo: Language-Learning as a Playful Adventure</h3>
3229. <p>Language learning is often considered a daunting task, one that pushes us out of our comfort zones. But Duolingo, with its playful and gamified approach, is changing that perception.</p>
3230. <p>Their app has transformed language learning into a delightful adventure that anyone can join, even for just five minutes a day.</p>
3231. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png" /></p>
3232. <p>By creating characters that team up with Duo (the owl mascot), Duolingo injects a <strong>sense of companionship and relatability</strong> into language learning, making it feel like taking a journey alongside a helpful friend.</p>
3233. <p><strong>Takeaway:</strong> Break down complex tasks into enjoyable, bite-sized experiences that improve the long-term experience.</p>
3234. Rule Two: Efficiently Laying the Charcoal for Boiling Water
3235. <p>As I took my place in the tea room, just opposite the tea master, he explained that charcoal plays an extremely important role in the ceremony. It must be precisely placed to encourage airflow, prevent the fire from extinguishing prematurely, and prepare tea at the perfect temperature.</p>
3236. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png" /></p>
3237. <p>For designers, this translates into creating a comprehensive set of guidelines and rules that dictate how every brand element should look, feel, and behave.</p>
3238. <p>Much like the precise arrangement of charcoal, a <strong>well-designed brand system is the foundation of consistent and efficient brand representation</strong> that ensures harmony and coherence across every touchpoint.</p>
3239. <p>This may seem obvious, but it is only in the last decade that technology companies have started creating elaborate and complete brand guidelines.</p>
3240. <p><strong>Examples</strong>:</p>
3241. <ul>
3242. <li>IBM,</li>
3243. <li>Atlassian.</li>
3244. </ul>
3245. <h3>IBM: Consistency Breeds Loyalty and Recognisability</h3>
3246. <p>When we think about the connection between brand and technology, it’s natural to think immediately of Apple and Steve Jobs. So you could be surprised that in fact, IBM was one of the first tech companies to hire a professional graphic designer.</p>
3247. <p>Acclaimed graphic designer Paul Rand designed the iconic IBM logo in 1956. The collaboration between Paul Rand and the company went on for many years, becoming a benchmark for the integration of design principles into the corporate identity of a tech company.</p>
3248. <p>Even today, <a href="https://carbondesignsystem.com/">IBM’s design system Carbon</a> is a testament to the power of simplicity and consistency. Focusing on clarity and functionality, IBM’s brand elements work seamlessly across a diverse range of products and services, including events and workplaces. The Carbon design system is also open source, meaning anyone can contribute to improving it.</p>
3249. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png" /></p>
3250. <p><strong>Takeaway:</strong> A consistent and well-designed brand identity allows for organic growth and expansion without diluting the brand, reinforcing brand loyalty and recognition.</p>
3251. <h3>Atlassian: Guiding Future Decisions</h3>
3252. <p>Atlassian is a software company with a diverse product portfolio. Their <a href="https://atlassian.design">design system</a> promotes <strong>scalability and flexibility</strong>, while their brand elements are designed to adapt harmoniously across various Atlassian applications.</p>
3253. <p>This adaptability ensures a unified brand experience while accommodating the unique characteristics of each product. It serves as a compass, helping designers navigate the vast landscape of possibilities and ensuring that each design decision made for each Atlassian product aligns with the brand’s essence.</p>
3254. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png" /></p>
3255. <p><strong>Takeaway:</strong> A strong design foundation serves as an invaluable guide as brands evolve and expand their offering through more different products and services.</p>
3256. Rule 3: Providing Warmth in Winter and Coolness in Summer
3257. <p>In the art of the Japanese tea ceremony, the provision of warmth in winter and coolness in summer is a delicate balance, attuned to the emotional and physical states of the participants. This is well-reflected in the tea room’s decoration, and the tea served, depending on the hour and the season, in a bowl chosen by the tea master.</p>
3258. <p>When I attended the tea ceremony, the room was decorated to reflect the spring season. The sweet was also inspired by the blooming cherry blossoms, which were pink and light green. The door to the garden was left open so that we could appreciate the scent of fresh blossoms in the gentle spring breeze.</p>
3259. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png" /></p>
3260. <p>In the design world, this rule translates into the profound understanding and adaptation of experiences to align with customers’ ever-changing needs and emotional states throughout their journey.</p>
3261. <p>Understanding the natural flow of emotions during the user journey allows brands to create responsive experiences that feel personal.</p>
3262. <p><strong>Examples</strong>:</p>
3263. <ul>
3264. <li>Nike,</li>
3265. <li>Netflix.</li>
3266. </ul>
3267. <h3>Nike: Versatility in Style and Experience</h3>
3268. <p>Nike, better than any other brand leader in sportswear, exemplifies mastery in tailoring brand experiences.</p>
3269. <p>The brand recognizes that customers engage with their products across diverse activities.</p>
3270. <p>For this reason, Nike offers a wide range of products, sometimes presented with mini-websites and beautiful campaigns, each with its own distinct style and purpose.</p>
3271. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png" /></p>
3272. <p><strong>Takeaway:</strong> By catering to their users’ varied tastes and needs, brands can tailor experiences to individual preferences and emotions, fostering a deeper connection and resonance.</p>
3273. <h3>Netflix: Personalised Home Entertainment</h3>
3274. <p>Netflix has deftly pioneered the use of advanced algorithms and artificial intelligence to tailor its content recommendations. These are not only based on geographic location but individual user preferences.</p>
3275. <p>The platform dynamically adjusts preview images and trailers, aiming to match each user’s unique taste.</p>
3276. <p>Their latest update includes <a href="https://netflixtechblog.com/the-next-step-in-personalization-dynamic-sizzles-4dc4ce2011ef"><em>Dynamic Sizzle Reel</em></a>, short personalized clips of upcoming shows that offer each member a unique and effective experience.</p>
3277. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png" /></p>
3278. <p>It is worth noting, however, that while Netflix puts effort into yielding greater engagement and enjoyment for their members, the subjective nature of taste can sometimes lead to surprises, where a preview may align perfectly with an individual user’s taste, yet the show itself varies in style.</p>
3279. <p><strong>Takeaway:</strong> When customizing experiences, designers should create an interplay between familiarity and novelty, tailoring content to individual tastes while respecting the user’s need for both comfort and discovery.</p>
3280. Rule 4: Arranging Flowers as Though They Were in the Field
3281. <p>As I stepped into the tea room, there was a sense of harmony and tranquillity infused by nature forming part of the interior environment.</p>
3282. <p>The flowers were meticulously arranged in a pot as though plucked directly from the field at that very moment. According to Rikyu’s principles, their composition should be an ode to nature’s simplicity and authenticity.</p>
3283. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png" /></p>
3284. <p>For designers, this rule echoes the importance of using aesthetics to create a visually captivating brand experience that authentically reflects the brand’s values and mission.</p>
3285. <p>The aesthetic choices in design can convey a brand’s essence, creating a harmonious and truthful representation of the brand and its services.</p>
3286. <p>It is important to remember, however, that a visually appealing brand experience is not just about aesthetics alone, but using them to create an <strong>emotional and truthful connection</strong> with the audience.</p>
3287. <p><strong>Examples</strong>:</p>
3288. <ul>
3289. <li>Kerrygold,</li>
3290. <li>WWF.</li>
3291. </ul>
3292. <h3>Kerrygold: Forging Memorable Narratives</h3>
3293. <p>The <a href="https://www.themagicalpantry.com/">Kerrygold “Magic Pantry”</a> website is testament to the art of visual storytelling, following the brand’s mission to spread authentic Irish recipes and stories from Ireland and its farms.</p>
3294. <p>Through a captivating storytelling game, users explore a recipe or storybook, pick a favorite dish based on their meal, and choose their assistant.</p>
3295. <p>In a perfect story fashion, with a good amount of personalization, users then learn how to cook their chosen recipes using Kerrygold products.</p>
3296. <p>This immersive experience showcases the excellence of Kerrygold’s products and conveys the brand’s commitment to quality and authenticity, while the storybook confers the idea of passing family traditions across the world (so common in the past!)</p>
3297. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png" /></p>
3298. <p><strong>Takeaway:</strong> Through visuals, designers need to be authentic, reflecting the truth about the brand. This truthfulness enhances the credibility of the brand’s narrative and establishes deeper user connections.</p>
3299. <h3>WWF: Enhancing Memorability Through Beauty and Truth</h3>
3300. <p>WWF employs visual storytelling to raise awareness about environmental issues and species in danger of extinction. Their campaign websites always present a beautiful and immersive visual journey that authentically communicates the urgency of their mission.</p>
3301. <p>While these two websites are grounded in the universal act of eating, WWF prompts users to reflect on their habits’ profound impact on the environment.</p>
3302. <p>Both websites ingeniously guide users to think about food consumption in more detail, fostering a journey toward mindful eating that respects both species and the environment.</p>
3303. <p>The websites adopt a quiz-like approach for users to reflect on and reassess their food consumption patterns, fostering a journey toward mindful eating that respects both species and the environment.</p>
3304. <p>Beyond individual insights, the interactive nature of these platforms encourages users to extend their newfound knowledge to their friends, amplifying awareness of crucial topics such as food consumption, CO2 emissions, and sustainable alternatives.</p>
3305. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png" /></p>
3306. <p><strong>Takeaway:</strong> By infusing elements of discovery and self-reflection, designers can help brands promote their values and missions while empowering their users to become ambassadors for change.</p>
3307. Rule 5: Being Ready Ahead of Time
3308. <p>In the Japanese tea ceremony, Rule 5 of Rikyu’s principles places emphasis on the seamless art of preparation, ensuring that everything is ready for the guests.</p>
3309. <p>For their part, guests are expected to arrive on time for their appointment and be mindfully prepared to attend the ceremony.</p>
3310. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png" /></p>
3311. <p>Designers should note that this principle underscores the significance of foresight, careful planning, and meticulous attention — both to detail and the user’s time.</p>
3312. <p>For brands, being ready ahead of time is paramount for delivering a seamless and exceptional customer experience.</p>
3313. <p>By proactively addressing customer needs and meticulously planning every touchpoint, designers can create a seamless and memorable brand experience that fosters customer satisfaction and loyalty by respecting the value of time.</p>
3314. <p><strong>Examples</strong>:</p>
3315. <ul>
3316. <li>IKEA,</li>
3317. <li>Amazon.</li>
3318. </ul>
3319. <h3>IKEA: Anticipating Customer Expectations</h3>
3320. <p>IKEA, the global furniture and home goods giant, is a brand that, since the beginning, has used its vast warehouse store layout to anticipate and plan customers’ needs — even the unconscious ones. In fact, you could well be among those shoppers who plan to buy just a few items but leave the store with a trolley full of things they never knew they needed!</p>
3321. <p>When customers enter an IKEA store, they encounter a meticulously planned and organized environment designed as a circular one-way system.</p>
3322. <p>This specific layout of the IKEA store creates a sense of discovery. It encourages shoppers to keep walking through the different departments effortlessly, anticipating or projecting needs that they may have been unaware of before they entered.</p>
3323. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png" /></p>
3324. <p><strong>Takeaway:</strong> Brands should harness the creative ability to tap into customers’ subconscious minds through environment and product display in a way that exceeds their expectations.</p>
3325. <h3>Amazon: A Ready-to-go Shopping Experience</h3>
3326. <p>Amazon understands that their customers’ time is valuable, creating seamless online and offline experiences that streamline the shopping experience. Their unique systems strive to avoid inconveniences and provide a quick, ready-to-go shopping experience.</p>
3327. <p>For example, their patented one-click ordering system simplifies the checkout process, reducing friction by saving users the trouble of manually selecting or entering settings (like address and payment methods) that are used repeatedly.</p>
3328. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png" /></p>
3329. <p>Meanwhile, the brick-and-mortar Amazon Go stores exemplify innovation, offering a shopping experience where customers can grab items and go without waiting in line.</p>
3330. <p>These stores work by using the same types of technologies found in self-driving cars, such as computer vision, sensor fusion, and deep learning.</p>
3331. <p>This technology can detect when products are taken or returned to the shelves, tracking them in the customer’s virtual cart. When customers leave the store with their goods, their Amazon account is charged, and a receipt is sent.</p>
3332. <p><em>Please note: Even though Amazon recently announced the closure of some of its physical shops, the experience remains an example of innovative and efficient shopping methods.</em></p>
3333. <p><strong>Takeaways:</strong> Ingrain the art of preparation by utilizing advanced technologies in the brand’s operational philosophy to avoid inconvenience and provide an effortless customer experience.</p>
3334. Rule 6: Being Prepared in Case It Should Rain
3335. <p>In the context of the Japanese tea ceremony, being prepared for rain means being prepared for unexpected challenges.</p>
3336. <p>According to Rikyu, when having tea, the host must be intentionally calm and ready to accommodate any situation that arises. Of course, this doesn’t just apply to changes in the weather!</p>
3337. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png" /></p>
3338. <p>For designers crafting brand experiences, this principle underscores the importance of building <strong>resilience and adaptability</strong> into the core of their strategies.</p>
3339. <p><strong>Examples</strong>:</p>
3340. <ul>
3341. <li>Zoom,</li>
3342. <li>Lego.</li>
3343. </ul>
3344. <h3>Zoom: Pioneering Remote Communication</h3>
3345. <p>Zoom was mostly used for business meetings before the Covid-19 pandemic struck. When it did, it forced most companies to digitize far more quickly than they otherwise would have done.</p>
3346. <p>Zoom stepped up, improving its features so that everyone, from children to their baby boomer grandparents, found the user interface seamless and easy when connecting from their homes.</p>
3347. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png" /></p>
3348. <p>One of the most exciting business decisions taken by Zoom was to turn their Freemium tier wholly free and unlimited for K-12 students. This decision was taken during the early stages of the pandemic (March 2020) demonstrating empathy with the challenges faced by K-12 educational institutions.</p>
3349. <p>The program significantly impacted schools, teachers, and students. It allowed for more collaborative and engaging virtual classrooms, thanks to features like Groups and useful interactions like whiteboards, raising hands, and replying with emojis.</p>
3350. <p>As schools gradually returned to in-person learning and adapted to hybrid models, the free program ended. However, the positive impact of Zoom’s support during a critical period underlined the company’s adaptability and responsiveness to societal needs.</p>
3351. <p><strong>Takeaway:</strong> Designers should prioritize creating intuitive interfaces and scalable infrastructure that can accommodate surges in demand whilst also considering the impact on society.</p>
3352. <h3>Lego: Rebuilding From The Bricks Up</h3>
3353. <p>Without continuous adaptability and recognition of the ever-changing landscape of play, even a historic brand like Lego may have closed its doors!</p>
3354. <p>In fact, if you are a Lego fan, you may have noticed that the brand underwent a profound change in the early 2000s.</p>
3355. <p>In 1998, Lego launched an educational initiative known as Lego Mindstorm. This project used Lego’s signature plastic bricks to teach children how to construct and program robots — an innovative concept at the time since Arduino had not yet been introduced.</p>
3356. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png" /></p>
3357. <p>Lego’s decision to merge traditional play with technology demonstrated their dedication to keeping up with the digital age. Additionally, Lego Mindstorm appealed to a new audience: the broader open-source hardware and DIY electronics community that emerged during the period (and who, in 2005, found a better match in Arduino).</p>
3358. <p><em>Please note: Even though the program is set to be discontinued by 2024, Lego’s resurgence is often cited as one of the most successful corporate turnarounds.</em></p>
3359. <p>Lego still continues to thrive, expanding its product lines, collaborating with popular franchises, and maintaining its status as a beloved brand among children and adults alike.</p>
3360. <p><strong>Takeaway:</strong> Designers can adapt to change by refocusing on the brand’s core strengths, embracing digital innovation and new targets to exemplify resilience in the face of challenges.</p>
3361. Rule 7: Acting with Utmost Consideration Towards Your Guests
3362. <p>During the tea ceremony in Kyoto, I perceived in every gesture the perfect level of attention to detail, including my response to the tasting and the experience as a whole. I felt the impact of my experience from the moment I entered until long after I left the tea room, even as I write about it now.</p>
3363. <p>This rule highlights the importance of <strong>intuitive hospitality</strong> and involves creating an environment in which guests feel welcomed, valued, and respected.</p>
3364. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png" /></p>
3365. <p>For designers, this means facilitating brand experiences that put customer satisfaction first and aim to build strong and lasting relationships.</p>
3366. <p>Brands that excel in this rule go above and beyond to provide uniquely personalized experiences that foster long-term loyalty.</p>
3367. <p><strong>Examples</strong>:</p>
3368. <ul>
3369. <li>Stardust App,</li>
3370. <li>Tony’s Chocolonely.</li>
3371. </ul>
3372. <h3>Stardust App: Empowering Women’s Health with Privacy and Compassion</h3>
3373. <p><strong>Stardust</strong> is an astrology-based menstrual cycle-tracking app that debuted in the Apple Store. It became the most downloaded iPhone app in late June after the U.S. Supreme Court struck down Roe v. Wade (which ended the constitutional right to an abortion and instantly made abortion care illegal in more than a dozen states).</p>
3374. <p>In a world where tracking apps often lack sensitivity, Stardust App emerges with an elegant interface that makes monitoring women’s health a visually pleasing experience. But beyond aesthetics, what really sets Stardust apart is its witty and humorous tone of voice.</p>
3375. <p>Acknowledging the nuances of mood swings and pains associated with periods, Stardust’s notification messages and in-app descriptions resonate with women, adding a delightful touch to a typically challenging time.</p>
3376. <p>This blend of sophistication and humor creates a unique and supportive space for women’s wellness.</p>
3377. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png" /></p>
3378. <blockquote><strong>Note:</strong><br /><br />The female-founded app underwent scrutiny from TechCrunch, Vice, and Screen Rant, which questioned their collaboration with third parties and its safety. So on October 29th, 2022, they released a more precise and comprehensive Privacy Policy that explains in a readable way how third parties are used and how the end-to-end encryption works.<br /><br />They also ensured that all sessions were anonymous so that the app would not be able to associate data with users in case of law enforcement.</blockquote>
3379.  
3380. <p><strong>Takeaway:</strong> Design a brand experience with utmost consideration toward users and that transcends the transactional to foster an enduring sense of trust, empathy, and loyalty.</p>
3381. <h3>Tony’s Chocolonely: Sweet Indulgence and Ethical Excellence</h3>
3382. <p>In their commitment to fair trade, Tony’s Chocolonely exemplifies acting with utmost consideration towards both consumers and the environment beyond merely offering delicious chocolate.</p>
3383. <p>More specifically, Tony’s Chocolonely has redefined the chocolate industry by championing fair-trade practices. By introducing a sustainable business model, not only do they satisfy the cravings of chocolate enthusiasts, but they also address the broader demand for ethically sourced and produced chocolate.</p>
3384. <p>In every detail, from the wrapper to the chocolate bar itself, Tony’s Chocolonely is a brand on a mission. The intentional unevenness of their chocolate bar is a profound symbol, mirroring the uneven and unjust landscape of the chocolate industry. This urges consumers to choose fairness, ethical sourcing, and a commitment to change.</p>
3385. <p><img src="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png" /></p>
3386. <p><strong>Takeaway:</strong> Designers can elevate brand experiences by integrating thoughtful and personalized elements that speak to their industry and resonate with the values of their audience.</p>
3387. Conclusion
3388. <p>In the gentle and artistic practice of the Japanese tea ceremony, I discovered through Rikyu’s seven principles an illuminated path of consideration that resonates beyond the tea room, offering profound insights for crafting compelling brand experiences.</p>
3389. <p>Rikyu’s ancient wisdom serves as a timeless guide, reminding us that <strong>creating a memorable experience is a balanced dance between intention and harmony</strong> and, above all, the valuable attention of those we invite into our brand spaces as welcome guests.</p>
3390. ]]></content:encoded>
3391.            <author>hello@smashingmagazine.com (Chiara Aliotta)</author>
3392.            <enclosure url="http://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/uniting-rikyu-wisdom-brand-experience-principles.jpg" length="0" type="image/jpg"/>
3393.        </item>
3394.        <item>
3395.            <title><![CDATA[Now Shipping: Success At Scale, A New Smashing Book by Addy Osmani]]></title>
3396.            <link>https://smashingmagazine.com/2024/03/success-at-scale-book-release/</link>
3397.            <guid>https://smashingmagazine.com/2024/03/success-at-scale-book-release/</guid>
3398.            <pubDate>Wed, 20 Mar 2024 11:00:00 GMT</pubDate>
3399.            <description><![CDATA[It’s here, and it’s shipping! Meet our newest Smashing book, <a href="#about-the-book">”Success at Scale”</a>. It’s filled with practical insights and real-world case studies of <strong>how big changes can be made on projects of any size</strong>. Addy Osmani has curated finest examples, case studies and interviews to help you get successful at scale. <a href="https://www.smashingmagazine.com/2024/03/success-at-scale-book-release/#about-the-book">Jump to the details</a> and <a href="/printed-books/success-at-scale/" data-product-sku="success-at-scale" data-component="AddToCart" data-product-path="/printed-books/success-at-scale" data-silent="true">get the book right away.</a>]]></description>
3400.            <content:encoded><![CDATA[<p><strong>Building at scale is hard</strong>. With legacy, fragile systems, large impact and complex front-end architecture, making big changes to an existing site or app might feel nothing short of daunting. We might have a very motivated team, but we don't always know how to get there. Enter <em>Success at Scale</em>, our shiny new book that might just help you to <strong>get big changes to work in your company</strong>. <a href="#about-the-book">Jump to the details</a>.</p>
3401.  
3402. <p>Rather than focusing on conventional project management steps and procedures, <em>Success at Scale</em> is about the ideas and processes that worked — and a few that didn’t. This book captures the <strong>challenges, frustrations, and wins</strong> through the eyes of the people who make change happen. With a strong focus on performance, capabilities, accessibility, and developer experience. Just published, print + eBook, and shipping around the world! <a href="https://smashed.by/successatscalebooksampler">Get a PDF sample</a> (14.7MB), and <a href="/printed-books/success-at-scale/">get your book right away.</a>
3403.  
3404. </p>
3405.    <a href="https://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-22-opt.png">
3406.    <img src="https://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-22-opt.png" />
3407.    </a>
3408.  
3409.  
3410.  
3411.  
3412. <ul>
3413. <li><strong>ISBN</strong>:  978-3-910835-00-9 (print)</li>
3414. <li>Available in <strong>hardcover and eBook</strong> formats — PDF, ePUB, and Amazon Kindle.</li>
3415. <li>Hardcover edition comes with <strong>free worldwide airmail shipping</strong> from Germany.</li>
3416. <li><strong><a href="https://smashed.by/successatscalebooksampler">Download a free sample</a></strong> (PDF, 14.7MB).</li>
3417. <li><strong><a href="/printed-books/success-at-scale/">Get the book right away</a></strong></li>
3418. </ul>
3419.  
3420.  
3421. About The Book
3422.  
3423. <p><em>Success at Scale</em> is a curated collection of <strong>best-practice case studies</strong> capturing how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale. Case studies are from <strong>industry experts</strong> from teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify, Wix, Lyft, LinkedIn, and many more. Guidance that stands the test of time.</p>
3424.  
3425. <p>Join Addy Osmani, your curator, as we dive into a nuanced look at several key topics that will teach you tips and tricks that may help you optimize your own sites. The book also includes short interviews with contributors on what additional <strong>lessons, challenges, and tips</strong> they have to share some time after the case studies were written.</p>
3426.  
3427. <ul>
3428. <li><strong>Performance</strong> includes examples of measuring, budgeting, optimizing, and monitoring performance, in addition to tips for building a performance culture.</li>
3429. <li><strong>Capabilities</strong> is about bridging the gap between native capabilities and the modern web. You’ll explore web apps, native apps, and progressive web applications.</li>
3430. <li><strong>Accessibility</strong> makes web apps viable for diverse users, including people with temporary or permanent disabilities. Most of us will have a disability at some point in our lives, and these case studies show how we can make the web work for all of us.</li>
3431. <li><strong>Developer Experience</strong> is about building a project environment and culture that encourage support, growth, and problem-solving within teams. Strong teams build great projects!</li>
3432. </ul>
3433.  
3434. <p><strong>High-quality hardcover</strong>, 304-page print book. Curated by Addy Osmani. Cover design by Espen Brunborg.</p>
3435.  
3436.  
3437.  
3438.    <a href="https://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-40-opt.png">
3439.    <img src="https://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-40-opt.png" />
3440.    </a>The book is full of real-world case studies, interviews, examples, and results.  (<a href="https://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-40-opt.png">Large preview</a>)
3441.  
3442.  
3443.  
3444.    <a href="https://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-19-opt.png">
3445.    <img src="https://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-19-opt.png" />
3446.    </a>The book is divided into four clear sections: performance, capabilities, accessibility, and developer experience. There’s even an attached ribbon bookmark to help you save your place! (<a href="https://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-19-opt.png">Large preview</a>)
3447.  
3448.  
3449.  
3450.  
3451. Who Is This Book For?
3452.  
3453. <p>This book is for professional web developers and teams who want to deliver high-quality web experiences and are <strong>looking for real-world examples and insights</strong>. Every project is different, but in this book, you will recognize common challenges and frustrations faced by many teams — maybe even your own — and see how other developers conquered them. <em>Success at Scale</em> goes <strong>beyond beginner material</strong> to cover pragmatic approaches required to tackle these projects in the real world.</p>
3454.  
3455.  
3456. About the Author
3457.  
3458. <p><a href="https://twitter.com/addyosmani"><img src="https://files.smashing.media/authors/addy-osmani-success-at-scale.jpg" /></a><em>Addy Osmani</em> is an engineering leader working on Google Chrome. He leads up Chrome’s Developer Experience organization, helping reduce the friction for developers to build great user experiences.</p>
3459.  
3460. Testimonials
3461.  
3462. <blockquote><img src="https://files.smashing.media/articles/success-at-scale-book-release/umar-hansa-opt.png" />“Case studies based on real-world examples are a fantastic way to learn, and Addy Osmani has captured that perfectly in this book. The interviews are compelling and connect with actionable guidance you can get started with right away. Addy has a wealth of experience working with end-users, developers, and companies to understand what exactly makes for a successful web experience. As a result, <em>Success At Scale</em> is a treasure trove of wisdom and practical advice. Get this book if you want to build more accessible, performant, and resilient websites.”<br /><br /> Umar Hansa, Web Developer</blockquote>
3463.  
3464. <blockquote><img src="https://files.smashing.media/articles/success-at-scale-shipping-soon/luca-mezzalira-opt.png" />“This book reveals in its pages the collective wisdom of frontend engineers working on global web projects. It’s the perfect way to enhance your web applications’ potential by optimizing performance with practical tips straight from the trenches.”<br /><br /> Luca Mezzalira, Principal Serverless Specialist Solutions Architect at Amazon Web Services (AWS) and O’Reilly author</blockquote>
3465.  
3466. <blockquote><img src="https://files.smashing.media/articles/success-at-scale-shipping-soon/jerome-hardaway-opt.png" /><em>Success at Scale</em>, masterfully curated by Addy Osmani, serves as an invaluable compass for the aspiring developers navigating the complex waters of web development. It’s more than a book; it’s a transmission of wisdom, guiding junior developers towards the shores of big tech companies. With its in-depth case studies and focus on performance, capabilities, accessibility, and developer experience, it prepares the next generation of tech talent to not just participate in, but to shape the future of digital innovation.”<br /><br /> Jerome Hardaway, Engineering AI products at Microsoft</blockquote>
3467.  
3468.  
3469.    <a href="https://www.smashingmagazine.com/printed-books/success-at-scale/">
3470.    <img src="https://files.smashing.media/articles/success-at-scale-book-release/success-at-scale-support-opt.png" />
3471.    </a>
3472.  
3473.  
3474.  
3475.  
3476.  
3477.  
3478. We’re Trying Out Something New
3479.  
3480. <p>In an effort to conserve resources here at Smashing, we’re trying something new with <em>Success at Scale</em>. The printed book is 304 pages, and we make an <strong>expanded PDF version available to everyone who purchases a print book</strong>. This accomplishes a few good things:</p>
3481.  
3482. <ul>
3483. <li>We will use <strong>less paper and materials</strong> because we are making a smaller printed book;</li>
3484. <li>We’ll use fewer resources in general to print, ship, and store the books, leading to a <strong>smaller carbon footprint</strong>; and</li>
3485. <li>Keeping the book at more manageable size means we can <strong>continue to offer free shipping</strong> on all Smashing orders!</li>
3486. </ul>
3487.  
3488. <p>Smashing Books have always been printed with materials from <a href="https://fsc.org/en">FSC Certified</a> forests. We are committed to finding new ways to conserve resources while still bringing you the best possible reading experience.</p>
3489.  
3490.  
3491.  
3492.    <a href="https://www.smashingmagazine.com/printed-books/success-at-scale/">
3493.    <img src="https://files.smashing.media/articles/success-at-scale-book-release/success-at-scale-new-addition-opt.png" />
3494.    </a>
3495.  
3496.  
3497. Community Matters ❤️
3498.  
3499. <p>Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful <strong>community</strong>. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be <a href="https://www.smashingmagazine.com/membership">free for <em>Smashing Members</em></a>. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)</p>
3500.  
3501. More Smashing Books & Goodies
3502.  
3503. <p>Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the <strong>core of everything we do</strong> at Smashing.</p>
3504.  
3505. <p>In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as <a href="/printed-books/">printed books that stand the test of time</a>. Heather and Steven are two of these people. Have you checked out their books already?</p>
3506.  
3507. <div>
3508.  
3509. <div><a href="/printed-books/understanding-privacy/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d2da7a90-acdb-43c7-82b2-5225c33ca4d7/understanding-privacy-cover-new-opt.png" /></a></div><h4><a href="/printed-books/understanding-privacy/">Understanding Privacy</a></h4><p>Everything you need to know to put your users first and make a better web.</p><p><a href="/printed-books/understanding-privacy/">Get Print + eBook</a></p>
3510.  
3511. <div><a href="/printed-books/touch-design-for-mobile-interfaces/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b14658fc-bb2d-41a6-8d1a-70eaaf1b8ec8/touch-design-book-shop-opt.png" /></a></div><h4><a href="/printed-books/touch-design-for-mobile-interfaces/">Touch Design for Mobile Interfaces</a></h4><p>Learn how touchscreen devices really work — and how people really use them.</p><p><a href="/printed-books/touch-design-for-mobile-interfaces/">Get Print + eBook</a></p>
3512.  
3513. <div><a href="/printed-books/checklist-cards/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/efffa8a0-82a0-415a-8aa5-8684a32083eb/checklist-cards-box-opt.png" /></a></div><h4><a href="/printed-books/checklist-cards/">Interface Design Checklists</a></h4><p>100 practical cards for common interface design challenges.</p>
3514. <p><a href="/printed-books/checklist-cards/">Get Print + eBook</a></p>
3515.  
3516. </div>
3517. ]]></content:encoded>
3518.            <author>hello@smashingmagazine.com (Vitaly Friedman)</author>
3519.            <enclosure url="http://files.smashing.media/articles/success-at-scale-book-release/success-at-ascale-22-opt.png" length="0" type="image/png"/>
3520.        </item>
3521.        <item>
3522.            <title><![CDATA[Sketchnotes And Key Takeaways From SmashingConf Antwerp 2023]]></title>
3523.            <link>https://smashingmagazine.com/2024/03/sketchnotes-key-takeaways-smashingconf-antwerp-2023/</link>
3524.            <guid>https://smashingmagazine.com/2024/03/sketchnotes-key-takeaways-smashingconf-antwerp-2023/</guid>
3525.            <pubDate>Mon, 18 Mar 2024 18:00:00 GMT</pubDate>
3526.            <description><![CDATA[How was the first SmashingConf in Antwerp, you ask? One of our online attendees, Krisztina Szerovay, shares her sketchnotes and takeaways of the talks that were held on both days of the conference &mdash; with photos and recordings saved as best for last. [See you live in Antwerp this year, maybe?](https://smashingconf.com/antwerp-2024)]]></description>
3527.            <content:encoded><![CDATA[<p>I have been reading and following Smashing Magazine for years — I’ve read many of the articles and even some of the books published. I’ve also been able to attend several Smashing workshops, and perhaps one of the peak experiences of my isolation times was the online SmashingConf in August 2020. Every detail of that event was so well-designed that I felt genuinely welcomed. The mood was exceptional, and even though it was a remote event, I experienced <strong>similar vibes to an in-person conference</strong>. I felt the energy of belonging to a tribe of other great design professionals.</p>
3528. <p>I was really excited to find out that the talks at <a href="https://smashingconf.com/antwerp-2023/">SmashingConf Antwerp 2023</a> were going to be focused on design and UX! This time, I attended remotely again, just like back in 2020: I could watch and live-sketch note seven talks (and I’m already looking forward to watching the remaining talks I couldn’t attend live).</p>
3529. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-online_moments.png" /></p>
3530. <p>Even though I participated remotely, I got really inspired. I had a lot of fun, and I felt truly involved. There was an online platform where the talks were live-streamed, as well as a dedicated Slack channel for the conference attendees. Additionally, I shared my <strong>key takeaways and sketchnotes</strong> right after each talk on social media. That way, I could have little discussions around the topics &amp;mdash, even though I wasn’t there in person.</p>
3531. <p>In this article, I would like to offer a brief summary of each talk, highlighting my takeaways (and my screenshots). Then, I will share my sketchnotes of those seven talks (+ two more I watched after the conference).</p>
3532. Day 1 Talks
3533. <ul>
3534. <li><a href="#design-system-traps-and-pitfalls-by-molly-hellmuth">Design System Traps And Pitfalls</a> by Molly Hellmuth</li>
3535. <li><a href="#how-ai-ate-my-website-by-luke-wroblewski">How AI Ate My Website</a> by Luke Wroblewski</li>
3536. <li><a href="#a-journey-in-enterprise-ux-by-stéphanie-walter">A Journey in Enterprise UX</a> by Stéphanie Walter</li>
3537. <li><a href="#designing-a-product-with-a-point-of-view-by-nick-dilallo">A Journey in Enterprise UX</a> by Nick DiLallo</li>
3538. <li><a href="#the-invisible-power-of-ui-typography-by-oliver-schöndorfer">The Invisible Power of UI Typography</a> by Oliver Schöndorfer</li>
3539. </ul>
3540. <h3>Introduction</h3>
3541. <p>At the very beginning of the conference, Vitaly said hello to everyone watching online, so even though I participated remotely, I felt welcomed. :-) He also shared that there is an overarching <a href="/#mystery-theme-other-highlights">mystery theme of the conference</a>, and the first one who could guess it would get a free ticket for the next Smashing conference — I really liked this gamified approach.</p>
3542. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-vitaly_intro.png" /></p>
3543. <p>Vitaly also reminded us that we should share our success stories as well as our failure stories (how we’ve grown, learned, and improved over time).</p>
3544. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-vitaly_intro_2.png" /></p>
3545. <p>We were introduced to the Pac-man rule: if we are having a conversation, and someone is speaking from the back and wants to join, open the door for them — just like Pac-man does (well, Pac-man opens his mouth because he wants to eat, you want to encourage conversations).</p>
3546. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-vitaly_intro_3.png" /></p>
3547. <p>In between talks, Vitaly told us a lot of design jokes; for instance, this one related to design systems was a great fit for the first talk:</p>
3548. <blockquote>Where did Gray 500 and Button Primary go on their first date?<br /><br />To a naming convention.</blockquote>
3549.  
3550. <p>After this little warm-up, Molly Hellmuth delivered the first talk of the event. Molly has been a great inspiration for me not only as a design system consultant but also as a content creator and community builder. I’m also enthusiastic about learning the more advanced aspects of Figma, so I was really glad that Molly chose this topic for her talk.  </p>
3551. <h3>“Design System Traps And Pitfalls” by Molly Hellmuth</h3>
3552. <p>Molly is a design system expert specializing in Figma design systems, and she teaches a course called Design System Bootcamp. Every time she runs this course, she sees students make similar mistakes. In this talk, she shared the most common mistakes and how to avoid them.</p>
3553. <p>Molly shared the <strong>most common mistakes</strong> she experienced during her courses:</p>
3554. <ul>
3555. <li>Adopting new features too quickly,</li>
3556. <li>Adding too many color variables,</li>
3557. <li>Using groups instead of frames,</li>
3558. <li>Creating jumbo component sets,</li>
3559. <li>Not prepping icons for our design system.</li>
3560. </ul>
3561. <p>She also shared some <strong>rapid design tips</strong>:</p>
3562. <ul>
3563. <li>Set the nudge amount to 8</li>
3564. <li>We can hide components in a library by adding a period or an underscore</li>
3565. <li>We can go to a specific layer by double-clicking on the layer icon</li>
3566. <li>Scope variables, e.g., colors meant for text is, only available for text</li>
3567. <li>Use auto layout stacking order (it is not only for avatars, e.g., it is great for dropdown menus, too).</li>
3568. </ul>
3569. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-molly_2.png" /></p>
3570. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-molly_3.png" /></p>
3571. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-molly_4.png" /></p>
3572. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-molly.jpg" /></p>
3573. <h3>“How AI Ate My Website” by Luke Wroblewski</h3>
3574. <p>I have been following Luke Wroblewski since the early days of my design career. I read his book “<a href="https://www.lukew.com/resources/web_form_design.asp">Web Form Design: Filling in the Blanks</a>” back in 2011, so I was really excited to attend his talk. Also, the topic of <strong>AI and design</strong> has been a hot one lately, so I was very curious about the conversational interface he created.</p>
3575. <p>Luke has been creating content for 27 years; for example, there are 2,012 articles on his website. There are also videos, books, and PDFs. He created an experience that lets us ask questions from AI that have been fed with this data (all of his articles, videos, books, and so on).</p>
3576. <p>In his talk, he explained how he created the interaction pattern for this conversational interface. It is more like a FAQ pattern and not a chatbot pattern. Here are some details:</p>
3577. <ul>
3578. <li>Nielsen Norman Group has recently conducted usability tests: <a href="https://www.nngroup.com/articles/accordion-editing-apple-picking/">“Accordion Editing and Apple Picking: Early Generative-AI User Behaviors: Two new user behaviors are prevalent in interactions with text-based AI chatbots.”</a>. The new <strong>apple-picking pattern</strong> is about combining relevant pieces of answers; it causes a “significant amount of friction” for the users. Luke created a pattern where previous answers are collapsed, and the current answers are shown by default; this provides a more coherent experience.</li>
3579. </ul>
3580. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-lukew_1.png" /></p>
3581. <ul>
3582. <li>He also tackled the “what I should ask” problem by providing suggested questions below the most recent answer; that way, he can provide a smoother, uninterrupted user flow.</li>
3583. </ul>
3584. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-lukew_2.png" /></p>
3585. <ul>
3586. <li>He linked all the relevant sources so that users can dig deeper (he calls it the “object experience”). Users can click on a citation link, and then they are taken to, e.g., a specific point of a video.</li>
3587. </ul>
3588. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-lukew_3.png" /></p>
3589. <p>He also showed us how AI eats all this stuff (e.g., processing, data cleaning) and talked about <strong>how it assembles the answers</strong> (e.g., how to pick the best answers).</p>
3590. <p>So, to compare Luke’s experience to e.g., Chat GPT, here are some points:</p>
3591. <ul>
3592. <li>It is more opinionated and specific (Chat GPT gives a “general world knowledge” answer);</li>
3593. <li>We can dig deeper by using the relevant resources.</li>
3594. </ul>
3595. <p>You can try it out on the <a href="http://ask.lukew.com/">ask.lukew.com</a> website.</p>
3596. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-lukew.jpg" /></p>
3597. <h3>“A Journey in Enterprise UX” by Stéphanie Walter</h3>
3598. <p>Stéphanie Walter is also a huge inspiration and a designer friend of mine. I really appreciate her long-form <a href="https://stephaniewalter.design/blog/">articles, guides, and newsletters</a>. Additionally, I have been working in banking and fintech for the last couple of years, so working for an enterprise (in my case, a bank) is a situation I’m familiar with, and I couldn’t wait to hear about a fellow <strong>designer’s perspective and insights</strong> about the challenges in enterprise UX. </p>
3599. <p>Stéphanie’s talk resonated with me on so many levels, and below is a short summary of her insightful presentation.</p>
3600. <p>On complexity, she discussed the following points:</p>
3601. <ol>
3602. <li>Looking at quantitative data: <strong>What? How much?</strong><br />Doing some content analysis (e.g., any duplicates?)</li>
3603. <li>After the “what” and discovering the “as-is”: <strong>Why? How?</strong>  <ul>
3604. <li>By getting access to internal users;</li>
3605. <li>Conducting task-focused user interviews;</li>
3606. <li>Documenting everything throughout the process;</li>
3607. <li>“Show me how you do this today” to tackle the “jumping into solutions” mindset.</li>
3608. </ul>
3609. </li>
3610. </ol>
3611. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-steph_1.png" /></p>
3612. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-steph_2.png" /></p>
3613. <p>Stéphanie shared with us that there are two types of processes:</p>
3614. <ul>
3615. <li><strong>Fast track</strong><br />Small features, tweaks on the UI — in these cases, there is no time or no need to do intensive research; it involves mostly UI design.</li>
3616. <li><strong>Specific research for high-impact parts</strong><br />When there is a lot of doubt (“we need more data”). It involves gathering the results of the previous research activities; scheduling follow-up sessions; iterating on design solutions and usability testing with prototypes (usually using Axure).  <ul>
3617. <li><strong>Observational testing</strong><br />“Please do the things you did with the old tool but with the new tool” (instead of using detailed usability test scripts).  </li>
3618. <li><strong>User diary</strong> + longer <strong>studies to help understand</strong> the behavior over a period of time.</li>
3619. </ul>
3620. </li>
3621. </ul>
3622. <p>She also shared what she wishes she had known sooner about designing for enterprise experiences, e.g., it can be a trap to oversimplify the UI or the importance of customization and providing all the data pieces needed.</p>
3623. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-steph_3.png" /></p>
3624. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-steph_4.png" /></p>
3625. <p>It was also very refreshing that she corrected the age-old saying about user interfaces: you know, the one that starts with, “<strong>The user interface is like a joke...</strong>”. The thing is, sometimes, we need some prior knowledge to understand a joke. This fact doesn’t make a joke bad. It is the same with user interfaces. Sometimes, we just need some prior knowledge to understand it.</p>
3626. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-steph_5.png" /></p>
3627. <p>Finally, she talked about some of the main challenges in such environments, like change management, design politics and complexity.</p>
3628. <p>Her <strong>design process in enterprise UX</strong> looks like this:</p>
3629. <ul>
3630. <li><strong>Complexity</strong><br />How am I supposed to design that?</li>
3631. <li><strong>Analysis</strong><br />Making sense of this complexity.</li>
3632. <li><strong>Research</strong><br />Finding and understanding the puzzle pieces.</li>
3633. <li><strong>Solution design</strong><br />Eventually, everything clicks into place.</li>
3634. </ul>
3635. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-stephanie.jpg" /></p>
3636. <p>The next talk was about creating a product with a Point of View, meaning that a product’s tone of voice can be “unique,” “unexpected,” or “interesting.”</p>
3637. <h3>“Designing A Product With A Point Of View” by Nick DiLallo</h3>
3638. <p>Unlike in the case of the other eight speakers whose talks I sketched, I wasn’t familiar with Nick’s work before the conference. However, I’m really passionate about UX writing (and content design), so I was excited to hear Nick’s points. After his talk, I have become a fan of his work; check out his <a href="https://medium.com/@nickdilallo">great articles</a> on Medium).</p>
3639. <p>In his talk, Nick DiLallo shared many examples of good and not-so-good UX copies.</p>
3640. <p>His first tip was to <strong>start with defining our target audience</strong> since the first step towards writing anything is not writing. Rather, it is figuring out who is going to be reading it. If we manage to define who will be reading as a starting point, we will be able to make good design decisions for our product.</p>
3641. <p>For instance, instead of <strong>designing for “anyone who cooks a lot”</strong>, it is a lot better to <strong>design for “expert home chefs”</strong>. We don’t need to tell them to “salt the water when they are making pasta”.</p>
3642. <p>After defining our audience, the next step is saying something interesting. Nick’s recommendation is that we should start with one good sentence that can unlock the UI and the features, too.</p>
3643. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-nick_1.png" /></p>
3644. <p>The next step is about choosing good words; for example, instead of “join” or “subscribe,” we  can say “become a member.” However, sometimes we shouldn’t get too creative, e.g., we should never say “add to submarine” instead of “add to cart” or “add to basket”.</p>
3645. <p>We should <strong>design our writing</strong>. This means that what we include signals what we care about, and the bigger something is visual, the more it will stand out (it is about establishing a meaningful visual hierarchy).</p>
3646. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-nick_2.png" /></p>
3647. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-nick_3.png" /></p>
3648. <p>We should also find moments to add voice, e.g., the footer can contain more than a legal text. On the other hand, there are moments and places that are not for adding more words; for instance, a calendar or a calculator shouldn’t contain brand voice.</p>
3649. <p>Nick also highlighted that <strong>the entire interface speaks</strong> about who we are and what our worldview is. For example, what options do we include when we ask the user’s gender?</p>
3650. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-nick_4.png" /></p>
3651. <p>He also added that <strong>what we do is more important than what we write</strong>. For example, we can say that it is a free trial, but if the next thing the UI asks is to enter our bank card details, well, it’s like saying that we are vegetarian, and then we eat a cheeseburger in front of me.</p>
3652. <p>Nick closed his talk by saying that companies should hire writers or content designers since words are part of the user experience.</p>
3653. <blockquote>“When writing and design work together, the results are remarkable.”</blockquote>
3654.  
3655. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-nick.jpg" /></p>
3656. <h3>“The Invisible Power of UI Typography” by Oliver Schöndorfer</h3>
3657. <p>This year, Oliver has quickly become one of my favorite design content creators. I attended some of <a href="https://www.youtube.com/@PimpmyType">his webinars</a>, I’m a subscriber of his <a href="https://pimpmytype.com/fontfriday/">Font Friday newsletter</a>, and I really enjoy his “edutainment style”. He is like a stand-up comedian. His talks and online events are full of great jokes and fun, but at the same time, Oliver always manages to share his extensive knowledge about <strong>typography and UI design</strong>. So I knew that the following talk was going to be great. :) </p>
3658. <p>During his talk, Oliver redesigned a banking app screen live, gradually adding the enhancements he talked about. His talk started with this statement:</p>
3659. <blockquote>“The UI is the product, and a big part of it is the text.”</blockquote>
3660.  
3661. <p>After that, he asked an important question:</p>
3662. <blockquote>“How can we make the type work for us?”</blockquote>
3663.  
3664. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-oliver_1.png" /></p>
3665. <p>Some considerations we should keep in mind:</p>
3666. <ul>
3667. <li><strong>Font Choice</strong><br />System fonts are boring. We should think about what the voice of our product is! So, pick fonts that:  <ul>
3668. <li>are in the right category (mostly sans, sometimes slabs),</li>
3669. <li>have even strokes with a little contrast (it must work in small sizes),</li>
3670. <li>have open-letter shapes,</li>
3671. <li>have letterforms that are easy to distinguish (the “Il1” test).</li>
3672. </ul>
3673. </li>
3674. </ul>
3675. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-oliver_2.png" /></p>
3676. <ul>
3677. <li><strong>Hierarchy</strong><br />i.e. “What is the most important thing in this view?”</li>
3678. </ul>
3679. <p>Start with the body text, then emphasize and deemphasize everything else — and watch out for the accessibility aspects (e.g. minimum contrast ratios).</p>
3680. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-oliver_3.png" /></p>
3681. <p>Accessibility is important, too!</p>
3682. <ul>
3683. <li><strong>Spacing</strong><br />Relations should be clear (law of proximity) and be able to define a base unit.</li>
3684. </ul>
3685. <p>Then we can add some final polish (and if it is appropriate, some delight).</p>
3686. <p>As Oliver said, “<strong>Go out there and pimp that type!</strong>”</p>
3687. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-oliver.jpg" /></p>
3688. Day 2 Talks
3689. <ul>
3690. <li><a href="#design-beyond-breakpoints-by-christine-vallaure">Design Beyond Breakpoints</a> by Christine Vallaure</li>
3691. <li><a href="#it-s-a-marathon-and-a-sprint-by-fabricio-teixeira">It’s a Marathon, and a Sprint</a> by Fabricio Teixeira</li>
3692. <li><a href="#design-ethically-from-imperative-to-action-by-kat-zhou">Design Ethically: From Imperative to Action</a> by Kat Zhou</li>
3693. <li><a href="#is-atomic-design-dead-by-brad-frost">Is Atomic Design Dead?</a> by Brad Frost</li>
3694. </ul>
3695. <h3>“Design Beyond Breakpoints” by Christine Vallaure</h3>
3696. <p>I’m passionate about the designer-developer collaboration topic (I have a course and some articles about it), so I was very excited to hear Christine’s talk! Additionally, I really appreciate all the <a href="https://www.moonlearning.io/">Figma content</a> she shares, so I was sure that I’d learn some new exciting things about our favorite UI design software.</p>
3697. <p>Christine’s talk was about pushing the current limits of Figma: how to do responsive design in Figma, e.g., by using the so-called <strong>container queries</strong>. These queries are like media queries, but we are not looking at the viewport size. Instead, we are looking at the container. So a component behaves differently if, e.g., it is inside a sidebar, and we can also nest container queries, e.g., tell an icon button inside a card that upon resizing, the icon should disappear).</p>
3698. <p><strong>Recommended Reading</strong>: <em><a href="https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/">A Primer On CSS Container Queries</a> by Stephanie Eckles</em></p>
3699. <p>She also shared that there is a German fairy tale about a race between a hedgehog and a rabbit. The hedgehog wins the race even though he is slower. Since he is smarter, he sends his wife (who looks exactly like him) to the finish line in advance. Christine told us that she had mixed feelings about this story because she didn’t like the idea of pretending to be fast when someone has other great skills. In her analogy, the rabbits are the developers, and the hedgehogs are the designers. Her lesson was that we should <strong>embrace each others’ tools and skills</strong> instead of trying to mimic each others’ work. </p>
3700. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-christine_1.png" /></p>
3701. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-christine_2.png" /></p>
3702. <p>The lesson of the talk was not really about pushing the limits. Rather, the talk was about reminding us of why we are doing all this:</p>
3703. <ul>
3704. <li>To <strong>communicate</strong> our design decisions better to the developers,</li>
3705. <li>To try out <strong>how our design behaves</strong> in different cases (e.g., where it should break and how), and</li>
3706. <li>It is also great for <strong>documentation purposes</strong>; she recommended the EightShapes Specs plugin by <a href="https://www.linkedin.com/in/ACoAAAA5xNMB3QqzKvy91Hruj57cKFw1_jnq8yI">Nathan Curtis</a>.</li>
3707. </ul>
3708. <p>Her advice is:</p>
3709. <ul>
3710. <li>We should <strong>create a playground</strong> inside Figma and try out how our components and designs work (and let developers try out our demo, too);</li>
3711. <li>Have many <strong>discussions with developers</strong>, and don’t start these discussions from zero, e.g., read a bit about frontend development and have a fundamental knowledge of development aspects.</li>
3712. </ul>
3713. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-christine_3.png" /></p>
3714. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-christine.jpg" /></p>
3715. <h3>“It’s A Marathon, And A Sprint” by Fabricio Teixeira</h3>
3716. <p>If you are a design professional, you have surely encountered at least a couple of articles published by the <a href="https://uxdesign.cc/">UX Collective</a>, a very impactful design publication. Fabricio is one of the founders of that awesome corner of the Internet, so I knew that his talk would be full of insights and little details. He shared four case studies and included a lot of great advice.</p>
3717. <p>During his talk, Fabricio used <strong>the analogy of running</strong>. When we prepare for a long-distance running competition, 80% of the time, we should do easy runs, and 20% of the time should be devoted to intensive because short interval runs get the best results. He also highlighted that just like during a marathon running, things will get hard during our product design projects, but we must remember how much we trained. When someone from the audience asked how not to get overly confident, he said that we should build an environment of trust so that other people on our team can make us realize if we’ve become too confident.</p>
3718. <p>He then mentioned four case studies; all of these projects required a different, unique approach and design process:</p>
3719. <ul>
3720. <li><strong>Product requirements are not required.</strong><br />Vistaprint and designing face masks — the world needed them to design really fast; it was a 15-day sprint, and they did not have time to design all the color and sizing selectors (and only after the launch did it turn into a marathon).</li>
3721. </ul>
3722. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-fabricio_2.png" /></p>
3723. <ul>
3724. <li><strong>Timelines aren’t straight lines.</strong><br />The case study of Equinox treadmill UI: they created a fake treadmill to prototype the experience; they didn’t wait for the hardware to get completed (the hardware got delayed due to manufacturing issues), so there was no delay in the project even in the face of uncertainty and ambiguity. For example, they took into account the hand reach zones, increased the spacing between UI elements so that these remained usable even while the user was running, and so on.</li>
3725. </ul>
3726. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-fabricio_3.png" /></p>
3727. <p><strong>Exciting challenge</strong>: Average treadmill interface, a complicated dashboard, everything is fighting for our attention.</p>
3728. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-fabricio_4.png" /></p>
3729. <ul>
3730. <li><strong>Research is a mindset, not a step.</strong><br />He mentioned the Gofundme project, where they applied a fluid approach to research meaning that design and research ran in parallel, the design informed research and vice versa. Also, insights can come from anyone from the team, not just from researchers. I really liked that they started a book club, everyone read a book about social impact, and they created a Figma file that served as a knowledge hub.</li>
3731. </ul>
3732. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-fabricio_5.png" /></p>
3733. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-fabricio_6.png" /></p>
3734. <ul>
3735. <li><strong>Be ready for some math</strong><br />During the New York City Transit project, they created a real-time map of the subway system, which required them to create a lot of vectors and do some math. One of the main design challenges was, “How to clean up complexity?”</li>
3736. </ul>
3737. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-fabricio_7.png" /></p>
3738. <p>Fabricio shared that we should be “flexibly rigorous”: just as during running, we should listen to our body, we should listen to the special context of a given project. <strong>There is no magic formula out there.</strong> Rigor and discipline is important, but we must listen to our body so that we don’t lose touch of reality.</p>
3739. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-fabricio_1.png" /></p>
3740. <p>The key takeaway is that because, we as a design community focus a lot on processes, and of course there is no one way to do design, we  should combine sprints and marathons, <strong>adjust our approach to the needs of the given project</strong>, and most of all, focus more on principles, e.g. how we, as a team, want to work together?</p>
3741. <p>A last note is when Fabricio mentioned in the post-talk discussion with Vitaly Friedman that having a 1–3-hour long kick-off meeting with our team is too short, we will work on something for e.g. 6 months, so Fabricio’s team introduced kick-off weeks.</p>
3742. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-fabricio.jpg" /></p>
3743. <p>Kat delivered one of the most important talks (or maybe the most important talk) of the conference. <strong>The ethics of design is a topic that has been around for many years now</strong>. Delivering a talk like this is challenging because it requires a perspective that easily gets lost in our everyday design work. I was really curious about how Kat would make us think and have us question our way of working. </p>
3744. <h3>“Design Ethically: From Imperative To Action” by Kat Zhou</h3>
3745. <p>Kat’s talk walked us through our current reality such as how algorithms have built in biases, manipulate users, hide content that shouldn’t be hidden, and don’t block things that shouldn’t be allowed. The main question, however, is:</p>
3746. <blockquote>Why is that happening? Why do designers create such experiences?</blockquote>
3747.  
3748. <p>Kat’s answer is that companies must ruthlessly design for growth. And we, as designers, have the power to exercise control over others. </p>
3749. <p>She showed us some examples of what she considers oppressive design, like the <a href="https://en.wikipedia.org/wiki/Panopticon">Panopticon</a> by Jeremy Bentham. She also provided an example of hostile architecture (whose  goal is to prevent humans from resting in public places). There are also <strong>dark patterns within digital experiences</strong> similar to the <em>New York Times</em> subscription cancellation flow (users had to make a call to cancel). </p>
3750. <p>And the end goal of  oppressive design is always to get more user data, more users’ time, and more of the users’ money. What amplifies this effect is that from an employee’s (designer’s) perspective, the performance is tied to achieving OKRs.</p>
3751. <p>Our challenge is how we might <strong>redesign the design process</strong> so that it doesn’t perpetuate the existing systems of power. Kat’s suggestion is that we should add some new parts to the design process:</p>
3752. <ul>
3753. <li>There are two phases:<br /><strong>Intent</strong>: “Is this problem a worthy problem to solve?”<br /><strong>Results</strong>: “What consequences do our solutions have? Who is it helping? Who is it harming?”</li>
3754. <li>Add “<strong>Evaluate</strong>”:<br />“Is the problem statement we defined even ethically worthy of being addressed?”</li>
3755. <li>Add “<strong>Forecast</strong>”:<br />“Can any ethical violations occur if we implement this idea?”</li>
3756. <li>Add “<strong>Monitor</strong>”:<br />“Are there any new ethical issues occurring? How can we design around them?”</li>
3757. </ul>
3758. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-kat_1.png" /></p>
3759. <p>Kat shared <a href="https://www.designethically.com/toolkit">a toolkit and framework</a> that help us understand the consequences of the things we are building.</p>
3760. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-kat_2.png" /></p>
3761. <p>Kat talked about forecasting in more detail. As she said,</p>
3762. <blockquote>“Forecasted consequences often are design problems.”</blockquote>
3763.  
3764. <p>Our responsibility is to design around those forecasted consequences. We can pull a product apart by thinking about the layers of effect: </p>
3765. <ul>
3766. <li>The <strong>primary</strong> layer of effect is intended and known, e.g.: Google Search is intended and known as a search engine.</li>
3767. <li>The <strong>secondary</strong> effect is also known, and intended by the team, e.g. Google Search is an ad revenue generator.</li>
3768. <li>The <strong>tertiary</strong> effect: typically unintended, possibly known, e.g. Algorithms of Oppression, Safiya Umoja Noble talks about the biases built in Google Search.</li>
3769. </ul>
3770. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-kat_3.png" /></p>
3771. <p>So designers should define and design ethical primary and secondary effects, and forecast tertiary effects, and ensure that they don’t pose any significant harm.</p>
3772. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-kat.jpg" /></p>
3773. <p>I first encountered atomic design in 2015, and I remember that I was so fascinated by the clear logical structure behind this mental model. Brad is one of my design heroes because I really admire all the work he has done for the design community. I knew that behind the “clickbait title” (Brad said it himself), there’ll be some great points. And I was right: he mentioned some ideas I have been thinking about since his talk.</p>
3774. <h3>“Is Atomic Design Dead?” by Brad Frost</h3>
3775. <p>In the first part of the talk, Brad gave us a little WWW history starting from the first website all the way to web components. Then  he summarized that design systems inform and influence products and vice versa.</p>
3776. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-bradf_1.png" /></p>
3777. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-bradf_2.png" /></p>
3778. <p>I really liked that he listed <strong>three problematic cases</strong>:</p>
3779. <ul>
3780. <li>When the design system team is very separated, sitting in their ivory tower.</li>
3781. <li>When the design system police put everyone in the design system jail for detaching an instance.</li>
3782. <li>When the product roadmaps eat  the design system efforts.</li>
3783. </ul>
3784. <p>He then summarized the foundations of atomic design (atoms, molecules, organisms, templates and pages) and gave a nice example using Instagram.</p>
3785. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-bradf_3.png" /></p>
3786. <p>He answered the question asked in the title of the talk: atomic design is not dead, since it is still a useful mental model for thinking about user interfaces, and it helps teams find a balance, and equilibrium between design systems and products.</p>
3787. <p>And then here came the most interesting and thought-provoking part: where do we go from here?</p>
3788. <ol>
3789. <li><p>What if we don’t waste any more human potential on designing yet another date picker, but instead, we create a global design system together, collaboratively? It’d be an unstyled component that we can style for ourselves.</p>
3790. </li>
3791. <li><p>The other topic he brought up is the use of AI, and he mentioned Luke Wroblewski’s talk, too. He also talked about the project he is working on with <a href="https://medium.com/u/e6fda7b94503?source=post_page-----cbf9fca58ce1--------------------------------">Kevin Coyle</a>: it is about converting a codebase (and its documentation) to a format that GPT 4 can understand. Brad showed us a demo of creating an alert component using ChatGPT (and this limited corpus). </p>
3792. </li>
3793. </ol>
3794. <p>His main point was that since  the “genie” is out of the bottle, it is on us to use AI more responsibly. Brad closed his talk by highlighting the importance of using human potential and time for better causes than designing one more date picker.</p>
3795. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-sketchnote-bradf.jpg" /></p>
3796. Mystery Theme/Other Highlights
3797. <p>When Vitaly first got on stage, one of the things he asked the audience to keep an eye out for was an overarching <strong>mystery theme that connects all the talks</strong>. At the end of the conference, he finally revealed the answer: the theme was connected to the city of Antwerp!</p>
3798. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-vitaly_closing_mystery.png" /></p>
3799. <p>Where does the name "Antwerp" come from? “Hand werpen” or “to throw a hand”. Once upon a time, there was a giant that collected money from everyone passing the river. One time, a soldier came and just cut off the hand of this giant and threw it to the other side, liberating the city. So, the story and the theme were “legends.” For instance, Molly Hellmuth included Bigfoot (Sasquatch), Stéphanie mentioned Prometheus, Nick added the word "myth" to one of his slides, Oliver applied a typeface usually used in fairy tales, Christine mentioned Sisyphus and Kat talked about Pandora’s box.</p>
3800. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-vitaly_closing_2.png" /></p>
3801. My Very Own Avatar
3802. <p>One more awesome thing that happened thanks to attending this conference is that I got a great surprise from the Smashing team! I won the hidden challenge 'Best Sketch Notes', and I have been gifted a personalized avatar created by Smashing Magazine’s illustrator, Ricardo.</p>
3803. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/Krisztina-Szerovay.png" /></p>
3804. Full Agenda
3805. <p>There were other great talks — I’ll be sure to watch the recordings! For anyone asking, here is <a href="https://smashingconf.com/antwerp-2023/schedule">the full agenda of the conference</a>.</p>
3806. <p><img src="https://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/smashingconf-antwerp-thankyou.png" /></p>
3807. <p>A huge thanks again to all of the organizers! You can check out all the current and upcoming Smashing conferences planned on the <a href="https://smashingconf.com/">SmashingConf website</a> anytime.</p>
3808. Saving The Best For Last: Photos And Recordings
3809. <p>The one-and-only Marc Thiele captured <a href="https://marcthiele.com/photos/smashingconf-antwerp-2023">in-person vibes at the event</a> — you can see the stunning, historic Bourla venue it took place in and how memorable it all must have been for the attendees! 🧡</p>
3810. <p>For those who couldn’t make it in person and are curious to watch the talks, well, I have good news for you! The recordings have been recently published — you can <a href="https://www.youtube.com/watch?v=ma71ktxP0aU">watch them over here</a>:</p>
3811.  
3812.  
3813. <p><br />
3814. Thank you for reading! I hope you enjoyed reading this as much as I did writing it! See you at <a href="https://smashingconf.com/antwerp-2024">the next design &amp; UX SmashingConf in Antwerp</a>, maybe?</p>
3815. ]]></content:encoded>
3816.            <author>hello@smashingmagazine.com (Krisztina Szerovay)</author>
3817.            <enclosure url="http://files.smashing.media/articles/sketchnotes-key-takeaways-smashingconf-antwerp-2023/welcome-smashingconf-antwerp-2023.jpg" length="0" type="image/jpg"/>
3818.        </item>
3819.        <item>
3820.            <title><![CDATA[Event Calendars For Web Made Easy With These Commercial Options]]></title>
3821.            <link>https://smashingmagazine.com/2024/03/event-calendars-web-commercial-options/</link>
3822.            <guid>https://smashingmagazine.com/2024/03/event-calendars-web-commercial-options/</guid>
3823.            <pubDate>Tue, 12 Mar 2024 12:00:00 GMT</pubDate>
3824.            <description><![CDATA[Collection of top-notch calendar components for seamless event scheduling. Whether you prefer ready-to-use setups or enjoy tweaking code for a tailored experience, these calendars have you covered.]]></description>
3825.            <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://www.bryntum.com?aw=smashing-calendar-options-2024">Bryntum</a></p>
3826. <p>Need a full-fledged calendar for scheduling events on your website? Just download one of these and get started. We have curated a collection of some of the best calendar components available in the market that are worth the investment for your next big project. Whether you want to simply use their default set-up without touching the source code or roll up your sleeves to dive deep and customize everything to your heart’s content, these calendars have something to offer for everyone. </p>
3827. Bryntum Calendar
3828. <p>Convenience is the theme. The Bryntum Calendar can be used with vanilla JavaScript or popular JavaScript frameworks like React, Angular, and Vue, giving you considerable flexibility for easy integration into a wide range of projects. The component seamlessly connects with the other Bryntum power widgets, such as the <a href="https://www.smashingmagazine.com/2022/09/useful-javascript-data-grid-libraries/">Data Grid</a>.</p>
3829. <p><img src="https://files.smashing.media/articles/event-calendars-web-commercial-options/1-bryntum-calendar.png" /></p>
3830. <p>The out-of-the-box calendar has a modern and clean design with crisp icons. It renders nicely and executes fast. The user controls have smooth transitions and resize well for different screen sizes. Drag and drop for the events is supported. </p>
3831. <p>Need more than the five nifty themes the calendar comes with? The customization possibilities, using CSS/Sass, go beyond just the calendar views — day, week, month, year, and agenda — and include ways to restyle tooltips and user controls with a lot of liberty and just a few keystrokes. Extensive configurations are at hand to update both the impression and functions of the calendar. </p>
3832. <p>The Bryntum Calendar features include multi-user assigned tasks and time zone support, making it ideal for global teams to collaborate and plan together. For potent project management, there’s the ingenious <a href="https://bryntum.com/products/calendar/examples/resourceview/?aw=smashing-calendar-options-2024">resource view</a> to monitor at a glance every member’s agenda and see who is free to be scheduled. </p>
3833. <p>All configuration options and features are well documented with interactive and customizable <a href="https://bryntum.com/products/calendar/examples/?aw=smashing-calendar-options-2024">live examples</a>, and you will also find helpful integration guides for Outlook and Google Calendar. Additionally, there’s an impressive collection of customized calendar examples that you can browse and choose from. </p>
3834. <p>A 45-day free trial is available, which includes over thirty examples for you to get started with. If you have any queries regarding the pricing and license, you can contact Bryntum at <a href="https://bryntum.com/contact/?aw=smashing-calendar-options-2024">https://bryntum.com/contact/</a>. Bryntum also has an easy-to-use technical <a href="https://forum.bryntum.com/?aw=smashing-calendar-options-2024">support forum</a> for its clients and offers paid professional services like migration assistance for their products.</p>
3835. <ul>
3836. <li><a href="https://bryntum.com/products/calendar/?aw=smashing-calendar-options-2024">Go to Bryntum Calendar</a></li>
3837. <li><a href="https://bryntum.com/store/calendar/?aw=smashing-calendar-options-2024">Go to Bryntum Calendar Licensing and Pricing</a> </li>
3838. </ul>
3839. KendoReact Scheduler
3840. <p>Whatever you need, it’s in the KendoReact UI bundle, including an easy-to-integrate calendar with a contemporary design for React applications. Options for other frameworks, such as jQuery and .NET MVC, are also available depending on which plan you purchase. </p>
3841. <p><img src="https://files.smashing.media/articles/event-calendars-web-commercial-options/2-kendoreact-scheduler.png" /></p>
3842. <p>The Calendar/Scheduler, as it is, has a nice, comprehensible look and is easy to navigate. It is WCAG compliant and supports accessibility, something that screen reader users and keyboard navigators will appreciate. </p>
3843. <p>All the basic calendar features are impeccably executed, including showing different calendar views, like monthly, and creating recurring events and timelines. For easy customization, it comes with some built-in themes, or you can build your own with custom Sass variables. </p>
3844. <p>For global teams, KendoReact Scheduler does support different timezones, as well as globalization support for other languages. </p>
3845. <p>A comprehensive feature and API <a href="https://www.telerik.com/kendo-react-ui/components/scheduler/">documentation</a>, with built-in sample code editors, is available. To learn more about the pricing, you can request a quote at <a href="https://www.telerik.com/purchase/request-a-quote">https://www.telerik.com/purchase/request-a-quote</a>. There’s technical support for customers in the form of a ticket system and forums. A 30-day free trial that includes technical support can be opted for. </p>
3846. <ul>
3847. <li><a href="https://www.telerik.com/kendo-react-ui/scheduler">Go to KendoReact Scheduler</a></li>
3848. <li><a href="https://www.telerik.com/kendo-react-ui/pricing">Go to KendoReact UI Licensing and Pricing</a> </li>
3849. </ul>
3850. DevExtreme Scheduler
3851. <p>Apt to dive straight into work, DevExtreme Scheduler has distraction-free but detailed features that now include work shifts. It is available for Angular, React, Vue, and jQuery.  </p>
3852. <p><img src="https://files.smashing.media/articles/event-calendars-web-commercial-options/3-devextreme-scheduler.png" /></p>
3853. <p>You’ll find a standard collection of demos on the website for you to preview and make up your mind. Additionally, there’s a comprehensive theme builder for customization. For pinpoint touchups, the CSS can be updated. </p>
3854. <p>The calendar is responsive to mobile screens and includes a drag-and-drop feature, timezone support, and Google Calendar integration. </p>
3855. <p>You can take advantage of a 30-day free trial and a 60-day money-back guarantee. For queries, DevExtreme can be reached at <a href="https://js.devexpress.com/Support/">https://js.devexpress.com/Support/</a>. Ticket-based technical support is also available. </p>
3856. <ul>
3857. <li><a href="https://js.devexpress.com/Overview/Scheduler/">Go to DevExtreme Scheduler</a></li>
3858. <li><a href="https://js.devexpress.com/Buy/">Go to DevExtreme Licensing and Pricing</a></li>
3859. </ul>
3860. Mobiscroll Calendar
3861. <p>Responsiveness is at the forefront. If you are meticulous about how the calendar should look in different screen sizes, go through Mobiscroll’s <a href="https://demo.mobiscroll.com/jquery/eventcalendar/responsive-month-view#">documentation</a>, for they have demo presets for different sizes in both desktop and mobile versions. </p>
3862. <p><img src="https://files.smashing.media/articles/event-calendars-web-commercial-options/4-mobiscroll-calendar.png" /></p>
3863. <p>The calendar is available in JavaScript, jQuery, Angular, React, and Vue. The default calendar has a minimalist look and comes with a few base themes. Its appearance, including that of the tooltips, can be customized in CSS. </p>
3864. <p>The calendar supports a drag-and-drop function for ease of use and different time zones for global collaborations. It also provides third-party calendar integration, with Google Calendar, for instance, which is available only during the non-trial period. </p>
3865. <p>A 90-day trial is available, and there’s also a 30-day money-back guarantee. For queries on license and fee, Mobiscroll can be contacted at <a href="https://mobiscroll.com/contact">https://mobiscroll.com/contact</a>. Both standard and priority customer support are provided, along with a community forum for any questions.   </p>
3866. <ul>
3867. <li><a href="https://mobiscroll.com/event-calendar-scheduler">Go to Mobiscroll Calendar</a></li>
3868. <li><a href="https://mobiscroll.com/pricing#non-saas">Go to Mobiscroll Calendar Licensing and Pricing</a></li>
3869. </ul>
3870. Webix Scheduler
3871. <p>Just drop this in and get started. Webix Scheduler is a JavaScript calendar widget that’s easy to fit into your website. The default look is a pastel theme — there’s a full-screen live demo — but it is customizable via the preset skins, API, or the theme builder. </p>
3872. <p><img src="https://files.smashing.media/articles/event-calendars-web-commercial-options/5-webix-scheduler.png" /></p>
3873. <p>It includes all the basic calendar views and functionality. New events can be added using drag-and-drop. There’s a collection of JavaScript coding samples with a live code editor for you to test and learn from. </p>
3874. <p>Webix Scheduler comes with standard online documentation for the API and user guide. There’s a 30-day free trial you can sign up for. For more information, Webix can be contacted at <a href="https://webix.com/contact-us/">https://webix.com/contact-us/</a>. For clients, technical support is available from ticket-based systems to live chats, depending on the plan purchased. There’s also a community forum to ask questions. </p>
3875. <ul>
3876. <li><a href="https://webix.com/scheduler/">Go to Webix Scheduler</a> </li>
3877. <li><a href="https://webix.com/scheduler/#licensing">Go to Webix Scheduler Licensing and Pricing</a></li>
3878. </ul>
3879. <p>And that’s the end of the calendar round-up. If you want to share with our community a commercial web calendar (or an open-sourced one) that you’ve tried and loved, let us know in the comments. Happy scheduling!</p>
3880. ]]></content:encoded>
3881.            <author>hello@smashingmagazine.com (Preethi Sam)</author>
3882.            <enclosure url="http://files.smashing.media/articles/event-calendars-web-commercial-options/event-calendars-web-commercial-options.jpg" length="0" type="image/jpg"/>
3883.        </item>
3884.        <item>
3885.            <title><![CDATA[Success At Scale: Last Chance For Pre-Sale Price]]></title>
3886.            <link>https://smashingmagazine.com/2024/03/success-at-scale-book-pre-release/</link>
3887.            <guid>https://smashingmagazine.com/2024/03/success-at-scale-book-pre-release/</guid>
3888.            <pubDate>Fri, 08 Mar 2024 16:00:00 GMT</pubDate>
3889.            <description><![CDATA[Our next book, “Success at Scale” is finally at the printer, which means we’ll be shipping books soon. It’s also your last chance to get the book at the presale price. <a href="/printed-books/success-at-scale/" data-product-sku="success-at-scale" data-component="AddToCart" data-product-path="/printed-books/success-at-scale" data-silent="true">Get your copy and save now!</a>]]></description>
3890.            <content:encoded><![CDATA[<p>We love practical books that focus on failures and success stories. And we’ve finally sent our latest book, Addy Osmani’s <strong><em>Success at Scale</em> is at the printer</strong>. That means you’ll soon have another wonderful, practical book in your hands. It also means the price of the book is about to go up. So <a href="/printed-books/success-at-scale/">pre-order your copy now to save on the cover price</a> by the <strong>11th of March, 2024</strong>!</p>
3891.  
3892.    <a href="https://files.smashing.media/articles/success-at-scale-shipping-soon/sas-presale-ending-opt.png">
3893.    <img src="https://files.smashing.media/articles/success-at-scale-shipping-soon/sas-presale-ending-opt.png" />
3894.    </a>
3895.  
3896.  
3897.  
3898.  
3899. Reviews And Testimonials
3900.  
3901. <blockquote><img src="https://files.smashing.media/articles/success-at-scale-shipping-soon/luca-mezzalira-opt.png" />“This book reveals in its pages the collective wisdom of frontend engineers working on global web projects. It’s the perfect way to enhance your web applications’ potential by optimizing performance with practical tips straight from the trenches.”<br /><br /> Luca Mezzalira, Principal Serverless Specialist Solutions Architect at Amazon Web Services (AWS) and O’Reilly author</blockquote>
3902.  
3903. <blockquote><img src="https://files.smashing.media/articles/success-at-scale-shipping-soon/jerome-hardaway-opt.png" /><em>Success at Scale</em>, masterfully curated by Addy Osmani, serves as an invaluable compass for the aspiring developers navigating the complex waters of web development. It’s more than a book; it’s a transmission of wisdom, guiding junior developers towards the shores of big tech companies. With its in-depth case studies and focus on performance, capabilities, accessibility, and developer experience, it prepares the next generation of tech talent to not just participate in, but to shape the future of digital innovation.”<br /><br /> Jerome Hardaway, Engineering AI products at Microsoft</blockquote>
3904.  
3905.  
3906.    <a href="https://files.smashing.media/articles/success-at-scale-shipping-soon/success-at-scale-book-contents.png">
3907.    <img src="https://files.smashing.media/articles/success-at-scale-shipping-soon/success-at-scale-book-contents.png" />
3908.    </a>
3909.  
3910.  
3911. ## Contents
3912.  
3913. <p><em>Success at Scale</em> is a curated collection of <strong>best-practice case studies</strong> capturing how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale. Case studies are from <strong>industry experts</strong> from teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify, Wix, Lyft, LinkedIn, and many more. Guidance that stands the test of time.</p>
3914.  
3915. <p>Join Addy Osmani, your curator, as we dive into a nuanced look at several key topics that will teach you tips and tricks that may help you optimize your own sites. The book also includes short interviews with contributors on what additional <strong>lessons, challenges, and tips</strong> they have to share some time after the case studies were written.</p>
3916.  
3917. <ul>
3918. <li><strong>Performance</strong> includes examples of measuring, budgeting, optimizing, and monitoring performance, in addition to tips for building a performance culture.</li>
3919. <li><strong>Capabilities</strong> is about bridging the gap between native capabilities and the modern web. You’ll explore web apps, native apps, and progressive web applications.</li>
3920. <li><strong>Accessibility</strong> makes web apps viable for diverse users, including people with temporary or permanent disabilities. Most of us will have a disability at some point in our lives, and these case studies show how we can make the web work for all of us.</li>
3921. <li><strong>Developer Experience</strong> is about building a project environment and culture that encourage support, growth, and problem-solving within teams. Strong teams build great projects!</li>
3922. </ul>
3923.  
3924. We’re Trying Out Something New
3925. <p>In an effort to conserve resources here at Smashing, we’re trying something new with <em>Success at Scale</em>. The printed book will be 304 pages, and we’ll make an <strong>expanded PDF version available to everyone who purchases a print book</strong>. This accomplishes a few good things:</p>
3926.  
3927. <ul>
3928. <li>We will use <strong>less paper and materials</strong> because we are making a smaller printed book;</li>
3929. <li>We’ll use fewer resources in general to print, ship, and store the books, leading to a <strong>smaller carbon footprint</strong>; and</li>
3930. <li>Keeping the book at more manageable size means we can <strong>continue to offer free shipping</strong> on all Smashing orders!</li>
3931. </ul>
3932.  
3933. <p>Smashing Books have always been printed with materials from <a href="https://fsc.org/en">FSC Certified</a> forests. We are committed to finding new ways to conserve resources while still bringing you the best possible reading experience.</p>
3934.  
3935.  
3936.    <a href="https://files.smashing.media/articles/success-at-scale-shipping-soon/success-at-scale-photoshop-opt.png">
3937.    <img src="https://files.smashing.media/articles/success-at-scale-shipping-soon/success-at-scale-photoshop-opt.png" />
3938.    </a>
3939.  
3940.  
3941.  
3942.  
3943. About the Author
3944. <p><a href="https://twitter.com/addyosmani"><img src="https://files.smashing.media/authors/addy-osmani-success-at-scale.jpg" /></a><em>Addy Osmani</em> is an engineering leader working on Google Chrome. He leads up Chrome’s Developer Experience organization, helping reduce the friction for developers to build great user experiences.</p>
3945.  
3946. Technical Details
3947. <ul>
3948. <li>ISBN: 978-3-910835-00-9 (print)</li>
3949. <li><strong>Quality hardcover</strong>, 304 pages, stitched binding, ribbon page marker.</li>
3950. <li>Free worldwide airmail <strong>shipping from Germany mid March 2024</strong>.</li>
3951. <li>eBook available for download as PDF, ePUB, and Amazon Kindle.</li>
3952. <li><a href="/printed-books/success-at-scale/">Pre-order the book.</a></li>
3953. </ul>
3954.  
3955. Community Matters ❤️
3956. <p>Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful <strong>community</strong>. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be <a href="https://www.smashingmagazine.com/membership">free for <em>Smashing Members</em></a>. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)</p>
3957.  
3958. More Smashing Books & Goodies
3959. <p>Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the <strong>core of everything we do</strong> at Smashing.</p>
3960.  
3961. <p>In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as <a href="/printed-books/">printed books that stand the test of time</a>. Heather and Steven are two of these people. Have you checked out their books already?</p>
3962.  
3963. <div>
3964.  
3965. <div><a href="/printed-books/understanding-privacy/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d2da7a90-acdb-43c7-82b2-5225c33ca4d7/understanding-privacy-cover-new-opt.png" /></a></div><h4><a href="/printed-books/understanding-privacy/">Understanding Privacy</a></h4><p>Everything you need to know to put your users first and make a better web.</p><p><a href="/printed-books/understanding-privacy/">Add to cart $44</a></p>
3966.  
3967. <div><a href="/printed-books/touch-design-for-mobile-interfaces/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b14658fc-bb2d-41a6-8d1a-70eaaf1b8ec8/touch-design-book-shop-opt.png" /></a></div><h4><a href="/printed-books/touch-design-for-mobile-interfaces/">Touch Design for Mobile Interfaces</a></h4><p>Learn how touchscreen devices really work — and how people really use them.</p><p><a href="/printed-books/touch-design-for-mobile-interfaces/">Add to cart $44</a></p>
3968.  
3969. <div><a href="/printed-books/checklist-cards/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/efffa8a0-82a0-415a-8aa5-8684a32083eb/checklist-cards-box-opt.png" /></a></div><h4><a href="/printed-books/checklist-cards/">Interface Design Checklists</a></h4><p>100 practical cards for common interface design challenges.</p>
3970. <p><a href="/printed-books/checklist-cards/">Add to cart $39</a></p>
3971.  
3972. </div>
3973. ]]></content:encoded>
3974.            <author>hello@smashingmagazine.com (Vitaly Friedman)</author>
3975.            <enclosure url="http://files.smashing.media/articles/success-at-scale-shipping-soon/sas-presale-ending-opt.png" length="0" type="image/png"/>
3976.        </item>
3977.        <item>
3978.            <title><![CDATA[Modern CSS Tooltips And Speech Bubbles (Part 2)]]></title>
3979.            <link>https://smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part2/</link>
3980.            <guid>https://smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part2/</guid>
3981.            <pubDate>Fri, 08 Mar 2024 12:00:00 GMT</pubDate>
3982.            <description><![CDATA[In Part 1 of this series, Temani Afif explored different CSS techniques to create tooltip shapes. The main challenge was to rely on a single element and create optimized code that could easily be controlled using CSS variables to update the size, shape, and position of the tail. In this second part, you are going explore more shapes.]]></description>
3983.            <content:encoded><![CDATA[<p>I hope you were able to spend time getting familiar with <a href="https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/">the techniques we used to create tooltips in Part 1</a> of this quick two-parter. Together, we were able to create a flexible tooltip pattern that supports different directions, positioning, and coloration without adding any complexity whatsoever to the HTML.</p>
3984. <p>We leveraged the CSS <code>border-image</code> property <a href="https://www.smashingmagazine.com/2024/01/css-border-image-property/">based on another article I wrote</a> while applying clever <code>clip-path</code> tricks to control the tooltip’s tail. If you haven’t checked out that article or the first part of this series, please do because we’re jumping straight into things today, and the context will be helpful.</p>
3985. <p>So far, we’ve looked at tooltip shapes with triangular tails with the option to have rounded corners and gradient coloration. Sure, we were able to do lots of things but there are many other — and more interesting — shapes we can accomplish. That’s what we’re doing in this article. We will handle cases where a tooltip may have a border and different tail shapes, still with the least amount of markup and most amount of flexibility.</p>
3986. <p>Before we start, I want to remind you that I’ve created <a href="https://css-generators.com/tooltip-speech-bubble/">a big collection of 100 tooltip shapes</a>. I said in Part 1 that we would accomplish all of them in these two articles. We covered about half of them in Part 1, so let’s wrap things up here in Part 2.</p>
3987. The HTML
3988. <p>Same as before!</p>
3989. <pre><code>&lt;div class="tooltip"&gt;Your text content goes here&lt;/div&gt;
3990. </code></pre>
3991.  
3992. <p>That’s the beauty of what we’re making: We can create many, many different tooltips out of the same single HTML element without changing a thing.</p>
3993. Tooltips With Borders
3994. <p>Adding a border to the tooltips we made in Part 1 is tricky. We need the border to wrap around both the main element and the tail in a continuous fashion so that the combined shape is seamless. Let’s start with the first simple shape we created in Part 1 using only two CSS properties:</p>
3995. <pre><code>.tooltip {
3996.  /* tail dimensions */
3997.  --b: 2em; /* base */
3998.  --h: 1em; /* height*/
3999.  
4000.  /* tail position */
4001.  --p: 50%;
4002.  
4003.  border-image: fill 0 // var(--h)
4004.    conic-gradient(#CC333F 0 0);
4005.  clip-path:
4006.    polygon(0 100%, 0 0,100% 0, 100% 100%,
4007.      min(100%, var(--p) + var(--b) / 2) 100%,
4008.      var(--p) calc(100% + var(--h)),
4009.      max(0%, var(--p) - var(--b) / 2) 100%);
4010. }
4011. </code></pre>
4012.  
4013. <p>Here’s the demo. You can use the range slider to see how flexible it is to change the tail position by updating the <code>--p</code> variable.</p>
4014. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-speech-bubbles-part2/1-close-up-tooltip-tail-border-800px.png" /></p>
4015. <p>This probably is not that a big deal in most cases. A few pixels aren’t a glaring visual issue, but you can decide whether or not it meets your needs. Me? I’m a perfectionist, so let’s try to fix this minor detail even if the code will get a little more complex.</p>
4016. <p>We need to do some math that requires trigonometric functions. Specifically, we need to change some of the variables because we cannot get what we want with the current setup. Instead of using the <strong>base</strong> variable for the tail’s dimensions, I will consider an <strong>angle</strong>. The second variable that controls the <strong>height</strong> will remain unchanged.</p>
4017. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-speech-bubbles-part2/2-tail-base-height-angle-height.png" /></p>
4018. <p>The relationship between the base (<code>--b</code>) and the angle (<code>--a</code>) is equal to <code>B = 2*H*tan(A/2)</code>. We can use this to update our existing code:</p>
4019. <pre><code>.tooltip {
4020.  /* tail dimensions */
4021.  --a: 90deg; /* angle */
4022.  --h: 1em; /* height */
4023.  
4024.  --p: 50%; /* position */
4025.  --t: 5px; /* border thickness */
4026.  
4027.  border-image: fill 0 // var(--h)
4028.    conic-gradient(#5e412f 0 0); /* the border color */
4029.  clip-path:
4030.    polygon(0 100%, 0 0, 100% 0, 100% 100%,
4031.      min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) 100%,
4032.      var(--p) calc(100% + var(--h)),
4033.      max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) 100%);
4034.  position: relative;
4035.  z-index: 0;
4036. }
4037. .tooltip:before {
4038.  content: "";
4039.  position: absolute;
4040.  inset: var(--t) 0;
4041.  border-image: fill 0 / 0 var(--t) / var(--h) 0
4042.    conic-gradient(#CC333F 0 0); /* the background color */
4043.  clip-path: inherit;
4044. }
4045. </code></pre>
4046.  
4047. <p>Nothing drastic has changed. We introduced a new variable to control the border thickness (<code>--t</code>) and updated the <code>clip-path</code> property with the new variables that define the tail’s dimensions.</p>
4048. <p>Now, all the work will be done on the pseudo-element’s <code>clip-path</code> property. It will no longer <code>inherit</code> the main element’s value, but it does need a new value to get the correct border thickness around the tail. I want to avoid getting deep into the complex math behind all of this, so here is the implementation:</p>
4049. <div>
4050. <pre><code>clip-path:
4051.  polygon(0 100%, 0 0, 100% 0, 100% 100%,
4052.    min(100% - var(--t), var(--p) + var(--h)<em>tan(var(--a)/2) - var(--t)</em>tan(45deg - var(--a) / 4)) 100%,
4053.    var(--p) calc(100% + var(--h) + var(--t)<em>(1 - 1/sin(var(--a)/2))),
4054.    max(var(--t), var(--p) - var(--h)</em>tan(var(--a)/2) + var(--t)*tan(45deg - var(--a)/4)) 100%);
4055. </code></pre>
4056. </div>
4057.  
4058. <p>It looks complex because it is! You don’t really need to understand the formulas since all you have to do is adjust a few variables to control everything.</p>
4059. <p>Now, finally, our tooltip is perfect. Here is an interactive demo where you can adjust the position and the thickness. Don’t forget to also play with the dimension of the tail as well.</p>
4060. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-speech-bubbles-part2/3-tooltip-variations.png" /></p>
4061. <p>Let’s move on to the rounded corners. We can simply use the code we created in the previous article. We duplicate the shape using a pseudo-element and make a few adjustments for perfect alignment and a correct border thickness.</p>
4062. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-speech-bubbles-part2/4-tooltip-variations-border-rounded-corners.png" /></p>
4063. <p>The reason I’m not going into details for this one is to make the point that you don’t have to remember all the various use cases and code snippets by heart. The goal is to understand the actual concepts we are using to build the tooltips, like working with <code>border-image</code>, <code>clip-path()</code>, gradients, and math functions.</p>
4064. <p>I can’t even remember most of the code I write after it’s done, but it’s no issue since all I have to do is copy and paste then adjust a few variables to get the shape I want. That’s the benefit of leveraging modern CSS features — they handle a lot of the work for us.</p>
4065. Border-Only Tooltips
4066. <p>I’d like to do one more exercise with you, this time making a tooltip with no fill but still with a full border around the entire shape. So far, we’ve been able to reuse a lot of the code we put together in Part 1, but we’re going to need new tricks to pull this one off.</p>
4067. <p>The goal is to establish a transparent background while maintaining the border. We’ll start <em>without</em> rounded corners for the moment.</p>
4068. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-speech-bubbles-part2/5-tooltip-thick-solid-border.png" /></p>
4069. <p>See how we’re going to be working with gradients again? I could have used a single color to produce a solid, single-color border, but I put a hard stop in there to demonstrate the idea. We’ll be able to create even more variations, thanks to this little detail, like using multiple colors, different color stops, and even different types of gradients.</p>
4070. <p>You’ll see that the code looks fairly straightforward:</p>
4071. <div>
4072. <pre><code>.tooltip {
4073.  /* tail dimension */
4074.  --a: 90deg; /* angle */
4075.  --h: 1em; /* height */
4076.  
4077.  --p: 50%; /* tail position */
4078.  --b: 7px; /* border thickness */
4079.  
4080.  position: relative;
4081. }
4082. .tooltip:before {
4083.  content: "";
4084.  position: absolute;
4085.  inset: 0 0 calc(-1*var(--h));
4086.  clip-path: polygon( ... ); /* etc. */
4087.  background: linear-gradient(45deg, #cc333f 50%, #79bd9a 0); /* colors */
4088. }
4089. </code></pre>
4090. </div>
4091.  
4092. <p>We’re using pseudo element again, this time with a <code>clip-path</code> to establish the shape. From there, we set a <code>linear-gradient()</code> on the <code>background</code>. </p>
4093. <p>I said the code “looks” very straightforward. Structurally, yes. But I purposely put a placeholder <code>clip-path</code> value because that’s the complicated part. We needed to use a 16-point polygon and math formulas, which honestly gave me big headaches.</p>
4094. <p>That’s why I turn to my <a href="https://css-generators.com/tooltip-speech-bubble/">online generator</a> in most cases. After all, what’s the point of everyone spending hours trying to suss out which formulas to use if math isn’t your thing? May as well use the tools that are available to you! But note how much better it feels to use those tools when you understand the concepts that are working under the hood.</p>
4095. <p>OK, let’s tackle rounded corners:</p>
4096. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-speech-bubbles-part2/6-tooltip-with-transparent-background.png" /></p>
4097. <p>For this one, we are going to rely on not one, but <em>two</em> pseudo-elements, <code>:before</code> and <code>:after</code>. One will create the rounded shape, and the other will serve as the tail.</p>
4098. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-speech-bubbles-part2/7-illustrating-three-step-process.png" /></p>
4099. <p>The above figure illustrates the process for creating the rounded part with the <code>:before</code> pseudo-element. We first start with a simple rectangular shape that’s filled with a conic gradient containing three colors. Then, we mask the shape so that the inner area is transparent. After that, we use a <code>clip-path</code> to cut out a small part of the bottom edge to reserve space for the tail we’ll make with the <code>:after</code> pseudo-element.</p>
4100. <div>
4101. <pre><code>/* the main element */
4102. .tooltip {
4103.  /* tail dimension */
4104.  --a: 90deg; /* angle */
4105.  --h: 1em; /* height */
4106.  
4107.  --p: 50%; /* tail position  */
4108.  --b: 7px; /* border thickness */
4109.  --r: 1.2em; /* the radius */
4110.  
4111.  position: relative;
4112.  z-index: 0;
4113. }
4114.  
4115. /* both pseudo-elements */
4116. .tooltip:before,
4117. .tooltip:after {
4118.  content: "";
4119.  background: conic-gradient(#4ECDC4 33%, #FA2A00 0 66%, #cf9d38 0);  /* the coloration */
4120.  inset: 0;
4121.  position: absolute;
4122.  z-index: -1;
4123. }
4124.  
4125. /* the rounded rectangle */
4126. .tooltip:before {
4127.  background-size: 100% calc(100% + var(--h));
4128.  clip-path: polygon( ... );
4129.  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
4130.  mask-composite: exclude;
4131.  padding: var(--b);
4132. }
4133.  
4134. /* the tail */
4135. .tooltip:after {
4136.  content: "";
4137.  position: absolute;
4138.  bottom: calc(-1 * var(--h));
4139.  clip-path: polygon( ... );
4140. }
4141. </code></pre>
4142. </div>
4143.  
4144. <p>Once again, the structure is not all that complex and the <code>clip-path</code> value is the tough part. As I said earlier, there’s really no need to get deep into an explanation on it when we can use the points from an online generator to get the exact shape we want.</p>
4145. <p>The new piece that is introduced in this code is the <code>mask</code> property. It uses the same technique we covered in yet <a href="https://www.smashingmagazine.com/2023/09/revealing-images-css-mask-animations/">another Smashing article</a> I wrote. Please read that for the full context of how <code>mask</code> and <code>mask-composite</code> work together to trim the transparent area. That’s the first part of your homework after finishing this article.</p>
4146. Fun Tail Shapes
4147. <p>We’ve covered pretty much every single one of the tooltips available in <a href="https://css-generators.com/tooltip-speech-bubble/">my collection</a>. The only ones we have not specifically touched use a variety of different shapes for the tooltip’s tail.</p>
4148. <p>All of the tooltips we created in this series used a simple triangle-shaped tail, which is a standard tooltip pattern. Sure, we learned how to change its dimensions and position, but what if we want a different sort of tooltip? Maybe we want something fancier or something that looks more like a speech or thought bubble.</p>
4149. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-speech-bubbles-part2/8-tooltips.png" /></p>
4150. <p>If the rounded corners in the last section are the first part of your homework, then the next part is to try making these tail variations yourself using what we have learned together in these two articles. You can always find the code over at <a href="https://css-generators.com/tooltip-speech-bubble">my collection</a> for reference and hints. And, leave a comment here if you have any additional questions — I’m happy to help!</p>
4151. Conclusion
4152. <p>I hope you enjoyed this little series because I sure had a blast writing it. I mean, look at all of the things we accomplished in a relatively short amount of space: simple rectangular tooltips, rounded corners, different tail positions, solid and gradient backgrounds, a bunch of border options, and finally, custom shapes for the tail.</p>
4153. <p>I probably went too far with how many types of tooltips we could make — <a href="https://css-generators.com/tooltip-speech-bubble/">there are 100 in total</a> when you count them up! But it goes to show just how many possibilities there are, even when we’re always using the same single element in the HTML.</p>
4154. <p>And, it’s great practice to consider all of the different use cases and situations you may run into when you need a tooltip component. Keep these in your back pocket for when you need them, and use my collection as a reference, for inspiration, or as a starting point for your own work!</p>
4155. <h3>Further Reading On SmashingMag</h3>
4156. <ul>
4157. <li>“<a href="https://www.smashingmagazine.com/2023/11/css-responsive-multi-line-ribbon-shapes-part1/">CSS Responsive Multi-Line Ribbon Shapes (Part 1)</a>,” Temani Afif</li>
4158. <li>“<a href="https://www.smashingmagazine.com/2019/04/art-direction-for-the-web-using-css-shapes/">Art Direction For The Web Using CSS Shapes</a>,” Andrew Clarke</li>
4159. <li>“<a href="https://www.smashingmagazine.com/2018/09/css-shapes/">Take A New Look At CSS Shapes</a>,” Rachel Andrew</li>
4160. <li>“<a href="https://www.smashingmagazine.com/2023/10/animate-along-path-css/">How To Animate Along A Path In CSS</a>,” Preethi Sam</li>
4161. </ul>
4162. ]]></content:encoded>
4163.            <author>hello@smashingmagazine.com (Temani Afif)</author>
4164.            <enclosure url="http://files.smashing.media/articles/modern-css-tooltips-part1/modern-css-tooltips-speech-bubbles.jpg" length="0" type="image/jpg"/>
4165.        </item>
4166.        <item>
4167.            <title><![CDATA[The End Of My Gatsby Journey]]></title>
4168.            <link>https://smashingmagazine.com/2024/03/end-of-gatsby-journey/</link>
4169.            <guid>https://smashingmagazine.com/2024/03/end-of-gatsby-journey/</guid>
4170.            <pubDate>Wed, 06 Mar 2024 08:00:00 GMT</pubDate>
4171.            <description><![CDATA[[“Gatsby headaches”](https://www.smashingmagazine.com/2023/06/gatsby-headaches-i18n-part-1/) are over. Juan Diego Rodríguez reflects on his decision to stop using Gatsby as his go-to framework. Through a detailed examination of its strengths and weaknesses, he provides valuable insights and alternative options for developers navigating their tooling choices.]]></description>
4172.            <content:encoded><![CDATA[<p>A fun fact about me is that my birthday is on Valentine’s Day. This year, I wanted to celebrate by launching a simple website that lets people receive anonymous letters through a personal link. The idea came up to me at the beginning of February, so I wanted to finish the project as soon as possible since time was of the essence.</p>
4173. <p>Having that in mind, I decided not to do SSR/SSG with Gatsby for the project but rather go with a single-page application (SPA) using Vite and React — a rather hard decision considering my extensive experience with Gatsby. Years ago, when I started using React and learning more and more about today’s <a href="https://www.smashingmagazine.com/2024/02/web-development-getting-too-complex/#comments-web-development-getting-too-complex">intricate web landscape</a>, I picked up <a href="https://gatsbyjs.com/">Gatsby.js</a> as my render framework of choice because SSR/SSG was necessary for every website, right?</p>
4174. <p>I used it for <em>everything</em>, from the most basic website to the most over-engineered project. I absolutely loved it and thought it was the best tool, and I was incredibly confident in my decision since I was getting perfect Lighthouse scores in the process.</p>
4175. <p>The years passed, and I found myself constantly fighting with Gatsby plugins, resorting to <em>hacky</em> solutions for them and even spending more time waiting for the server to start. It felt like I was fixing more than making. I even <a href="https://www.smashingmagazine.com/2023/06/gatsby-headaches-i18n-part-1/">started a series for this magazine all about the “Gatsby headaches” I experienced most</a> and how to overcome them.</p>
4176. <p>It was like Gatsby got tougher to use with time because of lots of unaddressed issues: outdated dependencies, cold starts, slow builds, and stale plugins, to name a few. Starting a Gatsby project became tedious for me, and perfect Lighthouse scores couldn’t make up for that.</p>
4177. <p>So, I’ve decided to stop using Gatsby as my go-to framework.</p>
4178. <p>To my surprise, the Vite + React combination I mentioned earlier turned out to be a lot more efficient than I expected while maintaining almost the same great performance measures as Gatsby. It’s a hard conclusion to stomach after years of Gatsby’s loyalty.</p>
4179. <p>I mean, I still think Gatsby is extremely useful for plenty of projects, and I plan on talking about those in a bit. But Gatsby has undergone a series of recent unfortunate events after Netlify acquired it, the impacts of which can be seen in <a href="https://2022.stateofjs.com/en-US/libraries/rendering-frameworks">down-trending results from the most recent State of JavaScript survey</a>. The likelihood of a developer picking up Gatsby again after using it for other projects plummeted from 89% to a meager 38% between 2019 and 2022 alone.</p>
4180. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/rendering_frameworks_experience_ranking.png" /></p>
4181. <p>Although Gatsby was still the second most-used rendering framework as recently as 2022 — we are still expecting results from the 2023 survey — my prediction is that the decline will continue and dip well below 38%.</p>
4182. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/rendering_frameworks_experience_ranking_usage.png" /></p>
4183. <p>Seeing as this is my personal farewell to Gatsby, I wanted to write about where, in my opinion, it went wrong, where it is still useful, and how I am handling my future projects.</p>
4184. Gatsby: A Retrospective
4185. <p><a href="https://github.com/gatsbyjs/gatsby/releases/tag/0.2.0">Kyle Mathews started working on what would eventually become Gatsby</a> in late 2015. Thanks to its unique data layer and SSG approach, it was hyped for success and achieved a <a href="https://changelog.com/founderstalk/59">$3.8 million funding seed round in 2018</a>. Despite initial doubts, Gatsby remained steadfast in its commitment and became a frontrunner in the <a href="https://css-tricks.com/what-makes-a-site-jamstack/">Jamstack</a> community by consistently enhancing its open-source framework and bringing new and better changes with each version.</p>
4186. <p>So... where did it all go wrong?</p>
4187. <p>I’d say it was the introduction of <a href="https://www.gatsbyjs.com/docs/reference/cloud/what-is-gatsby-cloud/">Gatsby Cloud</a> in 2019, as Gatsby aimed at generating continuous revenue and solidifying its business model. Many (myself included) pinpoint Gatsby’s downfall to Gatsby Cloud, as it would end up cutting resources from the main framework and even making it harder to host in other cloud providers.</p>
4188. <p>The core framework had been optimized in a way that using Gatsby and Gatsby Cloud together required no additional hosting configurations, which, as a consequence, made deployments in other platforms much more difficult, both by neglecting to provide documentation for third-party deployments and by releasing exclusive features, like <a href="https://www.gatsbyjs.com/blog/what-are-incremental-cloud-builds-on-gatsby/#gatsby-skip-here">incremental builds</a>, that were only available to Gatsby users who had committed to using Gatsby Cloud. In short, hosting projects on anything but Gatsby Cloud felt like a penalty.</p>
4189. <p>As a framework, Gatsby lost users to Next.js, as shown in both surveys and npm trends, while Gatsby Cloud struggled to compete with the likes of Vercel and Netlify; the former <a href="https://www.gatsbyjs.com/blog/gatsby-is-joining-netlify/">acquiring Gatsby in February of 2023</a>.</p>
4190. <blockquote>“It [was] clear after a while that [Gatsby] weren’t winning the framework battle against Vercel, as a general purpose framework [...] And they were probably a bit boxed in by us in terms of building a cloud platform.”<br /><br />— <a href="https://thenewstack.io/netlify-acquires-gatsby-its-struggling-jamstack-competitor/">Matt Biilmann</a>, Netlify CEO</blockquote>
4191.  
4192. <p>The Netlify acquisition was the last straw in an already tumbling framework haystack. The migration from Gatsby Cloud to Netlify wasn’t pretty for customers either; some teams were charged 120% more — or had <a href="https://www.reddit.com/r/webdev/comments/1b14bty/netlify_just_sent_me_a_104k_bill_for_a_simple/">incurred extraneous fees</a> — after converting from Gatsby Cloud to Netlify, even with the same Gatsby Cloud plan they had! Many key Gatsby Cloud features, specifically incremental builds that reduced build times of small changes from minutes to seconds, were simply no longer available in Netlify, despite Kyle Mathews <a href="https://www.gatsbyjs.com/blog/gatsby-is-joining-netlify/">saying they would be ported over to Netlify</a>:</p>
4193. <blockquote>“Many performance innovations specifically for large, content-heavy websites, preview, and collaboration workflows, will be incorporated into the Netlify platform and, where relevant, made available across frameworks.”<br /><br />— Kyle Mathews</blockquote>
4194.  
4195. <p>However, in a Netlify forum thread dated August 2023, a mere six months after the acquisition, a Netlify support engineer contradicted Mathews’s statement, saying <a href="https://answers.netlify.com/t/how-to-enable-gatsby-incremental-build-2023/99488/4">there were no plans to add incremental features in Netlify</a>.</p>
4196. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/netlify-forum-message-from-engineer.png" /></p>
4197. <p>That left no significant reason to remain with Gatsby. And I think <a href="https://answers.netlify.com/t/how-to-enable-gatsby-incremental-build-2023/99488/4">this comment on the same thread</a> perfectly sums up the community’s collective sentiment:</p>
4198. <blockquote>“Yikes. Huge blow to Gatsby Cloud customers. The incremental build speed was exactly why we switched from Netlify to Gatsby Cloud in the first place. It’s really unfortunate to be forced to migrate while simultaneously introducing a huge regression in performance and experience.”</blockquote>
4199.  
4200. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/netlify-forum-message-from-user.png" /></p>
4201. <p>Netlify’s acquisition also brought about a <em>company restructuring</em> that substantially reduced the headcount of Gatsby’s engineering team, followed by a complete stop in commit activities. A report in an ominous tweet by Astro co-founder Fred Schott further exacerbated concerns about Gatsby’s future.</p>
4202. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/tweet-fredkschott.png" /></p>
4203. <p>Lennart Jörgens, former full-stack developer at Gatsby and Netlify, replied, insinuating there was only one person left after the layoffs:</p>
4204. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/tweet-on-one-person-on-the-team.png" /></p>
4205. <p>You can see all these factors contributing to Gatsby’s usage downfall in the <a href="https://survey.stackoverflow.co/2023#section-most-popular-technologies-web-frameworks-and-technologies">2023 Stack Overflow survey</a>.</p>
4206. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/stack-overflow-survey-rendering-frameworks.png" /></p>
4207. <p>Biilmann addressed the community’s concerns about Gatsby’s viability in an <a href="https://github.com/gatsbyjs/gatsby/issues/38696#issuecomment-1817064739">open issue from the Gatsby repository</a>:</p>
4208. <blockquote>“While we don’t plan for Gatsby to be where the main innovation in the framework ecosystem takes place, it will be a safe, robust and reliable choice to build production quality websites and e-commerce stores, and will gain new powers by ways of great complementary tools.”<br /><br />— Matt Biilmann</blockquote>
4209.  
4210. <p>He also shed light on Gatsby’s future focus:</p>
4211. <blockquote><ul><li>“First, ensure stability, predictability, and good performance.</li>
4212. <li>Second, give it new powers by strong integration with all new tooling that we add to our Composable Web Platform (for more on what’s all that, you can check out our homepage).</li>
4213. <li>Third, make Gatsby more open by decoupling some parts of it that were closely tied to proprietary cloud infrastructure. The already-released Adapters feature is part of that effort.”</li></ul><br />— Matt Biilmann</blockquote>
4214.  
4215. <p>So, Gatsby gave up competing against Next.js on innovation, and instead, it will focus on keeping the existing framework clean and steady in its current state. Frankly, this seems like the most reasonable course of action considering today’s state of affairs.</p>
4216. Why Did People Stop Using Gatsby?
4217. <p>Yes, Gatsby Cloud ended abruptly, but as a framework independent of its cloud provider, other aspects encouraged developers to look for alternatives to Gatsby.</p>
4218. <p>As far as I am concerned, Gatsby’s developer experience (<abbr>DX</abbr>) became more of a burden than a help, and there are two main culprits where I lay the blame: <strong>dependency hell</strong> and <strong>slow bundling times</strong>.</p>
4219. <h3>Dependency Hell</h3>
4220. <p>Go ahead and start a new Gatsby project:</p>
4221. <pre><code>gatsby new
4222. </code></pre>
4223.  
4224. <p>After waiting a couple of minutes you will get your brand new Gatsby site. You’d rightly expect to have a clean slate with zero vulnerabilities and outdated dependencies with this out-of-the-box setup, but here’s what you will find in the terminal once you run <code>npm audit</code>:</p>
4225. <pre><code>18 vulnerabilities (11 moderate, 6 high, 1 critical)
4226. </code></pre>
4227.  
4228. <p>That looks concerning — and it is — not so much from a security perspective but as an indication of decaying DX. As a static site generator (SSG), Gatsby will, unsurprisingly, deliver a static and safe site that (normally) doesn’t have access to a database or server, making it immune to most cyber attacks. Besides, lots of those vulnerabilities are in the developer tools and never reach the end user. Alas, relying on <code>npm audit</code> to assess your site security is <a href="https://overreacted.io/npm-audit-broken-by-design/">a naive choice at best</a>.</p>
4229. <p>However, those vulnerabilities reveal an underlying issue: the whopping number of dependencies Gatsby uses is 168(!) at the time I’m writing this. For the sake of comparison, Next.js uses 16 dependencies. A lot of Gatsby’s dependencies are outdated, hence the warnings, but trying to update them to their latest versions will likely unleash a dependency hell full of additional npm warnings and errors.</p>
4230. <p>In a <a href="https://www.reddit.com/r/gatsbyjs/comments/woccnn/is_it_possible_to_have_a_gatsby_project_without/">related subreddit</a> from 2022, a user asked, “Is it possible to have a Gatsby site without vulnerabilities?”</p>
4231. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/is-it-possible-to-have-a-gatsby-site-without-vulnerabilities.png" /></p>
4232. <p>The real answer is disappointing, but as of March 2024, it remains true.</p>
4233. <p>A Gatsby site should work completely fine, even with that many dependencies, and extending your project shouldn’t be a problem, whether through its plugin ecosystem or other packages. However, when trying to upgrade any existing dependency you will find that you can’t! Or at least you can’t do it without introducing breaking changes to one of the 168 dependencies, many of which rely on outdated versions of other libraries that also cannot be updated.</p>
4234. <p>It’s that inception-like roundabout of dependencies that I call <strong>dependency hell</strong>.</p>
4235. <h3>Slow Build And Development Times</h3>
4236. <p>To me, one of the most important aspects of choosing a development tool is how comfortable it feels to use it and how fast it is to get a project up and running. <a href="https://www.smashingmagazine.com/2024/02/web-development-getting-too-complex/">As I’ve said before</a>, users don’t care or know what a “tech stack” is or what framework is in use; they want a good-looking website that helps them achieve the task they came for. Many developers don’t even question what tech stack is used on each site they visit; at least, I hope not.</p>
4237. <p>With that in mind, choosing a framework boils down to how efficiently you can use it. If your development server constantly experiences cold starts and crashes and is unable to quickly reflect changes, that’s a poor DX and a signal that there may be a better option.</p>
4238. <p>That’s the main reason I won’t automatically reach for Gatsby from here on out. Installation is no longer a trivial task; the dependencies are firing off warnings, and it takes the development server upwards of 30 seconds to boot. I’ve even found that the longer the server runs, the slower it gets; this happens constantly to me, though I admittedly have not heard similar gripes from other developers. Regardless, I get infuriated having to constantly restart my development server every time I make a change to <code>gatsby-config.js</code>, <code>gatsby-node.js</code> files, or any other data source.</p>
4239. <p>This new reality is particularly painful, knowing that a Vite.js + React setup can start a server within 500ms <a href="https://esbuild.github.io">thanks to the use of esbuild</a>.</p>
4240. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/bundlers-time.png" /></p>
4241. <p>Running <code>gatsby build</code> gets worse. Build times for larger projects normally take some number of minutes, which is understandable when we consider all of the pages, data sources, and optimizations Gatsby does behind the scenes. However, even a small content edit to a page triggers a full build and deployment process, and the endless waiting is not only exhausting but downright distracting for getting things done. That’s what incremental builds were designed to solve and the reason many people switched from Netlify to Gatsby Cloud when using Gatsby. It’s a shame we no longer have that as an available option.</p>
4242. <p>The moment Gatsby Cloud was discontinued along with incremental builds, the incentives for continuing to use Gatsby became pretty much non-existent. The <strong>slow build times</strong> are simply too costly to the development workflow.</p>
4243. What Gatsby Did Awesomely Well
4244. <p>I still believe that Gatsby has awesome things that other rendering frameworks don’t, and that’s why I will keep using it, albeit for specific cases, such as my personal website. It just isn’t my go-to framework for everything, mainly because Gatsby (and the Jamstack) wasn’t meant for every project, even if Gatsby was marketed as a general-purpose framework.</p>
4245. <p>Here’s where I see Gatsby still leading the competition:</p>
4246. <ul>
4247. <li><strong>The GraphQL data layer.</strong><br />In Gatsby, all the configured data is available in the same place, a <em>data layer</em> that’s easy to access using GraphQL queries in any part of your project. This is by far the best Gatsby feature, and it trivializes the process of building static pages from data, e.g., a blog from a content management system API or documentation from Markdown files.</li>
4248. <li><strong>Client performance.</strong><br />While Gatsby’s developer experience is questionable, I believe it delivers one of the best user experiences for navigating a website. Static pages and assets deliver the fastest possible load times, and using React Router with pre-rendering of proximate links offers one of the smoothest experiences navigating between pages. We also have to note Gatsby’s amazing image API, which optimizes images to all extents.</li>
4249. <li><strong>The plugin ecosystem (kinda).</strong><br />There is typically a Gatsby plugin for everything. This is awesome when using a CMS as a data source since you could just install its specific plugin and have all the necessary data in your data layer. However, a lot of plugins went unmaintained and grew outdated, introducing unsolvable dependency issues that come with dependency hell.</li>
4250. </ul>
4251. <p>I briefly glossed over the good parts of Gatsby in contrast to the bad parts. Does that mean that Gatsby has more bad parts? Absolutely not; you just won’t find the bad parts in any documentation. The bad parts also aren’t deal breakers in isolation, but they snowball into a tedious and lengthy developer experience that pushes away its advocates to other solutions or rendering frameworks.</p>
4252. <h3>Do We Need SSR/SSG For Everything?</h3>
4253. <p>I’ll go on record saying that I am not replacing Gatsby with another rendering framework, like Next.js or Remix, but just avoiding them altogether. I’ve found they aren’t actually needed in a lot of cases.</p>
4254. <p>Think, why do we use any type of rendering framework in the first place? I’d say it’s for two main reasons: <strong>crawling bots</strong> and <strong>initial loading time</strong>.</p>
4255. <h4>SEO And Crawling Bots</h4>
4256. <p>Most React apps start with a hollow body, only having an empty <code>&lt;div&gt;</code> alongside <code>&lt;script&gt;</code> tags. The JavaScript code then runs in the browser, where React creates the Virtual DOM and injects the rendered user interface into the browser.</p>
4257. <p>Over slow networks, users may notice a white screen before the page is actually rendered, which is just mildly annoying at best (but <a href="https://ericwbailey.design/published/modern-health-frameworks-performance-and-harm/">devastating at worst</a>).</p>
4258. <p>However, search engines like Google and Bing deploy bots that only see an empty page and decide not to crawl the content. Or, if you are linking up a post on social media, you may not get OpenGraph benefits like a link preview.</p>
4259. <pre><code>&lt;body&gt;
4260.  <div id="root"></div>
4261.  
4262.  <script type="module" src="/src/main.tsx"></script>
4263. </body>
4264. </code></pre>
4265.  
4266. <p>This was the case years ago, making SSR/SSG necessary for getting noticed by Google bots. Nowadays, <a href="https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics">Google can run JavaScript</a> and render the content to crawl your website. While using SSR or SSG does make this process faster, not all bots can run JavaScript. It’s a tradeoff you can make for a lot of projects and one you can minimize on your cloud provider by <a href="https://docs.netlify.com/site-deploys/post-processing/prerendering/">pre-rendering</a> your content.</p>
4267. <h4>Initial Loading Time</h4>
4268. <p>Pre-rendered pages load faster since they deliver static content that relieves the browser from having to run expensive JavaScript.</p>
4269. <p>It’s especially useful when loading pages that are behind authentication; in a client-side rendered (CSR) page, we would need to display a loading state while we check if the user is logged in, while an SSR page can perform the check on the server and send back the correct static content. I have found, however, that this trade-off is an uncompelling argument for using a rendering framework over a CSR React app.</p>
4270. <p>In any case, my SPA built on React + Vite.js gave me a perfect Lighthouse score for the landing page. Pages that fetch data behind authentication resulted in near-perfect Core Web Vitals scores.</p>
4271. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/landing-page-lighthouse-score.png" /></p>
4272. <p><img src="https://files.smashing.media/articles/end-of-gatsby-journey/page-guarded-by-auth-lighthouse-score.png" /></p>
4273. What Projects Gatsby Is Still Good For
4274. <p>Gatsby and rendering frameworks are excellent for programmatically creating pages from data and, specifically, for blogs, e-commerce, and documentation.</p>
4275. <p>Don’t be disappointed, though, if it isn’t the right tool for <em>every</em> use case, as that is akin to blaming a screwdriver for not being a good hammer. It still has good uses, though fewer than it could due to all the reasons we discussed before.</p>
4276. <p>But Gatsby is still a useful tool. If you are a Gatsby developer the main reason you’d reach for it is because you <em>know</em> Gatsby. Not using it might be considered an <strong>opportunity cost</strong> in economic terms:</p>
4277. <blockquote>“Opportunity cost is the value of the next-best alternative when a decision is made; it’s what is given up.”</blockquote>
4278.  
4279. <p>Imagine a student who spends an hour and $30 attending a yoga class the evening before a deadline. The opportunity cost encompasses the time that could have been dedicated to completing the project and the $30 that could have been used for future expenses.</p>
4280. <p>As a Gatsby developer, I could start a new project using another rendering framework like Next.js. Even if Next.js has faster server starts, I would need to factor in my learning curve to use it as efficiently as I do Gatsby. That’s why, for my latest project, I decided to avoid rendering frameworks altogether and use Vite.js + React — I wanted to avoid the opportunity cost that comes with spending time learning how to use an “unfamiliar” framework.</p>
4281. Conclusion
4282. <p>So, is Gatsby dead? Not at all, or at least I don’t think Netlify will let it go away any time soon. The acquisition and subsequent changes to Gatsby Cloud may have taken a massive toll on the core framework, but Gatsby is very much still breathing, even if the current slow commits pushed to the repo look like it’s barely alive or hibernating.</p>
4283. <p>I will most likely stick to Vite.js + React for my future endeavors and only use rendering frameworks when I actually need them. What are the tradeoffs? Sacrificing negligible page performance in favor of a faster and more pleasant DX that maintains my sanity? I’ll take that deal every day.</p>
4284. <p>And, of course, this is <em>my</em> experience as a long-time Gatsby loyalist. Your experience is likely to differ, so the mileage of everything I’m saying may vary depending on your background using Gatsby on your own projects.</p>
4285. <p>That’s why I’d love for you to comment below: if you see it differently, please tell me! Is your current experience using Gatsby different, better, or worse than it was a year ago? What’s different to you, if anything? It would be awesome to get other perspectives in here, perhaps from someone who has been involved in maintaining the framework.</p>
4286. <h4>Further Reading On SmashingMag</h4>
4287. <ul>
4288. <li><a href="https://www.smashingmagazine.com/2023/06/gatsby-headaches-i18n-part-1/">Gatsby Headaches And How To Cure Them: i18n (Part 1)</a></li>
4289. <li><a href="https://www.smashingmagazine.com/2023/06/gatsby-headaches-i18n-part-2/">Gatsby Headaches And How To Cure Them: i18n (Part 2)</a></li>
4290. <li><a href="https://www.smashingmagazine.com/2023/10/gatsby-headaches-working-media-part1/">Gatsby Headaches: Working With Media (Part 1)</a></li>
4291. <li><a href="https://www.smashingmagazine.com/2023/10/gatsby-headaches-working-media-part2/">Gatsby Headaches: Working With Media (Part 2)</a></li>
4292. </ul>
4293. ]]></content:encoded>
4294.            <author>hello@smashingmagazine.com (Juan Diego Rodríguez)</author>
4295.            <enclosure url="http://files.smashing.media/articles/end-of-gatsby-journey/end-of-gatsby-journey.jpg" length="0" type="image/jpg"/>
4296.        </item>
4297.        <item>
4298.            <title><![CDATA[Modern CSS Tooltips And Speech Bubbles (Part 1)]]></title>
4299.            <link>https://smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/</link>
4300.            <guid>https://smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/</guid>
4301.            <pubDate>Fri, 01 Mar 2024 12:00:00 GMT</pubDate>
4302.            <description><![CDATA[Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips with the smallest amount of markup and the greatest amount of flexibility.
4303. ]]></description>
4304.            <content:encoded><![CDATA[<p>In <a href="https://www.smashingmagazine.com/2023/11/css-responsive-multi-line-ribbon-shapes-part1/">a previous article</a>, we explored ribbon shapes and different ways to approach them using clever combinations of CSS gradients and <code>clip-path()</code>. This time, I’d like to explore another shape, one that you’ve likely had to tackle at least once in your front-end life: <strong>tooltips</strong>. You know what we’re talking about, those little things that look like speech bubbles from comic books. They’re everywhere in the wild, from a <a href="https://css-tricks.com/long-hover/">hover effect for buttons</a> to <a href="https://css-tricks.com/introducing-trashy-css/">the text messaging app on your phone</a>.</p>
4305. <p>The shapes may look easy to make in CSS at first glance, but it always ends with a lot of struggles. For example, how do you adjust the position of the tail to indicate whether the tooltip is coming from a left, right, or center position? There are <a href="https://www.smashingmagazine.com/2021/02/designing-tooltips-mobile-user-interfaces/">plenty of considerations to take into account</a> when making tooltips — including <a href="https://css-tricks.com/can-css-prevent-tooltips-from-overflowing/">overflowage</a>, <a href="https://css-tricks.com/collision-detection/">collision detection</a>, and <a href="https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/">semantics</a> — but it’s the shape and direction of the tail that I want to focus on because I often see inflexible fixed units used to position them.</p>
4306. <p>Forget what you already know about tooltips because in this article, we will start from zero, and you will learn how to build a tooltip with minimal markup powered by modern CSS that provides flexibility to configure the component by adjusting CSS variables. We are not going to build one or two shapes, but… <em>100 different shapes!</em></p>
4307. <p>That may sound like we’re getting into a super-long article, but actually, we can easily get there by adjusting a few values. In the end, you will have a back pocket full of CSS tricks that can be combined to create any shape you want.</p>
4308. <p>And guess what? I’ve already created <a href="https://css-generators.com/tooltip-speech-bubble/">an online collection of 100 different tooltip shapes</a> where you can easily copy and paste the code for your own use, but stay with me. You’re going to want to know the secret to unlocking hundreds of possibilities with the least possible code.</p>
4309. <p>We’ll start with the shapes themselves, discussing how we can cut out the bubble and tail by combining CSS gradients and clipping. Then, we’ll pick things back up in a second article dedicated to improving another common approach to tooltips using borders and custom shapes.</p>
4310. The HTML
4311. <p>We’re only working with a single element:</p>
4312. <pre><code>&lt;div class="tooltip"&gt;Your text content goes here&lt;/div&gt;
4313. </code></pre>
4314.  
4315. <p>That’s the challenge: Create hundreds of tooltip variations in CSS with only a single element to hook into in the HTML.</p>
4316. A Simple Tooltip Tail
4317. <p>I’m going to skip right over the basic rectangular shape; you know how to set a <code>width</code> and <code>height</code> (or <code>aspect-ratio</code>) on elements. Let’s start with <a href="https://css-tip.com/simple-tooltip/">the simplest shape</a> for the tooltip’s tail, one that can be accomplished with only two CSS properties:</p>
4318. <pre><code>.tooltip {
4319.  /* tail dimension */
4320.  --b: 2em; /* base */
4321.  --h: 1em; /* height*/
4322.  
4323.  border-image: fill 0 // var(--h)
4324.    conic-gradient(#CC333F 0 0); /* the color  */
4325.  clip-path:
4326.    polygon(0 100%, 0 0, 100% 0, 100% 100%,
4327.      calc(50% + var(--b) / 2) 100%,
4328.      50% calc(100% + var(--h)),
4329.      calc(50% - var(--b) / 2) 100%);
4330. }
4331. </code></pre>
4332.  
4333. <p>The <code>border-image</code> property creates an “overflowing color” while <code>clip-path</code> defines the shape of the tooltip with <code>polygon()</code> coordinates. (Speaking of <code>border-image</code>, <a href="https://www.smashingmagazine.com/2024/01/css-border-image-property/">I wrote a deep-dive on it</a> and explain how it might be the only CSS property that supports double slashes in the syntax!)</p>
4334. <p>The tooltip’s tail is placed at the bottom center, and we have two variables to control its dimensions:</p>
4335. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/1-border-image-coloration-clip-path-polygon.png" /></p>
4336. <p>We can do the exact same thing in more intuitive ways, like defining a background and then border (or padding) to create space for the tail:</p>
4337. <pre><code>background: #CC333F;
4338. border-bottom: var(--h) solid #0000;
4339. </code></pre>
4340.  
4341. <p>…or using <code>box-shadow</code> (or <code>outline</code>) for the outside color:</p>
4342. <pre><code>background: #CC333F;
4343. box-shadow: 0 0 0 var(--h) #CC333F;
4344. </code></pre>
4345.  
4346. <p>While these approaches are indeed easier, they require an extra declaration compared to the single <code>border-image</code> declaration we used. Plus, we’ll see later that <code>border-image</code> is really useful for accomplishing more complex shapes.</p>
4347. <p>Here is a demo with the different directions so you can see how easy it is to adjust the above code to change the tail’s position.</p>
4348. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/2-rectangle-tooltip.png" /></p>
4349. <p>We can fix this by setting limits to some values so the tail never falls outside the container. Two points of the polygon are concerned with the fix.</p>
4350. <p>This:</p>
4351. <pre><code>calc(var(--p) + var(--b) / 2) 100%
4352. </code></pre>
4353.  
4354. <p>…and this:</p>
4355. <pre><code>calc(var(--p) - var(--b) / 2) 100%
4356. </code></pre>
4357.  
4358. <p>The first <code>calc()</code> needs to be clamped to <code>100%</code> to avoid the overflow from the right side, and the second one needs to be clamped to <code>0%</code> to avoid the overflow from the left side. We can use the <code>min()</code> and <code>max()</code> functions to establish the range limits:</p>
4359. <pre><code>clip-path:
4360.  polygon(0 100%, 0 0, 100% 0, 100% 100%,</code>
4361.    <code>min(100%, var(--p) + var(--b) / 2) 100%,</code>
4362.    <code>var(--p) calc(100% + var(--h)),</code>
4363.    <code>max(0%, var(--p) - var(--b) / 2) 100%);
4364. </code></pre>
4365.  
4366. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/3-tail-left-right-edges-tooltip.png" /></p>
4367. Adjusting The Tail Shape
4368. <p>Let’s integrate another variable, <code>--x</code>, into the <code>clip-path()</code> and use it to adjust the shape of the tail:</p>
4369. <pre><code>.tooltip {
4370.  /* tail dimension */
4371.  --b: 2em; /* base */
4372.  --h: 1em; /* height*/
4373.  
4374.  --p: 50%;  /* tail position */</code>
4375.  <code>--x: -2em; /* tail shape */</code>
4376.  
4377.  <code>border-image: fill 0 // 9999px
4378.    conic-gradient(#CC333F 0 0); /* the color  */
4379.  clip-path:
4380.    polygon(0 100%, 0 0, 100% 0, 100% 100%,
4381.      min(100%, var(--p) + var(--b) / 2) 100%,</code>
4382.      <code>calc(var(--p) + var(--x)) calc(100% + var(--h)),</code>
4383.      <code>max(0%, var(--p) - var(--b) / 2) 100%);
4384. }
4385. </code></pre>
4386.  
4387. <p>The <code>--x</code> variable can be either positive or negative (using whatever unit you want, including percentages). What we’re doing is adding the variable that establishes the tail’s shape, <code>--x</code>, to the tail’s position, <code>--p</code>. In other words, we’ve updated this:</p>
4388. <pre><code>var(--p) calc(100% + var(--h))
4389. </code></pre>
4390.  
4391. <p>…to this:</p>
4392. <pre><code>calc(var(--p) + var(--x)) calc(100% + var(--h))
4393. </code></pre>
4394.  
4395. <p>And here is the outcome:</p>
4396. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/4-variations-same-red-rectangular-tooltip.png" /></p>
4397. <p>The tooltip’s tail points in either the right or left direction, depending on whether <code>--x</code> is a positive or negative value. Go ahead and use the range sliders in the following demo to see how the tooltip’s tail is re-positioned (<code>--p</code>) and re-shaped (<code>--x</code>) when adjusting two variables.</p>
4398. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/5-rectangular-tooltip-different-tale-positions.png" /></p>
4399. <p>Note that I have updated the <code>border-image</code> outset to an impractically large value (<code>9999px</code>) instead of using the <code>--h</code> variable. The shape of the tail can be any type of triangle and can take a bigger area. Since there’s no way for us to know the exact value of the outset, we use that big value to make sure we have enough room to fill the tail in with color, no matter its shape.</p>
4400. <p>Does the outset concept look strange to you? I know that working with <code>border-image</code> isn’t something many of us do all that often, so if this approach is tough to wrap your head around, definitely go check out <a href="https://www.smashingmagazine.com/2024/01/css-border-image-property/">my <code>border-image</code> article</a> for a thorough demonstration of how it works.</p>
4401. Working With Gradients
4402. <p>Most of the trouble starts when we want to color the tooltip with a gradient instead of a flat color. Applying one color is simple — even with older techniques — but when it comes to gradients, it’s not easy to make the tail color flow smoothly into the container’s color.</p>
4403. <p>But guess what? That’s no problem for us because we are already using a gradient in our <code>border-image</code> declaration!</p>
4404. <pre><code>border-image: fill 0 // var(--h)
4405.  conic-gradient(#CC333F 0 0);
4406. </code></pre>
4407.  
4408. <p><code>border-image</code> only accepts gradients or images, so to produce a solid color, I had to use a gradient consisting of just one color. But if you change it into a “real” gradient that transitions between two or more colors, then you get your tooltip gradient. That’s all!</p>
4409. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/6-steps-create-rounded-tooltip-corners-sequential-order.png" /></p>
4410. <p>We start by declaring a <code>background</code> and <code>border-radius</code> on the <code>.tooltip</code>. Nothing fancy. Then, we move to the <code>border-image</code> property so that we can add a bar (highlighted in red in the last figure) that slightly overflows the container from the bottom. This part is a bit tricky, and here I invite you to read <a href="https://www.smashingmagazine.com/2024/01/css-border-image-property/">my previous article about <code>border-image</code></a> to understand this bit of CSS magic. From there, we add the <code>clip-path</code> and get our final shape.</p>
4411. <div>
4412. <pre><code>.tooltip {
4413.  /* triangle dimension */
4414.  --b: 2em; /* base */
4415.  --h: 1em; /* height */
4416.  
4417. --p: 50%; /<em> position  </em>/
4418. --r: 1.2em; /<em> the radius </em>/
4419. --c: #4ECDC4;
4420.  
4421. border-radius: var(--r);
4422. clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%,
4423. min(100%, var(--p) + var(--b) / 2) 100%,
4424. var(--p) calc(100% + var(--h)),
4425. max(0%, var(--p) - var(--b) / 2) 100%);
4426. background: var(--c);
4427. border-image: conic-gradient(var(--c) 0 0) fill 0/
4428. var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2)/
4429. 0 0 var(--h) 0;
4430. } </code></pre>
4431.  
4432. </div>
4433.  
4434. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/7-jagged-edge-tail-tooltip.png" /></p>
4435. <p>This visual glitch happens when the <code>border-image</code> overlaps with the rounded corners. To fix this, we need to adjust the <code>border-radius</code> value based on the tail’s position (<code>--p</code>).</p>
4436. <p>We are not going to update all the radii, only the bottom ones and, more precisely, the horizontal values. I want to remind you that <code>border-radius</code> accepts up to eight values — each corner takes two values that set the horizontal and vertical directions — and in our case, we will update the horizontal value of the bottom-left and bottom-right corners:</p>
4437. <div>
4438. <pre><code>border-radius:
4439.  /* horizontal values */
4440.  var(--r)
4441.  var(--r)
4442.  min(var(--r),100% - var(--p) - var(--b)/2) /* horizontal bottom-right */
4443.  min(var(--r),var(--p) - var(--b)/2) /* horizontal bottom-left */
4444.  /
4445.  /* vertical values */
4446.  var(--r)
4447.  var(--r)
4448.  var(--r)
4449.  var(--r)
4450. </code></pre>
4451. </div>
4452.  
4453. <p>All the corner values are equal to <code>--r</code>, except for the bottom-left and bottom-right corners. Notice the forward slash (<code>/</code>), as it is part of the syntax that separates the horizontal and vertical radii values.</p>
4454. <p>Now, let’s dig in and understand what is happening here. For the bottom-left corner, when the position of the tail is on the right, the position (<code>--p</code>) variable value will be big in order to keep the radius equal to the radius (<code>--r</code>), which serves as the minimum value. But when the position gets closer to the left, the value of <code>--p</code> decreases and, at some point, becomes smaller than the value of <code>--r</code>. The result is the value of the radius slowly decreasing until it reaches <code>0</code>. It adjusts as the position updates!</p>
4455. <p>I know that’s a lot to process, and a visual aid usually helps. Try slowly updating the tail’s position in the following demo to get a clearer picture of what’s happening.</p>
4456. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/8-steps-correcting-tooltip-overflow.png" /></p>
4457. <p>This time, the border image creates a horizontal bar along the bottom that is positioned directly under the element and extends outside of its boundary so that we have enough color for the tail when it’s closer to the edge.</p>
4458. <div>
4459. <pre><code>.tooltip {
4460.  /* tail dimension */
4461.  --b: 2em; /* base */
4462.  --h: 1.5em; /* height */
4463.  
4464. --p: 50%; /<em> position </em>/
4465. --x: 1.8em; /<em> tail position </em>/
4466. --r: 1.2em; /<em> the radius </em>/
4467. --c: #4ECDC4;
4468.  
4469. border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b) / 2) min(var(--r), var(--p) - var(--b) / 2) / var(--r);
4470. clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%,
4471. min(100%, var(--p) + var(--b) / 2) 100%,
4472. calc(var(--p) + var(--x)) calc(100% + var(--h)),
4473. max(0%, var(--p) - var(--b) / 2) 100%);
4474. background: var(--c);
4475. border-image: conic-gradient(var(--c) 0 0) 0 0 1 0 / 0 0 var(--h) 0 / 0 999px var(--h) 999px;
4476. } </code></pre>
4477.  
4478. </div>
4479.  
4480. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/9-visual-imperfections-tooltip.png" /></p>
4481. <p>That’s why I do not use this approach when working with a simple isosceles triangle. This said, the method is perfectly fine, and in most cases, you may not see any visual glitches.</p>
4482. Putting Everything Together
4483. <p>We’ve looked at tooltips with tails that have equal sides, ones with tails that change shape, ones where the tail changes position and direction, ones with rounded corners, and ones that are filled in with gradients. What would it look like if we combined all of these examples into one mega-demo?</p>
4484. <p>We can do it, but not by combining the approaches we’ve covered. We need another method, this time using a pseudo-element. No <code>border-image</code> for this one, I promise!</p>
4485. <div>
4486. <pre><code>.tooltip {
4487.  /* triangle dimension */
4488.  --b: 2em; /* base */
4489.  --h: 1em; /* height */
4490.  
4491. --p: 50%; /<em> position </em>/
4492. --r: 1.2em; /<em> the radius </em>/
4493.  
4494. border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b) / 2) min(var(--r), var(--p) - var(--b) / 2) / var(--r);
4495. background: 0 0 / 100% calc(100% + var(--h))
4496. linear-gradient(60deg, #CC333F, #4ECDC4); /<em> the gradient </em>/
4497. position: relative;
4498. z-index: 0;
4499. }
4500. .tooltip:before {
4501. content: "";
4502. position: absolute;
4503. z-index: -1;
4504. inset: 0 0 calc(-1*var(--h));
4505. background-image: inherit;
4506. clip-path:
4507. polygon(50% 50%,
4508. min(100%, var(--p) + var(--b) / 2) calc(100% - var(--h)),
4509. var(--p) 100%,
4510. max(0%, var(--p) - var(--b) / 2) calc(100% - var(--h)));
4511. } </code></pre>
4512.  
4513. </div>
4514.  
4515. <p>The pseudo-element is used to create the tail at the bottom and notice how it inherits the gradient from the main element to simulate a continuous gradient that covers the entire shape.</p>
4516. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/10-continuous-gradient.png" /></p>
4517. <p>Another important thing to note is the <code>background-size</code> declared in the <code>.tooltip</code>. The pseudo-element is covering a bigger area due to the negative bottom value, so we have to increase the height of the gradient so it covers the same area.</p>
4518. <p><img src="https://files.smashing.media/articles/modern-css-tooltips-part1/11-different-tooltip-shapes.png" /></p>
4519. <p>Can you figure it out? The code for all of them is included in <a href="https://css-generators.com/tooltip-speech-bubble/">my tooltip collection</a> if you need a reference, but do try to make them yourself — it’s good exercise! Maybe you will find a different (or perhaps better) approach than mine.</p>
4520. ]]></content:encoded>
4521.            <author>hello@smashingmagazine.com (Temani Afif)</author>
4522.            <enclosure url="http://files.smashing.media/articles/modern-css-tooltips-part1/modern-css-tooltips-speech-bubbles.jpg" length="0" type="image/jpg"/>
4523.        </item>
4524.        <item>
4525.            <title><![CDATA[Waiting For Spring (March 2024 Wallpapers Edition)]]></title>
4526.            <link>https://smashingmagazine.com/2024/02/desktop-wallpaper-calendars-march-2024/</link>
4527.            <guid>https://smashingmagazine.com/2024/02/desktop-wallpaper-calendars-march-2024/</guid>
4528.            <pubDate>Thu, 29 Feb 2024 10:00:00 GMT</pubDate>
4529.            <description><![CDATA[Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers is for you. Designed by artists and designers from across the globe, they come in versions with and without a calendar for March 2024. Enjoy!]]></description>
4530.            <content:encoded><![CDATA[<p>March is here! With the days getting noticeably longer in the northern hemisphere, the sun coming out, and the flowers blooming, we are <strong>fueled with fresh energy</strong>. And even if spring is far away in your part of the world, you might feel that 2024 has gained full speed by now — the perfect opportunity to bring all those plans you made and ideas you’ve been carrying around to life!</p>
4531.  
4532. <p>To cater for some extra inspiration this March, artists and designers from across the globe once again challenged their creative skills and designed wallpapers for your desktop and mobile screens. They come in versions with and without a calendar for <strong>March 2024</strong> and can be downloaded for free — a monthly tradition that has been going on here at Smashing Magazine for <a href="https://www.smashingmagazine.com/category/wallpapers">more than twelve years already</a>.</p>
4533.  
4534. <p>As a little bonus goodie, we also added some March favorites from our wallpapers archives to the collection. Maybe you’ll spot one of <em>your</em> almost-forgotten favorites from the past in here, too? Thank you to everyone who shared their wallpapers with us this month! This post wouldn’t exist without you.</p>
4535.  
4536. <ul>
4537. <li>You can <strong>click on every image to see a larger preview</strong>,</li>
4538. <li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li>
4539. <li><strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Submit a wallpaper!</a></strong><br />Did you know that <em>you</em> could get featured in our next wallpapers post, too? We are always <strong>looking for creative talent</strong>.</li>
4540. </ul>
4541.  
4542. <p></p>Breaking Superstitions<p></p>
4543. <p></p><p>“Step into a world of delightful rebellion with our calendar feature for National Open an Umbrella Indoors Day. This vibrant illustration captures the spirit of breaking free from superstitions.” — Designed by <a href="https://www.popwebdesign.net/ecommerce-seo-services.html">PopArt Studio</a> from Serbia.</p><p></p>
4544. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/mar-24-breaking-superstitions-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-breaking-superstitions-preview-opt.png" /></a><p></p>
4545. <ul>
4546. <li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/mar-24-breaking-superstitions-preview.png">preview</a></li>
4547. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/cal/mar-24-breaking-superstitions-cal-2560x1440.png">2560x1440</a></li>
4548. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/breaking-superstitions/nocal/mar-24-breaking-superstitions-nocal-2560x1440.png">2560x1440</a></li>
4549. </ul>
4550.  
4551. <p></p>Fresh Flow<p></p>
4552. <p></p><p>“It’s time for the water to go down the mountains, it’s time for the rivers to get rid of ice blocks, it’s time for the ground to feed the plants, it’s time to go out and take a deep breath. I imagined these ideas with interlacing colored lines.” — Designed by <a href="https://www.philippebrouard.fr">Philippe Brouard</a> from France.</p><p></p>
4553. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/mar-24-fresh-flow-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-fresh-flow-preview-opt.png" /></a><p></p>
4554. <ul>
4555. <li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/mar-24-fresh-flow-preview.png">preview</a></li>
4556. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/cal/mar-24-fresh-flow-cal-3840x2160.jpg">3840x2160</a></li>
4557. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-3840x2160.jpg">3840x2160</a></li>
4558. </ul>
4559.  
4560. <p></p>Music From The Past<p></p>
4561. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
4562. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/mar-24-music-from-the-past-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-music-from-the-past-preview-opt.png" /></a><p></p>
4563. <ul>
4564. <li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/mar-24-music-from-the-past-preview.png">preview</a></li>
4565. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/cal/mar-24-music-from-the-past-cal-3840x2160.png">3840x2160</a></li>
4566. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-3840x2160.png">3840x2160</a></li>
4567. </ul>
4568.  
4569. <p></p>Pika Pika Chu<p></p>
4570. <p></p><p>Designed by <a href="https://design-studio.io/">Design Studio</a> from India.</p><p></p>
4571. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/mar-24-pika-pika-chu-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-pika-pika-chu-preview-opt.png" /></a><p></p>
4572. <ul>
4573. <li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/mar-24-pika-pika-chu-preview.png">preview</a></li>
4574. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/cal/mar-24-pika-pika-chu-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/cal/mar-24-pika-pika-chu-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/cal/mar-24-pika-pika-chu-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/cal/mar-24-pika-pika-chu-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/cal/mar-24-pika-pika-chu-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/cal/mar-24-pika-pika-chu-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/cal/mar-24-pika-pika-chu-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/cal/mar-24-pika-pika-chu-cal-2560x1440.jpg">2560x1440</a></li>
4575. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/nocal/mar-24-pika-pika-chu-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/nocal/mar-24-pika-pika-chu-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/nocal/mar-24-pika-pika-chu-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/nocal/mar-24-pika-pika-chu-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/nocal/mar-24-pika-pika-chu-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/nocal/mar-24-pika-pika-chu-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/nocal/mar-24-pika-pika-chu-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/pika-pika-chu/nocal/mar-24-pika-pika-chu-nocal-2560x1440.jpg">2560x1440</a></li>
4576. </ul>
4577.  
4578. <p></p>Hat’s Off to Good Fortune<p></p>
4579. <p></p><p>“Flipping the switch on luck in 2024 with a tip of the hat! Here’s to welcoming good fortune, warmth, and endless smiles.” — Designed by <a href="https://heyclipart.com">HeyClipart</a> from Greece.</p><p></p>
4580. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/mar-24-hats-off-to-good-fortune-full.jpg"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-hats-off-to-good-fortune-preview-opt.jpg" /></a><p></p>
4581. <ul>
4582. <li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/mar-24-hats-off-to-good-fortune-preview.jpg">preview</a></li>
4583. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/cal/mar-24-hats-off-to-good-fortune-cal-2560x1440.jpg">2560x1440</a></li>
4584. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/hats-off-to-good-fortune/nocal/mar-24-hats-off-to-good-fortune-nocal-2560x1440.jpg">2560x1440</a></li>
4585. </ul>
4586.  
4587. <p></p>Northern Lights<p></p>
4588. <p></p><p>“Spring is getting closer, and we are waiting for it with open arms. This month, we want to enjoy discovering the northern lights. To do so, we are going to Alaska, where we have the faithful company of our friend White Fang.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela Jimenez</a> from Spain.</p><p></p>
4589. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/mar-24-northern-lights-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-northern-lights-preview-opt.png" /></a><p></p>
4590. <ul>
4591. <li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/mar-24-northern-lights-preview.png">preview</a></li>
4592. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/cal/mar-24-northern-lights-cal-2560x1440.png">2560x1440</a></li>
4593. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/northern-lights/nocal/mar-24-northern-lights-nocal-2560x1440.png">2560x1440</a></li>
4594. </ul>
4595.  
4596. <p></p>Zombie’s Happy Hour<p></p>
4597. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
4598. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/mar-24-zombies-happy-hour-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-zombies-happy-hour-preview-opt.png" /></a><p></p>
4599. <ul>
4600. <li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/mar-24-zombies-happy-hour-preview.png">preview</a></li>
4601. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/cal/mar-24-zombies-happy-hour-cal-3840x2160.png">3840x2160</a></li>
4602. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/zombies-happy-hour/nocal/mar-24-zombies-happy-hour-nocal-3840x2160.png">3840x2160</a></li>
4603. </ul>
4604.  
4605. <p></p>Holi Celebration<p></p>
4606. <p></p><p>“My deep love for colorful festivals, especially Holi, inspired me to create this captivating wallpaper. I wanted to visually express the essence of this cherished festival, infusing it with lively colors and playful elements. Crafting this wallpaper wasn’t just about completing a task; it was a chance to immerse myself in the joyous celebration of color and culture, sharing that happiness with others through my artistry.” — Designed by <a href="https://cronixweb.com/">Cronix</a> from Los Angeles.</p><p></p>
4607. <p></p><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/mar-24-holi-celebration-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-holi-celebration-preview-opt.png" /></a><p></p>
4608. <ul>
4609. <li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/mar-24-holi-celebration-preview.png">preview</a></li>
4610. <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1024x600.png">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1200x800.png">1200x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1440x960.png">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1600x900.png">1600x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-2560x1600.png">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-2880x1800.png">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-3072x1920.png">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-3840x2160.png">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/cal/mar-24-holi-celebration-cal-5120x2880.png">5120x2880</a></li>
4611. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1024x600.png">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1200x800.png">1200x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1440x960.png">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1600x900.png">1600x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-2560x1600.png">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-2880x1800.png">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-3072x1920.png">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-3840x2160.png">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/holi-celebration/nocal/mar-24-holi-celebration-nocal-5120x2880.png">5120x2880</a></li>
4612. </ul>
4613.  
4614.  
4615.  
4616. <p></p>Time To Wake Up<p></p>
4617. <p></p><p>“Rays of sunlight had cracked into the bear’s cave. He slowly opened one eye and caught a glimpse of nature in blossom. Is it spring already? Oh, but he is so sleepy. He doesn’t want to wake up, not just yet. So he continues dreaming about those sweet sluggish days while everything around him is blooming.” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><p></p>
4618. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/79516b2e-d9c6-4ab3-985b-e45eac96be42/mar-19-time-to-wake-up-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/595f9f16-ceb3-4d9b-8284-fc7a3f493295/mar-19-time-to-wake-up-preview-opt.png" /></a><p></p>
4619. <ul>
4620. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/595f9f16-ceb3-4d9b-8284-fc7a3f493295/mar-19-time-to-wake-up-preview-opt.png">preview</a></li>
4621. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-2560x1440.jpg">2560x1440</a></li></ul>
4622.  
4623. <p></p>Queen Bee<p></p>
4624. <p></p><p>“Spring is coming! Birds are singing, flowers are blooming, bees are flying… Enjoy this month!” — Designed by <a href="https://melissa.bogemans.com/">Melissa Bogemans</a> from Belgium.</p><p></p>
4625. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9c43d932-e478-4d77-95d8-c4ae8d8c80f0/mar-19-queen-bee-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/885ef955-c69b-4d99-b5fc-286f35b6e0e3/mar-19-queen-bee-preview-opt.png" /></a><p></p>
4626. <ul>
4627. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/885ef955-c69b-4d99-b5fc-286f35b6e0e3/mar-19-queen-bee-preview-opt.png">preview</a></li>
4628. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-2560x1440.png">2560x1440</a></li>
4629. </ul>
4630.  
4631. <p></p>Spring Is Coming<p></p>
4632. <p></p><p>“This March, our calendar design epitomizes the heralds of spring. Soon enough, you’ll be waking up to the singing of swallows, in a room full of sunshine, filled with the empowering smell of daffodil, the first springtime flowers. Spring is the time of rebirth and new beginnings, creativity and inspiration, self-awareness, and inner reflection. Have a budding, thriving spring!” — Designed by <a href="https://www.popwebdesign.net/illustrations.html">PopArt Studio</a> from Serbia.</p><p></p>
4633. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2023/mar-22-spring-is-coming-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2023/mar-22-spring-is-coming-preview-opt.png" /></a><p></p>
4634. <ul>
4635. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2023/mar-22-spring-is-coming-preview-opt.png">preview</a></li>
4636. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1440x1050.jpg">1440x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-2560x1440.jpg">2560x1440</a></li>
4637. </ul>
4638.  
4639. <p></p>Botanica<p></p>
4640. <p></p><p>Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><p></p>
4641. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/98a1c385-d14e-49bc-91c5-df5551b37799/mar-21-botanica-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/74e88326-57b4-4d3e-a31a-dc718b75c3a4/mar-21-botanica-preview-opt.png" /></a><p></p>
4642. <ul>
4643. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/74e88326-57b4-4d3e-a31a-dc718b75c3a4/mar-21-botanica-preview-opt.png">preview</a></li>
4644. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-2560x1440.jpg">2560x1440</a></li>
4645. </ul>
4646.  
4647. <p></p>Fresh Lemons<p></p>
4648. <p></p><p>Designed by <a href="https://www.nathalieouederni.com/">Nathalie Ouederni</a> from France.</p><p></p>
4649. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4de34052-8b80-4845-b76c-2ae71e6d94b4/mar-15-fresh-lemons-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1eb6ae3d-a3a0-4107-8b61-1995b717749c/mar-15-fresh-lemons-preview-opt.png" /></a><p></p>
4650. <ul>
4651. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1eb6ae3d-a3a0-4107-8b61-1995b717749c/mar-15-fresh-lemons-preview-opt.png">preview</a></li>
4652. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-2560x1440.jpg">2560x1440</a></li></ul>
4653.  
4654. <p></p>Let’s Spring<p></p>
4655. <p></p><p>“After some freezing months, it’s time to enjoy the sun and flowers. It’s party time, colours are coming, so let’s spring!” — Designed by <a href="https://www.colorsfera.com">Colorsfera</a> from Spain.</p><p></p>
4656. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5aedaccc-20d2-4802-9796-ae246644813f/march-15-lets-spring-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/46e37736-fa97-4d04-9ac1-921571a5d844/march-15-lets-spring-preview-opt.png" /></a><p></p>
4657. <ul>
4658. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/46e37736-fa97-4d04-9ac1-921571a5d844/march-15-lets-spring-preview-opt.png">preview</a></li>
4659. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-2560x1440.png">2560x1440</a></li>
4660. </ul>
4661.  
4662. <p></p>March For Equality<p></p>
4663. <p></p><p>“This March, we shine the spotlight on International Women’s Day, reflecting on the achieved and highlighting the necessity for a more equal and understanding world. These turbulent times that we are in require us to stand together unitedly and IWD aims to do that.” — Designed by <a href="https://www.popwebdesign.net/portfolio-popart-studio.html?id=ilustracije">PopArt Studio</a> from Serbia.</p><p></p>
4664. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/95aace90-8b0e-48bd-bc31-a2095ff6f675/mar-21-march-for-equality-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a06bc39-aaa0-4f05-999d-490f42450625/mar-21-march-for-equality-preview-opt.png" /></a><p></p>
4665. <ul>
4666. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a06bc39-aaa0-4f05-999d-490f42450625/mar-21-march-for-equality-preview-opt.png">preview</a></li>
4667. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/march-for-equality/nocal/mar-21-march-for-equality-nocal-2560x1440.jpg">2560x1440</a></li>
4668. </ul>
4669.  
4670. <p></p>Spring Bird<p></p>
4671. <p></p><p>Designed by <a href="https://www.nathalieouederni.com">Nathalie Ouederni</a> from France.</p><p></p>
4672. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4992d67d-5607-46fb-afc5-edb09be2cc30/mar-17-spring-bird-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/062168cd-738b-4836-bc6f-26e8e49d917b/mar-17-spring-bird-preview-opt.png" /></a><p></p>
4673. <ul>
4674. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/062168cd-738b-4836-bc6f-26e8e49d917b/mar-17-spring-bird-preview-opt.png">preview</a></li>
4675. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-2560x1440.jpg">2560x1440</a></li>
4676. </ul>
4677.  
4678.  
4679.  
4680. <p></p>Awakening<p></p>
4681. <p></p><p>“I am the kind of person who prefers the cold but I do love spring since it’s the magical time when flowers and trees come back to life and fill the landscape with beautiful colors.” — Designed by <a href="https://www.mariakellerac.com">Maria Keller</a> from Mexico.</p><p></p>
4682. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0a961483-4838-4bea-99f5-8939ffdff62e/mar-15-wake-up-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a44be9ea-24bd-4614-aa0d-c45b03012f43/mar-15-wake-up-preview-opt.png" /></a><p></p>
4683. <ul>
4684. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a44be9ea-24bd-4614-aa0d-c45b03012f43/mar-15-wake-up-preview-opt.png">preview</a></li>
4685. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-640x1136.jpg">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-750x1334.jpg">750x1334</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1242x2208.jpg">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-2560x1440.jpg">2560x1440</a></li>
4686. </ul>
4687.  
4688. <p></p>Let’s Get Outside<p></p>
4689. <p></p><p>Designed by <a href="https://pathlove.com/">Lívia Lénárt</a> from Hungary.</p><p></p>
4690. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe3c753-896e-4bb1-915f-53adb712ef7d/mar-18-lets-get-outside-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7596279f-3fdb-41d6-937f-1a8cc0434092/mar-18-lets-get-outside-preview-opt.png" /></a><p></p>
4691. <ul>
4692. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7596279f-3fdb-41d6-937f-1a8cc0434092/mar-18-lets-get-outside-preview-opt.png">preview</a></li>
4693. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-2560x1440.jpg">2560x1440</a></li> </ul>
4694.  
4695. <p></p>Waiting For Spring<p></p>
4696. <p></p><p>“As days are getting longer again and the first few flowers start to bloom, we are all waiting for spring to finally arrive.” — Designed by Naioo from Germany.</p><p></p>
4697. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e54c2a3-a50c-4624-a055-0f8edfe8e203/march-12-waiting-for-spring-15-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/80ae8715-1dcc-4a97-9fcf-f39f2374b148/march-12-waiting-for-spring-15-preview-opt.png" /></a><p></p>
4698. <ul>
4699. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/80ae8715-1dcc-4a97-9fcf-f39f2374b148/march-12-waiting-for-spring-15-preview-opt.png">preview</a></li>
4700. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1920x1200.jpg">1920x1200</a></li></ul>
4701.  
4702. <p></p>Ballet<p></p>
4703. <p></p><p>“A day, even a whole month, isn’t enough to show how much a woman should be appreciated. Dear ladies, any day or month are yours if you decide so.” — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p><p></p>
4704. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3644cf1c-73ff-4407-b5ad-9107f25220cc/mar-17-ballet-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c18c06c4-3981-490d-addc-e91f24ae0ccd/mar-17-ballet-preview-opt.png" /></a><p></p>
4705. <ul>
4706. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c18c06c4-3981-490d-addc-e91f24ae0ccd/mar-17-ballet-preview-opt.png">preview</a></li>
4707. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280x1040.png">1280x1040</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-2560x1440.png">2560x1440</a></li></ul>
4708.  
4709. <p></p>MARCHing Forward<p></p>
4710. <p></p><p>“If all you want is a little orange dinosaur MARCHing (okay, I think you get the pun) across your monitor, this wallpaper was made just for you! This little guy is my design buddy at the office and sits by (and sometimes on top of) my monitor. This is what happens when you have designer’s block and a DSLR.” — Designed by <a href="https://mailostudios.com">Paul Bupe Jr</a> from Statesboro, GA.</p><p></p>
4711. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/280c36ae-ad54-439e-8fee-1708a25b6a81/mar-14-marching-forward-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44a39397-6c4b-4c6c-96ee-b7ca060c3e1e/mar-14-marching-forward-preview-opt.png" /></a><p></p>
4712. <ul>
4713. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44a39397-6c4b-4c6c-96ee-b7ca060c3e1e/mar-14-marching-forward-preview-opt.png">preview</a></li>
4714. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-2560x1440.png">2560x1440</a></li>
4715. </ul>
4716.  
4717. <p></p>Nothing To Do<p></p>
4718. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
4719. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-22-nothing-to-do-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-22-nothing-to-do-preview-opt.png" /></a><p></p>
4720. <ul>
4721. <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-22-nothing-to-do-preview-opt.png">preview</a></li>
4722. <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/nothing-to-do/nocal/mar-22-nothing-to-do-nocal-3840x2160.png">3840x2160</a></li>
4723. </ul>
4724.  
4725. <p></p>Orion’s Apple<p></p>
4726. <p></p><p>Designed by <a href="https://moniagabhi.com/">Monia Gabhi</a> from Canada.</p><p></p>
4727. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bed1bafa-8ff6-415c-89fe-e911b4975a12/mar-16-orions-apple-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/88436455-7e8c-4595-8845-a6cd37f3f476/mar-16-orions-apple-preview-opt.png" /></a><p></p>
4728. <ul>
4729. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/88436455-7e8c-4595-8845-a6cd37f3f476/mar-16-orions-apple-preview-opt.png">preview</a></li>
4730. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/orions-apple/nocal/mar-16-orions-apple-nocal-2560x1440.jpg">2560x1440</a></li>
4731. </ul>
4732.  
4733.  
4734.  
4735. <p></p>St. Patrick’s Day<p></p>
4736. <p></p><p>“On the 17th March, raise a glass and toast St. Patrick on St. Patrick’s Day, the Patron Saint of Ireland.” — Designed by <a href="https://www.everincreasingcircles.com/">Ever Increasing Circles</a> from the United Kingdom.</p><p></p>
4737. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b2ceb983-8187-411d-aa06-8773b397e5f3/mar-21-st-patricks-day-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eecc7027-ca1c-4dc9-bc69-eafa3d6ed56f/mar-21-st-patricks-day-preview-opt.png" /></a><p></p>
4738. <ul>
4739. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eecc7027-ca1c-4dc9-bc69-eafa3d6ed56f/mar-21-st-patricks-day-preview-opt.png">preview</a></li>
4740. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1080x1080.jpg">1080x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-2560x1440.jpg">2560x1440</a></li>
4741. </ul>
4742.  
4743. <p></p>Questions<p></p>
4744. <p></p><p>“Doodles are slowly becoming my trademark, so I just had to use them to express this phrase I’m fond of recently. A bit enigmatic, philosophical. Inspiring, isn’t it?” — Designed by <a href="https://www.behance.net/marpad">Marta Paderewska</a> from Poland.</p><p></p>
4745. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50511280-eddb-4e2c-98e1-51cf72219eca/mar-16-questions-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/55440170-e0d7-427c-b21f-d943b8ee7df0/mar-16-questions-preview-opt.png" /></a><p></p>
4746. <ul>
4747. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/55440170-e0d7-427c-b21f-d943b8ee7df0/mar-16-questions-preview-opt.png">preview</a></li>
4748. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-2560x1440.png">2560x1440</a></li></ul>
4749.  
4750. <p></p>Explore The Forest<p></p>
4751. <p></p><p>“This month, I want to go to the woods and explore my new world in sunny weather.” — Designed by Zi-Cing Hong from Taiwan.</p><p></p>
4752. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8cd5d4f3-bbf7-44cf-823c-a3ea3a1ad477/mar-18-explore-the-forest-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9f6c238-b0dc-4c83-8608-225fbc102c53/mar-18-explore-the-forest-preview-opt.png" /></a><p></p>
4753. <ul>
4754. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9f6c238-b0dc-4c83-8608-225fbc102c53/mar-18-explore-the-forest-preview-opt.png">preview</a></li>
4755. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-2560x1440.png">2560x1440</a></li> </ul>
4756.  
4757. <p></p>The Great Beyond<p></p>
4758. <p></p><p>“My inspiration came mostly from ‘The Greay from’. It’s about a dog and an astronaut exploring a strange new world.” — Designed by <a href="https://www.myware.be">Lars Pauwels</a> from Belgium.</p><p></p>
4759. <p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-18-the-great-beyond-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-18-the-great-beyond-preview-opt.png" /></a><p></p>
4760. <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-18-the-great-beyond-preview-opt.png">preview</a></li>
4761. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-2560x1440.png">2560x1440</a></li> </ul>
4762.  
4763. <p></p>Happy Birthday Dr. Seuss!<p></p>
4764. <p></p><p>“March the 2nd marks the birthday of the most creative and extraordinary author ever, Dr. Seuss! I have included an inspirational quote about learning to encourage everyone to continue learning new things every day.” — Designed by <a href="https://www.safiabegum.com/">Safia Begum</a> from the United Kingdom.&lt;/p</p>
4765. <blockquote>
4766. <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c44c6a7a-2ab2-4a54-bf9a-d7ca5a616066/mar-17-happy-birthday-dr-seuss-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d3c8f6c7-dfce-4108-bbfe-b9f4ada9ec56/mar-17-happy-birthday-dr-seuss-preview-opt.png" /></a>
4767. </blockquote>
4768. <ul>
4769. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d3c8f6c7-dfce-4108-bbfe-b9f4ada9ec56/mar-17-happy-birthday-dr-seuss-preview-opt.png">preview</a></li>
4770. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-800x450.png">800x450</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1440x810.png">1440x810</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1600x900.png">1600x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1680x945.png">1680x945</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-2560x1440.png">2560x1440</a></li></ul>
4771.  
4772. <p></p>Pizza Time<p></p>
4773. <p></p><p>“Who needs an excuse to look at pizza all month?” — Designed by <a href="https://www.behance.net/jamesmitchell23">James Mitchell</a> from the United Kingdom.</p><p></p>
4774. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4049a0bc-303d-4a8a-8bc5-028fc93d6643/mar-17-pizza-time-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/08e46754-3ebf-436e-b870-7738acf14494/mar-17-pizza-time-preview-opt.png" /></a><p></p>
4775. <ul>
4776. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/08e46754-3ebf-436e-b870-7738acf14494/mar-17-pizza-time-preview-opt.png">preview</a></li>
4777. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-2880x1800.png">2880x1800</a></li></ul>
4778.  
4779. <p></p>Tacos To The Moon And Back<p></p>
4780. <p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p>
4781. <p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a8d8604c-db94-4a00-876b-d5bb83481777/mar-21-to-the-moon-and-back-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b015acab-cb24-41bf-95a9-2c48db73bb65/mar-21-to-the-moon-and-back-preview-opt.png" /></a><p></p>
4782. <ul>
4783. <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b015acab-cb24-41bf-95a9-2c48db73bb65/mar-21-to-the-moon-and-back-preview-opt.png">preview</a></li>
4784. <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/to-the-moon-and-back/nocal/mar-21-to-the-moon-and-back-nocal-3840x2160.png">3840x2160</a></li>
4785. </ul>
4786.  
4787. ]]></content:encoded>
4788.            <author>hello@smashingmagazine.com (Cosima Mielke)</author>
4789.            <enclosure url="http://files.smashing.media/articles/desktop-wallpaper-calendars-march-2024/mar-24-breaking-superstitions-preview-opt.png" length="0" type="image/png"/>
4790.        </item>
4791.        <item>
4792.            <title><![CDATA[Reporting Core Web Vitals With The Performance API]]></title>
4793.            <link>https://smashingmagazine.com/2024/02/reporting-core-web-vitals-performance-api/</link>
4794.            <guid>https://smashingmagazine.com/2024/02/reporting-core-web-vitals-performance-api/</guid>
4795.            <pubDate>Tue, 27 Feb 2024 12:00:00 GMT</pubDate>
4796.            <description><![CDATA[The Performance API is a set of standards for measuring and evaluating performance metrics with JavaScript. This article demonstrates how to use the Performance API to generate performance metrics directly in the DOM to create your own reporting.]]></description>
4797.            <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://www.debugbear.com/?utm_campaign=sm-4">DebugBear</a></p>
4798. <p>There’s quite a buzz in the performance community with the Interaction to Next Paint (INP) metric becoming an official <a href="https://www.debugbear.com/docs/metrics/core-web-vitals?utm_campaign=sm-4">Core Web Vitals</a> (CWV) metric in a few short weeks. If you haven’t heard, INP is replacing the First Input Delay (FID) metric, something <a href="https://www.smashingmagazine.com/2023/12/preparing-interaction-next-paint-web-core-vital/">you can read all about here on Smashing Magazine</a> as a guide to prepare for the change.</p>
4799. <p>But that’s not what I really want to talk about. With performance at the forefront of my mind, I decided to head over to MDN for a fresh look at the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance_API">Performance API</a>. We can use it to report the load time of elements on the page, even going so far as to report on Core Web Vitals metrics in real time. Let’s look at a few ways we can use the API to report some CWV metrics.</p>
4800. Browser Support Warning
4801. <p>Before we get started, a quick word about browser support. The Performance API is huge in that it contains a lot of different interfaces, properties, and methods. While the majority of it is supported by all major browsers, Chromium-based browsers are the only ones that support all of the CWV properties. The only other is Firefox, which supports the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) API properties.</p>
4802. <p>So, we’re looking at a feature of features, as it were, where some are well-established, and others are still in the experimental phase. But as far as Core Web Vitals go, we’re going to want to work in Chrome for the most part as we go along.</p>
4803. First, We Need Data Access
4804. <p>There are two main ways to retrieve the performance metrics we care about:</p>
4805. <ol>
4806. <li>Using the <code>performance.getEntries()</code> method, or</li>
4807. <li>Using a <code>PerformanceObserver</code> instance.</li>
4808. </ol>
4809. <p>Using a <code>PerformanceObserver</code> instance offers a few important advantages:</p>
4810. <ul>
4811. <li><strong><code>PerformanceObserver</code> observes performance metrics and dispatches them over time.</strong> Instead, using <code>performance.getEntries()</code> will always return the entire list of entries since the performance metrics started being recorded.</li>
4812. <li><strong><code>PerformanceObserver</code> dispatches the metrics asynchronously,</strong> which means they don’t have to block what the browser is doing.</li>
4813. <li><strong>The <code>element</code> performance metric type doesn’t work</strong> with the <code>performance.getEntries()</code> method anyway.</li>
4814. </ul>
4815. <p>That all said, let’s create a <code>PerformanceObserver</code>:</p>
4816. <pre><code>const lcpObserver = new PerformanceObserver(list =&gt; {});
4817. </code></pre>
4818.  
4819. <p>For now, we’re passing an empty callback function to the <code>PerformanceObserver</code> constructor. Later on, we’ll change it so that it actually does something with the observed performance metrics. For now, let’s start observing:</p>
4820. <div>
4821. <pre><code>lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });
4822. </code></pre>
4823. </div>
4824.  
4825. <p>The first very important thing in that snippet is the <code>buffered: true</code> property. Setting this to <code>true</code> means that we not only get to observe performance metrics being dispatched <em>after</em> we start observing, but we also want to get the performance metrics that were queued by the browser <em>before</em> we started observing.</p>
4826. <p>The second very important thing to note is that we’re working with the <code>largest-contentful-paint</code> property. That’s what’s cool about the Performance API: it can be used to measure very specific things but also supports properties that are mapped directly to CWV metrics. We’ll start with the LCP metric before looking at other CWV metrics.</p>
4827. Reporting The Largest Contentful Paint
4828. <p>The <code>largest-contentful-paint</code> property looks at everything on the page, identifying the biggest piece of content on the initial view and how long it takes to load. In other words, we’re observing the full page load and getting stats on the largest piece of content rendered in view.</p>
4829. <p>We already have our Performance Observer and callback:</p>
4830. <div>
4831. <pre><code>const lcpObserver = new PerformanceObserver(list =&gt; {});
4832. lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });
4833. </code></pre>
4834. </div>
4835.  
4836. <p>Let’s fill in that empty callback so that it returns a list of entries once performance measurement starts:</p>
4837. <div>
4838. <pre><code>// The Performance Observer
4839. const lcpObserver = new PerformanceObserver(list =&gt; {</code>
4840.  <code>// Returns the entire list of entries</code>
4841.  <code>const entries = list.getEntries();</code>
4842. <code>});
4843.  
4844. // Call the Observer
4845. lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });
4846. </code></pre>
4847. </div>
4848.  
4849. <p>Next, we want to know which element is pegged as the LCP. It’s worth noting that the element representing the LCP is always the <em>last</em> element in the <a href="https://w3c.github.io/largest-contentful-paint/#sec-report-largest-contentful-paint">ordered list of entries</a>. So, we can look at the list of returned entries and return the last one:</p>
4850. <div>
4851. <pre><code>// The Performance Observer
4852. const lcpObserver = new PerformanceObserver(list => {
4853.  // Returns the entire list of entries
4854.  const entries = list.getEntries();</code>
4855.  <code>// The element representing the LCP</code>
4856.  <code>const el = entries[entries.length - 1];</code>
4857. <code>});
4858.  
4859. // Call the Observer
4860. lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });
4861. </code></pre>
4862. </div>
4863.  
4864. <p>The last thing is to display the results! We could create some sort of dashboard UI that consumes all the data and renders it in an aesthetically pleasing way. Let’s simply log the results to the console rather than switch gears.</p>
4865. <div>
4866. <pre><code>// The Performance Observer
4867. const lcpObserver = new PerformanceObserver(list => {
4868.  // Returns the entire list of entries
4869.  const entries = list.getEntries();
4870.  // The element representing the LCP
4871.  const el = entries[entries.length - 1];</code>
4872.  
4873.  <code>// Log the results in the console</code>
4874.  <code>console.log(el.element);</code>
4875. <code>});
4876.  
4877. // Call the Observer
4878. lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });
4879. </code></pre>
4880. </div>
4881.  
4882. <p>There we go!</p>
4883. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/1-smashingmagazine-devtools-console.png" /></p>
4884. <p>It’s certainly nice knowing which element is the largest. But I’d like to know more about it, say, how long it took for the LCP to render:</p>
4885. <div>
4886. <pre><code>// The Performance Observer
4887. const lcpObserver = new PerformanceObserver(list => {
4888.  
4889.  const entries = list.getEntries();
4890.  const lcp = entries[entries.length - 1];
4891.  
4892.  entries.forEach(entry => {
4893.    // Log the results in the console
4894.    console.log(
4895.      <code>The LCP is:</code>,
4896.      lcp.element,
4897.      <code>The time to render was ${entry.startTime} milliseconds.</code>,
4898.    );
4899.  });
4900. });
4901.  
4902. // Call the Observer
4903. lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });
4904.  
4905. // The LCP is:
4906. // <h2 class="author-post__title mt-5 text-5xl">…</h2>
4907. // The time to  render was 832.6999999880791 milliseconds.
4908. </code></pre>
4909. </div>
4910.  
4911. Reporting First Contentful Paint
4912. <p>This is all about the time it takes for the very first piece of DOM to get painted on the screen. Faster is better, of course, but the way Lighthouse reports it, a “passing” score comes in between 0 and 1.8 seconds.</p>
4913. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/2-timeline-mobile-screen-frames.png" /></p>
4914. <p>Just like we set the <code>type</code> property to <code>largest-contentful-paint</code> to fetch performance data in the last section, we’re going to set a different type this time around: <code>paint</code>.</p>
4915. <p>When we call <code>paint,</code> we tap into the <code>PerformancePaintTiming</code> interface that opens up reporting on <strong>first paint</strong> and <strong>first contentful paint</strong>.</p>
4916. <div>
4917. <pre><code>// The Performance Observer
4918. const paintObserver = new PerformanceObserver(list => {
4919.  const entries = list.getEntries();
4920.  entries.forEach(entry =&gt; {<br />    // Log the results in the console.
4921.    console.log(
4922.      <code>The time to ${entry.name} took ${entry.startTime} milliseconds.</code>,
4923.    );
4924.  });
4925. });
4926.  
4927. // Call the Observer.
4928. paintObserver.observe({ type: "paint", buffered: true });
4929.  
4930. // The time to first-paint took 509.29999999981374 milliseconds.
4931. // The time to first-contentful-paint took 509.29999999981374 milliseconds.
4932. </code></pre>
4933. </div>
4934.  
4935. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/3-devtools-smashingmagazine.png" /></p>
4936. <p>Notice how <code>paint</code> spits out two results: one for the <code>first-paint</code> and the other for the <code>first-contenful-paint</code>. I know that a lot happens between the time a user navigates to a page and stuff starts painting, but I didn’t know there was a difference between these two metrics.</p>
4937. <p>Here’s how <a href="https://w3c.github.io/paint-timing/#first-paint-and-first-contentful-paint">the spec</a> explains it:</p>
4938. <blockquote>“The primary difference between the two metrics is that [First Paint] marks the first time the browser renders anything for a given document. By contrast, [First Contentful Paint] marks the time when the browser renders the first bit of image or text content from the DOM.”</blockquote>
4939.  
4940. <p>As it turns out, the first paint and FCP data I got back in that last example are identical. Since first paint can be <a href="https://www.debugbear.com/docs/web-performance-metrics?utm_campaign=sm-4#first-paint-fp"><em>anything</em> that prevents a blank screen</a>, e.g., a background color, I think that the identical results mean that whatever content is first painted to the screen just so happens to also be the first contentful paint.</p>
4941. <p>But there’s apparently a lot more nuance to it, as Chrome measures FCP differently based on what version of the browser is in use. <a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/fcp.md">Google keeps a full record of the changelog</a> for reference, so that’s something to keep in mind when evaluating results, especially if you find yourself with different results from others on your team.</p>
4942. Reporting Cumulative Layout Shift
4943. <p>How much does the page shift around as elements are painted to it? Of course, we can get that from the Performance API! Instead of <code>largest-contentful-paint</code> or <code>paint</code>, now we’re turning to the <code>layout-shift</code> type.</p>
4944. <p>This is where browser support is dicier than other performance metrics. The <code>LayoutShift</code> interface is still in “experimental” status at this time, with <a href="https://caniuse.com/mdn-api_layoutshift">Chromium browsers being the sole group of supporters</a>.</p>
4945. <p>As it currently stands, <code>LayoutShift</code> opens up several pieces of information, including a <code>value</code> representing the amount of shifting, as well as the <code>sources</code> causing it to happen. More than that, we can tell if any user interactions took place that would affect the CLS value, such as zooming, changing browser size, or actions like <code>keydown</code>, <code>pointerdown</code>, and <code>mousedown</code>. This is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift/lastInputTime"><code>lastInputTime</code> property</a>, and there’s an accompanying <a href="https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift/hadRecentInput"><code>hasRecentInput</code> boolean</a> that returns <code>true</code> if the <code>lastInputTime</code> is less than <code>500ms</code>.</p>
4946. <p>Got all that? We can use this to both see how much shifting takes place during page load and identify the culprits while excluding any shifts that are the result of user interactions.</p>
4947. <div>
4948. <pre><code>const observer = new PerformanceObserver((list) =&gt; {
4949.  let cumulativeLayoutShift = 0;
4950.  list.getEntries().forEach((entry) => {
4951.    // Don't count if the layout shift is a result of user interaction.
4952.    if (!entry.hadRecentInput) {
4953.      cumulativeLayoutShift += entry.value;
4954.    }
4955.    console.log({ entry, cumulativeLayoutShift });
4956.  });
4957. });
4958.  
4959. // Call the Observer.
4960. observer.observe({ type: "layout-shift", buffered: true });
4961. </code></pre>
4962. </div>
4963.  
4964. <p>Given the experimental nature of this one, here’s what an <code>entry</code> object looks like when we query it:</p>
4965. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/4-tree-outline.png" /></p>
4966. <p>Pretty handy, right? Not only are we able to see how much shifting takes place (<code>0.128</code>) and which element is moving around (<code>article.a.main</code>), but we have the exact coordinates of the element’s box from where it starts to where it ends.</p>
4967. Reporting Interaction To Next Paint
4968. <p>This is the new kid on the block that got my mind wondering about the Performance API in the first place. It’s been possible for some time now to measure INP as it transitions to replace First Input Delay as a Core Web Vitals metric in March 2024. When we’re talking about INP, we’re talking about measuring the time between a user interacting with the page and the page responding to that interaction.</p>
4969. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/5-timeline-illustration-tasks.jpg" /></p>
4970. <p>We need to hook into the <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming"><code>PerformanceEventTiming</code> class</a> for this one. And there’s so much we can dig into when it comes to user interactions. Think about it! There’s what type of event happened (<code>entryType</code> and <code>name</code>), when it happened (<code>startTime</code>), what element triggered the interaction (<code>interactionId</code>, experimental), and when processing the interaction starts (<code>processingStart</code>) and ends (<code>processingEnd</code>). There’s also a way to exclude interactions that can be canceled by the user (<code>cancelable</code>).</p>
4971. <pre><code>const observer = new PerformanceObserver((list) =&gt; {
4972.  list.getEntries().forEach((entry) => {
4973.    // Alias for the total duration.
4974.    const duration = entry.duration;
4975.    // Calculate the time before processing starts.
4976.    const delay = entry.processingStart - entry.startTime;
4977.    // Calculate the time to process the interaction.
4978.    const lag = entry.processingStart - entry.startTime;
4979.  
4980.    // Don't count interactions that the user can cancel.
4981.    if (!entry.cancelable) {
4982.      console.log(`INP Duration: ${duration}`);
4983.      console.log(`INP Delay: ${delay}`);
4984.      console.log(`Event handler duration: ${lag}`);
4985.    }
4986.  });
4987. });
4988.  
4989. // Call the Observer.
4990. observer.observe({ type: "event", buffered: true });
4991. </code></pre>
4992.  
4993. Reporting Long Animation Frames (LoAFs)
4994. <p>Let’s build off that last one. We can now track INP scores on our website and break them down into specific components. But what code is actually running and causing those delays?</p>
4995. <p>The <a href="https://www.debugbear.com/blog/long-animation-frames/?utm_campaign=sm-4">Long Animation Frames API</a> was developed to help answer that question. It won’t land in Chrome stable until mid-March 2024, but you can already use it in Chrome Canary.</p>
4996. <p>A <code>long-animation-frame</code> entry is reported every time the browser couldn’t render page content immediately as it was busy with other processing tasks. We get an overall <code>duration</code> for the long frame but also a <code>duration</code> for different <code>scripts</code> involved in the processing.</p>
4997. <div>
4998. <pre><code>const observer = new PerformanceObserver((list) =&gt; {
4999.  list.getEntries().forEach((entry) => {
5000.    if (entry.duration > 50) {
5001.      // Log the overall duration of the long frame.
5002.      console.log(<code>Frame took ${entry.duration} ms</code>)
5003.      console.log(<code>Contributing scripts:</code>)
5004.      // Log information on each script in a table.
5005.      entry.scripts.forEach(script => {
5006.        console.table({
5007.          // URL of the script where the processing starts
5008.          sourceURL: script.sourceURL,
5009.          // Total time spent on this sub-task
5010.          duration: script.duration,
5011.          // Name of the handler function
5012.          functionName: script.sourceFunctionName,
5013.          // Why was the handler function called? For example,
5014.          // a user interaction or a fetch response arriving.
5015.          invoker: script.invoker
5016.        })
5017.      })
5018.    }
5019.  });
5020. });
5021.  
5022. // Call the Observer.
5023. observer.observe({ type: "long-animation-frame", buffered: true });
5024. </code></pre>
5025. </div>
5026.  
5027. <p>When an INP interaction takes place, we can find the closest long animation frame and investigate what processing delayed the page response.</p>
5028. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/6-animation-frames-data-chrome-devtools-console.png" /></p>
5029. There’s A Package For This
5030. <p>The Performance API is so big and so powerful. We could easily spend an entire bootcamp learning all of the interfaces and what they provide. There’s network timing, navigation timing, resource timing, and plenty of custom reporting features available on top of the Core Web Vitals we’ve looked at.</p>
5031. <p>If CWVs are what you’re really after, then you might consider looking into the <a href="https://github.com/GoogleChrome/web-vitals">web-vitals library</a> to wrap around the browser Performance APIs.</p>
5032. <p>Need a CWV metric? All it takes is a single function.</p>
5033. <pre><code>webVitals.getINP(function(info) {
5034.  console.log(info)
5035. }, { reportAllChanges: true });
5036. </code></pre>
5037.  
5038. <p>Boom! That <code>reportAllChanges</code> property? That’s a way of saying we only want to report data every time the metric changes instead of only when the metric reaches its final value. For example, as long as the page is open, there’s always a chance that the user will encounter an even slower interaction than the current INP interaction. So, without <code>reportAllChanges</code>, we’d only see the INP reported when the page is closed (or when it’s hidden, e.g., if the user switches to a different browser tab).</p>
5039. <p>We can also report purely on the difference between the preliminary results and the resulting changes. From the <a href="https://github.com/GoogleChrome/web-vitals?tab=readme-ov-file#report-only-the-delta-of-changes">web-vitals docs</a>:</p>
5040. <pre><code>function logDelta({ name, id, delta }) {
5041.  console.log(`${name} matching ID ${id} changed by ${delta}`);
5042. }
5043.  
5044. onCLS(logDelta);
5045. onINP(logDelta);
5046. onLCP(logDelta);
5047. </code></pre>
5048.  
5049. Measuring Is Fun, But Monitoring Is Better
5050. <p>All we’ve done here is scratch the surface of the Performance API as far as programmatically reporting Core Web Vitals metrics. It’s fun to play with things like this. There’s even a slight feeling of <em>power</em> in being able to tap into this information on demand.</p>
5051. <p>At the end of the day, though, you’re probably just as interested <a href="https://www.smashingmagazine.com/2023/08/running-page-speed-test-monitoring-versus-measuring/">in <em>monitoring</em> performance as you are in <em>measuring</em> it</a>. We could do a deep dive and detail what a performance dashboard powered by the Performance API is like, complete with historical records that indicate changes over time. That’s ultimately the sort of thing we can build on this — we can build our own real user monitoring (RUM) tool or perhaps compare Performance API values against historical data from the <a href="https://developer.chrome.com/docs/crux/history-api">Chrome User Experience Report</a> <a href="https://developer.chrome.com/docs/crux/bigquery">(CrUX)</a>.</p>
5052. <p>Or perhaps you want a solution right now without stitching things together. That’s what you’ll get from a paid commercial service like <a href="https://www.debugbear.com/?utm_campaign=sm-4">DebugBear</a>. All of this is already baked right in with all the metrics, historical data, and charts you need to gain insights into the overall performance of a site over time… <a href="https://www.debugbear.com/real-user-monitoring/?utm_campaign=sm-4">and in real-time, monitoring real users</a>.</p>
5053. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/7-debugbear-largest-contentful-paint-dashboard.png" /></p>
5054. <p>DebugBear can help you identify why users are having slow experiences on any given page. If there is slow INP, what page elements are these users interacting with? What elements often shift around on the page and cause high CLS? Is the LCP typically an image, a heading, or something else? And does the type of LCP element impact the LCP score?</p>
5055. <p>To help explain INP scores, DebugBear also supports the upcoming Long Animation Frames API we looked at, allowing you to see what code is responsible for interaction delays.</p>
5056. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/8-table-css-selectors.png" /></p>
5057. <p>The Performance API can also report a list of all resource requests on a page. DebugBear uses this information to show a <a href="https://www.debugbear.com/docs/waterfall/?utm_campaign=sm-4">request waterfall chart</a> that tells you not just when different resources are loaded but also whether the resources were render-blocking, loaded from the cache or whether an image resource is used for the LCP element.</p>
5058. <p>In this screenshot, the blue line shows the FCP, and the red line shows the LCP. We can see that the LCP happens right after the LCP image request, marked by the blue “LCP” badge, has finished.</p>
5059. <p><img src="https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/9-request-waterfall-visualization.png" /></p>
5060. <p>DebugBear offers a <a href="https://www.debugbear.com/signup/?utm_campaign=sm-4">14-day free trial</a>. See how fast your website is, what’s slowing it down, and how you can improve your Core Web Vitals. You’ll also get monitoring alerts, so if there’s a web vitals regression, you’ll find out before it starts impacting Google search results.</p>
5061. ]]></content:encoded>
5062.            <author>hello@smashingmagazine.com (Geoff Graham)</author>
5063.            <enclosure url="http://files.smashing.media/articles/reporting-core-web-vitals-performance-api/reporting-core-web-vitals-performance-api.jpg" length="0" type="image/jpg"/>
5064.        </item>
5065.        <item>
5066.            <title><![CDATA[A Web Designer’s Accessibility Advocacy Toolkit]]></title>
5067.            <link>https://smashingmagazine.com/2024/02/web-designer-accessibility-advocacy-toolkit/</link>
5068.            <guid>https://smashingmagazine.com/2024/02/web-designer-accessibility-advocacy-toolkit/</guid>
5069.            <pubDate>Mon, 26 Feb 2024 18:00:00 GMT</pubDate>
5070.            <description><![CDATA[Digital designer Yichan Wang has put together this collection of strategies and selling points to help you encourage and advocate for accessibility in your place of work, including useful scripts you can use as starting points.]]></description>
5071.            <content:encoded><![CDATA[<p>Web accessibility can be challenging, particularly for clients unfamiliar with tech or compliance with <a href="https://www.ada.gov">The Americans With Disabilities Act</a> (ADA). My role as a digital designer often involves guiding clients toward ADA-compliant web designs. I’ve acquired many strategies over the years for encouraging clients to adopt accessible web practices and invest in accessible user interfaces. It’s something that comes up with nearly every new project, and I decided to develop a personal toolkit to help me make the case.</p>
5072. <p>Now, I am opening up my toolkit for you to have and use. While some of the strategies may be specific to me and my work, there are plenty more that cast a wider net and are more universally applicable. I’ve considered different real-life scenarios where I have had to make a case for accessibility. You may even personally identify with a few of them!</p>
5073. <p>Please enjoy. As you do, remember that there is no silver bullet for “selling” accessibility. We can’t win everyone over with cajoling or terse arguments. My hope is that you are able to use this collection to establish partnerships with your colleagues and clients alike. <strong>Accessibility is something that anyone can influence at various stages in a project</strong>, and “winning” an argument isn’t exactly the point. It’s a bigger picture we’re after, one that influences how teams work together, changes habits, and develops a new level of empathy and understanding.</p>
5074. <p>I begin with general strategies for discussing accessibility with clients. Following that, I provide specific language and responses you can use to introduce accessibility practices to your team and clients and advocate its importance while addressing client skepticism and concerns. Use it as a starting point and build off of it so that it incorporates points and scenarios that are more specific to your work. I sincerely hope it helps you advance accessible practices.</p>
5075. General Strategies
5076. <p>We’ll start with a few ways you can position yourself when interacting with clients. By adopting a certain posture, we can set ourselves up to be the experts in the room, the ones with solutions rather than arguments.</p>
5077. <h3>Showcasing Expertise</h3>
5078. <p>I tend to establish my expertise and tailor the information to the client’s understanding of accessibility, which could be not very much. For those new to accessibility, I offer a concise overview of its definition, evaluation, and business impact. For clients with a better grasp of accessible practices, I like to use the WCAG as a point of reference for helping frame productive discussions based on substance and real requirements.</p>
5079. <h3>Aligning With Client Goals</h3>
5080. <p>I connect accessibility to the client’s goals instead of presenting accessibility as a moral imperative. No one loves being told what to do, and talking to clients on their terms establishes a nice bridge for helping them connect the dots between the inherent benefits of accessible practices and what they are trying to accomplish. The two aren’t mutually exclusive!</p>
5081. <p>In fact, there are many clear benefits for apps that make accessibility a first-class feature. Refer to the “<a href="https://www.dropbox.com/scl/fi/leoodn5fhqvzozt8x4k5y/A-Web-Designer-s-Accessibility-Advocacy-Toolkit.paper?rlkey=2opxta6wyuk1knfqp2yxm90yu&amp;dl=0#:h2=Accessibility-Benefits">Accessibility Benefits</a>” section to help describe those benefits to your colleagues and clients.</p>
5082. <h3>Defining Accessibility In The Project Scope</h3>
5083. <p>I outline accessibility goals early, typically when defining the project scope and requirements. Baking accessibility into the project scope ensures that it is at least considered at this crucial stage where decisions are being made for everything from expected outcomes to architectural requirements. </p>
5084. <p>User stories and personas are common artifacts for which designers are often responsible. Use these as opportunities to define accessibility in the same breath as defining who the users are and how they interact with the app. Framing stories and outcomes as user interactions in an “as-when-then-so” format provides an opening to lead with accessibility:</p>
5085. <blockquote>As a user, when I <strong><strong>__</strong></strong>, then I expect that <strong><strong>__</strong></strong>, so I can <strong><strong>_</strong></strong>.</blockquote>
5086.  
5087. <p>Fill in the blanks. I think you’ll find that <strong>user’s expected outcomes are typically aligned with accessible experiences</strong>. Federico Francioni published his take on <a href="https://usabilitygeek.com/the-upfront-guide-to-design-inclusive-personas/">developing inclusive user personas</a>, building off other excellent resources, including <a href="https://inclusive.microsoft.design">Microsoft’s Inclusive Design guidelines</a>.</p>
5088. <h3>Being Ready With Resources and Examples</h3>
5089. <p>I maintain a database of resources for clients interested in learning more about accessibility. Sharing anecdotes, such as clients who’ve seen benefits from accessibility or examples of companies penalized for non-compliance, can be very impactful.</p>
5090. <p>Microsoft is helpful here once again with a <a href="https://inclusive.microsoft.design/#InclusiveDesignInAction">collection of brief videos that cover a variety of uses</a>, from informing your colleagues and clients on basic accessibility concepts to interviews with accessibility professionals and case studies involving real users. </p>
5091. <p>There are a few go-to resources I’ve bookmarked to share with clients who are learning about accessibility for the first time. What I like about these is the approachable language and clarity. “<a href="https://web.dev/learn/accessibility/">Learn Accessibility</a>” from web.dev is especially useful because it’s framed as a 21-part course. That may sound daunting, but it’s organized in small chunks that make it manageable, and sometimes I will simply point to the <a href="https://web.dev/learn/accessibility/glossary?continue=https%3A%2F%2Fweb.dev%2Flearn%2Faccessibility%2F%23article-https%3A%2F%2Fweb.dev%2Flearn%2Faccessibility%2Fglossary">Glossary</a> to help clients understand the concepts we discuss.</p>
5092. <p>And where “Learn Accessibility” is focused on specific components of accessibility, I find that the <a href="https://inclusivedesignprinciples.org">Inclusive Design Principles</a> site has a perfect presentation of the concepts and guiding principles of inclusion and accessibility on the web.</p>
5093. <p>Meanwhile, I tend to sit beside a client to look at <a href="https://www.a11yproject.com">The A11Y Project</a>. I pick a few resources to go through. Otherwise, the amount of information can be overwhelming. I like to offer this during a project’s planning phase because the site is focused on actionable strategies that help scope work.</p>
5094. <ul>
5095. <li><a href="https://blog.hubspot.com/website/web-accessibility">Web Accessibility: The Ultimate Guide</a> (Kristen Baker)</li>
5096. <li><a href="https://web.dev/learn/accessibility/">Learn Accessibility</a> (web.dev)</li>
5097. <li><a href="https://inclusivedesignprinciples.org/">Inclusive Design Principles</a> (Swan, Pouncy, Pickering, and Watson)</li>
5098. <li><a href="https://www.a11yproject.com/">The A11Y Project</a> </li>
5099. <li><a href="https://webaim.org/resources/">WebAIM Resources</a></li>
5100. <li><a href="https://github.com/ediblecode/accessibility-resources?tab=readme-ov-file#checklists">Accessibility Resources GitHub Repository</a> (Ian Routledge)</li>
5101. </ul>
5102. <h3>Leveraging User Research</h3>
5103. <p>User research that is specific to the client’s target audience is more convincing than general statistics alone. When possible, I try to understand those user’s needs, including what they expect, what sort of technology they use to browse online, and where they are geographically. Painting <strong>a more complete picture of users</strong> — based on real-life factors and information — offers a more human perspective and plants the first seeds of empathy in the design process.</p>
5104. <p>Web analytics are great for identifying who users are and how they currently interact with the app. At the same time, they are also wrought with caveats as far as accuracy goes, depending on the tool you use and how you collect your data. That said, I use the information to support my user persona decisions and the specific requirements I write. Analytics add nice brush strokes to the picture but do not paint the entire view. So, leverage it!</p>
5105. <p>The big caveat with web analytics? <a href="https://www.boia.org/blog/can-you-detect-screen-reader-users">There’s no way to identify traffic that uses assistive tech.</a> That’s a good thing in general as far as privacy goes, but it does mean that researching the usability of your site is best done with real users — as it is with any user research, really. <a href="https://www.a11yproject.com/resources/#screen-reader-help">The A11Y Project has excellent resources</a> for testing screen readers, including a link to <a href="https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/">this Smashing Magazine article about manual accessibility testing by Eric Bailey</a> as well as a vast archive of links pointing to other research.</p>
5106. <p>That said, web analytics can still be very useful to help accommodate other impairments, for example, segmenting traffic by age (for improving accessibility for low vision) and geography (for improving performance gaps for those on low-powered devices). <a href="https://webaim.org/blog/low-vision-survey2-results/">WebAIM also provides insights in a report they produced from a 2018 survey</a> of users who report having low vision.</p>
5107. <h3>Leaving Room For Improvements</h3>
5108. <p>Chances are that your project will fall at least somewhat short of your accessibility plans. It happens! I see plenty of situations where a late deadline translates into rushed work that sacrifices quality for speed, and accessibility typically falls victim to degraded quality.</p>
5109. <p>I keep track of these during the project’s various stages and attempt to document them. This way, there’s already a roadmap for inclusive and accessible improvements in subsequent releases. It’s scoped, backlogged, and ready to drop into a sprint.</p>
5110. <p>For projects involving large sites with numerous accessibility issues, I emphasize that <strong>partial accessibility compliance is not the same as actual compliance</strong>. I often propose phased solutions, starting with incremental changes that fit within the current scope and budget.</p>
5111. <p>And remember, just because something passes a WCAG success criterion <a href="https://adrianroselli.com/2023/12/2-5-8-adversarial-conformance.html">doesn’t necessarily mean it is accessible</a>. Passing tests is a good sign, but there will always be room for improvement.</p>
5112. Commonly Asked Accessibility Questions
5113. <p>Accessibility is a broad topic, and we can’t assume that everyone knows what constitutes an “accessible” interface. Often, when I get pushback from a colleague or client, it’s because they simply do not have the same context that I do. That’s why I like to keep a handful of answers to commonly asked questions in my back pocket. It’s amazing how answering the “basics” leads to productive discussions filled with substance rather than ones grounded in opinion.</p>
5114. <h3>What Do We Mean By “Web Accessibility”?</h3>
5115. <p>When we say “web accessibility,” we’re generally talking about making online content available and usable for anyone with a disability, whether it’s a permanent impairment or a temporary one. It’s the practice of removing friction that excludes people from gaining access to content or from completing a task. That usually involves complying with a set of guidelines that are designed to remove those barriers.</p>
5116. <h3>Who Creates Accessibility Guidelines?</h3>
5117. <p>The <a href="https://www.w3.org/WAI/standards-guidelines/">Web Content Accessibility Guidelines (WCAG)</a> are created by a working group of the <a href="https://www.w3.org">World Wide Web Consortium (W3C)</a> called the <a href="https://www.w3.org/WAI/">Web Accessibility Initiative</a> (WAI). The W3C develops guidelines and principles to help designers, developers, and authors like us create web experiences based on a common set of standards, including those for HTML, CSS, internationalization, privacy, security, and yes, accessibility, among <a href="https://www.w3.org/TR/">many, many other areas</a>. The WAI working group maintains the accessibility standards we call WCAG.</p>
5118. <h3>Who Needs Web Accessibility?</h3>
5119. <p><a href="https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html">Twenty-seven percent of the U.S. population has a disability</a>, emphasizing the widespread need for accessible web design. WCAG primarily focuses on three groups:</p>
5120. <ol>
5121. <li>Cognitive or learning disabilities,</li>
5122. <li>Visual impairments,</li>
5123. <li>Motor skills.</li>
5124. </ol>
5125. <p>When we make web experiences that solve these issues based on established guidelines, we’re not only doing good for those who are directly impacted by impairment but those who may be impaired in less direct ways as well, such as establishing large target sizes for those tapping a touchscreen phone with their hands full, or using proper color contrast for those navigating a screen in bright sunlight. Everyone needs — and benefits from — accessibility!</p>
5126. <h4>Further Reading</h4>
5127. <ul>
5128. <li><a href="https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html">Disability Impacts All of Us</a> (Center for Disease Control and Prevention)</li>
5129. <li><a href="https://bootcamp.uxdesign.cc/inclusive-persona-extension-9b8878487148">Inclusive persona extension</a> (Kaz Tsuchiya)</li>
5130. <li><a href="https://www.boia.org/blog/situational-disabilities-why-web-accessibility-impacts-everyone">Situational Disabilities: Why Web Accessibility Impacts Everyone</a> (Bureau of Internet Accessibility)</li>
5131. </ul>
5132. <h3>How Is Web Accessibility Regulated?</h3>
5133. <p>The <a href="https://www.ada.gov">Americans with Disabilities Act (ADA)</a> is regulated by the <a href="https://www.justice.gov/crt">Civil Rights Division</a> of the <a href="https://www.justice.gov">U.S. Department of Justice</a>, which was established by the <a href="https://en.wikipedia.org/wiki/Civil_Rights_Act_of_1957">Civil Rights Act of 1957</a>. Even though there is a lot of bureaucracy in that last sentence, it’s reassuring to know the U.S. government not only believes in web accessibility but enforces it as well.</p>
5134. <p>Non-compliance can result in legal action, with first-time ADA violations leading to fines of up to $75,000, increasing to $150,000 for subsequent violations. The number of lawsuits for alleged ADA breaches has surged in recent years, with more than <a href="https://blog.usablenet.com/decoding-digital-accessibility-lawsuits-in-2023-key-trends-strategic-insights?_gl=1*1yrmzfm*_ga*MTAzMDgyMTg5Ny4xNzA2MTA5Njcz*_ga_3GH0FY5X8W*MTcwNjEwOTY3My4xLjAuMTcwNjEwOTcwNi4yNy4wLjA.*_ga_GHSPW6BGTY*MTcwNjEwOTY3My4xLjEuMTcwNjEwOTcwNi4yNy4wLjA.">4,500 lawsuits filed in 2023</a> against sites that fail to comply with <a href="https://www.w3.org/TR/WCAG21/">WCAG AA 2.1</a> alone — roughly 500 more lawsuits than 2022!</p>
5135. <h4>Further Reading</h4>
5136. <ul>
5137. <li><a href="https://archive.ada.gov/civil_penalties_2014.htm">Information and Technical Assistance on the Americans with Disabilities Act</a> (ADA.gov)</li>
5138. <li><a href="https://blog.usablenet.com/five-years-of-ada-web-and-app-lawsuits-key-observations-and-trends">Five years of ADA web and app lawsuits — key observations and trends</a> (UsableNet)</li>
5139. <li><a href="https://info.usablenet.com/ada-website-compliance-lawsuit-tracker?_gl=1*7we9u3*_ga*MTA2MTc4MTMwNy4xNzA0MzA4MTE4*_ga_3GH0FY5X8W*MTcwNDMwODExNy4xLjAuMTcwNDMwODEyNy41MS4wLjA">ADA Website Compliance Lawsuit Tracker</a> (UsableNet)</li>
5140. <li><a href="https://adasoutheast.org/court/national-federation-of-the-blind-v-target-corporation-2/">National Federation of the Blind v. Target Corporation</a> (Southeast ADA Center)</li>
5141. </ul>
5142. <h3>How Is Web Accessibility Evaluated?</h3>
5143. <p>Web accessibility is something we can test against. Many tools have been created to audit sites on the spot based on WCAG success criteria that specify accessible requirements. That would be a <strong>standards-based evaluation</strong> using WCAG as a reference point for auditing compliance.</p>
5144. <p><a href="https://webaim.org/articles/tools/">WebAIM has an excellent page</a> that compares different types of accessibility testing, reporting, and tooling. They are also quick to note that <strong>automated testing</strong>, while convenient, is not a comprehensive way to audit accessibility. Automated tools that scan websites may be able to pick up instances where mistakes in the HTML might contribute to accessibility issues and where color contrasts are insufficient. But they cannot replace or perfectly imitate a real-life person. Testing in real browsers with real people continues to be the most effective way to truly evaluate accessible web experiences.</p>
5145. <p>This isn’t to say automated tools should not be part of an accessibility testing suite. In fact, they often highlight areas you may have overlooked. Even false positives are good in the sense that they force you to pause and look more closely at something. Some of the most widely used automated tools include the following:</p>
5146. <ul>
5147. <li><a href="https://wave.webaim.org">WAVE</a> (free)</li>
5148. <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a> (free)</li>
5149. <li><a href="https://www.deque.com/axe/">axe</a> (paid)</li>
5150. <li><a href="https://polypane.app">Polypane</a> (paid)</li>
5151. </ul>
5152. <p>These are just a few of the most frequent tools I use in my own testing, but there are many more, and the <a href="https://www.w3.org/WAI/ER/tools/">WAI maintains an extensive list of available tools</a> that are worth considering. But again, remember that <strong>automated testing is not a one-to-one replacement for testing with real users</strong>.</p>
5153. <p>Checklists can be handy for ensuring you are covering your bases:</p>
5154. <ul>
5155. <li><a href="https://www.digitala11y.com/wcag-checklist/">WCAG 2.1 and 2.2 AA Checklist</a> (Raghavendra Satish Peri)</li>
5156. <li><a href="https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#qr-text-equiv-all">How to Meet WCAG (Quick Reference)</a> (W3C)</li>
5157. <li><a href="https://codepen.io/weboverhauls/pen/zYvopYE">WCAG 2.2 Checklist with Filter and Links on CodePen</a> (Web Overhauls)</li>
5158. </ul>
5159. Accessibility Benefits
5160. <p>When discussing accessibility, I find the most effective arguments are ones that are framed around the interests of clients and stakeholders. That way, the discussion stays within scope and helps everyone see that <strong>proper accessibility practices actually benefit business goals</strong>. Speaking in business terms is something I openly embrace because it typically supports my case.</p>
5161. <p>The following are a few ways I would like to explain the positive impacts that accessibility has on business goals.</p>
5162. <h3>Case Studies</h3>
5163. <p>Sometimes, the most convincing approach is to offer examples of companies that have committed to accessible practices and come out better for it. And there are plenty of examples! I like to use case studies and reports in a similar industry or market for a more apples-to-apples comparison that stakeholders can identify with.</p>
5164. <p>That said, there are great general cases involving widely respected companies and brands, including This American Life and Tesco, that demonstrate benefits such as increased organic search traffic, enhanced user engagement, and reduced site load times. For a comprehensive guide on framing these benefits, I refer to the <a href="https://www.w3.org/WAI/business-case/">W3C’s resource on building the business case for accessibility</a>.</p>
5165. <h4>What To Say To Your Client</h4>
5166. <blockquote>Let me share how focusing on accessibility can directly benefit your business. For instance, in 2005, Legal &amp; General revamped their website with accessibility in mind and saw a substantial increase in organic search traffic exceeding 50%. This isn’t just about compliance; it’s about reaching a wider audience more effectively. By making your site more accessible, we can improve user engagement and potentially decrease load times, enhancing the overall user experience. This approach not only broadens your reach to include users with disabilities but also boosts your site’s performance in search rankings. In short, prioritizing accessibility aligns with your goal to increase online visibility and customer engagement.</blockquote>
5167.  
5168. <h4>Further Reading</h4>
5169. <ul>
5170. <li><a href="https://www.w3.org/WAI/business-case/">The Business Case for Digital Accessibility</a> (W3C)</li>
5171. <li><a href="https://www.w3.org/community/wai-engage/wiki/Barclays_Bank_Case_Study">Barclays Bank Case Study</a> (W3C)</li>
5172. <li><a href="https://business.scope.org.uk/article/business-case-accessibility-6-companies-who-boosted-business-with-accessibility">6 companies that boosted business with accessibility</a> (Scope)</li>
5173. <li><a href="https://www.deque.com/help-scout-customer-support-software-accessibility/">Great Customer Service is Accessible: Help Scout’s Audit Journey with Deque</a> (Deque)</li>
5174. <li><a href="https://www.forbes.com/sites/afdhelaziz/2019/04/29/the-power-of-purpose-how-microsoft-unlocked-inclusivity-to-drive-growth-and-innovation/?sh=266912ef24e8">How Microsoft Unlocked Inclusivity To Drive Growth And Innovation</a> (Forbes)</li>
5175. <li><a href="https://www.3playmedia.com/why-3play/case-studies/this-american-life/">This American Life: A Case Study on How Transcription Boosts Podcast SEO and Engagement</a> (3Play Media)</li>
5176. <li><a href="https://techcrunch.com/2016/05/19/when-it-comes-to-accessibility-apple-continues-to-lead-in-awareness-and-innovation/?guccounter=1">When it comes to accessibility, Apple continues to lead in awareness and innovation</a> (TechCrunch)</li>
5177. </ul>
5178. <h3>The Curb-Cut Effect</h3>
5179. <p>The “curb-cut effect” refers to how features originally designed for accessibility end up benefiting a broader audience. This concept helps move the conversation away from limiting accessibility as an issue that only affects the minority.</p>
5180. <p>Features like voice control, auto-complete, and auto-captions — initially created to enhance accessibility — have become widely used and appreciated by all users. This effect also includes situational impairments, like using a phone in bright sunlight or with one hand, expanding the scope of who benefits from accessible design. Big companies have found that investing in accessibility can spur innovation.</p>
5181. <h4>What To Say To Your Client</h4>
5182. <blockquote>Let’s consider the ‘curb-cut effect’ in the context of your website. Originally, curb cuts were designed for wheelchair users, but they ended up being useful for everyone, from parents with strollers to travelers with suitcases. Similarly, many digital accessibility features we implement can enhance the experience for all your users, not just those with disabilities. For example, features like voice control and auto-complete were developed for accessibility but are now widely used by everyone. This isn’t just about inclusivity; it’s about creating a more versatile and user-friendly website. By incorporating these accessible features, we’re not only catering to a specific group but also improving the overall user experience, which can lead to increased engagement and satisfaction across your entire customer base.</blockquote>
5183.  
5184. <h4>Further Reading</h4>
5185. <ul>
5186. <li><a href="https://www.fastcompany.com/3060028/googles-latest-accessibility-feature-is-so-good-everyone-will-use-it">Google’s Latest Accessibility Feature Is So Good, Everyone Will Use It</a> (Fast Company)</li>
5187. <li><a href="https://www.fastcompany.com/3060090/how-designing-for-the-disabled-is-giving-google-an-edge">How Designing for the Disabled is Giving Google an Edge</a> (Fast Company)</li>
5188. <li><a href="https://www.forbes.com/sites/servicenow/2022/05/06/make-space-for-all-digital-accessibility-benefits-everyone/?sh=5671081a64ae">Make Space For All: Digital Accessibility Benefits Everyone</a> (Forbes)</li>
5189. <li><a href="https://www.boia.org/blog/4-digital-accessibility-features-that-benefit-everyone">4 Digital Accessibility Features That Benefit Everyone</a> (Bureau of Internet Accessibility)</li>
5190. </ul>
5191. <h3>SEO Benefits</h3>
5192. <p>I would like to highlight the SEO benefits that come with accessible best practices. Things like nicely structured sitemaps, a proper heading outline, image alt text, and unique link labels not only improve accessibility for humans but for search engines as well, giving search crawlers clear context about what is on the page. Stakeholders and clients care a lot about this stuff, and if they are able to come around on accessibility, then they’re effectively getting a two-for-one deal.</p>
5193. <h4>What To Say To Your Client</h4>
5194. <blockquote>Focusing on accessibility can boost your website’s SEO. Accessible features, like clear link names and organized sitemaps, align closely with what search engines prioritize. Google even includes accessibility in its Lighthouse reporting. This means that by making your site more accessible, we’re also making it more visible and attractive to search engines. Moreover, accessible websites tend to have cleaner, more structured code. This not only improves website stability and loading times but also enhances how search engines understand and rank your content. Essentially, by improving accessibility, we’re also optimizing your site for better search engine performance, which can lead to increased traffic and higher search rankings.</blockquote>
5195.  
5196. <h4>Further Reading</h4>
5197. <ul>
5198. <li><a href="https://adasitecompliance.com/website-accessibility-seo-impact/">The Impact of Website Accessibility on SEO</a> (ADA Site Compliance)</li>
5199. <li><a href="https://webaim.org/blog/web-accessibility-and-seo/">Web Accessibility and SEO</a> (WebAIM)</li>
5200. <li><a href="https://moz.com/blog/roi-of-accessibility-in-seo">The ROI of Accessibility in SEO</a> (Moz)</li>
5201. <li><a href="https://www.searchenginewatch.com/2019/10/21/accessibility-seo-optimize-for-both/">Accessibility and SEO: Where they overlap and how to optimize for both</a> (Search Engine Watch)</li>
5202. </ul>
5203. <h3>Better Brand Alignment</h3>
5204. <p>Incorporating accessibility into web design can significantly elevate how users perceive a brand’s image. The ease of use that comes with accessibility not only reflects a brand’s commitment to inclusivity and social responsibility but also differentiates it in competitive markets. By prioritizing accessibility, brands can convey a personality that is thoughtful and inclusive, appealing to a broader, more diverse customer base.</p>
5205. <h4>What To Say To Your Client</h4>
5206. <blockquote>Implementing web accessibility is more than just a compliance measure; it’s a powerful way to enhance your brand image. In the competitive landscape of e-commerce, having an accessible website sets your brand apart. It shows your commitment to inclusivity, reaching out to every potential customer, regardless of their abilities. This not only resonates with a diverse audience but also positions your brand as socially responsible and empathetic. In today’s market, where consumers increasingly value corporate responsibility, this can be a significant differentiator for your brand, helping to build a loyal customer base and enhance your overall brand reputation.</blockquote>
5207.  
5208. <h4>Further Reading</h4>
5209. <ul>
5210. <li><a href="https://www.accessibility.com/blog/how-accessibility-strengthens-your-brand">How accessibility strengthens your brand</a> (Accessibility.com)</li>
5211. <li><a href="https://adasitecompliance.com/why-digital-accessibility-should-part-your-brand/">Why Digital Accessibility Should Be Part of Your Brand</a> (ADA Site Compliance)</li>
5212. <li><a href="https://www.tailorbrands.com/blog/how-to-make-branding-accessible">How to Make Your Branding Accessible</a> (Tailor Brands)</li>
5213. </ul>
5214. <h3>Cost Efficiency</h3>
5215. <p>I mentioned earlier how developing accessibility enhances SEO like a two-for-one package. However, there are additional cost savings that come with implementing accessibility during the initial stages of web development rather than retrofitting it later. A proactive approach to accessibility saves on the potential high costs of auditing and redesigning an existing site and helps avoid expensive legal repercussions associated with non-compliance.</p>
5216. <h4>What To Say To Your Client</h4>
5217. <blockquote>Retrofitting a website for accessibility can be quite expensive. Consider the costs of conducting an accessibility audit, followed by potentially extensive (and expensive) redesign and redevelopment work to rectify issues. These costs can significantly exceed the investment required to build accessibility into the website from the start. Additionally, by making your site accessible now, we can avoid the legal risks and potential fines associated with ADA non-compliance. Investing in accessibility early on is a cost-effective strategy that pays off in the long run, both financially and in terms of brand reputation. Besides, with the SEO benefits that we get from implementing accessibility, we’re saving lots of money and work that would otherwise be sunk into redevelopment.</blockquote>
5218.  
5219. <h4>Further Reading</h4>
5220. <ul>
5221. <li><a href="https://medium.com/google-design/making-the-case-for-accessibility-350da9e30c84">Making the Case for Accessibility</a> (Susanna Zaraysky)</li>
5222. <li><a href="https://expdyn.medium.com/5-steps-to-creating-an-accessibility-strategy-74ddbb9a183d">5 Steps to Creating an Accessibility Strategy</a> (Frank Spillers)</li>
5223. <li><a href="https://www.boia.org/blog/digital-accessibility-is-an-investment-not-a-cost">Digital Accessibility is an Investment, not a Cost</a> (Bureau of Internet Accessibility)</li>
5224. </ul>
5225. Addressing Client Concerns
5226. <p>Still getting pushback? There are certain arguments I hear time and again, and I have started keeping a collection of responses to them. In some cases, I have left placeholder instructions for tailoring the responses to your project.</p>
5227. <p><strong>“Our users don’t need it.”</strong></p>
5228. <blockquote>Statistically, 27% of the U.S. population does have some form of disability that affects their web use. [Insert research on your client’s target audience, if applicable.] Besides permanent impairments, we should also take into account situational ones. For example, imagine one of your potential clients trying to access your site on a sunny golf course, struggling to see the screen due to glare, or someone in a noisy subway unable to hear audio content. Accessibility features like high contrast modes or captions can greatly enhance their experience. By incorporating accessibility, we’re not only catering to users with disabilities but also ensuring a seamless experience for anyone in less-than-ideal conditions. This approach ensures that no potential client is left out, aligning with the goal to reach and engage a wider audience.</blockquote>
5229.  
5230. <p><strong>“Our competitors aren’t doing it.”</strong></p>
5231. <blockquote>It’s interesting that your competitors haven’t yet embraced accessibility, but this actually presents a unique opportunity for your brand. Proactively pursuing accessibility not only protects you from the same legal exposure your competitors face but also positions your brand as a leader in customer experience. By prioritizing accessibility when others are not, you’re differentiating your brand as more inclusive and user-friendly. This both appeals to a broader audience and showcases your brand’s commitment to social responsibility and innovation.</blockquote>
5232.  
5233. <p><strong>“We’ll do it later because it’s too expensive.”</strong></p>
5234. <blockquote>I understand concerns about timing and costs. However, it’s important to note that integrating accessibility from the start is far more cost-effective than retrofitting it later. If accessibility is considered after development is complete, you will face additional expenses for auditing accessibility, followed by potentially extensive work involving a redesign and redevelopment. This process can be significantly more expensive than building in accessibility from the beginning. Furthermore, delaying accessibility can expose your business to legal risks. With the increasing number of lawsuits for non-compliance with accessibility standards, the cost of legal repercussions could far exceed the expense of implementing accessibility now. The financially prudent move is to work on accessibility now.</blockquote>
5235.  
5236. <p><strong>“We’ve never had complaints.”</strong></p>
5237. <blockquote>It’s great to hear that you haven’t received complaints, but it’s important to consider that users who struggle to access your site might simply choose not to return rather than take the extra step to complain about it. This means you could potentially be missing out on a significant market segment. Additionally, when accessibility issues do lead to complaints, they can sometimes escalate into legal cases. Proactively addressing accessibility can help you tap into a wider audience and mitigate the risk of future lawsuits.</blockquote>
5238.  
5239. <p><strong>“It will affect the aesthetics of the site.”</strong></p>
5240. <blockquote>Accessibility and visual appeal can coexist beautifully. I can show you examples of websites that are both compliant and visually stunning, demonstrating that accessibility can enhance rather than detract from a site’s design. Additionally, when we consider specific design features from an accessibility standpoint, we often find they actually improve the site’s overall usability and SEO, making the site more intuitive and user-friendly for everyone. Our goal is to blend aesthetics with functionality, creating an inclusive yet visually appealing online presence.</blockquote>
5241.  
5242.  
5243.  
5244. Handling Common Client Requests
5245. <p>This section looks at frequent scenarios I’ve encountered in web projects where accessibility considerations come into play. Each situation requires carefully balancing the client’s needs/wants with accessibility standards. I’ll leave placeholder comments in the examples so you are able to address things that are specific to your project.</p>
5246. <h3>The Client Directly Requests An Inaccessible Feature</h3>
5247. <p>When clients request features they’ve seen online — like unfocusable carousels and complex auto-playing animations — it’s crucial to discuss them in terms that address accessibility concerns. In these situations, I acknowledge the appealing aspects of their inspirations but also highlight their accessibility limitations.</p>
5248. <blockquote> That’s a really neat feature, and I like it! That said, I think it’s important to consider how users interact with it. [Insert specific issues that you note, like carousels without pause buttons or complex animations.] My recommendation is to take the elements that work well &amp;mdahs; [insert specific observation] — and adapt them into something more accessible, such as [Insert suggestion]. This way, we maintain the aesthetic appeal while ensuring the website is accessible and enjoyable for every visitor.</blockquote>
5249.  
5250. <h3>The Client Provides Inaccessible Content</h3>
5251. <p>This is where we deal with things like non-descriptive page titles, link names, form labels, and color contrasts for a better “reading” experience.</p>
5252. <h4>Page Titles</h4>
5253. <p>Sometimes, clients want page titles to be drastically different than the link in the navigation bar. Usually, this is because they want a more detailed page title while keeping navigation links succinct.</p>
5254. <blockquote>I understand the need for descriptive and engaging page titles, but it’s also essential to maintain consistency with the navigation bar for accessibility. Here’s our recommendation to balance both needs:<br /><ul><li><strong>Keyword Consistency</strong>: You can certainly have a longer page title to provide more context, but it should include the same key terms as the navigation link. This ensures that users, especially those using screen readers to announce content, can easily understand when they have correctly navigated between pages.</li><li><strong>Succinct Titles With Descriptive Subtitles</strong>: Another approach is to keep the page title succinct, mirroring the navigation link, and then add a descriptive tagline or subtitle on the page itself. This way, the page maintains clear navigational consistency while providing detailed context in the subtitle. These approaches aim to align the user’s navigation experience with their expectations, ensuring clarity and accessibility.</li></ul></blockquote>
5255.  
5256. <h4>Links</h4>
5257. <p>A common issue with web content provided by clients is the use of non-descriptive calls to action with phrases and link labels, like “Read More” or “Click Here.” Generic terms can be confusing for users, particularly for those using screen readers, as they don’t provide context about what the link leads to or the nature of the content on the other end.</p>
5258. <blockquote>I’ve noticed some of the link labels say things like “Read More” or “Click Here” in the design. I would consider revising them because they could be more descriptive, especially for those relying on screen readers who have to put up with hearing the label announced time and again. We recommend labels that clearly indicate where the link leads. [Provide a specific example.] This approach makes links more informative and helps all users alike by telling them in advance what to expect when clicking a certain link. It enhances the overall user experience by providing clarity and context.</blockquote>
5259.  
5260. <h4>Forms</h4>
5261. <p>Proper form labels are a critical aspect of accessible web design. Labels should clearly indicate the purpose of each input field, whether it’s required, and the expected format of the information. This clarity is essential for all users, especially for those using screen readers or other assistive technologies. Plus, <a href="https://css-tricks.com/html-inputs-and-labels-a-love-story/">there are accessible approaches to pairing labels and inputs</a> that developers ought to be familiar with.</p>
5262. <blockquote>It’s important that each form field is clearly labeled to inform users about the type of data expected. Additionally, indicating which fields are required and providing format guidelines can greatly enhance the user experience. [Provide a specific example from the client’s content, e.g., we can use ‘Phone (10 digits, no separators)’ for a phone number field to clearly indicate the format.] These labels not only aid in navigation and comprehension for all users but also ensure that the forms are accessible to those using assistive technologies. Well-labeled forms improve overall user engagement and reduce the likelihood of errors or confusion.</blockquote>
5263.  
5264. <h4>Brand Palette</h4>
5265. <p>Clients will occasionally approach me with color palettes that produce too low of contrast when paired together. This happens when, for instance, on a website with a white background, a client wants to use their brand accent color for buttons, but that color simply blends into the background color, making it difficult to read. The solution is usually creating a slightly adjusted tint or shade that’s used specifically for digital interfaces — UI colors, if you will. <a href="https://github.com/toolness">Atul Varma</a>’s “<a href="https://toolness.github.io/accessible-color-matrix//?ref=uxlift.org">Accessible Color Palette Builder</a>” is a great starting point, as is <a href="https://www.uxlift.org/tools/accessible-color-palette-builder/">this UX Lift lander with alternatives</a>.</p>
5266. <blockquote>We recommend expanding the brand palette with color values that work more effectively in web designs. By adjusting the tint or shade just a bit, we can achieve a higher level of contrast between colors when they are used together. Colors render differently depending on the device and screen they are on, and even though we might be using colors consistent with brand identity, those colors will still display differently to users. By adding colors that are specifically designed for web use, we can enhance the experience for our users while staying true to the brand’s essence.</blockquote>
5267.  
5268. <h3>Suggesting An Accessible Feature To Clients</h3>
5269. <p>Proactively suggesting features like sitemaps, pause buttons, and focus indicators is crucial. I’ll provide tips on how to effectively introduce these features to clients, emphasizing their importance and benefit.</p>
5270. <h4>Sitemap</h4>
5271. <p>Sitemaps play a crucial role in both accessibility and SEO, but clients sometimes hesitate to include them due to concerns about their visual appeal. The challenge is to demonstrate the value of site maps without compromising the site’s overall aesthetic.</p>
5272. <blockquote>I understand your concerns about the visual appeal of sitemaps. However, it’s important to consider their significant role in both accessibility and SEO. For users with screen readers, a sitemap greatly simplifies site navigation. From an SEO perspective, it acts like a directory, helping search engines effectively index all your pages, making your site more discoverable and user-friendly. To address the aesthetic aspect, let’s look at how major companies like Apple and Microsoft incorporate sitemaps. Their designs are minimal yet consistent with the site’s overall look and feel. [If applicable, show how a competitor is using sitemaps.] By incorporating a well-designed sitemap, we can improve user experience and search visibility without sacrificing the visual quality of your website.</blockquote>
5273.  
5274. <h4>Accessible Carousels</h4>
5275. <p>Carousels are contentious design features. While some designers are against them and have legitimate reasons for it, I believe that with the right approach, they can be made accessible and effective. There are plenty of resources that provide guidance on creating accessible carousels.</p>
5276. <p>When a client requests a home page carousel in a new site design, it’s worth considering alternative solutions that can avoid the common pitfalls of carousels, such as low click-through rates, increased load times, content being pushed below the fold, and potentially annoying auto-advancing features.</p>
5277. <blockquote>I see the appeal of using a carousel on your homepage, but there are a few considerations to keep in mind. Carousels often have low engagement rates and can slow down the site. They also tend to move key content below the fold, which might not be ideal for user engagement. An auto-advancing carousel can also be distracting for users. Instead, we could explore alternative design solutions that effectively convey your message without these drawbacks. [Insert recommendation, e.g., For instance, we could use a hero image or video with a strong call-to-action or a grid layout that showcases multiple important segments at once.] These alternatives can be more user-friendly and accessible while still achieving the visual and functional goals of a carousel.</blockquote>
5278.  
5279. <p>If we decide to use a carousel, I make a point of discussing the necessary accessibility features with the client right from the start. Many clients aren’t aware that elements like pause buttons are crucial for making auto-advancing carousels accessible. To illustrate this, I’ll show them examples of accessible carousel designs that incorporate these features effectively.</p>
5280. <p><strong>Further Reading</strong></p>
5281. <ul>
5282. <li><a href="https://www.smashingmagazine.com/2022/04/designing-better-carousel-ux/">Usability Guidelines For Better Carousels UX</a> (Vitaly Friedman)</li>
5283. <li><a href="https://www.smashingmagazine.com/2023/02/guide-building-accessible-carousels/">A Step-By-Step Guide To Building Accessible Carousels</a> (Sonja Weckenmann)</li>
5284. </ul>
5285. <h4>Pause Buttons</h4>
5286. <p>Any animation that starts automatically, lasts more than five seconds, and is presented in parallel with other content, needs a pause button per <a href="https://www.w3.org/TR/WCAG/#pause-stop-hide">WCAG Success Criterion 2.2.2</a>. A common scenario is when clients want a full-screen video on their homepage without a pause button. It’s important to explain the necessity of pause buttons for meeting accessibility standards and ensuring user comfort without compromising the website’s aesthetics.</p>
5287. <blockquote>I understand your desire for a dynamic, engaging homepage with a full-screen video. However, it’s essential for accessibility purposes that any auto-playing animation that is longer than five seconds includes a pause button. This is not just about compliance; it’s about ensuring that all visitors, including those with disabilities, can comfortably use your site.<br /><br />The good news is that pause buttons can be designed to be sleek and non-intrusive, complementing your site’s aesthetics rather than detracting from them. Think of it like the sound toggle buttons on videos. They’re there when you need them, but they don’t distract from the viewing experience. I can show you some examples of beautifully integrated pause buttons that maintain the immersive feel of the video while ensuring accessibility standards are met.</blockquote>
5288.  
5289. Conclusion
5290. <p>That’s it! This is my complete toolkit for discussing web accessibility with colleagues and clients at the start of new projects. It’s not always easy to make a case, which is why I try to appeal from different angles, using a multitude of resources and research to support my case. But with practice, care, and true partnership, it’s possible to not only influence the project but also make accessibility a first-class feature in the process.</p>
5291. <p>Please use the resources, strategies, and talking points I have provided. I share them to help you make your case to your own colleagues and clients. Together, incrementally, we can take steps toward a more accessible web that is inclusive to all people.</p>
5292. <p>And when in doubt, remember the core principles we covered:</p>
5293. <ul>
5294. <li><strong>Show your expertise</strong>: Adapt accessibility discussions to fit the client’s understanding, offering basic or in-depth explanations based on their familiarity.</li>
5295. <li><strong>Align with client goals</strong>: Connect accessibility with client-specific benefits, such as SEO and brand enhancement.</li>
5296. <li><strong>Define accessibility in project scope</strong>: Include accessibility as an integral part of the design process and explain how it is evaluated.</li>
5297. <li><strong>Be prepared with Resources</strong>: Keep a collection of relevant resources, including success stories and the consequences of non-compliance.</li>
5298. <li><strong>Utilize User Research</strong>: Use targeted user research to inform design choices, demonstrating accessibility’s broad impact.</li>
5299. <li><strong>Manage Incremental Changes</strong>: Suggest iterative changes for large projects to address accessibility in manageable steps.</li>
5300. </ul>
5301. ]]></content:encoded>
5302.            <author>hello@smashingmagazine.com (Yichan Wang)</author>
5303.            <enclosure url="http://files.smashing.media/articles/web-designer-accessibility-advocacy-toolkit/web-designer-accessibility-advocacy-toolkit.jpg" length="0" type="image/jpg"/>
5304.        </item>
5305.        <item>
5306.            <title><![CDATA[Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering]]></title>
5307.            <link>https://smashingmagazine.com/2024/02/vanilla-javascript-libraries-quest-stateful-dom-rendering/</link>
5308.            <guid>https://smashingmagazine.com/2024/02/vanilla-javascript-libraries-quest-stateful-dom-rendering/</guid>
5309.            <pubDate>Thu, 22 Feb 2024 18:00:00 GMT</pubDate>
5310.            <description><![CDATA[It’s well-established that the web faces wide-ranging usability and performance issues, from user-hostile UI patterns and twisted search results to sluggish performance and battery-draining bloat. In this article, Frederik examines one small-but-significant aspect where developers take the reins: Painting pixels on the screen.]]></description>
5311.            <content:encoded><![CDATA[<p>In his seminal piece “<a href="https://infrequently.org/2023/02/the-market-for-lemons/">The Market For Lemons</a>”, renowned web crank Alex Russell lays out the myriad failings of our industry, focusing on the disastrous consequences for end users. This indignation is entirely appropriate according to the <a href="https://www.w3.org/TR/html-design-principles/#priority-of-constituencies">bylaws of our medium</a>.</p>
5312. <p>Frameworks factor highly in that equation, yet there can also be good reasons for front-end developers to choose a framework, <a href="https://johan.hal.se/wrote/2023/02/17/what-to-expect-from-your-framework/">or library</a> for that matter: Dynamically updating web interfaces can be tricky in non-obvious ways. Let’s investigate by starting from the beginning and going back to the first principles.</p>
5313. Markup Categories
5314. <p>Everything on the web starts with markup, i.e. HTML. Markup structures can roughly be divided into three categories:</p>
5315. <ol>
5316. <li>Static parts that always remain the same.</li>
5317. <li>Variable parts that are defined once upon instantiation.</li>
5318. <li>Variable parts that are updated dynamically at runtime.</li>
5319. </ol>
5320. <p>For example, an article’s header might look like this:</p>
5321. <pre><code>&lt;header&gt;
5322.  <h1>«Hello World»</h1>
5323.  <small>«123» backlinks</small>
5324. </header>
5325. </code></pre>
5326.  
5327. <p>Variable parts are wrapped in «guillemets» here: “Hello World” is the respective title, which only changes between articles. The backlinks counter, however, might be continuously updated via client-side scripting; we’re ready to go viral in the blogosphere. Everything else remains identical across all our articles.</p>
5328. <p>The article you’re reading now subsequently focuses on the third category: Content that needs to be updated at runtime.</p>
5329. Color Browser
5330. <p>Imagine we’re building a simple color browser: A little widget to explore a pre-defined set of <a href="https://www.w3.org/TR/css-color-3/#svg-color">named colors</a>, presented as a list that pairs a color swatch with the corresponding color value. Users should be able to search colors names and toggle between hexadecimal color codes and Red, Blue, and Green (RGB) triplets. We can create an <a href="https://web.archive.org/web/20130924061832/http://alistair.cockburn.us/Walking+skeleton">inert skeleton</a> with just a little bit of HTML and CSS:</p>
5331. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/RwdmbGd">Color Browser (inert) [forked]</a> by <a href="https://codepen.io/f-n-d">FND</a>.</p>
5332. Client-Side Rendering
5333. <p>We’ve grudgingly decided to employ client-side rendering for the interactive version. For our purposes here, it doesn’t matter whether this widget constitutes a complete application or merely a <a href="https://jasonformat.com/islands-architecture">self-contained island</a> embedded within an otherwise static or server-generated HTML document.</p>
5334. <p>Given our predilection for vanilla JavaScript (cf. first principles and all), we start with the browser’s built-in DOM APIs:</p>
5335. <pre><code>function renderPalette(colors) {
5336.  let items = [];
5337.  for(let color of colors) {
5338.    let item = document.createElement("li");
5339.    items.push(item);
5340.  
5341.    let value = color.hex;
5342.    makeElement("input", {
5343.      parent: item,
5344.      type: "color",
5345.      value
5346.    });
5347.    makeElement("span", {
5348.      parent: item,
5349.      text: color.name
5350.    });
5351.    makeElement("code", {
5352.      parent: item,
5353.      text: value
5354.    });
5355.  }
5356.  
5357.  let list = document.createElement("ul");
5358.  list.append(...items);
5359.  return list;
5360. }
5361. </code></pre>
5362.  
5363. <blockquote><strong>Note:</strong><br />The above relies on a small utility function for more concise element creation:<br />
5364. <pre><code>function makeElement(tag, { parent, children, text, ...attribs }) {
5365.  let el = document.createElement(tag);
5366.  
5367.  if(text) {
5368.    el.textContent = text;
5369.  }
5370.  
5371.  for(let [name, value] of Object.entries(attribs)) {
5372.    el.setAttribute(name, value);
5373.  }
5374.  
5375.  if(children) {
5376.    el.append(...children);
5377.  }
5378.  
5379.  parent?.appendChild(el);
5380.  return el;
5381. }
5382. </code></pre>
5383. You might also have noticed a stylistic inconsistency: Within the <code>items</code> loop, newly created elements attach themselves to their container. Later on, we flip responsibilities, as the <code>list</code> container ingests child elements instead.</blockquote>
5384.  
5385. <p>Voilà: <code>renderPalette</code> generates our list of colors. Let’s add a form for interactivity:</p>
5386. <pre><code>function renderControls() {
5387.  return makeElement("form", {
5388.    method: "dialog",
5389.    children: [
5390.      createField("search", "Search"),
5391.      createField("checkbox", "RGB")
5392.    ]
5393.  });
5394. }
5395. </code></pre>
5396.  
5397. <p>The <code>createField</code> utility function encapsulates DOM structures required for input fields; it’s a little reusable markup component:</p>
5398. <pre><code>function createField(type, caption) {
5399.  let children = [
5400.    makeElement("span", { text: caption }),
5401.    makeElement("input", { type })
5402.  ];
5403.  return makeElement("label", {
5404.    children: type === "checkbox" ? children.reverse() : children
5405.  });
5406. }
5407. </code></pre>
5408.  
5409. <p>Now, we just need to combine those pieces. Let’s wrap them in a custom element:</p>
5410. <div>
5411. <pre><code>import { COLORS } from "./colors.js"; // an array of <code>{ name, hex, rgb }</code> objects
5412.  
5413. customElements.define("color-browser", class ColorBrowser extends HTMLElement {
5414.  colors = [...COLORS]; // local copy
5415.  
5416.  connectedCallback() {
5417.    this.append(
5418.      renderControls(),
5419.      renderPalette(this.colors)
5420.    );
5421.  }
5422. });
5423. </code></pre>
5424. </div>
5425.  
5426. <p>Henceforth, a <code>&lt;color-browser&gt;</code> element anywhere in our HTML will generate the entire user interface right there. (I like to think of it as a <a href="https://en.wikipedia.org/wiki/Macro_%28computer_science%29">macro</a> expanding in place.) This implementation is somewhat declarative1, with DOM structures being created by composing a variety of straightforward markup generators, clearly delineated components, if you will.</p>
5427. <p>1 The most useful explanation of the differences between declarative and imperative programming I’ve come across focuses on readers. Unfortunately, that particular source escapes me, so I’m paraphrasing here: Declarative code portrays the <em>what</em> while imperative code describes the <em>how</em>. One consequence is that imperative code requires cognitive effort to sequentially step through the code’s instructions and build up a mental model of the respective result.</p>
5428.  
5429.  
5430.  
5431. Interactivity
5432. <p>At this point, we’re merely recreating our inert skeleton; there’s no actual interactivity yet. Event handlers to the rescue:</p>
5433. <pre><code>class ColorBrowser extends HTMLElement {
5434.  colors = [...COLORS];
5435.  query = null;
5436.  rgb = false;
5437.  
5438.  connectedCallback() {
5439.    this.append(renderControls(), renderPalette(this.colors));
5440.    this.addEventListener("input", this);
5441.    this.addEventListener("change", this);
5442.  }
5443.  
5444.  handleEvent(ev) {
5445.    let el = ev.target;
5446.    switch(ev.type) {
5447.    case "change":
5448.      if(el.type === "checkbox") {
5449.        this.rgb = el.checked;
5450.      }
5451.      break;
5452.    case "input":
5453.      if(el.type === "search") {
5454.        this.query = el.value.toLowerCase();
5455.      }
5456.      break;
5457.    }
5458.  }
5459. }
5460. </code></pre>
5461.  
5462. <blockquote><strong>Note:</strong><br /><code>handleEvent</code> means we don’t have to <a href="https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/">worry about function binding</a>. It also comes with <a href="https://web.archive.org/web/20240121164212/https://scribe.rip/webreflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38#a0ff">various advantages</a>. Other patterns are available.</blockquote>
5463.  
5464. <p>Whenever a field changes, we update the corresponding instance variable (sometimes called one-way data binding). Alas, changing this internal state2 is not reflected anywhere in the UI so far.</p>
5465. <p>2 In your browser’s developer console, check <code>document.querySelector("color-browser").query</code> after entering a search term.</p>
5466.  
5467. <p>Note that this event handler is tightly coupled to <code>renderControls</code> internals because it expects a checkbox and search field, respectively. Thus, any corresponding changes to <code>renderControls</code> — perhaps switching to radio buttons for color representations — now need to take into account this other piece of code: <a href="https://en.wikipedia.org/wiki/Action_at_a_distance_%28computer_programming%29">action at a distance</a>! Expanding this component’s contract to include
5468. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name">field names</a> could alleviate those concerns.</p>
5469. <p>We’re now faced with a choice between:</p>
5470. <ol>
5471. <li>Reaching into our previously created DOM to modify it, or</li>
5472. <li>Recreating it while incorporating a new state.</li>
5473. </ol>
5474. Rerendering
5475. <p>Since we’ve already defined our markup composition in one place, let’s start with the second option. We’ll simply rerun our markup generators, feeding them the current state.</p>
5476. <pre><code>class ColorBrowser extends HTMLElement {
5477.  // [previous details omitted]
5478.  
5479.  connectedCallback() {
5480.    this.#render();
5481.    this.addEventListener("input", this);
5482.    this.addEventListener("change", this);
5483.  }
5484.  
5485.  handleEvent(ev) {
5486.    // [previous details omitted]
5487.    this.#render();
5488.  }
5489.  
5490.  #render() {
5491.    this.replaceChildren();
5492.    this.append(renderControls(), renderPalette(this.colors));
5493.  }
5494. }
5495. </code></pre>
5496.  
5497. <p>We’ve moved all rendering logic into a dedicated method3, which we invoke not just once on startup but whenever the state changes.</p>
5498. <p>3 You might want to <a href="https://lea.verou.me/blog/2023/04/private-fields-considered-harmful/">avoid private properties</a>, especially if others might conceivably build upon your implementation.</p>
5499.  
5500. <p>Next, we can turn <code>colors</code> into a getter to only return entries matching the corresponding state, i.e. the user’s search query:</p>
5501. <div>
5502. <pre><code>class ColorBrowser extends HTMLElement {
5503.  query = null;
5504.  rgb = false;
5505.  
5506.  // [previous details omitted]
5507.  
5508.  get colors() {
5509.    let { query } = this;
5510.    if(!query) {
5511.      return [...COLORS];
5512.    }
5513.  
5514.    return COLORS.filter(color => color.name.toLowerCase().includes(query));
5515.  }
5516. }
5517. </code></pre>
5518. </div>
5519.  
5520. <blockquote><strong>Note:</strong><br />I’m partial to the <a href="https://rikschennink.nl/thoughts/the-bouncer-pattern/">bouncer pattern</a>.<br />Toggling color representations is left as an exercise for the reader. You might pass <code>this.rgb</code> into <code>renderPalette</code> and then populate <code>&lt;code&gt;</code> with either <code>color.hex</code> or <code>color.rgb</code>, perhaps employing this utility:<br />
5521. <pre><code>function formatRGB(value) {
5522.  return value.split(",").
5523.    map(num => num.toString().padStart(3, " ")).
5524.    join(", ");
5525. }
5526. </code></pre></blockquote>
5527.  
5528. <p>This now produces interesting (annoying, really) behavior:</p>
5529. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/YzgbKab">Color Browser (defective) [forked]</a> by <a href="https://codepen.io/f-n-d">FND</a>.</p>
5530. <p>Entering a query seems impossible as the input field loses focus after a change takes place, leaving the input field empty. However, entering an uncommon character (e.g. “v”) makes it clear that <em>something</em> is happening: The list of colors does indeed change.</p>
5531. <p>The reason is that our current do-it-yourself (DIY) approach is quite crude: <code>#render</code> erases and recreates the DOM wholesale with each change. Discarding existing DOM nodes also resets the corresponding state, including form fields’ value, focus, and scroll position. That’s no good!</p>
5532. Incremental Rendering
5533. <p>The previous section’s <a href="https://rauchg.com/2015/pure-ui">data-driven UI</a> seemed like a nice idea: Markup structures are defined once and re-rendered at will, based on a data model cleanly representing the current state. Yet our component’s explicit state is clearly insufficient; we need to reconcile it with the browser’s implicit state while re-rendering.</p>
5534. <p>Sure, we might attempt to make that <em>implicit</em> state <em>explicit</em> and incorporate it into our data model, like including a field’s <code>value</code> or <code>checked</code> properties. But that still leaves many things unaccounted for, including focus management, scroll position, and <a href="https://daverupert.com/2024/02/ui-states/">myriad details</a> we probably haven’t even thought of (frequently, that means accessibility features). Before long, we’re effectively recreating the browser!</p>
5535. <p>We might instead try to identify which parts of the UI need updating and leave the rest of the DOM untouched. Unfortunately, that’s far from trivial, which is where libraries like React came into play more than a decade ago: On the surface, they provided a more declarative way to define DOM structures4 (while also encouraging componentized composition, establishing a single source of truth for each individual UI pattern). Under the hood, such libraries introduced mechanisms5 to provide granular, incremental DOM updates instead of recreating DOM trees from scratch — both to avoid state conflicts and to improve performance6.</p>
5536. <p>4 In this context, that essentially means writing something that looks like HTML, which, <a href="https://en.wikipedia.org/wiki/False_equivalence">depending on your belief system</a>, is either essential or revolting. The state of HTML templating was somewhat dire back then and remains subpar in some environments.<br />5 Nolan Lawson’s “<a href="https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/">Let’s learn how modern JavaScript frameworks work by building one</a>” provides plenty of valuable insights on that topic. For even more details, <a href="https://github.com/lit/lit/blob/9c02b3876dc927c6a82b4420411256ecbb47c08c/dev-docs/design/how-lit-html-works.md">lit-html’s developer documentation</a> is worth studying.<br />6 We’ve since learned that <em>some</em> of those mechanisms are actually <a href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">ruinously expensive</a>.</p>
5537.  
5538. <p>The bottom line: <strong>If we want to encapsulate markup definitions and then derive our UI from a variable data model, we kinda have to rely on a third-party library for reconciliation.</strong></p>
5539. Actus Imperatus
5540. <p>At the other end of the spectrum, we might opt for surgical modifications. If we know what to target, our application code can reach into the DOM and modify only those parts that need updating.</p>
5541. <p>Regrettably, though, that approach typically leads to calamitously tight coupling, with interrelated logic being spread all over the application while targeted routines inevitably violate components’ encapsulation. Things become even more complicated when we consider increasingly complex UI permutations (think edge cases, error reporting, and so on). Those are the very issues that the aforementioned libraries had hoped to eradicate.</p>
5542. <p>In our color browser’s case, that would mean finding and hiding color entries that do not match the query, not to mention replacing the list with a substitute message if no matching entries remain. We’d also have to swap color representations in place. You can probably imagine how the resulting code would end up dissolving any separation of concerns, messing with elements that originally belonged exclusively to <code>renderPalette</code>.</p>
5543. <div>
5544. <pre><code>class ColorBrowser extends HTMLElement {
5545.  // [previous details omitted]
5546.  
5547.  handleEvent(ev) {
5548.    // [previous details omitted]
5549.  
5550.    for(let item of this.#list.children) {
5551.      item.hidden = !item.textContent.toLowerCase().includes(this.query);
5552.    }
5553.    if(this.#list.children.filter(el => !el.hidden).length === 0) {
5554.      // inject substitute message
5555.    }
5556.  }
5557.  
5558.  #render() {
5559.    // [previous details omitted]
5560.  
5561.    this.#list = renderPalette(this.colors);
5562.  }
5563. }
5564. </code></pre>
5565. </div>
5566.  
5567. <p>As a <a href="https://en.wikipedia.org/wiki/Has_Been">once wise man</a> once said: That’s too much knowledge!</p>
5568. <p>Things get even more perilous with form fields: Not only might we have to update a field’s specific state, but we would also need to know where to inject error messages. While reaching into <code>renderPalette</code> was bad enough, here we would have to pierce several layers: <code>createField</code> is a generic utility used by <code>renderControls</code>, which in turn is invoked by our top-level <code>ColorBrowser</code>.</p>
5569. <p>If things get hairy even in this minimal example, imagine having a more complex application with even more layers and indirections. Keeping on top of all those interconnections becomes all but impossible. Such systems commonly devolve into a big ball of mud where nobody dares change anything for fear of inadvertently breaking stuff.</p>
5570. Conclusion
5571. <p>There appears to be a glaring omission in standardized browser APIs. Our preference for dependency-free vanilla JavaScript solutions is thwarted by the need to non-destructively update existing DOM structures. That’s assuming we value a declarative approach with inviolable encapsulation, otherwise known as “Modern Software Engineering: The Good Parts.”</p>
5572. <p>As it currently stands, my personal opinion is that a small library like lit-html or Preact is often warranted, particularly when employed with <a href="https://adactio.com/journal/20837">replaceability</a> in mind: A standardized API might still happen! Either way, <a href="https://infrequently.org/2023/02/the-market-for-lemons/#fn-alex-approved-1">adequate libraries</a> have a light footprint and don’t typically present much of an encumbrance to end users, especially when combined with <a href="https://cloudfour.com/thinks/html-web-components-are-having-a-moment/">progressive enhancement</a>.</p>
5573. <p>I don’t wanna leave you hanging, though, so I’ve tricked our vanilla JavaScript implementation to <em>mostly</em> do what we expect it to:</p>
5574. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/vYPwBro">Color Browser [forked]</a> by <a href="https://codepen.io/f-n-d">FND</a>.</p>
5575. ]]></content:encoded>
5576.            <author>hello@smashingmagazine.com (Frederik Dohr)</author>
5577.            <enclosure url="http://files.smashing.media/articles/vanilla-javascript-libraries-quest-stateful-dom-rendering/vanilla-javascript-libraries-quest-stateful-dom-rendering.jpg" length="0" type="image/jpg"/>
5578.        </item>
5579.        <item>
5580.            <title><![CDATA[A Practical Guide To Designing For Colorblind People]]></title>
5581.            <link>https://smashingmagazine.com/2024/02/designing-for-colorblindness/</link>
5582.            <guid>https://smashingmagazine.com/2024/02/designing-for-colorblindness/</guid>
5583.            <pubDate>Tue, 20 Feb 2024 12:00:00 GMT</pubDate>
5584.            <description><![CDATA[Color accessibility is more than just ticking boxes. Even with good contrast, some color palettes can make interfaces challenging for users. Here are some practical guidelines to ensure more inclusive design for colorblind people. An upcoming part of <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>.]]></description>
5585.            <content:encoded><![CDATA[<p>Too often, accessibility is seen as a checklist, but it’s much more complex than that. We might be using a good contrast for our colors, but then, if these colors are <strong>perceived very differently</strong> by people, it can make interfaces extremely difficult to use.</p>
5586.  
5587. <p>Depending on our color combinations, people with color weakness or who are colorblind won’t be able to tell them apart. Here are <strong>key points for designing with colorblindness</strong> — for better and more reliable color choices.</p>
5588.  
5589.  
5590.  
5591. <p>This article is <strong>part of our ongoing series</strong> on <a href="/category/design-patterns">design patterns</a>. It’s also a part of the video library on <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a> 🍣 and is available in the <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman-spring/">live UX training</a> as well.</p>
5592.  
5593. Colorweakness and Colorblindness
5594. <p>It’s worth stating that, like any other disability, colorblind users are on the <strong>spectrum</strong>, as <a href="https://www.linkedin.com/in/belagaytan/">Bela Gaytán</a> rightfully noted. Each experience is unique, and different people perceive colors differently. The grades of colorblindness <strong>vary significantly</strong>, so there is no consistent condition that would be the same for everyone.</p>
5595.  
5596. <p><img src="https://files.smashing.media/articles/designing-for-colorblindness/1-color-weakness-statistics.png" /></p>
5597. <p>When we speak about colors, we should distinguish between two different conditions that people might have. Some people experience <strong>deficiencies</strong> in <em>“translating”</em> light waves into red-ish, green-ish or blue-ish colors. If one of these translations is not working properly, a person is at least <em>colorweak</em>. If the translation doesn’t work at all, a person is <em>colorblind</em>.</p>
5598.  
5599. <p>Depending on the color combinations we use, people with color weakness or people who are colorblind won’t be able to tell them apart. The most common use case is a red-/green deficiency, which <strong>affects 8% of European men</strong> and <strong>0.5% of European women</strong>.</p>
5600.  
5601. <p><em>Note</em>: the insights above come from “<a href="https://blog.datawrapper.de/colorblindness-part1/">How Your Colorblind And Colorweak Readers See Your Colors</a>,” a wonderful three-part series by Lisa Charlotte Muth on how colorblind and color weak readers perceive colors, things to consider when visualizing data and <strong>what it’s like to be colorblind</strong>.</p>
5602.  
5603. Design Guidelines For Colorblindness
5604. <p>As <a href="https://www.linkedin.com/in/garethrobins/">Gareth Robins</a> has kindly noted, the safe option is to either give people a <strong>colorblind toggle with shapes</strong> or use a friendly ubiquitous palette like <a href="https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html">viridis</a>. Of course, we should never ever ask a colorblind person, “What color is this?” as they can’t correctly answer that question.</p>
5605.  
5606. <p><img src="https://files.smashing.media/articles/designing-for-colorblindness/2-red-and-green-blind-palettes.jpeg" /></p>
5607. <p>✅ <strong>Red-/green deficiencies</strong> are more common in men.<br />
5608. ✅ <strong>Use blue</strong> if you want users to perceive color as you do.<br />
5609. ✅ Use any 2 colors as long as they <strong>vary by lightness</strong>.<br />
5610. ✅ Colorblind users <strong>can tell red and green apart</strong>.<br />
5611. ✅ Colorblind users <strong>can’t tell dark green and brown apart</strong>.<br />
5612. ✅ Colorblind users <strong>can’t tell red and brown apart</strong>.<br />
5613. ✅ The safest color palette is to <strong>mix blue with orange or red</strong>.</p>
5614.  
5615. <p><img src="https://files.smashing.media/articles/designing-for-colorblindness/3-purple-blue-colorblindness.jpeg" /></p>
5616. <p>🚫 <strong>Don’t mix red, green and brown</strong> together.<br />
5617. 🚫 <strong>Don’t mix pink, turquoise and grey</strong> together.<br />
5618. 🚫 <strong>Don’t mix purple and blue</strong> together.<br />
5619. 🚫 Don’t use green and pink if you use red and blue.<br />
5620. 🚫 Don’t mix green with orange, red, or blue of the same lightness.</p>
5621.  
5622. Never Rely On Colors Alone
5623. <p>It’s worth noting that the safest bet is to <strong>never rely on colors alone</strong> to communicate data. Use labels, icons, shapes, rectangles, triangles, and stars to indicate differences and show relationships. Be careful when <strong>combining hues and patterns</strong>: patterns change how bright or dark colors will be perceived.</p>
5624.  
5625. <p><img src="https://files.smashing.media/articles/designing-for-colorblindness/4-whocanuse-tool.jpeg" /></p>
5626. <p><a href="https://www.whocanuse.com">Who Can Use?</a> is a fantastic little tool to quickly see how a color palette affects different people with visual impairments — from reduced sensitivity to red, to red/green blindness to cataracts, glaucoma, low vision and even situational events such as direct sunlight and night shift mode.</p>
5627.  
5628. <p><strong>Use lightness to build gradients</strong>, not just hue. Use different lightnesses in your gradients and color palettes so readers with a color vision deficiency will still be able to distinguish your colors. And most importantly, always include colorweak and colorblind people in usability testing.</p>
5629.  
5630. <h3>Useful Resources on Colorblindness</h3>
5631. <ul>
5632. <li>“<a href="https://www.theverge.com/23650428/colorblindness-design-ui-accessibility-wordle">How I Live With Color Blindness</a>,” by Andy Baio</li>
5633. <li><a href="https://www.whocanuse.com/">Who Can Use This Color Combination?</a>, by Corey Ginnivan</li>
5634. <li><a href="https://colorblindaccessibilitymanifesto.com/">Colorblind Accessibility Manifesto</a>, by Federico Monaco </li>
5635. <li>“<a href="https://medium.com/queer-design-club/going-beyond-color-9d3830559e10">Designing for Colorblind Access</a>,” by Alex Chen</li>
5636. <li>“<a href="https://uxdesign.cc/the-importance-of-colorblind-friendly-design-case-study-among-us-dcd042c87b9">The UX of Among Us: The Importance of Colorblind-friendly Design</a>,” by Unma Desai</li>
5637. <li>“<a href="https://blog.datawrapper.de/colors/">How To Choose Colors For Data Visualization</a>,” by Lisa Charlotte Muth</li>
5638. <li>“<a href="https://www.smashingmagazine.com/2016/06/improving-ux-for-color-blind-users/">Improving The UX For Color-Blind Users</a>,” by Adam Silver</li>
5639. <li>“<a href="https://www.smashingmagazine.com/2023/06/testing-sites-apps-blind-users-cheat-sheet/">How To Test With Blind Users: A Cheatsheet</a>,” by Slava Shestopalov, Eugene Shykiriavyi</li>
5640. </ul>
5641.  
5642. <h3>Useful Colorblindness Tools</h3>
5643. <ul>
5644. <li><a href="https://www.color-blindness.com/coblis-color-blindness-simulator/">Coblis, Color Blindness Simulator</a></li>
5645. <li><a href="https://www.toptal.com/designers/colorfilter/">Colorblindness Web Page Filters</a></li>
5646. <li><a href="https://www.figma.com/community/plugin/733343906244951586/Color-Blind">Color Blindness Simulator Figma Plugin</a>, by Sam Mason de Caires</li>
5647. <li><a href="https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg">Colorblindly Chrome Extension</a>, by Andrew Van Ness</li>
5648. </ul>
5649.  
5650. Meet Smart Interface Design Patterns
5651. <p>If you are interested in similar insights around UX, take a look at <a href="https://smart-interface-design-patterns.com/"><strong>Smart Interface Design Patterns</strong></a>, our <strong>10h-video course</strong> with 100s of practical examples from real-life projects — with a <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman-spring/">live UX training</a> starting March 7. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Jump to a free preview</a>.</p>
5652. <a href="https://smart-interface-design-patterns.com/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" /></a>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design &amp; UX.
5653.  
5654. <div><a href="https://smart-interface-design-patterns.com/">Jump to the video course →</a></div>
5655.  
5656. <p></p><p>100 design patterns &amp; real-life
5657. examples.<br />10h-video course + live UX training. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Free preview</a>.</p>
5658. ]]></content:encoded>
5659.            <author>hello@smashingmagazine.com (Vitaly Friedman)</author>
5660.            <enclosure url="http://files.smashing.media/articles/designing-for-colorblindness/designing-for-colorblindness.jpg" length="0" type="image/jpg"/>
5661.        </item>
5662.        <item>
5663.            <title><![CDATA[Mobile Accessibility Barriers For Assistive Technology Users]]></title>
5664.            <link>https://smashingmagazine.com/2024/02/mobile-accessibility-barriers-assistive-technology-users/</link>
5665.            <guid>https://smashingmagazine.com/2024/02/mobile-accessibility-barriers-assistive-technology-users/</guid>
5666.            <pubDate>Mon, 19 Feb 2024 10:00:00 GMT</pubDate>
5667.            <description><![CDATA[Accessibility goes beyond making products user-friendly. It can significantly impact the quality of life for people with disabilities. Kate Kalcevich shares lessons she learned from assistive technology users &mdash; challenges and barriers they encounter on mobile devices.]]></description>
5668.            <content:encoded><![CDATA[<p>I often hear that native mobile app accessibility is more challenging than web accessibility. Teams don’t know where to start, where to find guidance on mobile accessibility, or how to prevent mobile-specific accessibility barriers.</p>
5669. <p>As someone who works for a company with an active community of mobile assistive technology users, I get to learn about the challenges from the user’s perspective. In fact, I recently ran a survey with our community about their experiences with mobile accessibility, and I’d like to share what I learned with you.</p>
5670. <p>If you only remember one thing from this article, make it this:</p>
5671. <blockquote>Half of assistive technology users said that accessibility barriers have a <strong>significant</strong> impact on their day-to-day well-being.</blockquote>
5672.  
5673. <p>Accessibility goes beyond making products user-friendly. It can impact the quality of life for people with disabilities.</p>
5674. Types Of Mobile Assistive Technology
5675. <p>I typically group assistive technologies into three categories:</p>
5676. <ol>
5677. <li><strong>Screen readers</strong>: software that converts information on a screen to speech or braille.</li>
5678. <li><strong>Screen magnifiers</strong>: software or system settings to magnify the screen, increase contrast, and otherwise modify the content to make it easier to see.</li>
5679. <li><strong>Alternative navigation</strong>: software and/or hardware that replaces an input device such as a keyboard, mouse, or touchscreen.</li>
5680. </ol>
5681. <p>Across all categories of assistive technology, 81% of the people I surveyed change the accessibility settings on their smartphone and/or tablet. Examples of accessibility settings include the following:</p>
5682. <ul>
5683. <li>Increasing the font size;</li>
5684. <li>Turning on captions;</li>
5685. <li>Extending the tap duration;</li>
5686. <li>Inverting colours.</li>
5687. </ul>
5688. <p>There are smartphone settings such as dark mode that benefit people with disabilities even though they aren’t considered accessibility settings.</p>
5689. <p>Now, let’s dive into the specifics of each assistive technology category and learn more about the user preferences that shape their digital experiences.</p>
5690. Screen Reader Users
5691. <p>Both iPhone and Android smartphones come with a screen reader installed. On iPhone, the screen reader is VoiceOver, and on Android, it is TalkBack. Both screen readers allow users to explore by touching and dragging their fingers to hear content under their fingers read out loud or to swipe forwards and backward through all elements on the screen in a linear fashion. Both screen readers also let users navigate by headings or other types of elements.</p>
5692. <p><img src="https://files.smashing.media/articles/mobile-accessibility-barriers-assistive-technology-users/1-voiceover-settings-iphone.png" /></p>
5693. <p>The mobile screen reader users I surveyed tend to have several devices that work together to cover all their accessibility needs, and they support businesses that prioritize mobile accessibility.</p>
5694. <ul>
5695. <li>Nearly half of screen reader users also own a smartwatch.</li>
5696. <li>Half use an external keyboard with their smartphone, and a third use a braille display.</li>
5697. <li>Almost all factor the accessibility of apps and mobile sites into deciding which businesses to support.</li>
5698. </ul>
5699. <p>That last point is really important! Accessibility truly inspires purchasing decisions and brand loyalty.</p>
5700. Screen Magnification Users
5701. <p>In addition to magnification, Android smartphones also have a variety of vision-related accessibility features that allow users to change screen colours and text sizes. The iPhone Magnifier app lets users apply colour filters, adjust brightness or contrast, and detect people or doors nearby.</p>
5702. <p><img src="https://files.smashing.media/articles/mobile-accessibility-barriers-assistive-technology-users/2-magnification-settings-android.png" /></p>
5703. <p>My survey showed that screen magnification users had the highest percentage of tablet ownership, with 77% owning both a smartphone and a tablet. Alternative navigation users followed closely, with 62% owning a tablet, but only 42% of the screen reader users I surveyed own a tablet.</p>
5704. <p>Screen magnification users are less likely to investigate the accessibility of paid apps before purchasing (63%) compared to screen reader and alternative navigation users (89% and 91%, respectively). I suspect this is because device magnification, contrast, and colour inversion settings may allow users to work around some design choices that make an app inaccessible.</p>
5705. Alternative Navigation Users
5706. <p>Switch Access (Android) and Switch Control (iOS) let users interact with their devices using one or more switches instead of the touchscreen. There are a variety of things you can use as a switch: an external device, keyboard, sounds, or the smartphone camera or buttons.</p>
5707. <p>Item scan allows users to highlight items one by one and select an item in focus by activating the switch. Point and scan moves a horizontal line down from the top of the screen. When this line is over the desired element, the user selects their switch to stop it. A vertical line then moves from the left of the screen. When this line is also over the element, the user stops it with their switch. The user can then select the element in the cross hairs of the two lines. In addition to these two methods, users can also customize buttons to perform gestures such as swipe down or swipe left.</p>
5708. <p><img src="https://files.smashing.media/articles/mobile-accessibility-barriers-assistive-technology-users/3-point-scanning-iphone-select-app-store.png" /></p>
5709. <p>Android and iPhone devices can be controlled through Voice Access and Voice Control. Both allow users to speak commands to interact with their smartphone instead of using the touchscreen. The command “Say names” can expose labels that aren’t obvious. The command “Show numbers” allows users to say “tap two” to select the element labeled with the number 2.  “Show grid” is a command often used as a last resort to select an element. This approach overlays a grid across their screen area and allows users to select the grid square where the element is in focus.</p>
5710. <p>Alternative navigation users were least likely to own a smartwatch (26%) out of all three assistive technology categories, according to my survey. All the alternative navigation users that own a smartwatch, except for one, use it for health tracking. 24% use an external switch device with their smartphone.</p>
5711. Most Common Mobile Accessibility Barriers
5712. <p>Now that you know about some of the assistive technologies available on Android and iPhone devices, we can explore some specific challenges commonly encountered by users when navigating websites and native apps on their smartphones.</p>
5713. <p>I’ll outline an inclusive development process that can help you discover barriers that are specific to your own app. If you need general tips on what to avoid <em>right now</em>, here are common mobile accessibility issues that assistive technology users encounter. To get this list, I asked the community to select up to three of their most challenging accessibility barriers on mobile.</p>
5714. <h3>Unlabelled Buttons Or Links</h3>
5715. <p>Unlabelled buttons and links are the number one challenge reported by assistive technology users. Screen reader users are impacted the most by unlabelled elements, but also people who use voice commands to interact with their smartphone.</p>
5716. <h3>Small Buttons Or Links</h3>
5717. <p>Buttons and links that are too small to tap with a finger or require great precision to select using switch functions are a challenge for anyone with mobility issues. Tiny buttons and links are also hard to see for anyone with low vision. </p>
5718. <p><img src="https://files.smashing.media/articles/mobile-accessibility-barriers-assistive-technology-users/4-buttons.png" /></p>
5719. <h3>Gesture Interactions</h3>
5720. <p>Gestures like swipe to delete, tap and drag, and anything more complex than a simple tap or double tap can cause problems for many users. Gestures can be difficult to discover, and if you’re not a power mobile user, you may never figure them out. Your best bet is to include a button to perform the same action that a gesture can perform. Custom actions can expose more options, but only to assistive technology users and not to people with disabilities that may not use assistive technology, for example, cognitive disabilities.</p>
5721. <h3>Elements Blocking Parts Of The Screen</h3>
5722. <p>A chat button that is always hovering and may cover parts of the content. A sticky header or footer that takes up a big portion of the screen when the user zooms in or magnifies their screen. These screen blockers can make it very difficult or impossible for some users to view content.</p>
5723. <h3>Missing Error Messages</h3>
5724. <p>Keeping a submit button inactive until a form is correctly filled out is often used as an alternative to providing error messages. That approach can be a challenge for assistive technology users in particular, but also anyone with a cognitive disability or who isn’t tech-savvy. Sometimes, error messages exist, but they aren’t announced to screen reader users.</p>
5725. <p><img src="https://files.smashing.media/articles/mobile-accessibility-barriers-assistive-technology-users/8-error-messages.jpg" /></p>
5726. <h3>Resizing Text And Pinch And Zoom</h3>
5727. <p>When an app doesn’t respect the font size increases set by a user through accessibility settings, people who need larger text must find alternative ways to read content. Some websites disable pinch and zoom — a feature that is not just useful for enlarging text but is often used to see images better.</p>
5728. Other Mobile Accessibility Barriers
5729. <p>The accessibility barriers that weren’t mentioned as often but still represent significant challenges for assistive technology users include:</p>
5730. <ul>
5731. <li><strong>Low contrast</strong><br />If the contrast between text and background is low, it makes it harder for folks with low vision to read. Customizing contrast settings can make content more legible for a broader range of people.</li>
5732. <li><strong>No dark mode</strong><br />For some people, black text on a white background can be painful to the eyes or trigger migraines.</li>
5733. <li><strong>Fixed orientation</strong><br />Not being able to rotate from portrait to landscape can impact people who have their device in a fixed position on a wheelchair or people with low vision who use landscape mode to make text and images appear larger.</li>
5734. <li><strong>Missing captions</strong><br />No captions on videos were also cited as a barrier. This is one that I relate to personally, as I rely on captions myself because of my hearing disability.</li>
5735. </ul>
5736. <p><img src="https://files.smashing.media/articles/mobile-accessibility-barriers-assistive-technology-users/6-website-dark-light-mode.png" /></p>
5737. <p>I knew I couldn’t capture all of the mobile accessibility barriers in my list of choices, so I gave the survey respondents a free text field to enter their own. Here’s what they said:</p>
5738. <ul>
5739. <li>Screen reader users encounter unlabelled images or labels that don’t make sense. AI-based image recognition technology can help but often can’t provide the same context that a designer would. Screen reader users also run into apps that unexpectedly move their screen reader’s focus, changing their location on the screen and causing confusion.</li>
5740. <li>Voice Control users find apps and sites that aren’t responsive to their voice commands. They have to try alternate commands to activate interactive elements, sometimes slowing them down significantly.</li>
5741. <li>Complex navigation, such as large, dynamic lists or menus that expand and collapse automatically, can be challenging to use with assistive technologies. There aren’t often workarounds to interacting with navigation, so this can influence whether a user will abandon an app or website.</li>
5742. </ul>
5743. Inclusive Design Approaches For Mobile
5744. <p>It’s important to avoid getting overwhelmed and not doing anything at all because mobile accessibility seems hard. Instead, focus on fixing the most critical issues first, then release, celebrate, and repeat the process.</p>
5745. <p>Ideally, you’ll want to change your processes to avoid creating more accessibility issues in the future. Here’s a high-level process for inclusive app development:</p>
5746. <ul>
5747. <li>Do <strong>research with users</strong> to understand how their assistive technology works and what challenges they have with your existing app.</li>
5748. <li>Create <strong>designs for accessibility features</strong> such as font scaling and state and focus indicators.</li>
5749. <li>Revise designs and get <strong>feedback from users</strong> that can be applied in development.</li>
5750. <li><strong>Annotate design files</strong> for accessibility based on user feedback and best practices.</li>
5751. <li>Create a new build and use <strong>automated testing tools</strong> to find barriers.</li>
5752. <li>Do <strong>manual QA testing</strong> on the new build using your phone’s accessibility settings.</li>
5753. <li>Release a private build and <strong>test with users</strong> again before the production release.</li>
5754. </ul>
5755. <p><img src="https://files.smashing.media/articles/mobile-accessibility-barriers-assistive-technology-users/7-visual-studio-app-center.png" /></p>
5756. Conclusion
5757. <p>Fixing and, more importantly, avoiding mobile accessibility barriers can be easier if you understand how assistive technologies work and the common challenges users encounter on mobile devices. Remember the key takeaway from the beginning of this article: half of the people surveyed felt <strong>accessibility barriers had a significant impact on their well-being</strong>. With that in mind, I encourage you not to let a lack of understanding of technical accessibility compliance hold you back from building inclusive apps and mobile-friendly websites. </p>
5758. <p>When you look at accessibility from the lens of usability for everyone and learn from assistive technology users, you take a step towards empowering everyone to independently interact with your products and services, playing your part in building a more equitable Internet.</p>
5759. <h3>Further Reading On SmashingMag</h3>
5760. <ul>
5761. <li>“<a href="https://www.smashingmagazine.com/2022/09/wai-aria-guide/">Making Sense Of WAI-ARIA: A Comprehensive Guide</a>,” Kate Kalcevich</li>
5762. <li>“<a href="https://www.smashingmagazine.com/2023/02/guide-accessible-form-validation/">A Guide To Accessible Form Validation</a>,” Sandrina Pereira</li>
5763. <li>“<a href="https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/">Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties</a>,” Eric Bailey</li>
5764. <li>“<a href="https://www.smashingmagazine.com/2023/06/testing-sites-apps-blind-users-cheat-sheet/">Testing Sites And Apps With Blind Users: A Cheat Sheet</a>,” Slava Shestopalov &amp; Eugene Shykiriavyi</li>
5765. </ul>
5766. ]]></content:encoded>
5767.            <author>hello@smashingmagazine.com (Kate Kalcevich)</author>
5768.            <enclosure url="http://files.smashing.media/articles/mobile-accessibility-barriers-assistive-technology-users/mobile-accessibility-barriers-assistive-technology-users.jpg" length="0" type="image/jpg"/>
5769.        </item>
5770.        <item>
5771.            <title><![CDATA[How Accessibility Standards Can Empower Better Chart Visual Design]]></title>
5772.            <link>https://smashingmagazine.com/2024/02/accessibility-standards-empower-better-chart-visual-design/</link>
5773.            <guid>https://smashingmagazine.com/2024/02/accessibility-standards-empower-better-chart-visual-design/</guid>
5774.            <pubDate>Wed, 14 Feb 2024 15:00:00 GMT</pubDate>
5775.            <description><![CDATA[Accessibility for data visualization extends well beyond web standards, at least if you’re trying to create an experience that’s actually useful. This article focuses on techniques for creating useful and accessible visualizations that extend well beyond compliance.]]></description>
5776.            <content:encoded><![CDATA[<p>Data visualizations are graphics that leverage our <a href="https://en.wikipedia.org/wiki/Visual_system">visual system</a> and innate capabilities to gather, accumulate, and process information in our environment, as shown in the animation in Figure 1.0.</p>
5777. <a href="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-berries-preattentive-processing.gif"><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-0-berries-preattentive-processing-800px.gif" /></a>Figure 1.0. An animation demonstrating our preattentive processing capability. Based on a lecture by Dr. Stephen Franconeri. (<a href="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-berries-preattentive-processing.gif">Large preview</a>)
5778.  
5779. <p>As a result, we’re able to quickly spot trends, patterns, and outliers in all the images we see. Can you spot the visual patterns in Figure 1.1? </p>
5780. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-1-gestalt-patterns.png" /></p>
5781. <p>In this example, there are patterns defined by the size of the shapes, the use of fills and borders, and the use of different types of shapes. These characteristics, or visual encodings, are the building blocks of visualizations. Good visualizations provide a glanceable view of a large data set we otherwise wouldn’t be able to comprehend.</p>
5782. Accessibility Challenges With Data Visualizations
5783. <p>Visualizations typically serve a wide array of use cases and can be quite complex. A lot of care goes into choosing the right encodings to represent each metric. Designers and engineers will use colors to draw attention to more important metrics or information and highlight outliers. Oftentimes, as these design decisions are made, considerations for people with vision disabilities are missed. </p>
5784. <p></p><p>Vision disabilities affect hundreds of millions of people worldwide. For example, about 300 million people have color-deficient vision, and it’s a condition that affects 1 in 12 men.1</p><p></p>
5785. <p></p><p>1 <a href="https://www.colourblindawareness.org/">Colour Blind Awareness (2023)</a></p> <p></p>
5786. <p>Most people with these conditions don’t use assistive technology when viewing the data. Because of this, the visual design of the chart needs to meet them where they are.</p>
5787. <p>Figure 1.2 is an example of a donut chart. At first glance, it might seem like the categorical color palette matches the theme of digital wellbeing. It’s calm, it’s cool, and it may even invoke a feeling of wellbeing. </p>
5788. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-2-donut-v1.png" /></p>
5789. <p>Figure 1.3 highlights how this same chart will appear to someone with a protanopia condition. You’ll notice that it is slightly less readable because the Other and YouTube categories appearing at the top of the donut are indistinguishable from one another. </p>
5790. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-3-donut-protonopia.png" /></p>
5791. <p>For someone with achromatopsia, the chart will appear as it does in Figure 1.4</p>
5792. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-4-donut-grayscale.png" /></p>
5793. <p>In this case, I’d argue that the chart isn’t really telling us anything. It’s nearly impossible to read, and swapping it out for a data table would be arguably more useful. At this point, you might be wondering how to fix this. Where should you start? </p>
5794. Start With Web Standards
5795. <p>Web standards can help us improve our design. In this case, Web Content Accessibility Guidelines (WCAG) will provide the most comprehensive set of requirements to start with. Guidelines call for two considerations. First, all colors must achieve the <strong>proper contrast ratio</strong> with their neighboring elements. Second, visualizations need to use something other than color to convey meaning. This can be accomplished by including a <strong>second encoding or adding text, images, icons, or patterns</strong>. While this article focuses on achieving WCAG 2.1 standards, the same concepts can be used to achieve WCAG 2.2 standards.</p>
5796. Web Standards Challenges
5797. <p>Meeting the web standards is trickier than it might first seem. Let’s dive into a few examples showing how difficult it is to ensure data will be understood at a glance while meeting the standards.  </p>
5798. <h3>Challenge 1: Color Contrast</h3>
5799. <p>According to the <a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">WCAG 2.1 (level AA) standards</a>, graphics such as chart elements (lines, bars, areas, nodes, edges, links, and so on) should all achieve a minimum <a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">3:1 contrast ratio</a> with their neighboring elements. Neighboring elements may include other chart elements, interaction states, and the chart’s background. Incidentally, if you’re not sure your colors are achieving the correct minimum ratio, <a href="http://contrast-ratio.com">you can check your palette here</a>. Additionally, all text elements should achieve a minimum <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">4.5:1</a> contrast ratio with their background. Figure 1.5 depicts a sample categorical color palette that follows the recommended standards. </p>
5800. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-5-wcag-swatches.png" /></p>
5801. <p>This is quite a bold palette. When applying a compliant palette to a chart, it might look like the example in Figure 1.6. </p>
5802. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-6-stacked-bar-series-high-contrast.png" /></p>
5803. <p>While this example meets the color contrast requirements, there’s a tradeoff. The chart’s focal point is now lost. The red segments at the bottom of each stacked bar represent the most important metrics illustrated in this chart. They represent errors or a count of items that need your attention. Since the chart features bold colors, all of which are equally competing for our attention, it’s now more difficult to see the items that matter most. </p>
5804. <h3>Challenge 2: Dual Encodings, Or Conveying Meaning Without Color</h3>
5805. <p>To minimize reliance on color to convey meaning, <a href="https://www.w3.org/TR/WCAG21/#use-of-color">WCAG 2.1 (level A) standards</a> also call for the use of something other than color to convey meaning. This may be a pattern, texture, icon, text overlay, or an entirely different visual encoding. </p>
5806. <p>It’s easy to throw a pattern on top of a categorical fill color and call it a day, as illustrated in Figure 1.7. But is the chart still readable? Is it glanceable? In this case, the segments appear to run into one another. In his book, <em>The Visual Display of Quantitative Information</em>, Edward Tufte describes the importance of minimizing <a href="https://en.wikipedia.org/wiki/Chartjunk">chartjunk</a> or unnecessary visual design elements that limit one’s ability to read the chart. This begs the question, do the WCAG standards encourage us to add unnecessary <a href="https://en.wikipedia.org/wiki/Chartjunk">chartjunk</a> to the visualization? </p>
5807. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-7-donut-textures.png" /></p>
5808. <p>Following the standards verbatim can lead us down the path of creating a really noisy visualization. </p>
5809. Let The Standards Empower vs Constrain Design
5810. <p>Over the past several years, my working group at Google has learned that it’s easier to meet the WCAG visual design requirements when they’re considered at the beginning of the design process instead of trying to update existing charts to meet the standard. The latter approach leads to charts with unnecessary chart junk, just like the one previously depicted in Figure 1.7, and minimized usability. Considering accessibility first will enable you to create a visualization that’s not only accessible but useful. We’re calling this our accessibility-first approach to chart design. Now, let’s see some examples. </p>
5811. <h3>Solving For Color Contrast</h3>
5812. <p>Let’s revisit the color contrast requirement via the example in Figure 1.8. In this case, the most important metric is represented by the red segments appearing at the bottom of each bar in the series. The red color represents a count of items in a failing state. Since both colors in this palette compete for our attention, it’s difficult to focus on the metric that matters most. The chart is no longer glanceable. </p>
5813. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-8-stacked-bar-series-high-contrast.png" /></p>
5814. <h4>Focus On Essential Elements Only</h4>
5815. <p>By stretching the standards a bit, we can balance a11y and glanceability a lot better. Only the visual elements essential for interpreting the visualization need to achieve the color contrast requirement. In the case of Figure 1.8, we can use borders that achieve the required contrast ratio while using lighter fills to the point of focus. In Figure 1.9, you’ll notice your attention now shifts down to the metrics that matter most. </p>
5816. <a href="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-9-animated-bar-demonstration.gif"><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-9-animated-bar-demonstration-800px.gif" /></a>Figure 1.9. ✅ DO: Consider using a combination of outlines and fills to meet contrast requirements while maintaining a focal point. (<a href="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/1-9-animated-bar-demonstration.gif">Large preview</a>)
5817.  
5818. <h4>Dark Themes For The Win</h4>
5819. <p>Most designers I know love a good dark theme like the one used in Figure 2.0. It looks nice, and dark themes often result in visually stunning charts. </p>
5820. <p>More importantly, a dark theme offers an accessibility advantage. When building on top of a dark background, we can use a wider array of color shades that will still achieve the minimum required contrast ratio. </p>
5821. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-0-dark-theme-sample.png" /></p>
5822. <p>According to an audit conducted by Google’s Data Accessibility Working Group, the 61 shades of the Google Material palette from 2018 achieved the minimum 3:1 contrast ratio when placed on a dark background. This is depicted in Figure 2.1. Only 40 shades of Google Material colors achieved the same contrast ratio when placed on a white background. The 50% increase in available shades when moving from a light background to a dark background makes a huge difference. Having access to more shades enables us to draw focus to items that matter most. </p>
5823. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-1-light-dark-theme-study.png" /></p>
5824. <p>With this in mind, let’s revisit the earlier donut chart example in Figure 2.2. For now, let’s keep the white background, as it’s a core part of Google’s brand. </p>
5825. <a href="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/minimum-contrast-ratios.gif"><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/minimum-contrast-ratios-800px.gif" /></a>Figure 2.2. ✅ DO: Use a combination of fills and borders that achieve the minimum contrast ratios to improve the readability of your chart. (<a href="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/minimum-contrast-ratios.gif">Large preview</a>)
5826.  
5827. <p>While this is a great first step, there’s still more work to do. Let’s take a closer look. </p>
5828. <h3>Solving For Dual Encodings And Minimizing Chartjunk</h3>
5829. <p>As shown in Figure 2.3, color is our only way of connecting segments in the donut to the corresponding categories in the legend. Despite our best efforts to follow color contrast standards, the chart can still be difficult to read for people with certain vision disabilities. We need a dual encoding, or something other than color, to convey meaning.</p>
5830. <p>How might we do this without adding noise or reducing the chart’s readability or glanceability? Let’s start with the text. </p>
5831. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-3-color-as-only-encoding.png" /></p>
5832. <h4>Integrating Text And Icons</h4>
5833. <p>Adding text to a visualization is a great way to solve the dual encoding problem. Let’s use our donut chart as an example. If we move the legend labels into the graph, as illustrated in Figure 2.4, we can visually connect them to their corresponding segments. As a result, there is no longer a need for a legend, and the labels become the second encoding. </p>
5834. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-4-text-as-encoding.png" /></p>
5835. <p>Let’s look at a few other ways to provide a dual encoding while maximizing readability. This will prevent us from running in the direction of applying unnecessary chart junk like the example previously highlighted in Figure 1.7. </p>
5836. <p>Depending on the situation, shape of the data, or the available screen real estate, we may not have the luxury of overlaying text on top of a visualization. In cases like in Figure 2.5, it’s still okay to use iconography. For example, if we’re dealing with a very limited number of categories, the added iconography can still act as a dual encoding. </p>
5837. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-5-stacked-area-with-icons.png" /></p>
5838. <p>Some charts can have upwards of hundreds of categories, which makes it difficult to add iconography or text. In these cases, we must revisit the purpose of the chart and decide if we need to differentiate categories. Perhaps color, along with a dual encoding, can be used to highlight other aspects of the data. The example in Figure 2.6 shows a line chart with hundreds of categories. </p>
5839. <p>We did a few things with color to convey meaning here: </p>
5840. <ol>
5841. <li>Bright colors are used to depict outliers within the data set. </li>
5842. <li>A neutral gray color is applied to all nominal categories. </li>
5843. </ol>
5844. <p>In this scenario, we can once again use a very limited set of shapes for differentiating specific categories. </p>
5845. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-6-neutral-color-usage.png" /></p>
5846. <h4>The Benefits Of Small Multiples And Sparklines</h4>
5847. <p>There are still times when it’s important to differentiate between all categories depicted in a visualization. For example, the tangled mess of a chart is depicted in Figure 2.7. </p>
5848. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-7-too-many-categories.png" /></p>
5849. <p>In this case, a more accessible solution would include breaking the charts into their own mini charts or sparklines, as depicted in Figure 2.8. This solution is arguably better for everyone because it makes it easier to see the individual trend for each category. It’s more accessible because we’ve completely removed the reliance on color and appended text to each of the mincharts, which is better for the screen reader experience. </p>
5850. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-8-sparklines.png" /></p>
5851. <h4>Reserve Fills For Items That Need Your Attention</h4>
5852. <p>Earlier, we examined using a combination of fills and outlines to achieve color contrast requirements. Red and green are commonly used to convey status. For someone who is red/green colorblind, this can be very problematic. As an alternative, the status icons in Figure 2.9 reserve fills for the items that need your attention. We co-designed this solution with some help from customers who are colorblind. It’s arguably more scannable for people who are fully sighted, too. </p>
5853. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/2-9-table.png" /></p>
5854. <h4>Embracing Relevant Metaphors</h4>
5855. <p>In 2022, we launched a redesigned Fitbit mobile app for the masses. One of my favorite visualizations from this launch is a chart showing your heart rate throughout the day. As depicted in Figure 3.0, this chart shows when your heart rate crosses into different zones. Dotted lines were used to depict each of these zone thresholds. We used the spacing between the dots as our dual encoding, which invokes a feeling of a “visual” heartbeat. Threshold lines with closely spaced dots imply a higher heart rate. </p>
5856. <p>Continuing the theme of using fun, relevant metaphors, we even based our threshold spacing on the <a href="https://en.wikipedia.org/wiki/Fibonacci_sequence">Fibonacci Sequence</a>. This enabled us to represent each threshold with a noticeably different visual treatment. For this example, we knew we were on the right track as these accessibility considerations tested well with people who have color-deficient vision. </p>
5857. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-0-heart-rhythm-chart.png" /></p>
5858. <h4>Accessible Interaction States</h4>
5859. <p>Color contrast and encodings also need to be considered when showing interactions like mouse hover, selection, and keyboard focus, like the examples in Figure 3.1. The same rules apply here. In this example, the hover, focus, and clicked state of each bar is delineated by elements that appear above and below the bar. As a result, these elements only need to achieve a 3:1 contrast ratio with the white background and not the bars themselves. Not only did this pattern test well in multiple usability studies, but it was also designed so that the states could overlap. For example, the hover state and selected state can appear simultaneously and still meet accessibility requirements. </p>
5860. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-1-interaction-states.png" /></p>
5861. <h4>Finding Your Inspiration</h4>
5862. <p>For some more challenging projects, we’ve taken inspiration from unexpected areas. </p>
5863. <p>For example, we looked to nature (Figure 3.2) to help us consider methods for visualizing the effects of cloud moisture on an LTE network, as sketched in Figure 3.3. </p>
5864. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/starlings-sky.jpg" /></p>
5865. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-3-weather-vis-sketch.png" /></p>
5866. <p>We’ve taken inspiration from halftone printing processes (Figure 3.4) to think about how we might reimagine a heatmap with a dual encoding, as depicted in Figure 3.5. </p>
5867. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-4-halftone-sample-new.png" /></p>
5868. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-5-dual-encoding-heatmap-new.png" /></p>
5869. <p>We’ve also <a href="https://www.smashingmagazine.com/2014/12/frank-lloyd-wright-approach-digital-design/">taken inspiration from architecture</a> and how people move through buildings (Figure 3.6) to consider methods for showing the scope and flow of data into a donut chart as depicted in Figure 3.7. </p>
5870. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-6-architectural-inspiration-sample.jpeg" /></p>
5871. <a href="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-7-animated-donut.gif"><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-7-animated-donut-800px.gif" /></a>Figure 3.7. Applying inspiration from architecture and a building’s flow. (<a href="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-7-animated-donut.gif">Large preview</a>)
5872.  
5873. <p>In this case, the animated inner ring highlights the scope of the donut chart when it’s empty and indicates that it will fill up to 100%. Animation is a great technique, but it presents other accessibility challenges and should either time out or have a stop control. </p>
5874. <p>In some cases, we were even inspired to explore new versions of existing visualization types, like the one depicted in Figure 3.8. <a href="https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/">This case study</a> highlights a step-by-step guide to how we landed on this example. </p>
5875. <p><img src="https://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/3-8-heatlane.png" /></p>
5876. Getting People On Board With Accessibility
5877. <p>One key lesson is that it’s important to get colleagues on board with accessibility as soon as possible. Your compliant designs may not look quite as pretty as your non-compliant designs and may be open to criticism. </p>
5878. <p>So, how can you get your colleagues on board? For starters, evangelism is key. Provide examples like the ones included here, which can help your colleagues build empathy for people with vision disabilities. Find moments to share the work with your company’s leadership team, spreading awareness. Team meetings, design critiques, AMA sessions, organization forums, and all-hands are a good start. Oftentimes, colleagues may not fully understand how accessibility requirements apply to charting or how their visualizations are used by people with disabilities. </p>
5879. <p>While share-outs are a great start, communication is one way.  We found that it’s easier to build momentum when you invite others to participate in the design process. Invite them into brainstorming meetings, design reviews, codesign sessions, and the problem space to help them appreciate how difficult these challenges are. Enlist their help, too. </p>
5880. <p>By engaging with colleagues, we were able to pinpoint our champions within the group or those people who were so passionate about the topic they were willing to spend extra time building demos, prototypes, design specs, and research repositories. For example, at Google, we were able to publish our <a href="https://material.io/blog/blog/blog/data-visualization-accessibility">Top Tips for Data Accessibility</a> on the Material Design blog. </p>
5881. <p>Aside from good citizenship and building a grassroots start, there are ways to get the business on board. Pointing to regulations like <a href="https://www.section508.gov/">Section 508</a> in America and the <a href="https://ec.europa.eu/social/main.jsp?catId=1202#:~:text=The%20European%20accessibility%20act%20is,EU%20leading%20to%20costs%20reduction">European Accessibility Act</a> are other good ways to encourage your business to dive deeper into your product’s accessibility. It’s also an effective mechanism for getting funding and ensuring accessibility is on your product’s roadmap. Once you’ve made the business case and you’ve identified the accessibility champions on your team, it’s time to start designing. </p>
5882. Conclusion
5883. <p>Accessibility is more than compliance. Accessibility considerations can and will benefit everyone, so it’s important not to shove them into a special menu or mode or forget about them until the end of the design process. When you consider accessibility from the start, the WCAG standards also suddenly seem a lot less constraining than when you try to retrofit existing charts for accessibility. </p>
5884. <p>The examples here were built over the course of 3 years, and they’re based on valuable lessons learned along the way. My hope is that you can use the tested designs in this article to get a head start. And by taking an accessibility-first approach, you’ll end up with overall better data visualizations — ones that fully take into account how <em>all</em> people gather, accumulate, and process information.  </p>
5885. <h3>Resources</h3>
5886. <p>To get started thinking about data accessibility, check out some of these resources:</p>
5887. <p><strong>Getting started</strong></p>
5888. <ul>
5889. <li><a href="https://material.io/blog/data-visualization-accessibility">Google’s Top Tips for Data Accessibility</a></li>
5890. <li><a href="https://colorandcontrast.com/">Color and contrast</a><br />A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.</li>
5891. <li><a href="https://observablehq.com/@frankelavsky/chartability-contrast-series">Introduction to accessible contrast and color for data visualization</a><br />A series of Observable notebooks on using contrast and patterns to distinguish marks in accessible data visualizations.</li>
5892. </ul>
5893. <p><strong>ACM</strong></p>
5894. <ul>
5895. <li><a href="https://cacm.acm.org/magazines/2022/8/262908-color-blind-accessibility-manifesto/fulltext">Color blind accessibility manifesto</a></li>
5896. </ul>
5897. <p><strong>Contrast checking tool</strong></p>
5898. <ul>
5899. <li><a href="http://contrast-ratio.com/">Contrast-Ratio.com</a></li>
5900. </ul>
5901. <p><strong>WCAG requirements</strong></p>
5902. <ul>
5903. <li><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">Guidelines for text contrast contrast</a></li>
5904. <li><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">Guidelines for graphic color contrast</a></li>
5905. </ul>
5906. <p><strong>Material design best practices and specs</strong></p>
5907. <ul>
5908. <li><a href="https://m3.material.io/foundations/accessible-design/overview">Accessibility with Material 3</a></li>
5909. <li>“<a href="https://medium.com/google-design/redefining-data-visualization-at-google-9bdcf2e447c6">Google’s Six Principles for Designing Any Chart</a>,” Manuel Lima</li>
5910. <li><a href="https://material.io/design/communication/data-visualization.html">Data Visualization in Material Design</a></li>
5911. </ul>
5912. <p><em>We’re incredibly proud of our colleagues who contributed to the research and examples featured in this article. This includes Andrew Carter, Ben Wong, Chris Calo, Gerard Rocha, Ian Hill, Jenifer Kozenski Devins, Jennifer Reilly, Kai Chang, Lisa Kaggen, Mags Sosa, Nicholas Cottrell, Rebecca Plotnick, Roshini Kumar, Sierra Seeborn, and Tyler Williamson. Without everyone’s contributions, we wouldn’t have been able to advance our knowledge of accessible chart visual design.</em></p>
5913. ]]></content:encoded>
5914.            <author>hello@smashingmagazine.com (Kent Eisenhuth)</author>
5915.            <enclosure url="http://files.smashing.media/articles/accessibility-standards-empower-better-chart-visual-design/accessibility-standards-empower-better-chart-visual-design.jpg" length="0" type="image/jpg"/>
5916.        </item>
5917.        <item>
5918.            <title><![CDATA[A Practical Guide To Designing For Children]]></title>
5919.            <link>https://smashingmagazine.com/2024/02/practical-guide-design-children/</link>
5920.            <guid>https://smashingmagazine.com/2024/02/practical-guide-design-children/</guid>
5921.            <pubDate>Tue, 13 Feb 2024 12:00:00 GMT</pubDate>
5922.            <description><![CDATA[How to design for children aged 3&ndash;12, with insights into user behavior, considerations for parents, and practical UX guidelines.]]></description>
5923.            <content:encoded><![CDATA[<p><strong>Children</strong> start interacting with the web when they are 3–5 years old. How do we design for children? What do we need to keep in mind while doing so? And how do we meet the expectations of the <strong>most demanding users</strong> you can possibly find: parents? Well, let’s find out.</p>
5924.  
5925.  
5926. <p>This article is <strong>part of our ongoing series</strong> on <a href="/category/design-patterns">design patterns</a>. It’s also a part of the video library on <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a> 🍣 and is available in the <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman-spring/">live UX training</a> as well.</p>
5927.  
5928. Embrace Playing, Encourage Small Wins
5929. <p>Designing for children is difficult. Children tend to lose focus and motivation. They quit when they get bored, and they move on if they can’t get anywhere quickly enough. They <strong>need steady achievements</strong>. So, as designers, we need to appreciate, reward, and encourage small wins to develop habits and support learning — with progress tracking and gamification.</p>
5930. <p><img src="https://files.smashing.media/articles/practical-guide-design-children/designing-children-games-example.jpg" /></p>
5931. <p>As Deb Gelman, author of <em>Design for Kids</em> discovered, children <strong>communicate volumes by how they play</strong>, what they choose to play with, how long they choose to play with it, and when they decide to play with something else. Yet they don’t get as disappointed when something isn’t working. They just choose to browse or play something else.</p>
5932. <p>Most importantly, we can’t design for children without testing. Even better: <strong>bring children to co-design their digital experiences</strong> and bring parents to co-design reliable guardrails. With a fun, smart, and safe product, parents will spread the word about you faster than you ever could.</p>
5933. Always Focus On A Two-Year Age Range
5934. <p>As designers, we should always keep in mind that <em>“children”</em> represent a very diverse range of behaviors and abilities. There are vast <strong>differences between age groups</strong> (3–5, 6–8, and 9–12) — both in terms of how users navigate but also how we communicate to them.</p>
5935. <p>In general, when designing for children, focus on a <strong>two-year age range</strong>, max. These days, children start interacting with the web at the age of 3–5. And the very first interactions they learn are swipe, scroll, video controls, and “Home”.</p>
5936. Getting Parents On Board
5937. <p>Whenever you are designing for children, you always design for parents as well. In fact, parents are the <strong>most demanding users</strong> you can find. They have <strong>absolutely no mercy</strong> in reviews, requests, complaints, and ratings on the stores.</p>
5938. <p><img src="https://files.smashing.media/articles/practical-guide-design-children/Grace-parental-control-for-iOS.png" /></p>
5939. <p>That’s not surprising. Parents need <strong>safety guarantees</strong>, regulations, and certifications — a sort of <em>reassurance</em> that you treat their safety and privacy seriously, especially when it comes to third-party integrations or advertising. In fact, they are often willing to pay for apps more just to avoid advertising.</p>
5940. <p>Parents often value <strong>reviews from teachers, educators</strong>, doctors, and other parents like themselves. And they need to have <strong>parental controls</strong> to set specific time limits, rules, access, and permissions.</p>
5941. <p>As <a href="https://www.linkedin.com/in/rodrigoseoane/">Rodrigo Seoane</a> has pointed out in an email, a major concern to keep in mind is “how the majority of initiatives for kids rely on and create dependencies on extrinsic motivations. The reward model keeps their attention in the short term, but as a core gamified mechanic, it is problematic in the long run, reducing their cognitive capacity and creating a barrier to developing any intrinsic motivation.” So whenever possible, design to <a href="https://medium.com/@paulasg/how-to-increase-players-intrinsic-motivation-d00368697d19">increase intrinsic motivation</a>.</p>
5942. Design Guidelines For Children-Friendly Design
5943. <ul>
5944. <li><strong>Design large text</strong> (18–19px) with large tap targets (min 75×75px).</li>
5945. <li>Use typefaces that approximate how children learn to write.</li>
5946. <li><strong>Translate text into attractive visuals</strong>, icons, sounds, characters.</li>
5947. <li><strong>Avoid bottom buttons</strong> as kids tap on them by mistake all the time.</li>
5948. <li><strong>Children expect feedback</strong> on every single action they perform.</li>
5949. <li><strong>Don’t patronize</strong>: show age-appropriate content for the age range you’re designing for.</li>
5950. <li><strong>Be transparent</strong>: children can’t distinguish ads or promotions from real content.</li>
5951. <li>You’re always designing for <strong>both children and parents</strong>.</li>
5952. <li>Parents are the most demanding users you can find. They have <strong>no mercy in reviews and ratings</strong>.</li>
5953. <li>Design <strong>parental controls</strong> for time limits, rules, and access.</li>
5954. <li>Instead of extrinsic rewards, design to <strong>increase intrinsic motivation</strong>.</li>
5955. </ul>
5956. <h3>Useful Resources</h3>
5957. <ul>
5958. <li>“<a href="https://raw.studio/blog/designing-for-children/">8 Things to Consider When Designing for Children</a>,” by Jasmine Bilham</li>
5959. <li>“<a href="https://uxdesign.cc/design-considerations-for-little-fingers-ad2a19ed3816">Design Considerations for Little Fingers</a>,” by Andrew Smyk</li>
5960. <li>“<a href="https://www.eleken.co/blog-posts/ux-design-for-children-how-to-create-a-product-children-will-love">How to Create a Product Children Will Love</a>,” by Mariia Kasym</li>
5961. <li><a href="https://www.uxmatters.com/topics/design/designing-for-children/">Designing For Children (7-part series)</a>, by Catalina Naranjo-Bock, Jonathan Evans, Paul Osborne</li>
5962. <li>“<a href="https://www.nngroup.com/articles/childrens-websites-usability-issues/">Children’s UX: Usability Issues in Designing for Young People</a>,” by Katie Sherwin, Jakob Nielsen</li>
5963. <li>“<a href="https://www.nngroup.com/articles/usability-testing-minors/">Usability Testing With Children</a>,” by Alita Joyce</li>
5964. <li>“<a href="https://www.smashingmagazine.com/2015/08/designing-web-interfaces-for-kids/">Designing Web Interfaces For Kids</a>,” by Trine Falbe</li>
5965. <li>“<a href="https://uxdesign.cc/designing-apps-for-young-kids-part-1-ff54c46c773b">Designing Apps For Young Kids</a>,” by Rubens Cantuni (Medium paywall)</li>
5966. <li>“<a href="https://infodesign.com.au/usabilityresources/designingforchildren.html">Designing For Children (PDF guidelines)</a>,” by Gerry Gaffney, James Hunter</li>
5967. <li>“<a href="https://www.invisionapp.com/inside-design/building-apps-for-children/">The Definitive Guide to Building Apps for Kids</a>,” by Tanya Junell</li>
5968. <li><a href="https://medium.com/@hellopeter/useful-resources-for-designing-web-content-for-children-8171c94ab967">Useful Resources When Designing For Children</a></li>
5969. </ul>
5970. <h3>Digital Toolkits For Children</h3>
5971. <ul>
5972. <li><a href="https://playtestwithkids.org/">UX Research Toolkit For Playtesting With Kids</a> (UX Methods)</li>
5973. <li><a href="https://designingwithchildren.net/">Designing With Children</a> (Workshops and Case Studies)</li>
5974. <li><a href="https://studiolab.ide.tudelft.nl/studiolab/codesignwithkids/tools/">Co-Design With Kids Toolkit</a></li>
5975. <li><a href="https://digitalfuturescommission.org.uk/playful-by-design-toolkit/">Playful by Design Toolkit</a></li>
5976. <li><a href="https://decid.co.uk/">DeCID Handbook For Displaced Children</a></li>
5977. <li><a href="https://childrensdesignguide.org/">Designing For Children’s Rights Guide</a></li>
5978. </ul>
5979. <h3>Books and eBooks</h3>
5980. <ul>
5981. <li><a href="https://www.lxdlab.org/motivation-matters/pocket-guide">Designing For Motivation (Pocket Guide)</a>, by Anamaria Dorgo, LxD Lab</li>
5982. <li><a href="https://www.designappsforkids.com/">Designing Digital Products For Kids</a>, by Rubens Cantuni</li>
5983. <li><a href="https://rosenfeldmedia.com/books/design-for-kids/">Design For Kids</a>, by Deb Gelman</li>
5984. <li><a href="https://www.jovis.de/en/book/9783868597172">Designing Spaces For Children</a>, by Nathalie Dziobek-Bepler</li>
5985. </ul>
5986. Meet Smart Interface Design Patterns
5987. <p>If you are interested in similar insights around UX, take a look at <a href="https://smart-interface-design-patterns.com/"><strong>Smart Interface Design Patterns</strong></a>, our <strong>10h-video course</strong> with 100s of practical examples from real-life projects — with a <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman-spring/">live UX training</a> starting March 8. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year.  <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Jump to a free preview</a>.</p>
5988. <a href="https://smart-interface-design-patterns.com/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" /></a>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design &amp; UX.
5989.  
5990. <div><a href="https://smart-interface-design-patterns.com/">Jump to the video course →</a></div>
5991.  
5992. <p></p><p>100 design patterns &amp; real-life
5993. examples.<br />10h-video course + live UX training. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Free preview</a>.</p>
5994. ]]></content:encoded>
5995.            <author>hello@smashingmagazine.com (Vitaly Friedman)</author>
5996.            <enclosure url="http://files.smashing.media/articles/practical-guide-design-children/practical-guide-design-children.jpg" length="0" type="image/jpg"/>
5997.        </item>
5998.        <item>
5999.            <title><![CDATA[How To Draw Radar Charts In Web]]></title>
6000.            <link>https://smashingmagazine.com/2024/02/draw-radar-charts-web/</link>
6001.            <guid>https://smashingmagazine.com/2024/02/draw-radar-charts-web/</guid>
6002.            <pubDate>Fri, 09 Feb 2024 15:00:00 GMT</pubDate>
6003.            <description><![CDATA[A radar chart &mdash; also commonly called a spider chart &mdash; is yet another way to visualize data and make connections. Radar charts are inherently geometric, making them both a perfect fit and fun to make with CSS, thanks to the `polygon()` function. Read along as Preethi Sam demonstrates the process and sprinkles it with a pinch of JavaScript to make a handy, reusable component.]]></description>
6004.            <content:encoded><![CDATA[<p>I got to work with a new type of chart for data visualization called a <strong>radar chart</strong> when a project asked for it. It was new to me, but the idea is that there is a circular, two-dimensional circle with plots going around the chart. Rather than simple X and Y axes, each plot on a radar chart is its own axis, marking a spot between the outer edge of the circle and the very center of it. The plots represent some sort of category, and when connecting them together, they are like vertices that form shapes to help see the relationship of category values, not totally unlike the vectors in an SVG.</p>
6005. <p><img src="https://files.smashing.media/articles/draw-radar-charts-web/1-supercapacitor-comparison-chart.png" /></p>
6006. <p>Sometimes, the radar chart is called a <strong>spider chart</strong>, and it’s easy to see why. The axes that flow outward intersect with the connected plots and form a web-like appearance. So, if your <a href="https://www.urbandictionary.com/define.php?term=Spidey%20sense">Spidey senses</a> were tingling at first glance, you know why.</p>
6007. <p>You already know where we’re going with this: <strong>We’re going to build a radar chart together!</strong> We’ll work from scratch with nothing but HTML, CSS, and JavaScript. But before we go there, it’s worth noting a couple of things about radar charts.</p>
6008. <p>First, you don’t <em>have</em> to build them from scratch. <a href="https://www.chartjs.org/docs/latest/samples/other-charts/radar.html">Chart.js</a> and <a href="https://d3-graph-gallery.com/spider">D3.js</a> are readily available with convenient approaches that greatly simplify the process. Seeing as I needed just one chart for the project, I decided against using a library and took on the challenge of making it myself. I learned something new, and hopefully, you do as well!</p>
6009. <p>Second, there are <a href="https://www.data-to-viz.com/caveat/spider.html">caveats to using radar charts</a> for data visualization. While they are indeed effective, they can also be difficult to read when multiple series stack up. The relationships between plots are not nearly as decipherable as, say, bar charts. The order of the categories around the circle affects the overall shape, and the scale between series has to be consistent for drawing conclusions.</p>
6010. <p>That all said, let’s dive in and get our hands sticky with data plots.</p>
6011. The Components
6012. <p>The thing I like immediately about radar charts is that they are inherently geometrical. Connecting plots produces a series of angles that form polygon shapes. The sides are straight lines. And CSS is absolutely wonderful for working with polygons given that we have the <a href="https://web.dev/articles/shapes-getting-started#the_polygon_function">CSS <code>polygon()</code> function</a> for drawing them by declaring as many points as we need in the function’s arguments.</p>
6013. <p>We will start with a pentagonal-shaped chart with five data categories.</p>
6014. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/abMaEyo">Radar chart (Pentagon) [forked]</a> by <a href="https://codepen.io/rpsthecoder">Preethi Sam</a>.  </p>
6015. <p>There are <strong>three components</strong> we need to establish in HTML before we work on styling. Those would be:</p>
6016. <ol>
6017. <li><strong>Grids</strong>: These provide the axes over which the diagrams are drawn. It’s the spider web of the bunch.</li>
6018. <li><strong>Graphs</strong>: These are the polygons we draw with the coordinates of each data plot before coloring them in.</li>
6019. <li><strong>Labels</strong>: The text that identifies the categories along the graphs’ axes.</li>
6020. </ol>
6021. <p>Here’s how I decided to stub that out in HTML:</p>
6022. <pre><code>&lt;!-- GRIDS --&gt;
6023. <div class="wrapper">
6024.  <div class="grids polygons">
6025.    <div></div>
6026.  </div>
6027.  <div class="grids polygons">
6028.    <div></div>
6029.  </div>
6030.  <div class="grids polygons">
6031.    <div></div>
6032.  </div>
6033. </div>
6034.  
6035. <!-- GRAPHS -->
6036. <div class="wrapper">
6037.  <div class="graphs polygons">
6038.    <div><!-- Set 1 --></div>
6039.  </div>
6040.  <div class="graphs polygons">
6041.    <div><!-- Set 2 --></div>
6042.  </div>
6043.  <div class="graphs polygons">
6044.    <div><!-- Set 3 --></div>
6045.  </div>
6046.  <!-- etc. -->
6047. </div>
6048.  
6049. <!-- LABELS -->
6050. <div class="wrapper">
6051.  <div class="labels">Data A</div>
6052.  <div class="labels">Data B</div>
6053.  <div class="labels">Data C</div>
6054.  <div class="labels">Data D</div>
6055.  <div class="labels">Data E</div>
6056.  <!-- etc. -->
6057. </div>
6058. </code></pre>
6059.  
6060. <p>I’m sure you can read the markup and see what’s going on, but we’ve got three parent elements (<code>.wrapper</code>) that each holds one of the main components. The first parent contains the <code>.grids</code>, the second parent contains the <code>.graphs</code>, and the third parent contains the <code>.labels</code>.</p>
6061. Base Styles
6062. <p>We’ll start by setting up a few color variables we can use to fill things in as we go:</p>
6063. <pre><code>:root {
6064.  --color1: rgba(78, 36, 221, 0.6); /* graph set 1 */
6065.  --color2: rgba(236, 19, 154, 0.6); /* graph set 2 */
6066.  --color3: rgba(156, 4, 223, 0.6); /* graph set 3 */
6067.  --colorS: rgba(255, 0, 95, 0.1); /* graph shadow */
6068. }
6069. </code></pre>
6070.  
6071. <p>Our next order of business is to establish the layout. CSS Grid is a solid approach for this because we can place all three grid items together on the grid in just a couple of lines:</p>
6072. <pre><code>/* Parent container */
6073. .wrapper { display: grid; }
6074.  
6075. /* Placing elements on the grid */
6076. .wrapper > div {
6077.  grid-area: 1 / 1; /* There's only one grid area to cover */
6078. }
6079. </code></pre>
6080.  
6081. <p>Let’s go ahead and set a size on the grid items. I’m using a fixed length value of <code>300px</code>, but you can use any value you need and variablize it if you plan on using it in other places. And rather than declaring an explicit height, let’s put the burden of calculating a height on CSS using <code>aspect-ratio</code> to form perfect squares.</p>
6082. <pre><code>/* Placing elements on the grid */
6083. .wrapper div {
6084.  aspect-ratio: 1 / 1;
6085.  grid-area: 1 / 1;
6086.  width: 300px;
6087. }
6088. </code></pre>
6089.  
6090. <p>We can’t see anything just yet. We’ll need to color things in:</p>
6091. <div>
6092. <pre><code>/* ----------
6093. Graphs
6094. ---------- */
6095. .graphs:nth-of-type(1) > div { background: var(--color1); }
6096. .graphs:nth-of-type(2) > div { background: var(--color2); }
6097. .graphs:nth-of-type(3) > div { background: var(--color3); }
6098.  
6099. .graphs {
6100.  filter:
6101.    drop-shadow(1px 1px 10px var(--colorS))
6102.    drop-shadow(-1px -1px 10px var(--colorS))
6103.    drop-shadow(-1px 1px 10px var(--colorS))
6104.    drop-shadow(1px -1px 10px var(--colorS));
6105. }
6106.  
6107. /* --------------
6108. Grids
6109. -------------- */
6110. .grids {
6111.  filter:
6112.    drop-shadow(1px 1px 1px #ddd)
6113.    drop-shadow(-1px -1px 1px #ddd)
6114.    drop-shadow(-1px 1px 1px #ddd)
6115.    drop-shadow(1px -1px 1px #ddd);
6116.    mix-blend-mode: multiply;
6117. }
6118.  
6119. .grids > div { background: white; }
6120. </code></pre>
6121. </div>
6122.  
6123. <p>Oh, wait! We need to set widths on the grids and polygons for them to take shape:</p>
6124. <pre><code>.grids:nth-of-type(2) { width: 66%; }
6125. .grids:nth-of-type(3) { width: 33%; }
6126.  
6127. /* --------------
6128. Polygons
6129. -------------- */
6130. .polygons { place-self: center; }
6131. .polygons > div { width: 100%; }
6132. </code></pre>
6133.  
6134. <p>Since we’re already here, I’m going to position the labels a smidge and give them width:</p>
6135. <pre><code>/* --------------
6136. Labels
6137. -------------- */
6138. .labels:first-of-type { inset-block-sptart: -10%; }
6139.  
6140. .labels {
6141.  height: 1lh;
6142.  position: relative;
6143.  width: max-content;
6144. }
6145. </code></pre>
6146.  
6147. <p>We still can’t see what’s going on, but we can if we temporarily draw borders around elements.</p>
6148. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/QWoVamB">Radar chart layout [forked]</a> by <a href="https://codepen.io/rpsthecoder">Preethi Sam</a>.</p>
6149. <p>All combined, it doesn’t look all that great so far. Basically, we have a series of overlapping grids followed by perfectly square graphs stacked right on top of one another. The labels are off in the corner as well. We haven’t drawn anything yet, so this doesn’t bother me for now because we have the HTML elements we need, and CSS is technically establishing a layout that should come together as we start plotting points and drawing polygons.</p>
6150. <p>More specifically: </p>
6151. <ul>
6152. <li>The <code>.wrapper</code> elements are displayed as CSS Grid containers.</li>
6153. <li>The direct children of the <code>.wrapper</code> elements are <code>div</code>s placed in the exact same <code>grid-area</code>. This is causing them to stack one right on top of the other.</li>
6154. <li>The <code>.polygons</code> are centered (<code>place-self: center</code>).</li>
6155. <li>The child <code>div</code>s in the <code>.polygons</code> take up the full width (<code>width:100%</code>).</li>
6156. <li>Every single <code>div</code> is <code>300px</code> wide and squared off with a one-to-one <code>aspect-ratio</code>.</li>
6157. <li>We’re explicitly declaring a relative position on the <code>.labels</code>. This way, they can be automatically positioned when we start working in JavaScript.</li>
6158. </ul>
6159. <p>The rest? Simply apply some colors as backgrounds and drop shadows.</p>
6160. Calculating Plot Coordinates
6161. <p>Don’t worry. We are not getting into a deep dive about polygon geometry. Instead, let’s take a quick look at the equations we’re using to calculate the coordinates of each polygon’s vertices. You don’t have to know these equations to use the code we’re going to write, but it never hurts to peek under the hood to see how it comes together.</p>
6162. <pre><code>x1 = x + cosθ1 = cosθ1 if x=0
6163. y1 = y + sinθ1 = sinθ1 if y=0
6164. x2 = x + cosθ2 = cosθ2 if x=0
6165. y2 = y + sinθ2 = sinθ2 if y=0
6166. etc.
6167.  
6168. x, y = center of the polygon (assigned (0, 0) in our examples)
6169.  
6170. x1, x2… = x coordinates of each vertex (vertex 1, 2, and so on)
6171. y1, y2… = y coordinates of each vertex
6172. θ1, θ2… = angle each vertex makes to the x-axis
6173. </code></pre>
6174.  
6175. <p>We can assume that 𝜃 <strong>is</strong> <code>90deg</code> (i.e., <code>𝜋/2</code>) since a vertex can always be placed right above or below the center (i.e., <em>Data A</em> in this example). The rest of the angles can be calculated like this:</p>
6176. <pre><code>n = number of sides of the polygon
6177.  
6178. 𝜃1 = 𝜃0 + 2𝜋/𝑛 = 𝜋/2 + 2𝜋/𝑛
6179. 𝜃2 = 𝜃0 + 4𝜋/𝑛 = 𝜋/2 + 4𝜋/𝑛
6180. 𝜃3 = 𝜃0 + 6𝜋/𝑛 = 𝜋/2 + 6𝜋/𝑛
6181. 𝜃3 = 𝜃0 + 8𝜋/𝑛 = 𝜋/2 + 8𝜋/𝑛
6182. 𝜃3 = 𝜃0 + 10𝜋/𝑛 = 𝜋/2 + 10𝜋/𝑛
6183. </code></pre>
6184.  
6185. <p>Armed with this context, we can solve for our <code>x</code> and <code>y</code> values:</p>
6186. <pre><code>x1 = cos(𝜋/2 + 2𝜋/# sides)
6187. y1 = sin(𝜋/2 + 2𝜋/# sides)
6188. x2 = cos(𝜋/2 + 4𝜋/# sides)
6189. y2 = sin(𝜋/2 + 4𝜋/# sides)
6190. etc.
6191. </code></pre>
6192.  
6193. <p>The number of sides depends on the number of plots we need. We said up-front that this is a pentagonal shape, so we’re working with five sides in this particular example.</p>
6194. <pre><code>x1 = cos(𝜋/2 + 2𝜋/5)
6195. y1 = sin(𝜋/2 + 2𝜋/5)
6196. x2 = cos(𝜋/2 + 4𝜋/5)
6197. y2 = sin(𝜋/2 + 4𝜋/5)
6198. etc.
6199. </code></pre>
6200.  
6201. Drawing Polygons With JavaScript
6202. <p>Now that the math is accounted for, we have what we need to start working in JavaScript for the sake of plotting the coordinates, connecting them together, and painting in the resulting polygons.</p>
6203. <p>For simplicity’s sake, we will leave the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a> out of this and instead use regular HTML elements to draw the chart. You can, however, use the math outlined above and the following logic as the foundation for drawing polygons in whichever language, framework, or API you prefer.</p>
6204. <p>OK, so we have three types of components to work on: grids, graphs, and labels. We start with the grid and work up from there. In each case, I’ll simply drop in the code and explain what’s happening.</p>
6205. <h3>Drawing The Grid</h3>
6206. <div>
6207. <pre><code>// Variables
6208. let sides = 5; // # of data points
6209. let units = 1; // # of graphs + 1
6210. let vertices = (new Array(units)).fill("");
6211. let percents = new Array(units);
6212. percents[0] = (new Array(sides)).fill(100); // for the polygon's grid component
6213. let gradient = "conic-gradient(";
6214. let angle = 360/sides;
6215.  
6216. // Calculate vertices
6217. with(Math) {
6218.  for(i=0, n = 2 * PI; i < sides; i++, n += 2 * PI) {
6219.    for(j=0; j < units; j++) {
6220.      let x = ( round(cos(-1 * PI/2 + n/sides) * percents[j][i]) + 100 ) / 2;
6221.      let y = ( round(sin(-1 * PI/2 + n/sides) * percents[j][i]) + 100 ) / 2;
6222.      vertices[j] += <code>${x}% ${y} ${i == sides - 1 ? '%':'%, '}</code>;
6223.  }
6224.  gradient += <code>white ${
6225.    (angle * (i+1)) - 1}deg,
6226.    #ddd ${ (angle * (i+1)) - 1 }deg,
6227.    #ddd ${ (angle * (i+1)) + 1 }deg,
6228.    white ${ (angle &amp;#42; (i+1)) + 1 }deg,</code>;}
6229. }
6230.  
6231. // Draw the grids
6232. document.querySelectorAll('.grids>div').forEach((grid,i) => {
6233.  grid.style.clipPath =<code>polygon(${ vertices[0] })</code>;
6234. });
6235. document.querySelector('.grids:nth-of-type(1) &gt; div').style.background =<code>${gradient.slice(0, -1)} )</code>;
6236. </code></pre>
6237. </div>
6238.  
6239. <p>Check it out! We already have a spider web.</p>
6240. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/poYOpOG">Radar chart (Grid) [forked]</a> by <a href="https://codepen.io/rpsthecoder">Preethi Sam</a>.</p>
6241. <p>Here’s what’s happening in the code:</p>
6242. <ol>
6243. <li><code>sides</code> is the number of sides of the chart. Again, we’re working with five sides.</li>
6244. <li><code>vertices</code> is an array that stores the coordinates of each vertex.</li>
6245. <li>Since we are not constructing any graphs yet — only the grid — the number of <code>units</code> is set to <code>1</code>, and only one item is added to the <code>percents</code> array at <code>percents[0]</code>. For grid polygons, the data values are <code>100</code>.</li>
6246. <li><code>gradient</code> is a string to construct the <code>conic-gradient()</code> that establishes the grid lines.</li>
6247. <li><code>angle</code> is a calculation of <code>360deg</code> divided by the total number of <code>sides</code>.</li>
6248. </ol>
6249. <p>From there, we calculate the vertices:</p>
6250. <ol>
6251. <li><code>i</code> is an iterator that cycles through the total number of <code>sides</code> (i.e., <code>5</code>).</li>
6252. <li><code>j</code> is an iterator that cycles through the total number of <code>units</code> (i.e., <code>1</code>).</li>
6253. <li><code>n</code> is a counter that counts in increments of <code>2*PI</code> (i.e., <code>2𝜋</code>, <code>4𝜋</code>, <code>6𝜋</code>, and so on).</li>
6254. </ol>
6255. <p>The <code>x</code> and <code>y</code> values of each vertex are calculated as follows, based on the geometric equations we discussed earlier. Note that we multiply <code>𝜋</code> by <code>-1</code> to steer the rotation.</p>
6256. <div>
6257. <pre><code>cos(-1 * PI/2 + n/sides) // cos(𝜋/2 + 2𝜋/sides), cos(𝜋/2 + 4𝜋/sides)...
6258. sin(-1 * PI/2 + n/sides) // sin(𝜋/2 + 2𝜋/sides), sin(𝜋/2 + 4𝜋/sides)...
6259. </code></pre>
6260. </div>
6261.  
6262. <p>We convert the <code>x</code> and <code>y</code> values into percentages (since that is how the data points are formatted) and then place them on the chart.</p>
6263. <div>
6264. <pre><code>let x = (round(cos(-1 * PI/2 + n/sides) * percents[j][i]) + 100) / 2;
6265. let y = (round(sin(-1 * PI/2 + n/sides) * percents[j][i]) + 100) / 2;
6266. </code></pre>
6267. </div>
6268.  
6269. <p>We also construct the <code>conic-gradient(),</code> which is part of the grid. Each color stop corresponds to each vertex’s angle — at each of the angle increments, a grey (<code>#ddd</code>) line is drawn.</p>
6270. <pre><code>gradient +=
6271.  `white ${ (angle * (i+1)) - 1 }deg,
6272.   #ddd ${ (angle * (i+1)) - 1 }deg,
6273.   #ddd ${ (angle * (i+1)) + 1 }deg,
6274.   white ${ (angle * (i+1)) + 1 }deg,`
6275. </code></pre>
6276.  
6277. <p>If we print out the computed variables after the <code>for</code> loop, these will be the results for the grid’s <code>vertices</code> and <code>gradient</code>:</p>
6278. <div>
6279. <pre><code>console.log(<code>polygon( ${vertices[0]} )</code>); /* grid’s polygon */
6280. // polygon(97.5% 34.5%, 79.5% 90.5%, 20.5% 90.5%, 2.5% 34.5%, 50% 0%)
6281.  
6282. console.log(gradient.slice(0, -1)); /* grid’s gradient */
6283. // conic-gradient(white 71deg, #ddd 71deg,# ddd 73deg, white 73deg, white 143deg, #ddd 143deg, #ddd 145deg, white 145deg, white 215deg, #ddd 215deg, #ddd 217deg, white 217deg, white 287deg, #ddd 287deg, #ddd 289deg, white 289deg, white 359deg, #ddd 359deg, #ddd 361deg, white 361deg
6284. </code></pre>
6285. </div>
6286.  
6287. <p>These values are assigned to the grid’s <code>clipPath</code> and <code>background</code>, respectively, and thus the grid appears on the page.</p>
6288. <h3>The Graph</h3>
6289. <div>
6290. <pre><code>// Following the other variable declarations
6291. // Each graph's data points in the order [B, C, D... A]
6292. percents[1] = [100, 50, 60, 50, 90];
6293. percents[2] = [100, 80, 30, 90, 40];
6294. percents[3] = [100, 10, 60, 60, 80];
6295.  
6296. // Next to drawing grids
6297. document.querySelectorAll('.graphs > div').forEach((graph,i) => {
6298.  graph.style.clipPath =<code>polygon( ${vertices[i+1]} )</code>;
6299. });
6300. </code></pre>
6301. </div>
6302.  
6303. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/KKExZYE">Radar chart (Graph) [forked]</a> by <a href="https://codepen.io/rpsthecoder">Preethi Sam</a>.</p>
6304. <p>Now it looks like we’re getting somewhere! For each graph, we add its set of data points to the <code>percents</code> array after incrementing the value of <code>units</code> to match the number of graphs. And that’s all we need to draw graphs on the chart. Let’s turn our attention to the labels for the moment.</p>
6305. <h3>The Labels</h3>
6306. <div>
6307. <pre><code>// Positioning labels
6308.  
6309. // First label is always set in the top middle
6310. let firstLabel = document.querySelector('.labels:first-of-type');
6311. firstLabel.style.insetInlineStart =<code>calc(50% - ${firstLabel.offsetWidth / 2}px)</code>;
6312.  
6313. // Setting labels for the rest of the vertices (data points).
6314. let v = Array.from(vertices[0].split(' ').splice(0, (2 * sides) - 2), (n)=> parseInt(n));
6315.  
6316. document.querySelectorAll('.labels:not(:first-of-type)').forEach((label, i) => {
6317.  let width = label.offsetWidth / 2;
6318.  let height = label.offsetHeight;
6319.  label.style.insetInlineStart = <code>calc( ${ v[i&amp;#42;2] }% + ${ v[i&amp;#42;2] &amp;lt; 50 ? - 3&amp;#42;width : v[i&amp;#42;2] == 50 ? - width: width}px )</code>;
6320.  label.style.insetBlockStart = <code>calc( ${ v[(i&amp;#42;2) + 1] }% - ${ v[(i &amp;#42; 2) + 1] == 100 ? - height: height / 2 }px )</code>;
6321. });
6322. </code></pre>
6323. </div>
6324.  
6325. <p>The positioning of the labels is determined by three things:</p>
6326. <ol>
6327. <li>The coordinates of the vertices (i.e., data points) they should be next to,</li>
6328. <li>The width and height of their text, and</li>
6329. <li>Any blank space needed around the labels so they don’t overlap the chart.</li>
6330. </ol>
6331. <p>All the labels are positioned <code>relative</code> in CSS. By adding the <code>inset-inline-start</code> and <code>inset-block-start</code> values in the script, we can reposition the labels using the values as coordinates. The first label is always set to the top-middle position. The coordinates for the rest of the labels are the same as their respective vertices, plus an offset. The offset is determined like this:</p>
6332. <ol>
6333. <li><strong>x-axis/horizontal</strong><br />If the label is at the left (i.e., <code>x</code> is less than <code>50%</code>), then it’s moved towards the left based on its <code>width.</code> Otherwise, it’s moved towards the right side. As such, the right or left edges of the labels, depending on which side of the chart they are on, are uniformly aligned to their vertices.</li>
6334. <li><strong>y-axis/vertical</strong><br />The height of each label is fixed. There’s not much offset to add except maybe moving them down half their height. Any label at the bottom (i.e., when <code>y</code> is 100%), however, could use additional space above it for breathing room.</li>
6335. </ol>
6336. <p>And guess what…</p>
6337. We’re Done!
6338. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/XWGPVLJ">Radar chart (Pentagon) [forked]</a> by <a href="https://codepen.io/rpsthecoder">Preethi Sam</a>.</p>
6339. <p>Not too shabby, right? The most complicated part, I think, is the math. But since we have that figured out, we can practically plug it into any other situation where a radar chart is needed. Need a four-point chart instead? Update the number of vertices in the script and account for fewer elements in the markup and styles.</p>
6340. <p>In fact, here are two more examples showing different configurations. In each case, I’m merely increasing or decreasing the number of vertices, which the script uses to produce different sets of coordinates that help position points along the grid.</p>
6341. <p>Need just three sides? All that means is two fewer coordinate sets:</p>
6342. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/vYPzpqJ">Radar chart (Triangle) [forked]</a> by <a href="https://codepen.io/rpsthecoder">Preethi Sam</a>.</p>
6343. <p>Need seven sides? We’ll produce more coordinate sets instead:</p>
6344. <p>See the Pen <a href="https://codepen.io/smashingmag/pen/WNmgdqY">Radar chart (Heptagon) [forked]</a> by <a href="https://codepen.io/rpsthecoder">Preethi Sam</a>.</p>
6345. ]]></content:encoded>
6346.            <author>hello@smashingmagazine.com (Preethi Sam)</author>
6347.            <enclosure url="http://files.smashing.media/articles/draw-radar-charts-web/draw-radar-charts-web.jpg" length="0" type="image/jpg"/>
6348.        </item>
6349.        <item>
6350.            <title><![CDATA[Frequently Heard In My Beginning Front-End Web Development Class]]></title>
6351.            <link>https://smashingmagazine.com/2024/02/frequently-heard-beginning-front-end-web-development-class/</link>
6352.            <guid>https://smashingmagazine.com/2024/02/frequently-heard-beginning-front-end-web-development-class/</guid>
6353.            <pubDate>Thu, 08 Feb 2024 13:00:00 GMT</pubDate>
6354.            <description><![CDATA[What could we learn from entry-level students in front-end web development? As seasoned professionals, you might think you’ve seen it all, but the truth is that the newcomers are asking the most intriguing questions and making connections that those of us who have spent years on the front end may have never considered.]]></description>
6355.            <content:encoded><![CDATA[<p>I felt uninspired for a spell in 2019 and decided to enroll in a beginning-level community college course on web development as a way to “spice” things up, sort of like going backwards in order to move forwards. I had no interest in being an old dog learning new tricks; what I wanted was to look at front-end development through the eyes of a beginner in 2019 after having been a beginner in 2003.</p>
6356. <p>Fast-forward five years, and I’m now teaching that class for the same college, as well as three others. What I gained by reprising my student status is an obsession with “a-ha!” moments. It’s the look in a student’s eyes when something “clicks” and new knowledge is developed. <a href="https://rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/">With the barrier to learning web development seemingly getting higher all the time</a>, here I am, making merry with the basics. (That linked post to Rachel’s blog is what spurred me to go back to school.)</p>
6357. <p>With several years of teaching under my belt, I have plenty of opinions about the learning landscape for web development. But what I am more interested in continues to be vicarious living through the eyes of my entry-level students and the consistent sparks of knowledge they make.</p>
6358. <p>Questions are often the precursor to an “a-ha!” moment. And my students ask some pretty darn interesting questions every term, without fail, questions that have forced me to reconsider not only how I approach curriculum and instruction but also how other people think about The Web™ as a whole.</p>
6359. <p>I’ve made a practice of collecting handfuls of student questions and comments. That way, I can reflect on how I might respond or answer them for future students and reference them as I write and update my lesson plans. I thought I’d share a few of them because, I hope, it will give you an idea of what those getting into the field are curious about. I think you’ll find that as many of us debate and decry the value of JavaScript frameworks, Core Web Vitals, AI, and whether Typescript is a necessary evil, <strong>the people cracking into web development are asking the most interesting questions in the field and are making way different connections</strong> than those of us who have spent forever on the front end.</p>
6360. <p>These are pulled straight from students in the current Spring term. We’re only three weeks into the semester, but check out what sorts of things are already swirling around their minds as we discuss semantics, accessibility, and writing modes.</p>
6361. <blockquote>“I really never thought of this; however, code could be inclusive, and how coding could express empathy. While reading this portion of the context, I was thinking about my Kindle and how the Kindle can have audio, change my font style, larger/smaller font, and lighting. All of this helps me to read and navigate my books better depending on my surroundings and how much accessibility I will need. For example, when I am driving, I love my audiobooks, and at night, I use my dim setting and change font size because it’s the end of the day, and my eyes don’t want to do too much work reading smaller text. It’s really fascinating that coding can do all of this.”</blockquote>
6362.  
6363. <blockquote>“If we are confused about our coding and it doesn’t make sense to us, it will definitely confuse the readers, which is the opposite of our end goal, accessibility. There are also times when we might want to use <code>&lt;div&gt;</code> where we could use <code>&lt;article&gt;</code> or <code>&lt;nav&gt;</code> or any of the other important elements. It’s essential to fully understand the elements and their uses in order to write the cleanest code.”</blockquote>
6364.  
6365. <blockquote>“Tackling CSS logical properties this week felt like a juggling act, trying to keep all those new concepts in the air. Swapping left and right for inline-start and inline-end is a bit confusing, but it’s cool to see how it makes websites more welcoming for different languages.”</blockquote>
6366.  
6367. <blockquote>“What are the legal implications of website liability? I couldn’t imagine the size of a class action lawsuit that Facebook would get smacked with if a rogue developer decided to pin a gif of a strobe light to the top of the world’s newsfeeds. Are websites subject to the same legislation that requires buildings to have wheelchair ramps?”</blockquote>
6368.  
6369. <blockquote>“Sometimes, I wonder how to make all this new stuff work on old browsers that might not get what I’m trying to do. I also get stuck when my page looks great in one language but breaks in another. What’s the best way to check my work in different languages or writing modes?”</blockquote>
6370.  
6371. <blockquote>“One of the big things that really got me stoked was learning how to make content in Flexbox the same size using flex or flex-basis. This was a really big thing for me last semester when I was working on my final project. I spent a lot of time trying to figure out how to make the content in Webflow equal in size.”</blockquote>
6372.  
6373. <blockquote>“Hearing the terms “Writing Modes” and “Logical Properties” in CSS was a bit of a concern at the beginning of this week. A lot of CSS I remember was beginning to come back, but these two were new. After going over the course modules, my concern lifted a lot, mainly because Writing Modes were the layout of text in a certain element. As simple as I thought it was, it was also very important considering how writing modes change in different countries. Learning how these writing modes change the flow of text showed how much more inclusion you could bring to a website, allowing for different languages to be filtered in.”</blockquote>
6374.  
6375. <blockquote>“Although in the previous course, we learned how flexbox and grid can be used to style interesting content on sites, we didn’t study how they were made with CSS. It was surprisingly simple to grasp the basic concepts of setting up a flexbox or grid and how their children can be positioned on a main axis and cross axis. I especially enjoyed setting up grids, as both methods are intuitive, and the concept of selecting the grid lines that an element sits in reminds me of how some programming languages implement arrays and ranges. Python, for instance, allows the user to select the last element of an array using <code>-1</code> just as the grid-column: <code>1</code>/<code>-1</code>; the property can specify that an element spans until the end of a row.”</blockquote>
6376.  
6377. <blockquote>“Logical Properties were intimidating at first, but it was just changing the code to make it make sense in a way. After learning CSS — a bit a while ago — Logical Properties seemed more modern, and I think I adapted to it quickly.”</blockquote>
6378.  
6379. <blockquote>“But as a whole, I could see the building of websites to be a very easy thing to automate, especially in this day and age. Perhaps that is why site builders do not get super specific with their semantics — I usually only find <code>&lt;html&gt;</code>, <code>&lt;body&gt;</code>, and <code>&lt;head&gt;</code>, while the rest is filled with <code>&lt;div&gt;</code>. Especially when it comes to companies that push a lot of articles or pages out onto the internet, I can see how they would not care much for being all-inclusive, as it matters more that they get the content out quickly.”</blockquote>
6380.  
6381. <blockquote>“I did not think I would enjoy coding, but so far, I like this class, and I’m learning so much. I liked getting into CSS a little and making things more customizable. I found it interesting that two elements make your content look the same but have different meanings.”</blockquote>
6382.  
6383. <p>I want to end things with a few choice quotes from students who completed my course in the last term. I share them not as ego boosters but as a reminder that <strong>simplicity is still alive</strong>, well, and good on the web. While many new developers feel pressured to earn their “full stack” <a href="https://css-tricks.com/web-development-merit-badges/">merit badge</a>, the best way to learn the web — and make people excited about it — is still the simple “a-ha!” moment that happens when someone combines HTML with CSS for the first time in a static file.</p>
6384. <blockquote>“I can confidently say that among all the courses I’ve taken, this is the first one where I thoroughly read all the content and watched all the videos in detail because it is so well-structured. Despite the complexity of the subject, you made this course seem surprisingly easy to grasp.”</blockquote>
6385.  
6386. <blockquote>“Man, I’ve learned so much in this class this semester, and it’s finally over. This final project has given me more confidence and ability to troubleshoot and achieve my vision.”</blockquote>
6387.  
6388. <blockquote>“Even though I did not pass, I still truly did enjoy your class. It made me feel smart because coding had felt like an impossible task before.”</blockquote>
6389.  
6390. <blockquote>“I especially appreciate Geoff’s enthusiasm for multiple reasons. I am hoping to change careers, and the classes are helping me get closer to that reality.”</blockquote>
6391.  
6392. <p>These are new people entering the field for the first time who are armed with a solid understanding of the basics and a level of curiosity and excitement that easily could clear the height of <a href="https://en.wikipedia.org/wiki/Mount_Elbert">Mount Elbert</a>.</p>
6393. <p>Isn’t that what we want? What would the web look like if we <strong>treat the next wave of web developers like first-class citizens by lowering the barriers to entry</strong> and rolling out the red carpet for them to crack into a career in front-end? The web is still a big place, and there is room for everyone to find their own groove. <strong>Some things tend to flourish when we democratize them</strong>, and many of us experienced that first-hand when we first sat down and wrote HTML for the very first time without the benefit of organized courses, bootcamps, YouTube channels, or frameworks to lean on. The same magic that sparked us is still there to spark others after all this time, even if we fail to see it.</p>
6394. ]]></content:encoded>
6395.            <author>hello@smashingmagazine.com (Geoff Graham)</author>
6396.            <enclosure url="http://files.smashing.media/articles/frequently-heard-beginning-front-end-web-development-class/frequently-heard-beginning-front-end-web-development-class.jpg" length="0" type="image/jpg"/>
6397.        </item>
6398.    </channel>
6399. </rss>